:root{--bg:#0b1220;--card:#111a2e;--text:#e8eefc;--muted:#a9b6d6;--accent:#57a6ff;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial; background:radial-gradient(900px 450px at 20% 10%, rgba(87,166,255,.18), transparent 60%),radial-gradient(700px 400px at 90% 30%, rgba(90,255,209,.12), transparent 55%),var(--bg); color:var(--text)}
a{color:inherit}
.header{max-width:980px;margin:0 auto;padding:22px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:10px;box-shadow:var(--shadow);object-fit:cover}
.brand strong{font-weight:700;letter-spacing:.2px}
.langbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);backdrop-filter:saturate(180%) blur(10px);text-decoration:none;color:var(--text)}
.langWrap{position:relative}
.langPanel{position:absolute;right:0;top:44px;min-width:220px;padding:8px;border-radius:12px;background:rgba(17,26,46,.92);backdrop-filter:saturate(180%) blur(14px);box-shadow:var(--shadow);display:none}
.langPanel.open{display:block}
.langItem{display:flex;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:10px;text-decoration:none;color:rgba(232,238,252,.95)}
.langItem:hover{background:rgba(255,255,255,.06)}
.langItem .native{font-weight:500}
.langItem .en{font-weight:400;color:rgba(169,182,214,.85)}
.main{max-width:980px;margin:0 auto;padding:12px 20px 60px}
.content-wrap{transition:opacity 150ms ease-in-out;opacity:1}
.content-wrap.is-transitioning{opacity:0}
.hero{display:block;margin-top:22px}
.card{background:rgba(255,255,255,.04);border-radius:18px;padding:22px 22px;box-shadow:var(--shadow)}
.kicker{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(169,182,214,.92);margin-bottom:10px}
.h1{font-size:40px;line-height:1.08;margin:0 0 10px}
.h2{font-size:18px;line-height:1.25;margin:0 0 10px}
.p{margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.55}

/* Pricing callout */
.calloutGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.calloutGrid{grid-template-columns:1fr}}

.priceCard{
  background:linear-gradient(135deg, rgba(87,166,255,.16), rgba(90,255,209,.10));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:18px 18px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.priceCard:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(450px 260px at 20% 10%, rgba(87,166,255,.22), transparent 60%),
             radial-gradient(380px 240px at 90% 30%, rgba(90,255,209,.18), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.priceCard > *{position:relative}

/* (kept intentionally minimal — avoid repeated copy) */

.priceBig{font-size:30px;line-height:1.05;margin:8px 0 10px;color:rgba(232,238,252,.98);font-weight:900;letter-spacing:.2px}
.priceBig .currency{opacity:.92;font-weight:900;font-size:17px}
.priceBig .amount{font-size:44px}
.priceBig .unit{opacity:.88;font-weight:800;font-size:17px;margin-left:6px}


.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:14px;text-decoration:none;font-weight:600}
.cta.primary{background:linear-gradient(135deg, rgba(87,166,255,.95), rgba(90,255,209,.9));color:#071221}
.cta.ghost{background:rgba(255,255,255,.06);color:var(--text)}
.cta.wide{padding:13px 22px;min-width:240px;border-radius:999px}
.logoLarge{width:100%;max-width:340px;margin-left:auto;border-radius:22px;box-shadow:var(--shadow);background:#fff}
.demoFrame{width:100%;max-width:900px;margin:0 auto;border-radius:22px;box-shadow:var(--shadow);background:rgba(255,255,255,.04);overflow:hidden;}
.demoIframe{display:block;width:100%;aspect-ratio:16/10;height:auto;border:0;background:transparent;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}
.list li{margin:6px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(169,182,214,.85);margin-bottom:8px}
.faq{border-top:1px solid rgba(255,255,255,.08);padding:10px 0}
.faq:first-of-type{border-top:0;padding-top:0}
.faq summary{cursor:pointer;color:rgba(232,238,252,.92);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq div{color:var(--muted);padding-top:8px;line-height:1.6}
.banner{display:none;max-width:980px;margin:10px auto 0;padding:0 20px}
.banner .inner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.06);border-radius:14px;padding:8px 10px;color:var(--muted);font-size:13px}
.banner button{border:0;border-radius:10px;padding:7px 10px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer}
.footer{max-width:980px;margin:0 auto;padding:18px 20px 34px;color:rgba(169,182,214,.8);font-size:12px}
.footerRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footerLinks{display:flex;align-items:center;gap:10px;color:rgba(169,182,214,.9)}
.footerLinks a{text-decoration:none;color:rgba(169,182,214,.92)}
.footerLinks a:hover{color:rgba(232,238,252,.95)}
.footerLinks .dot{opacity:.7}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .logoLarge{margin:0;max-width:420px}
  .demoFrame{max-width:none;}
  .demoIframe{aspect-ratio:16/10;height:auto;}
  .grid2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}

/* Mobile: slightly taller iframe so the 3 caption lines fit, without creating large whitespace. */
@media (max-width:520px){
  .demoIframe{aspect-ratio:16/12;}
}