:root{--brand:#7c3aed;--brand2:#06b6d4;--brand_text:#001018;
  --bg:#030816;
  --card:rgba(8,14,28,.35);
  --muted:#b6c2d9;
  --text:#eef3fa;
  --primary:#0ea5e9;
  --accent:#22d3ee;
  --ring:rgba(34,211,238,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;line-height:1.7;color:var(--text)}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px}

/* Background YouTube video */
.bg-video{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#000}
.bg-video .bg-iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:177.78vh;height:100vh;min-width:100vw;min-height:56.25vw}
.bg-video .bg-overlay{position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 90% -10%, rgba(14,165,233,.25), transparent),
  linear-gradient(#00000099,#00000099);z-index:1}

/* Glass look */
.glass{background:var(--card);backdrop-filter:saturate(130%) blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius)}
.glass-deep{background:rgba(5,10,20,.45);backdrop-filter:saturate(150%) blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:calc(var(--radius)+4px)}
.muted{color:var(--muted)}
.glow{box-shadow:0 0 0 0 rgba(34,211,238,.0);animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.25)}50%{box-shadow:0 0 40px 4px rgba(14,165,233,.35)}}

.site-header{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(255,255,255,.08);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:700}
.logo img{filter:drop-shadow(0 4px 16px #0ea5e988)}
.nav{display:flex;gap:18px;align-items:center}
.nav a{opacity:.92}
.nav .btn{opacity:1}
.mobile-menu-toggle{display:none}

.hero{padding:80px 0 24px}
.hero-inner{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.title-3d{text-shadow:0 8px 40px rgba(0,0,0,.4)}
.hero h1{font-size:48px;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 12px}
.hero .trust{display:flex;gap:16px;flex-wrap:wrap;color:#d7e1f2}

.section{padding:40px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards .card{border-radius:var(--radius);padding:18px;box-shadow:0 10px 40px #00000033}
.card h3{margin-top:0}
.card.link{text-decoration:none;transition:transform .2s ease, box-shadow .2s ease}
.card.link:hover{transform:translateY(-4px);box-shadow:0 12px 50px #00000066}

.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:10px 16px;border:1px solid #ffffff22;text-decoration:none;transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px #00000055}
.btn-lg{padding:14px 18px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#001018;border:none}
.btn-secondary{background:rgba(10,20,38,.6)}
.btn-accent{background:rgba(10,33,49,.7);border-color:#22d3ee}
.btn-accent-outline{background:transparent;border-color:#22d3ee66}

.table{width:100%;border-collapse:collapse;border:1px solid #ffffff12;border-radius:12px;overflow:hidden}
.table th,.table td{border-bottom:1px solid #ffffff12;padding:10px 12px;text-align:right}
.note{background:rgba(10,27,45,.6);border:1px solid #22d3ee33;border-radius:12px;padding:14px;margin:16px 0}

.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0}
.steps li{list-style:none;background:rgba(10,18,36,.6);border:1px solid #ffffff12;border-radius:12px;padding:14px;display:flex;gap:10px;align-items:flex-start}
.steps li span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:#083c5a;color:#e6fbff;font-weight:700}

.pro-list{columns:2;column-gap:24px}
.faq{background:rgba(10,18,36,.6);border:1px solid #ffffff12;border-radius:12px;padding:10px;margin:10px 0}

.site-footer{border-top:1px solid #ffffff10;margin-top:40px;padding:28px 0 10px}
.grid-3 ul{margin:0;padding:0;list-style:none}
.foot-note{margin-top:12px;color:#b3c3da;font-size:14px;text-align:center}

.article h1{font-size:34px}
.article p, .article li{color:#e7effa}
.sep{border:0;border-top:1px solid #ffffff22;margin:24px 0}

@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .pro-list{columns:1}
  .bg-video .bg-iframe{width:100vw;height:56.25vw}
}

/* Reveal animations */
[data-animate]{opacity:0;transform:translateY(8px);transition:opacity .7s ease, transform .7s ease}
.reveal{opacity:1;transform:none}
.prefers-reduced-motion [data-animate]{transition:none;transform:none;opacity:1}


/* --- Hero becomes fully transparent (no glass box) --- */
.hero, .hero.hero-tight { background: transparent !important; }
.hero.glass, .hero.glass-deep { background: transparent !important; border: 0 !important; backdrop-filter: none !important; }
.hero .container { background: transparent !important; }
/* reduce overlay opacity further to show video even more */
.bg-video .bg-overlay{ background:
  radial-gradient(1200px 600px at 90% -10%, rgba(14,165,233,.12), transparent),
  linear-gradient(#00000044,#00000033) !important; }


/* === v16 Sticky CTA === */
.sticky-cta{position:fixed;right:12px;left:12px;bottom:12px;z-index:70;
  display:flex;gap:10px;justify-content:center;align-items:center;
  background:linear-gradient(135deg, var(--brand,.95), var(--brand2,.95));
  color:#001018;border-radius:16px;padding:10px 12px;box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.5)}
.sticky-cta a{background:#001018;color:#e6fbff;border-radius:12px;padding:10px 14px;text-decoration:none;font-weight:800}
.sticky-cta .small{opacity:.9}
@keyframes ctaPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
.sticky-cta{animation:ctaPulse 3.2s ease-in-out infinite}
.sticky-cta.hide{display:none}

/* Ribbon CTA */
.cta-ribbon{position:fixed;left:50%;transform:translateX(-50%);top:-60px;
  background:rgba(8,14,28,.92);color:#fff;border:1px solid rgba(255,255,255,.12);
  padding:10px 14px;border-radius:0 0 14px 14px;z-index:80;box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition:top .35s ease}
.cta-ribbon.show{top:0}
.cta-ribbon a{color:#22d3ee;text-decoration:none;font-weight:800}

/* === v19 Mirror makeover === */
.glass{position:relative; overflow:hidden}
.glass::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  pointer-events:none; opacity:.6;
}
.glass::after{
  content:""; position:absolute; top:-120%; left:-30%; width:60%; height:240%;
  transform:rotate(25deg);
  background:linear-gradient( to right, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100% );
  filter:blur(12px); opacity:.18;
  animation:mirrorSweep 8s linear infinite;
}
@keyframes mirrorSweep{
  0%{ transform:translateX(-120%) rotate(25deg); }
  100%{ transform:translateX(220%) rotate(25deg); }
}

/* Cards: slightly more see‑through */
.cards .card{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12) }
.cards .card:hover{ box-shadow:0 16px 60px rgba(0,0,0,.45) }
.article.glass{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) }

/* Sticky CTA banner -> mirror + shimmer */
.sticky-cta{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter:saturate(160%) blur(14px);
  position:fixed;
}
.sticky-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 300px at 20% -20%, rgba(255,255,255,.08), transparent),
             linear-gradient( to right, transparent, rgba(255,255,255,.18), transparent );
  background-size:200% 100%;
  animation:ctaShine 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaShine{
  0%{ background-position:0% 0 }
  50%{ background-position:100% 0 }
  100%{ background-position:0% 0 }
}
.sticky-cta a{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:var(--brand_text);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}