/* Thrash Digital: design layer. Loads after styles.css and fx.css, safe to remove. */

:root{
  --asphalt:#0d0c0b; --ember:#b84a00; --concrete:#eeece8; --chalk:#fbfaf8;
  --bg:var(--chalk); --bg-alt:var(--concrete); --ink-soft:#57534e; --line:#dedad4;
  --radius:10px; --shadow:0 1px 0 rgba(13,12,11,.04),0 14px 34px -18px rgba(13,12,11,.28);
}

/* Type: one family, two extremes. Wide and heavy for signage, normal width for reading. */
body,button,input,select,textarea{font-family:Archivo,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-stretch:100%}
body{font-size:1.02rem}
h1,h2,h3,.trades,.sc .pv b{font-family:Archivo,Inter,system-ui,sans-serif;font-stretch:122%;font-weight:800;letter-spacing:-.02em;line-height:1.04}
h3{font-stretch:108%;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.section-head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:10px 0 14px}
.section-head p{max-width:56ch}
.eyebrow{font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ember)}
.hero .eyebrow,.page-hero .eyebrow,.spc-sec .eyebrow,.remote-band .eyebrow,.cta-band .eyebrow{color:var(--accent)}
::selection{background:var(--accent);color:var(--asphalt)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Buttons */
.btn{border-radius:8px;font-weight:700;font-stretch:104%;letter-spacing:.005em}
.btn-primary{background:var(--accent);color:var(--asphalt);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 12px 24px -8px rgba(255,122,0,.55)}

/* Header */
header{background:rgba(13,12,11,.94);border-bottom:1px solid rgba(255,255,255,.06)}
.nav ul a:not(.btn){font-weight:600;font-stretch:104%}

/* Sections and surfaces */
section{padding:104px 0}
.card,.step,.remote-card{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.card .icon{border-radius:8px;background:#ffe9d6}
.card h3{font-size:1.28rem}
.card:hover,.step:hover,.remote-card:hover{box-shadow:0 22px 40px -22px rgba(13,12,11,.45);border-color:var(--accent)}
.sc{border-radius:8px}
.alt{background:var(--concrete)}
.trades{font-stretch:125%;font-weight:800;letter-spacing:.02em;font-size:1rem;padding:16px 0;background:var(--accent);color:var(--asphalt)}

/* Hero */
.hero{background:radial-gradient(1100px 520px at 88% -10%,#4a2300 0%,transparent 62%),var(--asphalt);padding:88px 0 96px}
.hero-grid{grid-template-columns:1.08fr .92fr;gap:40px}
.hero h1{font-size:clamp(2.3rem,4.5vw,3.75rem);font-stretch:114%;margin:16px 0 22px;max-width:17ch}
.hero h1 .rot{display:inline;color:var(--accent)}
.hero p.lead{max-width:50ch;font-size:1.12rem;color:#d9d6d1}
.hero .eyebrow{display:block;margin:2px 0 0;color:#ffb066}
.hero-points{color:#d9d6d1}
.hero-grid > div:first-child > a[href="#special"]{margin-right:8px}

/* Hero phone: the one big moment on the page */
.phone-wrap{position:relative;display:flex;justify-content:center;padding:10px 0 30px}
.phone-wrap::before{content:"";position:absolute;inset:8% 4% 4%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,0,.42),transparent 66%);filter:blur(34px)}
.phone{position:relative;width:min(318px,78vw);aspect-ratio:9/17.2;border-radius:44px;padding:11px;background:linear-gradient(160deg,#3a3835,#141311 40%,#262422);box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 1.5px rgba(255,255,255,.06);transform:rotate(3deg)}
.phone-notch{position:absolute;top:19px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#000;z-index:6}
.ph-screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#101010}
.ph-site{height:100%;padding:52px 16px 16px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#1b1613 0%,#0f0e0d 70%)}
.ph-nav{display:flex;justify-content:space-between;align-items:center;color:#fff;font-stretch:118%;font-weight:800;font-size:.86rem;letter-spacing:-.01em}
.ph-nav i{width:18px;height:12px;border-top:2px solid #fff;border-bottom:2px solid #fff;position:relative;display:block}
.ph-nav i::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:#fff}
.ph-hero{border-radius:16px;padding:20px 16px 18px;color:#fff;background:linear-gradient(160deg,rgba(255,122,0,.9),#b34400 60%,#5c2400);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ph-hero small{display:block;font-size:.7rem;font-weight:600;opacity:.9;margin-bottom:8px}
.ph-hero h4{font-family:Archivo,sans-serif;font-stretch:122%;font-weight:800;font-size:1.42rem;line-height:1.04;letter-spacing:-.02em;margin-bottom:16px}
.ph-btn{display:inline-block;background:#fff;color:var(--asphalt);font-weight:800;font-size:.82rem;padding:10px 18px;border-radius:999px;animation:phPulse 2.4s ease-out 2.2s infinite}
@keyframes phPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%,100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-tiles div{background:#1d1a18;border:1px solid #2c2926;border-radius:12px;padding:16px 12px;color:#e9e5df;font-weight:700;font-size:.78rem}
.ph-lines i{display:block;height:7px;border-radius:4px;background:#2a2724;margin-bottom:8px}
.ph-lines i:nth-child(1){width:92%}.ph-lines i:nth-child(2){width:74%}.ph-lines i:nth-child(3){width:56%}
.ph-bar{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--asphalt);font-weight:800;font-size:.86rem;padding:13px;border-radius:14px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.ph-call{position:absolute;z-index:5;left:10px;right:10px;top:46px;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:18px;background:rgba(250,249,247,.97);color:var(--asphalt);box-shadow:0 18px 36px -8px rgba(0,0,0,.6);transform-origin:50% 0}
.ph-call-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--asphalt);font-size:1.05rem}
.ph-call-txt{flex:1;display:flex;flex-direction:column;line-height:1.15}
.ph-call-txt b{font-size:.86rem;font-weight:800}
.ph-call-txt small{font-size:.72rem;color:#6b665f}
.ph-call-ok{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#22a653;color:#fff;font-weight:800;font-size:.9rem}

/* One orchestrated entrance: headline wipes in, phone rises, call lands and rings */
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}
  .hero p.lead,.hero-ctas,.hero-points{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) .18s both}
  .phone{animation:phoneRise 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
  .ph-call{animation:callDrop .55s cubic-bezier(.2,1.3,.4,1) 1.15s both,ring .8s ease-in-out 1.75s 2}
}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes phoneRise{from{opacity:0;transform:translateY(70px) rotate(8deg)}to{opacity:1;transform:rotate(3deg)}}
@keyframes callDrop{from{opacity:0;transform:translateY(-34px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-2.2deg)}30%{transform:rotate(2.2deg)}45%{transform:rotate(-1.8deg)}60%{transform:rotate(1.8deg)}75%{transform:rotate(-1deg)}}

/* Special offer band: keep, but tighten to the new system */
.spc-sec{background:var(--asphalt)}
.spc-copy h2{font-stretch:122%;font-weight:800}

/* CTA band and reviews */
.cta-band{background:var(--asphalt)}
.cta-band h2{font-size:clamp(2rem,4vw,3rem)}
.review-card{border-radius:8px}

@media (max-width:900px){
  .hero{padding:56px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero h1{max-width:none}
  .phone-wrap{padding-bottom:10px}
  section{padding:76px 0}
}
@media (max-width:420px){.hero h1{font-size:2.35rem}}

@media (prefers-reduced-motion:reduce){.ph-btn{animation:none}}

/* Hidden quote bar must not peek above the Halloween banner on phones */
.fxq:not(.show){visibility:hidden}