
:root{--bg:#0B1120;--teal:#14B8A6;--cyan:#00AEEF;--indigo:#6366F1;--text:#E5E7EB}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:30;background:rgba(11,17,32,.88);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:42px;display:block}
.hero{position:relative;overflow:hidden}
.mesh::before,.mesh::after{content:'';position:absolute;inset:-20vmax;border-radius:50%;filter:blur(100px);opacity:.6;mix-blend-mode:screen;pointer-events:none}
.mesh::before{background:radial-gradient(60% 60% at 18% 25%, rgba(0,174,239,.7), transparent 70%)}
.mesh::after{background:radial-gradient(65% 55% at 78% 28%, rgba(99,102,241,.60), transparent 72%)}
.grid{position:relative;display:grid;grid-template-columns:1fr;gap:56px;padding:96px 0}
@media(min-width:960px){.grid{grid-template-columns:1.1fr .9fr}}
@media(max-width:959px){.grid>*{width:100%}}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));backdrop-filter:blur(14px);border-radius:999px;padding:6px 10px;font-size:12px;color:#e5e7eb}
.h1{font-size:44px;line-height:1.08;margin:0}
@media(min-width:960px){.h1{font-size:72px}}
.grad{background:linear-gradient(90deg,var(--teal),var(--cyan),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}
.p{color:#cbd5e1;font-size:18px;margin-top:16px;max-width:620px}
.form{margin-top:24px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));backdrop-filter:blur(14px);border-radius:18px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:12px}
.input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;color:#e5e7eb;outline:none}
.input:focus{border-color:var(--cyan)}
.btn{border:none;border-radius:12px;padding:14px 18px;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--cyan),var(--indigo));cursor:pointer}
.help{color:#94a3b8;font-size:12px;margin-left:8px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.chip{border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));backdrop-filter:blur(14px);border-radius:999px;padding:8px 12px;font-size:14px;color:#e5e7eb}
.right{display:flex!important;justify-content:center;align-items:center;width:100%;padding:24px 0;min-height:200px}
.video{width:100%;max-width:560px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:block!important;height:auto;min-height:150px}
@media(max-width:959px){.video{max-width:100%;border-radius:12px;width:100%!important}}
.unmute-btn{position:absolute;bottom:20px;right:20px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.3);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px)}
.unmute-btn:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.5);transform:scale(1.05)}
.unmute-btn.unmuted svg line{display:none}
.unmute-btn.unmuted svg:after{content:'';position:absolute;width:2px;height:20px;background:currentColor;transform:rotate(45deg)}
.cards{display:grid;grid-template-columns:1fr;gap:18px;padding:48px 0}
@media(min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));backdrop-filter:blur(14px);border-radius:18px;padding:22px}
.footer{padding:20px 0 40px 0;color:#94a3b8;font-size:14px}
