:root{
  --bg: #fff;
  --surface: #f5f6f8;
  --accent: #00194e;
  --accent-soft: #111d4c;
  --muted: #6b7280;
  --glass: rgba(255,255,255,0.6);
  --radius: 14px;
  --max-width: 1200px;
  --shadow: 0 8px 30px rgba(6,10,30,0.08);
  --glass-2: rgba(17,29,76,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 500px at 10% 10%, rgba(79,142,247,0.08), transparent), linear-gradient(180deg,#ffffff 0%, #f7f9fc 100%);
  color: #0b1828;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max-width);margin:36px auto;padding:28px}
.site-header{display:flex;align-items:center;justify-content:flex-end;padding:8px 12px}
.logo img{height:56px;filter:drop-shadow(0 6px 18px rgba(1,25,78,0.12));animation:float 4s ease-in-out infinite}
.links a{color:var(--accent);text-decoration:none;font-weight:500}

.hero{display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:center;padding:40px;background:linear-gradient(135deg, rgba(1,25,78,0.02), transparent);border-radius:20px}
.hero-content{padding:8px;text-align:center}
.big-logo img{height:200px;display:block;margin:0 auto 18px;filter:drop-shadow(0 12px 30px rgba(1,25,78,0.12));border-radius:16px;animation:float 4s ease-in-out infinite}
.hero h1{font-family:'Playfair Display', serif;font-size:clamp(28px,4.2vw,48px);margin:0;color:var(--accent-soft)}
.lead{color:var(--muted);margin-top:10px;font-size:1.05rem}

.actions{display:flex;gap:16px;align-items:center;margin-top:18px;justify-content:center}
.countdown{color:var(--muted);font-size:0.95rem}

.visual{display:flex;justify-content:center}
.mockup{width:320px;max-width:65vw;background:linear-gradient(180deg,#ffffff,#f3f6ff);border-radius:28px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:visible}
.mock-shadow{position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:220px;height:36px;background:linear-gradient(90deg,rgba(1,25,78,0.06),rgba(1,25,78,0.02));filter:blur(18px);border-radius:50%}
.carousel{position:relative;height:560px;width:260px;margin:0 auto;border-radius:18px;overflow:hidden}
.carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transform:scale(1.03);transition:opacity .9s ease,transform .9s ease;border-radius:18px}
.carousel img.active{opacity:1;transform:scale(1)}

.site-footer{margin-top:22px;text-align:center;color:var(--muted);font-size:0.95rem}
.small{font-size:0.82rem;color:#9aa2b3}

@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* responsive */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:20px}
  .carousel{height:420px;width:240px}
  .wrap{padding:18px}
}

@media (max-width:420px){
  .carousel{height:360px;width:200px}
  .notify input{min-width:160px}
}