:root{
    --bg:#0A0A1F; --bg-alt:#0F0F2E; --surface:#15153F; --surface-2:#1B1B4C;
    --line:rgba(157,153,255,0.14); --line-strong:rgba(157,153,255,0.28);
    --primary:#4640E0; --primary-light:#6E68FF; --secondary:#9D4EDD; --secondary-light:#C77DFF;
    --text:#F1EFFF; --muted:#A6A2D6; --muted-2:#7B77AE; --success:#3DDC97;
    --radius:16px; --radius-sm:10px; --max:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Sora', sans-serif; letter-spacing:-0.02em; font-weight:700;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  section{position:relative;}
  ::selection{background:var(--secondary); color:#fff;}
  body::before{
    content:""; position:fixed; inset:0; z-index:-2;
    background:
      radial-gradient(900px 500px at 12% -10%, rgba(70,64,224,0.35), transparent 60%),
      radial-gradient(700px 500px at 100% 10%, rgba(157,78,221,0.28), transparent 55%),
      var(--bg);
  }
  .grain{
    position:fixed; inset:0; z-index:-1; opacity:0.035; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* header */
  header{position:sticky; top:0; z-index:100; background:rgba(10,10,31,0.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); overflow:visible !important;}
  .nav{display:flex; align-items:center; justify-content:space-between; height:74px; overflow:visible !important;}
  .logo{display:flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:800; font-size:1.15rem; white-space:nowrap; flex-shrink:0;}
  .nav-links{display:flex; align-items:center; gap:8px;}
  .nav-links a.nav-item{padding:10px 16px; border-radius:100px; font-weight:500; font-size:0.94rem; color:var(--muted); transition:color .2s, background .2s;}
  .nav-links a.nav-item:hover{color:var(--text); background:rgba(157,153,255,0.08);}
  .nav-links a.nav-item.active{color:var(--text); background:rgba(157,153,255,0.10);}
  .nav-actions{display:flex; align-items:center; gap:10px; flex-shrink:0; z-index:102;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:100px; font-weight:600; font-size:0.92rem; border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s; white-space:nowrap;}
  .btn:active{transform:scale(0.97);}
  .btn-ghost{color:var(--text); border-color:var(--line-strong); background:transparent;}
  .btn-ghost:hover{background:rgba(157,153,255,0.08); border-color:var(--primary-light);}
  .btn-solid{color:#fff; background:linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:0 8px 22px rgba(105,70,224,0.38);}
  .btn-solid:hover{box-shadow:0 10px 28px rgba(157,78,221,0.5); transform:translateY(-1px);}
  .btn-lg{padding:15px 28px; font-size:1rem;}
  .btn-block{width:100%;}
  .menu-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; font-weight:700; pointer-events:auto !important; z-index:101 !important; touch-action:manipulation;}
  body.theme-light .menu-toggle{color:#0f0f0f !important;}

  .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px; font-size:0.82rem; font-weight:600; color:var(--secondary-light); background:rgba(157,78,221,0.1); border:1px solid rgba(157,78,221,0.28); margin-bottom:22px;}
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success);}

  .flow-caption{font-size:0.78rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.09em; margin-bottom:22px; font-weight:600;}

  /* footer base */
  footer{border-top:1px solid var(--line); padding:48px 0 28px;}
  .foot-brand p{color:var(--muted-2); font-size:0.88rem; margin-top:14px; max-width:280px;}
  .foot-col h5{font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-2); margin-bottom:16px;}
  .foot-col ul{display:flex; flex-direction:column; gap:10px;}
  .foot-col a{color:var(--muted); font-size:0.9rem; transition:color .2s;}
  .foot-col a:hover{color:var(--text);}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:28px; border-top:1px solid var(--line); color:var(--muted-2); font-size:0.82rem;}

  @media (max-width:768px){
    header .nav{height:68px;}
    .wrap{padding:0 20px;}
    header .nav-actions > a.btn, header .nav-links{display:none !important;}
    header .menu-toggle{display:inline-flex !important; align-items:center; justify-content:center;}
    footer{padding:40px 0 24px;}
  }
  @media (max-width:640px){
    .nav-links{display:none;}
    .wrap{padding:0 18px;}
  }
  @media (max-width:480px){
    .wrap{padding:0 16px;}
  }

#mobile-menu.mobile-menu-overlay{display:none; position:fixed; inset:0; z-index:200; background:rgba(10,10,31,0.94); backdrop-filter:blur(10px); align-items:center; justify-content:center; padding:32px;}
    #mobile-menu.mobile-menu-overlay.open{display:flex;}
    .mm-close{position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(255,255,255,0.04); color:var(--text); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;}
    .mm-modal{width:100%; max-width:340px; display:flex; flex-direction:column; gap:14px;}
    .mm-btn{display:flex; align-items:center; justify-content:center; width:100%; padding:16px 24px; border-radius:100px; font-size:1.05rem; font-weight:600; text-align:center; border:1px solid var(--line-strong); color:var(--text); background:rgba(255,255,255,0.03); transition:transform .15s ease, background .15s ease;}
    body.theme-light #mobile-menu .mm-btn{color:#fff !important;}
    body.theme-light #mobile-menu .mm-close{color:#fff !important; border-color:rgba(255,255,255,0.28);}
    .mm-btn:active{transform:scale(0.97); background:rgba(157,153,255,0.08);}
    .mm-btn-solid{background:linear-gradient(135deg, var(--primary), var(--secondary)); border-color:transparent; color:#fff; box-shadow:0 10px 26px rgba(105,70,224,0.4); font-weight:700;}

    body.theme-light{
      --bg:#F6F7FF; --bg-alt:#EEF1FF; --surface:#FFFFFF; --surface-2:#F2F4FF;
      --line:rgba(70,64,224,0.12); --line-strong:rgba(70,64,224,0.22);
      --text:#171738; --muted:#4F4B78; --muted-2:#6D6A92;
      color:var(--text);
    }
    body.theme-light header{background:rgba(246,247,255,0.82);}
    body.theme-light .menu-toggle{color:#0f0f0f !important;}

    @media (max-width: 768px){
      header{background:rgba(18,16,45,0.92);}
      body.theme-light header{background:rgba(246,247,255,0.92);}
      header .nav{
        height:72px;
        padding:0 16px;
        align-items:center;
        justify-content:space-between;
      }
      .logo{gap:12px;}
      .logo img{
        width:36px !important;
        height:36px !important;
        object-fit:contain !important;
        box-shadow:none !important;
        border:none !important;
      }
      .logo span{
        font-family:'Sora', sans-serif;
        font-weight:800;
        font-size:1.5rem;
        letter-spacing:-0.02em;
        white-space:nowrap;
      }
      .nav-actions{
        align-items:center;
        gap:20px;
        margin-left:auto;
      }
      .nav-actions .theme-toggle{
        width:48px;
        height:48px;
        min-width:48px;
        min-height:48px;
        padding:0;
        border-radius:50%;
        flex-shrink:0;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1.5px solid rgba(157,153,255,0.30);
        background:transparent;
      }
      body.theme-light .nav-actions .theme-toggle{border-color:rgba(70,64,224,0.25);}
      .nav-actions .theme-toggle i{
        font-size:20px;
        color:var(--text);
      }
      .menu-toggle{
        position:relative;
        z-index:102 !important;
        width:48px;
        height:48px;
        min-width:48px;
        min-height:48px;
        padding:0;
        border:0;
        background:none;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        margin:0;
        line-height:1;
        touch-action:manipulation;
        color:var(--text);
      }
      body.theme-light .menu-toggle{color:#171738 !important;}
      .menu-toggle .menu-bars{
        width:24px;
        height:18px;
        position:relative;
        display:block;
        margin:auto;
      }
      .menu-toggle .menu-bars span{
        position:absolute;
        left:0;
        width:24px;
        height:3px;
        border-radius:3px;
        background:currentColor;
        transition:transform .2s ease, opacity .2s ease, top .2s ease;
      }
      .menu-toggle .menu-bars span:nth-child(1){top:0;}
      .menu-toggle .menu-bars span:nth-child(2){top:7.5px;}
      .menu-toggle .menu-bars span:nth-child(3){top:15px;}
      .menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(1){top:7.5px; transform:rotate(45deg);}
      .menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(2){opacity:0;}
      .menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(3){top:7.5px; transform:rotate(-45deg);}
      .nav-actions > a.btn, .nav-links{display:none !important;}
      .nav-actions .theme-toggle, .menu-toggle{flex-shrink:0;}
    }
    @media (max-width: 360px){
      .logo span{font-size:1.3rem;}
      .logo{gap:10px;}
      .nav-actions{gap:12px;}
    }

/* ---------- layout rhythm ---------- */
    .section{padding:92px 0;}
    .section-alt{background:linear-gradient(180deg, var(--bg-alt), rgba(15,15,46,0.55));}
    body.theme-light .section-alt{background:var(--bg-alt);}
    .head{max-width:720px; margin:0 auto 52px; text-align:center;}
    .head .eyebrow{margin-bottom:16px;}
    .head h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.12; margin-bottom:14px;}
    .head p{color:var(--muted); font-size:1.06rem;}
    .hl{background:linear-gradient(100deg, var(--primary-light), var(--secondary-light), #FF7AC6); -webkit-background-clip:text; background-clip:text; color:transparent;}

    /* ---------- reveal on scroll ---------- */
    html.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 90ms);}
    html.js .reveal.in{opacity:1; transform:none;}

    /* ---------- hero ---------- */
    .hero{position:relative; overflow:hidden; padding:118px 0 84px; text-align:center;}
    .hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(157,153,255,0.22) 1px, transparent 1.4px); background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); pointer-events:none;}
    .orb{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; animation:floaty 14s ease-in-out infinite;}
    .orb.o1{width:440px; height:440px; background:#4640E0; opacity:.5; top:-140px; left:-120px;}
    .orb.o2{width:380px; height:380px; background:#9D4EDD; opacity:.42; top:20px; right:-110px; animation-delay:-5s;}
    .orb.o3{width:280px; height:280px; background:#3DDC97; opacity:.14; bottom:-90px; left:42%; animation-delay:-9s;}
    body.theme-light .orb{opacity:.22;}
    @keyframes floaty{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(34px,-28px) scale(1.09);}}
    .hero .wrap{position:relative; z-index:2;}
    .hero h1{font-size:clamp(2.4rem, 6vw, 4.5rem); max-width:940px; line-height:1.04; letter-spacing:-0.035em; margin:0 auto 26px;}
    .hero h1 .grad{background:linear-gradient(100deg, #6E68FF, #C77DFF, #FF7AC6, #6E68FF); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 6s linear infinite; display:inline-block;}
    @keyframes shimmer{to{background-position:240% 0;}}
    .hero p.lead{max-width:640px; margin:0 auto 38px; color:var(--muted); font-size:1.15rem;}
    .hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
    .hero-ctas .btn-solid{animation:glowpulse 2.8s ease-in-out infinite;}
    @keyframes glowpulse{0%,100%{box-shadow:0 8px 22px rgba(105,70,224,0.38);} 50%{box-shadow:0 10px 38px rgba(199,125,255,0.7);}}
    .stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; max-width:720px; margin:58px auto 0;}
    .stat{padding:20px 16px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(157,153,255,0.10), rgba(157,153,255,0.03)); backdrop-filter:blur(8px);}
    .stat b{display:block; font-family:'Sora'; font-weight:800; font-size:2.1rem; line-height:1.1; background:linear-gradient(100deg, var(--primary-light), var(--secondary-light)); -webkit-background-clip:text; background-clip:text; color:transparent;}
    .stat span{display:block; margin-top:6px; color:var(--muted); font-size:0.85rem;}
    .chip{position:absolute; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px; font-weight:700; font-size:0.9rem; border:1px solid var(--line-strong); background:rgba(21,21,63,0.72); backdrop-filter:blur(10px); box-shadow:0 14px 30px rgba(0,0,0,0.28); animation:bob 6s ease-in-out infinite;}
    body.theme-light .chip{background:rgba(255,255,255,0.85);}
    .chip i{color:#FFC857;}
    .chip em{font-style:normal; color:var(--success);}
    .chip.c1{left:3%; top:34%;}
    .chip.c2{right:3%; top:26%; animation-delay:-2s;}
    .chip.c3{right:9%; top:62%; animation-delay:-4s;}
    @keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-14px) rotate(2deg);}}

    /* ---------- channels marquee ---------- */
    .marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(157,153,255,0.04); padding:18px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}
    .track{display:flex; gap:52px; width:max-content; animation:scroll 32s linear infinite;}
    .track span{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-weight:600; white-space:nowrap;}
    .track span i{color:var(--primary-light); font-size:1.1rem;}
    @keyframes scroll{to{transform:translateX(-50%);}}

    /* ---------- big offer ---------- */
    .offer{position:relative; isolation:isolate; overflow:hidden; max-width:900px; margin:0 auto; text-align:center; padding:76px 40px 64px; border-radius:38px; border:2px solid transparent; background: radial-gradient(620px 320px at 50% 0%, rgba(157,78,221,.55), transparent 70%) padding-box, radial-gradient(520px 280px at 50% 115%, rgba(34,211,238,.20), transparent 70%) padding-box, linear-gradient(180deg,#15134A,#0C0B2B) padding-box, linear-gradient(120deg,#6E68FF,#C77DFF,#3DDC97,#6E68FF) border-box; background-size:auto,auto,auto,300% 300%; animation:offerflow 7s linear infinite; box-shadow:0 40px 100px -20px rgba(105,70,224,.65), 0 0 0 1px rgba(255,255,255,.04) inset;}
    @keyframes offerflow{to{background-position:0 0,0 0,0 0,300% 50%;}}
    .offer::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(157,153,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(157,153,255,.07) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 38%, #000, transparent 75%); mask-image:radial-gradient(ellipse 60% 55% at 50% 38%, #000, transparent 75%);}
    .offer .rings{position:absolute; left:50%; top:210px; width:0; height:0; z-index:-1; pointer-events:none;}
    .offer .rings i{position:absolute; width:var(--s); height:var(--s); left:calc(var(--s) / -2); top:calc(var(--s) / -2); border-radius:50%; border:1px solid rgba(199,125,255,.4); animation:ringpulse 4s ease-out infinite;}
    @keyframes ringpulse{0%{transform:scale(.55); opacity:.9;} 100%{transform:scale(1.15); opacity:0;}}
    .offer .sp{position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(199,125,255,.9); animation:twinkle 3.2s ease-in-out infinite; z-index:-1;}
    .offer .sp.s1{left:12%; top:22%;} .offer .sp.s2{left:86%; top:18%; animation-delay:-1s;} .offer .sp.s3{left:20%; top:70%; animation-delay:-2s;} .offer .sp.s4{left:80%; top:66%; animation-delay:-.5s;} .offer .sp.s5{left:6%; top:46%; animation-delay:-1.6s;} .offer .sp.s6{left:93%; top:44%; animation-delay:-2.4s;}
    @keyframes twinkle{0%,100%{opacity:.15; transform:scale(.6);} 50%{opacity:1; transform:scale(1.25);}}
    .offer-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:100px; font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F3E8FF; background:linear-gradient(135deg, rgba(110,104,255,.35), rgba(199,125,255,.28)); border:1px solid rgba(199,125,255,.55); box-shadow:0 8px 24px rgba(157,78,221,.35); margin-bottom:10px;}
    .offer .big{font-family:'Sora'; font-weight:800; font-size:clamp(6.2rem, 19vw, 12rem); line-height:.95; letter-spacing:-.05em; margin-bottom:18px; background:linear-gradient(110deg, #8F89FF 0%, #E9D5FF 18%, #C77DFF 38%, #FF7AC6 62%, #8F89FF 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 6s linear infinite; filter:drop-shadow(0 0 38px rgba(157,78,221,.7)) drop-shadow(0 12px 30px rgba(70,64,224,.5));}
    .offer h3{font-size:clamp(1.4rem, 3vw, 2rem); max-width:640px; margin:0 auto 14px; color:#fff;}
    .offer p{color:#B9B5E6; max-width:560px; margin:0 auto 26px; font-size:1.05rem;}
    .offer-pills{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:34px;}
    .offer-pills span{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; font-size:.9rem; font-weight:600; color:#E9E6FF; background:rgba(157,153,255,.10); border:1px solid rgba(157,153,255,.28); backdrop-filter:blur(8px);}
    .offer-pills span i{color:#3DDC97;}
    .offer .btn{position:relative; overflow:hidden; padding:19px 38px; font-size:1.06rem; box-shadow:0 14px 40px rgba(157,78,221,.6);}
    .offer .btn::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); animation:sweep 3.4s ease-in-out infinite;}
    @keyframes sweep{0%{left:-60%;} 60%,100%{left:140%;}}
    body.theme-light .offer{background: radial-gradient(620px 320px at 50% 0%, rgba(157,78,221,.30), transparent 70%) padding-box, linear-gradient(180deg,#FFFFFF,#EFEBFF) padding-box, linear-gradient(120deg,#6E68FF,#C77DFF,#3DDC97,#6E68FF) border-box; background-size:auto,auto,300% 300%;}
    body.theme-light .offer h3{color:#171738;} body.theme-light .offer p{color:#4F4B78;} body.theme-light .offer-pills span{color:#171738; background:rgba(70,64,224,.07);}
    @media (max-width:640px){ .offer{padding:56px 20px 46px; border-radius:28px;} .offer .rings{top:170px;} .offer .rings i:nth-child(3){display:none;} .offer-pills{flex-direction:column; align-items:stretch;} .offer .btn{width:100%;} }

    /* ---------- glass cards ---------- */
    .grid{display:grid; gap:24px;}
    .grid.g4{grid-template-columns:repeat(4, minmax(0,1fr));}
    .grid.g3{grid-template-columns:repeat(6, minmax(0,1fr));}
    .grid.g3 .gcard{grid-column:span 2;}
    .grid.g3 .gcard:nth-child(10){grid-column:2 / span 2;}
    .grid.g3 .gcard:nth-child(11){grid-column:4 / span 2;}
    .gcard{position:relative; overflow:hidden; border-radius:24px; padding:30px 28px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(157,153,255,0.08), rgba(157,153,255,0.02)), var(--surface); box-shadow:0 14px 32px rgba(0,0,0,0.16); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;}
    .gcard::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--c1), var(--c2));}
    .gcard::after{content:""; position:absolute; width:240px; height:240px; right:-90px; top:-90px; border-radius:50%; background:radial-gradient(circle, var(--c1), transparent 68%); opacity:0; transition:opacity .35s ease; pointer-events:none;}
    .gcard:hover{transform:translateY(-8px); border-color:var(--c1); box-shadow:0 26px 54px -20px var(--c1);}
    .gcard:hover::after{opacity:.24;}
    .gcard .ico{width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:1.25rem; color:#fff; background:linear-gradient(135deg, var(--c1), var(--c2)); margin-bottom:20px; box-shadow:0 14px 26px -8px var(--c1); transition:transform .35s ease; position:relative; z-index:1;}
    .gcard:hover .ico{transform:rotate(-8deg) scale(1.1);}
    .gcard h4{font-size:1.12rem; margin-bottom:9px; position:relative; z-index:1;}
    .gcard p{color:var(--muted); font-size:0.95rem; line-height:1.68; position:relative; z-index:1;}
    .gcard .no{position:absolute; right:22px; top:20px; font-family:'Sora'; font-weight:800; font-size:2.8rem; line-height:1; color:var(--c1); opacity:.16;}
    .who .gcard{text-align:center;}
    .who .gcard .ico{margin-left:auto; margin-right:auto;}

    /* ---------- timeline ---------- */
    .timeline{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; position:relative;}
    .timeline::before{content:""; position:absolute; top:29px; left:12.5%; right:12.5%; height:2px; background:repeating-linear-gradient(90deg, var(--primary-light) 0 9px, transparent 9px 18px); opacity:.55;}
    .tstep{position:relative; text-align:center;}
    .tnode{position:relative; z-index:1; width:60px; height:60px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; font-family:'Sora'; font-weight:800; font-size:1.25rem; color:#fff; background:linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:0 0 0 7px var(--bg-alt), 0 12px 28px rgba(105,70,224,0.5);}
    .tnode::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--primary-light); opacity:0; animation:ring 2.8s ease-out infinite;}
    .tstep:nth-child(2) .tnode::after{animation-delay:.6s;}
    .tstep:nth-child(3) .tnode::after{animation-delay:1.2s;}
    .tstep:nth-child(4) .tnode::after{animation-delay:1.8s;}
    @keyframes ring{0%{transform:scale(.8); opacity:.9;} 100%{transform:scale(1.35); opacity:0;}}
    .tcard{border-radius:22px; padding:24px 22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(157,153,255,0.08), rgba(157,153,255,0.02)), var(--surface); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; height:calc(100% - 80px);}
    .tstep:hover .tcard{transform:translateY(-6px); border-color:var(--primary-light); box-shadow:0 22px 46px -20px var(--primary-light);}
    .tcard h4{font-size:1.08rem; margin-bottom:8px;}
    .tcard p{color:var(--muted); font-size:0.93rem; line-height:1.65;}

    /* ---------- earnings ---------- */
    .egrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; align-items:center;}
    .ecard{position:relative; text-align:center; border-radius:26px; padding:38px 28px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(157,153,255,0.08), rgba(157,153,255,0.02)), var(--surface); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
    .ecard:hover{transform:translateY(-8px); border-color:var(--primary-light); box-shadow:0 24px 50px -20px var(--primary-light);}
    .ecard.feat{transform:scale(1.06); border:1.5px solid var(--secondary-light); background:linear-gradient(180deg, rgba(157,78,221,0.2), var(--surface) 60%); box-shadow:0 28px 70px rgba(105,70,224,0.38);}
    .ecard.feat:hover{transform:scale(1.06) translateY(-8px);}
    .ecard h4{font-size:1.12rem; margin-bottom:4px;}
    .ecard .plan-price{color:var(--muted-2); font-size:0.9rem; margin-bottom:22px;}
    .ecard .you{color:var(--muted); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; margin-bottom:4px;}
    .ecard .amt{font-family:'Sora'; font-weight:800; font-size:3.2rem; line-height:1.1; background:linear-gradient(100deg, #3DDC97, #22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent;}
    .bar{height:9px; border-radius:99px; background:rgba(157,153,255,0.16); margin:22px auto 0; overflow:hidden;}
    .bar i{display:block; height:100%; width:var(--w); border-radius:99px; background:linear-gradient(90deg, #3DDC97, #22D3EE); animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both;}
    @keyframes grow{from{width:0;}}
    .earn-note{text-align:center; color:var(--muted-2); font-size:0.84rem; margin-top:28px;}

    /* ---------- expectation ---------- */
    .expectation-card{position:relative; max-width:800px; margin:0 auto; text-align:center; border-radius:30px; padding:52px 36px; border:1px solid var(--secondary-light); background:linear-gradient(180deg, rgba(157,78,221,0.18), var(--surface) 65%); box-shadow:0 26px 70px rgba(70,64,224,0.3); overflow:hidden;}
    .expectation-card::after{content:"\f2b5"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:-14px; bottom:-30px; font-size:10rem; color:var(--secondary-light); opacity:.07; transform:rotate(-12deg); pointer-events:none;}
    .expectation-card h3{font-size:clamp(1.4rem, 3vw, 2rem); margin-bottom:12px; position:relative;}
    .expectation-card p{color:var(--muted); max-width:620px; margin:0 auto; position:relative;}

    /* ---------- faq ---------- */
    .faq-list{max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
    details.faq{background:linear-gradient(180deg, rgba(157,153,255,0.07), rgba(157,153,255,0.02)), var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 26px; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
    details.faq:hover{border-color:var(--line-strong); transform:translateY(-2px);}
    details.faq[open]{border-color:var(--primary-light); box-shadow:0 18px 40px -22px var(--primary-light);}
    details.faq summary{cursor:pointer; list-style:none; font-weight:600; font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:14px;}
    details.faq summary::-webkit-details-marker{display:none;}
    details.faq summary::after{content:"+"; flex-shrink:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; line-height:1; color:#fff; background:linear-gradient(135deg, var(--primary), var(--secondary)); transition:transform .3s ease;}
    details.faq[open] summary::after{content:"–"; transform:rotate(180deg);}
    details.faq p{color:var(--muted); font-size:0.95rem; margin-top:14px; line-height:1.7;}

    /* ---------- apply ---------- */
    .applybox{position:relative; max-width:680px; margin:0 auto; padding:16px; border-radius:34px; border:2px solid transparent; background:linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box, linear-gradient(120deg, #6E68FF, #C77DFF, #3DDC97, #6E68FF) border-box; background-size:100% 100%, 300% 300%; animation:borderflow 8s linear infinite; box-shadow:0 30px 80px rgba(70,64,224,0.3);}

    /* ---------- responsive ---------- */
    @media (max-width:1100px){
      .chip{display:none;}
    }
    @media (max-width:980px){
      .grid.g4{grid-template-columns:repeat(2, minmax(0,1fr));}
      .grid.g3{grid-template-columns:repeat(2, minmax(0,1fr));}
      .grid.g3 .gcard{grid-column:auto !important; grid-column-start:auto !important;}
      .grid.g3 .gcard:nth-child(11){grid-column:1 / -1 !important; max-width:calc(50% - 12px); justify-self:center;}
      .timeline{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:34px;}
      .timeline::before{display:none;}
      .tcard{height:auto;}
      .egrid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
      .ecard.feat, .ecard.feat:hover{transform:none;}
    }
    @media (max-width:768px){
      .section{padding:66px 0;}
      .hero{padding:84px 0 60px;}
      .hero p.lead{font-size:1.02rem; margin-bottom:28px;}
      .head{margin-bottom:38px;}
      .stats{margin-top:42px; gap:10px;}
      .stat{padding:16px 8px;}
      .stat b{font-size:1.6rem;}
      .stat span{font-size:0.74rem;}
      .offer{padding:44px 22px; border-radius:26px;}
      .expectation-card{padding:40px 22px; border-radius:24px;}
    }
    @media (max-width:640px){
      .section{padding:54px 0;}
      .hero-ctas{flex-direction:column; align-items:stretch;}
      .hero-ctas .btn{width:100%;}
      .grid.g4, .grid.g3, .timeline{grid-template-columns:1fr;}
      .grid.g3 .gcard{grid-column:auto !important; grid-column-start:auto !important;}
      .grid.g3 .gcard:nth-child(11){max-width:none !important; grid-column:auto !important; justify-self:stretch;}
      .gcard{padding:26px 22px;}
      details.faq{padding:16px 18px;}
      details.faq summary{font-size:0.95rem;}
      .applybox{padding:8px; border-radius:26px;}
    }
    @media (prefers-reduced-motion:reduce){
      *, *::before, *::after{animation:none !important; transition:none !important;}
      html.js .reveal{opacity:1; transform:none;}
    }
    @media (max-width:768px){
      header{background:rgba(10,10,31,0.72);}
      body.theme-light header{background:rgba(246,247,255,0.82);}
      header .nav{height:68px; padding:0 20px;}
      header .logo{gap:10px;}
      header .logo img{width:34px !important; height:34px !important; object-fit:cover !important;}
      header .logo span{font-size:1.15rem; letter-spacing:normal; font-weight:800;}
      header .nav-actions{gap:10px;}
      header .nav-actions .theme-toggle, body.theme-light header .nav-actions .theme-toggle{border:1px solid var(--line-strong);}
      header .nav-actions .theme-toggle i{font-size:0.92rem; color:var(--text);}
      header .menu-toggle .menu-bars{display:none !important;}
      header .menu-toggle::before{content:"\2630"; font-size:26px; font-weight:700; line-height:1;}
      body.theme-light header .menu-toggle{color:#0f0f0f !important;}
    }
    @media (max-width:640px){ header .nav{padding:0 18px;} }
    @media (max-width:480px){ header .nav{padding:0 16px;} }

#login .footer-card{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.008)); box-shadow:0 14px 36px rgba(0,0,0,0.2);}
    #login .footer-card::before{content:""; position:absolute; inset:auto auto 0 0; width:240px; height:240px; background:radial-gradient(circle at 30% 30%, rgba(110,104,255,0.1), transparent 62%); pointer-events:none;}
    #login .footer-card::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(157,78,221,0.04), transparent 40%, rgba(70,64,224,0.04)); pointer-events:none;}
    #login .footer-inner{position:relative; padding:22px 22px 14px;}
    #login .footer-grid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0, 1fr)); grid-template-areas:"brand product company partner" "brand . legal partner"; gap:20px 24px; align-items:flex-start;}
    #login .gi-brand{grid-area:brand; min-width:0;}
    #login .gi-product{grid-area:product; min-width:0;}
    #login .gi-company{grid-area:company; min-width:0;}
    #login .gi-partner{grid-area:partner; min-width:0;}
    #login .gi-legal{grid-area:legal; min-width:0;}
    #login .foot-brand{min-width:0; text-align:left; display:flex; flex-direction:column; align-items:flex-start;}
    #login a.logo{font-size:0.98rem; gap:10px; align-items:center; width:max-content; height:34px;}
    #login .foot-brand p{margin-top:10px; max-width:280px; color:var(--muted); font-size:0.84rem; line-height:1.45;}
    #login .social-row{margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
    #login .social-row .social-icon{width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,0.08); transition:transform .15s ease, box-shadow .15s ease; flex-shrink:0;}
    #login .social-row .social-icon:hover{transform:translateY(-1px);}
    #login .social-row .social-icon i{font-size:13px;}
    #login .foot-brand .address{margin-top:10px; color:var(--muted-2); font-size:0.74rem; line-height:1.45; max-width:30ch;}
    #login .foot-col{min-width:0; text-align:left;}
    #login .foot-col h5{margin-bottom:10px; color:var(--muted-2); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;}
    #login .foot-col ul{gap:8px; display:flex; flex-direction:column;}
    #login .foot-col ul li a{display:inline-flex; align-items:center; gap:8px; color:var(--muted);}
    #login .partner-card{margin-top:0; padding:12px 12px 10px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,0.02); box-shadow:inset 0 1px 0 rgba(255,255,255,0.03); text-align:left;}
    #login .partner-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:0.63rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--secondary-light); background:rgba(157,78,221,0.1); border:1px solid rgba(157,78,221,0.2); margin-bottom:8px;}
    #login .partner-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
    #login .partner-ic{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg, rgba(157,78,221,0.2), rgba(70,64,224,0.2)); border:1px solid rgba(157,153,255,0.16); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
    #login .partner-ic i{font-size:12px; color:var(--secondary-light);}
    #login .partner-name{font-size:0.88rem; font-weight:700; color:var(--text); line-height:1.15;}
    #login .partner-sub{font-size:0.72rem; color:var(--muted-2); margin-top:1px; line-height:1.35;}
    #login .partner-socials{display:flex; align-items:center; gap:7px; margin-top:10px; flex-wrap:wrap;}
    #login .partner-socials .social-icon{width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,0.08); flex-shrink:0;}
    #login .partner-socials .social-icon i{font-size:12px;}
    #login .foot-bottom{margin-top:18px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--muted-2); font-size:0.76rem; line-height:1.4; text-align:center; position:relative; z-index:1;}

    @media (max-width: 768px){
      #login{padding:44px 0 24px;}
      #login .wrap{padding-left:18px; padding-right:18px;}
      #login > .wrap{padding-top:0 !important; padding-bottom:0 !important;}
      #login > .wrap > div{border-radius:20px;}
      #login .footer-inner{padding:26px 20px 18px !important;}
      #login .footer-grid{grid-template-columns:1fr !important; grid-template-areas:"brand" "product" "company" "partner" "legal"; gap:28px !important;}
      #login .gi-brand, #login .gi-product, #login .gi-company, #login .gi-partner, #login .gi-legal, #login .foot-brand, #login .foot-col, #login .partner-card{text-align:left !important;}
      #login .foot-brand{align-items:flex-start !important; width:100%;}
      #login .foot-brand p{max-width:34ch !important; font-size:0.86rem !important; line-height:1.55 !important;}
      #login .foot-brand .address{max-width:30ch !important;}
      #login .social-row{gap:10px !important;}
      #login .social-row .social-icon{width:38px !important; height:38px !important;}
      #login .social-row .social-icon i{font-size:14px !important;}
      #login .foot-col{width:100%; min-width:0;}
      #login .foot-col h5{margin-bottom:12px !important; font-size:0.72rem !important; letter-spacing:0.1em !important;}
      #login .foot-col ul{gap:2px !important;}
      #login .foot-col ul li a{display:inline-flex !important; justify-content:flex-start; width:100%; padding:9px 0 !important; font-size:0.92rem !important;}
      #login .partner-card{padding:18px 16px !important; border-radius:16px !important; width:100%;}
      #login .partner-head{justify-content:flex-start !important;}
      #login .partner-socials{justify-content:flex-start !important; gap:8px !important;}
      #login .partner-socials .social-icon{width:34px !important; height:34px !important;}
      #login .partner-socials .social-icon i{font-size:12px !important;}
      #login .foot-bottom{margin-top:22px !important; padding-top:16px !important;}
    }
    @media (max-width: 480px){
      #login{padding:36px 0 20px;}
      #login .wrap{padding-left:14px; padding-right:14px;}
      #login > .wrap > div{border-radius:16px;}
      #login .footer-inner{padding:22px 16px 14px !important;}
      #login .footer-grid{gap:24px !important;}
      #login .foot-brand p{font-size:0.82rem !important; max-width:30ch !important;}
      #login .social-row{gap:8px !important;}
      #login .social-row .social-icon{width:34px !important; height:34px !important;}
      #login .social-row .social-icon i{font-size:13px !important;}
      #login .foot-col h5{font-size:0.68rem !important;}
      #login .foot-col ul li a{font-size:0.88rem !important; padding:8px 0 !important;}
      #login .partner-card{padding:15px 14px !important;}
      #login .partner-socials .social-icon{width:32px !important; height:32px !important;}
      #login .partner-socials .social-icon i{font-size:11px !important;}
      #login .foot-bottom{font-size:0.74rem !important; line-height:1.5 !important; padding-top:14px !important; margin-top:18px !important;}
    }