:root {
  --bg-white: #ffffff;
  --bg-alt: #f4f8ff;
  --text-main: #1b2430;
  --text-muted: #5f6b80;
  --accent-blue: #1a73e8;
  --accent-dark: #0f4c81;
  --border-soft: #dde4f5;
  --shadow-soft: 0 18px 40px rgba(15, 76, 129, 0.12);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  background: var(--bg-white);
  line-height: 1.6;
}

a { color: var(--accent-blue); text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.top-banner { background: linear-gradient(90deg, #0f4c81, #1a73e8); color: #fff; padding: 0.45rem 0; text-align: center; }
.banner-text { margin: 0; font-size: 0.95rem; opacity: 0.95; }

.hero { background: radial-gradient(circle at top left, #4f8dfc 0%, #0f4c81 45%, #050b18 100%); color: #fff; padding: 3.5rem 0 3rem; }
.hero-inner { display: flex; align-items: center; justify-content: center; }
.hero-text { max-width: 720px; text-align: center; }
.hero-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; margin-bottom: 0.75rem; color: rgba(255,255,255,0.95); }
.hero h1 { font-size: 2.2rem; line-height: 1.25; margin: 0 0 0.75rem; color: #fff; }
.hero h2 { font-size: 1.4rem; margin: 0 0 0.75rem; color: rgba(255,255,255,0.95); }
.hero-sub { font-size: 1rem; margin-bottom: 1.5rem; color: rgba(255,255,255,0.9); }

.btn-glass { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: linear-gradient(135deg, rgba(90,165,255,0.95), rgba(15,76,129,0.98)); color: #fff; font-weight: 600; }
.btn-large { width: 100%; max-width: 320px; margin: 0.5rem auto 0; }

.section, .section-alt { padding-top: 6rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(0,0,0,0.04); }
.section { background: var(--bg-white); }
.section-alt { background: var(--bg-alt); }
.section h3, .section-alt h3 { font-size: 1.4rem; margin-top: 3rem; margin-bottom: 1.75rem; color: var(--text-main); }
.section p, .section-alt p { margin-bottom: 1.25rem; color: var(--text-muted); }

.list { margin: 0.75rem 0 1.25rem; padding-left: 1.2rem; color: var(--text-main); }
.list li { margin-bottom: 0.6rem; }

.order-box { background: #fff; border-radius: 16px; border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); padding: 1.75rem 1.5rem; margin: 1.5rem 0 1.75rem; }
.price-line { font-size: 1.1rem; text-align: center; margin-top: 0.75rem; }

.footer { padding: 1.5rem 0 1.75rem; background: #050b18; color: #c7d0e5; font-size: 0.85rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

@media (max-width: 768px) {
  .hero { padding: 2.5rem 0 2.25rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero h2 { font-size: 1.15rem; }
  .section, .section-alt { padding-top: 3.25rem; padding-bottom: 2.25rem; }
}