/* ============================================
   TREND MAFIA GIFTS — design tokens
   Palette: blackout base, bone paper, mafia gold, stamp red
   Type: Anton (display/stencil), Work Sans (body), JetBrains Mono (labels/prices)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink:#0e0e10;
  --ink-soft:#1a1a1d;
  --paper:#f3ede0;
  --paper-dim:#e6ddc9;
  --gold:#d4af37;
  --gold-deep:#a9821f;
  --red:#8b1e2b;
  --grey:#8a8578;
  --line: rgba(243,237,224,0.14);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Work Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radius: 2px;
  --container: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
  font-weight:400;
}
h1{font-size:clamp(42px,7vw,88px);}
h2{font-size:clamp(30px,4.4vw,52px);}
h3{font-size:22px;}
p{color:var(--paper-dim);}
.lede{font-size:19px; color:var(--paper-dim); max-width:52ch;}

/* ---------- marquee ticker ---------- */
.ticker{
  background:var(--gold);
  color:var(--ink);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid var(--ink);
}
.ticker__track{
  display:inline-flex;
  gap:40px;
  padding:9px 0;
  animation:scrollTicker 26s linear infinite;
}
.ticker__track span{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@keyframes scrollTicker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(14,14,16,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:var(--container); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.brand img{
  width:46px; height:46px; object-fit:cover; border-radius:50%;
  border:1px solid rgba(201,169,74,.45);
  box-shadow:0 0 18px rgba(201,169,74,.12);
}
.brand .dot{color:var(--gold);}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper-dim);
  transition:color .2s;
  position:relative;
}
.navlinks a:hover, .navlinks a.active{color:var(--gold);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  padding:12px 20px;
  border-radius:var(--radius);
  border:1px solid var(--gold);
  transition:transform .15s, background .2s, color .2s;
}
.btn-solid{background:var(--gold); color:var(--ink);}
.btn-solid:hover{transform:translateY(-2px); background:#e6c358;}
.btn-outline{color:var(--paper); border-color:var(--line);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold);}
.btn-red{background:var(--red); border-color:var(--red); color:var(--paper);}
.btn-red:hover{transform:translateY(-2px); background:#a5232f;}

.navtoggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:42px; height:38px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.navtoggle span{width:20px; height:2px; background:var(--paper); display:block;}

/* ---------- hero / seal ---------- */
.hero{
  position:relative;
  padding:96px 0 90px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
}
.hero h1{margin:14px 0 22px;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero__actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

.seal{
  --s:280px;
  width:var(--s); height:var(--s);
  border-radius:50%;
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  justify-self:center;
  animation:spin 40s linear infinite;
}
.seal::before{
  content:"";
  position:absolute; inset:14px;
  border:1px dashed var(--gold-deep);
  border-radius:50%;
}
.seal__core{
  animation:none;
  width:64%; height:64%; border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--display);
  font-size:15px;
  line-height:1.15;
  letter-spacing:.03em;
  padding:10px;
}
@keyframes spin{ to{transform:rotate(360deg);} }
.seal svg text{ font-family:var(--mono); }

/* ---------- section shell ---------- */
section{padding:88px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:44px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}

/* ---------- product cards ---------- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
.pcard{
  background:var(--ink);
  padding:34px 26px;
  transition:background .2s;
}
.pcard:hover{background:var(--ink-soft);}
.pcard .icon{width:44px; height:44px; color:var(--gold); margin-bottom:22px;}
.pcard h3{margin-bottom:8px;}
.pcard p{font-size:14.5px; margin-bottom:16px;}
.pcard .price{
  font-family:var(--mono); color:var(--gold); font-size:13px; letter-spacing:.05em;
}

/* ---------- why strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat{padding:34px 26px; border-left:1px solid var(--line);}
.stat:first-child{border-left:none;}
.stat b{display:block; font-family:var(--display); font-size:40px; color:var(--gold);}
.stat span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey);}

/* ---------- process ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.pstep{border-top:2px solid var(--gold); padding-top:16px;}
.pstep .num{font-family:var(--mono); color:var(--gold); font-size:12px;}
.pstep h3{margin:10px 0 8px; font-size:19px;}
.pstep p{font-size:14.5px;}

/* ---------- cta band ---------- */
.cta{
  background:var(--gold);
  color:var(--ink);
  padding:64px 0;
}
.cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.cta h2{color:var(--ink);}
.cta .btn-outline{border-color:var(--ink); color:var(--ink);}
.cta .btn-outline:hover{background:var(--ink); color:var(--gold);}

/* ---------- footer ---------- */
footer{padding:56px 0 30px; border-top:1px solid var(--line);}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footgrid h3{font-size:16px; margin-bottom:16px; color:var(--gold);}
.footgrid p, .footgrid li{font-size:14px; color:var(--paper-dim); margin-bottom:8px;}
.footer-logo{
  display:block; width:min(230px, 100%); height:auto; margin:-20px 0 4px;
  mix-blend-mode:screen;
}
.social-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.social-links a{
  display:inline-flex; align-items:center;
  padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-dim); transition:border-color .2s, color .2s, transform .2s;
}
.social-links a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}
.footbottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--grey); letter-spacing:.05em;
}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#08140c;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px; height:28px;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- badges (products page) ---------- */
.badge{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold);
  padding:3px 9px; border-radius:20px; margin-bottom:14px;
}

/* ---------- pricing table ---------- */
.ptable{width:100%; border-collapse:collapse; margin-top:10px;}
.ptable th,.ptable td{
  text-align:left; padding:16px 14px; border-bottom:1px solid var(--line); font-size:14.5px;
}
.ptable th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
}
.ptable td:last-child, .ptable th:last-child{text-align:right; font-family:var(--mono); color:var(--gold);}

/* ---------- form (contact page) ---------- */
.form-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
}
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--ink-soft); border:1px solid var(--line);
  color:var(--paper); padding:13px 14px; border-radius:var(--radius);
  font-family:var(--body); font-size:14.5px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.field textarea{resize:vertical; min-height:110px;}
.form-msg{
  margin-top:16px; font-family:var(--mono); font-size:13px; display:none; padding:12px 14px;
  border-radius:var(--radius); border:1px solid var(--gold); color:var(--gold);
}
.form-msg.show{display:block;}
.form-msg.error{border-color:#d86666; color:#f09a9a;}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.infoblock{border-left:2px solid var(--gold); padding-left:24px;}
.infoblock .row{margin-bottom:26px;}
.infoblock .row b{display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:6px;}
.hours-live{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  color:#8fe38f; margin-top:6px;
}
.hours-live .dot-live{width:8px; height:8px; border-radius:50%; background:#3ddc3d; box-shadow:0 0 8px #3ddc3d; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

.mapbox{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:24px; height:260px;
}
.mapbox iframe{width:100%; height:100%; border:0; filter:grayscale(.4) invert(.92) contrast(.9);}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;}
  .seal{justify-self:flex-start; --s:200px;}
  .grid4{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .process{grid-template-columns:repeat(2,1fr);}
  .footgrid{grid-template-columns:1fr;}
  .form-wrap{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  .nav{padding:12px 20px;}
  .brand{font-size:18px; gap:8px;}
  .brand img{width:40px; height:40px;}
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:20px 28px; gap:18px; border-bottom:1px solid var(--line);
    display:none;
  }
  .navlinks.open{display:flex;}
  .navtoggle{display:flex;}
  .grid4{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr;}
  .cta .wrap{flex-direction:column; align-items:flex-start;}
}

:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}
button:disabled{cursor:wait; opacity:.65;}