
:root{
  --bg:#F7F9FC;--card:#FFFFFF;--text:#0F172A;--muted:#5B6474;--blue:#2A6AF0;--blue-700:#1F57C4;--ring:#BBD1FF;--shadow:0 20px 60px rgba(2,8,23,.10)
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #E5EAF1}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-dot{width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px var(--ring)}
.brand-text{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:.3px}
.brand-text span{color:var(--blue)}
.nav{display:flex;align-items:center;gap:20px}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.mode-toggle{border:1px solid #E5EAF1;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.hero{position:relative;overflow:hidden}
.hero .bg-shape{position:absolute;filter:blur(60px);opacity:.5;z-index:-1}
.hero .bg-shape.one{width:480px;height:480px;background:#BBD1FF;top:-80px;left:-80px;border-radius:50%}
.hero .bg-shape.two{width:520px;height:520px;background:#FFEAA3;bottom:-120px;right:-80px;border-radius:50%}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;min-height:72vh;padding:60px 0}
.hero-copy h1{font-family:Manrope,Inter,sans-serif;font-size:clamp(32px,5vw,56px);line-height:1.04;margin:0 0 12px}
.hero-copy h1 span{color:var(--blue)}
.lead{font-size:18px;color:var(--muted);margin:0 0 20px}
.countdown{display:flex;gap:14px;margin:18px 0 10px}
.cd-item{background:var(--card);border:1px solid #E5EAF1;border-radius:14px;box-shadow:var(--shadow);padding:10px 14px;text-align:center;min-width:74px}
.cd-item span{font-weight:800;font-size:22px}
.cd-item label{display:block;font-size:12px;color:var(--muted)}
.cta{display:flex;gap:8px;align-items:center;margin-top:10px}
.cta input{padding:12px 14px;border:1px solid #E5EAF1;border-radius:12px;min-width:260px}
.cta button{padding:12px 16px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(42,106,240,.25)}
.cta button:hover{background:var(--blue-700)}
.ok{margin-top:10px;color:#0a7a2d;font-weight:700}
.hero-visual .card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hero-visual .card{background:var(--card);border:1px solid #E5EAF1;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card-emoji{font-size:24px}
.card-title{font-weight:800;margin-top:6px}
.card-meta{color:var(--muted);font-size:14px}
.features{padding:32px 0 64px}
.features h2{font-family:Manrope,Inter,sans-serif;font-size:28px;margin:0 0 18px}
.features-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature{background:var(--card);border:1px solid #E5EAF1;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.f-icon{font-size:22px;margin-bottom:8px}
.site-footer{border-top:1px solid #E5EAF1;background:#fff}
.foot-inner{height:72px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.dark{--bg:#0B1220;--card:#0F172A;--text:#E5EAF1;--muted:#B6C2D1;--blue:#77A7FF;--blue-700:#96BAFF;--ring:#21304d}
.dark .site-header{background:rgba(11,18,32,.6);border-color:#1b2436}
.dark .nav a{color:var(--muted)}
.dark .mode-toggle{background:#10172A;border-color:#1b2436;color:#E5EAF1}
.dark .features h2{color:var(--text)}
.dark .site-footer{background:#0F172A;border-color:#1b2436}
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .hero-visual{order:-1}
  .features-grid{grid-template-columns:1fr}
}
