:root{
  --navy:#0F2744;--blue:#1A5DBE;--cyan:#29B6E8;--lcyan:#93D9F5;
  --teal:#0ABFA3;--white:#fff;--dark:#07101F;--muted:#6B8BB5;
  --card:rgba(255,255,255,.04);--border:rgba(255,255,255,.07);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html {
  scroll-behavior: auto;
  font-size: 16px;
}

html, body, #smooth-wrapper, #smooth-content {
  background-color: var(--dark) !important;
}

body{font-family:'Space Grotesk',sans-serif;background:var(--dark);color:#fff;overflow-x:hidden;cursor:none}

/* ── CURSOR ── */
#cur,#cur-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9999}
#cur{width:10px;height:10px;background:var(--cyan);top:0;left:0;mix-blend-mode:screen;transition:transform .15s}
#cur-ring{width:36px;height:36px;border:1.5px solid rgba(41,182,232,.45);top:0;left:0;transition:transform .3s ease}
@media(hover:none){#cur,#cur-ring{display:none}body{cursor:auto}}
a, button, .ptgl-track, .ptgl-label, .nav-burger, label, select {
  cursor: none !important;
}

/* ── NOISE ── */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}

/* ── NAV ── */
nav{position:fixed;inset:0 0 auto;z-index:500;padding:18px clamp(20px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  background:rgba(7,16,31,.75);border-bottom:1px solid rgba(41,182,232,.07);
  transition:padding .35s,background .35s}
nav.sc{padding:12px clamp(20px,5vw,64px);background:rgba(7,16,31,.97)}
.nav-logo img{height:38px;filter:drop-shadow(0 0 10px rgba(41,182,232,.45));display:block}
.nav-links{display:flex;gap:clamp(16px,3vw,36px);list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.02em;transition:color .25s}
.nav-links a:hover{color:var(--cyan)}
.nav-cta{flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;padding:9px 22px;border-radius:50px;font-size:.85rem;font-weight:600;
  text-decoration:none;transition:all .3s;box-shadow:0 4px 20px rgba(41,182,232,.3);white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(41,182,232,.5)}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-burger span{width:24px;height:2px;background:var(--cyan);border-radius:2px;transition:all .3s;display:block}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:499;background:rgba(7,16,31,.98);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;
  opacity:0;pointer-events:none;transition:opacity .35s}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{color:#fff;font-size:1.8rem;font-family:'Sora',sans-serif;font-weight:700;
  text-decoration:none;transition:color .25s}
.mobile-menu a:hover{color:var(--cyan)}

/* ── HERO ── */
#hero {
  height: 100vh; /* Fallback for older browsers */
  height: 100svh; /* Locks it to exactly 100% of the screen */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px; /* Overrides the heavy global section padding to prevent content overflow */
}
.hero-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 15% 55%,rgba(26,93,190,.28) 0%,transparent 58%),
             radial-gradient(ellipse 65% 55% at 85% 20%,rgba(41,182,232,.18) 0%,transparent 55%),
             radial-gradient(ellipse 55% 50% at 50% 105%,rgba(10,191,163,.12) 0%,transparent 50%),
             var(--dark)}
.hero-grid{position:absolute;inset:0;opacity:.055;
  background-image:linear-gradient(rgba(41,182,232,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(41,182,232,.6) 1px,transparent 1px);
  background-size:56px 56px}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.o1{width:min(500px,90vw);height:min(500px,90vw);background:radial-gradient(circle,rgba(26,93,190,.38),transparent 70%);top:-100px;left:-120px}
.o2{width:min(380px,70vw);height:min(380px,70vw);background:radial-gradient(circle,rgba(41,182,232,.28),transparent 70%);top:15%;right:-80px}
.o3{width:min(280px,60vw);height:min(280px,60vw);background:radial-gradient(circle,rgba(10,191,163,.22),transparent 70%);bottom:8%;left:35%}
.hero-c {
  position: relative;
  z-index: 2;
  text-align: center;
  /* Changed from: padding: 120px clamp(...) 80px; */
  padding: clamp(20px, 4vh, 60px) clamp(20px, 5vw, 60px); 
  max-width: 960px;
  width: 100%;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(41,182,232,.1);
  border: 1px solid rgba(41,182,232,.3);
  padding: 5px 16px;
  border-radius: 50px;
  font-size: .75rem;
  color: var(--cyan);
  /* Changed from a fixed 28px */
  margin-bottom: clamp(14px, 3vh, 28px);
  letter-spacing: .06em;
  font-weight: 700;
}
.bdot{width:6px;height:6px;background:var(--cyan);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}
.hero-logo{margin-bottom:28px}
.hero-logo img {
  filter: drop-shadow(0 0 28px rgba(41,182,232,.55));
  /* Keep the dynamic margin from the previous step */
  margin-bottom: clamp(20px, 4vh, 40px);
  /* INCREASED SIZE: A larger minimum and a larger maximum width */
  width: clamp(180px, 35vw, 420px); 
  height: auto;
}
h1.hero-h1 {
  font-family: 'Sora', sans-serif;
  /* Changed 7.5vw to 6vmin, and reduced the max size slightly */
  font-size: clamp(2rem, 6vmin, 5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
}
h1.hero-h1 .accent{color:transparent;-webkit-text-stroke:1.5px var(--cyan)}
.hero-tag{font-size:clamp(.85rem,2vw,1.1rem);color:var(--muted);margin-top:14px;letter-spacing:.06em}
.hero-desc{font-size:clamp(.95rem,2vw,1.1rem);color:rgba(255,255,255,.68);
  margin:20px auto 0;max-width:580px;line-height:1.72}
.hero-ctas{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-p{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  padding:14px 32px;border-radius:50px;font-size:.95rem;font-weight:600;text-decoration:none;
  transition:all .3s;box-shadow:0 8px 28px rgba(41,182,232,.32)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(41,182,232,.52)}
.btn-g{color:var(--cyan);padding:14px 32px;border-radius:50px;font-size:.95rem;
  font-weight:600;text-decoration:none;border:1.5px solid rgba(41,182,232,.38);
  transition:all .3s;background:rgba(41,182,232,.06)}
.btn-g:hover{background:rgba(41,182,232,.14);border-color:var(--cyan);transform:translateY(-3px)}
.scroll-ind{
    position:absolute;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    color:var(--muted);
    font-size:.7rem;
    letter-spacing:.12em;
    z-index:2;
    opacity:0.8;
}
.scroll-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--cyan),transparent);
  animation:scl 2s ease-in-out infinite}
@keyframes scl{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:.25;transform:scaleY(.4)}}

/* ── STATS ── */
.stats-bar{position:relative;z-index:2;
  background:rgba(15,39,76,.45);border-top:1px solid rgba(41,182,232,.1);border-bottom:1px solid rgba(41,182,232,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:clamp(20px,4vw,36px) clamp(20px,5vw,64px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:640px){.stats-bar{grid-template-columns:repeat(2,1fr)}}
.stat-item{text-align:center;padding:8px 0}
.stat-num{font-family:'Sora',sans-serif;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;color:var(--cyan);display:block}
.stat-lbl{font-size:clamp(.7rem,.9vw,.82rem);color:var(--muted);margin-top:4px;line-height:1.4}

/* ── SHARED SECTION ── */
section{position:relative;z-index:2;padding:clamp(60px,10vw,120px) clamp(20px,5vw,64px);scroll-margin-top:72px}
.s-tag{display:inline-block;color:var(--cyan);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
h2.sh{font-family:'Sora',sans-serif;font-size:clamp(1.8rem,5vw,3.4rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
h2.sh span{color:var(--cyan)}
.s-sub{color:var(--muted);font-size:clamp(.9rem,1.5vw,1.05rem);line-height:1.72;margin-top:16px}
.s-center{text-align:center}
.s-center .s-sub{margin-left:auto;margin-right:auto;max-width:580px}
.glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.2;position:relative;z-index:2}

/* ── MODULES ── */
#modules .mhd{margin-bottom:clamp(40px,8vw,80px)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
@media(max-width:900px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.mgrid{grid-template-columns:1fr}}
.mcard{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:clamp(20px,4vw,36px) clamp(18px,3vw,30px);
  position:relative;overflow:hidden;transition:all .4s cubic-bezier(.25,.46,.45,.94)}
.mcard::before{content:'';position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(135deg,var(--glow,rgba(41,182,232,.05)),transparent 60%);
  opacity:0;transition:opacity .4s}
.mcard:hover{transform:translateY(-7px);border-color:rgba(41,182,232,.28);
  box-shadow:0 20px 56px rgba(0,0,0,.45),0 0 0 1px rgba(41,182,232,.12)}
.mcard:hover::before{opacity:1}
.mcard-wide{grid-column:1/3}
@media(max-width:900px){.mcard-wide{grid-column:1/-1}}
.mi{font-size:2.1rem;margin-bottom:16px;display:block}
.mt{font-family:'Sora',sans-serif;font-size:1.12rem;font-weight:700;margin-bottom:10px}
.md{color:var(--muted);font-size:.875rem;line-height:1.65}
.mtag{display:inline-block;margin-top:16px;font-size:.68rem;font-weight:700;letter-spacing:.1em;padding:3px 11px;border-radius:50px}

/* ── CHATFLOW ── */
#chatflow .cf-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,80px);align-items:center;max-width:1200px;margin:0 auto}
@media(max-width:860px){#chatflow .cf-inner{grid-template-columns:1fr}}
.fv{background:rgba(15,39,76,.4);border-radius:22px;border:1px solid rgba(41,182,232,.15);
  padding:clamp(20px,4vw,36px);backdrop-filter:blur(20px)}
.fv-label{font-size:.68rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.fn{display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:rgba(255,255,255,.05);border-radius:11px;margin-bottom:7px;
  border:1px solid rgba(255,255,255,.06);transition:all .3s;cursor:default}
.fn:hover{background:rgba(41,182,232,.1);border-color:rgba(41,182,232,.28);transform:translateX(4px)}
.fn-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.fn-tx{font-size:.84rem;font-weight:500}
.fn-sx{font-size:.72rem;color:var(--muted);margin-top:2px}
.fconn{width:2px;height:16px;background:linear-gradient(to bottom,rgba(41,182,232,.5),rgba(41,182,232,.1));margin-left:34px}
.glob-row{margin-top:22px;padding:14px 16px;background:rgba(41,182,232,.05);border-radius:11px;border:1px solid rgba(41,182,232,.1)}
.glob-title{font-size:.68rem;color:var(--muted);margin-bottom:8px;letter-spacing:.05em}
.glob-tags{display:flex;gap:6px;flex-wrap:wrap}
.gtag{font-size:.68rem;padding:3px 9px;background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.3);border-radius:50px;color:#9B8FFF}
.nodes-list{display:flex;flex-direction:column;gap:14px}
.ni{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;
  background:rgba(255,255,255,.03);border-radius:12px;border:1px solid var(--border);transition:all .3s}
.ni:hover{background:rgba(41,182,232,.06);border-color:rgba(41,182,232,.2)}
.ni-ic{font-size:1.5rem;flex-shrink:0;margin-top:1px}
.ni-t{font-weight:600;font-size:.9rem;margin-bottom:3px}
.ni-d{color:var(--muted);font-size:.8rem;line-height:1.55}
.pill-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pill{background:rgba(41,182,232,.08);border:1px solid rgba(41,182,232,.2);
  border-radius:50px;padding:5px 14px;font-size:.75rem;color:var(--lcyan);font-weight:500}

/* ── AI SECTION ── */
#ai .ai-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,80px);align-items:center;max-width:1200px;margin:0 auto}
@media(max-width:860px){#ai .ai-inner{grid-template-columns:1fr}}
.demo-box{background:rgba(7,16,31,.9);border-radius:18px;border:1px solid rgba(41,182,232,.2);overflow:hidden}
.demo-bar{background:rgba(15,39,76,.8);padding:12px 18px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(41,182,232,.1)}
.dd{width:9px;height:9px;border-radius:50%}
.demo-title{font-size:.72rem;color:var(--muted);margin-left:8px;font-weight:500}
.demo-chat{padding:clamp(16px,3vw,24px);display:flex;flex-direction:column;gap:14px}
.cb{max-width:88%;padding:11px 15px;border-radius:13px;font-size:.82rem;line-height:1.55}
.cb-user{align-self:flex-end;background:linear-gradient(135deg,var(--blue),var(--cyan));border-radius:13px 13px 2px 13px}
.cb-bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:13px 13px 13px 2px}
.vars-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}
.vr{background:rgba(41,182,232,.12);border:1px solid rgba(41,182,232,.28);border-radius:7px;padding:5px 9px;font-size:.7rem}
.vn{color:var(--cyan);font-weight:700}
.vv{color:rgba(255,255,255,.8)}
.ai-features{display:flex;flex-direction:column;gap:16px;margin-top:36px}
.af{padding:18px 22px;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid var(--border);transition:all .3s}
.af:hover{background:rgba(41,182,232,.06);border-color:rgba(41,182,232,.2)}
.af-t{font-weight:600;margin-bottom:5px;font-size:.9rem}
.af-d{color:var(--muted);font-size:.8rem;line-height:1.55}

/* ── CHANNELS ── */
#channels .chgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1100px;margin:0 auto}
@media(max-width:900px){#channels .chgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#channels .chgrid{grid-template-columns:1fr}}
.chcard{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:18px;
  padding:clamp(24px,4vw,36px) clamp(18px,3vw,26px);text-align:center;
  position:relative;overflow:hidden;transition:all .4s}
.chcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--cc,var(--cyan));transform:scaleX(0);transition:transform .4s;transform-origin:left}
.chcard:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 52px rgba(0,0,0,.5)}
.chcard:hover::after{transform:scaleX(1)}
.ch-ic{font-size:2.6rem;margin-bottom:16px;display:block}
.ch-name{font-family:'Sora',sans-serif;font-size:1.08rem;font-weight:700;margin-bottom:10px}
.ch-desc{color:var(--muted);font-size:.82rem;line-height:1.6}
.ch-feats{margin-top:16px;display:flex;flex-direction:column;gap:5px;text-align:left}
.ch-feat{font-size:.75rem;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px}
.ch-feat::before{content:'✓';color:var(--cyan);font-weight:700;flex-shrink:0}

/* ── HOW ── */
#how .how-inner{max-width:860px;margin:0 auto}
.steps{position:relative;padding-left:0}
.step-line{position:absolute;left:31px;top:32px;bottom:32px;width:2px;
  background:linear-gradient(to bottom,var(--cyan),var(--teal),transparent)}
@media(max-width:540px){.step-line{left:25px}}
.step{display:flex;gap:clamp(20px,4vw,40px);margin-bottom:40px;position:relative}
.step-num{width:clamp(52px,7vw,64px);height:clamp(52px,7vw,64px);border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Sora',sans-serif;font-size:clamp(1.1rem,3vw,1.4rem);font-weight:800;
  box-shadow:0 0 0 6px rgba(41,182,232,.1),0 8px 22px rgba(41,182,232,.3);
  position:relative;z-index:1}
.step-c{padding-top:10px}
.step-t{font-family:'Sora',sans-serif;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700;margin-bottom:8px}
.step-d{color:var(--muted);line-height:1.7;font-size:clamp(.85rem,1.5vw,.95rem)}

/* ── CONTACT ── */
#contact{background:linear-gradient(180deg,rgba(15,39,76,.25) 0%,var(--dark) 100%)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,80px);align-items:start;max-width:1100px;margin:0 auto}
@media(max-width:820px){.contact-inner{grid-template-columns:1fr}}
.contact-info .s-sub{max-width:420px}
.contact-details{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.cd-item{display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:rgba(255,255,255,.04);border-radius:12px;border:1px solid var(--border);transition:all .3s}
.cd-item:hover{background:rgba(41,182,232,.07);border-color:rgba(41,182,232,.22)}
.cd-icon{font-size:1.5rem;flex-shrink:0}
.cd-t{font-weight:600;font-size:.88rem;margin-bottom:2px}
.cd-v{color:var(--muted);font-size:.82rem}
.form-card{background:rgba(15,39,76,.35);border:1px solid rgba(41,182,232,.12);
  border-radius:22px;padding:clamp(24px,4vw,40px);backdrop-filter:blur(20px)}
.form-title{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.form-grid{grid-template-columns:1fr}}
.form-full{grid-column:1/-1}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-size:.78rem;font-weight:600;color:var(--lcyan);letter-spacing:.04em;text-transform:uppercase}
.fg input,.fg textarea,.fg select{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:12px 16px;color:#fff;font-family:'Space Grotesk',sans-serif;
  font-size:.88rem;transition:all .3s;outline:none;width:100%}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted)}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--cyan);background:rgba(41,182,232,.07);box-shadow:0 0 0 3px rgba(41,182,232,.12)}
.fg select option{background:#0F2744;color:#fff}
.fg textarea{resize:vertical;min-height:110px}
.form-submit{width:100%;margin-top:8px;padding:14px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;
  transition:all .3s;box-shadow:0 8px 24px rgba(41,182,232,.3);letter-spacing:.02em}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(41,182,232,.5)}
.form-submit:active{transform:translateY(0)}
.form-ok{display:none;text-align:center;padding:32px 20px}
.form-ok-ic{font-size:3rem;margin-bottom:12px;display:block}
.form-ok-t{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:8px}
.form-ok-d{color:var(--muted);font-size:.9rem}

/* ── CTA ── */
#cta{background:linear-gradient(135deg,var(--navy) 0%,rgba(26,93,190,.38) 50%,rgba(41,182,232,.1) 100%);
  border-top:1px solid rgba(41,182,232,.14);text-align:center}
.cta-inner{max-width:680px;margin:0 auto}
.cta-inner p{color:var(--muted);font-size:clamp(.95rem,1.8vw,1.08rem);line-height:1.72;margin-bottom:40px;margin-top:20px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
footer{background:rgba(5,11,20,.97);border-top:1px solid rgba(255,255,255,.05);
  padding:clamp(40px,7vw,64px) clamp(20px,5vw,64px);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,40px)}
@media(max-width:860px){footer{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer{grid-template-columns:1fr}}
.fb{grid-column:1}
@media(max-width:860px){.fb{grid-column:1/-1}}
.fb img{height:34px;margin-bottom:14px;filter:drop-shadow(0 0 8px rgba(41,182,232,.3));display:block}
.fb p{color:var(--muted);font-size:.83rem;line-height:1.7;max-width:270px}
.fb-tag{color:rgba(41,182,232,.65);font-style:italic;font-size:.77rem;margin-top:8px}
.fc h4{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.fc a{display:block;color:var(--muted);text-decoration:none;font-size:.84rem;margin-bottom:9px;transition:color .25s}
.fc a:hover{color:#fff}
.fbot{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.05);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  color:var(--muted);font-size:.77rem}
.fbot span:last-child{color:var(--cyan)}

/* ── REVEAL ANIMATIONS ── */
.rv,  .rv-l, .rv-r{opacity:0;transition:opacity .75s ease,transform .75s ease}
.rv  {transform:translateY(36px)}
.rv-l{transform:translateX(-36px)}
.rv-r{transform:translateX(36px)}
.rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}

/* ── PARALLAX WRAPPER ── */
.par-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* ─── PRICING ──────────────────────────────── */
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px}
.ptgl-label{font-size:.9rem;color:var(--muted);cursor:pointer;font-weight:500;transition:color .2s}
.ptgl-label.active{color:#fff;font-weight:700}
.ptgl-track{width:46px;height:26px;background:rgba(255,255,255,.1);border:1px solid rgba(41,182,232,.3);border-radius:13px;position:relative;cursor:pointer;transition:background .3s}
.ptgl-track.on{background:var(--cyan)}
.ptgl-knob{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.3);will-change:transform}
.ptgl-track.on .ptgl-knob{transform:translateX(20px) !important}
.save-pill{background:rgba(10,191,163,.15);border:1px solid rgba(10,191,163,.35);color:var(--teal);font-size:.72rem;font-weight:700;padding:3px 12px;border-radius:50px;letter-spacing:.05em}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:48px auto 0}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}
.pcard{background:rgba(15,39,76,.35);border:1px solid rgba(41,182,232,.18);border-radius:22px;padding:clamp(24px,3vw,36px) clamp(20px,2.5vw,28px);display:flex;flex-direction:column;position:relative;transition:all .4s;overflow:hidden}
.pcard::before{content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(135deg,rgba(41,182,232,.04),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.pcard:hover{transform:translateY(-6px);border-color:rgba(41,182,232,.38);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.pcard:hover::before{opacity:1}
.pcard.featured{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 16px 50px rgba(41,182,232,.2)}
.pcard-badge{position:absolute;top:0px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;padding:3px 18px;border-radius:50px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;z-index:1}
.pn{font-family:'Sora',sans-serif;font-size:1.35rem;font-weight:800;margin-bottom:8px}
.pd{color:var(--muted);font-size:.82rem;line-height:1.6;min-height:48px;margin-bottom:22px}
.pp{margin-bottom:22px}
.pp-amount{font-family:'Sora',sans-serif;font-size:clamp(2rem,4vw,2.2rem);font-weight:800;line-height:1;display:flex;align-items:flex-start;gap:2px}
.cur{font-size:1.1rem;font-weight:600;color:var(--muted);margin-top:5px}
.pp-period{font-size:.8rem;color:var(--muted);margin-top:6px}
.pp-free{font-family:'Sora',sans-serif;font-size:2.2rem;font-weight:800;color:var(--teal)}
.pp-yearly-note{font-size:.75rem;color:var(--teal);margin-top:4px;display:none}
.pp-yearly-note.show{display:block}
.pcta{width:100%;padding:13px;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;border:none;transition:all .3s;margin-bottom:24px;font-family:'Space Grotesk',sans-serif;letter-spacing:.01em}
.pcta-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;box-shadow:0 5px 18px rgba(41,182,232,.28)}
.pcta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(41,182,232,.45)}
.pcta-outline{background:rgba(41,182,232,.07);color:var(--cyan);border:1.5px solid rgba(41,182,232,.3)}
.pcta-outline:hover{background:rgba(41,182,232,.14);border-color:var(--cyan)}
.pcta-free{background:rgba(10,191,163,.1);color:var(--teal);border:1.5px solid rgba(10,191,163,.3)}
.pcta-free:hover{background:rgba(10,191,163,.2)}
.pf-title{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(107,139,181,.6);margin-bottom:12px}
.pf-list{list-style:none;flex:1}
.pf-item{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pf-item:last-child{border-bottom:none}
.pf-check{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.62rem;font-weight:700;margin-top:1px}
.pf-yes{background:rgba(10,191,163,.15);color:var(--teal)}
.pf-no{background:rgba(107,113,133,.1);color:rgba(107,139,181,.5)}
.pf-text{color:rgba(255,255,255,.75);line-height:1.4}.pf-text.hi{color:#fff;font-weight:600}
.pf-val{color:var(--cyan);font-weight:700}.pf-inf{color:var(--teal);font-weight:700}
/* ─── ADDONS ────────────────────────────────── */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:40px auto 0}
@media(max-width:760px){.addon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.addon-grid{grid-template-columns:1fr}}
.addon-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;padding:22px 20px;transition:all .3s}
.addon-card:hover{background:rgba(41,182,232,.06);border-color:rgba(41,182,232,.22);transform:translateY(-3px)}
.addon-ic{font-size:1.6rem;margin-bottom:12px;display:block}
.addon-name{font-weight:700;font-size:.95rem;margin-bottom:6px}
.addon-desc{color:var(--muted);font-size:.8rem;line-height:1.55;margin-bottom:14px}
.addon-price{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:800;color:var(--cyan)}
.addon-price span{font-size:.75rem;color:var(--muted);font-weight:400}

/* ── PARALLAX BANNER ── */
.parallax-banner {
  position: relative;
  width: 100%;
  height: clamp(250px, 30vw, 400px); /* Mantiene una proporción alargada en cualquier pantalla */
  /* Aquí pondrás tu imagen alargada. En la versión final usarás la etiqueta de Django */
  background-image: url('https://images.unsplash.com/photo-1620825937374-87fc7d62828e?q=80&w=2072&auto=format&fit=crop'); 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

.parallax-overlay {
  position: absolute;
  inset: 0;
  /* Degradado para fundirlo con el color oscuro de tu fondo (--dark) */
  background: linear-gradient(to right, rgba(7, 16, 31, 0.9), rgba(15, 39, 76, 0.5), rgba(7, 16, 31, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(41, 182, 232, 0.15);
  border-bottom: 1px solid rgba(41, 182, 232, 0.15);
}

.parallax-text {
  font-family: 'Sora', sans-serif;
  color: var(--white);
  font-size: clamp(1.4rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}
.parallax-text span {
  color: var(--cyan);
}

/* ── CUSTOM SCROLLBAR ── */

/* For Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) var(--dark);
}

/* For Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 6px; /* Makes the vertical scrollbar thin */
  height: 6px; /* Makes the horizontal scrollbar thin, if it ever appears */
}

::-webkit-scrollbar-track {
  background: var(--dark); /* Blends perfectly with your site's background */
}

::-webkit-scrollbar-thumb {
  background: var(--cyan); /* The light blue from your logo */
  border-radius: 10px; /* Gives it smooth, rounded edges */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lcyan); /* Gets slightly lighter when hovered over */
}

/* ── NAVBAR LOGIN ── */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.nav-login {
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .3s;
}

.nav-login:hover {
  color: var(--cyan);
}

/* Hide the desktop actions on mobile so they don't overlap the burger menu */
@media(max-width: 900px) {
  .nav-actions {
    display: none;
  }
}


/* PARALLAX BACKGROUND */
.parallax-banner {
  position: relative;
  width: 100%;
  height: clamp(250px, 30vw, 400px);
  overflow: hidden;
  
  /* THIS is the fix — physically slice 3px off top and bottom */
  clip-path: inset(3px 0 6px 0);
  -webkit-clip-path: inset(3px 0 6px 0);
  
  z-index: 2;
  background-color: var(--dark) !important;
  transform: translate3d(0, 0, 0);
  margin-bottom: -4px;
}

.parallax-banner + .glow-line {
  position: relative;
  z-index: 3;
  box-shadow: 0 -8px 0 var(--dark);
  margin-top: -8px;
  padding-top: 8px;
}

.parallax-banner + .glow-line + section {
  position: relative;
  z-index: 3;
  box-shadow: 0 -8px 0 var(--dark);
}

.parallax-img {
  position: absolute;
  
  /* 4. Make the image massively oversized so GSAP never runs out of pixels to scroll */
  top: -30%; 
  left: -2%;
  width: 104%;
  height: 160%; 
  
  object-fit: cover; 
  z-index: 0; 
  pointer-events: none;
  
  /* 5. Same 3D hardware lock for the moving image */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Keep your border overlay exactly as it was! */
.parallax-banner::before,
.parallax-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--dark);
  z-index: 20;
  pointer-events: none;
}

.parallax-banner::before {
  top: -2px;
  border-bottom: 1px solid rgba(41, 182, 232, 0.15);
}

.parallax-banner::after {
  bottom: -2px;
  border-top: 1px solid rgba(41, 182, 232, 0.15);
}

.parallax-overlay {
  position: absolute;
  inset: -4px;  /* increased from -2px for extra safety */
  background: linear-gradient(to right, rgba(7, 16, 31, 0.9), rgba(15, 39, 76, 0.5), rgba(7, 16, 31, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}