@font-face{
  font-family:'Manrope Local';
  src:url('../fonts/Manrope,Space_Mono/Manrope/static/Manrope-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Manrope Local';
  src:url('../fonts/Manrope,Space_Mono/Manrope/static/Manrope-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Manrope Local';
  src:url('../fonts/Manrope,Space_Mono/Manrope/static/Manrope-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Manrope Local';
  src:url('../fonts/Manrope,Space_Mono/Manrope/static/Manrope-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Space Mono Local';
  src:url('../fonts/Manrope,Space_Mono/Space_Mono/SpaceMono-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Space Mono Local';
  src:url('../fonts/Manrope,Space_Mono/Space_Mono/SpaceMono-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Disket Mono Local';
  src:url('../fonts/Disket/Disket-Mono-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Disket Mono Local';
  src:url('../fonts/Disket/Disket-Mono-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0;}
:root{--active-color:#22d3ee;}

body{background:#08090d;font-family:'Manrope Local',system-ui,sans-serif;color:#e2e8f0;position:relative;overflow-x:hidden;}
body::after{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.028) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0;}

.page-headline,
.copy-headline,
.how-title,
.why-headline,
.contact-title{
  font-family:'Disket Mono Local',monospace;
}

.layer-toggle-label,
.llm-title,
.pillar-name,
.f-name,
.f-name-collapsed,
.ot-name,
.why-section-title,
.team-name,
.customer-name{
  font-family:'Manrope Local',sans-serif;
}

.page-headline,
.copy-headline,
.how-title,
.why-headline,
.contact-title{
  font-weight:400;
  letter-spacing:0;
  line-height:1.12;
}

.layer-toggle-label,
.llm-title,
.pillar-name,
.f-name,
.f-name-collapsed,
.ot-name,
.why-section-title,
.team-name,
.customer-name{
  font-weight:600;
  letter-spacing:0;
  line-height:1.18;
}

/* ══ TOP NAVBAR ══ */
.navbar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(24px,4vw,80px);
  height:clamp(52px,5vh,68px);
  border-bottom:1px solid #0e1828;
  background:rgba(8,9,13,0.95);
  backdrop-filter:blur(8px);
}
.nav-logo{
  display:flex;align-items:center;
  cursor:pointer;
}
.nav-logo:hover{opacity:0.92;}
.nav-logo svg{height:clamp(24px,2.4vw,42px);width:auto;}
.nav-links{
  display:flex;align-items:center;gap:4px;
}
.nav-link{
  font-family:'Disket Mono Local',monospace;
  font-size:clamp(10px,0.78vw,12px);font-weight:400;
  letter-spacing:0.06em;
  padding:8px clamp(10px,1.2vw,20px);
  color:#7a9ab8;
  cursor:pointer;
  border-radius:5px;
  transition:all 0.2s;
  user-select:none;
}
.nav-link:hover{color:#8da4be;background:rgba(255,255,255,0.03);}
.nav-link.active{color:#e2e8f0;}

/* ══ PAGE HERO (headline only, no old header block) ══ */
.hero-block{
  position:relative;z-index:1;
  text-align:center;
  padding:clamp(16px,3vh,56px) 5vw 0;
}
.logo-wrap svg{height:44px;width:auto;display:block;margin:0 auto 14px;}
.page-headline{font-size:clamp(25px,4.5vw,72px);color:#e2e8f0;}
.page-headline strong{font-weight:400;color:#e2e8f0;}
.page-sub{font-size:clamp(14px,1.28vw,21px);color:#94a3b8;margin:clamp(6px,1vh,12px) auto 0;max-width:min(1200px,88vw);line-height:1.42;font-weight:300;white-space:nowrap;}


/* ══ SECTION PANELS ══ */
.section-panel{display:none;flex-direction:column;}
.section-panel.active{display:block;}

/* ── Section transition animations ── */
@keyframes panel-in{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes panel-out{
  from{opacity:1;}
  to{opacity:0;}
}
.section-panel.animating-in{
  animation:panel-in 0.35s ease forwards;
}
.section-panel.animating-out{
  display:block !important;
  animation:panel-out 0.2s ease forwards;
  pointer-events:none;
  position:absolute;
  width:100%;
}

/* ── Stagger-in for child elements ── */
@keyframes stagger-up{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.stagger-child{opacity:0;}
.stagger-child.staggered{animation:stagger-up 0.4s cubic-bezier(0.22,1,0.36,1) forwards;}

/* ══════════════════════════════════════
   WHAT PANEL (flywheel)
══════════════════════════════════════ */
.main{position:relative;z-index:1;display:flex;align-items:center;gap:4vw;width:100%;padding:clamp(12px,2vh,32px) clamp(24px,5vw,96px);}
.flywheel-wrap{flex-shrink:0;position:relative;}
.flywheel-glow{position:absolute;inset:-40px;border-radius:50%;transition:background 0.6s ease;pointer-events:none;}
#fw{overflow:visible;}

.copy-panel{flex:1;min-width:0;}
.stage-eyebrow{display:flex;align-items:center;gap:0;margin-bottom:12px;}
.eyebrow-line{display:none;width:24px;height:2px;background:#22d3ee;transition:background 0.3s;}
.eyebrow-text{font-family:'Disket Mono Local',monospace;font-size:clamp(8px,0.68vw,10px);font-weight:400;letter-spacing:0.14em;color:#22d3ee;transition:color 0.3s;}
.copy-headline{font-size:clamp(16px,2.3vw,38px);color:#f1f5f9;margin-bottom:clamp(10px,1.2vh,20px);min-height:auto;transition:opacity 0.2s;}
.copy-headline strong{font-weight:400;color:#22d3ee;transition:color 0.3s;}
.copy-body{font-size:clamp(13px,1.2vw,18px);color:#b0bfd0;line-height:1.68;min-height:auto;transition:opacity 0.2s;border-left:3px solid #4b7aa5;padding-left:clamp(14px,1.4vw,22px);font-weight:400;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;min-height:32px;}
.chip{font-family:'Disket Mono Local',monospace;font-size:clamp(8.5px,0.72vw,11px);padding:clamp(3px,0.34vh,5px) clamp(9px,0.85vw,14px);border-radius:4px;letter-spacing:0.04em;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.chip.develop{color:#67e8f9;border:1px solid rgba(34,211,238,0.25);background:rgba(34,211,238,0.07);}
.chip.deploy{color:#93c5fd;border:1px solid rgba(59,130,246,0.25);background:rgba(59,130,246,0.07);}
.chip.operate{color:#c4b5fd;border:1px solid rgba(167,139,250,0.25);background:rgba(167,139,250,0.07);}
.chip.maintain{color:#6ee7b7;border:1px solid rgba(52,211,153,0.25);background:rgba(52,211,153,0.07);}
.chip{overflow:hidden;white-space:nowrap;}

.arrow-nav{display:flex;align-items:center;gap:10px;margin-top:16px;}
@keyframes pulse-btn{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);border-color:#2a4a64;}50%{box-shadow:0 0 0 5px rgba(255,255,255,0.05);border-color:#4a7a9a;}}
.arrow-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;border:1px solid #2a4a64;background:rgba(255,255,255,0.03);cursor:pointer;transition:border-color 0.2s,color 0.2s,background 0.2s;color:#7a9ab8;animation:pulse-btn 2.5s ease-in-out infinite;}
.arrow-btn:hover{border-color:var(--active-color);color:var(--active-color);background:rgba(255,255,255,0.06);animation:none;}
.arrow-btn svg{display:block;}
.arrow-step{font-size:12px;font-weight:500;letter-spacing:0.14em;color:#7a9ab8;min-width:48px;text-align:center;}
@keyframes pulse-pause{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);opacity:0.65;}50%{box-shadow:0 0 0 4px rgba(255,255,255,0.05);opacity:1;}}
.pause-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid #2a4a64;background:rgba(255,255,255,0.02);cursor:pointer;color:#7a9ab8;transition:all 0.2s;animation:pulse-pause 2.5s ease-in-out infinite;}
.pause-btn:hover{border-color:var(--active-color);color:var(--active-color);background:rgba(255,255,255,0.05);animation:none;}
.pause-btn svg{display:block;}
.arc-progress{height:2px;width:48px;background:#0e1828;border-radius:1px;margin-top:6px;overflow:hidden;}
.arc-progress-fill{height:100%;width:0%;background:var(--active-color,#22d3ee);border-radius:1px;}













.fading{opacity:0;}

/* ══════════════════════════════════════
   HOW PANEL (architecture stack)
══════════════════════════════════════ */
/* How page title */
.how-title-block{margin-bottom:clamp(20px,2.4vh,40px);}
.how-kicker{font-family:'Manrope Local',sans-serif;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:#22d3ee;margin-bottom:8px;}
.how-title{font-size:clamp(20px,2.7vw,42px);color:#e2e8f0;margin-bottom:8px;}
.how-subtitle{font-size:clamp(13px,1.12vw,17px);color:#8da4be;line-height:1.64;font-weight:300;max-width:min(800px,70vw);}

/* Collapsible layer */
.collapsible-layer{border-radius:6px;overflow:hidden;margin-bottom:0;}
.middle-stack-preview{
  position:relative;
  margin-top:clamp(8px,1vh,14px);
}
.middle-stack-preview-logo{
  display:none;
  justify-content:center;
  width:100%;
  margin-bottom:10px;
}
.middle-stack-preview-logo-svg{
  width:clamp(96px,12vw,150px);
  height:auto;
  color:rgba(226,232,240,0.82);
}
.middle-stack-preview:not(:has(.collapsible-layer.open)){
  padding:clamp(12px,1.3vh,20px) clamp(18px,2vw,28px) clamp(14px,1.2vh,20px);
  border:1px solid rgba(34,211,238,0.12);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(12,16,24,0.82) 0%,rgba(12,16,24,0.58) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}
.middle-stack-preview:not(:has(.collapsible-layer.open)) .middle-stack-preview-logo{
  display:flex;
}
.layer-toggle{display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,1vw,18px) clamp(12px,1.4vw,24px);cursor:pointer;background:#0c1018;border:1px solid #1e2e44;border-radius:6px;transition:all 0.2s;user-select:none;}
.collapsible-layer.open .layer-toggle{border-radius:6px 6px 0 0;border-bottom:none;}
.layer-toggle:hover{background:#0e1520;border-color:#2a3e58;}
.layer-toggle-left{display:flex;align-items:center;gap:10px;}
.layer-chevron{width:16px;height:16px;color:#334e6a;flex-shrink:0;transition:transform 0.25s,opacity 0.2s,filter 0.2s;}
.collapsible-layer.open .layer-chevron{transform:rotate(180deg);}
.layer-toggle-label{font-size:clamp(11px,0.94vw,14px);color:#aac0d8;}
.layer-toggle-hint{font-family:'Manrope Local',sans-serif;font-size:clamp(10px,0.85vw,12px);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:#5a8aaa;}
.collapsible-layer.open .layer-toggle-hint{display:none;}
@keyframes expand-pulse{
  0%,100%{opacity:0.62;filter:drop-shadow(0 0 0 rgba(144,205,244,0));}
  50%{opacity:1;filter:drop-shadow(0 0 12px rgba(144,205,244,0.42));}
}
.collapsible-layer:not(.open) .layer-chevron,
.collapsible-layer:not(.open) .layer-toggle-hint{
  animation:expand-pulse 1.45s ease-in-out infinite;
}
.layer-body{
  border:1px solid #1e2e44;border-top:none;border-radius:0 0 6px 6px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.collapsible-layer.open .layer-body{
  max-height:2000px;opacity:1;
  transition:max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.foundation-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(10px,1vw,18px) clamp(12px,1.4vw,24px);
  cursor:pointer;
  background:#0c1018;
  border:1px solid #1e2e44;
  border-radius:6px;
  transition:all 0.2s;
  user-select:none;
}
.collapsible-layer.open .foundation-toggle{border-radius:6px 6px 0 0;border-bottom:none;}
.foundation-toggle:hover{background:#0e1520;border-color:#2a3e58;}
.f-name-collapsed{font-size:clamp(12px,1.02vw,16px);color:#e2e8f0;}
.collapsible-layer.open .foundation-toggle .layer-chevron{transform:rotate(180deg);}
.foundation-toggle .layer-toggle-hint{font-family:'Manrope Local',sans-serif;font-size:clamp(10px,0.85vw,12px);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:#5a8aaa;}
.collapsible-layer.open .foundation-toggle .layer-toggle-hint{display:none;}

.how-wrap{
  position:relative;z-index:1;
  width:100%;
  padding:clamp(20px,3vh,56px) clamp(24px,5vw,96px) clamp(28px,4vh,64px);
  display:flex;flex-direction:column;gap:0;
}

/* LLM bar, left half only */
.llm-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:clamp(6px,0.8vh,12px);}
.llm-half{display:flex;flex-direction:column;}
.llm-spacer{}
.conn-row-full{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;height:24px;}
.conn-row.four{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:24px;}

/* LLM bar */
.llm-bar{
  border:1px solid #1e2e44;border-radius:6px;
  padding:clamp(10px,1vw,18px) clamp(12px,1.4vw,24px);background:#0c1018;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:0;
}
.llm-left{display:flex;align-items:center;gap:12px;}
.llm-badge{font-family:'Manrope Local',sans-serif;font-size:clamp(9px,0.8vw,11px);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:#6a9abf;border:1px solid #2a4a62;border-radius:3px;padding:2px 7px;background:rgba(255,255,255,0.02);}
.llm-title{font-size:clamp(11px,0.94vw,14px);color:#aac0d8;}
.llm-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.llm-chip{font-family:'Manrope Local',sans-serif;font-size:9.5px;padding:3px 9px;border-radius:3px;border:1px solid #1a2e42;color:#7a9ab8;background:rgba(255,255,255,0.02);}

/* Connector row */
.conn-row{display:grid;gap:8px;height:24px;}
.conn-row.four{grid-template-columns:1fr 1fr 1fr 1fr;}
.conn-row.agentic-only{grid-template-columns:1fr 1fr 1fr 1fr;}
.conn-cell{display:flex;align-items:center;justify-content:center;}
.conn-cell svg{opacity:0.55;}
.conn-cell.empty svg{opacity:0;}

/* ── Flowing connector line animations ── */
@keyframes flow-dash-1{0%{stroke-dashoffset:12;}100%{stroke-dashoffset:0;}}
@keyframes flow-dash-2{0%{stroke-dashoffset:12;}100%{stroke-dashoffset:0;}}
@keyframes flow-dash-3{0%{stroke-dashoffset:12;}100%{stroke-dashoffset:0;}}
@keyframes flow-dash-4{0%{stroke-dashoffset:12;}100%{stroke-dashoffset:0;}}
.conn-cell.flow-1 line{stroke-dasharray:3,3;animation:flow-dash-1 0.45s linear infinite;}
.conn-cell.flow-2 line{stroke-dasharray:3,3;animation:flow-dash-2 0.6s linear infinite;}
.conn-cell.flow-3 line{stroke-dasharray:3,3;animation:flow-dash-3 0.52s linear infinite;}
.conn-cell.flow-4 line{stroke-dasharray:3,3;animation:flow-dash-4 0.38s linear infinite;}

/* App layer grid */
.app-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:clamp(6px,0.6vw,12px);margin-bottom:0;}

/* Agentic group bracket */
.agentic-group{
  grid-column:1/3;
  border:1px solid #1a3a52;border-radius:8px;
  background:rgba(34,211,238,0.025);
  overflow:hidden;
}
.agentic-group-label{
  font-family:'Manrope Local',sans-serif;font-size:clamp(9px,0.8vw,11px);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
  color:#5a9abf;padding:clamp(6px,0.7vw,12px) clamp(12px,1.4vw,24px);border-bottom:1px solid #0e2030;
}

.agentic-inner{display:grid;grid-template-columns:1fr 1fr;}
.agentic-divider{border-right:1px solid #0e2030;}

/* DevOps group */
.devops-group{
  grid-column:3/5;
  border:1px solid #1a2a44;border-radius:8px;
  background:rgba(59,130,246,0.025);
  overflow:hidden;
}
.devops-group-label{
  font-family:'Manrope Local',sans-serif;font-size:clamp(9px,0.8vw,11px);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
  color:#5a7abf;padding:clamp(6px,0.7vw,12px) clamp(12px,1.4vw,24px);border-bottom:1px solid #0e1828;
}
.devops-inner{display:grid;grid-template-columns:1fr 1fr;}
.devops-divider{border-right:1px solid #0e1828;}

/* Pillar card inside groups */
.pillar{padding:clamp(14px,1.4vw,28px) clamp(14px,1.4vw,28px) clamp(16px,1.6vw,32px);}
.pillar-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:14px 18px;user-select:none;transition:background 0.2s;}
.pillar-header:hover{background:rgba(255,255,255,0.02);}
.pillar-eyebrow{font-family:'Manrope Local',sans-serif;font-size:clamp(8px,0.68vw,10px);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;margin-bottom:clamp(3px,0.4vw,6px);}
.pillar-name{font-family:'Manrope Local',sans-serif;font-size:clamp(10px,0.88vw,14px);font-weight:600;color:#e2e8f0;margin-bottom:0;line-height:1.16;}
.pillar-chevron{width:14px;height:14px;flex-shrink:0;opacity:0.35;transition:transform 0.25s,opacity 0.2s;color:currentColor;}
.pillar.open .pillar-chevron{transform:rotate(180deg);opacity:0.7;}
.pillar-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;padding:0 clamp(14px,1.4vw,28px);}
.pillar.open .pillar-body{max-height:300px;padding-bottom:clamp(12px,1.2vw,20px);}
.pillar-bullets{display:flex;flex-direction:column;gap:clamp(6px,0.7vw,12px);margin-top:clamp(8px,1vw,16px);}
.pbullet{font-size:clamp(11px,1vw,16px);color:#8da4be;line-height:1.58;font-weight:300;padding-left:clamp(10px,1vw,18px);position:relative;}
.pbullet::before{content:'—';position:absolute;left:0;color:#1e3a52;font-size:10px;}

.pillar.cyan .pillar-eyebrow{color:#22d3ee;} .pillar.cyan .pillar-chevron{color:#22d3ee;}
.pillar.violet .pillar-eyebrow{color:#a78bfa;} .pillar.violet .pillar-chevron{color:#a78bfa;}
.pillar.blue .pillar-eyebrow{color:#3b82f6;} .pillar.blue .pillar-chevron{color:#3b82f6;}
.pillar.green .pillar-eyebrow{color:#34d399;} .pillar.green .pillar-chevron{color:#34d399;}

/* Foundation */
.foundation{border:1px solid #1e2e44;border-radius:8px;overflow:hidden;background:rgba(245,158,11,0.02);margin-top:clamp(6px,0.8vh,12px);}
.foundation-header{
  font-family:'Manrope Local',sans-serif;font-size:clamp(9px,0.8vw,11px);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
  color:#c08840;text-align:center;padding:8px;
  background:rgba(245,158,11,0.04);border-bottom:1px solid rgba(245,158,11,0.1);
}
.foundation-layer{margin-bottom:0;}
.foundation-layer .foundation-toggle{padding:clamp(10px,1vw,18px) clamp(12px,1.4vw,24px);}
.foundation-layer .layer-body{
  border:none;
  border-top:1px solid rgba(245,158,11,0.08);
  border-radius:0;
  background:transparent;
}
.foundation-layer-body{padding:0;}
.foundation-section{padding:clamp(12px,1.2vw,20px) clamp(16px,2vw,32px);}
.foundation-divider{height:1px;background:rgba(245,158,11,0.08);}
.f-eyebrow{font-family:'Manrope Local',sans-serif;font-size:clamp(8px,0.68vw,10px);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#c08840;margin-bottom:4px;}
.f-name{font-family:'Manrope Local',sans-serif;font-size:clamp(10px,0.88vw,13px);font-weight:600;color:#e2e8f0;margin-bottom:4px;line-height:1.16;}
.f-desc{font-size:clamp(12px,1.02vw,16px);color:#8da4be;line-height:1.58;font-weight:300;}
.f-chips{display:flex;flex-wrap:wrap;gap:clamp(4px,0.4vw,8px);margin-top:8px;}
.f-chip{font-family:'Disket Mono Local',monospace;font-size:clamp(8px,0.66vw,10px);padding:clamp(2px,0.28vw,4px) clamp(6px,0.65vw,11px);border-radius:3px;background:rgba(245,158,11,0.05);border:1px solid rgba(245,158,11,0.15);color:#a07030;letter-spacing:0.04em;}

/* OT bar */
.ot-conn{height:20px;display:flex;align-items:center;justify-content:center;margin-top:clamp(6px,0.8vh,12px);}
.ot-conn svg{opacity:0.2;}
.ot-bar{
  border:1px solid #1a2030;border-radius:8px;padding:clamp(10px,1.2vw,20px) clamp(16px,2vw,32px);
  background:rgba(71,85,105,0.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ot-label{font-family:'Manrope Local',sans-serif;font-size:clamp(9px,0.8vw,11px);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#6a9abf;margin-bottom:4px;}
.ot-name{font-size:clamp(10px,0.88vw,13px);color:#94b4d0;}
.ot-vendors{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ot-vendor{font-size:9.5px;font-weight:300;color:#5a7a9a;padding:3px 9px;border:1px solid #1a2a3a;border-radius:4px;}

/* ══ PLACEHOLDER PANELS ══ */
.placeholder-wrap{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  flex:1;padding:48px;
}
.placeholder-inner{text-align:center;max-width:400px;}
.placeholder-inner h3{font-size:22px;font-weight:300;color:#334e6a;margin-bottom:8px;}
.placeholder-inner p{font-size:13px;color:#2a3e52;font-weight:300;}

/* ══ WHY PANEL ══ */
.why-wrap{position:relative;z-index:1;width:100%;padding:clamp(24px,3vh,56px) clamp(24px,5vw,96px);}

.why-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid #111927;}
.why-kicker{font-family:'Space Mono Local',monospace;font-size:clamp(10px,1vw,13px);letter-spacing:0.22em;text-transform:uppercase;color:#22d3ee;margin-bottom:10px;}
.why-headline{font-size:clamp(16px,1.9vw,30px);color:#e2e8f0;}
.why-hero-right p{font-size:clamp(13px,1.15vw,17px);color:#8da4be;line-height:1.68;font-weight:300;padding-top:18px;}

.why-sections{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.why-section{padding:26px 28px;background:#0c1018;border:1px solid #111927;border-radius:8px;
  transform-style:preserve-3d;transition:border-color 0.2s,background 0.2s,transform 0.15s ease-out,box-shadow 0.15s ease-out;
  will-change:transform;}
.why-section:hover{border-color:#1e2e44;background:#0e1420;}
.why-section-num{font-family:'Space Mono Local',monospace;font-size:11px;letter-spacing:0.2em;color:#22d3ee;margin-bottom:10px;}
.why-section-title{font-family:'Disket Mono Local',monospace;font-size:clamp(10px,0.82vw,13px);font-weight:400;color:#c8d8e8;margin-bottom:10px;line-height:1.22;}
.why-section-body{font-size:clamp(13px,1.2vw,18px);color:#8da4be;line-height:1.7;font-weight:300;}

/* ══ WHO PANEL ══ */
.who-wrap{position:relative;z-index:1;width:100%;padding:clamp(24px,3vh,56px) clamp(24px,5vw,96px);}
.who-section-label{font-family:'Space Mono Local',monospace;font-size:clamp(10px,1vw,13px);letter-spacing:0.22em;text-transform:uppercase;color:#22d3ee;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #111927;}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:0 auto;max-width:640px;}
.team-card{display:flex;flex-direction:column;gap:0;}
.team-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;border-radius:6px;filter:grayscale(20%);margin-bottom:12px;}
.team-name{font-size:12px;color:#e2e8f0;margin-bottom:2px;}
.team-title{font-family:'Space Mono Local',monospace;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:#5a7a9a;}
.talent-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.talent-name{font-size:13px;font-weight:600;color:#6a8faf;padding:6px 14px;border:1px solid #111927;border-radius:4px;letter-spacing:0.04em;}
.customer-statement{font-size:15px;color:#8da4be;font-weight:300;line-height:1.7;}
.customer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:880px;}
.customer-card{background:#0c1018;border:1px solid #111927;border-radius:6px;padding:20px 18px;
  transform-style:preserve-3d;transition:border-color 0.2s,background 0.2s,transform 0.15s ease-out,box-shadow 0.15s ease-out;
  will-change:transform;}
.customer-card--future{opacity:0.4;border-style:dashed;}
.customer-name{font-size:11px;color:#c8d8e8;margin-bottom:4px;}
.customer-vertical{font-family:'Space Mono Local',monospace;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:#4a6a8a;}

.investor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.investor-card{background:#0c1018;border:1px solid #111927;border-radius:6px;padding:20px 18px;display:flex;align-items:center;justify-content:center;}
.investor-name{font-size:14px;font-weight:600;color:#7a9ab8;letter-spacing:0.04em;text-align:center;}

/* ══ MOBILE RESPONSIVE ══ */
@media (max-width: 768px) {

  /* Navbar */
  .navbar{padding:0 20px;height:56px;}
  .nav-logo svg{height:18px;}
  .nav-link{font-size:11px;padding:6px 10px;letter-spacing:0.02em;}

  /* Hero */
  .hero-block{padding:20px 20px 0;}
  .page-headline{font-size:26px;}
  .page-sub{font-size:13px;white-space:normal;max-width:100%;}

  /* Platform flywheel */
  .main{flex-direction:column;gap:24px;padding:16px 20px;}
  .flywheel-wrap{display:flex;justify-content:center;}
  #fw{width:300px;height:300px;}
  .copy-headline{font-size:20px;min-height:auto;}
  .copy-body{font-size:13px;}
  .arrow-nav{margin-top:12px;}

  /* How It Works */
  .how-wrap{padding:20px 20px 28px;}
  .how-title{font-size:20px;}
  .how-subtitle{font-size:12px;}
  .llm-row{grid-template-columns:1fr;}
  .llm-spacer{display:none;}
  .llm-bar{flex-direction:column;align-items:flex-start;gap:8px;}
  .llm-chips{justify-content:flex-start;}
  .conn-row-full{grid-template-columns:1fr 1fr;height:16px;}
  .middle-stack-preview:not(:has(.collapsible-layer.open)){padding:12px 14px 12px;}
  .app-grid{grid-template-columns:1fr;}
  .agentic-group{grid-column:auto;}
  .devops-group{grid-column:auto;}
  .agentic-inner{grid-template-columns:1fr;}
  .agentic-divider{border-right:none;border-bottom:1px solid #0e2030;}
  .devops-inner{grid-template-columns:1fr;}
  .devops-divider{border-right:none;border-bottom:1px solid #0e1828;}
  .foundation-section{padding:14px 16px;}
  .ot-bar{flex-direction:column;align-items:flex-start;gap:12px;}
  .ot-vendors{justify-content:flex-start;}
  .conn-row.four{grid-template-columns:1fr 1fr;}

  /* About / Why */
  .why-wrap{padding:20px 20px 28px;}
  .who-wrap{padding:20px 20px 28px;}
  .why-hero{grid-template-columns:1fr;gap:16px;}
  .why-headline{font-size:20px;}
  .why-sections{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr 1fr;gap:16px;max-width:100%;}
  .team-photo{border-radius:4px;}
  .customer-grid{grid-template-columns:1fr;}

  /* Chips */
  .chips{gap:6px;}
  .chip{font-size:8.5px;padding:4px 8px;}
  .f-chips{gap:4px;}
  .f-chip{font-size:7px;}
}

@media (max-width: 480px) {
  .nav-link{font-size:10px;padding:5px 7px;}
  .page-headline{font-size:22px;}
  #fw{width:260px;height:260px;}
  .why-headline{font-size:18px;}
  .team-grid{grid-template-columns:1fr;}
  .team-photo{max-width:220px;margin:0 auto;}
  .team-card{align-items:center;text-align:center;}
}

/* ══ CONTACT PANEL ══ */
.contact-wrap{
  position:relative;z-index:1;
  width:100%;
  padding:clamp(32px,4vh,72px) clamp(24px,5vw,96px);
  display:grid;grid-template-columns:1fr 1.6fr;
  gap:clamp(40px,5vw,100px);align-items:start;
}
.contact-title{font-size:clamp(20px,2.7vw,40px);color:#e2e8f0;margin-bottom:12px;}
.contact-sub{font-size:clamp(15px,1.4vw,21px);color:#8da4be;line-height:1.7;font-weight:300;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field-label{font-family:'Space Mono Local',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:#22d3ee;}
.field-input{
  background:#0c1018;border:1px solid #1e2e44;border-radius:6px;
  padding:clamp(10px,1vh,16px) clamp(12px,1.2vw,20px);font-family:'Manrope Local',sans-serif;font-size:clamp(14px,1.2vw,17px);font-weight:300;
  color:#e2e8f0;outline:none;transition:border-color 0.2s;width:100%;
}
.field-input::placeholder{color:#2a4a64;}
.field-input:focus{border-color:#22d3ee;}
.field-textarea{resize:vertical;min-height:120px;line-height:1.6;}
.field-submit{
  font-family:'Manrope Local',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:0.04em;padding:12px 28px;border-radius:6px;
  background:#22d3ee;color:#05070c;border:none;cursor:pointer;
  transition:all 0.2s;margin-top:4px;
}
.field-submit:hover{background:#3ae0f5;}
.form-success{display:none;margin-top:14px;font-size:13px;color:#34d399;font-weight:300;}

/* Contact page large logo footer */
.contact-logo-footer{
  width:100%;
  padding:clamp(40px,6vh,80px) clamp(24px,5vw,80px) 0;
  display:flex;justify-content:center;align-items:center;
  border-top:1px solid rgba(255,255,255,0.04);
  margin-top:clamp(40px,6vh,80px);
}
.contact-logo-svg{
  width:min(92vw,1100px);
  height:auto;
  color:#ffffff;
}

@media(max-width:768px){
  .contact-wrap{grid-template-columns:1fr;gap:32px;padding:28px 20px;}
  .field-row{grid-template-columns:1fr;}
}

/* Factory background on platform page */
#panel-what {
  background-image:
    linear-gradient(rgba(8,9,13,0.88) 0%, rgba(8,9,13,0.88) 100%),
    url('../images/bg-factory.jpg');
  background-size:cover;
  background-position:center 40%;
  background-blend-mode:normal;
}

/* Refinery background on about page */
#panel-about {
  background-image:
    linear-gradient(rgba(8,9,13,0.84) 0%, rgba(8,9,13,0.84) 100%),
    url('../images/bg-refinery-about.jpg');
  background-size:cover;
  background-position:center 45%;
}

/* Refinery background on how it works page */
#panel-how {
  background-image:
    linear-gradient(rgba(8,9,13,0.95) 0%, rgba(8,9,13,0.95) 100%),
    url('../images/bg-refinery-how.jpg');
  background-size:cover;
  background-position:center 60%;
  background-attachment:fixed;
}

/* Iron Dome background on contact page */
#panel-contact {
  background-image:
    linear-gradient(rgba(8,9,13,0.84) 0%, rgba(8,9,13,0.84) 100%),
    url('../images/bg-irondome.jpg');
  background-size:cover;
  background-position:center 40%;
}