:root{
  --radius:.5rem;
  --background:oklch(.14 .01 270);
  --foreground:oklch(.94 .012 80);
  --surface:oklch(.17 .012 270);
  --surface-2:oklch(.20 .014 270);
  --border:oklch(1 0 0 / 8%);
  --hairline:oklch(1 0 0 / 6%);
  --coral:oklch(.72 .18 38);
  --purple:oklch(.62 .20 295);
  --cream:oklch(.94 .012 80);
  --dim:oklch(.94 .012 80 / .5);
  --font-display:'Archivo Black','Anton',Impact,system-ui,sans-serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;border:0 solid var(--border);margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--background);color:var(--foreground);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, oklch(.72 .18 38 / .06), transparent 60%),
    radial-gradient(1000px 500px at -10% 30%, oklch(.62 .20 295 / .05), transparent 60%);
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--coral);color:var(--background)}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.035em;font-weight:900;line-height:.95}

.container-page{max-width:1240px;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container-page{padding:0 2.5rem}}

.label-mono{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.font-serif{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.text-dim{color:var(--dim)}
.text-cream{color:var(--cream)}
.text-coral{color:var(--coral)}
.text-purple{color:var(--purple)}
.text-balance{text-wrap:balance}
.text-pretty{text-wrap:pretty}
.text-center{text-align:center}
.text-right{text-align:right}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}
.overflow-hidden{overflow:hidden}
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}.inline-flex{display:inline-flex}
.grid{display:grid}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}
.gap-9{gap:2.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}
.gap-px{gap:1px}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-32{margin-top:8rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}
.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-16{padding:4rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}
.pt-6{padding-top:1.5rem}.pt-12{padding-top:3rem}.pt-20{padding-top:5rem}
.pb-6{padding-bottom:1.5rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pb-24{padding-bottom:6rem}
.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}
.pr-1{padding-right:.25rem}
.w-full{width:100%}.h-full{height:100%}
.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}
.min-h-screen{min-height:100vh}
.rounded-md{border-radius:.5rem}.rounded-lg{border-radius:.75rem}.rounded-full{border-radius:999px}
.border{border-width:1px;border-style:solid;border-color:var(--border)}
.border-t{border-top-width:1px;border-top-style:solid;border-top-color:var(--hairline)}
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--hairline)}
.border-y{border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:var(--hairline)}
.border-l{border-left-width:1px;border-left-style:solid;border-left-color:var(--hairline)}
.border-hairline{border-color:var(--hairline)}
.bg-background{background:var(--background)}
.bg-surface{background:var(--surface)}
.bg-hairline{background:var(--hairline)}
.bg-coral{background:var(--coral)}
.bg-purple{background:var(--purple)}
.bg-cream{background:var(--cream)}
.font-mono{font-family:var(--font-mono)}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-6xl{font-size:3.75rem}
.font-medium{font-weight:500}.font-bold{font-weight:700}
.leading-tight{line-height:1.15}.leading-relaxed{line-height:1.7}
.opacity-60{opacity:.6}.opacity-0{opacity:0}
.shrink-0{flex-shrink:0}
.cursor-pointer{cursor:pointer}
.transition-colors{transition:color .3s,background .3s,border-color .3s}
.transition-all{transition:all .3s}
.whitespace-nowrap{white-space:nowrap}
.list-none{list-style:none}
.z-50{z-index:50}
.inset-x-0{left:0;right:0}.top-0{top:0}
.h-px{height:1px}.w-1{width:.25rem}.h-1{height:.25rem}
.w-1\.5{width:.375rem}.h-1\.5{height:.375rem}
.w-2{width:.5rem}.h-2{height:.5rem}
.w-6{width:1.5rem}.h-16{height:4rem}.h-20{height:5rem}
.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}.space-y-8>*+*{margin-top:2rem}
.space-y-px>*+*{margin-top:1px}

.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-12{grid-template-columns:repeat(12,minmax(0,1fr))}

@media(min-width:640px){
  .sm\:grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sm\:inline{display:inline}
}
@media(min-width:768px){
  .md\:grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:block{display:block}
  .md\:items-center{align-items:center}
  .md\:flex-row{flex-direction:row}
  .md\:pl-10{padding-left:2.5rem}
  .md\:py-32{padding-top:8rem;padding-bottom:8rem}
  .md\:py-40{padding-top:10rem;padding-bottom:10rem}
  .md\:pt-32{padding-top:8rem}
  .md\:pb-40{padding-bottom:10rem}
  .md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-16{padding:4rem}
  .md\:text-xl{font-size:1.25rem}.md\:text-3xl{font-size:1.875rem}
  .md\:text-4xl{font-size:2.25rem}.md\:text-6xl{font-size:3.75rem}
  .md\:h-20{height:5rem}
  .md\:col-1{grid-column:span 1}
  .md\:col-3{grid-column:span 3}
  .md\:col-4{grid-column:span 4}
  .md\:col-5{grid-column:span 5}
  .md\:col-7{grid-column:span 7}
  .md\:col-8{grid-column:span 8}
  .md\:col-9{grid-column:span 9}
}

/* Components */
.btn-primary,.btn-ghost,.btn-academy{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.5rem;font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;transition:transform .3s,box-shadow .3s,background .3s,border-color .3s,color .3s;
}
.btn-primary{background:var(--cream);color:var(--background)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 40px -12px oklch(.72 .18 38 / .6);background:var(--coral);color:var(--cream)}
.btn-ghost{border:1px solid var(--border);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);background:oklch(1 0 0 / .03)}
.btn-academy{background:var(--purple);color:var(--cream)}
.btn-academy:hover{transform:translateY(-1px);box-shadow:0 12px 40px -12px oklch(.62 .20 295 / .6)}

.card-surface{background:var(--surface);border:1px solid var(--hairline);border-radius:.75rem;transition:border-color .4s,transform .4s}
.card-surface:hover{border-color:oklch(1 0 0 / .16);transform:translateY(-2px)}

.display-1{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,7.5vw,6.5rem);line-height:.92;letter-spacing:-.045em}
.display-2{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,5vw,4.2rem);line-height:.95;letter-spacing:-.04em}
.display-italic{color:var(--coral)}
.display-italic-purple{color:var(--purple)}

.divider-soft{height:1px;background:linear-gradient(90deg,transparent,var(--hairline),transparent)}

.link-underline{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s cubic-bezier(.2,.7,.2,1)}
.link-underline:hover{background-size:100% 1px}

.reveal-up{animation:revealUp .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes revealUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

.marquee-wrap{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden;padding:1.25rem 0}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;animation:marquee 40s linear infinite;width:max-content}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s}
.site-header.scrolled{background:oklch(.14 .01 270 / .7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline)}
.site-header .row{display:flex;align-items:center;justify-content:space-between;height:4rem}
@media(min-width:768px){.site-header .row{height:5rem}}
.brand{display:flex;align-items:center;gap:.5rem}
.brand .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--coral);transition:background .3s}
.brand:hover .dot{background:var(--purple)}
.brand .name{font-family:var(--font-display);font-style:italic;font-size:1.125rem;letter-spacing:-.02em}
.nav-desktop{display:none;align-items:center;gap:2.25rem}
@media(min-width:768px){.nav-desktop{display:flex}}
.nav-link{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.nav-link:hover,.nav-link.active{color:var(--cream)}
.cta-desktop{display:none}
@media(min-width:768px){.cta-desktop{display:block}}
.menu-btn{display:flex;flex-direction:column;gap:6px;padding:.5rem}
@media(min-width:768px){.menu-btn{display:none}}
.menu-btn span{display:block;width:1.5rem;height:1px;background:var(--cream);transition:transform .3s,opacity .3s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-panel{display:none;border-top:1px solid var(--hairline);background:oklch(.14 .01 270 / .95);backdrop-filter:blur(16px)}
.mobile-panel.open{display:block}
.mobile-panel .inner{padding:1.5rem 0;display:flex;flex-direction:column;gap:1.25rem}

/* Footer */
.site-footer{position:relative;border-top:1px solid var(--hairline);margin-top:8rem}

/* Forms */
input[type="text"],input[type="email"],input[type="number"],input[type="date"],textarea,select{
  width:100%;background:transparent;border:1px solid var(--hairline);border-radius:.5rem;
  padding:.75rem 1rem;font-size:.875rem;outline:none;transition:border-color .3s;
}
input:focus,textarea:focus,select:focus{border-color:var(--cream)}
textarea{resize:none}
select option{background:var(--background);color:var(--cream)}
.peer{position:absolute;opacity:0;pointer-events:none}
.peer:checked + .slot{border-color:var(--cream);background:var(--cream);color:var(--background)}
.slot{display:block;text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--hairline);border-radius:.5rem;padding:.75rem;transition:border-color .3s,background .3s,color .3s}
.slot:hover{border-color:oklch(1 0 0 / .3)}
.honey{position:absolute;left:-9999px}

/* Severity colors */
.sev-Critical{color:var(--coral)}
.sev-High{color:var(--coral)}
.sev-Medium{color:var(--dim)}

/* Hover helpers */
.hover-bg-surface:hover{background:var(--surface)}
.group:hover .group-arrow{opacity:1}
.group:hover .group-line{width:3rem;background:var(--coral)}
.group-line{width:1.5rem;height:1px;background:oklch(.94 .012 80 / .3);transition:width .3s,background .3s}
.group-arrow{opacity:0;transition:opacity .3s}