/* =========================================================
      _vars_
    ========================================================= */
    :root{
      --bg0:#060816;
      --bg1:#0b1030;
      --bg2:#0a123a;

      --card:rgba(255,255,255,.06);
      --stroke:rgba(255,255,255,.12);

      --text:#eef2ff;
      --muted:rgba(238,242,255,.72);

      --accent:#7c5cff;
      --accent2:#22c55e;

      --cyan:#4fd1ff;
      --orange:#ffb020;
    }

    /* =========================================================
      _base_
    ========================================================= */
    html{ scroll-behavior:smooth; }
    body{
      font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background:
        radial-gradient(900px 600px at 15% 10%, rgba(124,92,255,.35) 0%, transparent 65%),
        radial-gradient(700px 500px at 85% 15%, rgba(79,209,255,.25) 0%, transparent 60%),
        radial-gradient(800px 600px at 75% 85%, rgba(34,197,94,.18) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
      color: var(--text);
      overflow-x: hidden;
    }

    ._muted_{ color: var(--muted); }
    ._divider_{ height:1px; background: var(--stroke); margin: 18px 0; }

    /* =========================================================
      _components_
    ========================================================= */
    ._glass_{
      background: var(--card);
      border:1px solid var(--stroke);
      border-radius: 22px;
      backdrop-filter: blur(10px);
      box-shadow: 0 24px 80px rgba(0,0,0,.35);
    }

    ._badge_soft_{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      padding: .45rem .7rem;
      border-radius: 999px;
      font-size: .9rem;
    }

    ._btn_grad_{
      border:none;
      color:#061021;
      font-weight: 800;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      box-shadow: 0 12px 35px rgba(124,92,255,.28);
      transition: transform .15s ease, opacity .15s ease;
    }
    ._btn_grad_:hover{ opacity:.95; transform: translateY(-1px); }

    ._btn_whats_{
      border:none;
      color:#061a0f;
      font-weight: 800;
      background: linear-gradient(90deg, var(--accent2), #86efac);
      box-shadow: 0 12px 35px rgba(34,197,94,.22);
      transition: transform .15s ease, opacity .15s ease;
    }
    ._btn_whats_:hover{ opacity:.95; transform: translateY(-1px); }

    ._section_{
      padding: 40px 0;
    }
    ._section_title_{
      font-weight: 800;
      letter-spacing:-0.02em;
    }

    /* =========================================================
      _nav_ (desktop top)
    ========================================================= */
    ._nav_glass_{
      background: rgba(6,8,22,.60);
      border-bottom:1px solid var(--stroke);
      backdrop-filter: blur(10px);
    }
    ._desktop_nav_only_{}

    /* =========================================================
      _hero_
    ========================================================= */
    ._hero_{
      position:relative;
      padding: 70px 0 30px;
      overflow: hidden;
    }
    ._hero_::before{
      content:"";
      position:absolute;
      inset: -120px -120px auto -120px;
      height: 420px;
      background: radial-gradient(circle at 20% 30%, rgba(124,92,255,.55), transparent 60%);
      filter: blur(40px);
      opacity:.75;
      pointer-events:none;
    }

    ._hero_kicker_{
      display:inline-flex;
      gap:.6rem;
      align-items:center;
      padding:.55rem .85rem;
      border-radius: 999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      color: var(--muted);
      font-size:.92rem;
    }

    ._hero_title_{
      font-weight: 800;
      letter-spacing:-0.03em;
      line-height: 1.05;
    }

    ._hero_lead_{
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.65;
    }

    ._hero_profile_card_{
      position:relative;
      overflow:hidden;
    }
    ._hero_profile_card_::after{
      content:"";
      position:absolute;
      inset:auto -60px -60px auto;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle at 30% 30%, rgba(255,176,32,.35), transparent 60%);
      filter: blur(35px);
      opacity:.75;
      pointer-events:none;
    }

    ._avatar_{
      width: 118px;
      height: 118px;
      border-radius: 26px;
      overflow:hidden;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      flex: 0 0 auto;
    }
    ._avatar_ img{
      width:100%;
      height:100%;
      object-fit: cover;
    }

    ._mini_stat_{
      transition: transform .18s ease, box-shadow .18s ease;
    }
    ._mini_stat_:hover{
      transform: translateY(-3px);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }
    
    /* =========================================================
      _about_ (improvements)
    ========================================================= */
    ._about_chip_{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      padding: .45rem .7rem;
      border-radius: 999px;
      font-size: .9rem;
    }
    
    ._about_point_{
      display:flex;
      gap:.85rem;
      align-items:flex-start;
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    ._about_point_ i{
      width: 42px; height:42px;
      display:flex; align-items:center; justify-content:center;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
    }
    ._about_point_:hover{
      transform: translateY(-3px);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }
    ._about_point_title_{ font-weight: 800; }
    
    ._about_journey_{
      display:flex;
      flex-wrap: wrap;
      gap:10px;
    }
    ._about_step_{
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 14px;
      border-radius: 999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-weight: 700;
    }
    ._about_step_ span{
      width: 26px; height: 26px;
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      color: #061021;
      font-weight: 900;
    }
    
    ._about_photo_card_{
      padding: 18px;
      border-radius: 24px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      box-shadow: 0 22px 70px rgba(0,0,0,.35);
    }
    
    ._about_photo_ring_{
      width: 210px;
      height: 210px;
      margin: 0 auto;
      border-radius: 26px;
      padding: 6px;
      background: linear-gradient(90deg, var(--accent), var(--cyan), var(--accent2));
    }
    ._about_photo_ring_ img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
    }
    
    ._about_stat_{
      padding: 12px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease;
    }
    ._about_stat_:hover{ transform: translateY(-2px); }
    ._about_stat_big_{ font-weight: 900; }


    /* =========================================================
      _services_
    ========================================================= */
    ._service_card_{
      height:100%;
      transition: transform .18s ease, box-shadow .18s ease;
      overflow:hidden;
      position:relative;
    }
    ._service_card_:hover{
      transform: translateY(-4px);
      box-shadow: 0 18px 65px rgba(0,0,0,.35);
    }
    ._service_icon_{
      width: 46px;
      height: 46px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 16px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
    }
    ._service_shine_{
      position:absolute;
      inset:-80px auto auto -80px;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle at 30% 30%, rgba(79,209,255,.25), transparent 65%);
      filter: blur(25px);
      opacity:.7;
      pointer-events:none;
    }

   /* =========================================================
      _contact_ (upgrade)
    ========================================================= */
    ._contact_section_{}
    
    ._contact_tile_{
      border-radius: 22px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      padding: 18px;
      text-align: center;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      height: 100%;
    }
    
    ._contact_tile_:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 70px rgba(0,0,0,.35);
      background: rgba(255,255,255,.05);
    }
    
    ._contact_icon_{
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto 10px;
      font-size: 1.3rem;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.05);
    }
    
    ._contact_icon_.whatsapp{
      background: linear-gradient(135deg, #25D366, #86efac);
      color:#061a0f;
    }
    ._contact_icon_.instagram{
      background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
      color:#fff;
    }
    ._contact_icon_.facebook{
      background: linear-gradient(135deg, #1877f2, #60a5fa);
      color:#fff;
    }
    ._contact_icon_.email{
      background: linear-gradient(135deg, var(--accent), var(--cyan));
      color:#061021;
    }
    ._contact_icon_.location{
      background: linear-gradient(135deg, var(--orange), var(--cyan));
      color:#061021;
    }
    
    ._contact_title_{
      font-weight: 900;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
    }
    
    ._contact_tile_ a{
      color: var(--text);
      text-decoration: none;
      font-weight: 700;
    }
    ._contact_tile_ a:hover{
      text-decoration: underline;
    }
    
    ._contact_cta_{
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap: 14px;
    }
    
    ._contact_btn_whats_{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      background: linear-gradient(90deg, #25D366, #86efac);
      color:#061a0f;
      transition: transform .18s ease;
    }
    ._contact_btn_whats_:hover{
      transform: translateY(-2px);
    }
    
    ._contact_btn_call_{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--text);
      transition: transform .18s ease, background .18s ease;
    }
    ._contact_btn_call_:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
    }


    /* =========================================================
      _floating_whatsapp_
    ========================================================= */
    ._float_whatsapp_{
      position: fixed;
      right: 18px;
      bottom: 92px; /* above bottom nav on mobile */
      z-index: 1050;
      border-radius: 999px;
      padding: .85rem 1rem;
      display:flex;
      gap:.65rem;
      align-items:center;
      background: linear-gradient(90deg, var(--accent2), #86efac);
      color:#072012;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 18px 65px rgba(0,0,0,.35);
      text-decoration:none;
      font-weight: 800;
    }
    ._float_whatsapp_:hover{ opacity:.95; }

    /* =========================================================
      _bottom_nav_ (mobile)
    ========================================================= */
    ._bottom_nav_{
      position: fixed;
      left:0; right:0; bottom:0;
      z-index: 1100;
      background: rgba(6,8,22,.72);
      backdrop-filter: blur(10px);
      border-top: 1px solid var(--stroke);
      padding: .45rem .35rem;
      display:none;
    }
    ._bottom_nav_ a{
      text-decoration:none;
      color: var(--muted);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:.2rem;
      font-size: .78rem;
      padding: .35rem .2rem;
      border-radius: 14px;
    }
    ._bottom_nav_ a ._ico_{
      font-size: 1.2rem;
      line-height: 1;
    }
    ._bottom_nav_ a._active_,
    ._bottom_nav_ a:hover{
      color: var(--text);
      background: rgba(255,255,255,.06);
    }
    
    
    
    /* =========================================================
      _portfolio_ (creative upgrade)
    ========================================================= */
    ._pf_featured_{
      border-radius: 24px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      overflow: hidden;
      box-shadow: 0 26px 90px rgba(0,0,0,.35);
      position: relative;
    }
    
    /* subtle shine animation */
    ._pf_featured_::before{
      content:"";
      position:absolute;
      inset:-40% -30%;
      background: radial-gradient(circle at 30% 30%, rgba(79,209,255,.12), transparent 55%);
      filter: blur(30px);
      opacity: .8;
      pointer-events:none;
    }
    
    ._pf_featured_media_{
      position: relative;
      border-right: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding: 18px;
    }
    
    ._pf_media_frame_{
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(6,8,22,.40);
      overflow: hidden;
      height: 320px; /* control height here */
      display:flex;
      align-items:center;
      justify-content:center;
    }
    
    /* IMPORTANT FIX: image fits nicely (no weird zoom) */
    ._pf_media_frame_ img{
      width: 100%;
      height: 100%;
      object-fit: contain; /* <-- KEY: contain instead of cover */
      object-position: center;
      padding: 6px;
      transform: none;
    }
    
    ._pf_featured_badge_{
      position:absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      padding: .45rem .8rem;
      border-radius: 999px;
      font-weight: 900;
      color:#061021;
      background: linear-gradient(90deg, var(--orange), var(--cyan));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 35px rgba(0,0,0,.25);
    }
    
    ._pf_featured_caption_{
      position:absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 2;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(6,8,22,.45);
      backdrop-filter: blur(10px);
    }
    
    ._pf_caption_title_{
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    ._pf_caption_sub_{
      color: var(--muted);
      font-size: .92rem;
      margin-top: 2px;
    }
    
    ._pf_featured_body_{ position: relative; }
    
    ._pf_pill_{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding: .45rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: .9rem;
      font-weight: 800;
    }
    
    ._pf_title_{
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    
    ._pf_kpi_{
      padding: 12px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
    }
    ._pf_kpi_big_{
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    
    ._pf_tag_{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding: .45rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: .9rem;
      font-weight: 800;
    }
    
    /* Buttons (animated) */
    ._pf_btn_primary_{
      display:inline-flex;
      align-items:center;
      gap:.65rem;
      padding: .75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      color:#061021;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      box-shadow: 0 14px 40px rgba(124,92,255,.25);
      transition: transform .18s ease, opacity .18s ease;
    }
    ._pf_btn_primary_:hover{
      transform: translateY(-2px);
      opacity:.96;
    }
    ._pf_btn_ico_{
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.35);
    }
    
    /* ghost button */
    ._pf_btn_ghost_{
      display:inline-flex;
      align-items:center;
      padding: .75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      color: var(--text);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, background .18s ease;
    }
    ._pf_btn_ghost_:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
    }
    
    /* Bottom cards */
    ._pf_card_{
      border-radius: 22px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      overflow:hidden;
      box-shadow: 0 18px 60px rgba(0,0,0,.25);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    ._pf_card_:hover{
      transform: translateY(-4px);
      box-shadow: 0 24px 80px rgba(0,0,0,.35);
    }
    
    ._pf_card_media_{
      position: relative;
      height: 150px;
      background: rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: 12px;
    }
    
    ._pf_card_media_ img{
      width:100%;
      height:100%;
      object-fit: contain; /* contain for clean look */
      object-position:center;
      background: rgba(6,8,22,.35);
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      padding: 6px;
    }
    
    ._pf_card_badge_{
      position:absolute;
      left: 14px;
      top: 14px;
      z-index: 2;
      padding: .35rem .65rem;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(6,8,22,.55);
      backdrop-filter: blur(10px);
      color: var(--text);
      font-size: .85rem;
      font-weight: 900;
    }
    
    ._pf_card_body_{ padding: 16px 16px 18px; }
    ._pf_card_title_{ font-weight: 900; letter-spacing: -0.01em; font-size: 1.05rem; }
    ._pf_card_meta_{ color: var(--muted); font-size: .9rem; margin: 4px 0 10px; }
    
    ._pf_btn_small_{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding: .55rem .8rem;
      border-radius: 14px;
      text-decoration:none;
      font-weight: 900;
      color: var(--text);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, background .18s ease;
    }
    ._pf_btn_small_:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
    }
    
    /* Responsive */
    @media (max-width: 991.98px){
      ._pf_featured_media_{
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
      }
      ._pf_media_frame_{ height: 240px; }
      ._pf_card_media_{ height: 140px; }
    }
    
    @media (max-width: 575.98px){
      ._pf_media_frame_{ height: 220px; }
      ._pf_card_media_{ height: 130px; }
    }

    /* =========================================================
      _why_website_ (section styling)
    ========================================================= */
    ._why_website_section_{
      position: relative;
    }
    
    ._why_website_intro_{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      border-radius: 18px;
      padding: 14px 16px;
    }
    
    ._why_website_stack_{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    
    ._why_website_point_{
      display:flex;
      gap: 12px;
      align-items:flex-start;
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    
    ._why_website_point_:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 60px rgba(0,0,0,.30);
      background: rgba(255,255,255,.05);
    }
    
    ._why_website_point_icon_{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      flex: 0 0 auto;
    }
    
    ._why_website_point_title_{
      font-weight: 900;
      letter-spacing: -0.01em;
    }
    
    /* Examples */
    ._why_website_example_{
      position: relative;
      border-radius: 20px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      padding: 16px;
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    
    ._why_website_example_:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 70px rgba(0,0,0,.32);
    }
    
    ._why_website_example_head_{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    
    ._why_website_example_badge_{
      display:inline-flex;
      align-items:center;
      padding: .35rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(6,8,22,.45);
      backdrop-filter: blur(10px);
      font-weight: 900;
      font-size: .85rem;
      color: var(--text);
    }
    
    ._why_website_example_title_{
      font-weight: 900;
      letter-spacing: -0.01em;
    }
    
    /* Main highlighted example */
    ._why_website_example_main_{
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
      box-shadow: 0 26px 90px rgba(0,0,0,.35);
    }
    
    ._why_website_main_glow_{
      content:"";
      position:absolute;
      inset: -40px -40px auto -40px;
      height: 220px;
      background: radial-gradient(circle at 25% 35%, rgba(124,92,255,.30), transparent 60%);
      filter: blur(30px);
      opacity: .8;
      pointer-events:none;
    }
    
    ._why_website_example_badge_main_{
      color:#061021;
      background: linear-gradient(90deg, var(--orange), var(--cyan));
      border: 1px solid rgba(255,255,255,.18);
    }
    
    /* Quote */
    ._why_website_quote_{
      display:flex;
      gap: 12px;
      align-items:flex-start;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(6,8,22,.35);
    }
    
    ._why_website_quote_icon_{
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      flex: 0 0 auto;
    }
    
    ._why_website_quote_text_{
      font-weight: 900;
      letter-spacing: -0.01em;
    }
    
    /* CTA buttons */
    ._why_website_cta_{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
    }
    
    ._why_website_btn_primary_{
      display:inline-flex;
      align-items:center;
      gap: .65rem;
      padding: .75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      color:#061021;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      box-shadow: 0 14px 40px rgba(124,92,255,.25);
      transition: transform .18s ease, opacity .18s ease;
    }
    
    ._why_website_btn_primary_:hover{
      transform: translateY(-2px);
      opacity: .96;
    }
    
    ._why_website_btn_ico_{
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.35);
    }
    
    ._why_website_btn_ghost_{
      display:inline-flex;
      align-items:center;
      padding: .75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      color: var(--text);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, background .18s ease;
    }
    
    ._why_website_btn_ghost_:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
    }
    
    /* Footer note */
    ._why_website_footer_note_{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      border-radius: 18px;
      padding: 14px 16px;
      color: var(--muted);
    }
    
    /* Responsive */
    @media (max-width: 991.98px){
      ._why_website_example_head_{
        justify-content:flex-start;
      }
    }
    
    
        /* =========================================================
      _why_me_ (wow section)
    ========================================================= */
    ._why_me_section_{ position: relative; }
    
    ._why_me_intro_{
      display:flex;
      gap: 12px;
      align-items:flex-start;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
    }
    
    ._why_me_intro_icon_{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      flex: 0 0 auto;
    }
    
    ._why_me_intro_title_{
      font-weight: 900;
      letter-spacing: -0.01em;
      margin-bottom: 2px;
    }
    
    ._why_me_card_{
      border-radius: 20px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      padding: 16px;
      height: 100%;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      position: relative;
      overflow:hidden;
    }
    
    ._why_me_card_::before{
      content:"";
      position:absolute;
      inset:-60px auto auto -60px;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle at 30% 30%, rgba(79,209,255,.12), transparent 60%);
      filter: blur(25px);
      opacity: .8;
      pointer-events:none;
    }
    
    ._why_me_card_:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 70px rgba(0,0,0,.30);
      background: rgba(255,255,255,.05);
    }
    
    ._why_me_card_icon_{
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      margin-bottom: 10px;
    }
    
    ._why_me_card_title_{
      font-weight: 900;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    
    /* Right main wow card */
    ._why_me_main_{
      position: relative;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
      padding: 18px;
      height: 100%;
      overflow:hidden;
      box-shadow: 0 26px 90px rgba(0,0,0,.35);
    }
    
    ._why_me_main_glow_{
      position:absolute;
      inset: -50px -50px auto -50px;
      height: 240px;
      background: radial-gradient(circle at 25% 35%, rgba(124,92,255,.30), transparent 60%);
      filter: blur(30px);
      opacity: .85;
      pointer-events:none;
    }
    
    ._why_me_main_badge_{
      display:inline-flex;
      align-items:center;
      padding: .35rem .7rem;
      border-radius: 999px;
      font-weight: 900;
      color:#061021;
      background: linear-gradient(90deg, var(--orange), var(--cyan));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 35px rgba(0,0,0,.22);
      margin-bottom: 10px;
    }
    
    ._why_me_main_title_{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: 1.25rem;
      margin-bottom: 6px;
    }
    
    ._why_me_main_list_{ display:flex; flex-direction:column; gap: 10px; }
    
    ._why_me_check_{
      display:flex;
      gap: 10px;
      align-items:center;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(6,8,22,.35);
    }
    
    ._why_me_check_ i{ font-size: 1.05rem; }
    ._why_me_check_ span{ color: var(--muted); font-weight: 700; }
    
    /* CTA */
    ._why_me_main_cta_{ display:flex; flex-wrap:wrap; gap: 10px; }
    
    ._why_me_btn_primary_{
      display:inline-flex;
      align-items:center;
      gap:.65rem;
      padding: .75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      color:#061021;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      box-shadow: 0 14px 40px rgba(124,92,255,.25);
      transition: transform .18s ease, opacity .18s ease;
    }
    
    ._why_me_btn_primary_:hover{
      transform: translateY(-2px);
      opacity:.96;
    }
    
    ._why_me_btn_ico_{
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.35);
    }
    
    ._why_me_btn_ghost_{
      display:inline-flex;
      align-items:center;
      padding: .75rem 1rem;
      border-radius: 16px;
      text-decoration:none;
      font-weight: 900;
      color: var(--text);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, background .18s ease;
    }
    
    ._why_me_btn_ghost_:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
    }
    
    ._why_me_note_{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      border-radius: 16px;
      padding: 12px 14px;
      color: var(--muted);
    }
    
    /* Responsive */
    @media (max-width: 575.98px){
      ._why_me_intro_{ flex-direction: column; }
    }



    /* =========================================================
      _responsive_
    ========================================================= */
    @media (max-width: 991.98px){
      body{ padding-bottom: 74px; }
      ._bottom_nav_{ display:block; }
      ._desktop_nav_only_{ display:none !important; }
    }

    @media (min-width: 992px){
      ._float_whatsapp_{ bottom: 24px; }
    }