/* Lachgas Amsterdam — static rebuild.
   Palette + motifs derived from the Fastgas 2KG tank livery: deep navy body,
   yellow accent band, black hardware, circular certification badges. */

:root{
  --navy-deep:#0c1526;
  --navy:#16233f;
  --navy-mid:#1f3159;
  --yellow:#e8d23c;
  --yellow-deep:#c9a91f;
  --paper:#f6f4ee;
  --surface:#ffffff;
  --ink:#181b22;
  --ink-dim:#585d68;
  --border:#e2ddd0;
  --whatsapp:#25d366;
  --whatsapp-deep:#1da851;
  --danger:#c1442f;

  --display: 'Archivo', ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: ui-sans-serif, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(12,21,38,.07), 0 1px 4px rgba(12,21,38,.05);
  --shadow-md: 0 2px 8px rgba(12,21,38,.08), 0 8px 24px rgba(12,21,38,.09);
  --radius: 14px;
}
:root[data-theme="dark"]{
  --paper:#0f1218; --surface:#181c24; --ink:#eeece4; --ink-dim:#a3a8b3; --border:#2a2f3a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--yellow); color:var(--navy-deep);}
:focus-visible{outline:2.5px solid var(--yellow-deep); outline-offset:2px; border-radius:2px;}
.hero :focus-visible,.product-card :focus-visible,.cta-strip :focus-visible,.site-footer :focus-visible,.age-gate :focus-visible,.contact-fab :focus-visible,.site-header :focus-visible{outline-color:var(--yellow);}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.08; margin:0 0 .5em; text-wrap:balance; color:var(--navy);}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4{color:#fff;}
h1{font-size:clamp(32px,5vw,54px);}
h2{font-size:clamp(24px,3.4vw,36px);}
h3{font-size:19px;}
p{margin:0 0 1em; max-width:66ch;}
ul{margin:0 0 1em; padding-left:1.2em;}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow-deep); margin:0 0 12px; font-weight:700;}
:root[data-theme="dark"] .eyebrow{color:var(--yellow);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40; background:var(--navy-deep);
  border-bottom:3px solid var(--yellow); color:#fff; transition:box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.25);}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px;}
.wordmark{color:#fff; text-decoration:none; display:flex; align-items:center; gap:12px;}
.wordmark-logo{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.12);}
.wordmark-text{font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.01em; line-height:1.05; display:flex; flex-direction:column;}
.wordmark small{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--yellow); font-weight:400; text-transform:uppercase;}
@media (max-width:520px){ .wordmark-text small{display:none;} }
.main-nav{display:flex; gap:22px; align-items:center;}
.main-nav a{color:#dfe3ee; text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.02em; position:relative;}
.main-nav a:not(.nav-cta)::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--yellow); transition:right .18s ease;}
.main-nav a:not(.nav-cta):hover::after{right:0;}
.main-nav a:hover{color:var(--yellow);}
.nav-cta{background:var(--yellow); color:var(--navy-deep) !important; padding:9px 16px; border-radius:8px; font-family:var(--mono); font-weight:700; font-size:12.5px; letter-spacing:.04em;}
.nav-toggle{display:none;}
@media (max-width:760px){
  .main-nav{position:fixed; inset:60px 0 auto 0; background:var(--navy-deep); flex-direction:column; align-items:flex-start; padding:18px 24px 24px; gap:14px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; border-bottom:3px solid var(--yellow);}
  .main-nav.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-toggle{display:block; background:none; border:1px solid #465073; color:#fff; padding:8px 10px; border-radius:8px; font-size:18px; line-height:1;}
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--navy-deep),var(--navy) 65%);
  color:#fff; padding:64px 0 56px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:8px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 28px, transparent 28px 40px);
  opacity:.85;
}
.hero .container{position:relative; z-index:1;}
.hero h1,.hero h2,.hero h3{color:#fff;}
.hero p.lead{color:#c9cedb; font-size:18px; max-width:60ch;}
.hero .eyebrow,.hero h1,.hero p.lead,.hero .stat-row{animation:heroIn .6s ease both;}
.hero .eyebrow{animation-delay:0s;}
.hero h1{animation-delay:.06s;}
.hero p.lead{animation-delay:.12s;}
.hero .stat-row{animation-delay:.18s;}
@keyframes heroIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
.stat-row{
  display:flex; flex-wrap:wrap; list-style:none; margin:26px 0 0; padding:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.stat-row li{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#c9cedb;
  padding:12px 22px 0 0; margin-right:22px; border-right:1px solid rgba(255,255,255,.16);
}
.stat-row li:last-child{border-right:none; margin-right:0; padding-right:0;}

/* ---------- CTA strip (Bestel online / WhatsApp / Bel nu) ---------- */
.cta-strip{background:var(--navy-mid); padding:0;}
.cta-strip .container{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08);}
.cta-strip a{
  background:var(--navy-mid); color:#fff; text-decoration:none; text-align:center;
  padding:22px 14px; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.01em;
  display:flex; flex-direction:column; align-items:center; gap:8px; transition:background .15s ease;
}
.cta-strip a:hover{background:#28407a;}
.cta-strip a .ico{width:22px; height:22px;}
.cta-strip a.whatsapp{background:var(--whatsapp-deep);}
.cta-strip a.whatsapp:hover{background:var(--whatsapp);}
@media (max-width:640px){ .cta-strip .container{grid-template-columns:1fr;} }

/* ---------- content sections ---------- */
.section{padding:56px 0;}
.section.alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.prose :is(h2,h3){margin-top:1.2em;}
.prose ul{margin-bottom:1.3em;}
.prose li{margin-bottom:.35em;}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start;}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;} }

.reasons{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; list-style:none; margin:0; padding:0;}
@media (max-width:900px){ .reasons{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .reasons{grid-template-columns:1fr;} }
.reasons li{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; border-top:2.5px solid var(--yellow-deep);
  padding:18px 16px; font-size:13.5px; font-weight:600; color:var(--navy); box-shadow:var(--shadow-sm);
  display:flex; gap:10px; align-items:flex-start; transition:transform .18s ease, box-shadow .18s ease;
}
.reasons li:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
:root[data-theme="dark"] .reasons li{color:#fff;}
.reasons li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--whatsapp-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- product card ---------- */
.product-card{
  background:var(--navy-deep); border-radius:20px; padding:32px; color:#fff;
  display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center;
  box-shadow:var(--shadow-md);
}
@media (max-width:640px){ .product-card{grid-template-columns:1fr; text-align:center;} }
.product-card{overflow:hidden;}
.product-card img{border-radius:10px; transition:transform .35s ease;}
.product-card:hover img{transform:scale(1.05) rotate(-1deg);}
.product-card h1,.product-card h2,.product-card h3{color:#fff;}
.product-card .price{font-family:var(--display); font-weight:800; letter-spacing:-.01em; font-size:34px; color:var(--yellow); margin:6px 0 14px;}
.product-card .price small{font-family:var(--sans); font-size:14px; color:#c9cedb; font-weight:400; text-transform:none; letter-spacing:0;}
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--navy-deep);
  padding:13px 22px; border-radius:9px; font-family:var(--display); font-size:14.5px; letter-spacing:.03em;
  text-decoration:none; border:none; cursor:pointer; transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(0);}
/* Default: light background (plain page sections). Dark-background contexts
   (product-card, hero, cta-strip) get an explicit override further down. */
.btn.ghost{background:transparent; border:1.5px solid var(--border); color:var(--navy);}
.btn.ghost:hover{border-color:var(--navy); background:rgba(12,21,38,.04);}
:root[data-theme="dark"] .btn.ghost{color:#fff; border-color:rgba(255,255,255,.3);}
:root[data-theme="dark"] .btn.ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);}

.variant-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.variant-row a{
  background:var(--surface); border:1px solid var(--border); color:var(--navy);
  padding:8px 14px; border-radius:8px; text-decoration:none; font-family:var(--mono); font-size:13px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
:root[data-theme="dark"] .variant-row a{color:#fff;}
.variant-row a:hover{transform:translateY(-2px); border-color:var(--yellow-deep);}
.variant-row a.active{background:var(--yellow); color:var(--navy-deep); border-color:var(--yellow); font-weight:700;}

/* Dark-background override: product-card / hero / cta-strip sit on navy, so
   the light-mode default above would be invisible there. */
.product-card .btn.ghost,.hero .btn.ghost,.cta-strip .btn.ghost{color:#fff; border-color:rgba(255,255,255,.5);}
.product-card .btn.ghost:hover,.hero .btn.ghost:hover,.cta-strip .btn.ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.product-card .variant-row a,.hero .variant-row a{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff;}
.product-card .variant-row a:hover,.hero .variant-row a:hover{border-color:var(--yellow);}
.product-card .variant-row a.active,.hero .variant-row a.active{background:var(--yellow); color:var(--navy-deep); border-color:var(--yellow);}

/* ---------- city grid on info pages ---------- */
.city-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.city-grid a{
  background:var(--surface); border:1px solid var(--border); padding:7px 13px; border-radius:8px;
  text-decoration:none; color:var(--navy); font-size:13.5px; font-weight:600;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
:root[data-theme="dark"] .city-grid a{color:#fff;}
.city-grid a:hover{border-color:var(--yellow-deep); transform:translateY(-2px); box-shadow:var(--shadow-sm);}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:#c9cedb; padding:44px 0 26px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:28px;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{color:#fff; font-size:13px; letter-spacing:.08em;}
.footer-grid a{color:#c9cedb; text-decoration:none; font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.footer-grid a:hover{color:var(--yellow);}
.footer-bottom{margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#8890a3; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;}

/* ---------- WhatsApp / call icons (auto-inserted into every matching link) ---------- */
.btn-icon{width:18px; height:18px; vertical-align:-4px; margin-right:7px; flex:none;}
.btn .btn-icon{width:20px; height:20px; vertical-align:middle; margin-right:0;}
.cta-strip a .btn-icon{width:24px; height:24px; margin-right:0;}
.nav-cta{display:inline-flex; align-items:center; gap:7px;}
li:has(> .btn-icon), li:has(a > .btn-icon){display:flex; align-items:center; flex-wrap:wrap;}

/* ---------- 18+ age gate ---------- */
html:not(.age-ok){overflow:hidden;}
html:not(.age-ok) .contact-fab{display:none;}
.age-gate{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(circle at 50% 30%, var(--navy) 0%, var(--navy-deep) 70%);
}
html.age-ok .age-gate{display:none;}
.age-gate-box{
  max-width:420px; width:100%; background:var(--navy-deep); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:36px 32px; text-align:center; box-shadow:var(--shadow-md);
  border-top:4px solid var(--yellow); animation:gateIn .45s ease both;
}
@keyframes gateIn{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.age-gate-box h2{color:#fff; font-size:26px; margin-bottom:14px;}
.age-gate-box p{color:#c9cedb; font-size:14px; margin:0 auto 22px; max-width:36ch;}
.age-gate-box .eyebrow{color:var(--yellow);}
.age-gate-actions{display:flex; flex-direction:column; gap:10px;}
.age-gate-actions .btn{justify-content:center; width:100%;}
.age-gate-actions .btn.ghost{color:#c9cedb; border-color:rgba(255,255,255,.3);}

/* ---------- floating contact widget ---------- */
.contact-fab{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-family:var(--sans);}
.contact-fab .fab-menu{display:flex; flex-direction:column; gap:10px; margin-bottom:2px; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .16s ease, transform .16s ease;}
.contact-fab.open .fab-menu{opacity:1; pointer-events:auto; transform:translateY(0);}
.contact-fab .fab-item{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  padding:12px 18px 12px 14px; border-radius:999px; font-weight:700; font-size:14.5px;
  box-shadow:var(--shadow-md); white-space:nowrap; transition:transform .15s ease, background .15s ease;
}
.contact-fab .fab-item:hover{transform:translateY(-2px) scale(1.02);}
.contact-fab .fab-item.wa{background:var(--whatsapp);}
.contact-fab .fab-item.wa:hover{background:var(--whatsapp-deep);}
.contact-fab .fab-item.call{background:var(--navy);}
.contact-fab .fab-item.call:hover{background:var(--navy-mid);}
.contact-fab .fab-icon{width:22px; height:22px; flex:none;}
.contact-fab .fab-main{
  width:60px; height:60px; border-radius:50%; background:var(--yellow); color:var(--navy-deep);
  border:none; box-shadow:var(--shadow-md); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease;
}
.contact-fab .fab-main:hover{transform:scale(1.05);}
.contact-fab .fab-main svg{width:26px; height:26px; transition:transform .18s ease;}
.contact-fab.open .fab-main svg{transform:rotate(45deg);}
@media (max-width:480px){
  .contact-fab{right:12px; bottom:12px;}
  .contact-fab .fab-item span.label{display:inline;}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms !important; animation-duration:.001ms !important; scroll-behavior:auto !important;}
}