/* ============================================================
   JT COMPLIANCE (JT Handyman Solutionz) — Concept Funnels
   Shared design system — REAL BRAND: JT RED x CHARCOAL x GLASS
   (logo red sampled live from jtcompliance.com.au logo, Jun 2026)
     Brand voice : "One Call. One Quote. One Invoice." — trade-grade,
                   deadline-driven, zero compliance headaches.
     Audience    : Melbourne property managers & agencies (10+ doors),
                   landlords. Hook = VIC minimum energy-efficiency
                   standards, first trigger 1 March 2027.
     Palette     : JT red #ED1F24 · charcoal #0C0D10 · white · glass
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --red:#ED1F24; --red-hi:#FF4046; --red-lo:#B5151A; --red-deep:#5d0d10;
  --bg:#0C0D10; --bg-2:#101218; --bg-3:#15171E;
  --ink:#FFFFFF; --ink-soft:rgba(255,255,255,.62); --ink-mute:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --line-red:rgba(237,31,36,.45);
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.10);
  --glass-red:rgba(237,31,36,.08);
  --blur:18px; --radius:18px; --radius-sm:12px;
  --shadow:0 30px 90px -34px rgba(0,0,0,.94);
  --ring:0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  --glow:0 0 0 1px rgba(237,31,36,.35), 0 20px 70px -18px rgba(237,31,36,.45);
  --grad-red:linear-gradient(100deg,#FF4046,#ED1F24 48%,#C4181D);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
section[id]{scroll-margin-top:84px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,system-ui,Arial,sans-serif;
  font-weight:400; line-height:1.62; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 84% -8%, rgba(237,31,36,.13), transparent 62%),
    radial-gradient(50% 44% at -4% 8%, rgba(237,31,36,.07), transparent 60%),
    radial-gradient(48% 42% at 50% 116%, rgba(60,64,78,.5), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
/* site-plan grid, slowly panning */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(74% 62% at 50% 26%, #000 38%, transparent 92%);
  -webkit-mask-image:radial-gradient(74% 62% at 50% 26%, #000 38%, transparent 92%);
  animation:meshpan 48s linear infinite;
}
@keyframes meshpan{from{background-position:0 0,0 0} to{background-position:64px 64px,64px 64px}}

.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.bg-orbs i{position:absolute; border-radius:50%; filter:blur(78px); opacity:.42;
  animation:float 18s ease-in-out infinite; mix-blend-mode:screen}
.bg-orbs i.a{width:560px; height:560px; background:radial-gradient(circle,rgba(237,31,36,.55),transparent 70%); top:-150px; right:-110px}
.bg-orbs i.b{width:460px; height:460px; background:radial-gradient(circle,rgba(70,76,92,.8),transparent 70%); bottom:-150px; left:-90px; animation-delay:-6s; opacity:.4}
.bg-orbs i.c{width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%); top:42%; left:54%; opacity:.08; animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-60px,44px) scale(1.12)} 66%{transform:translate(44px,-34px) scale(.92)}}

h1,h2,h3,.display{font-family:'Inter',Arial,sans-serif;
  font-weight:800; line-height:1.06; letter-spacing:-.028em; margin:0}
h1{font-size:clamp(2.5rem,6vw,4.6rem); line-height:1.02}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.5rem); font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.24rem); color:var(--ink-soft); font-weight:400}
.eyebrow{text-transform:uppercase; letter-spacing:.26em; font-weight:700; font-size:.74rem; color:var(--red-hi)}
.grad{background:linear-gradient(110deg,#FF4046 6%,#ED1F24 46%,#FF8A8D 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

.pulse-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 10px var(--red); animation:pulse 2s infinite; vertical-align:middle; margin-right:.55em}
@keyframes pulse{0%,100%{box-shadow:0 0 12px var(--red); opacity:1} 50%{box-shadow:0 0 24px var(--red); opacity:.65}}

@keyframes rise{to{opacity:1; transform:translateY(0)}}
.hero .rise{opacity:0; transform:translateY(20px); animation:rise .9s forwards cubic-bezier(.2,.7,.2,1)}
.hero .rise.d1{animation-delay:.10s} .hero .rise.d2{animation-delay:.22s}
.hero .rise.d3{animation-delay:.34s} .hero .rise.d4{animation-delay:.46s}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
section{padding:clamp(54px,8.5vw,114px) 0}

.glass{background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(130%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(130%);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--ring),var(--shadow)}
.glass-soft{background:var(--glass); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border:1px solid var(--line-soft); border-radius:var(--radius-sm)}

/* Buttons — red pill, white text (his CTA) */
.btn{display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:'Inter',Arial,sans-serif; letter-spacing:.005em; font-weight:700;
  font-size:1.04rem; padding:.95rem 1.9rem; border-radius:999px; border:0; text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease, filter .25s ease}
.btn-primary{position:relative; overflow:hidden; background:var(--grad-red); color:#fff; box-shadow:var(--glow)}
.btn-primary::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg); animation:sweep 4.5s ease-in-out infinite}
@keyframes sweep{0%,72%{left:-120%} 100%{left:130%}}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 0 1px rgba(237,31,36,.55), 0 26px 80px -20px rgba(237,31,36,.6)}
.btn-ghost{background:var(--glass-strong); color:var(--ink); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.16)}
.btn svg{width:1.05em; height:1.05em}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* Sticky bar */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); background:rgba(12,13,16,.7); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:11px; padding-bottom:11px}
.brand-logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand-logo img{height:40px; width:auto; display:block}
.brand-logo .bl-name{display:flex; flex-direction:column; line-height:1.05}
.brand-logo .bl-name b{font-weight:800; font-size:1.05rem; letter-spacing:.01em}
.brand-logo .bl-name span{font-size:.56rem; letter-spacing:.3em; font-weight:700; color:var(--red-hi); text-transform:uppercase; margin-top:3px}
.topbar .btn{padding:.6rem 1.25rem; font-size:.95rem}
.topbar .tb-phone{margin-left:auto; margin-right:16px; color:var(--ink-soft); text-decoration:none; font-size:.9rem; font-weight:600}
.topbar .tb-phone:hover{color:#fff}
@media(max-width:700px){ .topbar .tb-phone{display:none} }

/* HERO */
.hero{position:relative; padding-top:clamp(42px,6.5vw,76px)}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,56px); align-items:center}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px}
.chip{display:inline-flex; align-items:center; gap:.5em; font-size:.84rem; color:var(--ink-soft);
  padding:.48rem .9rem; border-radius:999px; background:var(--glass); border:1px solid var(--line)}
.chip svg{width:1em; height:1em; color:var(--red-hi)}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px}
.stat{padding:18px; text-align:center; position:relative}
.stat b{font-weight:800; font-size:2.4rem; line-height:1; display:block; color:var(--ink)}
.stat span{font-size:.76rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em}
.stat::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:40%; height:1px; background:var(--grad-red); opacity:.6}

.shead{max-width:760px; margin:0 auto clamp(34px,5vw,58px); text-align:center}
.shead p{margin-top:14px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{padding:30px; position:relative; overflow:hidden}
.step .n{font-weight:800; font-size:3rem; line-height:1; color:var(--red); opacity:.35}
.step h3{margin:.45rem 0 .5rem} .step p{color:var(--ink-soft); margin:0}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.feat{padding:28px}
.feat .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--glass-red); border:1px solid var(--line-red)}
.feat .ic svg{width:24px; height:24px; color:var(--red-hi)}
.feat h3{margin-bottom:.4rem} .feat p{color:var(--ink-soft); margin:0; font-size:.97rem}
.feat .ph{margin:-28px -28px 18px; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; aspect-ratio:16/9}
.feat .ph img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02)}

/* Testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.quote{padding:26px} .quote p{font-size:1.0rem; color:var(--ink)}
.quote .who{display:flex; align-items:center; gap:.7rem; margin-top:16px}
.quote .av{width:40px; height:40px; border-radius:50%; background:var(--grad-red); display:grid; place-items:center; color:#fff; font-weight:800}
.quote .who b{display:block; font-size:.95rem} .quote .who span{font-size:.8rem; color:var(--ink-mute)}
.stars{color:#fcbf18; letter-spacing:2px; font-size:.95rem}

/* CTA */
.cta{position:relative; text-align:center; padding:clamp(44px,7vw,82px) 28px; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%, rgba(237,31,36,.14), transparent 70%)}
.cta>*{position:relative}
.cta h2{max-width:780px; margin:0 auto 14px}
.cta .lead{max-width:580px; margin:0 auto 26px}

/* Forms */
.lead-form{max-width:460px; margin:0 auto; text-align:left}
.lead-form .field{margin-bottom:14px}
.lead-form label{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; font-weight:500}
.lead-form input, .lead-form select, .lead-form textarea{width:100%; padding:.9rem 1rem; border-radius:12px; font:inherit;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(237,31,36,.22)}
.lead-form input::placeholder, .lead-form textarea::placeholder{color:var(--ink-mute)}
.lead-form select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23888fa0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center}
.lead-form .btn{width:100%; justify-content:center; margin-top:6px}
.form-note{text-align:center; font-size:.78rem; color:var(--ink-mute); margin-top:14px}
.thanks{text-align:center; padding:30px}
.thanks .seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:var(--grad-red);color:#fff}
.thanks .seal svg{width:30px;height:30px}

/* QUIZ */
.quiz{max-width:640px; margin:0 auto}
.quiz-card{padding:clamp(28px,4vw,44px); position:relative; overflow:hidden}
.progress{height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:26px}
.progress > i{display:block; height:100%; width:16%; border-radius:999px; background:var(--grad-red); transition:width .4s cubic-bezier(.2,.7,.2,1)}
.q-step{display:none; animation:qin .45s ease both}
.q-step.active{display:block}
@keyframes qin{from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:none}}
.q-kicker{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red-hi); font-weight:700}
.q-step h3{font-size:clamp(1.35rem,3vw,1.9rem); margin:.5rem 0 1.4rem}
.opts{display:grid; gap:12px}
.opt{display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; cursor:pointer;
  padding:1rem 1.15rem; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  color:var(--ink); font:inherit; font-size:1.0rem; transition:border-color .18s, background .18s, transform .12s}
.opt:hover{border-color:var(--red); background:rgba(237,31,36,.08); transform:translateY(-1px)}
.opt .dot{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--ink-mute); display:grid; place-items:center; transition:.18s}
.opt .dot svg{width:12px; height:12px; color:#fff; opacity:0; transition:.18s}
.opt.sel{border-color:var(--red); background:rgba(237,31,36,.14)}
.opt.sel .dot{background:var(--red); border-color:var(--red)} .opt.sel .dot svg{opacity:1}
.q-nav{display:flex; justify-content:space-between; align-items:center; margin-top:24px}
.q-back{background:none; border:0; color:var(--ink-mute); font:inherit; cursor:pointer; font-size:.92rem; padding:.4rem}
.q-back:hover{color:var(--ink-soft)}
.q-back[disabled]{opacity:0; pointer-events:none}

footer{padding:48px 0; border-top:1px solid var(--line); color:var(--ink-mute); font-size:.86rem; text-align:center}
footer a{color:var(--red-hi); text-decoration:none}
.disclaimer{max-width:700px; margin:14px auto 0; font-size:.74rem; color:var(--ink-mute); opacity:.82}

/* Reveal system */
.reveal{opacity:1; transform:none}
.js-anim .reveal{opacity:0; transform:translateY(38px) scale(.98); filter:blur(10px);
  transition:opacity .95s cubic-bezier(.16,.84,.3,1), transform .95s cubic-bezier(.16,.84,.3,1), filter .9s ease;
  transition-delay:var(--rd,0s); will-change:opacity,transform,filter}
.js-anim .reveal.in{opacity:1; transform:none; filter:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .steps,.grid3,.quotes{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:560px){ .stats{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* Liquid-glass sheen + glow-on-hover */
.glass{position:relative; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .3s ease}
.glass::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.05) 30%, transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; transition:opacity .35s}
.feat.glass:hover, .step.glass:hover, .quote.glass:hover, .pcard.glass:hover, .std.glass:hover{
  transform:translateY(-6px);
  border-color:var(--line-red);
  box-shadow:0 0 0 1px rgba(237,31,36,.3), 0 34px 90px -30px rgba(237,31,36,.3), var(--shadow)}

.glow-card{position:relative; overflow:hidden}
.glow-card::after{content:""; position:absolute; width:340px; height:340px; left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(237,31,36,.14), transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none}
.glow-card:hover::after{opacity:1}

/* Hero photo */
.hero-photo{position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--ring),var(--shadow); animation:breathe 9s ease-in-out infinite}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.04) contrast(1.02)}
.hero-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(12,13,16,.6) 100%),
             radial-gradient(80% 60% at 70% 10%, rgba(237,31,36,.08), transparent 60%)}
.hero-photo .badge{position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:8px; align-items:center;
  font-size:.74rem; color:#fff; background:rgba(12,13,16,.62); backdrop-filter:blur(8px);
  border:1px solid var(--line-red); padding:.45rem .8rem; border-radius:999px}
.hero-photo .badge b{color:var(--red-hi); font-weight:700}
@keyframes breathe{0%,100%{box-shadow:var(--ring),var(--shadow)}
  50%{box-shadow:0 0 0 1px rgba(237,31,36,.2), inset 0 1px 0 rgba(255,255,255,.08), 0 40px 110px -34px rgba(0,0,0,.96)}}

.eyebrow.line{display:inline-block; padding-bottom:8px; position:relative}
.eyebrow.line::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:38px; background:var(--grad-red)}
.js-anim .shead .eyebrow.line::after{width:0; transition:width .8s .35s cubic-bezier(.16,.84,.3,1)}
.js-anim .shead.in .eyebrow.line::after, .js-anim .shead .reveal.in .eyebrow.line::after{width:38px}

/* scroll progress */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:140;
  background:var(--grad-red); box-shadow:0 0 14px rgba(237,31,36,.7)}

/* hero word cascade */
.js-anim .h-word{display:inline-block; opacity:0; transform:translateY(.55em); filter:blur(8px);
  animation:wordin .85s cubic-bezier(.16,.84,.3,1) forwards; animation-delay:var(--wd,0s)}
@keyframes wordin{to{opacity:1; transform:none; filter:none}}

/* dust motes */
.dust{position:fixed; inset:0; z-index:-1; pointer-events:none}
.dust i{position:absolute; bottom:-2vh; width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,.45); filter:blur(.4px); opacity:0;
  animation:drift var(--dur,22s) linear var(--del,0s) infinite}
@keyframes drift{
  0%{opacity:0; transform:translate(0,0) scale(.8)}
  12%{opacity:.5}
  60%{opacity:.28; transform:translate(var(--sway,24px),-58vh) scale(1)}
  100%{opacity:0; transform:translate(calc(var(--sway,24px)*-.6),-112vh) scale(.7)}}

.topbar{transition:background .35s ease, box-shadow .35s ease}
.topbar.scrolled{background:rgba(12,13,16,.9); box-shadow:0 18px 50px -28px rgba(0,0,0,.9)}

/* marquee */
.marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:48px; width:max-content; animation:scrollx 28s linear infinite; align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{color:var(--ink-soft); font-size:.92rem; white-space:nowrap; display:inline-flex; align-items:center; gap:.5rem}
.marquee span::before{content:"◆"; color:var(--red); font-size:.6rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============================================================
   COUNTDOWN — deadline instrument (1 March 2027)
   ============================================================ */
.countdown{display:flex; gap:12px; justify-content:center; font-variant-numeric:tabular-nums}
.cd-cell{min-width:86px; padding:16px 10px 13px; text-align:center; border-radius:14px;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.cd-cell b{display:block; font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; line-height:1; color:var(--ink)}
.cd-cell span{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); font-weight:700}
.cd-cell.hot{border-color:var(--line-red); background:var(--glass-red)}
.cd-cell.hot b{color:var(--red-hi)}
@media(max-width:560px){ .cd-cell{min-width:64px; padding:12px 6px 10px} }
.deadline-pill{display:inline-flex; align-items:center; gap:.55em; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--glass-red); border:1px solid var(--line-red);
  border-radius:999px; padding:.5rem 1rem}

/* ============================================================
   STANDARDS TABLE — the 5 requirements + triggers
   ============================================================ */
.stds{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.std{padding:24px; display:flex; gap:16px; align-items:flex-start}
.std .ic{flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--glass-red); border:1px solid var(--line-red)}
.std .ic svg{width:22px; height:22px; color:var(--red-hi)}
.std h3{font-size:1.08rem; margin:0 0 .3rem}
.std p{margin:0; font-size:.9rem; color:var(--ink-soft)}
.std .when{display:inline-block; margin-top:.6rem; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-hi); border:1px solid var(--line-red); border-radius:999px; padding:.32rem .7rem; background:rgba(237,31,36,.06)}
@media(max-width:760px){ .stds{grid-template-columns:1fr} }

/* before/after compare slider */
.cmp{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); aspect-ratio:16/9; cursor:ew-resize; touch-action:none; user-select:none;
  -webkit-user-select:none; background:var(--bg-2)}
.cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.cmp .cmp-after{clip-path:inset(0 0 0 50%)}
.cmp .cmp-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--red-hi);
  z-index:3; box-shadow:0 0 24px rgba(237,31,36,.8); pointer-events:none}
.cmp .cmp-handle::after{content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--grad-red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:700;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8)}
.cmp .tagb{position:absolute; z-index:2; top:14px; font:700 .68rem/1 'Inter'; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:rgba(0,0,0,.55); border:1px solid var(--line);
  border-radius:999px; padding:.45rem .8rem; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); pointer-events:none}
.cmp .tagb.l{left:14px}.cmp .tagb.r{right:14px}

/* live compliance ops strip (mock, disclaimed) */
.ops{padding:22px 26px; font-variant-numeric:tabular-nums}
.ops .ops-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.live-pill{display:inline-flex; align-items:center; gap:.45em; font:700 .7rem/1 'Inter',sans-serif;
  letter-spacing:.18em; color:#fff; background:var(--grad-red); border-radius:999px; padding:.42rem .75rem}
.live-pill .pulse-dot{background:#fff; box-shadow:none; margin-right:0}
.ops .term{list-style:none; margin:0; padding:0}
.ops .term li{display:flex; align-items:center; gap:.7rem; padding:.66rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.88rem; color:var(--ink-soft)}
.ops .term li:last-child{border-bottom:0}
.ops .term li b{color:var(--ink); font-weight:700}
.ops .ok{flex:none; width:7px; height:7px; border-radius:50%; background:var(--red-hi); box-shadow:0 0 8px rgba(237,31,36,.7)}
.ops .cur{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ops .cur::after{content:"▌"; margin-left:2px; color:var(--ink-mute); animation:blinkc 1.1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.tick-flash{animation:tickflash .7s ease}
@keyframes tickflash{0%{color:var(--red-hi); text-shadow:0 0 14px rgba(237,31,36,.9)} 100%{text-shadow:none}}

/* result band card (quiz) */
.result-tier{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-hi); border:1px solid var(--line-red); border-radius:999px; padding:.4rem .9rem; background:var(--glass-red); margin-bottom:14px; font-weight:700}

/* checklist preview (concept 3) */
.pack{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center}
.pack-card{padding:30px; position:relative}
.pack-card ul{list-style:none; margin:14px 0 0; padding:0}
.pack-card li{display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-size:.95rem; color:var(--ink-soft)}
.pack-card li svg{flex:none; width:18px; height:18px; color:var(--red-hi); margin-top:3px}
.pack-card li b{color:var(--ink)}
@media(max-width:860px){ .pack{grid-template-columns:1fr} }

/* form success */
.lead-form.sent{position:relative}
.form-sent{display:none; text-align:center; padding:18px 6px}
.lead-form.sent > .field, .lead-form.sent > .grid2, .lead-form.sent > .btn, .lead-form.sent > .form-note{display:none}
.lead-form.sent .form-sent{display:block; animation:qin .5s ease both}

/* Lenis */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---- built by Scalus footer badge ---- */
.built-by{display:inline-flex; align-items:center; gap:.55em; margin-top:26px;
  font-size:.7rem; font-weight:600; line-height:1; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); text-decoration:none; opacity:.85; transition:opacity .3s}
.built-by img{height:13px; width:auto; display:block}
.built-by b{color:var(--ink-soft); font-weight:700; letter-spacing:.22em}
.built-by:hover{opacity:1}