/* ===== Reset & utilities ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; height: auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Ensure the HTML hidden attribute always hides (prevents duplicate drawer) */
[hidden] { display: none !important; }

:root{
  --bg:#0b1720; --surface:#0f1f26; --paper:#ffffff;
  --ink:#0f1115; --muted:#697480; --teal:#0ea5a5;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --glass:rgba(10,10,10,.78);
  --radius:16px;
  --header-h:56px; /* JS will keep this in sync */
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:#111;
  background:#fff;
  line-height:1.6;
}

.container{ width:min(1200px,92%); margin:0 auto; }
.section{ padding:80px 0; }
.section.alt{ background:#f7f8fa; }
.section-title{ font-size:clamp(22px,3vw,34px); margin-bottom:16px; }
.section-lead{ color:var(--muted); margin-bottom:26px; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--glass); backdrop-filter: saturate(180%) blur(10px);
  color:#fff;
}
.nav-inner{ display:flex; align-items:center; gap:18px; padding:12px 0; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:800;}
.brand img{ border-radius:10px; box-shadow:var(--shadow); }
.main-nav{ display:flex; gap:28px; margin-left:18px; flex:1; }
.main-nav a{ color:#e5e7eb; text-decoration:none; font-weight:600; }
.main-nav a:hover{ color:#fff; }

.store-badges{ display:flex; align-items:center; gap:14px; }
.store-badge img{ height:36px; width:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.hamburger{ display:none; margin-left:auto; background:none; border:0; width:40px; height:32px; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.hamburger span{ display:block; width:22px; height:2px; background:#fff; }

.site-header.shrink .nav-inner{ padding:8px 0; }
.site-header.shrink .store-badge img{ height:32px; }

/* ===== Mobile drawer (overlay) ===== */
.mobile-menu{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: rgba(10,10,10,.95);
  padding: 16px 4%;
  display: grid; gap: 14px;
  z-index: 60;
}
.mobile-menu a{ color:#fff; text-decoration:none; font-weight:600; }
.mobile-stores{ display:flex; gap:14px; }

/* Never show the drawer on desktop even if JS hiccups */
@media (min-width:1025px){
  .mobile-menu{ display: none !important; }
}

/* ===== Hero with parallax bg ===== */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background: linear-gradient(180deg, #0b1720 0%, #0e1d23 100%);
  padding-top:56px;
}
.hero-bg{
  position:absolute; inset:-10% -10% auto -10%; height:120%;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(14,165,165,.25), transparent 60%),
    radial-gradient(60% 60% at 80% 10%, rgba(255,255,255,.06), transparent 60%);
  transform: translateY(0);
  transition: transform .2s linear;
  pointer-events:none;
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center; min-height:70vh; }
.hero-copy h1{ font-size:clamp(32px,6vw,56px); line-height:1.05; letter-spacing:-.02em; margin-bottom:12px; }
.hero-copy p{ color:#c9d2d8; margin-bottom:22px; }
.cta-row{ display:flex; gap:12px; }

.phone-frame{
  border-radius:32px; overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  transform:rotate(-2deg);
}
.tilt{ transition: transform .2s ease; will-change: transform; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px;
  border-radius:999px; font-weight:700; text-decoration:none;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn.primary{ background:var(--teal); color:#fff; box-shadow:0 10px 20px rgba(14,165,165,.35); }
.btn.primary:hover{ transform:translateY(-1px); }
.btn.ghost{ border:2px solid rgba(255,255,255,.55); color:#fff; }
.btn.ghost:hover{ border-color:#fff; }

/* ===== Cards ===== */
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px; }
.cards.three{ grid-template-columns: repeat(3,1fr); }
.card{
  background:#fff; border-radius:var(--radius); min-height:160px; padding:18px; box-shadow:var(--shadow);
}
.card h3{ font-size:18px; margin-bottom:6px; }
.card p{ color:var(--muted); }
.card.muted{ display:flex; align-items:center; justify-content:center; color:var(--muted); }
.lift{ transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }

/* ===== B2B & Contact ===== */
.b2b-grid, .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:center; }
.ticks{ margin:10px 0 18px; padding-left:18px; }
.ticks li{ margin:6px 0; }

/* ===== Footer ===== */
.site-footer{ margin-top:72px; background:#f7f8fa; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; color:var(--muted); }
.footer-nav a{ color:var(--muted); text-decoration:none; margin-left:18px; }
.footer-nav a:hover{ color:#111; }

/* ===== Scroll indicator ===== */
.scroll-indicator{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); opacity:.9;}
.scroll-indicator span{
  display:block; width:2px; height:28px; background:rgba(255,255,255,.8);
  animation: scrollPulse 1.6s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%{ transform: scaleY(.3); opacity:.5;}
  50%{ transform: scaleY(1); opacity:1;}
  100%{ transform: scaleY(.3); opacity:.5;}
}

/* ===== Reveal animations (reduced-motion safe) ===== */
[data-animate]{ opacity:0; transform: translateY(10px); }
.revealed{ opacity:1 !important; transform:none !important; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
[data-animate="fade-down"]{ transform: translateY(-10px); }
[data-animate="fade-left"]{ transform: translateX(16px); }
[data-animate="fade-right"]{ transform: translateX(-16px); }
[data-delay]{ transition-delay: calc(var(--d, 0ms)); }
@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1; transform:none; }
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .main-nav{ display:none; }
  .hamburger{ display:inline-flex; }
  .store-badges{ display:none; }
  .hero-grid, .b2b-grid, .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width:640px){
  .cards, .cards.three{ grid-template-columns:1fr; }
}