/* ===== thestoner.io — NEO-BRUTALISM ===== */
:root{
  --bg:#f3efe0;        /* cream paper */
  --ink:#0b0f0a;       /* near-black */
  --green:#27e36b;     /* loud weed green */
  --green-d:#0fae4d;
  --pink:#ff4fb0;
  --yellow:#ffe14d;
  --purple:#9b5cff;
  --line:#0b0f0a;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font:'Space Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  /* faint grid like graph paper */
  background-image:
    linear-gradient(rgba(11,15,10,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,15,10,.05) 1px,transparent 1px);
  background-size:30px 30px;
}

.mark{background:var(--green);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hi{color:var(--green-d)}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,5vw,48px);border-bottom:4px solid var(--ink);
  background:var(--green);position:sticky;top:0;z-index:50}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:clamp(18px,2.6vw,26px);text-decoration:none;color:var(--ink)}
.logo{display:block;flex:none;filter:drop-shadow(2px 2px 0 rgba(11,15,10,.25));transition:transform .15s}
.brand:hover .logo{transform:rotate(-6deg) scale(1.06)}
.brand .hi{color:var(--ink);background:var(--bg);padding:0 4px;border:2px solid var(--ink)}
.nav-links{display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.nav-links a:not(.btn-nav):hover{text-decoration:underline;text-decoration-thickness:3px}
.btn-nav{background:var(--ink);color:var(--green)!important;padding:9px 16px;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--bg);transition:transform .1s,box-shadow .1s}
.btn-nav:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--bg)}
@media(max-width:600px){.nav-links a:not(.btn-nav){display:none}}

/* shared buttons */
.btn-main{display:inline-block;font-family:var(--font-display);font-size:16px;text-decoration:none;
  background:var(--green);color:var(--ink);padding:16px 30px;border:4px solid var(--ink);
  box-shadow:var(--shadow);cursor:pointer;transition:transform .1s,box-shadow .1s;letter-spacing:.5px}
.btn-main:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn-main:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn-ghost{display:inline-block;font-weight:700;text-decoration:none;color:var(--ink);
  background:var(--bg);padding:16px 26px;border:4px solid var(--ink);box-shadow:var(--shadow);
  transition:transform .1s,box-shadow .1s}
.btn-ghost:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink);background:var(--yellow)}

/* HERO */
.hero{text-align:center;padding:clamp(48px,8vw,100px) clamp(18px,5vw,40px) 56px;
  display:flex;flex-direction:column;align-items:center}
.badge{display:inline-block;background:var(--ink);color:var(--bg);font-weight:700;font-size:13px;
  letter-spacing:1px;padding:9px 18px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--green);margin-bottom:28px}
.title{font-family:var(--font-display);font-size:clamp(40px,9vw,104px);line-height:.95;
  text-transform:uppercase;max-width:14ch;text-shadow:5px 5px 0 var(--green)}
.sub{max-width:640px;font-size:clamp(16px,2vw,20px);margin:30px auto 0;font-weight:500}
.sub b{background:var(--yellow);border:2px solid var(--ink);padding:0 5px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:36px}

/* TICKER */
.ticker{overflow:hidden;background:var(--ink);color:var(--green);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:12px 0;white-space:nowrap}
.ticker-track{display:inline-flex;animation:scroll 20s linear infinite;
  font-family:var(--font-display);font-size:20px;letter-spacing:1px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTION shared */
section{padding:clamp(56px,8vw,110px) clamp(18px,6vw,80px)}
.section-h{font-family:var(--font-display);font-size:clamp(28px,5.5vw,60px);line-height:1;
  text-transform:uppercase;text-align:center}
.section-lead{text-align:center;max-width:620px;margin:18px auto 0;font-size:clamp(15px,2vw,19px);font-weight:500}
.section-h em{font-style:normal;background:var(--green);padding:0 .1em}
.price-chip{background:var(--ink);color:var(--green);padding:1px 8px;border:2px solid var(--ink);font-weight:700}

/* VIBE cards */
.vibe{background:var(--purple)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;max-width:1100px;margin:50px auto 0}
.card{border:4px solid var(--ink);box-shadow:var(--shadow);padding:32px 26px;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}
.c-green{background:var(--green)}
.c-pink{background:var(--pink)}
.c-yellow{background:var(--yellow)}
.ico{font-size:44px;margin-bottom:14px;line-height:1}
.card h3{font-family:var(--font-display);font-size:20px;margin-bottom:10px}
.card p{font-weight:500}

/* BLUNT truths */
.blunt{background:var(--bg)}
.truths{max-width:900px;margin:48px auto 0;display:flex;flex-direction:column;gap:18px}
.truth{display:flex;gap:22px;align-items:flex-start;background:var(--bg);
  border:4px solid var(--ink);box-shadow:var(--shadow);padding:24px 26px;transition:transform .12s,background .12s}
.truth:hover{transform:translate(-3px,-3px);background:var(--green)}
.truth span{font-family:var(--font-display);font-size:34px;line-height:1;background:var(--ink);color:var(--green);
  padding:6px 12px;border:3px solid var(--ink)}
.truth p{font-size:clamp(15px,2vw,19px);font-weight:600;align-self:center}

/* CONNECT / FORM */
.connect{background:var(--yellow)}
.connect-inner{max-width:760px;margin:0 auto;text-align:center}
.form{text-align:left;background:var(--bg);border:4px solid var(--ink);box-shadow:var(--shadow-lg);
  padding:clamp(22px,4vw,40px);margin-top:40px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.form label{display:flex;flex-direction:column;gap:8px;font-family:var(--font-display);font-size:13px;letter-spacing:.5px}
.form .full{margin-bottom:18px}
.form input,.form textarea{font-family:var(--font);font-size:16px;font-weight:500;color:var(--ink);
  background:#fff;border:3px solid var(--ink);padding:13px 15px;outline:none;width:100%;transition:box-shadow .1s,transform .1s}
.form input::placeholder,.form textarea::placeholder{color:#7a7a6a}
.form input:focus,.form textarea:focus{box-shadow:4px 4px 0 var(--green);transform:translate(-1px,-1px)}
.form textarea{resize:vertical}
.btn-submit{width:100%;margin-top:4px;font-size:18px}
.form-note{margin-top:16px;text-align:center;font-weight:700;min-height:20px}
.form-note.ok{background:var(--green);border:3px solid var(--ink);padding:10px}
.form-note.err{background:var(--pink);border:3px solid var(--ink);padding:10px}
.field-bad{box-shadow:4px 4px 0 var(--pink)!important;border-color:var(--ink)!important}

/* FOOTER */
.footer{text-align:center;padding:56px 20px;background:var(--ink);color:var(--bg);border-top:4px solid var(--ink)}
.f-brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:26px;margin-bottom:10px}
.f-brand .hi{color:var(--green)}
.footer p{font-weight:500}
.fine{font-size:13px;opacity:.6;margin-top:14px}

/* reveal on scroll */
.reveal{opacity:0;transform:translate(0,20px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}