@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
 --ink:#12161f; --muted:#5b6575; --line:#e6ebf3; --card:#ffffff; --page:#ffffff;
 --brand:#1f6bff; --brand-dark:#1355e8; --brand-soft:#eef4ff; --brand-ink:#0b2f7a;
 --sky-top:#2f8bf0; --sky-bottom:#7fc0f5;
 --radius:16px; --shadow:0 24px 60px -24px #0f213f40;
 font:16px/1.5 'DM Sans',system-ui,sans-serif; color:var(--ink); background:var(--page);
}
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:11px;
 border:1px solid transparent;font-weight:600;cursor:pointer;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:#111826;color:#fff}
.btn-dark:hover{background:#28324a}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 8px 24px -12px #0b204a66}
.btn-white:hover{background:#f3f6fc}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark)}
.btn-lg{padding:15px 28px;font-size:17px}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header{position:absolute;inset:0 0 auto;z-index:20;padding:22px 0}
.site-header .wrap{display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-.6px;color:#fff}
.brand img{width:34px;height:34px}
.site-nav{display:flex;gap:30px;margin-inline:auto;font-weight:500;color:#ffffffde}
.site-nav a{padding:6px 2px;border-bottom:2px solid transparent}
.site-nav a:hover{color:#fff}
.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:#fff}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:150px 0 96px;text-align:center;color:#fff;isolation:isolate;min-height:min(760px,92vh)}
/* The illustration sits on a sky gradient, so the page still reads correctly before it loads. */
.hero::before{content:'';position:absolute;inset:0;z-index:-2;
 background:linear-gradient(180deg,var(--sky-top) 0%,#4ea6f2 38%,var(--sky-bottom) 70%,#cfe6fa 100%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
 background-image:linear-gradient(180deg,#0a2a5a5c 0%,#0a2a5a33 34%,#0a2a5a00 56%,#ffffff00 78%,#fff 100%),var(--hero-image,none);
 background-size:cover,cover;background-position:center,center 22%}
.hero h1{margin:0 auto;max-width:14ch;font-size:clamp(42px,6.4vw,76px);line-height:1.04;letter-spacing:-2.5px;font-weight:700;
 text-shadow:0 2px 24px #0b2a5a4d}
.hero p.sub{margin:22px auto 0;max-width:52ch;font-size:clamp(16px,1.6vw,19px);color:#ffffffe8;text-shadow:0 1px 12px #0b2a5a59}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-cta{--be-primary:#fff;--be-primary-ink:#111826;box-shadow:0 14px 34px -14px #06122daa}
.site-header .be-btn--secondary{--be-surface:#fff;--be-line:#ffffff00;box-shadow:0 8px 24px -12px #0b204a66}
.cta .be-btn--secondary{--be-surface:#fff;--be-line:#ffffff00}

/* ── product showcase ────────────────────────────────────────────────────── */
/* The practice screen in a window frame. The chrome is what makes a flat screenshot read as
   software rather than as a picture, and it hides the fact that the shot has no browser of its
   own. The crop keeps the video, the line being practiced and the answer box; the rest of the
   page is below the fold anyway. */
.showcase{margin:56px auto 0;width:min(720px,100% - 48px);padding:0;overflow:hidden;
 background:#fff;border:1px solid #ffffffa6;border-radius:16px;
 box-shadow:0 40px 80px -32px #08183a73, 0 8px 24px -12px #08183a45}
.showcase-chrome{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f6f8fc;
 border-bottom:1px solid #e9eef6}
.showcase-chrome .dot{width:10px;height:10px;border-radius:50%;background:#dfe5ef}
.showcase-chrome .dot:first-child{background:#f5b7b1}
.showcase-chrome .dot:nth-child(2){background:#f8ddab}
.showcase-chrome .dot:nth-child(3){background:#bfe3c3}
.showcase-url{margin-left:12px;padding:3px 12px;border-radius:999px;background:#fff;
 border:1px solid #e6ebf3;color:var(--muted);font-size:12.5px;letter-spacing:.1px}
.showcase-url span{color:#aab3c2}
.showcase-media{display:block;width:100%;aspect-ratio:1440/1454;object-fit:cover;object-position:top center;
 background:#0d1622}
@media(max-width:940px){
 .showcase{width:min(720px,100% - 32px);margin:40px auto 0;border-radius:13px}
 .showcase-media{aspect-ratio:1440/1454}
 .showcase-url{display:none}
}

/* ── features ────────────────────────────────────────────────────────────── */
.features{padding:74px 0 90px}
.features ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;text-align:center}
.features .icon{width:54px;height:54px;margin:0 auto 18px;border-radius:15px;background:var(--brand-soft);display:grid;place-items:center}
.features .icon svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.features h3{margin:0 0 9px;font-size:18px;font-weight:600}
.features p{margin:0;color:var(--muted);font-size:15px;max-width:22ch;margin-inline:auto}

/* ── sections ────────────────────────────────────────────────────────────── */
.band{padding:78px 0;border-top:1px solid var(--line);background:#fafbfd}
.band h2{margin:0 0 12px;font-size:clamp(28px,3.4vw,38px);letter-spacing:-1.2px;font-weight:600}
.band .lede{margin:0 0 38px;color:var(--muted);max-width:56ch;font-size:17px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.cards h3{margin:0 0 8px;font-size:17px;font-weight:600}
.cards p{margin:0;color:var(--muted);font-size:15px}
.steps-list{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:760px}
.steps-list li{counter-increment:step;display:flex;gap:16px;align-items:flex-start;background:var(--card);
 border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.steps-list li::before{content:counter(step);flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);
 color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}
.steps-list b{display:block;margin-bottom:4px;font-weight:600}
.steps-list span{color:var(--muted);font-size:15px}
.lang-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lang{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 17px;font-size:15px}
.lang.soon{color:var(--muted);border-style:dashed}
.lang em{font-style:normal;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.lang.now{border-color:#bcd6ff;background:var(--brand-soft);color:var(--brand-ink);font-weight:500}

.cta{padding:84px 0;text-align:center;background:linear-gradient(160deg,var(--brand) 0%,#1249c9 100%);color:#fff;border-top:1px solid var(--line)}
.cta h2{margin:0 0 12px;font-size:clamp(28px,3.6vw,40px);letter-spacing:-1.2px;font-weight:600}
.cta p{margin:0 auto 30px;max-width:48ch;color:#ffffffdb}

.site-footer{padding:34px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px;
 display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.site-footer .brand{color:var(--ink);font-size:19px}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}

@media(max-width:940px){
 .preview{grid-template-columns:1fr}
 .features ul{grid-template-columns:repeat(2,1fr);gap:30px 20px}
 .cards{grid-template-columns:1fr}
}
@media(max-width:760px){
 .hero{padding:110px 0 72px;min-height:0}
 .wrap{width:min(1120px,100% - 32px)}
 .site-nav{display:none}
 .brand{color:#fff}
 .hero{padding-top:110px}
 .preview{width:min(1000px,100% - 32px);padding:12px;margin-top:52px}
 .player-caption{bottom:56px}
 .features{padding:56px 0 64px}
 .band,.cta{padding:56px 0}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}