@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Lato:ital,wght@1,300&family=Poppins:wght@200&display=swap');


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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Hedvig Letters Serif', serif;
    margin: 0;
    line-height: 1.1;
}

p, span, li, button, input, textarea {
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    letter-spacing: 1.5px;
    margin: 0;
}

  :root {
      --ink:         #080a0d;
      --ink2:        #0e1117;
      --ink3:        #141820;
      --ink4:        #1c2130;
      --ink5:        #242b3a;
      --paper:       #faf7f3;
      --paper2:      #f2ede6;
      --paper3:      #ebe4db;
      --warm-600:    #5a5048;
      --warm-500:    #7a6e64;
      --warm-400:    #a09488;
      --warm-300:    #c4b8ac;
      --warm-200:    #ddd4c8;
      --warm-100:    #ede8e2;
      --violet:      #7c5cbf;
      --violet-mid:  #9b7fd4;
      --violet-lite: #c4b0e8;
      --violet-pale: #ede8f8;
      --violet-dim:  rgba(124,92,191,0.15);
      --term-green:  #3ddc84;
      --term-green2: #1db954;
      --term-amber:  #ffb347;
      --term-red:    #ff6b6b;
      --term-blue:   #64b5f6;
      --term-dim:    rgba(61,220,132,0.4);
      --term-bg:     #080c10;
      --white:       #f8f6f2;
      --text-body:   #3d3630;
      --text-mid:    #6a5e54;
      --text-dim:    #9a8e84;
      --border-w:    rgba(60,50,40,0.1);
      --border-wm:   rgba(60,50,40,0.18);
      --border-dark: rgba(255,255,255,0.06);
      --border-v:    rgba(124,92,191,0.2);
      --mono:        'DM Mono', monospace;
    }
 
    html { scroll-behavior: smooth; }
 
    body {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      background: var(--paper);
      color: var(--text-body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
 
    /* ══════════════════════════════════════════
       S1 — HERO with TERMINAL SLIDESHOW
       Full dark, split layout: left headline,
       right animated terminal feed
    ══════════════════════════════════════════ */
    .s1 {
      background: var(--ink);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
 
    /* Subtle dot grid */
    .s1::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
        rgba(61,220,132,0.06) 1px, transparent 1px
      );
      background-size: 40px 40px;
      z-index: 0;
      mask-image: radial-gradient(ellipse 80% 60% at 60% 50%, black 20%, transparent 70%);
    }
 
    /* Violet bleed bottom-left */
    .s1-bleed {
      position: absolute;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(124,92,191,0.08) 0%, transparent 65%);
      bottom: -150px; left: -150px;
      z-index: 0;
      pointer-events: none;
    }
 
    /* HUD bar */
    .s1-hud {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.6rem 8vw;
      border-bottom: 0.5px solid var(--border-dark);
      position: relative;
      z-index: 2;
    }
 
    .s1-path {
      font-family: var(--mono);
      font-size: 0.54rem;
      font-weight: 300;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.25);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
 
    .s1-path .sep   { color: rgba(255,255,255,0.12); }
    .s1-path .cur   { color: var(--term-green); }
 
    .s1-hud-status {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
 
    .s1-status-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 0.52rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--term-green);
      background: rgba(61,220,132,0.08);
      border: 0.5px solid rgba(61,220,132,0.2);
      padding: 3px 10px;
    }
 
    .status-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--term-green);
      animation: blink 2s ease-in-out infinite;
    }
 
    @keyframes blink {
      0%,100% { opacity:1; }
      50%      { opacity:0.3; }
    }
 
    /* Body: left copy + right terminal */
    .s1-body {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 0;
      position: relative;
      z-index: 1;
    }
 
    .s1-left {
      padding: 5rem 4vw 5rem 8vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right: 0.5px solid var(--border-dark);
    }
 
    .s1-overline {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--term-green);
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }
 
    .s1-overline::before {
      content: '';
      display: block;
      width: 18px; height: 1px;
      background: var(--term-green2);
    }
 
    .s1-title {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(3rem, 5.5vw, 6rem);
      line-height: 0.95;
      letter-spacing: -0.02em;
      color: var(--white);
      margin-bottom: 2.5rem;
    }
 
    .s1-title .t-ai { color: rgba(255,255,255,0.25); display: block; }
    .s1-title .t-sec {
      font-style: italic;
      color: var(--violet-lite);
      display: block;
    }
    .s1-title .t-sub {
      font-size: 52%;
      font-style: normal;
      color: rgba(255,255,255,0.2);
      display: block;
      letter-spacing: 0.08em;
      font-weight: 300;
      margin-top: 0.4rem;
    }
 
    .s1-lead {
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.9;
      color: rgba(220,210,200,0.55);
      max-width: 460px;
      margin-bottom: 3rem;
    }
 
    .s1-lead strong { font-weight: 500; color: rgba(220,210,200,0.8); }
 
    .s1-actions {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }
 
    .btn-sec {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--term-green);
      padding: 0.85rem 1.8rem;
      text-decoration: none;
      transition: background 0.2s;
    }
 
    .btn-sec:hover { background: #5df0a0; }
 
    .btn-sec-ghost {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 300;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      padding-bottom: 2px;
      transition: color 0.2s;
    }
 
    .btn-sec-ghost:hover { color: rgba(255,255,255,0.7); }
 
    /* ── TERMINAL PANEL ── */
    .s1-right {
      background: var(--term-bg);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
 
    /* Scanline overlay */
    .s1-right::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.04) 2px,
        rgba(0,0,0,0.04) 4px
      );
      pointer-events: none;
      z-index: 2;
    }
 
    /* Terminal chrome */
    .terminal-chrome {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0.8rem 1.2rem;
      background: rgba(255,255,255,0.03);
      border-bottom: 0.5px solid rgba(255,255,255,0.04);
      flex-shrink: 0;
      position: relative;
      z-index: 3;
    }
 
    .t-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
    }
 
    .t-dot.red    { background: #ff5f57; }
    .t-dot.amber  { background: #ffbd2e; }
    .t-dot.green  { background: #28c840; }
 
    .terminal-title {
      font-family: var(--mono);
      font-size: 0.52rem;
      font-weight: 300;
      color: rgba(255,255,255,0.2);
      margin-left: 0.8rem;
      letter-spacing: 0.08em;
    }
 
    /* Slide show area */
    .terminal-slides {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
 
    .t-slide {
      position: absolute;
      inset: 0;
      padding: 1.8rem 1.6rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      justify-content: center;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      overflow: hidden;
      z-index: 1;
    }
 
    .t-slide.active {
      opacity: 1;
      transform: translateY(0);
      z-index: 2;
    }
 
    .t-slide.exit {
      opacity: 0;
      transform: translateY(-20px);
      z-index: 1;
    }
 
    /* Terminal line types */
    .tl {
      font-family: var(--mono);
      font-size: 0.7rem;
      font-weight: 300;
      line-height: 1.6;
      display: flex;
      gap: 0.6rem;
      white-space: pre-wrap;
      word-break: break-all;
    }
 
    .tl-prompt { color: var(--term-green2); flex-shrink: 0; }
    .tl-cmd    { color: var(--white); }
    .tl-out    { color: rgba(255,255,255,0.45); padding-left: 1.4rem; }
    .tl-warn   { color: var(--term-amber); padding-left: 1.4rem; }
    .tl-err    { color: var(--term-red); padding-left: 1.4rem; }
    .tl-ok     { color: var(--term-green); padding-left: 1.4rem; }
    .tl-info   { color: var(--term-blue); padding-left: 1.4rem; }
    .tl-comment { color: rgba(255,255,255,0.18); padding-left: 1.4rem; }
    .tl-blank  { height: 0.5rem; }
    .tl-label  {
      font-family: var(--mono);
      font-size: 0.55rem;
      font-weight: 500;
      color: var(--term-green);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
      border-bottom: 0.5px solid rgba(61,220,132,0.2);
      padding-bottom: 0.4rem;
    }
 
    .tl-cursor::after {
      content: '▋';
      animation: cursor 1s step-end infinite;
      color: var(--term-green);
    }
 
    @keyframes cursor {
      0%,100% { opacity: 1; }
      50%      { opacity: 0; }
    }
 
    /* Progress dots */
    .terminal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.8rem 1.6rem;
      background: rgba(255,255,255,0.02);
      border-top: 0.5px solid rgba(255,255,255,0.04);
      flex-shrink: 0;
      position: relative;
      z-index: 3;
    }
 
    .t-dots {
      display: flex;
      gap: 6px;
    }
 
    .t-dot-nav {
      width: 20px; height: 2px;
      background: rgba(255,255,255,0.12);
      transition: background 0.3s, width 0.3s;
    }
 
    .t-dot-nav.active {
      background: var(--term-green);
      width: 32px;
    }
 
    .t-counter {
      font-family: var(--mono);
      font-size: 0.5rem;
      font-weight: 300;
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.1em;
    }
 
    /* Stat strip */
    .s1-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 0.5px solid var(--border-dark);
      position: relative;
      z-index: 2;
    }
 
    .s1-stat {
      padding: 1.6rem 2.5vw;
      border-right: 0.5px solid var(--border-dark);
      text-align: center;
      transition: background 0.2s;
    }
 
    .s1-stat:last-child { border-right: none; }
    .s1-stat:hover { background: rgba(255,255,255,0.02); }
 
    .s1-stat-num {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: 2.4rem;
      line-height: 1;
      color: var(--white);
      margin-bottom: 0.4rem;
    }
 
    .s1-stat-num span { color: var(--term-green); font-size: 1.3rem; }
 
    .s1-stat-label {
      font-family: var(--mono);
      font-size: 0.54rem;
      font-weight: 300;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.22);
      line-height: 1.5;
    }
 
    /* ══════════════════════════════════════════
       S2 — WHAT IS AI SECURITY
       Background: warm paper — human feel
       Layout: 3-col editorial newspaper
    ══════════════════════════════════════════ */
    .s2 {
      background: var(--paper);
      padding: 8rem 8vw;
      border-top: 0.5px solid var(--border-w);
    }
 
    .s2-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5vw;
      margin-bottom: 5rem;
      padding-bottom: 3rem;
      border-bottom: 0.5px solid var(--border-wm);
      align-items: end;
    }
 
    .s2-eyebrow {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--violet);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
 
    .s2-eyebrow::before {
      content: '';
      display: block;
      width: 16px; height: 1px;
      background: var(--violet-mid);
    }
 
    .s2-title {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3.2vw, 3.2rem);
      line-height: 1.1;
      color: var(--ink);
    }
 
    .s2-title em { font-style: italic; color: var(--violet); }
 
    .s2-header-right {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.9;
      color: var(--text-mid);
    }
 
    .s2-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
 
    .s2-col {
      padding: 0 3rem 0 0;
      border-right: 0.5px solid var(--border-wm);
    }
 
    .s2-col:nth-child(2) { padding: 0 3rem 0 3rem; }
    .s2-col:last-child   { padding: 0 0 0 3rem; border-right: none; }
 
    .s2-col-num {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: 4rem;
      line-height: 1;
      color: rgba(60,50,40,0.07);
      display: block;
      margin-bottom: 1.2rem;
    }
 
    .s2-col-rule {
      display: block;
      width: 24px; height: 1.5px;
      background: var(--violet-mid);
      margin-bottom: 1.2rem;
    }
 
    .s2-col-title {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 0.7rem;
      line-height: 1.3;
    }
 
    .s2-col-body {
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.95;
      color: var(--text-mid);
    }

   
 
    /* ══════════════════════════════════════════
       S3 — ATTACK SCENARIOS: VERTICAL SLIDER
       Background: dark ink — dramatic
       Layout: left sticky label, right
       vertically scrolling attack cards
    ══════════════════════════════════════════ */
    .s3 {
      background: var(--ink2);
      padding: 8rem 8vw;
      border-top: 0.5px solid rgba(0,0,0,0.4);
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 6vw;
      position: relative;
      overflow: hidden;
    }
 
    /* Faint green grid */
    .s3::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(61,220,132,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,220,132,0.025) 1px, transparent 1px);
      background-size: 60px 60px;
      z-index: 0;
      pointer-events: none;
    }
 
    .s3-left { position: sticky; top: 4rem; z-index: 1; }
    .s3-right { position: relative; z-index: 1; }
 
    .s3-eyebrow {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--term-green);
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
 
    .s3-eyebrow::before {
      content: '';
      display: block;
      width: 16px; height: 1px;
      background: var(--term-green2);
    }
 
    .s3-title {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3vw, 3rem);
      line-height: 1.1;
      color: var(--white);
      margin-bottom: 1.5rem;
    }
 
    .s3-title em { font-style: italic; color: var(--violet-lite); }
 
    .s3-body {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.9;
      color: rgba(220,210,200,0.45);
      margin-bottom: 2.5rem;
    }
 
    /* Progress tracker */
    .s3-tracker {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
 
    .s3-track-item {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.7rem 0;
      cursor: pointer;
      transition: opacity 0.25s;
      opacity: 0.3;
    }
 
    .s3-track-item.s3-track-active { opacity: 1; }
 
    .s3-track-line {
      width: 2px;
      height: 28px;
      background: rgba(255,255,255,0.08);
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
 
    .s3-track-fill {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 0%;
      background: var(--term-green);
      transition: height 5s linear;
    }
 
    .s3-track-item.s3-track-active .s3-track-fill { height: 100%; }
 
    .s3-track-label {
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--white);
    }
 
    /* Vertical slider area */
    .s3-slider {
      position: relative;
      height: 620px;
      overflow: hidden;
    }
 
    /* Attack card */
    .s3-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.55s ease, transform 0.55s ease;
      pointer-events: none;
    }
 
    .s3-card.s3-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
 
    .s3-card.s3-exit {
      opacity: 0;
      transform: translateY(-40px);
    }
 
    .s3-card-header {
      background: var(--ink3);
      border: 0.5px solid rgba(255,255,255,0.06);
      padding: 2rem 2.4rem;
      border-bottom: none;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2rem;
    }
 
    .s3-card-sev {
      font-family: var(--mono);
      font-size: 0.52rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 10px;
      flex-shrink: 0;
    }
 
    .sev-critical { background: rgba(255,107,107,0.15); color: var(--term-red); }
    .sev-high     { background: rgba(255,179,71,0.15);  color: var(--term-amber); }
    .sev-medium   { background: rgba(100,181,246,0.15); color: var(--term-blue); }
 
    .s3-card-tag {
      font-family: var(--mono);
      font-size: 0.52rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--term-green);
      margin-bottom: 0.6rem;
    }
 
    .s3-card-name {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(1.4rem, 2.4vw, 2rem);
      line-height: 1.15;
      color: var(--white);
    }
 
    /* Expanding detail body */
    .s3-card-body {
      background: var(--ink3);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-top: 0.5px solid rgba(255,255,255,0.04);
      padding: 2rem 2.4rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
 
    .s3-card-desc {
      font-size: 0.82rem;
      font-weight: 300;
      line-height: 1.9;
      color: rgba(220,210,200,0.55);
      margin-bottom: 2rem;
    }
 
    /* Detail rows */
    .s3-detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      flex: 1;
      border: 0.5px solid rgba(255,255,255,0.05);
    }
 
    .s3-detail {
      padding: 1.4rem 1.6rem;
      border-right: 0.5px solid rgba(255,255,255,0.05);
      border-bottom: 0.5px solid rgba(255,255,255,0.05);
    }
 
    .s3-detail:nth-child(2n)        { border-right: none; }
    .s3-detail:nth-last-child(-n+2) { border-bottom: none; }
 
    .s3-detail-label {
      font-family: var(--mono);
      font-size: 0.5rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.2);
      margin-bottom: 0.5rem;
    }
 
    .s3-detail-val {
      font-size: 0.76rem;
      font-weight: 400;
      color: var(--warm-200);
      line-height: 1.6;
    }
 
    /* Mini terminal snippet */
    .s3-snippet {
      margin-top: 1.5rem;
      background: var(--term-bg);
      border: 0.5px solid rgba(61,220,132,0.12);
      padding: 1.2rem 1.4rem;
    }
 
    .s3-snippet-label {
      font-family: var(--mono);
      font-size: 0.48rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(61,220,132,0.4);
      margin-bottom: 0.6rem;
    }
 
    .s3-snippet-line {
      font-family: var(--mono);
      font-size: 0.66rem;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,0.45);
    }
 
    .snip-g { color: var(--term-green); }
    .snip-r { color: var(--term-red); }
    .snip-a { color: var(--term-amber); }
    .snip-b { color: var(--term-blue); }
 
    /* Nav buttons */
    .s3-nav-btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 1.5rem;
    }
 
    .s3-nav-btn {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      background: none;
      border: 0.5px solid rgba(255,255,255,0.1);
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
 
    .s3-nav-btn:hover { color: var(--term-green); border-color: rgba(61,220,132,0.3); }
    .s3-nav-btn:disabled { opacity: 0.2; cursor: default; }
 
    .s3-nav-count {
      font-family: var(--mono);
      font-size: 0.52rem;
      font-weight: 300;
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.08em;
    }
 
    /* ══════════════════════════════════════════
       S4 — WHAT WE ASSESS
       Background: warm paper — back to human
       Layout: 2-col — left body / right grid
    ══════════════════════════════════════════ */
    .s4 {
      background: var(--paper2);
      padding: 8rem 8vw;
      border-top: 0.5px solid var(--border-w);
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 6vw;
      align-items: start;
    }
 
    .s4-left { position: sticky; top: 4rem; }
 
    .s4-eyebrow {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--violet);
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
 
    .s4-eyebrow::before {
      content: '';
      display: block;
      width: 16px; height: 1px;
      background: var(--violet-mid);
    }
 
    .s4-title {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3vw, 3rem);
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.5rem;
    }
 
    .s4-title em { font-style: italic; color: var(--violet); }
 
    .s4-body {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.9;
      color: var(--text-mid);
    }
 
    .s4-right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      background: var(--border-wm);
    }
 
    .s4-item {
      background: var(--paper2);
      padding: 2rem 1.8rem;
      position: relative;
      overflow: hidden;
      transition: background 0.25s;
    }
 
    .s4-item:hover { background: var(--paper); }
 
    .s4-item-icon {
      width: 36px; height: 36px;
      border: 0.5px solid var(--border-wm);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      transition: border-color 0.25s, background 0.25s;
    }
 
    .s4-item:hover .s4-item-icon {
      border-color: var(--violet-lite);
      background: var(--violet-pale);
    }
 
    .s4-item-icon svg {
      width: 14px; height: 14px;
      stroke: var(--warm-500);
      fill: none;
      stroke-width: 1.5;
      transition: stroke 0.25s;
    }
 
    .s4-item:hover .s4-item-icon svg { stroke: var(--violet); }
 
    .s4-item-title {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }
 
    .s4-item-body {
      font-size: 0.72rem;
      font-weight: 300;
      line-height: 1.8;
      color: var(--text-mid);
    }
 
    .s4-item-accent {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--violet), transparent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s;
    }
 
    .s4-item:hover .s4-item-accent { transform: scaleX(1); }
 
    /* ══════════════════════════════════════════
       S5 — METHODOLOGY
       Background: ink dark — dramatic
       Layout: 5-step horizontal timeline
    ══════════════════════════════════════════ */
    .s5 {
      background: var(--ink3);
      padding: 8rem 8vw;
      border-top: 0.5px solid rgba(0,0,0,0.3);
      position: relative;
      overflow: hidden;
    }
 
    .s5::before {
      content: '';
      position: absolute;
      width: 800px; height: 800px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(124,92,191,0.06) 0%, transparent 65%);
      top: -300px; right: -200px;
      z-index: 0;
      pointer-events: none;
    }
 
    .s5-inner { position: relative; z-index: 1; }
 
    .s5-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4vw;
      margin-bottom: 5rem;
      padding-bottom: 2rem;
      border-bottom: 0.5px solid rgba(255,255,255,0.06);
      align-items: end;
    }
 
    .s5-eyebrow {
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--term-green);
      margin-bottom: 1rem;
    }
 
    .s5-title {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3vw, 3rem);
      line-height: 1.1;
      color: var(--white);
    }
 
    .s5-title em { font-style: italic; color: var(--violet-lite); }
 
    .s5-header-right {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.9;
      color: rgba(220,210,200,0.4);
    }
 
    /* Steps */
    .s5-steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
    }
 
    .s5-steps::before {
      content: '';
      position: absolute;
      top: 24px; left: 24px; right: 24px;
      height: 1px;
      background: rgba(255,255,255,0.06);
      z-index: 0;
    }
 
    .s5-step { padding: 0 2rem 0 0; position: relative; z-index: 1; }
    .s5-step:last-child { padding-right: 0; }
 
    .s5-step-orb {
      width: 48px; height: 48px;
      border: 0.5px solid rgba(255,255,255,0.1);
      background: var(--ink3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2rem;
      transition: border-color 0.3s, background 0.3s;
    }
 
    .s5-step:hover .s5-step-orb {
      border-color: var(--violet-lite);
      background: rgba(124,92,191,0.12);
    }
 
    .s5-step-orb svg {
      width: 17px; height: 17px;
      stroke: rgba(255,255,255,0.25);
      fill: none;
      stroke-width: 1.5;
      transition: stroke 0.3s;
    }
 
    .s5-step:hover .s5-step-orb svg { stroke: var(--violet-lite); }
 
    .s5-step-code {
      font-family: var(--mono);
      font-size: 0.5rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: rgba(61,220,132,0.5);
      margin-bottom: 0.5rem;
    }
 
    .s5-step-title {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 0.6rem;
      line-height: 1.3;
    }
 
    .s5-step-body {
      font-size: 0.72rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(220,210,200,0.38);
    }
 
    
 
    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    @media (max-width: 1000px) {
      .s1-body { grid-template-columns: 1fr; }
      .s1-right { min-height: 400px; border-top: 0.5px solid var(--border-dark); }
      .s1-stats { grid-template-columns: 1fr 1fr; }
      .s1-stat:nth-child(2) { border-right: none; }
      .s1-stat:nth-child(n+3) { border-top: 0.5px solid var(--border-dark); }
      .s2-header { grid-template-columns: 1fr; gap: 1.5rem; }
      .s2-cols { grid-template-columns: 1fr; }
      .s2-col { padding: 2rem 0 !important; border-right: none; border-bottom: 0.5px solid var(--border-wm); }
      .s2-col:last-child { border-bottom: none; }
      .s3 { grid-template-columns: 1fr; gap: 3rem; }
      .s3-left { position: static; }
      .s3-slider { height: 560px; }
      .s4 { grid-template-columns: 1fr; }
      .s4-left { position: static; }
      .s5-header { grid-template-columns: 1fr; gap: 1.5rem; }
      .s5-steps { grid-template-columns: 1fr 1fr; }
      .s5-steps::before { display: none; }
      .s6 { grid-template-columns: 1fr; }
      .s6-left { padding: 5rem 8vw; border-right: none; border-bottom: 0.5px solid var(--border-w); }
      .s6-right { padding: 5rem 8vw; }
    }
 
    @media (max-width: 600px) {
      .s2-cols { gap: 0; }
      .s3-detail-grid { grid-template-columns: 1fr; }
      .s3-detail:nth-child(n) { border-right: none; }
      .s4-right { grid-template-columns: 1fr; }
      .s5-steps { grid-template-columns: 1fr; }
      .s6-row { grid-template-columns: 1fr; }
    }