/* ==========================================================================
   HackHalt – unified typography & section-heading system
   Reference: index.html  (Sora for headings, Inter for body)
   Load this file LAST in <head> so it wins over page-level <style> blocks.

   Section-head rule
   -----------------
   data-hh="center" : full-width section (cards / grid below)  -> eyebrow + h2 + sub-copy centered
   data-hh="split"  : heading sits in a left/right layout       -> heading block stays left aligned
   data-hh="cta"    : closing call-to-action heading            -> alignment kept, size unified
   ========================================================================== */

:root{
  --hf:"Sora",ui-sans-serif,system-ui,sans-serif;
  --bf:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hh-navy:#071426;
  --hh-soft:#42526b;
  --hh-head-max:700px;
  --hh-head-gap:52px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--bf);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid #2d8cff;outline-offset:3px;border-radius:8px}

/* ---------- headings: one family, one scale ---------- */
h1,h2,h3,h4{font-family:var(--hf)!important}
h1,h2{letter-spacing:-.03em;font-weight:700}
h3,h4{letter-spacing:-.02em}

h1{
  font-size:clamp(38px,5vw,64px)!important;
  line-height:1.05!important;
}
h2{
  font-size:clamp(30px,3.2vw,42px)!important;
  line-height:1.12!important;
}
h2[data-hh="cta"]{font-size:clamp(32px,3.6vw,46px)!important}

/* ---------- eyebrow / kicker labels: same look everywhere ---------- */
.eyebrow,.section-kicker,.section-label,.cta-label,
.grc-eyebrow,.soc-eyebrow,.ni-eyebrow,.rt-eyebrow,.cloud-eyebrow,.cloud-cta-eyebrow{
  font-family:var(--bf)!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.12em!important;
  line-height:1.2;
  text-transform:uppercase;
  margin-bottom:16px!important;
}

/* ---------- heading block: eyebrow -> h2 -> sub-copy ---------- */
h2[data-hh]{margin-top:0!important}
h2[data-hh]+p{
  margin-top:14px!important;
  font-size:16px!important;
  line-height:1.6!important;
  color:var(--hh-soft);
}

/* CENTER: full-width sections */
*:has(> h2[data-hh="center"]){
  max-width:var(--hh-head-max)!important;
  margin-inline:auto!important;
  margin-bottom:var(--hh-head-gap)!important;
  text-align:center!important;
}
h2[data-hh="center"],
h2[data-hh="center"]+p{text-align:center!important;margin-inline:auto!important;max-width:none!important}
*:has(> h2[data-hh="center"]) > :is(.eyebrow,.section-kicker,.section-label,.grc-eyebrow,.soc-eyebrow,.ni-eyebrow,.rt-eyebrow,.cloud-eyebrow){
  justify-content:center;
}

/* SPLIT: left / right sections – heading stays left */
*:has(> h2[data-hh="split"]){text-align:left!important}
h2[data-hh="split"],
h2[data-hh="split"]+p{text-align:left!important;margin-inline:0!important}

@media (max-width:760px){
  *:has(> h2[data-hh="center"]){margin-bottom:36px!important}
}


/* ==========================================================================
   DARK-BLUE ILLUSTRATIVE PANELS
   Every dashboard / mockup / diagram box that sits beside a section heading
   (not the hero) shares one surface. Tagged in HTML with data-hh-panel.
   ========================================================================== */
:root{
  --hp-bg:linear-gradient(150deg,#0d2d57 0%,#08203f 52%,#061529 100%);
  --hp-line:rgba(120,170,255,.24);
  --hp-shadow:0 26px 64px rgba(6,21,41,.30);
  --hp-title:#eef5ff;      /* headings / values inside panels   */
  --hp-text:#a9bfdc;       /* descriptions / labels             */
  --hp-accent:#7cc0ff;     /* blue accents (codes, numbers)     */
  --hp-surface:rgba(255,255,255,.065);   /* inner cards         */
  --hp-surface-2:rgba(255,255,255,.10);  /* bars / tracks       */
  --hp-good:#4fdca0; --hp-bad:#ff8a94; --hp-warn:#ffc46b;
}
[data-hh-panel]{
  background:var(--hp-bg)!important;
  border:1px solid var(--hp-line)!important;
  box-shadow:var(--hp-shadow)!important;
  color:var(--hp-text);
}
[data-hh-panel] *{border-color:var(--hp-line)}

/* --- light panels converted to dark: recolor their content --- */
/* it-services · operating-visual */
.operating-visual[data-hh-panel] .orbit-ring{border-color:rgba(124,192,255,.25)!important}
.operating-visual[data-hh-panel] .operating-node{background:var(--hp-surface)!important;border-color:var(--hp-line)!important;box-shadow:none!important;backdrop-filter:blur(6px)}
.operating-visual[data-hh-panel] .operating-node b{color:var(--hp-accent)!important}
.operating-visual[data-hh-panel] .operating-node span{color:var(--hp-text)!important}
.operating-visual[data-hh-panel] .core-label,
.operating-visual[data-hh-panel] .core-label strong{color:#d7ebff!important}

/* it-services · outcome-dashboard */
.outcome-dashboard[data-hh-panel] :is(.dashboard-top span,.bar-label){color:var(--hp-text)!important}
.outcome-dashboard[data-hh-panel] .dashboard-top em{background:rgba(79,220,160,.16)!important;color:var(--hp-good)!important}
.outcome-dashboard[data-hh-panel] small{color:var(--hp-accent)!important}
.outcome-dashboard[data-hh-panel] :is(h3,.gauge-value,.dashboard-footer strong){color:var(--hp-title)!important}
.outcome-dashboard[data-hh-panel] p{color:var(--hp-text)!important}
.outcome-dashboard[data-hh-panel] .bar{background:var(--hp-surface-2)!important}
.outcome-dashboard[data-hh-panel] .dashboard-footer{background:rgba(255,255,255,.05)!important;color:var(--hp-text)!important;border-color:var(--hp-line)!important}
.outcome-dashboard[data-hh-panel] .gauge circle:first-of-type{stroke:rgba(255,255,255,.14)!important}

/* cloud-security · cloud-layer-visual */
.cloud-layer-visual[data-hh-panel] .cloud-layer{background:var(--hp-surface)!important;border-color:var(--hp-line)!important;box-shadow:none!important}
.cloud-layer-visual[data-hh-panel] .cloud-layer-icon{background:rgba(124,192,255,.14)!important;color:var(--hp-accent)!important}
.cloud-layer-visual[data-hh-panel] .cloud-layer-icon svg{color:var(--hp-accent)!important}
.cloud-layer-visual[data-hh-panel] .cloud-layer-title{color:var(--hp-title)!important}
.cloud-layer-visual[data-hh-panel] .cloud-layer-description{color:var(--hp-text)!important}
.cloud-layer-visual[data-hh-panel] .cloud-layer-state{color:var(--hp-good)!important}

/* compliance-grc · framework selector */
.grc-framework-grid[data-hh-panel] .grc-framework{background:var(--hp-surface)!important;border-color:var(--hp-line)!important;color:var(--hp-title)!important}
.grc-framework-grid[data-hh-panel] .grc-framework:hover,
.grc-framework-grid[data-hh-panel] .grc-framework[aria-pressed="true"],
.grc-framework-grid[data-hh-panel] .grc-framework.active{background:rgba(124,192,255,.16)!important}
.grc-framework-grid[data-hh-panel] .grc-framework-code{color:var(--hp-accent)!important}
.grc-framework-grid[data-hh-panel] strong{color:var(--hp-title)!important}
.grc-framework-grid[data-hh-panel] small{color:var(--hp-text)!important}
.grc-framework-grid[data-hh-panel] .grc-framework-detail{background:rgba(255,255,255,.07)!important;color:#c6d6ec!important;border-color:var(--hp-line)!important}

/* vapt · risk-visual */
.risk-visual[data-hh-panel] .risk-chip{background:var(--hp-surface)!important;border-color:var(--hp-line)!important;box-shadow:none!important;color:var(--hp-title)!important}
.risk-visual[data-hh-panel] strong{color:var(--hp-title)!important}
.risk-visual[data-hh-panel] span{color:var(--hp-text)!important}
.risk-visual[data-hh-panel] svg{color:var(--hp-accent)!important}
.risk-visual[data-hh-panel] .risk-center{background:linear-gradient(145deg,#173f7c,#0d2d57)!important;border-color:var(--hp-line)!important;box-shadow:0 0 44px rgba(45,140,255,.35)!important}
.risk-visual[data-hh-panel] .risk-orbit{border-color:rgba(124,192,255,.26)!important}

/* vapt · report-mockup */
.report-mockup[data-hh-panel] .report-head-title,
.report-mockup[data-hh-panel] strong{color:var(--hp-title)!important}
.report-mockup[data-hh-panel] span{color:var(--hp-text)!important}
.report-mockup[data-hh-panel] .report-head-status{background:rgba(79,220,160,.16)!important;color:var(--hp-good)!important}
.report-mockup[data-hh-panel] .report-stat{background:var(--hp-surface)!important}
.report-mockup[data-hh-panel] .finding-bar{background:var(--hp-surface-2)!important}
.report-mockup[data-hh-panel] .finding-bar i{background:linear-gradient(90deg,#2d8cff,#13a8c7)!important}
.report-mockup[data-hh-panel] .severity{background:rgba(255,255,255,.08)!important}
.report-mockup[data-hh-panel] .severity-critical{color:var(--hp-bad)!important;background:rgba(230,78,91,.18)!important}
.report-mockup[data-hh-panel] .severity-high{color:var(--hp-warn)!important;background:rgba(213,138,18,.18)!important}
.report-mockup[data-hh-panel] .severity-medium{color:#ffd98a!important;background:rgba(213,138,18,.14)!important}

/* corporate-training · model-card */
.model-card[data-hh-panel] :is(.model-label,.process-name){color:var(--hp-title)!important}
.model-card[data-hh-panel] :is(.model-code,.process-number){color:var(--hp-accent)!important}
.model-card[data-hh-panel] .process-status{color:var(--hp-text)!important}
.model-card[data-hh-panel] .process-step{background:var(--hp-surface)!important;border-color:var(--hp-line)!important;box-shadow:none!important}

/* corporate-training · config-card */
.config-card[data-hh-panel] .config-title,
.config-card[data-hh-panel] strong{color:var(--hp-title)!important}
.config-card[data-hh-panel] .config-status{color:var(--hp-accent)!important}
.config-card[data-hh-panel] .config-field{background:var(--hp-surface)!important;border-color:var(--hp-line)!important;box-shadow:none!important}
.config-card[data-hh-panel] :is(.config-field span,.config-code){color:var(--hp-text)!important}

/* it-services · 3D core cube on dark */
.operating-visual[data-hh-panel] .core-face{
  background:linear-gradient(135deg,rgba(45,140,255,.55),rgba(13,45,87,.85))!important;
  border-color:rgba(124,192,255,.55)!important;
  box-shadow:inset 0 0 34px rgba(124,192,255,.22),0 0 34px rgba(45,140,255,.35)!important;
}
.operating-visual[data-hh-panel] .core-label strong{color:#fff!important;text-shadow:0 0 14px rgba(124,192,255,.8)}
.operating-visual[data-hh-panel] .core-label span{color:#bfdcff!important}

/* tall dashboard: sit centered instead of leaving a large empty block */
.outcome-dashboard[data-hh-panel]{align-self:center!important}


/* ==========================================================================
   HEADINGS: navy + blue accent (same combination as the index)
   Tone is set per heading (data-hh-tone="light" = dark text on a light
   section). Headings sitting on dark sections keep their white text.
   ========================================================================== */
h1[data-hh-tone="light"],h2[data-hh-tone="light"]{color:#071426!important}
:is(h1,h2)[data-hh-tone="light"] :is(.hh-accent,.accent,.gradient-text,.gradient,.grad,.grc-accent,.soc-accent,.rt-accent,.ni-accent,.cloud-accent,.gradient-title){
  background:linear-gradient(100deg,#1769e0,#13a8c7)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
}


/* Shared rhythm, responsive layout and restrained interaction polish */
:root{
  --hh-section-space:clamp(3.25rem,6vw,5.75rem);
  --hh-section-space-compact:clamp(2.5rem,5vw,4rem);
  --hh-blue-wash:#f3f8ff;
}
html{overflow-x:clip}
body{overflow-x:clip}
img,video,canvas,svg{max-width:100%}
main > section:not(.hero):not([class*="cta"]):not(.cta):not(.proof):not(.metrics):not(.tech-strip){scroll-margin-top:88px}
main > section[data-hh-surface="wash"]{background-color:var(--hh-blue-wash)!important}
main > section[data-hh-surface="white"]{background-color:#fff!important}
/* A predictable section rhythm without changing compact proof or CTA bands. */
main > section:not(.hero):not([class*="cta"]):not(.cta):not(.proof):not(.metrics):not(.tech-strip){padding-block:var(--hh-section-space)}
/* Hero visuals share a restrained dark-blue stage; the animation itself remains untouched. */
.hh-hero-stage,.hero :is(.scene-wrap,.hero-visual,.hero-visualization,.hero-scene,.hero-art,.hero-graphic,.aw-hero-visual,.hero-visual-wrap,.visualization-panel){
  position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(120,170,255,.24);border-radius:24px;
  background:linear-gradient(150deg,#0d2d57 0%,#08203f 55%,#061529 100%);
  box-shadow:0 24px 60px rgba(6,21,41,.22);
}

/* Cards lift gently and gain a blue edge on hover/focus. */
:is(.pc,.svc,.service-card,.product-card,.feature-card,.info-card,.course-card,.cert-card,.training-card,.benefit-card){
  transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease;
  transform:translateZ(0);
}
:is(.pc,.svc,.service-card,.product-card,.feature-card,.info-card,.course-card,.cert-card,.training-card,.benefit-card):is(:hover,:focus-within){
  transform:translateY(-5px);border-color:rgba(45,140,255,.38);box-shadow:0 18px 42px rgba(8,32,63,.12)
}
@media(max-width:900px){
  :root{--hh-section-space:var(--hh-section-space-compact)}
  .hero-grid,.hero-layout,.hero-inner,.hero-content-grid,.split-layout{grid-template-columns:minmax(0,1fr)!important}
  .hero-grid,.hero-layout{gap:clamp(24px,5vw,40px)!important}
}
@media(max-width:650px){
  h1{font-size:clamp(34px,10vw,46px)!important;line-height:1.08!important;overflow-wrap:anywhere}
  h2{font-size:clamp(28px,8vw,36px)!important;line-height:1.14!important}
  body{font-size:15px}
  main > section:not(.hero):not([class*="cta"]):not(.cta):not(.proof):not(.metrics):not(.tech-strip){padding-block:clamp(2.75rem,12vw,3.75rem)}
  .hh-hero-stage,.hero :is(.scene-wrap,.hero-visual,.hero-visualization,.hero-scene,.hero-art,.hero-graphic,.aw-hero-visual,.hero-visual-wrap,.visualization-panel){border-radius:18px}
  :is(.hero-actions,.hero-cta,.actions,.cta-actions){gap:10px;flex-wrap:wrap}
  :is(.hero-actions,.hero-cta,.actions,.cta-actions) .btn{max-width:100%;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}