/* ---------- Base ---------- */
:root{
  --bg:#0d0d0d;
  --bg-elev:#121212;
  --card:#181818;
  --text:#eaeaea;
  --muted:#bdbdbd;
  --accent:#ff1a00;
  --accent-2:#f64e2f;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.lead{color:var(--muted)}
.accent{color:var(--accent)}
.rounded{border-radius:var(--radius)}
.btn{
  display:inline-block; padding:14px 22px; border-radius:12px;
  background:var(--accent); color:white; text-decoration:none;
  font-weight:700; box-shadow:var(--shadow); transition:.2s;
}
.btn:hover{transform:translateY(-1px); opacity:.95}
.btn--ghost{background:transparent;border:1px solid #2b2b2b}
.btn--ghost:hover{border-color:var(--accent);color:var(--text)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(13,13,13,.8); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #151515;
}
.header-inner{display:flex; align-items:center; gap:18px; padding:14px 0}
.logo{color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px}
.logo span{color:var(--accent)}
.main-nav{display:flex; gap:18px; margin-left:auto}
.main-nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px}
.main-nav a:hover{color:white; background:#1a1a1a}
.cta-wrap{display:flex; gap:10px; margin-left:8px}
.hamburger{display:none; background:none;border:0; margin-left:auto}
.hamburger span{display:block; width:22px; height:2px; background:#fff; margin:5px 0}

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(1200px 400px at 70% -20%, rgba(255,26,0,.35), transparent 60%), var(--bg);
  padding-bottom:0;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 1.3fr; /* image area gets more room on desktop */
  gap:30px;
  align-items:center;
  min-height:540px;
}
.hero-copy h1{font-size:38px; line-height:1.15; margin:.2rem 0 1rem}
.hero-copy .eyebrow{color:var(--accent); text-transform:uppercase; font-weight:800; letter-spacing:.1em}
.hero-copy .sub{color:var(--muted); max-width:600px}
.actions{display:flex; gap:12px; margin-top:18px}
.hero-art img{width:100%; height:auto;}

/* ticker */
.ticker{border-top:1px solid #161616; background:#0f0f0f}
.ticker-inner{display:flex; gap:28px; justify-content:space-between; padding:12px 0; font-weight:700}
.ticker-inner a{color:#f3f3f3; text-decoration:none}

/* ---------- Sections ---------- */
.section{padding:70px 0; background:var(--bg)}
.section--alt{background:var(--bg-elev)}
.section--bg{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.section--bg::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7));
}
.section--bg .container{ position:relative; z-index:1; }
.offer{ min-height:360px; display:flex; align-items:center; }

.section .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center}
.narrow{max-width:740px}

.features{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px}
.features article{background:var(--card); padding:20px; border-radius:var(--radius); border:1px solid #1a1a1a}
.features .icon{width:36px;height:36px;margin-bottom:10px}

.stats{display:flex; gap:18px; margin:16px 0 0; padding:0; list-style:none}
.stats li{background:#141414;border:1px solid #1a1a1a; border-radius:12px; padding:12px 16px}
.stats strong{font-size:20px; display:block}
.bullets{margin:1rem 0; padding-left:18px}
.bullets li{margin:.4rem 0}

/* split */
.section--split .split-inner{display:grid; grid-template-columns:1fr 1.1fr; gap:30px; align-items:center}
.section--split .split-copy h2{margin-top:0}
.section--split .split-media img{border-radius:var(--radius)}
.section--split .reverse{grid-template-columns:1.1fr 1fr}

/* bottle center */
.bottle-center{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin-top:24px}
.bottle-points{list-style:disc; display:grid; gap:10px}
.bottle-points.left{text-align:right; list-style-position:inside}
.bottle-points.right{text-align:left}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:16px}
.gallery img{border-radius:16px; aspect-ratio:1.2/1; object-fit:cover}

/* reviews */
.reviews{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px}
.review{background:var(--card); border:1px solid #1a1a1a; border-radius:var(--radius); padding:18px}

/* newsletter */
.newsletter .subscribe{display:flex; gap:12px; justify-content:center; margin-top:14px}
.newsletter input{padding:14px 16px; border-radius:12px; border:1px solid #2b2b2b; background:#0e0e0e; color:#fff; min-width:280px}

/* footer */
.site-footer{border-top:1px solid #161616; background:#0f0f0f}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0}
.footer-nav{display:flex; gap:14px}
.footer-nav a{color:#cfcfcf; text-decoration:none}

/* ---------- Responsive (desktop-safe) ---------- */

/* Medium screens */
@media (max-width: 1024px){
  .features{grid-template-columns:repeat(2,1fr)}
  .section .grid-2 {grid-template-columns:1fr}
  .section--split .split-inner{grid-template-columns:1fr}
  .bottle-center{grid-template-columns:1fr}
  .bottle-points.left, .bottle-points.right{text-align:left}
}

/* Make ticker scroll & adjust some grids earlier */
@media (max-width: 900px){
  .ticker-inner{ gap:18px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
  .ticker-inner::-webkit-scrollbar{ display:none; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .reviews{ grid-template-columns:1fr; }
}

/* Phone/tablet breakpoint — **all mobile fixes live here** */
@media (max-width: 820px){
  /* header */
  .main-nav, .cta-wrap { display:none !important; }
  .hamburger { display:block !important; }
  .site-header .logo { display:block; text-align:center; margin:0 auto; }

  /* container breathing room + type tweaks */
  .container{ padding-left:16px !important; padding-right:16px !important; }
  h1{ font-size:28px; line-height:1.2; }
  h2{ font-size:22px; line-height:1.25; }
  .section{ padding:48px 0 !important; }

  /* hero */
  .hero-inner{ grid-template-columns:1fr !important; gap:18px; min-height:auto; padding-top:12px; }
  .hero-copy{ text-align:center; }
  .actions{ justify-content:center; flex-wrap:wrap; }
  .hero-copy h1{ font-size:28px; }
  .hero-art img{ width:min(86vw,520px); max-width:100%; margin:6px auto 0; display:block; }

  /* any 2-col to 1-col */
  .section .grid-2,
  .section--split .split-inner { grid-template-columns:1fr !important; gap:18px; }
  .features{ grid-template-columns:1fr !important; gap:12px; }
  .section--split .split-media img{ width:100%; height:auto; }

  /* offer background readability + sensible height */
  .section--bg{ background-size:cover; background-position:center; }
  .offer{ min-height:280px !important; display:flex; align-items:center; }

  /* bottle */
  .bottle-center{ grid-template-columns:1fr !important; text-align:left; }
  .bottle-center img{ max-width:260px; width:75%; margin:8px auto; display:block; }
  .bottle-points.left{ text-align:left; list-style-position:outside; }

  /* newsletter */
  .newsletter .subscribe{ flex-direction:column; gap:10px; }
  .newsletter input, .newsletter .btn{ width:100%; }

  /* footer */
  .site-footer{ text-align:center; }
  .footer-inner{ flex-direction:column; gap:8px; }
}

/* Small phones */
@media (max-width: 560px){
  .gallery{ grid-template-columns:1fr; }
}
/* --- Phone bottle sizing adjustments --- */
@media (max-width: 820px){
  /* Hero bottle (top section) - make 2x bigger */
  .hero .hero-art img{
    width: clamp(220px, 82vw, 400px) !important; /* bigger on mobile */
    height: auto;
    margin: 6px auto 0;
    display: block;
  }

  /* "Distilled 6 Times" bottle - make smaller */
  .bottle-center img{
    width: clamp(100px, 36vw, 160px) !important; /* much smaller */
    height: auto;
    margin: 8px auto;
    display: block;
  }
}

/* Extra-tight tweak for small iPhones */
@media (max-width: 390px){
  .hero .hero-art img{ width: clamp(200px, 78vw, 360px) !important; }
  .bottle-center img{ width: clamp(90px, 34vw, 140px) !important; }
}

/* --- Mobile image centering tweaks --- */
@media (max-width: 820px){

  /* Center images in "Show Your Mo's Vodka" gallery */
  .gallery img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }

  /* Center the "Quality That Stands Out" image (split section) */
  .section--split .split-media img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}