/* ============================================================
   System 05 · Pulse — personality layer over base.css
   Volt-yellow on black. Anton caps wherever a heading appears,
   hairline panels on black, a volt marquee with black type,
   square-ish corners, .35s snaps, hover flips to volt.
   ============================================================ */

/* ---- document + type scale ---- */
body{font-weight:400;line-height:1.55}
h1{font-size:clamp(48px,8.6vw,104px)}
h2{font-size:clamp(30px,5vw,58px)}
h3{font-size:clamp(19px,2.1vw,24px)}
h1,h2,h3,h4{overflow-wrap:break-word}
.reveal.in{animation-duration:.35s}

/* ---- primitives ---- */
.eyebrow{color:var(--volt);letter-spacing:.16em;font-size:11px}
.eyebrow::before{width:14px;height:2px;background:var(--volt);opacity:1}
.sec-head{max-width:720px}
.sec-head p{color:var(--muted);font-size:15.5px;max-width:52ch;text-wrap:pretty}
.sec-head.center{max-width:660px}

/* the section-title accent phrase: volt, moving */
.hx{--hx:linear-gradient(96deg,var(--accent-pale) 0%,var(--accent-light) 25%,var(--accent) 50%,var(--accent-light) 75%,var(--accent-pale) 100%)}
/* one loud volt sweep instead of the base mesh — the mesh falls off to
   transparent, which reads as black holes at Anton display sizes */
.grad{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:linear-gradient(96deg,var(--accent-pale) 0%,var(--accent-light) 22%,var(--accent) 52%,var(--accent-2) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

.btn{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:15px;padding:14px 26px;border-radius:2px;border-width:2px;transition:.14s}
.btn-lg{font-size:17px;padding:16px 32px}
.btn-sm{font-size:13px;padding:9px 16px}
.btn-primary{background:var(--volt);color:var(--black);border-color:var(--volt)}
.btn-primary:hover{background:var(--white);border-color:var(--white);color:var(--black);
  transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(var(--accent-rgb),.55)}
.btn-outline{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline:hover{background:transparent;color:var(--volt);border-color:var(--volt);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--white)}
.btn-ghost:hover{background:transparent;color:var(--volt);border-color:var(--volt);transform:translateY(-2px)}
.link-arrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--volt);border-bottom:1px solid rgba(var(--accent-rgb),.4);padding-bottom:3px}
.link-arrow:hover{color:var(--white);border-color:var(--white)}
.card{border-radius:2px;box-shadow:none}
.chip{border-radius:2px;border-color:var(--line-2);color:var(--volt);font-size:10.5px;letter-spacing:.14em;padding:7px 13px}
.hairline{background:var(--line-2)}

/* ============================================================
   01 · NAV — black bar, mono caps links, volt square mark
   ============================================================ */
.k-nav{background:rgba(11,11,15,.9);border-bottom:1px solid var(--line)}
.k-nav .in{height:62px}
.k-nav .brand{font-size:20px;letter-spacing:.02em}
.k-nav .brand .mark{width:11px;height:11px;border-radius:0;background:var(--volt)}
.k-nav .links{gap:0}
.k-nav .links a{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:400;color:var(--muted);padding:8px 11px;border-radius:0}
.k-nav .links a:hover,.k-nav .links a[aria-current]{color:var(--volt);background:transparent}
.k-nav .burger{border-radius:2px;border-color:var(--line-2)}
.k-nav .burger:hover{border-color:var(--volt)}
@media(max-width:860px){
  .k-nav .drawer a{font-family:var(--font-display);text-transform:uppercase;font-size:20px;letter-spacing:.02em;border-color:var(--line)}
  .k-nav .drawer a:hover{color:var(--volt)}
}

/* ============================================================
   02 · HERO — split, huge Anton, tilted drop card on the right
   ============================================================ */
.k-hero{padding:clamp(64px,8vw,96px) 0 clamp(52px,7vw,80px);border-bottom:1px solid var(--line)}
.k-hero h1{max-width:11ch;line-height:.9}
.k-hero .sub{max-width:46ch;font-size:16px;color:var(--muted);margin-top:22px}
.k-hero .cta{margin-top:32px;gap:12px}
.k-hero .chips{margin-top:24px}
.k-hero .blob{filter:blur(70px);opacity:.9;background:none}
@media(min-width:861px){.k-hero.split .wrap{grid-template-columns:1.18fr .82fr;gap:40px}}
.k-hero.split .visual{background:none;border:0;border-radius:0;min-height:0;overflow:visible;
  display:grid;place-items:center;padding:14px}

/* the DROP '26 product card, straight out of the original Pulse page */
.k-hero .drop{position:relative;width:100%;max-width:340px;background:var(--black-2);
  border:1px solid var(--line-2);border-radius:4px;padding:36px 26px 30px;text-align:center;
  transform:rotate(2deg);transition:.3s cubic-bezier(.22,1,.36,1)}
.k-hero .drop:hover{transform:rotate(0) scale(1.03);border-color:var(--volt);
  box-shadow:0 24px 60px -24px rgba(var(--accent-rgb),.4)}
.k-hero .drop .tk{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(40px,5.4vw,60px);
  line-height:.92;letter-spacing:.01em}
.k-hero .drop .meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--volt);margin-top:14px}
.k-hero .drop .badge{position:absolute;top:-12px;right:-12px;background:var(--volt);color:var(--black);
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:2px;transform:rotate(6deg)}
.k-hero .drop .stamp{display:inline-block;margin-top:18px;border:2px solid var(--volt);color:var(--volt);
  font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.04em;
  padding:5px 13px;border-radius:2px;transform:rotate(-3deg)}
@media(max-width:860px){
  .k-hero.split .wrap{gap:40px}
  .k-hero.split .visual{justify-items:start;padding:14px 14px 0 0}
  .k-hero .drop{max-width:300px;transform:rotate(-1.5deg)}
}

/* ============================================================
   03 · MARQUEE — volt bar, black Anton caps, never stops
   ============================================================ */
.k-marquee{background:var(--volt);border-block:0;border-top:1px solid var(--black);
  border-bottom:1px solid var(--black)}
.k-marquee{--band-gap:14px}
.k-marquee .item{font-family:var(--font-display);font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--black)}
.k-marquee .item::after{content:"/";color:rgba(11,11,15,.45)}
.k-marquee.logos .item{font-size:19px;color:var(--black)}

/* ============================================================
   04 · SERVICES — the drop line-up, product tiles on black
   ============================================================ */
.k-services{padding:clamp(56px,7vw,96px) 0}
.k-services .grid{gap:var(--card-gap,clamp(20px,2.1vw,30px))}
.k-services .item{background:var(--black-2);border:1px solid var(--line);border-radius:3px;padding:26px;
  box-shadow:none;transition:.18s;gap:10px}
.k-services .item:hover{border-color:var(--volt);transform:translateY(-4px);
  box-shadow:0 20px 44px -22px rgba(var(--accent-rgb),.35)}
.k-services .item .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--volt)}
.k-services .item h3{font-size:22px;line-height:1}
.k-services .item:hover h3{color:var(--volt)}
.k-services .item p{color:var(--muted);font-size:14px}

/* ============================================================
   05 · PROCESS — outlined Anton step numerals, volt rules
   ============================================================ */
.k-process{background:var(--black-2);border-block:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.k-process .step{border-top:1px solid var(--line-2);padding:26px 26px 30px 0}
.k-process .step::before{width:46px;height:3px;background:var(--volt)}
.k-process .step .num{font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px var(--volt);margin-bottom:14px}
.k-process .step h3{font-size:21px;margin-bottom:8px}
.k-process .step p{color:var(--muted);font-size:14px}

/* ============================================================
   06 · GALLERY — the product grid, black caps with volt prices
   ============================================================ */
.k-gallery{padding:clamp(56px,7vw,96px) 0}
.k-gallery .grid{gap:10px}
.k-gallery .tile{border-radius:3px;border-color:var(--line);transition:.18s}
.k-gallery .tile:hover{border-color:var(--volt);transform:translateY(-4px);
  box-shadow:0 20px 44px -22px rgba(var(--accent-rgb),.35)}
.k-gallery .tile .cap{background:var(--black);color:var(--volt);border:1px solid var(--volt);
  border-radius:2px;font-size:10.5px;letter-spacing:.1em;padding:6px 10px}
.k-gallery .tile[data-tone="1"]{background:linear-gradient(140deg,#22222C,#0B0B0F)}
.k-gallery .tile[data-tone="2"]{background:linear-gradient(160deg,#1A1A22,#0B0B0F)}
.k-gallery .tile[data-tone="3"]{background:linear-gradient(135deg,var(--accent),var(--accent-deep))}
.k-gallery .tile[data-tone="4"]{background:radial-gradient(at 30% 25%,rgba(var(--accent-rgb),.22),#101017 68%)}
.k-gallery .tile[data-tone="5"]{background:linear-gradient(180deg,#1A1A22,rgba(var(--accent-rgb),.18))}
.k-gallery .tile[data-tone="6"]{background:linear-gradient(150deg,#FFFFFF,#9A9AA6)}
@media(max-width:520px){.k-gallery .tile .cap{font-size:9.5px;letter-spacing:.06em;padding:5px 8px}}

/* ============================================================
   07 · TESTIMONIALS — hairline black panels, volt quote marks
   ============================================================ */
.k-testimonials{background:var(--black-2);border-block:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.k-testimonials .grid{gap:14px}
.k-testimonials .quote{background:var(--black);border:1px solid var(--line);border-radius:3px;padding:28px;
  box-shadow:none;gap:18px;transition:.18s}
.k-testimonials .quote:hover{border-color:var(--volt)}
.k-testimonials .quote .mark{color:var(--volt);font-size:56px;height:20px}
.k-testimonials .quote p{font-size:16px;line-height:1.5;color:var(--white)}
.k-testimonials .who .avatar{border-radius:0;background:var(--volt)}
.k-testimonials .who b{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:16px;line-height:1.1}
.k-testimonials .who span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* ============================================================
   08 · PRICING — drop bundles, volt price, square bullets
   ============================================================ */
.k-pricing{padding:clamp(56px,7vw,96px) 0}
.k-pricing .grid{gap:14px}
.k-pricing .tier{background:var(--black-2);border:1px solid var(--line);border-radius:3px;padding:28px;
  box-shadow:none;gap:16px}
.k-pricing .tier.featured{border:2px solid var(--volt);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),var(--black-2) 42%);
  box-shadow:0 24px 60px -30px rgba(var(--accent-rgb),.5)}
.k-pricing .tier.featured::before{background:var(--volt);color:var(--black);border-radius:2px;
  font-weight:600;left:24px}
.k-pricing .tier .name{color:var(--volt);font-size:11px;letter-spacing:.16em}
.k-pricing .price{font-size:clamp(42px,4.4vw,54px);color:var(--volt);line-height:.95}
.k-pricing .price small{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.k-pricing .tier .desc{color:var(--muted);font-size:14px}
.k-pricing .tier ul{font-size:14px;gap:9px}
.k-pricing .tier li::before{width:7px;height:7px;border-radius:0;background:var(--volt);margin-top:7px}

/* ============================================================
   09 · FAQ — Anton questions, volt plus that flips on open
   ============================================================ */
.k-faq{background:var(--black-2);border-block:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.k-faq .list,.k-faq details{border-color:var(--line-2)}
.k-faq summary{font-size:clamp(17px,2vw,21px);padding:19px 0;transition:.15s}
.k-faq summary:hover{color:var(--volt)}
.k-faq summary .ic{border-radius:0;border-color:var(--line-2);width:24px;height:24px}
.k-faq summary .ic::before,.k-faq summary .ic::after{background:var(--volt)}
.k-faq details[open] summary{color:var(--volt)}
.k-faq details[open] summary .ic{background:var(--volt);border-color:var(--volt)}
.k-faq details[open] summary .ic::before,.k-faq details[open] summary .ic::after{background:var(--black)}
.k-faq .a{color:var(--muted);font-size:14.5px;padding-bottom:20px}

/* ============================================================
   10 · STATS — outsize volt Anton figures on black cells
   ============================================================ */
.k-stats{background:var(--black);border-block:1px solid var(--line)}
.k-stats .grid{background:var(--line);gap:1px}
.k-stats .cell{background:var(--black);padding:34px 20px;transition:.18s}
.k-stats .cell:hover{background:var(--black-2)}
.k-stats .num{font-size:clamp(40px,6vw,64px);color:var(--volt);letter-spacing:.01em}
.k-stats .lbl{font-size:10.5px;letter-spacing:.16em;color:var(--muted)}

/* ============================================================
   11 · CTA — the volt band, black type, ghost drop numeral
   ============================================================ */
.k-cta{padding:clamp(56px,7vw,96px) 0}
.k-cta .band{background:var(--volt);color:var(--black);--hx-band:linear-gradient(100deg,var(--black) 0%,var(--black) 30%,var(--accent-pale) 50%,var(--black) 70%,var(--black) 100%);border-radius:4px;
  padding:clamp(38px,5.5vw,64px);align-items:center}
.k-cta .band::before{content:"021";position:absolute;right:-14px;top:-58px;pointer-events:none;
  font-family:var(--font-display);font-size:clamp(150px,20vw,250px);line-height:1;
  color:rgba(11,11,15,.11);letter-spacing:.01em}
.k-cta .band>*{position:relative;z-index:1}
.k-cta .band h2{max-width:13ch;color:var(--black)}
.k-cta .band p{color:var(--black);opacity:.66;font-size:15.5px;max-width:42ch}
.k-cta .band .glow{display:none}
.k-cta .band .btn-primary{background:var(--black);color:var(--volt);border-color:var(--black)}
.k-cta .band .btn-primary:hover{background:var(--white);color:var(--black);border-color:var(--white);
  box-shadow:0 12px 34px -14px rgba(11,11,15,.55)}
.k-cta .band .btn-outline{background:transparent;color:var(--black);border-color:var(--black)}
.k-cta .band .btn-outline:hover{background:var(--black);color:var(--volt);border-color:var(--black)}
@media(max-width:860px){.k-cta .band::before{font-size:150px;right:-8px;top:-38px}}

/* ============================================================
   12 · FOOTER — mono volt column heads, volt hovers
   ============================================================ */
.k-footer{background:var(--black);border-top:1px solid var(--line);padding:clamp(44px,6vw,64px) 0 26px}
.k-footer .brand{font-size:24px;letter-spacing:.02em}
.k-footer .blurb{color:var(--muted);font-size:13.5px;max-width:36ch}
.k-footer h4{color:var(--volt);letter-spacing:.16em}
.k-footer li a{font-size:14px;color:var(--muted)}
.k-footer li a:hover{color:var(--volt)}
.k-footer .legal{border-color:var(--line);color:var(--dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

/* ---- lab foundation panel, kept on-system ---- */
.lab-foundation h4{font-size:20px}
.swatch{border-radius:2px;border-color:var(--line-2)}
.type-row{border-color:var(--line)}
.type-row .meta{color:var(--volt)}

/* ---- about ---- */
.k-about{border-top:1px solid var(--line)}
.k-about .card{background:var(--black-2);border:1px solid var(--line);border-radius:3px;padding:26px 24px}
.k-about .card h3{color:var(--volt);font-size:16px;letter-spacing:.02em;text-transform:uppercase}
.k-about .shot{border-radius:2px}