/* ============================================================
       CSS CUSTOM PROPERTIES
    ============================================================ */
    :root {
      --clr-bg:        #020816;
      --clr-bg2:       #060f1e;
      --clr-surface:   rgba(255,255,255,0.03);
      --clr-glass:     rgba(255,255,255,0.06);
      --clr-border:    rgba(255,255,255,0.08);
      --clr-blue:      #1a6fff;
      --clr-cyan:      #00d4ff;
      --clr-green:     #00e676;
      --clr-purple:    #a259ff;
      --clr-pink:      #ff6b9d;
      --clr-navy:      #0d1b3e;
      --clr-white:     #ffffff;
      --clr-muted:     rgba(255,255,255,0.5);
      --grad-primary:  linear-gradient(135deg,#1a6fff 0%,#00d4ff 100%);
      --grad-purple:   linear-gradient(135deg,#a259ff 0%,#1a6fff 100%);
      --grad-green:    linear-gradient(135deg,#00e676 0%,#00d4ff 100%);
      --grad-pink:     linear-gradient(135deg,#ff6b9d 0%,#a259ff 100%);
      --font:          'Segoe UI',system-ui,-apple-system,sans-serif;
      --transition:    .3s cubic-bezier(.4,0,.2,1);
      --radius-sm:     8px;
      --radius-md:     14px;
      --radius-lg:     22px;
      --radius-xl:     32px;
    }

    /* ── Reset ── */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:var(--font);
      background:var(--clr-bg);
      color:var(--clr-white);
      line-height:1.6;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    ul{list-style:none}
    button{cursor:pointer;border:none;outline:none;font-family:inherit}
    img{max-width:100%;display:block}

    /* ── Utility ── */
    .container{width:100%;max-width:1260px;margin:0 auto;padding:0 24px}
    .grad-text{
      background:var(--grad-primary);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .section-label{
      display:inline-flex;align-items:center;gap:8px;
      font-size:.72rem;font-weight:700;letter-spacing:.14em;
      text-transform:uppercase;color:var(--clr-cyan);margin-bottom:10px;
    }
    .section-label::before{
      content:'';display:inline-block;width:22px;height:2px;
      background:var(--grad-primary);border-radius:2px;
    }
    .section-title{
      font-size:clamp(1.7rem,3.5vw,2.4rem);
      font-weight:900;line-height:1.2;margin-bottom:8px;
    }
    .section-sub{color:var(--clr-muted);font-size:.95rem;max-width:520px}
    .section-header{
      display:flex;align-items:flex-end;justify-content:space-between;
      flex-wrap:wrap;gap:16px;margin-bottom:40px;
    }
    .view-all{
      display:inline-flex;align-items:center;gap:6px;
      font-size:.85rem;font-weight:600;color:var(--clr-cyan);
      padding:8px 20px;border:1px solid rgba(0,212,255,.2);
      border-radius:50px;transition:var(--transition);white-space:nowrap;
    }
    .view-all:hover{background:rgba(0,212,255,.1);border-color:var(--clr-cyan);transform:translateX(3px)}
    .badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.68rem;font-weight:700;letter-spacing:.04em}
    .badge-cyan  {background:rgba(0,212,255,.12);color:var(--clr-cyan)}
    .badge-green {background:rgba(0,230,118,.12);color:var(--clr-green)}
    .badge-purple{background:rgba(162,89,255,.12);color:var(--clr-purple)}
    .badge-blue  {background:rgba(26,111,255,.15);color:#6aafff}
    .stars{color:#ffc107;font-size:.72rem;letter-spacing:1px}

    /* ============================================================
       CANVAS BACKGROUND
    ============================================================ */
    #bgCanvas{
      position:fixed;inset:0;z-index:0;
      pointer-events:none;opacity:.6;
    }

    /* ============================================================
       PAGE WRAPPER
    ============================================================ */
    .page-wrapper{position:relative;z-index:1}

    /* ============================================================
       LOADER
    ============================================================ */
    .loader{
      position:fixed;inset:0;z-index:9999;
      background:var(--clr-bg);
      display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:20px;
      transition:opacity .6s ease, visibility .6s ease;
    }
    .loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
    .loader-logo{
      font-size:2rem;font-weight:900;letter-spacing:-.02em;
      animation:loader-pulse 1.5s ease-in-out infinite;
    }
    .loader-logo span{color:var(--clr-cyan)}
    @keyframes loader-pulse{
      0%,100%{opacity:1;transform:scale(1)}
      50%{opacity:.6;transform:scale(.97)}
    }
    .loader-bar{
      width:200px;height:3px;background:rgba(255,255,255,.08);
      border-radius:50px;overflow:hidden;
    }
    .loader-fill{
      height:100%;width:0;background:var(--grad-primary);
      border-radius:50px;animation:loader-fill 1.8s ease forwards;
    }
    @keyframes loader-fill{to{width:100%}}

    /* ============================================================
       CURSOR GLOW
    ============================================================ */
    .cursor-glow{
      position:fixed;width:300px;height:300px;
      border-radius:50%;pointer-events:none;z-index:0;
      background:radial-gradient(circle,rgba(26,111,255,.08) 0%,transparent 70%);
      transform:translate(-50%,-50%);
      transition:transform .1s linear;
    }

    /* ============================================================
       HEADER
    ============================================================ */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      background:rgba(2,8,22,.7);
      backdrop-filter:blur(20px) saturate(200%);
      -webkit-backdrop-filter:blur(20px) saturate(200%);
      border-bottom:1px solid var(--clr-border);
      transition:all var(--transition);
    }
    .site-header.scrolled{
      background:rgba(2,8,22,.92);
      box-shadow:0 4px 30px rgba(0,0,0,.5);
    }
    .header-inner{display:flex;align-items:center;gap:20px;height:68px}
    .logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .logo-icon{
      width:38px;height:38px;background:var(--grad-primary);
      border-radius:10px;display:flex;align-items:center;
      justify-content:center;font-size:1.2rem;
      box-shadow:0 0 20px rgba(26,111,255,.4);
      animation:logo-glow 3s ease-in-out infinite;
    }
    @keyframes logo-glow{
      0%,100%{box-shadow:0 0 20px rgba(26,111,255,.4)}
      50%{box-shadow:0 0 35px rgba(0,212,255,.6)}
    }
    .logo-text{font-size:1.2rem;font-weight:900;letter-spacing:-.02em}
    .logo-text span{color:var(--clr-cyan)}
    .nav-links{display:flex;align-items:center;gap:2px}
    .nav-links a{
      padding:7px 14px;border-radius:8px;font-size:.87rem;
      font-weight:500;color:rgba(255,255,255,.7);transition:var(--transition);
      position:relative;
    }
    .nav-links a::after{
      content:'';position:absolute;bottom:2px;left:50%;right:50%;
      height:2px;background:var(--grad-primary);border-radius:2px;
      transition:var(--transition);
    }
    .nav-links a:hover::after,.nav-links a.active::after{left:14px;right:14px}
    .nav-links a:hover,.nav-links a.active{color:var(--clr-white)}
    .header-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
    .header-search{
      display:flex;align-items:center;background:rgba(255,255,255,.05);
      border:1px solid var(--clr-border);border-radius:50px;
      padding:6px 14px;gap:8px;transition:var(--transition);
    }
    .header-search:focus-within{
      border-color:var(--clr-blue);
      box-shadow:0 0 0 3px rgba(26,111,255,.15),0 0 20px rgba(26,111,255,.1);
    }
    .header-search input{
      background:none;border:none;outline:none;color:var(--clr-white);
      font-size:.85rem;width:160px;
    }
    .header-search input::placeholder{color:var(--clr-muted)}
    .header-search span{color:var(--clr-muted);font-size:1rem}
    .btn-submit{
      background:var(--grad-primary);color:var(--clr-white);
      font-size:.82rem;font-weight:700;padding:9px 18px;
      border-radius:50px;transition:var(--transition);
      box-shadow:0 4px 15px rgba(26,111,255,.35);white-space:nowrap;
      position:relative;overflow:hidden;
    }
    .btn-submit::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
      transform:translateX(-100%);transition:.4s ease;
    }
    .btn-submit:hover::after{transform:translateX(100%)}
    .btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(26,111,255,.5)}
    .hamburger{
      display:none;flex-direction:column;justify-content:center;
      gap:5px;width:36px;height:36px;background:var(--clr-glass);
      border:1px solid var(--clr-border);border-radius:8px;padding:7px;
    }
    .hamburger span{
      display:block;height:2px;background:var(--clr-white);
      border-radius:2px;transition:var(--transition);
    }
    .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
    .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .mobile-nav{
      display:none;flex-direction:column;
      background:rgba(2,8,22,.98);
      border-top:1px solid var(--clr-border);
      padding:16px 24px;gap:4px;
    }
    .mobile-nav a{
      display:block;padding:10px 14px;border-radius:8px;
      font-size:.95rem;font-weight:500;color:rgba(255,255,255,.8);
      transition:var(--transition);
    }
    .mobile-nav a:hover{background:var(--clr-glass);color:var(--clr-white)}

    /* ============================================================
       HERO
    ============================================================ */
    .hero{
      min-height:100vh;display:flex;align-items:center;
      padding-top:68px;position:relative;overflow:hidden;
      background:radial-gradient(ellipse at 65% 45%,rgba(26,111,255,.2) 0%,transparent 55%),
                 radial-gradient(ellipse at 20% 80%,rgba(162,89,255,.15) 0%,transparent 50%),
                 radial-gradient(ellipse at 80% 10%,rgba(0,212,255,.1) 0%,transparent 40%),
                 linear-gradient(170deg,#020816 0%,#060f1e 60%,#0a1a30 100%);
    }
    /* Grid lines */
    .hero-grid-bg{
      position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(26,111,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(26,111,255,.04) 1px,transparent 1px);
      background-size:60px 60px;pointer-events:none;
      animation:grid-move 20s linear infinite;
    }
    @keyframes grid-move{0%{background-position:0 0}100%{background-position:60px 60px}}

    /* Orbs */
    .hero-orb{
      position:absolute;border-radius:50%;pointer-events:none;
      filter:blur(60px);
    }
    .orb-1{
      width:500px;height:500px;
      background:rgba(26,111,255,.12);
      top:-100px;right:100px;
      animation:orb-float 8s ease-in-out infinite;
    }
    .orb-2{
      width:350px;height:350px;
      background:rgba(162,89,255,.1);
      bottom:50px;left:50px;
      animation:orb-float 10s ease-in-out infinite reverse;
    }
    .orb-3{
      width:250px;height:250px;
      background:rgba(0,212,255,.08);
      top:30%;right:15%;
      animation:orb-float 7s ease-in-out infinite 2s;
    }
    @keyframes orb-float{
      0%,100%{transform:translate(0,0) scale(1)}
      33%{transform:translate(-20px,20px) scale(1.05)}
      66%{transform:translate(20px,-10px) scale(.95)}
    }

    /* Particles */
    .particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .particle{
      position:absolute;border-radius:50%;
      animation:particle-float linear infinite;
    }
    @keyframes particle-float{
      0%{transform:translateY(100vh) rotate(0deg);opacity:0}
      10%{opacity:1}
      90%{opacity:1}
      100%{transform:translateY(-100px) rotate(720deg);opacity:0}
    }

    .hero-inner{
      display:grid;grid-template-columns:1fr 440px;
      gap:60px;align-items:center;
      padding:90px 0 90px;
      position:relative;z-index:2;
    }

    /* Hero kicker */
    .hero-kicker{
      display:inline-flex;align-items:center;gap:10px;
      background:rgba(0,212,255,.08);
      border:1px solid rgba(0,212,255,.2);
      border-radius:50px;padding:7px 18px;
      font-size:.75rem;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;
      color:var(--clr-cyan);margin-bottom:24px;
      animation:fade-up .8s ease both;
    }
    .kicker-dot{
      width:7px;height:7px;background:var(--clr-cyan);
      border-radius:50%;box-shadow:0 0 10px var(--clr-cyan);
      animation:blink 1.5s infinite;
    }
    @keyframes blink{
      0%,100%{opacity:1;box-shadow:0 0 10px var(--clr-cyan)}
      50%{opacity:.3;box-shadow:0 0 4px var(--clr-cyan)}
    }

    /* Hero title */
    .hero-title{
      font-size:clamp(2.4rem,5.5vw,4rem);font-weight:900;
      line-height:1.1;letter-spacing:-.04em;margin-bottom:22px;
      animation:fade-up .8s ease .1s both;
    }
    .hero-title .line{display:block;overflow:hidden}
    .hero-title .word{display:inline-block;animation:word-in .8s ease both}
    .hero-title .word:nth-child(2){animation-delay:.1s}
    .hero-title .word:nth-child(3){animation-delay:.2s}
    @keyframes word-in{
      from{transform:translateY(100%);opacity:0}
      to{transform:translateY(0);opacity:1}
    }
    .hero-title .highlight{
      background:linear-gradient(135deg,#1a6fff,#00d4ff,#a259ff);
      background-size:200% 200%;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      animation:gradient-shift 4s ease infinite;
    }
    @keyframes gradient-shift{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    .hero-desc{
      color:var(--clr-muted);font-size:1.05rem;max-width:500px;
      margin-bottom:36px;animation:fade-up .8s ease .2s both;
    }

    /* Hero search */
    .hero-search-wrap{
      display:flex;align-items:center;
      background:rgba(255,255,255,.05);
      border:1.5px solid rgba(255,255,255,.1);
      border-radius:50px;padding:6px 6px 6px 22px;
      max-width:540px;gap:10px;margin-bottom:28px;
      backdrop-filter:blur(12px);transition:var(--transition);
      animation:fade-up .8s ease .3s both;
    }
    .hero-search-wrap:focus-within{
      border-color:var(--clr-blue);
      box-shadow:0 0 0 4px rgba(26,111,255,.12),0 0 30px rgba(26,111,255,.15);
    }
    .hero-search-wrap span{color:var(--clr-muted);font-size:1.1rem;flex-shrink:0}
    .hero-search-wrap input{
      flex:1;background:none;border:none;outline:none;
      color:var(--clr-white);font-size:.95rem;
    }
    .hero-search-wrap input::placeholder{color:var(--clr-muted)}
    .btn-search{
      background:var(--grad-primary);color:var(--clr-white);
      font-size:.88rem;font-weight:700;padding:12px 28px;
      border-radius:50px;flex-shrink:0;transition:var(--transition);
      box-shadow:0 4px 18px rgba(26,111,255,.4);
      position:relative;overflow:hidden;
    }
    .btn-search::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
      transform:translateX(-100%);transition:.4s;
    }
    .btn-search:hover::after{transform:translateX(100%)}
    .btn-search:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,111,255,.5)}

    /* Chips */
    .category-chips{
      display:flex;flex-wrap:wrap;gap:8px;
      animation:fade-up .8s ease .4s both;
    }
    .chip{
      display:inline-flex;align-items:center;gap:6px;
      background:rgba(255,255,255,.05);border:1px solid var(--clr-border);
      border-radius:50px;padding:7px 16px;font-size:.82rem;
      font-weight:500;color:rgba(255,255,255,.75);cursor:pointer;
      transition:var(--transition);position:relative;overflow:hidden;
    }
    .chip::after{
      content:'';position:absolute;inset:0;
      background:var(--grad-primary);opacity:0;transition:var(--transition);
    }
    .chip:hover,.chip.active{
      border-color:transparent;color:var(--clr-white);
      transform:translateY(-2px);
      box-shadow:0 4px 14px rgba(26,111,255,.25);
    }
    .chip:hover::after,.chip.active::after{opacity:.15}
    .chip span{position:relative;z-index:1;display:flex;align-items:center;gap:6px}

    /* Stats */
    .stats-row{
      display:flex;gap:36px;margin-top:40px;
      animation:fade-up .8s ease .5s both;
    }
    .stat-item{display:flex;flex-direction:column;gap:2px}
    .stat-num{
      font-size:1.7rem;font-weight:900;
      background:var(--grad-primary);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;line-height:1;
    }
    .stat-label{font-size:.72rem;color:var(--clr-muted)}

    /* Phone mockup */
    .hero-phone-wrap{
      display:flex;justify-content:center;align-items:center;
      position:relative;animation:fade-left .9s ease .2s both;
    }
    @keyframes fade-left{
      from{opacity:0;transform:translateX(60px)}
      to{opacity:1;transform:translateX(0)}
    }
    .phone-glow-ring{
      position:absolute;width:380px;height:380px;border-radius:50%;
      border:1px solid rgba(26,111,255,.15);
      animation:ring-pulse 3s ease-in-out infinite;
    }
    .phone-glow-ring:nth-child(2){
      width:320px;height:320px;border-color:rgba(0,212,255,.1);
      animation-delay:.5s;
    }
    @keyframes ring-pulse{
      0%,100%{transform:scale(1);opacity:.6}
      50%{transform:scale(1.06);opacity:1}
    }
    .phone-glow-core{
      position:absolute;width:280px;height:280px;border-radius:50%;
      background:radial-gradient(circle,rgba(26,111,255,.2) 0%,transparent 70%);
      animation:core-pulse 4s ease-in-out infinite;
    }
    @keyframes core-pulse{
      0%,100%{transform:scale(1);opacity:.8}
      50%{transform:scale(1.1);opacity:1}
    }
    .phone-mockup{
      width:265px;
      background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
      border:1.5px solid rgba(255,255,255,.12);
      border-radius:42px;padding:14px;
      backdrop-filter:blur(20px);
      box-shadow:0 30px 80px rgba(0,0,0,.7),
                 inset 0 1px 0 rgba(255,255,255,.1),
                 0 0 0 1px rgba(255,255,255,.04);
      animation:phone-float 6s ease-in-out infinite;
      position:relative;z-index:1;
    }
    @keyframes phone-float{
      0%,100%{transform:translateY(0) rotate(.5deg)}
      50%{transform:translateY(-20px) rotate(-.5deg)}
    }
    .phone-notch{
      width:80px;height:9px;background:rgba(0,0,0,.7);
      border-radius:50px;margin:0 auto 14px;
    }
    .phone-status{
      display:flex;justify-content:space-between;
      font-size:.6rem;color:rgba(255,255,255,.6);margin-bottom:12px;
    }
    .phone-search-bar{
      background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
      border-radius:10px;padding:7px 12px;font-size:.68rem;
      color:rgba(255,255,255,.5);margin-bottom:12px;
      display:flex;align-items:center;gap:6px;
    }
    .phone-app-grid{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:8px;margin-bottom:12px;
    }
    .phone-app-item{
      display:flex;flex-direction:column;align-items:center;gap:4px;
      padding:6px;border-radius:10px;transition:var(--transition);cursor:pointer;
    }
    .phone-app-item:hover{background:rgba(255,255,255,.06)}
    .phone-app-icon{
      width:46px;height:46px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.3rem;box-shadow:0 4px 12px rgba(0,0,0,.4);
      transition:var(--transition);
    }
    .phone-app-item:hover .phone-app-icon{transform:scale(1.1)}
    .phone-app-name{font-size:.56rem;color:rgba(255,255,255,.7);text-align:center}
    .phone-featured-card{
      background:var(--grad-primary);border-radius:14px;padding:12px;
      display:flex;align-items:center;gap:10px;
      box-shadow:0 8px 24px rgba(26,111,255,.3);
      animation:card-glow 3s ease-in-out infinite;
    }
    @keyframes card-glow{
      0%,100%{box-shadow:0 8px 24px rgba(26,111,255,.3)}
      50%{box-shadow:0 8px 32px rgba(0,212,255,.4)}
    }
    .phone-feat-icon{
      width:40px;height:40px;background:rgba(255,255,255,.2);
      border-radius:10px;display:flex;align-items:center;
      justify-content:center;font-size:1.3rem;flex-shrink:0;
    }
    .phone-feat-info{flex:1}
    .phone-feat-title{font-size:.72rem;font-weight:700;margin-bottom:2px}
    .phone-feat-sub{font-size:.58rem;opacity:.75}
    .phone-feat-btn{
      background:rgba(255,255,255,.25);border:none;border-radius:50px;
      color:white;font-size:.6rem;font-weight:700;padding:5px 12px;cursor:pointer;
      transition:var(--transition);
    }
    .phone-feat-btn:hover{background:rgba(255,255,255,.4)}

    /* Floating tags */
    .float-tag{
      position:absolute;
      background:rgba(10,20,40,.85);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(16px);
      border-radius:var(--radius-md);padding:10px 14px;
      font-size:.78rem;font-weight:600;
      display:flex;align-items:center;gap:8px;z-index:2;
    }
    .float-tag-1{top:40px;left:-60px;animation:tag-float1 5s ease-in-out infinite}
    .float-tag-2{bottom:60px;right:-50px;animation:tag-float2 6s ease-in-out infinite}
    .float-tag-3{top:160px;right:-65px;animation:tag-float3 7s ease-in-out infinite}
    @keyframes tag-float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    @keyframes tag-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @keyframes tag-float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
    .tag-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .tag-dot-green {background:var(--clr-green);box-shadow:0 0 8px var(--clr-green)}
    .tag-dot-cyan  {background:var(--clr-cyan);box-shadow:0 0 8px var(--clr-cyan)}
    .tag-dot-purple{background:var(--clr-purple);box-shadow:0 0 8px var(--clr-purple)}

    /* Scroll indicator */
    .scroll-indicator{
      position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
      display:flex;flex-direction:column;align-items:center;gap:8px;
      color:var(--clr-muted);font-size:.72rem;letter-spacing:.1em;
      text-transform:uppercase;animation:fade-up 1s ease 1s both;
    }
    .scroll-mouse{
      width:22px;height:34px;border:2px solid rgba(255,255,255,.2);
      border-radius:50px;display:flex;justify-content:center;padding-top:6px;
    }
    .scroll-wheel{
      width:3px;height:8px;background:var(--clr-cyan);
      border-radius:50px;animation:scroll-wheel 2s ease infinite;
    }
    @keyframes scroll-wheel{
      0%{transform:translateY(0);opacity:1}
      100%{transform:translateY(12px);opacity:0}
    }

    /* ============================================================
       FEATURE STRIP
    ============================================================ */
    .feature-strip{
      background:rgba(255,255,255,.02);
      border-top:1px solid var(--clr-border);
      border-bottom:1px solid var(--clr-border);
      position:relative;overflow:hidden;
    }
    .feature-strip::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(90deg,transparent,rgba(26,111,255,.03),transparent);
      animation:strip-shimmer 4s ease infinite;
    }
    @keyframes strip-shimmer{
      0%{transform:translateX(-100%)}100%{transform:translateX(100%)}
    }
    .strip-inner{display:grid;grid-template-columns:repeat(4,1fr)}
    .strip-item{
      display:flex;align-items:center;gap:14px;padding:26px 28px;
      border-right:1px solid var(--clr-border);transition:var(--transition);
      position:relative;overflow:hidden;cursor:default;
    }
    .strip-item::after{
      content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
      background:var(--grad-primary);transform:scaleX(0);transition:var(--transition);
    }
    .strip-item:hover::after{transform:scaleX(1)}
    .strip-item:hover{background:rgba(255,255,255,.02)}
    .strip-item:last-child{border-right:none}
    .strip-icon{
      width:48px;height:48px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.4rem;flex-shrink:0;transition:var(--transition);
    }
    .strip-item:hover .strip-icon{transform:scale(1.1) rotate(-5deg)}
    .strip-icon-blue  {background:rgba(26,111,255,.12)}
    .strip-icon-cyan  {background:rgba(0,212,255,.1)}
    .strip-icon-green {background:rgba(0,230,118,.1)}
    .strip-icon-purple{background:rgba(162,89,255,.1)}
    .strip-label{font-size:.7rem;color:var(--clr-muted);margin-bottom:3px}
    .strip-value{font-size:1rem;font-weight:700}

    /* ============================================================
       REVEAL ANIMATION
    ============================================================ */
    .reveal{
      opacity:0;transform:translateY(40px);
      transition:opacity .7s ease,transform .7s ease;
    }
    .reveal.visible{opacity:1;transform:translateY(0)}
    .reveal-left{
      opacity:0;transform:translateX(-40px);
      transition:opacity .7s ease,transform .7s ease;
    }
    .reveal-left.visible{opacity:1;transform:translateX(0)}
    .reveal-right{
      opacity:0;transform:translateX(40px);
      transition:opacity .7s ease,transform .7s ease;
    }
    .reveal-right.visible{opacity:1;transform:translateX(0)}

    /* Stagger children */
    .stagger-children>*{
      opacity:0;transform:translateY(30px);
      transition:opacity .5s ease,transform .5s ease;
    }
    .stagger-children.visible>*{opacity:1;transform:translateY(0)}
    .stagger-children.visible>*:nth-child(1){transition-delay:.05s}
    .stagger-children.visible>*:nth-child(2){transition-delay:.1s}
    .stagger-children.visible>*:nth-child(3){transition-delay:.15s}
    .stagger-children.visible>*:nth-child(4){transition-delay:.2s}
    .stagger-children.visible>*:nth-child(5){transition-delay:.25s}
    .stagger-children.visible>*:nth-child(6){transition-delay:.3s}

    /* ============================================================
       SECTIONS
    ============================================================ */
    section{padding:90px 0}

    /* ============================================================
       APP CARDS
    ============================================================ */
    .apps-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
      gap:20px;
    }
    .app-card{
      background:rgba(255,255,255,.04);
      border:1px solid var(--clr-border);
      border-radius:var(--radius-lg);padding:22px;
      display:flex;flex-direction:column;gap:14px;
      transition:all .4s cubic-bezier(.4,0,.2,1);
      cursor:pointer;position:relative;overflow:hidden;
    }
    .app-card::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(26,111,255,.08),rgba(0,212,255,.04));
      opacity:0;transition:var(--transition);
    }
    .app-card::after{
      content:'';position:absolute;top:0;left:0;right:0;height:2px;
      background:var(--grad-primary);transform:scaleX(0);
      transition:var(--transition);transform-origin:left;
    }
    .app-card:hover{
      border-color:rgba(26,111,255,.35);
      transform:translateY(-8px) scale(1.01);
      box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(26,111,255,.12);
    }
    .app-card:hover::before{opacity:1}
    .app-card:hover::after{transform:scaleX(1)}
    .app-card-top{display:flex;align-items:flex-start;gap:12px}
    .app-icon{
      width:56px;height:56px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.8rem;flex-shrink:0;
      box-shadow:0 6px 20px rgba(0,0,0,.4);
      transition:var(--transition);
    }
    .app-card:hover .app-icon{transform:scale(1.1) rotate(-5deg)}
    .app-meta{flex:1}
    .app-name{font-size:.95rem;font-weight:700;margin-bottom:3px}
    .app-cat{font-size:.72rem;color:var(--clr-muted)}
    .app-rank{
      width:28px;height:28px;background:rgba(255,255,255,.06);
      border:1px solid var(--clr-border);border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-size:.7rem;font-weight:800;color:var(--clr-cyan);flex-shrink:0;
    }
    .app-desc{
      font-size:.8rem;color:var(--clr-muted);line-height:1.5;
      display:-webkit-box;-webkit-line-clamp:2;
      -webkit-box-orient:vertical;overflow:hidden;
    }
    .app-card-bottom{
      display:flex;align-items:center;justify-content:space-between;gap:8px;
    }
    .app-rating{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--clr-muted)}
    .app-dl-btn{
      background:var(--grad-primary);color:var(--clr-white);
      font-size:.75rem;font-weight:700;padding:7px 16px;
      border-radius:50px;transition:var(--transition);
      position:relative;overflow:hidden;
    }
    .app-dl-btn::after{
      content:'';position:absolute;inset:0;
      background:rgba(255,255,255,.15);
      transform:translateX(-100%);transition:.3s;
    }
    .app-dl-btn:hover::after{transform:translateX(100%)}
    .app-dl-btn:hover{transform:scale(1.05)}

    /* ============================================================
       COLLECTIONS
    ============================================================ */
    .collections-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    }
    .collection-card{
      border-radius:var(--radius-xl);padding:32px;position:relative;
      overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);
      min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;
    }
    .collection-card:hover{
      transform:translateY(-8px) scale(1.01);
      box-shadow:0 25px 60px rgba(0,0,0,.6);
    }
    .col-bg{position:absolute;inset:0;z-index:0;transition:var(--transition)}
    .collection-card:hover .col-bg{transform:scale(1.05)}
    .col-bg-1{background:linear-gradient(135deg,#0a1545,#1a6fff 60%,#00d4ff)}
    .col-bg-2{background:linear-gradient(135deg,#1a0d40,#a259ff 60%,#1a6fff)}
    .col-bg-3{background:linear-gradient(135deg,#052516,#00e676 60%,#00d4ff)}
    .col-bg-4{background:linear-gradient(135deg,#2a0f00,#ff6b35 60%,#ffc107)}
    .col-bg-5{background:linear-gradient(135deg,#1a0020,#a259ff 50%,#ff6b9d)}
    .col-bg-6{background:linear-gradient(135deg,#001230,#1a6fff 50%,#00e676)}
    .collection-card::after{
      content:'';position:absolute;inset:0;z-index:1;
      background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 60%);
    }
    .col-emoji{
      position:absolute;top:22px;right:26px;font-size:3.8rem;
      z-index:2;transition:all .4s cubic-bezier(.34,1.56,.64,1);
    }
    .collection-card:hover .col-emoji{transform:scale(1.2) rotate(-8deg)}
    .col-content{position:relative;z-index:2}
    .col-count{font-size:.72rem;font-weight:600;opacity:.8;margin-bottom:4px}
    .col-title{font-size:1.2rem;font-weight:800;margin-bottom:5px}
    .col-sub{font-size:.78rem;opacity:.75}
    .col-arrow{
      position:absolute;bottom:26px;right:26px;z-index:2;
      width:38px;height:38px;background:rgba(255,255,255,.15);
      border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:1rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);
    }
    .collection-card:hover .col-arrow{
      background:rgba(255,255,255,.3);
      transform:translate(4px,-4px);
    }

    /* ============================================================
       CTA BAND
    ============================================================ */
    .cta-band{
      background:linear-gradient(135deg,#070e24,#0f2050,#071528);
      border-top:1px solid rgba(26,111,255,.2);
      border-bottom:1px solid rgba(26,111,255,.2);
      padding:80px 0;position:relative;overflow:hidden;
    }
    .cta-band::before{
      content:'';position:absolute;
      width:600px;height:600px;border-radius:50%;
      background:radial-gradient(circle,rgba(0,212,255,.08) 0%,transparent 70%);
      top:-200px;right:-100px;pointer-events:none;
      animation:orb-float 10s ease-in-out infinite;
    }
    .cta-band::after{
      content:'';position:absolute;
      width:400px;height:400px;border-radius:50%;
      background:radial-gradient(circle,rgba(162,89,255,.08) 0%,transparent 70%);
      bottom:-150px;left:-50px;pointer-events:none;
      animation:orb-float 8s ease-in-out infinite reverse;
    }
    .cta-inner{
      display:grid;grid-template-columns:1fr auto;
      align-items:center;gap:40px;position:relative;z-index:1;
    }
    .cta-title{
      font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;
      line-height:1.2;margin-bottom:12px;
    }
    .cta-sub{color:var(--clr-muted);font-size:.95rem;max-width:520px}
    .cta-buttons{display:flex;gap:12px;flex-shrink:0}
    .btn-primary{
      background:var(--grad-primary);color:var(--clr-white);
      font-size:.9rem;font-weight:700;padding:14px 30px;
      border-radius:50px;transition:var(--transition);
      box-shadow:0 6px 22px rgba(26,111,255,.4);
      position:relative;overflow:hidden;
    }
    .btn-primary::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
      transform:translateX(-100%);transition:.4s;
    }
    .btn-primary:hover::after{transform:translateX(100%)}
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(26,111,255,.55)}
    .btn-outline{
      background:transparent;color:var(--clr-white);
      font-size:.9rem;font-weight:700;padding:14px 30px;
      border-radius:50px;border:1.5px solid rgba(255,255,255,.18);
      transition:var(--transition);
    }
    .btn-outline:hover{border-color:var(--clr-cyan);color:var(--clr-cyan);transform:translateY(-3px)}

    /* ============================================================
       GAME CARDS
    ============================================================ */
    .games-grid{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;
    }
    .game-card{
      background:rgba(255,255,255,.04);
      border:1px solid var(--clr-border);
      border-radius:var(--radius-lg);overflow:hidden;
      transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;
    }
    .game-card:hover{
      transform:translateY(-8px);
      border-color:rgba(162,89,255,.35);
      box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(162,89,255,.12);
    }
    .game-banner{
      height:140px;display:flex;align-items:center;justify-content:center;
      font-size:4rem;position:relative;overflow:hidden;
      transition:var(--transition);
    }
    .game-banner-emoji{
      transition:all .4s cubic-bezier(.34,1.56,.64,1);
      position:relative;z-index:1;
    }
    .game-card:hover .game-banner-emoji{transform:scale(1.2)}
    .game-banner::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(to top,rgba(2,8,22,.9) 0%,transparent 55%);
    }
    .game-banner-badge{position:absolute;top:12px;right:12px;z-index:1}
    .game-body{padding:18px}
    .game-name{font-size:.95rem;font-weight:700;margin-bottom:4px}
    .game-genre{font-size:.72rem;color:var(--clr-muted);margin-bottom:12px}
    .game-footer{display:flex;align-items:center;justify-content:space-between}
    .game-size{font-size:.75rem;color:var(--clr-muted)}
    .game-install-btn{
      background:var(--grad-purple);color:var(--clr-white);
      font-size:.75rem;font-weight:700;padding:7px 16px;
      border-radius:50px;transition:var(--transition);
      position:relative;overflow:hidden;
    }
    .game-install-btn::after{
      content:'';position:absolute;inset:0;
      background:rgba(255,255,255,.15);transform:translateX(-100%);transition:.3s;
    }
    .game-install-btn:hover::after{transform:translateX(100%)}
    .game-install-btn:hover{transform:scale(1.05)}

    /* ============================================================
       GUIDE CARDS
    ============================================================ */
    .guides-grid{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
    }
    .guide-card{
      background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
      border-radius:var(--radius-lg);padding:26px;
      display:flex;gap:18px;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;
      position:relative;overflow:hidden;
    }
    .guide-card::before{
      content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
      background:var(--grad-green);transform:scaleY(0);transition:var(--transition);
      transform-origin:bottom;
    }
    .guide-card:hover::before{transform:scaleY(1)}
    .guide-card:hover{
      transform:translateY(-5px) translateX(4px);
      border-color:rgba(0,230,118,.25);
      box-shadow:0 15px 40px rgba(0,0,0,.4),0 0 20px rgba(0,230,118,.05);
    }
    .guide-icon-wrap{
      width:52px;height:52px;border-radius:var(--radius-md);
      display:flex;align-items:center;justify-content:center;
      font-size:1.5rem;flex-shrink:0;transition:var(--transition);
    }
    .guide-card:hover .guide-icon-wrap{transform:scale(1.1) rotate(-5deg)}
    .guide-body{flex:1}
    .guide-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
    .guide-title{font-size:.95rem;font-weight:700;margin-bottom:7px;line-height:1.4}
    .guide-meta{
      display:flex;align-items:center;gap:10px;
      font-size:.72rem;color:var(--clr-muted);
    }
    .guide-meta .sep{opacity:.4}

    /* ============================================================
       MARQUEE TICKER
    ============================================================ */
    .ticker-wrap{
      overflow:hidden;background:rgba(26,111,255,.06);
      border-top:1px solid rgba(26,111,255,.12);
      border-bottom:1px solid rgba(26,111,255,.12);
      padding:12px 0;
    }
    .ticker-inner{
      display:flex;gap:0;
      animation:ticker 35s linear infinite;
      width:max-content;
    }
    @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .ticker-item{
      display:inline-flex;align-items:center;gap:8px;
      padding:0 32px;color:rgba(255,255,255,.65);font-size:.8rem;
      border-right:1px solid rgba(255,255,255,.08);white-space:nowrap;
    }
    .ticker-dot{width:6px;height:6px;border-radius:50%;background:var(--clr-cyan);flex-shrink:0}

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer{
      background:#01060f;
      border-top:1px solid var(--clr-border);padding:70px 0 0;
    }
    .footer-grid{
      display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
      padding-bottom:50px;border-bottom:1px solid var(--clr-border);
    }
    .footer-brand .logo{margin-bottom:14px}
    .footer-desc{font-size:.85rem;color:var(--clr-muted);line-height:1.75;max-width:280px;margin-bottom:20px}
    .footer-socials{display:flex;gap:10px}
    .social-btn{
      width:40px;height:40px;background:rgba(255,255,255,.04);
      border:1px solid var(--clr-border);border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;cursor:pointer;transition:var(--transition);
    }
    .social-btn:hover{
      background:rgba(26,111,255,.15);border-color:var(--clr-blue);
      transform:translateY(-3px);
    }
    .footer-col-title{
      font-size:.8rem;font-weight:800;letter-spacing:.08em;
      text-transform:uppercase;margin-bottom:20px;
    }
    .footer-links{display:flex;flex-direction:column;gap:11px}
    .footer-links a{
      font-size:.85rem;color:var(--clr-muted);transition:var(--transition);
      display:flex;align-items:center;gap:6px;
    }
    .footer-links a:hover{color:var(--clr-cyan);transform:translateX(4px)}
    .footer-newsletter{
      background:rgba(26,111,255,.07);border:1px solid rgba(26,111,255,.15);
      border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;
    }
    .footer-nl-title{font-size:.88rem;font-weight:700;margin-bottom:4px}
    .footer-nl-sub{font-size:.75rem;color:var(--clr-muted);margin-bottom:12px}
    .footer-nl-form{display:flex;gap:8px}
    .footer-nl-form input{
      flex:1;background:rgba(255,255,255,.05);border:1px solid var(--clr-border);
      border-radius:8px;padding:9px 14px;font-size:.8rem;
      color:var(--clr-white);outline:none;transition:var(--transition);font-family:inherit;
    }
    .footer-nl-form input::placeholder{color:var(--clr-muted)}
    .footer-nl-form input:focus{border-color:var(--clr-blue)}
    .footer-nl-form button{
      background:var(--grad-primary);color:white;font-size:.78rem;
      font-weight:700;padding:9px 16px;border-radius:8px;
      white-space:nowrap;transition:var(--transition);
    }
    .footer-nl-form button:hover{transform:scale(1.05)}
    .footer-bottom{
      display:flex;align-items:center;justify-content:space-between;
      padding:20px 0;flex-wrap:wrap;gap:12px;
    }
    .footer-copy{font-size:.8rem;color:var(--clr-muted)}
    .footer-legal{display:flex;gap:20px}
    .footer-legal a{font-size:.8rem;color:var(--clr-muted);transition:var(--transition)}
    .footer-legal a:hover{color:var(--clr-cyan)}

    /* ============================================================
       SCROLL TO TOP
    ============================================================ */
    .scroll-top{
      position:fixed;bottom:28px;right:28px;
      width:48px;height:48px;background:var(--grad-primary);
      border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:1.1rem;cursor:pointer;
      box-shadow:0 6px 22px rgba(26,111,255,.45);
      transition:var(--transition);opacity:0;pointer-events:none;z-index:998;
    }
    .scroll-top.visible{opacity:1;pointer-events:auto}
    .scroll-top:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(26,111,255,.6)}

    /* ============================================================
       ANIMATIONS
    ============================================================ */
    @keyframes fade-up{
      from{opacity:0;transform:translateY(30px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes fade-in{from{opacity:0}to{opacity:1}}

    /* Number counter */
    .count-up{display:inline-block}

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media(max-width:1100px){
      .hero-inner{grid-template-columns:1fr 360px;gap:40px}
      .collections-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:900px){
      .hero-inner{grid-template-columns:1fr;gap:50px;padding:60px 0}
      .hero-phone-wrap{order:-1}
      .phone-mockup{width:225px}
      .strip-inner{grid-template-columns:repeat(2,1fr)}
      .strip-item:nth-child(2){border-right:none}
      .strip-item:nth-child(3){border-right:1px solid var(--clr-border);border-top:1px solid var(--clr-border)}
      .strip-item:nth-child(4){border-top:1px solid var(--clr-border)}
      .cta-inner{grid-template-columns:1fr}
      .cta-buttons{flex-wrap:wrap}
      .nav-links{display:none}
      .header-search{display:none}
      .hamburger{display:flex}
    }
    @media(max-width:680px){
      .collections-grid{grid-template-columns:1fr}
      .games-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .stats-row{gap:20px}
      .strip-inner{grid-template-columns:1fr}
      .strip-item{border-right:none!important;border-bottom:1px solid var(--clr-border);border-top:none!important}
      .strip-item:last-child{border-bottom:none}
      .apps-grid{grid-template-columns:1fr}
      .guides-grid{grid-template-columns:1fr}
      .footer-bottom{flex-direction:column;align-items:center;text-align:center}
      .hero-title{font-size:2.1rem}
      .float-tag{display:none}
      .phone-glow-ring{display:none}
    }
    @media(max-width:420px){
      .container{padding:0 16px}
      .btn-submit{display:none}
      .phone-mockup{width:195px}
      .hero-search-wrap{padding:5px 5px 5px 16px}
      .btn-search{padding:10px 18px}
    }
  

/* WordPress compatibility */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wp-caption,.gallery-caption,.bypostauthor{display:block}

.empty-card{
  background:rgba(255,255,255,.04);
  border:1px dashed var(--clr-border);
  border-radius:var(--radius-lg);
  padding:34px;
  color:var(--clr-white);
  box-shadow:0 15px 40px rgba(0,0,0,.25);
}
.empty-card h3{margin:0 0 8px;font-size:1.1rem}
.empty-card p{margin:0;color:var(--clr-muted)}
.phone-app-icon{background-size:cover;background-position:center}
.phone-feat-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.app-name,.game-name{color:var(--clr-white);display:block}