/* =========================================================
   AGENT HERO — premium comic-book design system
   ========================================================= */

:root{
  /* desaturated comic palette */
  --ink:        #16131d;
  --ink-soft:   #2a2533;
  --paper:      #efe6d2;   /* aged newsprint */
  --paper-2:    #e6dabf;
  --cream:      #f7f1e3;
  --navy:       #171c2f;   /* deep night */
  --navy-2:     #20273f;
  --steel:      #34456f;
  --red:        #cf4434;   /* cape red, desaturated */
  --red-deep:   #a6312a;
  --gold:       #e6b23e;
  --gold-deep:  #c8932b;
  --blue-pop:   #2f4a86;

  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-hard-sm: 5px 5px 0 var(--ink);

  --ff-display:'Anton', Impact, sans-serif;
  --ff-comic:'Bangers', 'Anton', cursive;
  --ff-body:'Inter', system-ui, sans-serif;

  --maxw: 1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  overflow-x:hidden;
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,.025) 0, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.03) 0, transparent 55%);
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- shared comic primitives ---------- */
.halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,0,0,.32) 1.1px, transparent 1.6px);
  background-size:9px 9px;
  opacity:.16; mix-blend-mode:multiply; pointer-events:none;
}
.halftone--blue{ background-image:radial-gradient(rgba(150,180,255,.5) 1.1px, transparent 1.6px); opacity:.10; mix-blend-mode:screen; }
.halftone--red{ background-image:radial-gradient(rgba(255,180,160,.6) 1.2px, transparent 1.7px); opacity:.12; mix-blend-mode:screen; }

.speedlines{
  position:absolute; inset:-20%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
     rgba(255,255,255,.05) 0deg 1.1deg, transparent 1.1deg 5deg);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, transparent 28%, #000 72%);
          mask-image:radial-gradient(circle at 50% 45%, transparent 28%, #000 72%);
  opacity:.6;
}

.kicker{
  font-family:var(--ff-comic);
  letter-spacing:.06em;
  font-size:clamp(1rem,2.4vw,1.5rem);
  margin-bottom:.45em;
  text-shadow:1.5px 1.5px 0 var(--ink);
  -webkit-text-stroke:.4px var(--ink);
}
.kicker--gold{ color:var(--gold); }
.kicker--red{ color:var(--red); }

.title{
  font-family:var(--ff-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:.01em;
  font-size:clamp(2.4rem,7vw,5.4rem);
  text-transform:uppercase;
  color:var(--ink);
  -webkit-text-stroke:1.5px var(--ink);
  text-shadow:5px 5px 0 var(--gold);
}
.title--light{ color:var(--cream); -webkit-text-stroke:1.5px var(--ink); text-shadow:5px 5px 0 var(--red-deep); }
.title__accent{ color:var(--red); text-shadow:5px 5px 0 var(--ink); }

.lede{ font-size:clamp(1.02rem,1.7vw,1.32rem); max-width:60ch; margin:1rem auto 0; font-weight:500; }
.lede--light{ color:#e9e2d2; }

.section-head{ text-align:center; max-width:840px; margin:0 auto clamp(2rem,5vw,3.6rem); }
.section-head--left{ text-align:left; margin-inline:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--ff-display);
  text-transform:uppercase; letter-spacing:.04em;
  font-size:1.15rem; padding:.85em 1.6em; cursor:pointer;
  border:3px solid var(--ink); background:var(--cream); color:var(--ink);
  box-shadow:var(--shadow-hard-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn--burst{
  background:var(--red); color:var(--cream); position:relative;
  text-shadow:1.5px 1.5px 0 var(--ink);
}
.btn--burst:hover{ background:#e1503e; }
.btn--ghost{ background:transparent; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(23,28,47,.0);
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.nav.scrolled{
  background:rgba(20,17,28,.96);
  box-shadow:0 4px 0 var(--ink), 0 5px 18px rgba(0,0,0,.35);
  padding-block:.5rem;
}
.nav__brand{ display:flex; align-items:center; gap:.55rem; }
.emblem svg{ filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4)); }
.em-diamond{ fill:var(--red); stroke:var(--ink); stroke-width:2.5; }
.em-house{ fill:var(--gold); stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
.nav__name{
  font-family:var(--ff-display); font-size:1.45rem; line-height:.85;
  color:var(--cream); -webkit-text-stroke:.5px var(--ink);
  display:flex; flex-direction:column;
  text-shadow:2px 2px 0 var(--red-deep);
}
.nav__name span{ color:var(--gold); }
.nav:not(.scrolled) .nav__name{ color:var(--cream); }

.nav__links{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.8rem); }
.nav__links a{
  font-weight:700; font-size:.96rem; color:var(--cream);
  text-shadow:1px 1px 2px rgba(0,0,0,.6); letter-spacing:.01em;
  transition:color .15s ease;
}
.nav__links a:hover{ color:var(--gold); }
.nav__cta{
  font-family:var(--ff-display); letter-spacing:.03em;
  background:var(--gold); color:var(--ink)!important;
  border:2.5px solid var(--ink); padding:.45em 1em;
  box-shadow:3px 3px 0 var(--ink); text-shadow:none!important;
  transition:transform .12s ease, box-shadow .12s ease;
}
.nav__cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__toggle span{ width:26px; height:3px; background:var(--cream); border-radius:2px; transition:.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:6.5rem clamp(1rem,4vw,2.4rem) 0;
  background:radial-gradient(120% 90% at 70% 20%, #25305a 0%, var(--navy) 55%, #0f1322 100%);
  overflow:hidden; border-bottom:6px solid var(--ink);
}
.hero__bg{ position:absolute; inset:0; }
.hero .skyline{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background:
    linear-gradient(transparent, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, #0c0f1c 0 38px, #11152600 38px 46px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 200V120h40V70h30v30h26V40h34v60h30V80h40v40h28V60h36v60h30V30h34v90h28V90h40v30h26V50h36v70h30V100h40v20h28V70h34v50h30V40h36v80h30V100h40v20h28V60h34v60h30V90h40v30h26V120h40v80z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 200V120h40V70h30v30h26V40h34v60h30V80h40v40h28V60h36v60h30V30h34v90h28V90h40v30h26V50h36v70h30V100h40v20h28V70h34v50h30V40h36v80h30V100h40v20h28V60h34v60h30V90h40v30h26V120h40v80z'/%3E%3C/svg%3E");
  -webkit-mask-size:1200px 100%; mask-size:1200px 100%; opacity:.7;
}
.hero__inner{
  position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:2rem; flex:1;
}
.hero__copy{ padding-bottom:2rem; }
.masthead{ font-family:var(--ff-display); line-height:.8; margin:.1em 0 .25em; }
.masthead__l1, .masthead__l2{ display:block; text-transform:uppercase; }
.masthead__l1{
  font-size:clamp(3rem,9vw,7rem); color:var(--cream);
  -webkit-text-stroke:2px var(--ink); text-shadow:6px 6px 0 var(--red-deep);
}
.masthead__l2{
  font-size:clamp(3.6rem,11vw,8.6rem); color:var(--gold);
  -webkit-text-stroke:2.5px var(--ink); text-shadow:7px 7px 0 var(--red);
  margin-top:-.06em;
}
.hero__tag{ font-size:clamp(1.1rem,2vw,1.5rem); font-weight:600; color:var(--cream); max-width:34ch; margin-bottom:.8rem; }
.hero__tag strong{ color:var(--gold); }
.hero__tag .hl{
  color:var(--ink); background:var(--gold); font-weight:800; padding:.02em .28em;
  box-shadow:2px 2px 0 var(--ink); -webkit-box-decoration-break:clone; box-decoration-break:clone;
  white-space:nowrap;
}
.hero__sub{ font-size:clamp(.98rem,1.5vw,1.12rem); color:#cdd3e4; max-width:46ch; margin-bottom:1.5rem; }
.hero__sub em{ color:var(--gold); font-style:normal; font-weight:700; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.6rem; }
.hero__cta .btn--ghost{ color:var(--cream); border-color:var(--cream); box-shadow:5px 5px 0 rgba(0,0,0,.4); }
.hero__badges{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; }
.hero__badges li{
  font-family:var(--ff-comic); letter-spacing:.04em; font-size:.95rem;
  background:var(--cream); color:var(--ink); border:2.5px solid var(--ink);
  padding:.18em .7em; box-shadow:3px 3px 0 var(--ink); transform:rotate(-1.5deg);
}
.hero__badges li:nth-child(even){ transform:rotate(1.5deg); background:var(--gold); }

/* hero art */
.hero__art{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:60vh; }
.hero__cutout{
  width:min(100%,560px); height:auto;
  filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(14px 18px 0 rgba(0,0,0,.45));
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }

.sfx{
  position:absolute; z-index:4; font-family:var(--ff-comic);
  color:var(--gold); -webkit-text-stroke:1.5px var(--ink);
  text-shadow:3px 3px 0 var(--ink);
}
.sfx--sold{
  top:6%; left:-2%; font-size:clamp(2.2rem,5vw,4rem); color:var(--red);
  transform:rotate(-12deg); animation:pop 3.5s ease-in-out infinite;
}
.sfx--247{
  bottom:16%; right:-2%; font-size:clamp(2rem,4.4vw,3.4rem);
  transform:rotate(10deg); animation:pop 3.5s ease-in-out .8s infinite;
}
@keyframes pop{ 0%,100%{ transform:scale(1) rotate(var(--r,-12deg)) } 50%{ transform:scale(1.1) } }
.sfx--sold{ --r:-12deg } .sfx--247{ --r:10deg }

/* supertitle — screams "AI for realtors" */
.supertitle{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:.7rem;
  font-family:var(--ff-comic); letter-spacing:.07em; font-size:clamp(.95rem,1.8vw,1.25rem);
  color:var(--ink); background:var(--gold); border:3px solid var(--ink);
  padding:.3em .9em; box-shadow:4px 4px 0 var(--ink); transform:rotate(-1.5deg);
  -webkit-text-stroke:.3px var(--ink);
}
.supertitle__dot{ width:.7em; height:.7em; border-radius:50%; background:var(--red); border:2px solid var(--ink); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.35); opacity:.55 } }

/* hero phone — live AI conversation overlaying the art */
.moon{ position:absolute; top:4%; right:5%; font-size:clamp(1.8rem,3vw,2.6rem); z-index:2; filter:drop-shadow(0 0 14px rgba(230,178,62,.5)); animation:floaty 7s ease-in-out infinite; }
.hero__art{ justify-content:flex-end; }
.hero__cutout{ z-index:1; width:min(100%,500px); }
/* .hero ancestor bumps specificity above the base .phone{position:relative} */
.hero .phone--hero{
  position:absolute; left:0; bottom:3%; z-index:6; width:min(66%,275px);
  transform:rotate(-3deg); box-shadow:12px 14px 0 var(--ink);
  animation:floaty 6.5s ease-in-out infinite reverse;
}
.phone__bar--ai .phone__avatar{ background:var(--red); }
.phone__name small{ color:var(--gold); font-weight:700; }
.phone__live{ margin-left:auto; display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:700; color:#bfe6c4; white-space:nowrap; }
.phone__live i{ width:.5em; height:.5em; border-radius:50%; background:#34d058; animation:livepulse 1.8s ease-out infinite; }
@keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(52,208,88,.6) } 70%{ box-shadow:0 0 0 6px rgba(52,208,88,0) } 100%{ box-shadow:0 0 0 0 rgba(52,208,88,0) } }
.phone--hero .phone__chat{ min-height:248px; }
.phone__stamp{
  align-self:center; margin-top:.4rem; font-family:var(--ff-comic); letter-spacing:.03em;
  font-size:.95rem; color:var(--ink); background:var(--gold); border:2.5px solid var(--ink);
  padding:.15em .7em; box-shadow:3px 3px 0 var(--ink); transform:rotate(-2deg); text-align:center;
}
/* message entrance + typing dots */
.phone__chat .bubble, .phone__chat .chat__time, .phone__chat .chat-card, .phone__stamp{ animation:msgIn .3s ease both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:translateY(0) } }
.ai-typing{ display:inline-flex; gap:4px; padding:.15em 0; }
.ai-typing i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.85); animation:typing 1.2s infinite ease-in-out; }
.ai-typing i:nth-child(2){ animation-delay:.18s } .ai-typing i:nth-child(3){ animation-delay:.36s }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }

/* trade dress */
.trade{
  position:absolute; z-index:5; font-family:var(--ff-display); text-transform:uppercase;
  background:var(--gold); color:var(--ink); border:3px solid var(--ink);
  box-shadow:var(--shadow-hard-sm);
}
.trade--issue{ top:5.2rem; left:1.4rem; padding:.3em .7em; font-size:1.1rem; transform:rotate(-4deg); }
.trade--price{
  top:5rem; right:1.4rem; width:78px; height:78px; border-radius:50%;
  background:var(--red); color:var(--cream); display:grid; place-items:center;
  text-align:center; line-height:1; font-size:.72rem; transform:rotate(8deg);
  font-family:var(--ff-comic); -webkit-text-stroke:.3px var(--ink);
}

/* ticker */
.ticker{
  position:relative; z-index:5; border-top:5px solid var(--ink); border-bottom:5px solid var(--ink);
  background:var(--gold); overflow:hidden; padding:.5rem 0; margin-top:auto;
}
.ticker__track{ display:flex; gap:2.5rem; white-space:nowrap; width:max-content; animation:scroll-x 28s linear infinite; }
.ticker__track span{ font-family:var(--ff-comic); font-size:1.2rem; letter-spacing:.05em; color:var(--ink); }
@keyframes scroll-x{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================================================
   CAPTION BREAK
   ========================================================= */
.break{ padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2rem); display:flex; justify-content:center; }
.caption-box{
  position:relative; max-width:820px; background:var(--gold); color:var(--ink);
  border:4px solid var(--ink); box-shadow:var(--shadow-hard); padding:1.6rem 1.8rem;
  transform:rotate(-1deg);
}
.caption-box__tag{
  position:absolute; top:-.95em; left:1.2rem; background:var(--red); color:var(--cream);
  font-family:var(--ff-comic); letter-spacing:.05em; padding:.12em .7em;
  border:2.5px solid var(--ink); font-size:1rem; -webkit-text-stroke:.3px var(--ink);
}
.caption-box p{ font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:700; }
.caption-box strong{ color:var(--red-deep); }

/* =========================================================
   GRID HELPERS
   ========================================================= */
section{ position:relative; }
.villains{ padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2.4rem); }
.grid{ max-width:var(--maxw); margin:0 auto; display:grid; gap:1.6rem; }
.grid--villains{ grid-template-columns:repeat(3,1fr); }

/* villain cards */
.vcard{
  position:relative; background:var(--cream); border:4px solid var(--ink);
  box-shadow:var(--shadow-hard); padding:1.5rem 1.4rem 1.4rem;
  --rest:rotate(var(--tilt,0deg)); transform:rotate(var(--tilt,0deg));
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.vcard::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(207,68,52,.5) 1px, transparent 1.4px);
  background-size:8px 8px; opacity:.16; pointer-events:none;
}
.vcard:hover{ transform:rotate(0deg) translateY(-5px); box-shadow:12px 12px 0 var(--ink); }
.vcard h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.7rem; line-height:.95; color:var(--red-deep); -webkit-text-stroke:.5px var(--ink); margin-bottom:.55rem; }
.vcard p{ font-size:1rem; font-weight:500; margin-bottom:.5rem; }
.vcard__weak{ font-size:.92rem; color:var(--steel); border-top:2.5px dashed var(--ink); padding-top:.55rem; margin-top:.4rem; }
.vcard__weak b{ color:var(--ink); }
.vcard__pow{
  position:absolute; top:.7rem; right:.6rem; z-index:2;
  font-family:var(--ff-comic); font-size:1.3rem; color:var(--gold);
  -webkit-text-stroke:.5px var(--ink); text-shadow:2px 2px 0 var(--ink);
  transform:rotate(10deg) scale(.4); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.vcard:hover .vcard__pow{ transform:rotate(10deg) scale(1); opacity:1; }

/* =========================================================
   TRANSFORMATION
   ========================================================= */
.transform{
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem);
  background:
    linear-gradient(rgba(15,19,34,.92), rgba(15,19,34,.92)),
    radial-gradient(120% 100% at 50% 0, #2a3559, #0f1322);
  border-block:6px solid var(--ink);
}
.transform .title__accent{ color:var(--gold); text-shadow:5px 5px 0 var(--ink); }
.transform__panels{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:center; }
.tpanel{
  position:relative; width:min(100%,1080px); background:var(--cream); border:5px solid var(--ink);
  box-shadow:var(--shadow-hard); padding:1.2rem; --rest:rotate(-1deg); transform:rotate(-1deg);
}
.tpanel img{ width:100%; height:auto; }
.tpanel__label{
  position:absolute; z-index:2; top:.4rem; font-family:var(--ff-comic);
  font-size:1.05rem; padding:.12em .6em; border:2.5px solid var(--ink);
  -webkit-text-stroke:.3px var(--ink);
}
.tpanel__label--before{ left:.6rem; background:#9aa0ad; color:var(--ink); }
.tpanel__label--after{ right:.6rem; background:var(--gold); color:var(--ink); }

/* =========================================================
   MEET YOUR HERO
   ========================================================= */
.meet{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,7vw,6.5rem) clamp(1rem,4vw,2.4rem);
}
.meet__art{ position:relative; min-height:480px; display:flex; align-items:center; justify-content:center; }
.meet__cutout{ width:min(100%,440px); filter:drop-shadow(12px 16px 0 rgba(0,0,0,.22)); position:relative; z-index:2; }
.cover-prop{
  position:absolute; top:2%; right:-2%; width:42%; z-index:1; transform:rotate(6deg);
  border:5px solid var(--ink); box-shadow:var(--shadow-hard); background:var(--ink);
}
.cover-prop img{ width:100%; }
.meet__list{ list-style:none; margin-top:1.4rem; display:grid; gap:.9rem; }
.meet__list li{ display:flex; gap:.85rem; align-items:flex-start; font-size:1.04rem; }
.meet__list li span{
  flex:0 0 auto; width:2.4rem; height:2.4rem; display:grid; place-items:center;
  background:var(--gold); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  font-size:1.2rem; transform:rotate(-3deg);
}
.meet__list li:nth-child(even) span{ background:var(--red); transform:rotate(3deg); }
.meet__list b{ color:var(--ink); }

/* =========================================================
   POWERS
   ========================================================= */
.powers{
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem);
  background:
    linear-gradient(rgba(23,28,47,.95), rgba(15,19,34,.97)),
    radial-gradient(100% 80% at 80% 10%, #36406a, #0f1322);
  border-block:6px solid var(--ink); position:relative; overflow:hidden;
}
.grid--powers{ grid-template-columns:repeat(4,1fr); }
.pcard{
  position:relative; background:var(--cream); border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink); padding:1.3rem 1.2rem 1.4rem;
  transition:transform .16s ease, box-shadow .16s ease;
}
.pcard:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:10px 12px 0 var(--ink); }
.pcard__icon{
  width:3.2rem; height:3.2rem; display:grid; place-items:center; margin-bottom:.8rem;
  background:var(--blue-pop); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-4deg);
}
.pcard:nth-child(3n) .pcard__icon{ background:var(--red); }
.pcard:nth-child(3n+1) .pcard__icon{ background:var(--gold); }
.pcard__icon svg{ width:1.9rem; height:1.9rem; stroke:var(--cream); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pcard:nth-child(3n+1) .pcard__icon svg{ stroke:var(--ink); }
.pcard h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.32rem; line-height:.96; margin-bottom:.4rem; -webkit-text-stroke:.3px var(--ink); }
.pcard p{ font-size:.94rem; font-weight:500; color:var(--ink-soft); }
.pcard__lvl{ position:absolute; top:.6rem; right:.7rem; font-family:var(--ff-comic); color:var(--red); font-size:.95rem; letter-spacing:.03em; }

/* =========================================================
   VS / WHAT THIS ISN'T
   ========================================================= */
.vs{ padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem); }
.vs__board{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
.vs__side{ border:5px solid var(--ink); box-shadow:var(--shadow-hard); padding:1.8rem 1.6rem; }
.vs__side h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:clamp(1.4rem,3vw,2rem); margin-bottom:1rem; -webkit-text-stroke:.5px var(--ink); }
.vs__side ul{ list-style:none; display:grid; gap:.7rem; }
.vs__side li{ font-weight:600; padding-left:1.6rem; position:relative; }
.vs__side li::before{ position:absolute; left:0; font-family:var(--ff-comic); }
.vs__side--villain{ background:#2a2533; color:#e7e2d6; --rest:rotate(-1deg); transform:rotate(-1deg); }
.vs__side--villain h3{ color:var(--red); }
.vs__side--villain li::before{ content:"✗"; color:var(--red); }
.vs__side--villain em{ color:var(--gold); font-style:normal; }
.vs__side--hero{ background:var(--gold); color:var(--ink); --rest:rotate(1deg); transform:rotate(1deg); }
.vs__side--hero h3{ color:var(--red-deep); }
.vs__side--hero li::before{ content:"✦"; color:var(--red-deep); }
.vs__side--hero em{ color:var(--red-deep); font-style:normal; font-weight:800; }
.vs__burst{
  font-family:var(--ff-comic); font-size:clamp(2rem,5vw,3.4rem); color:var(--cream);
  background:var(--red); width:clamp(74px,12vw,118px); aspect-ratio:1; display:grid; place-items:center;
  -webkit-text-stroke:1px var(--ink); text-shadow:2px 2px 0 var(--ink);
  border:4px solid var(--ink);
  clip-path:polygon(50% 0,61% 22%,86% 12%,78% 38%,100% 50%,78% 62%,86% 88%,61% 78%,50% 100%,39% 78%,14% 88%,22% 62%,0 50%,22% 38%,14% 12%,39% 22%);
  animation:spinpulse 6s linear infinite;
}
@keyframes spinpulse{ 0%,100%{ transform:rotate(0) scale(1) } 50%{ transform:rotate(8deg) scale(1.06) } }

/* =========================================================
   LEAGUE / PROOF
   ========================================================= */
.league{
  padding:clamp(3.5rem,7vw,6rem) 0 0;
  background:
    linear-gradient(rgba(15,19,34,.94), rgba(15,19,34,.97)),
    radial-gradient(110% 90% at 20% 10%, #2c3760, #0f1322);
  border-top:6px solid var(--ink);
}
.league__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.4rem); display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.league__stats{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.8rem; }
.stat{ background:var(--cream); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:.7rem 1.1rem; min-width:120px; transform:rotate(-1.5deg); }
.stat:nth-child(even){ transform:rotate(1.5deg); background:var(--gold); }
.stat__num{ display:block; font-family:var(--ff-display); font-size:clamp(2rem,4vw,2.8rem); line-height:1; color:var(--red-deep); }
.stat__label{ font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.league__art img{ width:100%; filter:drop-shadow(14px 16px 0 rgba(0,0,0,.4)); }

/* ===== the lineup: cutout straddling two backgrounds, rises in on scroll ===== */
.lineup{
  position:relative; overflow:hidden; isolation:isolate;
  background:#0f1322; border-bottom:6px solid var(--ink);
}
.lineup__band{
  position:absolute; left:0; right:0; bottom:0; height:44%;
  background:var(--gold); border-top:6px solid var(--ink); z-index:0;
}
.lineup__band::after{
  content:""; position:absolute; inset:0; opacity:.13; pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.6px);
  background-size:14px 14px;
}
.lineup__inner{
  position:relative; z-index:1; max-width:1200px; margin:0 auto;
  padding:clamp(1.8rem,4.5vw,3.2rem) clamp(1rem,4vw,2rem) clamp(3rem,8vw,6.5rem); text-align:center;
}
.lineup__kicker{
  display:inline-block; font-family:var(--ff-comic); letter-spacing:.05em;
  font-size:clamp(1.05rem,2.6vw,1.5rem); color:var(--gold); -webkit-text-stroke:.5px var(--ink);
  margin-bottom:clamp(.5rem,1.8vw,1rem);
}
.lineup__art img{
  display:block; width:min(100%,1040px); margin:0 auto;
  filter:drop-shadow(12px 15px 0 rgba(0,0,0,.4));
}
/* stronger "rise out of the band" entrance, just for the lineup */
.lineup__art.reveal{ transform:translateY(90px); transition-duration:.85s; }
.lineup__art.reveal.in{ transform:var(--rest,none); }

/* =========================================================
   RECRUIT / FINAL CTA
   ========================================================= */
.recruit{
  position:relative; padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,2.4rem); text-align:center;
  background:radial-gradient(120% 100% at 50% 30%, #d44a38, var(--red-deep) 60%, #7a221c);
  border-top:6px solid var(--ink); overflow:hidden;
}
.recruit__bg{ position:absolute; inset:0; }
.recruit__inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.recruit__title{ font-family:var(--ff-display); text-transform:uppercase; line-height:.85; font-size:clamp(2.8rem,9vw,6rem); color:var(--cream); -webkit-text-stroke:2px var(--ink); text-shadow:6px 6px 0 var(--ink); }
.recruit__title span{ color:var(--gold); text-shadow:6px 6px 0 var(--ink); }
.recruit__sub{ color:#fff4ec; font-size:clamp(1.05rem,2vw,1.3rem); font-weight:600; max-width:42ch; margin:1rem auto 1.8rem; }
.recruit__form{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.recruit__form input{
  font-family:var(--ff-body); font-size:1rem; font-weight:600; padding:.85em 1.1em;
  border:3px solid var(--ink); background:var(--cream); color:var(--ink);
  box-shadow:var(--shadow-hard-sm); min-width:230px; flex:1 1 230px; max-width:300px;
}
.recruit__form input::placeholder{ color:#8a8170; }
.recruit__form .btn{ flex:0 0 auto; }
.recruit__fine{ margin-top:1.3rem; color:#ffeae2; font-size:.92rem; font-weight:500; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--cream); padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.4rem); }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; }
.footer__brand{ display:flex; align-items:center; gap:.5rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer__links a{ font-weight:700; color:#d9d2c2; transition:color .15s; }
.footer__links a:hover{ color:var(--gold); }
.footer__indicia{ font-size:.82rem; color:#8b8576; line-height:1.7; letter-spacing:.02em; }

/* =========================================================
   DEMO / IMESSAGE
   ========================================================= */
.demo{
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem);
  background:
    linear-gradient(rgba(15,19,34,.95), rgba(23,28,47,.97)),
    radial-gradient(100% 80% at 15% 10%, #313c66, #0f1322);
  border-block:6px solid var(--ink);
}
.demo .title__accent{ color:var(--gold); }
.demo__h{
  font-family:var(--ff-display); font-weight:400; line-height:.92; color:var(--cream);
  font-size:clamp(1.9rem,4.2vw,3rem); letter-spacing:.01em; text-transform:uppercase;
  margin:0 0 .7rem; text-shadow:4px 4px 0 var(--ink);
}

/* spam honeypot — kept out of view and the a11y tree */
.hp-field{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; opacity:0; pointer-events:none; }

/* feature rows (alternating) */
.feature{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(1.6rem,4vw,4rem); max-width:74rem; margin:clamp(2.6rem,6vw,5rem) auto 0;
}
.feature--rev .feature__media{ order:2; }
.feature__media{ display:flex; justify-content:center; min-width:0; }
.feature__copy{ max-width:34rem; }
.feature__tag{
  display:inline-block; font-family:var(--ff-comic); letter-spacing:.05em; font-size:1rem;
  color:var(--ink); background:var(--gold); border:2.5px solid var(--ink);
  padding:.1em .7em; box-shadow:3px 3px 0 var(--ink); margin-bottom:.8rem; transform:rotate(-1.5deg);
}
.feature__lede{ color:#cfd6e6; font-size:1.05rem; line-height:1.55; margin:0 0 .4rem; }

/* media frame shared by calendar / crm / report */
.cal, .crm, .report{
  width:min(100%,440px); background:#0f1426; border:5px solid var(--ink); border-radius:18px;
  box-shadow:14px 16px 0 rgba(0,0,0,.45); overflow:hidden;
}

/* ---- calendar (animated grid with shuffling blocks) ---- */
.cal__top{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; background:#1b2138; border-bottom:3px solid var(--ink); }
.cal__month{ font-family:var(--ff-comic); letter-spacing:.03em; color:var(--cream); font-size:1.02rem; }
.cal__sync, .crm__live{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; color:#bfe6c4; white-space:nowrap; }
.cal__sync i, .crm__live i{ width:.5em; height:.5em; border-radius:50%; background:#34d058; animation:livepulse 1.8s ease-out infinite; }
.cal__days{ display:grid; grid-template-columns:repeat(6,1fr); padding:.45rem .5rem .15rem; }
.cal__days span{ text-align:center; font-size:.64rem; font-weight:800; letter-spacing:.06em; color:#8b93ad; }
.cal__grid{
  position:relative; height:280px; margin:.15rem .5rem .6rem; border-radius:8px;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(20% - 1px), #20263c calc(20% - 1px), #20263c 20%),
    repeating-linear-gradient(to right, transparent 0, transparent calc(16.666% - 1px), #1a2036 calc(16.666% - 1px), #1a2036 16.666%);
}
.cal__ev{
  position:absolute; border:2px solid var(--ink); border-radius:7px; padding:.18rem .32rem;
  font-size:.62rem; font-weight:800; line-height:1.12; color:#0c0f1a; overflow:hidden;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
  transition:left .7s cubic-bezier(.45,.05,.2,1), top .7s cubic-bezier(.45,.05,.2,1), width .7s, height .7s, opacity .4s ease;
}
.cal__ev--show{ background:#5b8def; color:#fff; }
.cal__ev--call{ background:var(--gold); }
.cal__ev--open{ background:#9a7bd1; color:#fff; }
.cal__ev--close{ background:#3ec46d; }
.cal__ev--buffer{ background:repeating-linear-gradient(45deg,#cdd3e0,#cdd3e0 4px,#aeb6c8 4px,#aeb6c8 8px); }

/* ---- crm pipeline board (animated, cards glide between stages) ---- */
.crm__bar{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; background:#1b2138; border-bottom:3px solid var(--ink); }
.crm__logo{ font-family:var(--ff-comic); letter-spacing:.03em; color:var(--cream); font-size:1.02rem; }
.crm__board{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:.6rem .5rem .8rem; height:300px; align-content:start; }
.crm__col{ display:flex; flex-direction:column; min-width:0; }
.crm__h{ font-size:.56rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#9aa3bd; padding:0 .15rem .4rem; display:flex; justify-content:space-between; gap:.2rem; }
.crm__h b{ color:var(--gold); }
.crm__list{ display:flex; flex-direction:column; gap:.35rem; min-height:1px; }
.crm__card{
  background:#f4f0e3; border:2px solid var(--ink); border-radius:8px; padding:.3rem .4rem;
  box-shadow:2px 2px 0 rgba(0,0,0,.4); will-change:transform;
}
.crm__card.is-hot{ box-shadow:2px 2px 0 var(--red); }
.crm__who{ display:flex; align-items:center; gap:.3rem; }
.crm__ava{ width:16px; height:16px; border-radius:50%; background:var(--blue-pop); color:#fff; font-size:.5rem; font-weight:800; display:grid; place-items:center; flex:0 0 auto; }
.crm__nm{ font-size:.6rem; font-weight:800; color:var(--ink); line-height:1.05; overflow:hidden; }
.crm__flame{ margin-left:auto; font-size:.6rem; }
.crm__sub{ font-size:.54rem; color:#5b6377; margin-top:.12rem; }

/* ---- report builder ---- */
.report__doc{ background:#f6f2e6; margin:.7rem; border:2.5px solid var(--ink); border-radius:8px; padding:.7rem; box-shadow:4px 4px 0 rgba(0,0,0,.4); }
.report__head{ display:flex; align-items:center; gap:.5rem; border-bottom:2px solid #d9d2bd; padding-bottom:.5rem; }
.report__brand{ font-family:var(--ff-comic); background:var(--red); color:#fff; border:2px solid var(--ink); border-radius:6px; padding:.05em .45em; font-size:.95rem; flex:0 0 auto; }
.report__head strong{ display:block; font-size:.8rem; color:var(--ink); line-height:1.12; }
.report__head small{ font-size:.62rem; color:#6b7184; }
.report__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:.6rem 0; }
.rstat{ background:#fff; border:2px solid var(--ink); border-radius:7px; padding:.3rem; text-align:center; }
.rstat b{ display:block; font-family:var(--ff-display); font-size:1.1rem; color:var(--ink); line-height:1; }
.rstat span{ font-size:.54rem; font-weight:700; color:#6b7184; }
.report__chart{ display:flex; align-items:flex-end; gap:.3rem; height:64px; padding:.2rem .1rem 0; border-bottom:2px solid #d9d2bd; }
.report__bar{ flex:1; background:var(--blue-pop); border:2px solid var(--ink); border-bottom:none; border-radius:4px 4px 0 0; transform:scaleY(0); transform-origin:bottom; transition:transform .7s cubic-bezier(.3,.7,.3,1); }
.report.is-built .report__bar{ transform:scaleY(1); }
.report__lines{ display:grid; gap:.3rem; margin-top:.5rem; }
.report__lines i{ height:6px; background:#e0dac6; border-radius:3px; width:0; transition:width .6s ease .2s; }
.report.is-built .report__lines i:nth-child(1){ width:96%; }
.report.is-built .report__lines i:nth-child(2){ width:78%; }
.report.is-built .report__lines i:nth-child(3){ width:88%; }
.report__send{
  margin:0 .7rem .7rem; text-align:center; font-family:var(--ff-comic); letter-spacing:.02em;
  background:var(--gold); color:var(--ink); border:2.5px solid var(--ink); border-radius:8px;
  padding:.3em; font-size:.85rem; box-shadow:3px 3px 0 var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;
}
.report.is-sent .report__send{ opacity:1; transform:none; }

/* =========================================================
   TRY IT LIVE — interactive AI chat widget
   ========================================================= */
.try{
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem);
  background:
    linear-gradient(rgba(15,19,34,.96), rgba(23,28,47,.97)),
    radial-gradient(100% 80% at 80% 0, #313c66, #0f1322);
  border-block:6px solid var(--ink);
}
.try__stage{ display:grid; grid-template-columns:minmax(0,410px) minmax(0,330px); justify-content:center; align-items:start; gap:1.4rem; }
.phone--try{ width:100%; max-width:410px; display:flex; flex-direction:column; }

/* live "work" dashboard panel */
.work{ width:100%; max-width:330px; background:#0f1426; border:4px solid var(--ink); border-radius:16px; box-shadow:10px 12px 0 rgba(0,0,0,.4); overflow:hidden; }
.work__head{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; background:#1b2138; border-bottom:3px solid var(--ink); font-family:var(--ff-comic); letter-spacing:.02em; color:var(--cream); font-size:1.02rem; }
.work__count{ font-family:var(--ff-body); font-weight:800; font-size:.72rem; color:var(--gold); white-space:nowrap; }
.work__card{ padding:.7rem .8rem; border-bottom:2px solid #20263c; }
.work__card:last-child{ border-bottom:none; }
.work__label{ font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8b93ad; margin-bottom:.5rem; }
.wrow{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.82rem; padding:.18rem .25rem; border-radius:6px; }
.wrow span{ color:#8b93ad; }
.wrow b{ color:var(--cream); font-weight:700; text-align:right; min-width:0; }
.wrow.flash{ animation:wflash 1.1s ease; }
@keyframes wflash{ 0%{ background:rgba(230,178,62,.32) } 100%{ background:transparent } }
.wstage{ font-size:.66rem; font-weight:800; padding:.1em .6em; border-radius:20px; border:2px solid var(--ink); }
.wstage.is-new{ background:#2a3150; color:#cfd6e6; }
.wstage.is-nurturing{ background:var(--blue-pop); color:#fff; }
.wstage.is-hot{ background:var(--red); color:#fff; }
.wstage.is-closing{ background:#3ec46d; color:#0c0f1a; }
.work__agenda{ display:flex; flex-direction:column; gap:.4rem; }
.work__empty{ font-size:.78rem; color:#6b7488; font-style:italic; }
.agenda-item{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:#e6eaf5; animation:msgIn .3s ease both; }
.agenda-item i{ flex:0 0 auto; width:1.9rem; height:1.9rem; display:grid; place-items:center; font-style:normal; font-size:.62rem; font-weight:800; color:var(--ink); background:var(--gold); border:2px solid var(--ink); border-radius:6px; line-height:1; text-align:center; }
.agenda-item b{ color:#fff; } .agenda-item small{ color:#8b93ad; display:block; }

/* extra in-chat card variants for the live demo */
.chat-card--comps .card__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; }
.card__stats > div{ background:#fff; border:2px solid var(--ink); border-radius:7px; padding:.25rem; text-align:center; }
.card__stats b{ display:block; font-family:var(--ff-display); font-size:1rem; color:var(--ink); line-height:1; }
.card__stats span{ font-size:.54rem; font-weight:700; color:#6b7184; }
.card__listing{ display:flex; gap:.6rem; align-items:center; }
.card__thumb{ flex:0 0 auto; width:2.6rem; height:2.6rem; display:grid; place-items:center; font-size:1.3rem; background:#e7e3d4; border:2px solid var(--ink); border-radius:8px; }
.card__lmeta{ min-width:0; } .card__lmeta strong{ display:block; font-size:.86rem; }
.card__lmeta small{ display:block; font-size:.74rem; color:#5b6377; font-weight:700; }
.card__lmeta em{ font-size:.72rem; color:#6b7184; font-style:italic; }
.lc-chat{ height:min(52vh,440px); overflow-y:auto; scrollbar-width:thin; }
.lc-chat::-webkit-scrollbar{ width:6px; }
.lc-chat::-webkit-scrollbar-thumb{ background:#2a3150; border-radius:3px; }

/* messages: visitor (lead) = right; Agent Hero = left */
.lc-msg{ max-width:82%; padding:.55rem .8rem; border-radius:18px; font-size:.94rem; line-height:1.35; animation:msgIn .28s ease both; word-wrap:break-word; }
.lc-msg--ai{ align-self:flex-start; background:#262b3b; color:#eef1f8; border-bottom-left-radius:5px; }
.lc-msg--me{ align-self:flex-end; background:#34c759; color:#fff; border-bottom-right-radius:5px; }

/* suggestion chips */
.lc-suggest{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.4rem .6rem 0; justify-content:center; }
.lc-chip{
  font-size:.8rem; font-weight:700; color:var(--cream); background:#1b2138;
  border:2px solid var(--ink); border-radius:20px; padding:.28em .7em; cursor:pointer;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.lc-chip:hover{ transform:translateY(-1px); background:var(--gold); color:var(--ink); }
.lc-chip:disabled{ opacity:.4; cursor:default; }

/* input bar */
.lc-input{ display:flex; gap:.5rem; padding:.6rem; border-top:2px solid #20263c; margin-top:.4rem; }
.lc-input input{
  flex:1; min-width:0; background:#11152a; border:2px solid #2a3150; border-radius:20px;
  padding:.55rem .9rem; color:var(--cream); font-size:.95rem; font-family:var(--ff-body);
}
.lc-input input:focus{ outline:none; border-color:var(--gold); }
.lc-input button{
  flex:0 0 auto; width:2.6rem; border:2px solid var(--ink); border-radius:50%; cursor:pointer;
  background:var(--red); color:#fff; font-size:1rem; box-shadow:2px 2px 0 var(--ink);
  transition:transform .1s ease, background .12s ease;
}
.lc-input button:hover{ background:var(--red-deep); }
.lc-input button:active{ transform:translate(2px,2px); box-shadow:none; }
.lc-input button:disabled{ opacity:.5; cursor:default; }

/* inline "that was your clone" CTA card */
.lc-cta{
  align-self:center; text-align:center; max-width:92%; margin:.4rem 0 .1rem;
  background:var(--gold); color:var(--ink); border:2.5px solid var(--ink); border-radius:12px;
  padding:.55rem .7rem; box-shadow:3px 3px 0 var(--ink); font-weight:700; font-size:.9rem;
  animation:msgIn .3s ease both;
}
.lc-cta a{ display:inline-block; margin-top:.35rem; font-family:var(--ff-comic); letter-spacing:.03em;
  background:var(--red); color:var(--cream); border:2px solid var(--ink); border-radius:8px;
  padding:.2em .8em; text-decoration:none; box-shadow:2px 2px 0 var(--ink); }
.try__note{ text-align:center; color:#9aa3bd; font-size:.85rem; }
.try__note a{ color:var(--gold); font-weight:700; }

/* in-chat action cards */
.chat-card{
  align-self:flex-start; max-width:90%; background:#f4f0e3; color:var(--ink);
  border:2.5px solid var(--ink); border-radius:14px; padding:.6rem .7rem;
  box-shadow:3px 3px 0 rgba(0,0,0,.5); font-size:.86rem; line-height:1.35; display:grid; gap:.4rem;
}
.card__head{ font-family:var(--ff-comic); letter-spacing:.02em; font-size:1.02rem; display:flex; align-items:center; gap:.4rem; }
.card__ico{ font-size:1.05rem; }
.card__row{ font-size:.88rem; }
.card__muted{ color:#5b6377; font-size:.8rem; }
.card__muted s{ opacity:.65; }
.card__tag{ font-weight:800; color:#1f7a3d; font-size:.8rem; }
.card__chips{ display:flex; flex-wrap:wrap; gap:.32rem; }
.card__chips span{ background:#fff; border:2px solid var(--ink); border-radius:20px; padding:.05em .55em; font-size:.76rem; font-weight:700; }
.card__chips .hot{ background:var(--red); color:#fff; }
.card__file{ display:flex; align-items:center; gap:.6rem; }
.card__pdf{ flex:0 0 auto; font-family:var(--ff-comic); background:var(--red); color:#fff; border:2px solid var(--ink); border-radius:6px; padding:.18em .5em; font-size:.82rem; letter-spacing:.04em; }
.card__fmeta{ display:flex; flex-direction:column; line-height:1.22; min-width:0; }
.card__fmeta strong{ font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__fmeta small{ color:#5b6377; font-size:.74rem; }
.card__dl{ flex:0 0 auto; margin-left:auto; font-size:1.15rem; color:var(--blue-pop); }

.demo__beats{ list-style:none; margin:1.4rem 0 1.1rem; display:grid; gap:.6rem; }
.demo__beats li{ color:#dfe4f1; font-weight:600; display:flex; align-items:center; gap:.7rem; }
.demo__beats li span{
  font-family:var(--ff-comic); letter-spacing:.04em; font-size:.85rem; color:var(--ink);
  background:var(--gold); border:2.5px solid var(--ink); padding:.05em .5em; min-width:64px; text-align:center;
}
.demo__wake{ font-family:var(--ff-comic); color:var(--gold); font-size:1.5rem; letter-spacing:.03em; -webkit-text-stroke:.4px var(--ink); }

.demo__phone{ display:flex; justify-content:center; }
.phone{
  width:min(100%,360px); background:#0c0f1a; border:5px solid var(--ink); border-radius:34px;
  box-shadow:14px 16px 0 rgba(0,0,0,.45); padding:.5rem .5rem 1rem; position:relative; overflow:hidden;
}
.phone__notch{ width:42%; height:20px; background:var(--ink); border-radius:0 0 14px 14px; margin:0 auto .4rem; }
.phone__bar{ display:flex; align-items:center; gap:.6rem; padding:.4rem .7rem .7rem; border-bottom:2px solid #20263c; }
.phone__avatar{
  width:34px; height:34px; border-radius:50%; background:var(--red); color:var(--cream);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; border:2px solid var(--ink);
}
.phone__name{ color:#e9edf7; font-weight:700; font-size:.95rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone__name small{ color:#8b93ad; font-weight:600; }
.phone__bar--ai{ flex-wrap:nowrap; }
.phone__bar--ai .phone__live{ flex:0 0 auto; }
.phone__chat{ padding:.9rem .7rem .3rem; display:flex; flex-direction:column; gap:.5rem; }
.demo .phone__chat{ height:400px; overflow-y:auto; scrollbar-width:thin; }
.demo .phone__chat::-webkit-scrollbar{ width:6px; }
.demo .phone__chat::-webkit-scrollbar-thumb{ background:#2a3150; border-radius:3px; }
.chat__time{ text-align:center; color:#727b96; font-size:.72rem; font-weight:600; margin-bottom:.2rem; }
.bubble{ max-width:80%; padding:.55rem .8rem; border-radius:18px; font-size:.92rem; line-height:1.35; }
.bubble--in{ align-self:flex-start; background:#262b3b; color:#eef1f8; border-bottom-left-radius:5px; }
.bubble--out{ align-self:flex-end; background:#34c759; color:#fff; border-bottom-right-radius:5px; }
.chat__sig{ align-self:center; color:#7d86a1; font-size:.74rem; font-style:italic; margin-top:.5rem; text-align:center; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how{ padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem); }
.how__steps{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.step{
  position:relative; background:var(--cream); border:4px solid var(--ink); box-shadow:var(--shadow-hard);
  padding:2.4rem 1.5rem 1.6rem; margin-top:1.4rem;
}
.step__num{
  position:absolute; top:-1.4rem; left:1.3rem; width:3.2rem; height:3.2rem; display:grid; place-items:center;
  font-family:var(--ff-display); font-size:1.8rem; color:var(--cream); background:var(--red);
  border:3.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transform:rotate(-5deg);
  animation:bobTilt 3.8s ease-in-out infinite;
}
@keyframes bobTilt{ 0%,100%{ transform:rotate(-5deg) translateY(0) } 50%{ transform:rotate(-5deg) translateY(-6px) } }
.step:nth-child(2) .step__num{ background:var(--blue-pop); animation-delay:.5s; }
.step:nth-child(3) .step__num{ background:var(--gold); color:var(--ink); animation-delay:1s; }
.step h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; line-height:.98; margin-bottom:.55rem; -webkit-text-stroke:.4px var(--ink); }
.step p{ font-size:1rem; font-weight:500; color:var(--ink-soft); }

.integrations{ max-width:980px; margin:clamp(2.5rem,5vw,3.5rem) auto 0; text-align:center; }
.integrations__label{ font-family:var(--ff-comic); letter-spacing:.04em; font-size:1.2rem; color:var(--red); -webkit-text-stroke:.3px var(--ink); margin-bottom:1rem; }
.integrations__list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.integrations__list li{
  font-weight:700; font-size:.92rem; background:var(--cream); color:var(--ink);
  border:2.5px solid var(--ink); padding:.4em .9em; box-shadow:3px 3px 0 var(--ink);
}
.integrations__list li:nth-child(3n){ background:var(--gold); }
.integrations__note{ margin-top:1rem; font-size:.85rem; color:var(--steel); font-style:italic; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing{
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem);
  background:
    linear-gradient(rgba(23,28,47,.96), rgba(15,19,34,.97)),
    radial-gradient(100% 80% at 85% 10%, #333e69, #0f1322);
  border-block:6px solid var(--ink);
}
.pricing .lede--light em{ color:var(--gold); font-style:normal; font-weight:700; }
.plans{ margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center; gap:1.8rem; align-items:stretch; }
.plan{
  position:relative; background:var(--cream); border:4px solid var(--ink); box-shadow:var(--shadow-hard);
  padding:1.8rem 1.5rem; display:flex; flex-direction:column;
}
.plan--featured{ background:var(--gold); --rest:scale(1.03); transform:scale(1.03); z-index:2; }
.plan__flag{
  position:absolute; top:-1rem; right:1.2rem; font-family:var(--ff-comic); letter-spacing:.04em;
  background:var(--red); color:var(--cream); border:2.5px solid var(--ink); padding:.15em .8em;
  box-shadow:3px 3px 0 var(--ink); -webkit-text-stroke:.3px var(--ink); transform:rotate(3deg);
}
.plan__name{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.7rem; -webkit-text-stroke:.4px var(--ink); }
.plan__price{ font-family:var(--ff-display); font-size:1.6rem; margin:.2rem 0 .2rem; color:var(--red-deep); }
.plan__price span{ font-size:3rem; line-height:1; }
.plan__star{ font-size:1.1rem; font-family:var(--ff-body); font-weight:800; color:var(--red-deep); vertical-align:super; margin-left:.12em; }

/* pricing footnotes (startup fee + custom-tailored) */
.plans__note{ max-width:620px; margin:1.6rem auto 0; text-align:center; }
.plans__fee{ color:#aeb6c8; font-size:.9rem; font-weight:600; }
.plans__fee .star{ color:var(--gold); font-weight:800; }
.plans__tailor{ margin-top:.45rem; color:var(--cream); font-size:1.05rem; font-weight:600; }
.plans__tailor strong{ color:var(--gold); }
.plan--featured .plan__price{ color:var(--ink); }
.plan__for{ font-weight:600; color:var(--ink-soft); margin-bottom:1rem; min-height:2.6em; }
.plan__feats{ list-style:none; display:grid; gap:.55rem; margin-bottom:1.4rem; flex:1; }
.plan__feats li{ position:relative; padding-left:1.6rem; font-weight:500; }
.plan__feats li::before{ content:"✦"; position:absolute; left:0; color:var(--red); font-family:var(--ff-comic); }
.plan--featured .plan__feats li::before{ color:var(--red-deep); }
.btn--block{ display:block; text-align:center; width:100%; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.quotes{ padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem); }
.quotes__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.quote{
  position:relative; background:var(--cream); border:4px solid var(--ink); box-shadow:var(--shadow-hard);
  padding:1.6rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.9rem;
}
.quote::after{
  content:""; position:absolute; bottom:-18px; left:2rem; width:26px; height:26px;
  background:var(--cream); border-right:4px solid var(--ink); border-bottom:4px solid var(--ink);
  transform:rotate(45deg);
}
.quote blockquote{ font-size:1.05rem; font-weight:600; line-height:1.45; }
.quote figcaption{ display:flex; flex-direction:column; }
.quote figcaption b{ color:var(--ink); }
.quote figcaption span{ font-size:.86rem; color:var(--steel); font-weight:600; }
.quote__stat{
  align-self:flex-start; font-family:var(--ff-comic); letter-spacing:.03em; color:var(--cream);
  background:var(--red); border:2.5px solid var(--ink); padding:.1em .7em; box-shadow:3px 3px 0 var(--ink);
  -webkit-text-stroke:.3px var(--ink);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.4rem);
  background:linear-gradient(rgba(15,19,34,.96), rgba(23,28,47,.97)), radial-gradient(100% 80% at 50% 0, #2c365b, #0f1322);
  border-top:6px solid var(--ink);
}
.faq__list{ max-width:820px; margin:0 auto; display:grid; gap:.9rem; }
.faq details{
  background:var(--cream); border:3.5px solid var(--ink); box-shadow:var(--shadow-hard-sm);
  padding:0 1.2rem; transition:box-shadow .15s ease;
}
.faq details[open]{ box-shadow:8px 8px 0 var(--ink); }
.faq summary{
  list-style:none; cursor:pointer; font-family:var(--ff-display); text-transform:uppercase;
  font-size:1.15rem; letter-spacing:.01em; padding:1rem 2rem 1rem 0; position:relative; -webkit-text-stroke:.3px var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.1rem; top:.7rem; font-size:1.7rem; color:var(--red); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 1.1rem; font-weight:500; color:var(--ink-soft); max-width:70ch; }

/* =========================================================
   RECRUIT — form states & alt CTAs
   ========================================================= */
.recruit__status{ min-height:1.4em; margin-top:.9rem; font-weight:700; color:#fff4ec; }
.recruit__status--ok{ color:#fff; background:rgba(0,0,0,.18); display:inline-block; padding:.4em .9em; border:2.5px solid var(--ink); }
.recruit__status--err{ color:#fff0d8; }
.recruit__alt{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem; margin-top:1.2rem; }
.recruit__alt span{ color:#ffeae2; font-weight:700; }
.recruit__altbtn{
  font-weight:800; color:var(--ink); background:var(--cream); border:2.5px solid var(--ink);
  padding:.45em 1em; box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
}
.recruit__altbtn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--gold); }

.footer__links--sub a{ font-size:.85rem; color:#a59f8f; }
.footer__disclaimer{ display:inline-block; margin-top:.6rem; color:#6f6a5d; font-size:.74rem; max-width:60ch; }

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal{ max-width:780px; margin:0 auto; padding:7rem 1.4rem 4rem; }
.legal__back{ font-weight:700; color:var(--steel); }
.legal h1{ font-family:var(--ff-display); text-transform:uppercase; font-size:clamp(2rem,6vw,3.4rem); margin:.6rem 0 .2rem; -webkit-text-stroke:1px var(--ink); text-shadow:4px 4px 0 var(--gold); }
.legal .updated{ color:var(--steel); font-weight:600; margin-bottom:.5rem; }
.legal .notice{ background:var(--gold); border:3px solid var(--ink); box-shadow:var(--shadow-hard-sm); padding:1rem 1.2rem; font-weight:700; margin:1.2rem 0 2rem; }
.legal h2{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.4rem; margin:2rem 0 .5rem; -webkit-text-stroke:.3px var(--ink); }
.legal p, .legal li{ font-weight:500; margin-bottom:.7rem; }
.legal ul{ padding-left:1.3rem; }

/* ===== content pages (about, blog, thanks) ===== */
.page{ max-width:900px; margin:0 auto; padding:7rem clamp(1rem,4vw,1.6rem) 1rem; }
.page__head{ text-align:center; margin-bottom:2rem; }
.page__head .kicker{ justify-content:center; }
.prose{ max-width:720px; margin:0 auto; }
.prose h2{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; margin:2rem 0 .6rem; -webkit-text-stroke:.3px var(--ink); }
.prose h3{ font-weight:800; font-size:1.05rem; margin:1.4rem 0 .3rem; }
.prose p, .prose li{ font-weight:500; margin-bottom:.85rem; line-height:1.65; }
.prose ul{ padding-left:1.3rem; margin-bottom:1rem; }
.prose a{ color:var(--red-deep); font-weight:700; }
.prose blockquote{ border-left:4px solid var(--gold); background:rgba(230,178,62,.14); padding:.8rem 1rem; margin:1.2rem 0; font-weight:600; }
.post__meta{ text-align:center; color:var(--steel); font-weight:700; font-size:.85rem; margin-bottom:1.6rem; }

.bloglist{ max-width:820px; margin:0 auto; display:grid; gap:1.2rem; }
.postcard{ display:block; background:var(--cream); border:4px solid var(--ink); box-shadow:var(--shadow-hard-sm); padding:1.3rem 1.5rem; text-decoration:none; color:var(--ink); transition:transform .12s ease, box-shadow .12s ease; }
.postcard:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.postcard .meta{ font-size:.72rem; font-weight:800; color:var(--red); text-transform:uppercase; letter-spacing:.05em; }
.postcard h2{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; line-height:1; margin:.35rem 0 .4rem; -webkit-text-stroke:.2px var(--ink); }
.postcard p{ font-weight:500; margin:0; }
.page__cta{ text-align:center; margin:2.6rem 0 1rem; }
.page__note{ text-align:center; color:var(--steel); font-size:.85rem; margin-top:2rem; }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{ opacity:0; transform:translateY(34px) scale(.985); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); will-change:transform,opacity; }
/* settles to the element's resting transform (--rest) so decorative skews survive */
.reveal.in{ opacity:1; transform:var(--rest,none); }

/* entrance variants — transform-only (GPU-cheap, mobile-safe) */
.reveal--left{ transform:translateX(-56px); }
.reveal--right{ transform:translateX(56px); }
.reveal--up{ transform:translateY(60px); }
.reveal--zoom{ transform:scale(.84); }
.reveal--pop{ transform:scale(.7) rotate(-3deg); transition-timing-function:cubic-bezier(.34,1.56,.64,1); }
.reveal--rotate{ transform:rotate(-7deg) translateY(40px); }
.reveal--flip{ transform:perspective(700px) rotateX(28deg) translateY(34px); transform-origin:bottom; }

/* ambient (always-on) micro-motion for decorative bits */
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@keyframes pulseGlow{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.18); opacity:.65 } }
@keyframes wobble{ 0%,100%{ transform:rotate(-2deg) } 50%{ transform:rotate(2deg) } }
.anim-bob{ animation:bob 4.5s ease-in-out infinite; }
.anim-wobble{ animation:wobble 5s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1!important; transform:var(--rest,none)!important; transition:none; }
}

/* mobile: gentler reveal distances so nothing feels jumpy or causes overflow */
@media (max-width:680px){
  .reveal{ transform:translateY(22px); }
  .reveal--left{ transform:translateX(-26px); }
  .reveal--right{ transform:translateX(26px); }
  .reveal--up{ transform:translateY(34px); }
  .reveal--rotate{ transform:rotate(-5deg) translateY(24px); }
  .reveal--flip{ transform:translateY(24px); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .grid--powers{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 auto auto; top:0; right:0; height:100vh; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    background:var(--navy); padding:2rem; transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-8px 0 0 var(--ink);
  }
  .nav__links.open{ transform:translateX(0); }
  .nav__links a{ font-size:1.3rem; }
  .nav__toggle{ display:flex; z-index:101; }
  .nav{ background:rgba(20,17,28,.92); }

  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; }
  .hero__art{ order:1; min-height:auto; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; }
  .hero__cutout{ width:min(80%,360px); }
  .hero__cta,.hero__badges{ justify-content:center; }
  .hero__tag,.hero__sub{ margin-inline:auto; }
  .hero .phone--hero{ position:static; left:auto; bottom:auto; transform:rotate(-1.5deg); width:min(90%,330px); margin:0 auto; }
  .moon{ top:2%; right:8%; }

  .grid--villains{ grid-template-columns:1fr; }
  .transform__panels{ grid-template-columns:1fr; }
  .meet{ grid-template-columns:1fr; }
  .meet__art{ order:2; min-height:auto; }
  .meet__copy{ order:1; }
  .cover-prop{ display:none; }
  .vs__board{ grid-template-columns:1fr; }
  .vs__burst{ margin:-1.4rem auto; }
  .league__inner{ grid-template-columns:1fr; }

  .feature{ grid-template-columns:1fr; gap:1.6rem; }
  .feature--rev .feature__media{ order:0; }
  .feature__media{ order:1; } .feature__copy{ order:2; max-width:none; }
  .demo .phone__chat{ height:360px; }
  .try__stage{ grid-template-columns:1fr; justify-items:center; gap:1.2rem; }
  .work{ max-width:410px; }
  .how__steps{ grid-template-columns:1fr; gap:2.4rem; }
  .plans{ grid-template-columns:1fr; }
  .plan--featured{ transform:none; }
  .quotes__grid{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .how__steps{ grid-template-columns:1fr; gap:2.4rem; }
  .plans{ grid-template-columns:1fr; max-width:460px; }
  .plan--featured{ transform:none; }
  .quotes__grid{ grid-template-columns:1fr; max-width:560px; }
}
@media (max-width:560px){
  .grid--powers{ grid-template-columns:1fr; }
  .trade--price{ display:none; }
  .hero__badges li{ font-size:.82rem; }
  .title{ text-shadow:4px 4px 0 var(--gold); }
  /* keep SFX words inside the frame */
  .sfx--sold{ top:3%; left:2%; }
  .sfx--247{ bottom:14%; right:3%; }
  /* lighten the heavy comic shadows on small screens */
  .masthead__l1{ text-shadow:4px 4px 0 var(--red-deep); -webkit-text-stroke:1.5px var(--ink); }
  .masthead__l2{ text-shadow:4px 4px 0 var(--red); -webkit-text-stroke:1.8px var(--ink); }
  .recruit__title,.recruit__title span{ text-shadow:4px 4px 0 var(--ink); }
}