:root{ --ocean:#0ea5b7; --ocean-deep:#0c6e8c; --sun:#f59e0b; }
*{box-sizing:border-box}
body{margin:0}
/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,48px);z-index:100;background:rgba(253,252,255,.72);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--border-soft)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.brand .dot{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent-bright),var(--ocean));box-shadow:0 0 14px var(--accent-glow)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-links{display:flex;gap:22px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav-links a{font-size:.9rem;color:var(--text-2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.lang-toggle{display:flex;gap:2px;border:1px solid var(--border);border-radius:999px;padding:3px;font-size:.78rem;font-family:var(--mono)}
.lang-toggle a{padding:3px 10px;border-radius:999px;text-decoration:none;color:var(--text-3)}
.lang-toggle a.on{background:var(--text);color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 22px;font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--ocean));color:#fff;box-shadow:0 8px 24px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--border);color:var(--text);background:var(--surface)}
@media(max-width:820px){.nav-links{display:none}}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + 40px) clamp(18px,4vw,48px) 60px}
.hero-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(1100px 700px at 78% 12%,var(--accent-dim),transparent 60%),
  radial-gradient(900px 600px at 12% 90%,rgba(14,165,183,.10),transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg-soft))}
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.5;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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.hero-inner{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocean-deep);border:1px solid var(--border);border-radius:999px;padding:7px 14px;background:var(--surface)}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(134,239,172,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(134,239,172,.55)}70%{box-shadow:0 0 0 10px rgba(134,239,172,0)}100%{box-shadow:0 0 0 0 rgba(134,239,172,0)}}
h1.hh{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98;letter-spacing:-.035em;font-weight:800;margin:.5em 0 .3em}
h1.hh .grad{background:linear-gradient(110deg,var(--accent),var(--ocean) 60%,var(--ocean-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--text-2);max-width:34em;line-height:1.5;font-weight:300}
.cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-hi);background:var(--surface)}
.hero-card img{width:100%;display:block}
.hero-card .badge{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:.72rem;background:rgba(0,0,0,.55);color:#fff;padding:6px 11px;border-radius:8px;backdrop-filter:blur(6px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--max-w);margin:46px auto 0;position:relative;z-index:2}
.stat{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:18px}
.stat b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,var(--text),var(--ocean-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.8rem;color:var(--text-3)}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.hero-card{order:-1;max-width:420px}.stats{grid-template-columns:repeat(2,1fr)}}
/* ---------- SECTIONS ---------- */
.section{max-width:var(--max-w);margin:0 auto;padding:clamp(64px,9vw,120px) clamp(18px,4vw,48px)}
.s-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocean-deep);margin-bottom:14px}
h2.hh{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1.04;font-weight:800;margin:0 0 .5em;max-width:18em}
.lead2{font-size:1.1rem;color:var(--text-2);max-width:40em;line-height:1.6;font-weight:300}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* program grid */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.pcard{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:22px;text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi);border-color:var(--accent-ultra)}
.pcard .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,var(--accent-dim),rgba(14,165,183,.1));margin-bottom:14px}
.pcard h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.01em}
.pcard p{margin:0;font-size:.86rem;color:var(--text-3);line-height:1.45}
.pcard .tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.62rem;color:var(--ocean-deep);background:rgba(14,165,183,.1);padding:3px 7px;border-radius:6px}
@media(max-width:1000px){.prog{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prog{grid-template-columns:1fr}}
/* feature block */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:40px}
.feat.rev{direction:rtl}.feat.rev>*{direction:ltr}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
@media(max-width:860px){.feat{grid-template-columns:1fr}}
/* price chart */
.chartwrap{position:relative}
.chart-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--text-3);margin-top:10px}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--text-2);margin-top:14px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.spreadbox{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.spreadbox div{flex:1;min-width:120px;background:var(--bg-mute);border-radius:var(--radius-sm);padding:14px}
.spreadbox b{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.spreadbox span{font-size:.74rem;color:var(--text-3);display:block}
/* frequency */
.freq{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.freq-dial{font-family:var(--mono);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;letter-spacing:-.02em;color:var(--ocean-deep)}
.freq-dial small{font-size:.4em;color:var(--text-3)}
.freq-bar{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--danger),var(--emerald) 50%,var(--danger));position:relative;flex:1;min-width:220px}
.freq-needle{position:absolute;top:-5px;width:3px;height:18px;background:var(--text);border-radius:2px;transition:left .8s var(--ease)}
/* video */
.videowrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-hi);position:relative;background:#000}
.videowrap video{width:100%;display:block}
/* learn */
.learn{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;counter-reset:lu}
.lu{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:18px;position:relative}
.lu::before{counter-increment:lu;content:counter(lu,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;color:var(--accent);display:block;margin-bottom:8px}
.lu h4{margin:0 0 5px;font-size:.96rem}
.lu p{margin:0;font-size:.82rem;color:var(--text-3);line-height:1.45}
@media(max-width:800px){.learn{grid-template-columns:1fr}}
/* about */
.about{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}
.about dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.9rem;margin:0}
.about dt{font-family:var(--mono);color:var(--text-3);font-size:.78rem}
.about dd{margin:0;color:var(--text-2)}
@media(max-width:800px){.about{grid-template-columns:1fr}}
/* cta band */
.cta-band{max-width:var(--max-w);margin:0 auto clamp(64px,9vw,110px);padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);border-radius:calc(var(--radius)*1.4);background:linear-gradient(125deg,#101014,#1a2230 70%,var(--ocean-deep));color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;margin:0 0 .4em;color:#fff}
.cta-band p{color:rgba(255,255,255,.7);max-width:34em;margin:0 auto 28px;font-weight:300}
.footer{border-top:1px solid var(--border-soft);padding:46px clamp(18px,4vw,48px);max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.84rem;color:var(--text-3)}
.footer a{color:var(--text-2);text-decoration:none}
.note{font-family:var(--mono);font-size:.7rem;color:var(--text-3);margin-top:8px}

/* Clean line icons (replace emojis) */
.ico{color:var(--ocean-deep)}
.ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.emoji svg{width:30px;height:30px;stroke:var(--c,#0c6e8c);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h3 svg.hicon{width:20px;height:20px;stroke:var(--ocean-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:6px}