/* =========================================================================
   Tint Shop Sites — by Big Eyed Fish Creative
   Aesthetic: garage-grade premium. Carbon night + hot accent + tint-glass.
   Type: Bricolage Grotesque (display), Public Sans (body), DM Mono (labels).
   ========================================================================= */

:root{
  --bg-0:#0a0d0f;        /* carbon black */
  --bg-1:#0f1418;        /* panel */
  --bg-2:#141b21;        /* raised panel */
  --line:#26313a;        /* hairline */
  --ink:#eef3f5;         /* primary text */
  --ink-soft:#a9b6bf;    /* secondary text */
  --ink-dim:#6c7b86;     /* tertiary */
  --accent:#ff5a36;      /* hot tint orange */
  --accent-2:#ffb38a;    /* warm tail */
  --glass:#0ea5a4;       /* tint-film teal, used sparingly */
  --good:#3ddc97;
  --radius:18px;
  --radius-sm:11px;
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 30px 70px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(255,90,54,.13), transparent 60%),
    radial-gradient(900px 700px at 0% 12%, rgba(14,165,164,.08), transparent 55%),
    var(--bg-0);
  color:var(--ink);
  font-family:"Public Sans", system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:2}

a{color:inherit; text-decoration:none}
.hl{color:var(--accent)}
em{font-style:italic; color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700; letter-spacing:-.02em; line-height:1.02; margin:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Public Sans",sans-serif; font-weight:600; font-size:15.5px;
  padding:.72em 1.25em; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), background .2s, box-shadow .25s, border-color .2s;
  white-space:nowrap;
}
.btn-lg{font-size:16.5px; padding:.92em 1.6em}
.btn-block{display:flex; width:100%}
.btn-solid{
  background:linear-gradient(180deg,#ff6a47,var(--accent));
  color:#1a0a05; box-shadow:0 12px 30px -12px rgba(255,90,54,.7);
}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(255,90,54,.85)}
.btn-line{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.02)}
.btn-line:hover{border-color:var(--accent); color:#fff; transform:translateY(-2px)}
.btn-ghost{color:var(--ink-soft)}
.btn-ghost:hover{color:#fff}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:22px;
  width:100%; padding:16px max(26px, calc((100% - var(--maxw))/2 + 26px));
  background:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, backdrop-filter .3s;
}
/* transparent over the hero; gains its bar background once you scroll */
.nav.scrolled{border-bottom-color:var(--line); background:rgba(10,13,15,.92); backdrop-filter:blur(14px)}
.brand{display:flex; align-items:center; gap:10px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.brand-mark{flex:none; border-radius:10px; object-fit:cover; box-shadow:0 2px 12px rgba(0,0,0,.45)}
.brand-word{font-size:20px; letter-spacing:-.03em}
.brand-word-img{height:27px; width:auto; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.brand-by{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase; padding-top:2px}
.nav-links{display:flex; align-items:center; gap:28px; margin-left:22px}
.nav-links a{color:var(--ink-soft); font-size:13px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; position:relative; line-height:1}
.nav-links a:hover{color:#fff}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; background:var(--accent); transition:width .25s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center}
.nav-toggle{display:none; margin-left:auto; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{width:24px; height:2px; background:var(--ink); transition:.3s}

.mobile-menu{
  display:none; position:fixed; inset:64px 0 auto 0; z-index:49;
  flex-direction:column; gap:4px; padding:18px 26px 26px;
  background:var(--bg-1); border-bottom:1px solid var(--line);
  transform:translateY(-120%); transition:transform .35s var(--ease);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{padding:13px 4px; color:var(--ink-soft); font-weight:500; border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:14px}

/* ---------- SMOKE HERO (namespaced .shero — never collides with .hero) ---------- */
.shero{position:relative; width:100%; min-height:100svh; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; background:var(--bg-0)}
.shero-bg{position:absolute; inset:0; z-index:0; background-image:var(--shero-img);
  background-size:cover; background-position:center 60%; background-repeat:no-repeat}
.shero-canvas{position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block;
  pointer-events:auto; cursor:crosshair}
.shero-scrim{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,13,15,.72) 0%, rgba(10,13,15,.12) 26%, rgba(10,13,15,0) 46%),
    linear-gradient(0deg,  rgba(10,13,15,.85) 0%, rgba(10,13,15,.2) 30%, rgba(10,13,15,0) 56%)}
.shero-grain{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shero-caption{position:relative; z-index:5; margin-top:auto;
  padding:0 clamp(20px,5vw,64px) clamp(40px,7vh,84px); max-width:1180px; width:100%; pointer-events:none}
.shero-caption > *{pointer-events:auto}
.shero-eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:"DM Mono",monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2);
  background:rgba(255,90,54,.10); border:1px solid rgba(255,90,54,.28); padding:7px 14px;
  border-radius:999px; margin-bottom:22px; backdrop-filter:blur(6px)}
.shero-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 4px rgba(255,90,54,.2); animation:shero-pulse 2.4s infinite}
@keyframes shero-pulse{50%{box-shadow:0 0 0 8px rgba(255,90,54,0)}}
.shero-headline{font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(34px,7.2vw,92px); line-height:.96; letter-spacing:-.04em; margin:0; color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.6); max-width:16ch}
.shero-headline .accent{color:var(--accent); text-shadow:0 0 32px rgba(255,90,54,.45),0 2px 4px rgba(0,0,0,.5)}
.shero-sub{margin:22px 0 30px; max-width:42ch; font-size:clamp(16px,1.7vw,19px); line-height:1.55;
  color:var(--ink-soft); text-shadow:0 1px 12px rgba(0,0,0,.6)}
.shero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.shero-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Public Sans",sans-serif; font-weight:600; font-size:16px; padding:.92em 1.6em;
  border-radius:999px; cursor:pointer; border:1px solid transparent; white-space:nowrap; text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .2s,color .2s}
.shero-btn-solid{background:linear-gradient(180deg,#ff6a47,var(--accent)); color:#1a0a05;
  box-shadow:0 14px 34px -12px rgba(255,90,54,.75)}
.shero-btn-solid:hover{transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(255,90,54,.9)}
.shero-btn-line{border-color:rgba(255,255,255,.2); color:#fff; background:rgba(10,13,15,.35); backdrop-filter:blur(6px)}
.shero-btn-line:hover{border-color:var(--accent); transform:translateY(-2px)}
.shero-hint{display:flex; align-items:center; gap:8px; margin-top:22px; font-family:"DM Mono",monospace;
  font-size:12px; letter-spacing:.03em; color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){.shero-canvas{cursor:default}}
@media (max-width:560px){.shero-btn-line{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative; padding:64px 0 0; overflow:hidden}
.hero-glow{
  position:absolute; top:-160px; right:-140px; width:720px; height:720px; z-index:0;
  background:radial-gradient(circle, rgba(255,90,54,.22), transparent 62%); filter:blur(8px);
}
.hero-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"DM Mono",monospace; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-2); background:rgba(255,90,54,.09); border:1px solid rgba(255,90,54,.25);
  padding:7px 13px; border-radius:999px; margin-bottom:26px;
}
.eyebrow-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,90,54,.2); animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,90,54,0)}}

.hero-h1{font-size:clamp(40px,6.4vw,76px); font-weight:800; letter-spacing:-.035em}
.hero-sub{font-size:clamp(17px,1.9vw,20px); color:var(--ink-soft); max-width:34em; margin:24px 0 0; line-height:1.62}
.sub-lede{display:block; color:#fff; font-weight:700; font-size:1.12em; letter-spacing:-.01em; margin-bottom:.4em}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:34px 0 18px}
.hero-reassure{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 26px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  background:rgba(61,220,151,.08); border:1px solid rgba(61,220,151,.28);
  padding:8px 15px; border-radius:999px;
}
.hero-reassure .hr-ic{display:inline-flex; color:var(--good)}
.hero-trust{list-style:none; display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin:0; padding:0; color:var(--ink-soft); font-size:15px}
.hero-trust strong{color:#fff}
.dotsep{display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--ink-dim)}

/* staggered reveal */
.hero-copy>*{opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) forwards}
.hero-copy>.eyebrow{animation-delay:.05s}
.hero-copy>.hero-h1{animation-delay:.15s}
.hero-copy>.hero-sub{animation-delay:.3s}
.hero-copy>.hero-actions{animation-delay:.42s}
.hero-copy>.hero-reassure{animation-delay:.52s}
.hero-copy>.hero-trust{animation-delay:.6s}
@keyframes rise{to{opacity:1; transform:none}}

/* hero glass card — high-fidelity finished mock */
.hero-visual{position:relative; opacity:0; animation:rise 1s var(--ease) .5s forwards}
.example-tag{
  position:absolute; top:-13px; right:14px; z-index:5;
  font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--bg-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:999px; box-shadow:var(--shadow);
}
.example-tag::before{content:"●"; color:var(--accent); font-size:8px; margin-right:6px; vertical-align:middle}
.glass-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); box-shadow:var(--shadow);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition:transform .6s var(--ease);
}
.hero-visual:hover .glass-card{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}
.gc-bar{display:flex; align-items:center; gap:7px; padding:12px 15px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.25)}
.gc-dot{width:10px; height:10px; border-radius:50%; background:#2c3942}
.gc-dot:nth-child(1){background:#ff5f57}.gc-dot:nth-child(2){background:#febc2e}.gc-dot:nth-child(3){background:#28c840}
.gc-url{margin-left:10px; font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-dim)}
.gc-lock{font-size:10px; opacity:.7; margin-right:1px}
.gc-body{padding:16px 16px 18px; background:linear-gradient(180deg,#0d1216,#0a0e11)}

/* mini nav inside the mock */
.gc-nav{display:flex; align-items:center; gap:8px; padding:0 2px 14px}
.gc-logo{display:inline-flex; align-items:center; gap:6px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:12.5px; letter-spacing:-.01em; color:#fff}
.gc-logo-mark{width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,#ff6a47,var(--accent)); box-shadow:0 0 0 2px rgba(255,90,54,.18)}
.gc-nav-links{display:flex; gap:9px; margin-left:6px}
.gc-nav-links i{width:22px; height:4px; border-radius:3px; background:var(--bg-2)}
.gc-nav-cta{margin-left:auto; font-size:10px; font-weight:700; color:var(--accent-2); border:1px solid rgba(255,90,54,.35); padding:5px 10px; border-radius:999px}

.gc-hero{
  position:relative; overflow:hidden;
  border-radius:13px; padding:20px 20px 22px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,90,54,.42), transparent 52%),
    linear-gradient(150deg,#1c252c,#0b0f13);
  border:1px solid var(--line);
}
.gc-hero-glow{position:absolute; right:-40px; bottom:-50px; width:160px; height:160px; background:radial-gradient(circle, rgba(14,165,164,.4), transparent 65%); filter:blur(6px); pointer-events:none}
.gc-kicker{position:relative; font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.13em; color:var(--accent-2); text-transform:uppercase}
.gc-title{position:relative; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:28px; line-height:.98; margin:9px 0 8px; letter-spacing:-.035em; color:#fff}
.gc-hero-sub{position:relative; font-size:11.5px; color:var(--ink-soft); line-height:1.4; max-width:22em; margin-bottom:15px}
.gc-hero-row{position:relative; display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.gc-cta{display:inline-block; background:linear-gradient(180deg,#ff6a47,var(--accent)); color:#1a0a05; font-weight:700; font-size:12px; padding:9px 15px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(255,90,54,.8)}
.gc-rating{font-size:10.5px; color:var(--ink-soft)}
.gc-rating b{color:#fff; font-weight:700}

.gc-row{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px}
.gc-tile{background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:13px 10px; text-align:left}
.gc-tile-ic{display:block; width:20px; height:20px; border-radius:6px; margin-bottom:9px; background:rgba(255,90,54,.16); border:1px solid rgba(255,90,54,.3)}
.gc-tile-ic.gt-2{background:rgba(14,165,164,.16); border-color:rgba(14,165,164,.35)}
.gc-tile-ic.gt-3{background:rgba(255,179,138,.16); border-color:rgba(255,179,138,.35)}
.gc-tile-t{display:block; font-size:11px; color:var(--ink); font-weight:700; line-height:1.2}
.gc-tile-p{display:block; font-family:"DM Mono",monospace; font-size:9.5px; color:var(--ink-dim); margin-top:3px}

.gc-foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:11px 13px; background:var(--bg-1); border:1px solid var(--line); border-radius:10px}
.gc-foot-l{display:flex; align-items:center; gap:9px}
.gc-avtars{display:inline-flex}
.gc-avtars i{width:18px; height:18px; border-radius:50%; border:2px solid var(--bg-1); margin-left:-7px; background:linear-gradient(135deg,#2c3942,#1a2229)}
.gc-avtars i:first-child{margin-left:0; background:linear-gradient(135deg,var(--accent),#a83417)}
.gc-avtars i:nth-child(2){background:linear-gradient(135deg,#0ea5a4,#0a6160)}
.gc-foot-t{font-size:10.5px; color:var(--ink-soft)}
.gc-foot-t strong{color:#fff}
.gc-book{font-size:11px; font-weight:700; color:#fff; border:1px solid rgba(255,90,54,.45); background:rgba(255,90,54,.08); padding:7px 12px; border-radius:999px}

/* the signature tint swipe across the card */
.tint-swipe{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(14,165,164,.0) 38%, rgba(14,165,164,.28) 50%, rgba(255,90,54,.1) 58%, transparent 70%);
  transform:translateX(-30%); animation:swipe 7s var(--ease) infinite;
}
@keyframes swipe{0%,18%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}

.float-badge{
  position:absolute; z-index:3; font-family:"DM Mono",monospace; font-size:12px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:999px; padding:9px 14px;
  box-shadow:var(--shadow); color:var(--ink);
}
.fb-1{top:-14px; left:-22px; animation:bob 5s ease-in-out infinite}
.fb-1::before{content:"●"; color:var(--good); margin-right:7px; font-size:9px; vertical-align:middle}
.fb-2{bottom:-16px; right:-10px; animation:bob 6s ease-in-out infinite reverse}
.fb-2::before{content:"●"; color:var(--accent); margin-right:7px; font-size:9px; vertical-align:middle}
@keyframes bob{50%{transform:translateY(-9px)}}

/* marquee */
.marquee{margin-top:70px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; align-items:center; gap:34px; width:max-content; animation:scroll 34s linear infinite; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--ink-dim)}
.marquee-track span{white-space:nowrap}
.m-dot{color:var(--accent); font-size:11px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.kicker{font-family:"DM Mono",monospace; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); display:block}
.section-head{max-width:760px; margin-bottom:50px}
.section-head h2{font-size:clamp(30px,4.4vw,50px); font-weight:800; letter-spacing:-.03em; margin-top:14px}
.section-desc{color:var(--ink-soft); font-size:18px; margin-top:18px; max-width:46em}

/* ---------- PAIN BAND ---------- */
.band-pain{padding:100px 0}
.band-lead{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,38px); letter-spacing:-.025em; max-width:18em; line-height:1.12; margin:0 0 48px}
.pain-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.pain-old,.pain-new{padding:30px 30px 34px; border-radius:var(--radius); border:1px solid var(--line)}
.pain-old{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.pain-new{background:linear-gradient(180deg,rgba(255,90,54,.07),rgba(255,90,54,.02)); border-color:rgba(255,90,54,.3)}
.pain-old h3,.pain-new h3{font-size:14px; font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px}
.pain-old h3{color:var(--ink-dim)}
.pain-new h3{color:var(--accent)}
.pain-old ul,.pain-new ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px}
.pain-old li,.pain-new li{position:relative; padding-left:30px; color:var(--ink-soft); font-size:16px; line-height:1.5}
.pain-old li::before{content:"✕"; position:absolute; left:0; top:0; color:#6b4a44; font-weight:700}
.pain-new li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}
.pain-new li{color:var(--ink)}

/* ---------- HOW ---------- */
.how{padding:30px 0 100px}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s}
.step{position:relative; padding:34px 28px 30px; border-radius:var(--radius); background:linear-gradient(180deg,var(--bg-1),rgba(15,20,24,.4)); border:1px solid var(--line); overflow:hidden}
.step::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent),transparent); opacity:.6}
.step-num{font-family:"DM Mono",monospace; font-size:13px; color:var(--ink-dim); letter-spacing:.1em}
.step-icon{margin:18px 0 8px; height:48px; display:flex; align-items:center}
.step h3{font-size:23px; margin-bottom:11px; letter-spacing:-.02em}
.step p{color:var(--ink-soft); font-size:16px; margin:0; line-height:1.55}
.how-cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:42px}
.how-note{color:var(--ink-dim); font-size:15px}

/* ---------- TRADES ---------- */
.trades{padding:100px 0; background:linear-gradient(180deg,transparent,rgba(14,165,164,.04),transparent)}
.trade-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.trade-card{
  padding:32px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-1); transition:transform .35s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.trade-card:hover{transform:translateY(-4px); border-color:rgba(255,90,54,.4)}
.trade-tag{display:inline-block; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); background:rgba(255,90,54,.08); border:1px solid rgba(255,90,54,.2); padding:5px 11px; border-radius:999px; margin-bottom:18px}
.trade-card h3{font-size:24px; margin-bottom:12px; letter-spacing:-.02em}
.trade-card p{color:var(--ink-soft); font-size:16px; margin:0; line-height:1.55}

/* ---------- PICK YOUR STARTING STYLE ---------- */
.styles{padding:100px 0; background:linear-gradient(180deg,transparent,rgba(255,90,54,.035),transparent)}
.styles .section-desc strong{color:#fff}
.style-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.style-card{
  display:flex; flex-direction:column;
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-1),rgba(15,20,24,.35));
  position:relative; overflow:hidden;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.style-card:hover{
  transform:translateY(-5px); border-color:rgba(255,90,54,.45);
  box-shadow:0 28px 60px -34px rgba(255,90,54,.55);
}
.style-card:hover .mini{transform:scale(1.03)}
.style-meta{display:flex; flex-direction:column; gap:9px; padding:16px 18px 18px}
.style-top{display:flex; flex-direction:column; gap:7px}
.style-card h3{font-size:18px; letter-spacing:-.02em; line-height:1.05}
.style-for{
  font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-2); align-self:flex-start;
  background:rgba(255,90,54,.08); border:1px solid rgba(255,90,54,.2);
  padding:4px 9px; border-radius:999px;
}
.style-card p{color:var(--ink-soft); font-size:13px; line-height:1.45; margin:0}

/* ===== MINI MOCKUP ENGINE — a tiny website rendered in each style ===== */
.mini{
  position:relative; overflow:hidden;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease);
  /* per-style tokens (overridden below) */
  --m-bg:#0B0E11; --m-ink:#E8EAED; --m-soft:#9aa6af; --m-acc:#FF4D2E; --m-acc2:#3A86FF;
  --m-panel:#1A1F26; --m-disp:"Bricolage Grotesque",sans-serif; --m-body:"Public Sans",sans-serif;
  --m-h-size:21px; --m-h-weight:800; --m-h-tracking:-.04em; --m-h-line:.94; --m-h-transform:none;
  background:var(--m-bg); color:var(--m-ink); font-family:var(--m-body);
}
.mini-nav{display:flex; align-items:center; gap:6px; padding:9px 11px}
.mini-logo{font-family:var(--m-disp); font-weight:800; font-size:9px; letter-spacing:0; color:var(--m-ink); white-space:nowrap}
.mini-dots{display:flex; gap:5px; margin-left:6px}
.mini-dots i{width:13px; height:3px; border-radius:2px; background:var(--m-panel)}
.mini-chip{margin-left:auto; font-size:7.5px; font-weight:700; color:var(--m-acc); border:1px solid var(--m-acc); padding:3px 7px; border-radius:999px; white-space:nowrap}
.mini-hero{position:relative; overflow:hidden; padding:11px 12px 13px; margin:0 9px; border-radius:9px; background:var(--m-panel)}
.mini-kick{font-family:"DM Mono",monospace; font-size:6.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--m-acc); margin-bottom:6px; position:relative}
.mini-h{font-family:var(--m-disp); font-weight:var(--m-h-weight); font-size:var(--m-h-size); line-height:var(--m-h-line); letter-spacing:var(--m-h-tracking); text-transform:var(--m-h-transform); color:var(--m-ink); margin:0 0 9px; position:relative}
.mini-h em{font-style:italic; color:var(--m-acc)}
.mini-cta{display:inline-block; font-size:7.5px; font-weight:700; color:#fff; background:var(--m-acc); padding:5px 10px; border-radius:999px; position:relative}
.mini-tiles{display:flex; gap:6px; padding:10px 9px 11px}
.mini-tiles span{flex:1; height:17px; border-radius:5px; background:var(--m-panel); border:1px solid rgba(255,255,255,.06)}
.mini-rule{display:block; width:34px; height:1px; background:var(--m-acc); margin:0 0 8px}
.mini-stars{display:block; font-size:7px; color:var(--m-acc); letter-spacing:1px; margin-bottom:7px}
.mini-sticker{position:absolute; top:8px; right:9px; font-size:9px; font-weight:800; color:var(--m-acc2); transform:rotate(8deg); text-shadow:0 0 6px var(--m-acc2)}
.mini-swipe{position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(14,165,164,.3) 50%,rgba(255,90,54,.14) 58%,transparent 70%); transform:translateX(-120%); animation:swipe 6.5s var(--ease) infinite}
.mini-stripes{position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(90deg,transparent 0 14px,var(--m-acc) 14px 17px,transparent 17px 22px); -webkit-mask-image:linear-gradient(90deg,#000,transparent 60%); mask-image:linear-gradient(90deg,#000,transparent 60%)}
.mini-grid-lines{position:absolute; inset:0; opacity:.4; background-image:linear-gradient(var(--m-acc) 1px,transparent 1px),linear-gradient(90deg,var(--m-acc) 1px,transparent 1px); background-size:13px 13px; -webkit-mask-image:radial-gradient(circle at 70% 40%,#000,transparent 75%); mask-image:radial-gradient(circle at 70% 40%,#000,transparent 75%)}
.mini-hazard{position:absolute; left:0; bottom:0; width:100%; height:5px; background:repeating-linear-gradient(45deg,var(--m-acc) 0 6px,#1a1a18 6px 12px)}
.mini-beads{position:absolute; right:8px; top:8px; display:flex; gap:4px}
.mini-beads b{width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--m-acc) 75%); box-shadow:0 0 6px var(--m-acc)}
.mini-beads b:nth-child(2){width:5px;height:5px}.mini-beads b:nth-child(3){width:8px;height:8px}.mini-beads b:nth-child(4){width:4px;height:4px}

/* 1 · Midnight Garage — dark + ember orange + film swipe (default tokens, refine) */
.sc-midnight .mini{--m-bg:#0B0E11; --m-ink:#E8EAED; --m-acc:#FF4D2E; --m-acc2:#3A86FF; --m-panel:#1A1F26; --m-disp:"Bricolage Grotesque",sans-serif}
.sc-midnight .mini-hero{background:radial-gradient(120% 120% at 100% 0%,rgba(255,77,46,.45),transparent 55%),linear-gradient(150deg,#1b232a,#0b0f13)}

/* 2 · Exotic Luxe — gallery white + champagne gold serif */
.sc-luxe .mini{--m-bg:#F7F6F3; --m-ink:#111; --m-soft:#6b6b66; --m-acc:#C5A572; --m-panel:#efece6; --m-disp:"Playfair Display",Georgia,serif; --m-h-size:18px; --m-h-weight:600; --m-h-tracking:-.01em; --m-h-line:1}
.sc-luxe .mini-chip{color:#111; border-color:#cdbfa3}
.sc-luxe .mini-cta{background:transparent; color:#111; border:1px solid #111; font-weight:600}
.sc-luxe .mini-kick{color:#9a8a68}
.sc-luxe .mini-tiles span{background:#efece6; border-color:rgba(0,0,0,.07)}
.sc-luxe .mini-hero{background:#fff; border:1px solid #eae6df}

/* 3 · Street Legend — asphalt + neon magenta/cyan, heavy condensed */
.sc-street .mini{--m-bg:#0D0D0F; --m-ink:#F2F2F2; --m-acc:#FF2D95; --m-acc2:#13E0E8; --m-panel:#16161a; --m-disp:"Arial Narrow","Bricolage Grotesque",sans-serif; --m-h-size:23px; --m-h-weight:800; --m-h-transform:uppercase; --m-h-tracking:-.02em}
.sc-street .mini-hero{background:linear-gradient(150deg,#161620,#0c0c10); box-shadow:inset 0 0 18px rgba(255,45,149,.25)}
.sc-street .mini-h{text-shadow:0 0 10px rgba(255,45,149,.5)}
.sc-street .mini-cta{box-shadow:0 0 10px rgba(255,45,149,.6)}
.sc-street .mini-kick{color:var(--m-acc2)}

/* 4 · American Muscle — gunmetal + racing red + chrome, condensed */
.sc-muscle .mini{--m-bg:#141518; --m-ink:#F4F1EA; --m-acc:#C8102E; --m-acc2:#C0C2C6; --m-panel:#1d1f24; --m-disp:"Arial Narrow",Oswald,sans-serif; --m-h-size:21px; --m-h-weight:800; --m-h-transform:uppercase; --m-h-tracking:-.01em}
.sc-muscle .mini-hero{background:linear-gradient(150deg,#1c1e23,#10141b)}
.sc-muscle .mini-kick{color:var(--m-acc2); letter-spacing:.13em}
.sc-muscle .mini-h{color:#fff}

/* 5 · Clean Bay — white + crisp blue, airy grotesk */
.sc-clean .mini{--m-bg:#fff; --m-ink:#0A0A0A; --m-soft:#5b6470; --m-acc:#2563EB; --m-panel:#F4F5F7; --m-disp:"Public Sans",system-ui,sans-serif; --m-h-size:20px; --m-h-weight:800; --m-h-tracking:-.03em}
.sc-clean .mini-dots i{background:#e6e8ec}
.sc-clean .mini-hero{background:#F4F5F7; border:1px solid #eceef1}
.sc-clean .mini-tiles span{background:#F4F5F7; border-color:rgba(0,0,0,.05)}
.sc-clean .mini-kick{color:#2563EB}

/* 6 · Industrial Bay — concrete + hazard amber + grid */
.sc-industrial .mini{--m-bg:#1C1C1A; --m-ink:#E7E5DE; --m-acc:#F2A900; --m-panel:#2A2C2E; --m-disp:"Arial Narrow",Bebas Neue,sans-serif; --m-h-size:22px; --m-h-weight:800; --m-h-transform:uppercase; --m-h-tracking:.01em}
.sc-industrial .mini-hero{background:#23231f; border:1px solid #34342f}
.sc-industrial .mini-chip{color:#1C1C1A; background:var(--m-acc); border-color:var(--m-acc)}
.sc-industrial .mini-cta{color:#1C1C1A}

/* 7 · Ceramic Tech — deep ink + hydrophobic mint + data blue */
.sc-ceramic .mini{--m-bg:#0A0F14; --m-ink:#E6F1F5; --m-acc:#19E5C6; --m-acc2:#0FA3FF; --m-panel:#10181f; --m-disp:"Public Sans",sans-serif; --m-h-size:19px; --m-h-weight:800; --m-h-tracking:-.03em}
.sc-ceramic .mini-hero{background:radial-gradient(120% 120% at 100% 0%,rgba(25,229,198,.28),transparent 55%),linear-gradient(150deg,#0f1a20,#0a0f14)}
.sc-ceramic .mini-cta{color:#04130f; box-shadow:0 0 12px rgba(25,229,198,.45)}
.sc-ceramic .mini-kick{color:var(--m-acc2)}

/* 8 · Neon Night — black-violet + electric violet + cyan glow */
.sc-neon .mini{--m-bg:#08070D; --m-ink:#EDEAF5; --m-acc:#7C3AED; --m-acc2:#22D3EE; --m-panel:#13111d; --m-disp:"Bricolage Grotesque",sans-serif; --m-h-size:21px; --m-h-weight:800; --m-h-transform:uppercase; --m-h-tracking:-.02em}
.sc-neon .mini-hero{background:linear-gradient(150deg,#16122a,#08070d); box-shadow:inset 0 -20px 30px -10px rgba(124,58,237,.4)}
.sc-neon .mini-h{color:#fff; text-shadow:0 0 12px rgba(124,58,237,.8),0 0 4px rgba(34,211,238,.5)}
.sc-neon .mini-cta{background:var(--m-acc); box-shadow:0 0 14px rgba(124,58,237,.8)}
.sc-neon .mini-kick{color:var(--m-acc2)}

/* 9 · Hometown Trust — warm cream + trust green + friendly serif */
.sc-hometown .mini{--m-bg:#FBF7F0; --m-ink:#23211D; --m-soft:#6e675c; --m-acc:#1F6F54; --m-acc2:#C44536; --m-panel:#f1ebe0; --m-disp:"Bitter",Georgia,serif; --m-h-size:18px; --m-h-weight:700; --m-h-tracking:-.01em}
.sc-hometown .mini-chip{color:#fff; background:var(--m-acc2); border-color:var(--m-acc2)}
.sc-hometown .mini-cta{background:var(--m-acc2)}
.sc-hometown .mini-hero{background:#fff; border:1px solid #ece3d4}
.sc-hometown .mini-tiles span{background:#f1ebe0; border-color:rgba(0,0,0,.06)}
.sc-hometown .mini-kick{color:var(--m-acc); letter-spacing:.06em}
.sc-hometown .mini-stars{color:#E0A13C}

/* 10 · Editorial Mono — white + black + one red knife, expanded type */
.sc-editorial .mini{--m-bg:#fff; --m-ink:#0A0A0A; --m-soft:#9A9A9A; --m-acc:#E5251A; --m-panel:#f2f2f2; --m-disp:"Arial Black","Bricolage Grotesque",sans-serif; --m-h-size:22px; --m-h-weight:800; --m-h-transform:uppercase; --m-h-tracking:-.03em}
.sc-editorial .mini-nav{border-bottom:1px solid #111; margin:0 0 0; padding-bottom:8px}
.sc-editorial .mini-logo{letter-spacing:.04em}
.sc-editorial .mini-dots i{background:#e4e4e4}
.sc-editorial .mini-chip{color:#0A0A0A; border-color:#0A0A0A}
.sc-editorial .mini-hero{background:#fff; border:0; padding-left:10px}
.sc-editorial .mini-h{border-left:3px solid var(--m-acc); padding-left:8px}
.sc-editorial .mini-cta{background:#0A0A0A}
.sc-editorial .mini-kick{color:#0A0A0A}
.sc-editorial .mini-tiles span{background:#f2f2f2; border-color:rgba(0,0,0,.08)}

.styles-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:40px; padding:26px 30px; border-radius:var(--radius);
  border:1px solid rgba(255,90,54,.3);
  background:linear-gradient(180deg,rgba(255,90,54,.07),rgba(255,90,54,.02));
}
.styles-cta p{margin:0; font-size:17px; color:var(--ink); max-width:34em}
.styles-cta .btn{flex:none}

/* ---------- EDGES ---------- */
.edges{padding:100px 0}
.edge-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.edge{padding:30px 26px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(180deg,var(--bg-1),transparent)}
.edge-ic{height:40px; margin-bottom:18px}
.edge h3{font-size:20px; margin-bottom:10px; letter-spacing:-.02em}
.edge p{color:var(--ink-soft); font-size:15px; margin:0; line-height:1.55}
.edge p a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

/* ---------- PROOF ---------- */
.proof{padding:0 0 100px}
.proof-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:46px;
  background:linear-gradient(180deg,rgba(255,90,54,.05),transparent);
}
.stat{padding:34px 26px; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-num{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(34px,4vw,46px); letter-spacing:-.04em; color:#fff}
.stat-label{color:var(--ink-soft); font-size:14.5px; margin-top:6px; line-height:1.35}
.proof-framing{display:flex; align-items:center; gap:13px; margin-bottom:22px; flex-wrap:wrap}
.pf-pill{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:rgba(255,90,54,.1); border:1px solid rgba(255,90,54,.3); padding:6px 12px; border-radius:999px}
.pf-note{color:var(--ink-soft); font-size:15px}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{margin:0; padding:30px; border-radius:var(--radius); background:var(--bg-1); border:1px solid var(--line); position:relative}
.quote::before{content:"”"; position:absolute; top:8px; right:22px; font-family:"Bricolage Grotesque",sans-serif; font-size:80px; color:var(--accent); opacity:.16; line-height:1}
.quote blockquote{margin:0 0 20px; font-size:16.5px; line-height:1.55; color:var(--ink)}
.quote figcaption{display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:16px}
.q-name{font-weight:700; color:#fff}
.q-role{font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-dim)}

/* ---------- PRICING ---------- */
.pricing{padding:100px 0}
.billing-toggle{display:inline-flex; gap:4px; background:var(--bg-1); border:1px solid var(--line); border-radius:999px; padding:5px; margin-bottom:42px}
.bt-opt{font-family:inherit; font-weight:600; font-size:15px; color:var(--ink-soft); background:none; border:0; padding:10px 20px; border-radius:999px; cursor:pointer; transition:.25s; display:inline-flex; align-items:center; gap:8px}
.bt-opt.is-active{background:var(--accent); color:#1a0a05}
.bt-save{font-family:"DM Mono",monospace; font-size:10.5px; background:rgba(0,0,0,.18); padding:3px 7px; border-radius:999px}
.bt-opt.is-active .bt-save{background:rgba(0,0,0,.22)}
.bt-opt:not(.is-active) .bt-save{background:rgba(255,90,54,.14); color:var(--accent-2)}

.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.plan{position:relative; padding:34px 30px; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-1); transition:transform .35s var(--ease)}
.plan:hover{transform:translateY(-4px)}
.plan-feature{
  border-color:rgba(255,90,54,.55);
  background:linear-gradient(180deg,rgba(255,90,54,.08),var(--bg-1));
  box-shadow:0 30px 70px -34px rgba(255,90,54,.6);
}
.plan-flag{position:absolute; top:-13px; left:30px; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#1a0a05; background:var(--accent); padding:6px 13px; border-radius:999px}
.plan-head h3{font-size:24px; letter-spacing:-.02em}
.plan-for{color:var(--ink-soft); font-size:15px; margin:6px 0 0}
.plan-price{display:flex; align-items:baseline; gap:2px; margin:22px 0 4px}
.pp-cur{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:24px; color:var(--ink-soft); align-self:flex-start; margin-top:8px}
.pp-amt{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:60px; letter-spacing:-.04em; color:#fff; line-height:1}
.pp-per{color:var(--ink-soft); font-size:18px; font-weight:600}
.plan-billed{color:var(--ink-dim); font-size:13.5px; font-family:"DM Mono",monospace; margin:0 0 22px}
.plan-feats{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:13px}
.plan-feats li{position:relative; padding-left:28px; color:var(--ink-soft); font-size:15.5px; line-height:1.4}
.plan-feats li::before{content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:rgba(255,90,54,.14); border:1px solid rgba(255,90,54,.4)}
.plan-feats li::after{content:""; position:absolute; left:5px; top:9px; width:5px; height:8px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(40deg)}
.plan-feats li strong{color:#fff}
.plan-reassure{display:flex; align-items:center; gap:8px; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--good)}
.plan-reassure span{font-size:12px}
.pricing-foot{text-align:center; color:var(--ink-dim); font-size:15px; margin-top:36px; max-width:50em; margin-left:auto; margin-right:auto}

/* ---------- INSTITUTE ---------- */
.institute{padding:100px 0; background:linear-gradient(180deg,transparent,rgba(255,90,54,.04),transparent)}
.institute-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center}
.institute-copy h2{font-size:clamp(30px,4.2vw,48px); margin:14px 0 20px}
.institute-copy p{color:var(--ink-soft); font-size:18px; line-height:1.6; max-width:34em}
.inst-list{list-style:none; margin:26px 0 32px; padding:0; display:flex; flex-direction:column; gap:14px}
.inst-list li{position:relative; padding-left:30px; font-size:16.5px; color:var(--ink)}
.inst-list li::before{content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700}
.institute-badge{display:flex; justify-content:center}
.cert{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:42px 38px; border-radius:22px; border:1px solid rgba(255,90,54,.35);
  background:radial-gradient(circle at 50% 0%, rgba(255,90,54,.12), var(--bg-1));
  box-shadow:var(--shadow);
}
.cert-ring{filter:drop-shadow(0 0 18px rgba(255,90,54,.4)); animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cert-text{text-align:center; display:flex; flex-direction:column; gap:5px}
.cert-top{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.18em; color:var(--ink-dim)}
.cert-main{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:23px; letter-spacing:-.01em; color:#fff}
.cert-sub{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--accent-2)}

/* ---------- FAQ ---------- */
.faq{padding:100px 0}
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:880px}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-1); overflow:hidden; transition:border-color .3s}
.faq-item[open]{border-color:rgba(255,90,54,.4)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 24px; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700; font-size:18.5px; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-family:"Public Sans"; font-weight:400; font-size:26px; color:var(--accent); transition:transform .3s; flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 24px 24px; color:var(--ink-soft)}
.faq-a p{margin:0; font-size:16px; line-height:1.6; max-width:60em}

/* ---------- FINAL ---------- */
.final{position:relative; padding:120px 0; text-align:center; overflow:hidden}
.final-glow{position:absolute; inset:0; z-index:0; background:radial-gradient(700px 360px at 50% 30%, rgba(255,90,54,.2), transparent 65%)}
.final-inner{position:relative; z-index:2; max-width:760px; margin:0 auto}
.final h2{font-size:clamp(34px,5.2vw,60px); font-weight:800; letter-spacing:-.035em}
.final p{color:var(--ink-soft); font-size:19px; margin:22px auto 34px; max-width:40em}
.start-form{display:flex; gap:12px; max-width:560px; margin:0 auto; flex-wrap:wrap}
.start-form input{
  flex:1; min-width:240px; padding:16px 20px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-1); color:#fff; font-family:inherit; font-size:16px;
}
.start-form input::placeholder{color:var(--ink-dim)}
.start-form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,90,54,.15)}
.final-fine{font-size:14px; color:var(--ink-dim); margin-top:18px}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line); padding:64px 0 30px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.3))}
.footer-inner{display:grid; grid-template-columns:1.2fr 2fr; gap:50px; padding-bottom:44px; border-bottom:1px solid var(--line)}
.foot-tag{color:var(--ink-soft); font-size:15px; margin-top:16px; line-height:1.5}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.foot-col h4{font-family:"DM Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:16px; font-weight:500}
.foot-col a{display:block; color:var(--ink-soft); font-size:15px; padding:6px 0; transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; padding-top:24px; color:var(--ink-dim); font-size:14px; flex-wrap:wrap; gap:10px}
.foot-links a:hover{color:var(--accent)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:flex}
  .hero-inner{grid-template-columns:1fr; gap:46px}
  .hero-visual{max-width:460px}
  .pain-grid,.trade-grid,.institute-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .style-grid{grid-template-columns:repeat(3,1fr)}
  .styles-cta{flex-direction:column; align-items:flex-start}
  .edge-grid{grid-template-columns:repeat(2,1fr)}
  .proof-stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .quotes{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto}
  .footer-inner{grid-template-columns:1fr; gap:36px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap,.hero-inner,.nav{padding-left:18px; padding-right:18px}
  .style-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .edge-grid{grid-template-columns:1fr}
  .proof-stats{grid-template-columns:1fr}
  .stat{border-right:0; border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .brand-by{display:none}
  .band-pain,.how,.trades,.styles,.edges,.pricing,.institute,.faq{padding:64px 0}
  .float-badge{display:none}
}

/* =========================================================================
   LOOP-2 — conversion-psychology refinements
   (CTA microcopy · live-proof mini signifiers · migration band ·
    anti-hostage guarantee · Pro authority reframe)
   Uses only the existing tokens + .mini --m-* palette vars.
   ========================================================================= */

/* 1 · CTA blind-spot microcopy — kills "what's the catch" */
.cta-microcopy{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin:-4px 0 22px; padding:0;
  font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.03em;
  color:var(--ink-dim);
}
.cta-microcopy .cm-dot{
  width:3px; height:3px; border-radius:50%; background:var(--accent); opacity:.8;
}
.cta-microcopy-center{justify-content:center; margin:18px 0 0}

/* 2 · Live-proof signifiers inside the .mini mockups
   (URL line · ★ Google 5.0 chip · "Tap to call" phone pill) */
.mini-url{
  display:flex; align-items:center; gap:5px;
  padding:5px 11px 0; margin-bottom:-1px;
  font-family:"DM Mono",monospace; font-size:6.5px; letter-spacing:.02em;
  color:var(--m-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mini-url-lock{
  flex:none; width:5px; height:5px; border-radius:1.5px;
  border:1px solid var(--m-soft); position:relative;
}
.mini-url-lock::before{
  content:""; position:absolute; left:1px; top:-2px; width:3px; height:3px;
  border:1px solid var(--m-soft); border-bottom:0; border-radius:2px 2px 0 0;
}
.mini-google{
  position:absolute; top:7px; right:8px; z-index:3;
  display:inline-flex; align-items:center; gap:3px;
  font-family:"Public Sans",sans-serif; font-weight:700; font-size:6px; letter-spacing:.01em;
  color:var(--m-ink); background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:2px 5px;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.4);
}
.mini-google b{color:#F5A623; font-size:7px; line-height:1}
/* dark-mockup variant: keep the chip readable on light AND dark heroes */
.sc-midnight .mini-google,.sc-street .mini-google,.sc-muscle .mini-google,
.sc-industrial .mini-google,.sc-ceramic .mini-google,.sc-neon .mini-google{
  background:rgba(8,10,13,.78); color:#fff; border-color:rgba(255,255,255,.16);
}
.mini-phone{
  display:flex; align-items:center; justify-content:center; gap:5px;
  margin:9px 9px 0; padding:6px 9px; border-radius:999px;
  font-family:"Public Sans",sans-serif; font-weight:700; font-size:7px; letter-spacing:.01em;
  color:#fff; background:var(--m-acc);
  box-shadow:0 4px 10px -4px var(--m-acc);
}
.mini-phone-ic{
  flex:none; width:8px; height:8px;
  background:currentColor;
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2a1 1 0 011-.24 11 11 0 003.5.56 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11 11 0 00.56 3.5 1 1 0 01-.24 1z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2a1 1 0 011-.24 11 11 0 003.5.56 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11 11 0 00.56 3.5 1 1 0 01-.24 1z'/%3E%3C/svg%3E");
}
/* light-hero styles: keep label text white-on-accent, but a darker pill
   reads better against light/cream coatings (luxe is gold = low contrast) */
.sc-luxe .mini-phone{background:#111; box-shadow:0 4px 10px -5px rgba(0,0,0,.55)}
.sc-clean .mini-phone,.sc-hometown .mini-phone,.sc-editorial .mini-phone{box-shadow:0 4px 10px -5px rgba(0,0,0,.5)}
.sc-industrial .mini-phone{color:#1C1C1A}
.mini-tiles{padding-top:9px}

/* 3 · "We move your old stuff" migration band */
.migrate{padding:0 0 40px}
.migrate-band{
  display:grid; grid-template-columns:.9fr 1.4fr; gap:40px; align-items:center;
  padding:42px 44px; border-radius:var(--radius);
  border:1px solid rgba(255,90,54,.28);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,90,54,.09), transparent 60%),
    linear-gradient(180deg,var(--bg-1),rgba(15,20,24,.4));
}
.migrate-head h2{font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; margin-top:12px}
.migrate-head p{color:var(--ink-soft); font-size:16.5px; line-height:1.55; margin:16px 0 0; max-width:30em}
.migrate-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.migrate-points li{display:flex; align-items:flex-start; gap:14px}
.migrate-points li div{color:var(--ink-soft); font-size:15.5px; line-height:1.5}
.migrate-points li strong{color:#fff}
.mig-ic{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,90,54,.1); border:1px solid rgba(255,90,54,.3);
}

/* 4 · Anti-Hostage Guarantee — a promise/seal, not fine print */
.guarantee{
  display:flex; align-items:center; gap:26px;
  margin-top:40px; padding:30px 34px; border-radius:var(--radius);
  border:1.5px solid rgba(255,90,54,.5);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,90,54,.1), transparent 55%),
    linear-gradient(180deg,rgba(255,90,54,.05),var(--bg-1));
  box-shadow:0 30px 70px -40px rgba(255,90,54,.55);
}
.guarantee-seal{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(255,90,54,.16), var(--bg-1));
  border:1px solid rgba(255,90,54,.4);
  filter:drop-shadow(0 0 16px rgba(255,90,54,.35));
}
.guarantee-tag{
  display:inline-block; font-family:"DM Mono",monospace; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.guarantee-copy h3{font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.025em; margin:9px 0 8px; color:#fff}
.guarantee-copy p{margin:0; color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:48em}

/* 5 · Pro plan authority reframe — status, not utility */
.plan-authority{
  margin:18px 0 4px; padding:16px 16px 15px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(255,90,54,.1),rgba(255,90,54,.03));
  border:1px solid rgba(255,90,54,.32);
}
.pa-quote{
  display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:16px; line-height:1.2; letter-spacing:-.015em; color:#fff;
}
.pa-body{display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-soft)}
.pa-body strong{color:var(--accent-2); font-family:"DM Mono",monospace; font-size:.92em; font-weight:500}

/* migration + guarantee responsive */
@media (max-width:980px){
  .migrate-band{grid-template-columns:1fr; gap:26px; padding:34px 30px}
  .guarantee{flex-direction:column; text-align:center; gap:18px; padding:30px 26px}
  .guarantee-copy p{max-width:none}
}
@media (max-width:560px){
  .migrate{padding:0 0 24px}
  .migrate-band{padding:28px 22px}
  .cta-microcopy{font-size:11px; gap:7px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .hero-copy>*,.hero-visual{opacity:1; transform:none}
}