:root{
  --bg: #0b1020;
  --muted:#6b7280;
  --brand:#2563eb;
  --brand-2:#06b6d4;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji;
  color:#111827;
  background:#fff;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ===== HERO (left-aligned, refined gradient, with art) ===== */
.hero--brand{
  background: linear-gradient(120deg, #0ea5e9 0%, #22d3ee 100%);
  color:#fff;
  padding:40px 0 36px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:24px;
  align-items:center;
}
.hero__copy{max-width:640px}
.brandline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px 0;
  line-height:1;
  color:#fff;
}
.brandline .brand{font-weight:800;font-size:34px;letter-spacing:.2px}
.brandline .dash{opacity:.6;font-size:26px}
.brandline .tagline{font-weight:600;font-size:22px;opacity:.95}
.brandline .datasym{display:inline-flex;opacity:.9}
.brandline .datasym svg{width:20px;height:20px}

.hero__sub-small{margin:6px 0 0;font-size:16px;opacity:.95}

/* Decorative icons */
.hero__art{position:relative;min-height:120px}
.art{
  position:absolute;
  color:rgba(255,255,255,0.9);
  filter: drop-shadow(0 6px 18px rgba(3, 7, 18, .18));
}
.art--plane{top:10px;left:10px;opacity:.95}
.art--arrow{top:54px;left:88px;opacity:.75}
.art--phone{top:14px;left:168px;opacity:.9}

/* ===== TRUST STRIP ===== */
.trust--lg{
  background:#0e1530;
  color:#e5edff;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.trust__row--3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  padding:16px 0;
}
.trust__item{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:.2px;
}
.trust__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#9ecbff}

/* ===== SECTIONS & CARDS ===== */
.section-title{font-size:28px;margin:32px 0 14px}
.fineprint{color:#6b7280;margin:12px 0 8px;font-size:14px}

.card{
  background:var(--card);border:1px solid #e5e7eb;border-radius:18px;padding:18px;
  position:relative;box-shadow:0 6px 20px rgba(2,6,23,0.06);
  min-width:280px;
}
.card--plan{width:320px}
.badge{
  position:absolute;top:14px;right:14px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;font-size:12px;padding:6px 10px;border-radius:999px
}
.card__title{margin:6px 0 8px;font-size:18px}
.card__desc{margin:0 0 14px;color:#374151}
.price{display:flex;align-items:end;gap:8px;margin-bottom:12px}
.price__major{font-size:26px;font-weight:800}
.price__minor{color:#6b7280}
.card .btn{width:100%}

/* ===== SLIDER ===== */
.slider{position:relative;display:flex;align-items:center;gap:10px}
.slider__track{display:flex;gap:16px;overflow:auto;scroll-behavior:smooth;scrollbar-width:thin;padding:4px 2px 10px}
.slider__track::-webkit-scrollbar{height:8px}
.slider__track::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:8px}
.slider__btn{
  background:#0b1020;color:#fff;border:none;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.slider__btn:hover{opacity:.9}
.slider__btn:disabled{opacity:.35;cursor:default}

/* ===== FOOTER ===== */
.footer{border-top:1px solid #e5e7eb;margin-top:36px}
.footer__row{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 0}
.footer__nav{display:flex;gap:14px;flex-wrap:wrap}
.footer__nav a{color:#1f2937;text-decoration:none}
.footer__nav a:hover{text-decoration:underline}
.logo{font-weight:800;font-size:28px;letter-spacing:.3px}
.logo--sm{font-size:20px}
.tag{opacity:.9;margin-top:4px}
.tag--sm{font-size:12px}
.muted{color:var(--muted);font-size:13px}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{min-height:80px}
  .art--plane{top:6px;left:0}
  .art--arrow{top:40px;left:72px}
  .art--phone{top:8px;left:140px}
  .slider__btn{display:none}
}
