/* ============================================================
 ANTIGRAVITY DESIGN SYSTEM - General Portfolio
 Visual language: Dark glassmorphism, Outfit, neon purple
 Structure: Everest Tower component architecture
 ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&display=swap');

/* --- Reset --- */
*, *::before, *::after {
 box-sizing: border-box;
}

/* --- Design Tokens --- */
:root {
 /* Surfaces */
 --bg-deep: #050508;
 --bg-surface: #0a0a10;
 --bg-panel: rgba(255, 255, 255, 0.03);
 --bg-panel-hover: rgba(255, 255, 255, 0.08);
 --bg-proof: rgba(255, 255, 255, 0.015);
 --glass-border: rgba(255, 255, 255, 0.08);
 --glass-highlight: rgba(255, 255, 255, 0.15);
 --glass-blur: blur(24px) saturate(120%);

 /* Accents - Purple / Lilac / Cream palette */
 --accent: #9b6dff;
 --accent-secondary: #764ba2;
 --accent-glow: #d4a5ff;
 --accent-muted: #c9b8ff;
 --accent-deep: #6e48aa;
 --accent-warm: #9d50bb;
 --accent-cream: #f0e8d8;

 /* Semantic */
 --success: #43e97b;
 --warning: #feca57;
 --danger: #ff6348;
 --info: #b388ff;

 /* Before/After metric colors */
 --metric-before-bg: rgba(255, 99, 72, 0.12);
 --metric-before-text: #ff6b6b;
 --metric-after-bg: rgba(67, 233, 123, 0.12);
 --metric-after-text: #43e97b;
 --metric-verified-bg: rgba(155, 109, 255, 0.12);
 --metric-verified-text:#c9b8ff;

 /* Text */
 --text-main: rgba(255, 255, 255, 0.92);
 --text-body: rgba(255, 255, 255, 0.72);
 --text-muted: rgba(255, 255, 255, 0.55);
 --text-faint: rgba(255, 255, 255, 0.42);

 /* Typography */
 --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;

 /* Spacing */
 --page-x: clamp(20px, 5vw, 72px);
 --section-y: 72px;
 --section-y-tight: 56px;
 --radius-panel: 24px;
 --radius-card: 16px;
 --radius-chip: 4px;

 /* Type Scale */
 --type-hero: 60px;
 --type-section: 36px;
 --type-credential-heading: 24px;
 --type-body-lg: 18px;
}


/* --- Base --- */
html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 background: var(--bg-deep);
 color: var(--text-main);
 font-family: var(--font);
 font-weight: 300;
 line-height: 1.6;
 text-wrap: pretty;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

a {
 color: var(--accent-muted);
 text-decoration: none;
 transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
 color: #ffffff;
}

/* --- Global Focus Visibility (Keyboard Accessibility) --- */
*:focus-visible {
 outline: 2px solid var(--accent-muted);
 outline-offset: 3px;
}

.portfolio-card:focus-visible,
.evidence-panel:focus-visible,
.proof-panel:focus-visible,
.tool-system-card:focus-visible {
 outline: 2px solid var(--accent-muted);
 outline-offset: 2px;
 box-shadow: 0 0 0 4px rgba(155, 109, 255, 0.2);
}

.footer-links a:focus-visible {
 outline: 2px solid var(--accent-muted);
 outline-offset: 2px;
 background: rgba(155, 109, 255, 0.15);
}

.chip:focus-visible {
 outline: 2px solid var(--accent-muted);
 outline-offset: 2px;
}

img {
 display: block;
 max-width: 100%;
}

/* --- Glass Panel Primitive --- */
.glass-panel {
 backdrop-filter: var(--glass-blur);
 -webkit-backdrop-filter: var(--glass-blur);
 background: linear-gradient(
 145deg,
 rgba(255, 255, 255, 0.05) 0%,
 rgba(255, 255, 255, 0.01) 100%
 );
 border: 1px solid var(--glass-border);
 border-top-color: var(--glass-highlight);
 border-left-color: var(--glass-highlight);
 box-shadow:
 0 20px 40px rgba(0, 0, 0, 0.4),
 inset 0 0 20px rgba(255, 255, 255, 0.02);
 border-radius: var(--radius-panel);
 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 overflow: hidden;
 position: relative;
}

.glass-panel::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(
 90deg,
 transparent,
 rgba(255, 255, 255, 0.04),
 transparent
 );
 transform: skewX(-15deg);
 transition: 0.6s;
 pointer-events: none;
}

.glass-panel:hover {
 background: linear-gradient(
 145deg,
 rgba(255, 255, 255, 0.08) 0%,
 rgba(255, 255, 255, 0.02) 100%
 );
 box-shadow:
 0 30px 60px rgba(0, 0, 0, 0.5),
 inset 0 0 20px rgba(255, 255, 255, 0.04);
 transform: translateY(-2px);
 border-color: rgba(255, 255, 255, 0.15);
}

.glass-panel:hover::before {
 left: 150%;
 transition: 0.7s ease-in-out;
}


/* --- Layout --- */
.site-shell {
 overflow: hidden;
 position: relative;
 min-height: 100vh;
}

.container {
 max-width: 1120px;
 margin: 0 auto;
}

section {
 padding: var(--section-y) var(--page-x);
 position: relative;
 background: rgba(5, 5, 8, 0.88);
}


/* --- Topbar --- */
.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 18px clamp(20px, 4vw, 56px);
 background: rgba(5, 5, 8, 0.85);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--glass-border);
 color: #ffffff;
 position: relative;
 z-index: 100;
}

.brand-mark {
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 background: linear-gradient(135deg, #fff 30%, #c9b8ff 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.topbar nav {
 display: flex;
 align-items: center;
 gap: 18px;
 color: var(--text-muted);
 font-size: 13px;
 font-weight: 600;
}

.topbar a {
 text-decoration: none;
 color: var(--text-muted);
 transition: color 0.2s ease;
}

.topbar a:hover,
.topbar a:focus-visible {
 color: #ffffff;
}

.topbar a[aria-current="page"] {
 color: #ffffff;
}


/* --- Action Links --- */
.action-row {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 28px;
}

.hero--home .action-row,
.cta-row {
 justify-content: center;
}

.btn {
 display: inline-flex;
 min-height: 44px;
 align-items: center;
 justify-content: center;
 border: 1px solid rgba(155, 109, 255, 0.35);
 border-radius: 6px;
 background: rgba(155, 109, 255, 0.92);
 color: #ffffff;
 padding: 12px 20px;
 font-size: 13px;
 font-weight: 700;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 transition: all 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
 border-color: rgba(212, 165, 255, 0.55);
 background: var(--accent-glow);
 color: var(--bg-deep);
 box-shadow: 0 10px 24px rgba(155, 109, 255, 0.2);
}

.btn--secondary {
 background: rgba(255, 255, 255, 0.035);
 color: var(--accent-muted);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
 background: rgba(155, 109, 255, 0.16);
 color: #ffffff;
}


/* --- Hero --- */
.hero {
 background:
 radial-gradient(ellipse at 50% 40%, rgba(155, 109, 255, 0.08), transparent 60%),
 linear-gradient(180deg, rgba(5, 5, 8, 0.92) 0%, rgba(10, 10, 16, 0.95) 100%);
 color: #ffffff;
 padding: 88px var(--page-x) 76px;
 position: relative;
 overflow: hidden;
}

.hero-inner {
 max-width: 1120px;
 margin: 0 auto;
 position: relative;
 z-index: 2;
}

.eyebrow {
 margin-bottom: 18px;
 color: var(--accent-muted);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

h1 {
 max-width: 840px;
 margin: 0 0 22px;
 font-size: var(--type-hero);
 font-weight: 700;
 letter-spacing: -0.02em;
 line-height: 1.18;
 padding-bottom: 0.08em;
 text-wrap: balance;
 background: linear-gradient(135deg, #ffffff 20%, #c9b8ff 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.hero-copy {
 max-width: 740px;
 margin: 0;
 color: var(--text-body);
 font-size: 20px;
 font-weight: 300;
 text-wrap: pretty;
}

.hero-copy strong {
 color: #ffffff;
 font-weight: 600;
}

.tech-row {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 32px;
}

.hero-inner .tech-row {
 max-width: 820px; /* Constrain width to prevent single-item orphans on wrap */
}

.chip {
 border: 1px solid rgba(155, 109, 255, 0.25);
 border-radius: var(--radius-chip);
 background: rgba(155, 109, 255, 0.08);
 padding: 7px 14px;
 color: var(--accent-muted);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 transition: all 0.3s ease;
}

.chip:hover {
 background: rgba(155, 109, 255, 0.18);
 border-color: rgba(155, 109, 255, 0.45);
 box-shadow: 0 0 12px rgba(155, 109, 255, 0.15);
}


/* --- Typography --- */
h2 {
 margin: 0 0 18px;
 font-size: var(--type-section);
 font-weight: 700;
 letter-spacing: -0.02em;
 line-height: 1.12;
 text-wrap: balance;
 color: var(--text-main);
}

h3, h4, h5, h6 {
 text-wrap: balance;
}

.section-kicker {
 margin-bottom: 10px;
 color: var(--accent-muted);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}


/* --- Intro / Narrative Grid --- */
.intro-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
 gap: 36px;
 align-items: start;
}

.lead-copy {
 margin: 0;
 color: var(--text-body);
 font-size: 18px;
 font-weight: 300;
 line-height: 1.78;
 text-wrap: pretty;
}

.lead-copy + .lead-copy {
 margin-top: 18px;
}


/* --- Metric Strip --- */
.metric-strip {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
}

.metric {
 min-height: 142px;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: var(--bg-panel);
 padding: 18px 18px 16px;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.metric .metric-value {
 font-size: 20px !important; /* Prevent text spills on long values */
 white-space: normal !important; /* Allow wrapping */
 line-height: 1.15 !important;
}

.metric-name {
 margin: 0 0 14px;
 color: var(--text-main);
 font-size: 13px;
 font-weight: 700;
 line-height: 1.25;
}

.metric-pair {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: stretch;
 gap: 10px;
 margin-bottom: 12px;
}

.metric-pair.single {
 grid-template-columns: 1fr;
}

.metric-point {
 min-width: 0;
 border-radius: 8px;
 background: rgba(255, 255, 255, 0.04);
 padding: 10px 9px;
}

.metric-point.before {
 background: var(--metric-before-bg);
}

.metric-point.after {
 background: var(--metric-after-bg);
}

.metric-point.verified {
 background: var(--metric-verified-bg);
}

.metric-point-label {
 display: block;
 margin-bottom: 5px;
 color: var(--text-muted);
 font-size: 10px;
 font-weight: 700;
 line-height: 1;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.metric-point-value {
 display: block;
 color: var(--text-main);
 font-size: 20px;
 font-weight: 700;
 line-height: 1;
 white-space: nowrap;
}

.metric-point-value.phrase {
 font-size: 18px;
}

.metric-point.before .metric-point-value {
 color: var(--metric-before-text);
}

.metric-point.after .metric-point-value,
.metric-point.verified .metric-point-value {
 color: var(--metric-after-text);
}

.metric-label {
 color: var(--text-muted);
 font-size: 12px;
 font-weight: 500;
 line-height: 1.45;
 text-wrap: pretty;
}


/* --- Proof Section --- */
.proof-section {
 background: rgba(5, 5, 8, 0.92);
}

.proof-grid {
 display: grid;
 gap: 24px;
}

.proof-panel {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 overflow: hidden;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 transition: all 0.4s ease;
}

.proof-panel:hover {
 border-color: rgba(255, 255, 255, 0.15);
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
 transform: translateY(-2px);
}

.proof-panel img {
 width: 100%;
 height: auto;
}

.proof-caption {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 16px;
 align-items: center;
 border-top: 1px solid var(--glass-border);
 padding: 16px 18px;
}

.proof-title {
 margin: 0 0 4px;
 font-size: 15px;
 font-weight: 700;
 color: var(--text-main);
}

.proof-detail {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 text-wrap: pretty;
}

.proof-tag {
 border-radius: 4px;
 background: rgba(67, 233, 123, 0.1);
 padding: 7px 12px;
 color: var(--success);
 font-size: 12px;
 font-weight: 700;
 white-space: nowrap;
 border: 1px solid rgba(67, 233, 123, 0.2);
}

.media-grid {
 display: grid;
 grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
 gap: 24px;
 margin-top: 24px;
}

.video-frame {
 position: relative;
 width: 100%;
 padding-top: 55%;
 background: var(--bg-surface);
 border-radius: var(--radius-card);
 overflow: hidden;
}

.video-frame iframe,
.video-frame video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 border: 0;
}

/* --- AiSA Generator Case Study Components --- */
.launch-hook {
 margin: 0;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 padding: 18px;
 overflow: hidden;
}

.launch-hook a {
 display: block;
}

.launch-hook img {
 width: 100%;
 max-height: 460px;
 object-fit: contain;
 border-radius: 14px;
}

.value-snapshot {
 background: rgba(5, 5, 8, 0.92);
}

.snapshot-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 14px;
 margin-top: 26px;
}

.snapshot-card {
 min-height: 180px;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background:
 linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
 var(--bg-panel);
 padding: 18px;
}

.snapshot-label {
 margin: 0 0 22px;
 color: var(--accent-muted);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.08em;
 line-height: 1.2;
 text-transform: uppercase;
}

.snapshot-value {
 margin: 0 0 10px;
 color: var(--text-main);
 font-size: 19px;
 font-weight: 750;
 line-height: 1.16;
}

.snapshot-copy {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
}

.story-panel-inner {
 display: grid;
 grid-template-columns: minmax(0, 1.12fr) minmax(240px, 340px);
 gap: 30px;
 align-items: start;
 padding: 28px;
}

.story-copy p {
 margin: 0 0 16px;
 color: var(--text-body);
 font-size: 16px;
 line-height: 1.72;
}

.story-copy h3,
.demo-copy h3 {
 margin: 0 0 16px;
 color: var(--text-main);
 font-size: 24px;
 font-weight: 760;
 line-height: 1.16;
}

.story-kicker {
 margin: 0 0 10px;
 color: var(--accent-muted);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.08em;
 line-height: 1.2;
 text-transform: uppercase;
}

.story-callout {
 border-left: 3px solid var(--accent);
 margin: 20px 0;
 padding: 12px 0 12px 16px;
 color: var(--text-main);
 font-size: 17px;
 font-weight: 700;
 line-height: 1.45;
}

.story-moves,
.demo-steps {
 display: grid;
 gap: 8px;
 margin-top: 18px;
}

.demo-step {
 display: grid;
 grid-template-columns: 82px minmax(0, 1fr);
 gap: 12px;
 align-items: center;
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.035);
 padding: 10px 12px;
}

.story-move {
 display: block;
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.035);
 padding: 10px 12px;
}

.demo-step span {
 color: var(--accent-muted);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.08em;
 line-height: 1.2;
 text-transform: uppercase;
}

.story-move span {
 display: block;
 margin-bottom: 4px;
 color: var(--accent-muted);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.08em;
 line-height: 1.2;
 text-transform: uppercase;
}

.demo-step strong {
 color: var(--text-main);
 font-size: 13px;
 font-weight: 650;
 line-height: 1.35;
}

.story-move strong {
 display: block;
 color: var(--text-main);
 font-size: 13px;
 font-weight: 650;
 line-height: 1.35;
}

.launch-proof-stack {
 justify-self: center;
 width: min(100%, 320px);
}

.launch-proof-stack a {
 display: block;
 border: 1px solid var(--glass-border);
 border-radius: 22px;
 background: rgba(255, 255, 255, 0.035);
 padding: 10px;
 overflow: hidden;
}

.launch-proof-stack img {
 width: 100%;
 max-height: 560px;
 object-fit: contain;
 border-radius: 16px;
}

.demo-layout {
 display: grid;
 grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
 gap: 26px;
 align-items: center;
 padding: 24px;
}

.demo-copy p {
 margin: 0 0 16px;
 color: var(--text-body);
 font-size: 15px;
 line-height: 1.68;
}

.image-frame {
 display: grid;
 min-height: 240px;
 place-items: center;
 border-radius: var(--radius-card);
 background: rgba(255, 255, 255, 0.035);
}

.media-shot {
 display: block;
 width: 100%;
 min-height: 240px;
 aspect-ratio: 16 / 9;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
}

.security-wide-copy {
 margin: 0;
 padding: 0 24px 18px;
 color: var(--text-body);
 font-size: 15px;
 line-height: 1.6;
}

.security-steps {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 margin: 0;
 padding: 0 24px 24px;
}

.tool-stack {
 background: rgba(5, 5, 8, 0.9);
}

.system-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px;
 margin-top: 26px;
}

.system-card {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: var(--bg-panel);
 padding: 18px;
}

.system-card h3 {
 margin: 0 0 8px;
 color: var(--text-main);
 font-size: 16px;
 line-height: 1.25;
}

.system-card p {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
}

.tool-panel {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 padding: 24px;
}

.tool-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
 margin-top: 22px;
}

.tool-card {
 display: flex;
 min-width: 0;
 align-items: center;
 gap: 12px;
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.035);
 padding: 12px;
}

.tool-logo {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border-radius: 10px;
 object-fit: contain;
}

.tool-card strong {
 display: block;
 color: var(--text-main);
 font-size: 14px;
 font-weight: 750;
 line-height: 1.25;
}

.tool-card span {
 display: block;
 color: var(--text-muted);
 font-size: 12px;
 line-height: 1.4;
}


/* --- Tool List & Stack (for GTM/Brand case studies) --- */
div.tool-stack {
 margin-top: 28px;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.tool-stack-head {
 padding: 28px 28px 0;
}

.tool-stack-head h3 {
 max-width: 700px;
 margin: 0;
 font-size: 30px;
 font-weight: 700;
 line-height: 1.12;
 color: var(--text-main);
}

.tool-list {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
 padding: 24px 28px 28px;
}

.tool-list .tool-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 20px 16px;
 background: rgba(255, 255, 255, 0.02);
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 transition: all 0.3s ease;
}

.tool-list .tool-card:hover {
 background: rgba(255, 255, 255, 0.05);
 border-color: rgba(255, 255, 255, 0.12);
}

.tool-list .tool-card img {
 width: 48px;
 height: 48px;
 object-fit: contain;
 margin: 0 auto 12px;
 border-radius: 10px;
}

.tool-list .tool-card strong {
 display: block;
 margin-bottom: 4px;
 font-size: 14px;
 font-weight: 700;
 line-height: 1.25;
 color: var(--text-main);
}

.tool-list .tool-card span {
 display: block;
 color: var(--text-muted);
 font-size: 12px;
 line-height: 1.4;
}

@media (max-width: 980px) {
 .tool-list {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 640px) {
 .tool-list {
 grid-template-columns: 1fr;
 padding: 18px;
 }
}


/* --- Workflow Map --- */
.workflow {
 background: transparent;
}

.workflow-map {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 14px;
 margin-top: 30px;
}

.workflow-step {
 position: relative;
 min-height: 160px;
 border: 1px solid var(--glass-border);
 border-top: 3px solid var(--accent);
 border-radius: var(--radius-card);
 background: var(--bg-panel);
 padding: 18px;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 transition: all 0.3s ease;
}

.workflow-step:hover {
 border-color: rgba(255, 255, 255, 0.12);
 box-shadow: 0 0 20px rgba(155, 109, 255, 0.1);
 transform: translateY(-2px);
}

.workflow-step:nth-child(2) {
 border-top-color: var(--accent-glow);
}

.workflow-step:nth-child(3) {
 border-top-color: var(--accent-warm);
}

.workflow-step:nth-child(4) {
 border-top-color: var(--success);
}

.workflow-num {
 margin-bottom: 28px;
 color: var(--text-muted);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.workflow-name {
 margin: 0 0 8px;
 font-size: 17px;
 font-weight: 700;
 color: var(--text-main);
}

.workflow-copy {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
 text-wrap: pretty;
}


/* --- Relevance Band --- */
.relevance-note {
 background:
 radial-gradient(ellipse at 30% 50%, rgba(155, 109, 255, 0.06), transparent 60%),
 rgba(10, 10, 16, 0.95);
 color: #ffffff;
 padding-top: var(--section-y-tight);
 padding-bottom: var(--section-y-tight);
 border-top: 1px solid var(--glass-border);
 border-bottom: 1px solid var(--glass-border);
}

.relevance-note .container {
 display: grid;
 grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
 gap: 36px;
 align-items: start;
}

.relevance-note .section-kicker {
 color: var(--accent-muted);
}

.relevance-note h2 {
 color: #ffffff;
}

.relevance-note p {
 margin: 0;
 color: var(--text-body);
 font-size: 18px;
 font-weight: 300;
 line-height: 1.78;
 text-wrap: pretty;
}


/* --- Credential Block --- */
.credential-block {
 border-top: 1px solid var(--glass-border);
 background: rgba(5, 5, 8, 0.95);
 padding: 0;
}

.credential-inner {
 width: min(1280px, calc(100% - 48px));
 margin: 0 auto;
 padding: 58px 0 68px;
 text-align: center;
}

.credential-label {
 margin-bottom: 34px;
 color: var(--text-muted);
 font-size: var(--type-credential-heading);
 font-weight: 700;
 letter-spacing: 0.04em;
 line-height: 1.18;
 text-transform: uppercase;
}

.badges-grid {
 display: grid;
 grid-template-columns: repeat(8, 92px);
 max-width: 862px;
 margin: 0 auto 48px;
 align-items: center;
 justify-content: center;
 gap: 18px;
}

.badges-grid img {
 width: auto;
 height: 78px;
 max-width: 92px;
 justify-self: center;
 object-fit: contain;
 filter: brightness(0.9) contrast(1.05);
 transition: filter 0.3s ease;
}

.badges-grid img:hover {
 filter: brightness(1.1) contrast(1.1);
}

.discipline-title {
 margin: 0 0 20px;
 color: var(--text-main);
 font-size: var(--type-credential-heading);
 font-weight: 700;
 line-height: 1.18;
 text-transform: uppercase;
}

.discipline-copy {
 max-width: 1120px;
 margin: 0 auto;
 color: var(--text-body);
 font-size: var(--type-body-lg);
 font-weight: 300;
 line-height: 1.72;
 text-wrap: pretty;
}

.discipline-copy strong {
 color: var(--text-main);
 font-weight: 700;
}


/* --- Document Footer --- */
.doc-footer-bar {
 display: flex;
 min-height: 92px;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 24px;
 background: var(--bg-deep);
 border-top: 1px solid var(--glass-border);
 padding: 22px 48px;
 color: #ffffff;
}

.footer-identity {
 display: flex;
 align-items: center;
 gap: 14px;
}

.footer-avatar {
 width: 44px;
 height: 44px;
 overflow: hidden;
 flex-shrink: 0;
 border: 2px solid var(--accent-secondary);
 border-radius: 50%;
}

.footer-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.footer-kicker {
 margin-bottom: 3px;
 color: var(--accent-muted);
 font-size: 9px;
 font-weight: 700;
 letter-spacing: 0.06em;
 line-height: 1.4;
 text-transform: uppercase;
}

.footer-name {
 color: #ffffff;
 font-size: 14px;
 font-weight: 700;
 line-height: 1.3;
 white-space: nowrap;
}

.footer-links {
 display: flex;
 align-items: center;
 gap: 10px;
}

.footer-case-nav {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 flex: 1 1 520px;
 max-width: 640px;
 gap: 8px;
}

.footer-case-nav a {
 display: flex;
 min-width: 0;
 min-height: 50px;
 flex-direction: column;
 justify-content: center;
 border: 1px solid var(--glass-border);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.035);
 padding: 8px 10px;
 color: var(--text-main);
}

.footer-case-nav a:hover,
.footer-case-nav a:focus-visible {
 border-color: rgba(155, 109, 255, 0.4);
 background: rgba(155, 109, 255, 0.12);
 color: #ffffff;
}

.footer-case-nav span {
 display: block;
 margin-bottom: 3px;
 color: var(--accent-muted);
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.08em;
 line-height: 1.1;
 text-transform: uppercase;
}

.footer-case-nav strong {
 display: block;
 min-width: 0;
 overflow: hidden;
 color: inherit;
 font-size: 12px;
 font-weight: 700;
 line-height: 1.2;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.footer-links a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 border: 1px solid var(--glass-border);
 background: rgba(255, 255, 255, 0.04);
 color: rgba(255, 255, 255, 0.7); /* Brighter default color for better visibility */
 text-decoration: none;
 transition: all 0.3s ease;
}

.footer-links a:hover {
 background: rgba(155, 109, 255, 0.15);
 border-color: rgba(155, 109, 255, 0.4);
 color: #ffffff;
}

.footer-links a svg {
 width: 18px; /* Slightly larger for readability */
 height: 18px;
 display: block;
}

.footer-links a svg path {
 fill: currentColor; /* Ensure SVG paths inherit the link color */
}

.footer-links .footer-email {
 width: auto;
 height: auto;
 border-radius: 0;
 border: none;
 background: none;
 font-size: 12px;
 color: var(--text-muted);
 padding: 0;
 margin-right: 6px;
}

.footer-links .footer-email:hover {
 background: none;
 border-color: transparent;
 color: var(--accent-muted);
 box-shadow: none;
}

.doc-footer-disclaimer {
 background: var(--bg-deep);
 padding: 0 24px 12px;
 color: var(--text-faint);
 font-size: 10px;
 line-height: 1.5;
 text-align: center;
}


/* --- Portfolio Grid (for portfolio.html) --- */
.portfolio-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 gap: 20px;
 margin-top: 36px;
}

.portfolio-lead {
 max-width: 760px;
 margin: 14px 0 0;
 color: var(--text-body);
 font-size: 17px;
 font-weight: 300;
 line-height: 1.68;
}

.archive-nav {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin: 30px 0 10px;
}

.archive-nav a {
 display: inline-flex;
 min-height: 38px;
 align-items: center;
 gap: 8px;
 border: 1px solid rgba(155, 109, 255, 0.25);
 border-radius: 6px;
 background: rgba(155, 109, 255, 0.08);
 color: var(--accent-muted);
 padding: 8px 12px;
 font-size: 12px;
 font-weight: 700;
 line-height: 1.2;
 text-decoration: none;
 text-transform: uppercase;
 transition: all 0.25s ease;
}

.archive-nav a:hover,
.archive-nav a:focus-visible {
 border-color: rgba(155, 109, 255, 0.45);
 background: rgba(155, 109, 255, 0.18);
 color: #ffffff;
}

.archive-nav span,
.portfolio-section-heading span {
 color: var(--text-muted);
 font-size: 11px;
 font-weight: 700;
}

.portfolio-section-heading {
 display: flex;
 align-items: baseline;
 gap: 10px;
 margin: 56px 0 18px;
 scroll-margin-top: 24px;
 color: var(--accent);
 font-size: 15px;
 font-weight: 800;
 letter-spacing: 0.08em;
 line-height: 1.25;
 text-transform: uppercase;
}

.portfolio-section-heading:first-of-type {
 margin-top: 0;
}

.portfolio-grid + .cta-row {
 margin-top: 30px;
}

.portfolio-card {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 overflow: hidden;
 text-decoration: none;
 color: inherit;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 position: relative;
}

.portfolio-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
 transform: skewX(-15deg);
 transition: 0.6s;
 pointer-events: none;
}

.portfolio-card:hover {
 border-color: rgba(255, 255, 255, 0.15);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 transform: translateY(-4px);
}

.portfolio-card:hover::before {
 left: 150%;
 transition: 0.7s ease-in-out;
}

.portfolio-card-body {
 padding: 24px;
}

.portfolio-card-kicker {
 color: var(--accent);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 margin-bottom: 10px;
}

.portfolio-card-title {
 font-size: 18px;
 font-weight: 700;
 color: var(--text-main);
 margin: 0 0 10px;
 line-height: 1.3;
}

.portfolio-card-desc {
 color: var(--text-muted);
 font-size: 14px;
 font-weight: 300;
 line-height: 1.55;
 margin: 0;
}

.portfolio-card-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 0 24px 20px;
}

.portfolio-card-chips .chip {
 font-size: 10px;
 padding: 4px 10px;
}


/* --- Three.js Background Canvas --- */
#neural-bg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 pointer-events: none;
 opacity: 0.4;
}

.site-shell {
 position: relative;
 z-index: 1;
}


/* ============================================================
 CASE STUDY COMPONENTS
 Page-specific components used across the case-study pages.
 These were previously inline; now centralized here.
 ============================================================ */

/* --- Evidence Section & Grid --- */
.evidence-section {
 background: rgba(5, 5, 8, 0.92);
}

.evidence-grid {
 display: grid;
 gap: 24px;
 margin-top: 24px;
}

.evidence-panel {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 overflow: hidden;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 transition: all 0.4s ease;
 margin: 0;
}

.evidence-panel:hover {
 border-color: rgba(255, 255, 255, 0.12);
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.evidence-media {
 overflow: hidden;
}

.evidence-media img,
.evidence-media video {
 display: block;
 width: 100%;
 height: auto;
}

.paired-evidence {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 18px;
 padding: 20px;
}

.paired-sample {
 min-width: 0;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: rgba(255, 255, 255, 0.03);
 overflow: hidden;
}

.paired-sample-media {
 background: rgba(255, 255, 255, 0.96);
 padding: 12px;
}

.paired-sample-media a {
 display: grid;
 min-height: 260px;
 place-items: center;
}

.paired-sample-media img {
 width: 100%;
 max-height: 420px;
 object-fit: contain;
}

.paired-sample-caption {
 border-top: 1px solid var(--glass-border);
 padding: 14px;
}

.paired-sample-title {
 margin: 0 0 8px;
 color: var(--text-main);
 font-size: 14px;
 font-weight: 750;
 line-height: 1.3;
}

.paired-sample-detail {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
}

.engagement-context {
 border-top: 1px solid var(--glass-border);
 background: rgba(255, 255, 255, 0.018);
 padding: 18px;
}

.engagement-title {
 margin: 0 0 14px;
 color: var(--text-main);
 font-size: 15px;
 font-weight: 750;
}

.engagement-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 10px;
}

.engagement-card {
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.035);
 padding: 12px;
}

.engagement-card strong {
 display: block;
 margin-bottom: 6px;
 color: var(--text-main);
 font-size: 13px;
 font-weight: 750;
 line-height: 1.25;
}

.engagement-card span {
 display: block;
 color: var(--text-muted);
 font-size: 12px;
 line-height: 1.45;
}

.partner-system {
 padding: 22px;
}

.partner-system-title {
 margin: 0 0 14px;
 color: var(--text-main);
 font-size: 16px;
 font-weight: 750;
 line-height: 1.35;
}

.partner-logo-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 10px;
}

.partner-logo-card {
 display: flex;
 min-width: 0;
 min-height: 74px;
 align-items: center;
 gap: 12px;
 border: 1px solid var(--glass-border);
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.035);
 padding: 10px 12px;
 color: var(--text-main);
 overflow: hidden;
 transition: all 0.25s ease;
}

.partner-logo-card:hover,
.partner-logo-card:focus-visible {
 border-color: rgba(155, 109, 255, 0.38);
 background: rgba(155, 109, 255, 0.1);
 color: #ffffff;
}

.logo-tile {
 display: grid;
 width: 54px;
 height: 54px;
 flex: 0 0 54px;
 place-items: center;
 border-radius: 10px;
 background: #ffffff;
 padding: 7px;
 overflow: hidden;
}

.logo-tile img {
 width: auto;
 height: auto;
 max-width: 42px;
 max-height: 42px;
 object-fit: contain;
}

.logo-tile img.wide-logo {
 max-width: 48px;
 max-height: 32px;
}

.partner-logo-card > span:last-child {
 display: grid;
 min-width: 0;
 gap: 2px;
}

.partner-logo-card strong {
 display: block;
 color: inherit;
 font-size: 13px;
 font-weight: 760;
 line-height: 1.25;
}

.partner-logo-card span span {
 display: block;
 color: var(--text-muted);
 font-size: 12px;
 line-height: 1.35;
}

.evidence-caption {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 16px;
 align-items: center;
 border-top: 1px solid var(--glass-border);
 padding: 16px 18px;
}

.evidence-title {
 margin: 0 0 4px;
 font-size: 15px;
 font-weight: 700;
 color: var(--text-main);
}

.evidence-detail {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
}

.evidence-tag {
 border-radius: 4px;
 background: rgba(155, 109, 255, 0.1);
 padding: 7px 12px;
 color: var(--accent-muted);
 font-size: 12px;
 font-weight: 700;
 white-space: nowrap;
 border: 1px solid rgba(155, 109, 255, 0.2);
}


/* --- Code Receipt (Under the Hood blocks) --- */
.implementation-receipt {
 border-top: 1px solid var(--glass-border);
}

.receipt-chrome {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 18px;
 color: var(--text-muted);
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 border-bottom: 1px solid var(--glass-border);
 background: rgba(255, 255, 255, 0.02);
}

.receipt-lang img {
 height: 20px;
 width: auto;
}

.receipt-code {
 margin: 0;
 padding: 18px;
 overflow-x: auto;
 background: rgba(0, 0, 0, 0.3);
 font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
 font-size: 13px;
 line-height: 1.6;
 color: var(--text-body);
 white-space: pre;
 tab-size: 2;
}

/* Syntax highlighting */
.syntax-keyword { color: #c792ea; }
.syntax-function { color: #82aaff; }
.syntax-variable { color: #f0e8d8; }
.syntax-string { color: #c3e88d; }
.syntax-number { color: #f78c6c; }
.syntax-comment { color: rgba(255,255,255,0.3); font-style: italic; }


/* --- Marketing Lens / Audience Strategy cards --- */
.marketing-lens {
 border-top: 1px solid var(--glass-border);
}

.lens-chrome {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 18px;
 color: var(--accent-muted);
 font-size: 12px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 border-bottom: 1px solid var(--glass-border);
 background: rgba(155, 109, 255, 0.04);
}

.lens-chip {
 border-radius: 4px;
 background: rgba(155, 109, 255, 0.1);
 padding: 4px 10px;
 color: var(--accent-muted);
 font-size: 10px;
 font-weight: 700;
 border: 1px solid rgba(155, 109, 255, 0.2);
}

.lens-body {
 padding: 14px 18px;
}

.lens-copy {
 margin: 0 0 10px;
 color: var(--text-body);
 font-size: 14px;
 line-height: 1.6;
}

.lens-points {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.lens-point {
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.04);
 padding: 6px 12px;
 color: var(--text-muted);
 font-size: 12px;
 font-weight: 500;
 border: 1px solid var(--glass-border);
}


/* --- Tool System / Stack Grid --- */
.tool-system-evidence {
 padding: 24px;
}

.tool-system-title {
 margin: 0 0 18px;
 color: var(--text-main);
 font-size: 17px;
 font-weight: 700;
}

.tool-system-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
}

.tool-system-grid.expanded {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool-system-card {
 display: flex;
 align-items: center;
 gap: 10px;
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.03);
 padding: 12px;
 transition: all 0.3s ease;
}

.tool-system-card:hover {
 background: rgba(255, 255, 255, 0.06);
 border-color: rgba(255, 255, 255, 0.12);
}

.tool-system-card img {
 width: 36px;
 height: 36px;
 border-radius: 8px;
 object-fit: contain;
 flex-shrink: 0;
}

.tool-system-card strong {
 display: block;
 color: var(--text-main);
 font-size: 14px;
 font-weight: 700;
 line-height: 1.3;
}

.tool-system-card span {
 display: block;
 color: var(--text-muted);
 font-size: 11px;
 font-weight: 400;
}


/* --- Metric Value Variants (for pages using .metric-value, .metric-detail) --- */
.metric-value {
 display: block;
 color: var(--accent-muted);
 font-size: 28px;
 font-weight: 800;
 line-height: 1;
 margin-bottom: 6px;
}

.metric-value.phrase {
 font-size: 18px;
 font-weight: 600;
 color: var(--text-main);
}

.metric-value.green {
 color: var(--success);
}

.metric-detail {
 color: var(--text-muted);
 font-size: 12px;
 font-weight: 400;
 line-height: 1.5;
 margin: 0;
}


/* --- Workflow Step aliases (step-number, step-title, step-copy) --- */
.step-number {
 margin: 0 0 28px;
 color: var(--text-muted);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.step-title {
 margin: 0 0 8px;
 font-size: 17px;
 font-weight: 700;
 color: var(--text-main);
}

.step-copy {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
}


/* --- Quote / Pullquote styles --- */
.quote-line {
 border-left: 3px solid var(--accent);
 padding: 12px 0 12px 20px;
 margin: 24px 0;
}

.quote-text {
 color: var(--text-body);
 font-size: 18px;
 font-weight: 300;
 font-style: italic;
 line-height: 1.7;
 margin: 0;
}

.quote-attr {
 margin: 8px 0 0;
 color: var(--text-muted);
 font-size: 13px;
 font-weight: 600;
}


/* --- Proof Card variants (used in some pages) --- */
.proof-card {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: var(--bg-panel);
 padding: 20px;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.proof-card-title {
 margin: 0 0 8px;
 color: var(--text-main);
 font-size: 15px;
 font-weight: 700;
}

.proof-card-copy {
 margin: 0;
 color: var(--text-muted);
 font-size: 13px;
 line-height: 1.55;
}


/* --- Generator App Custom Layouts --- */
.story-panel-inner {
 display: grid;
 grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
 min-height: 430px;
}

.story-copy,
.demo-copy {
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: 32px;
}

.demo-copy {
 border-left: 1px solid var(--glass-border);
 background: rgba(255, 255, 255, 0.015);
}

.story-kicker {
 margin: 0 0 10px;
 color: var(--accent-muted);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.story-copy h3,
.demo-copy h3 {
 margin: 0 0 14px;
 color: var(--text-main);
 font-size: 24px;
 font-weight: 700;
 line-height: 1.25;
}

.story-copy p,
.demo-copy p {
 margin: 0;
 color: var(--text-body);
 font-size: 15px;
 line-height: 1.7;
}

.story-copy p + p,
.demo-copy p + p {
 margin-top: 12px;
}

.story-callout {
 margin: 20px 0;
 border-left: 4px solid var(--accent);
 border-radius: 0 8px 8px 0;
 background: rgba(255, 255, 255, 0.02);
 padding: 14px 16px;
 color: var(--text-main);
 font-size: 16px;
 font-weight: 600;
 line-height: 1.35;
 border-top: 1px solid var(--glass-border);
 border-right: 1px solid var(--glass-border);
 border-bottom: 1px solid var(--glass-border);
}

.story-moves,
.demo-steps {
 display: grid;
 gap: 10px;
 margin-top: 22px;
}

.story-moves {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.story-move,
.demo-step {
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: rgba(255, 255, 255, 0.02);
 padding: 12px 14px;
}

.story-move span,
.demo-step span {
 display: block;
 margin-bottom: 4px;
 color: var(--accent-muted);
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
}

.story-move strong,
.demo-step strong {
 display: block;
 color: var(--text-main);
 font-size: 13px;
 font-weight: 600;
 line-height: 1.35;
}

.launch-proof-stack {
 display: grid;
 place-items: center;
 background: rgba(255, 255, 255, 0.015);
 padding: 24px 30px;
 border-left: 1px solid var(--glass-border);
}

.launch-proof-stack img {
 width: min(100%, 320px);
 height: auto;
 margin: 0 auto;
 filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}

.demo-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
 align-items: stretch;
 background: rgba(5, 5, 8, 0.4);
}

.security-layout {
 grid-template-columns: minmax(360px, 0.92fr) minmax(320px, 1fr);
 align-items: start;
 background: transparent;
}

.image-frame {
 display: grid;
 place-items: center;
 min-height: 280px;
 padding: 16px;
}

.image-frame a {
 display: grid;
 overflow: hidden;
 width: 100%;
 place-items: center;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: var(--bg-deep);
}

.security-layout .image-frame {
 min-height: 0;
 align-self: start;
 background: transparent;
 padding: 34px 24px 12px;
}

.security-layout .image-frame a {
 aspect-ratio: 16 / 9;
 min-height: 0;
 border-radius: 10px;
 background-size: cover;
}

.security-wide-copy {
 margin: 0;
 background: transparent;
 padding: 0 32px 18px;
 color: var(--text-body);
 font-size: 16px;
 line-height: 1.65;
}

.security-steps {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 margin-top: 0;
 border-top: 1px solid var(--glass-border);
 background: transparent;
 padding: 18px 32px 32px;
}


/* --- Accessibility: sr-only --- */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}


/* ============================================================
 RESPONSIVE
 ============================================================ */

@media (max-width: 900px) {
 .intro-grid,
 .media-grid,
 .relevance-note .container {
 grid-template-columns: 1fr;
 }

 .workflow-map {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .badges-grid {
 grid-template-columns: repeat(4, 86px);
 max-width: 398px;
 gap: 18px;
 }

 .badges-grid img {
 height: 72px;
 max-width: 86px;
 }

 .portfolio-grid {
 grid-template-columns: 1fr;
 }

 .snapshot-grid,
 .engagement-grid,
 .system-grid,
 .tool-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .story-panel-inner,
 .demo-layout {
 grid-template-columns: 1fr;
 }

 .launch-proof-stack {
 width: min(100%, 360px);
 }

 .paired-evidence {
 grid-template-columns: 1fr;
 }

 .tool-system-grid,
 .tool-system-grid.expanded {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .evidence-caption {
 grid-template-columns: 1fr;
 }

 .story-panel-inner,
 .demo-layout,
 .security-layout {
 grid-template-columns: 1fr;
 }

 .demo-copy {
 border-left: 0;
 border-top: 1px solid var(--glass-border);
 }

 .security-steps {
 grid-template-columns: 1fr;
 padding: 14px;
 }
}

@media (max-width: 640px) {
 .topbar {
 align-items: flex-start;
 flex-direction: column;
 }

 .topbar nav {
 flex-wrap: wrap;
 }

 h1 {
 font-size: 42px;
 line-height: 1.18;
 }

 h2 {
 font-size: 30px;
 }

 .hero-copy,
 .lead-copy,
 .relevance-note p {
 font-size: 17px;
 }

 .metric-strip,
 .workflow-map {
 grid-template-columns: 1fr;
 }

 .proof-caption {
 grid-template-columns: 1fr;
 }

 .credential-inner {
 width: min(100% - 32px, 1280px);
 padding: 42px 0 52px;
 }

 .badges-grid {
 grid-template-columns: repeat(4, 68px);
 max-width: 296px;
 gap: 8px;
 }

 .badges-grid img {
 height: 58px;
 max-width: 68px;
 }

 .doc-footer-bar {
 align-items: flex-start;
 flex-direction: column;
 padding: 22px 24px;
 }

 .footer-case-nav {
 width: 100%;
 max-width: none;
 grid-template-columns: 1fr;
 }

 .footer-case-nav strong {
 white-space: normal;
 }

 .snapshot-grid,
 .engagement-grid,
 .security-steps,
 .system-grid,
 .tool-grid {
 grid-template-columns: 1fr;
 }

 .snapshot-card {
 min-height: 0;
 }

 .story-panel-inner,
 .demo-layout,
 .tool-panel,
 .paired-evidence,
 .partner-system {
 padding: 18px;
 }

 .demo-step {
 grid-template-columns: 1fr;
 }

 .paired-sample-media a {
 min-height: 220px;
 }

 .paired-sample-media img {
 max-height: 320px;
 }

 .launch-proof-stack img {
 max-height: 500px;
 }

 .tool-system-grid,
 .tool-system-grid.expanded {
 grid-template-columns: 1fr;
 }

 .evidence-caption {
 grid-template-columns: 1fr;
 gap: 10px;
 }

 .receipt-code {
 font-size: 11px;
 padding: 14px;
 }

 .story-moves {
 grid-template-columns: 1fr;
 }
 .story-copy,
 .demo-copy {
 padding: 20px;
 }
 .image-frame,
 .implementation-receipt {
 padding: 12px;
 }
}

/* --- Case Navigation (Top/Bottom) --- */
.case-nav-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: var(--bg-panel);
 border-bottom: 1px solid var(--glass-border);
 padding: 10px 48px;
 font-size: 13px;
 font-weight: 600;
 color: var(--text-muted);
}
.case-nav-top a {
 text-decoration: none;
 color: var(--text-muted);
 transition: color 0.3s ease;
}
.case-nav-top a:hover {
 color: var(--accent);
}
.case-nav-top .case-nav-all {
 color: var(--text-main);
 font-weight: 700;
}

.case-nav-bottom-section {
 padding: 48px 0;
 background: rgba(5, 5, 8, 0.5);
 border-top: 1px solid var(--glass-border);
}
.case-nav-bottom-card {
 max-width: 900px;
 margin: 0 auto;
 text-align: center;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-panel);
 background: var(--bg-panel);
 padding: 32px;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}
.case-nav-bottom-kicker {
 display: block;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 8px;
}
.case-nav-bottom-title {
 font-size: 24px;
 font-weight: 700;
 color: var(--text-main);
 margin: 0 0 20px;
 line-height: 1.3;
}
.case-nav-bottom-btn {
 display: inline-block;
 padding: 10px 24px;
 border-radius: var(--radius-card);
 border: 1px solid var(--glass-border);
 background: rgba(255, 255, 255, 0.04);
 color: #ffffff;
 text-decoration: none;
 font-size: 14px;
 font-weight: 600;
 transition: all 0.3s ease;
}
.case-nav-bottom-btn:hover {
 background: rgba(155, 109, 255, 0.15);
 border-color: rgba(155, 109, 255, 0.4);
}

.case-nav-bottom-actions {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
}

.case-nav-bottom-link {
 display: flex;
 min-height: 92px;
 flex-direction: column;
 justify-content: center;
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-card);
 background: rgba(255, 255, 255, 0.035);
 padding: 14px 16px;
 color: var(--text-main);
 text-align: left;
 transition: all 0.25s ease;
}

.case-nav-bottom-link:hover,
.case-nav-bottom-link:focus-visible {
 border-color: rgba(155, 109, 255, 0.42);
 background: rgba(155, 109, 255, 0.12);
 color: #ffffff;
}

.case-nav-bottom-link span {
 display: block;
 margin-bottom: 5px;
 color: var(--accent-muted);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.case-nav-bottom-link strong {
 display: block;
 color: inherit;
 font-size: 14px;
 font-weight: 700;
 line-height: 1.28;
}

.case-nav-bottom-link.case-nav-bottom-all {
 align-items: center;
 text-align: center;
}

@media (max-width: 640px) {
 .case-nav-top {
 padding: 10px 24px;
 }

 .case-nav-bottom-actions {
 grid-template-columns: 1fr;
 }

 .case-nav-bottom-card {
 padding: 24px;
 }
}

/* ============================================================
   OMNIDIRECTIONAL LATERAL CASE NAVIGATION (GLBL-PRTCL-036 §3.4)
   ============================================================ */
.case-nav-strip {
  background: var(--night, #100619);
  border-top: 1px solid var(--line, rgba(255, 87, 87, 0.14));
  padding: 48px var(--page-x, clamp(20px, 5vw, 72px));
}

.case-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.case-nav-card {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  background: var(--surface, #1C0F27);
  border: 1px solid var(--line, rgba(255, 87, 87, 0.14));
  border-radius: var(--radius-lg, 12px);
  text-decoration: none;
  transition: all 0.2s ease;
}

.case-nav-card:hover {
  background: var(--surface-elevated, #261437);
  border-color: rgba(255, 87, 87, 0.4);
  transform: translateY(-2px);
}

.case-nav-card.prev {
  text-align: left;
  align-items: flex-start;
}

.case-nav-card.next {
  text-align: right;
  align-items: flex-end;
}

.case-nav-card .nav-direction {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange, #FF5757);
  margin-bottom: 6px;
}

.case-nav-card .nav-title {
  font-family: 'Literata', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink, #FAF8FD);
  line-height: 1.35;
}

.case-nav-center {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  background: var(--surface, #1C0F27);
  border: 1px solid var(--line, rgba(255, 87, 87, 0.14));
  border-radius: var(--radius-md, 8px);
  color: var(--muted, #D4CAE0);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.case-nav-center:hover {
  background: var(--surface-elevated, #261437);
  color: var(--ink, #FAF8FD);
  border-color: var(--accent-lilac, #AE81FF);
  transform: translateY(-2px);
}

.case-nav-center .nav-icon {
  font-size: 16px;
  color: var(--accent-gold, #FECA57);
}

@media (max-width: 860px) {
  .case-nav-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .case-nav-card.next {
    text-align: left;
    align-items: flex-start;
  }
  .case-nav-center {
    order: -1;
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
   CANONICAL LOCKED FOOTER (Authorized & Locked by Kamilla 2026-10-13 — DO NOT MODIFY)
   ============================================================ */
.footer-social-strip {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  max-width: none !important;
  width: auto !important;
}

.footer-columns-grid {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 120px;
}

.footer-col-heading {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8E8299;
  margin: 0 0 2px 0;
}

.footer-col-heading.font-mono {
  font-family: 'JetBrains Mono', monospace;
  color: #AE81FF;
}

.footer-nav-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 32px;
}

.footer-nav-list a {
  font-size: 13px;
  color: #8E8299;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-nav-list a:hover {
  color: #F8F6F9;
}

.footer-nav-list.font-mono {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav-list.font-mono a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #bca0dc;
}

.footer-nav-list.font-mono a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .site-footer {
    padding: 48px 20px 32px !important;
  }
  .footer-name-serif {
    font-size: clamp(18.5px, 5.4vw, 22px) !important;
  }
  .footer-top-tier {
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  .footer-columns-grid {
    gap: 28px 36px !important;
    width: 100%;
    justify-content: flex-start !important;
  }
  .footer-nav-list {
    gap: 8px 24px !important;
  }
  .footer-middle-tier {
    padding: 24px 0 !important;
    gap: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .footer-social-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 40px) !important;
    gap: 10px !important;
  }
  .footer-legal-links {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
  .footer-legal-links a {
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }
}

.footer-brand-lockup {
  max-width: 640px !important;
}

.footer-tagline {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-width: none !important;
}

.footer-tagline-primary {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #FAF8FD;
  line-height: 1.4;
}

.footer-tagline-sub {
  display: block;
  font-size: 12.5px;
  color: #8E8299;
  line-height: 1.45;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .footer-tagline-sub {
    white-space: normal;
  }
}




/* Universal Responsive Header & Card Overflow Safeguards */
.workflow-step,
.tool-card,
.media-panel,
.channel-card,
.deliverable-card,
.system-card {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: 1fr !important;
  }
}

.deliverable-bullets {
  margin: 14px 0 0;
  padding-left: 18px;
  color: #D2CBDD;
  font-size: 13.5px;
  line-height: 1.55;
  display: grid;
  gap: 6px;
}

.tel-value-coral,
.metric-value.coral {
  color: #FF8A65;
}

.hero-cta-row,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

@media (max-width: 1120px) {
  .site-header-inner { gap: 12px !important; }
  .site-nav { gap: 16px !important; }
  .nav-link { font-size: 13px !important; }
  .brand-name { font-size: 17px !important; }
}

@media (max-width: 960px) {
  .site-nav { display: none !important; }
}

@media (max-width: 640px) {
  .site-header { padding: 0 12px !important; }
  .site-header-inner { height: 60px !important; gap: 8px !important; }
  .brand-link { white-space: nowrap !important; gap: 4px !important; min-width: 0 !important; }
  .brand-name { font-size: clamp(12.5px, 4vw, 14.5px) !important; }
  .brand-oly { font-size: 10px !important; }
  .site-header-actions { gap: 6px !important; flex-shrink: 0 !important; }
  .lang-switch { padding: 3px 6px !important; font-size: 10px !important; }
  .lang-btn { padding: 3px 5px !important; font-size: 10px !important; }
  .btn-header-cv { padding: 5px 8px !important; font-size: 11.5px !important; gap: 4px !important; }
  .btn-header-cv svg { width: 12px !important; height: 12px !important; }
  .btn-header-inquiry { padding: 5px 8px !important; font-size: 11.5px !important; }
  .btn-header-inquiry span { display: none !important; }
  .btn-header-inquiry svg { width: 13px !important; height: 13px !important; }
}

@media (max-width: 375px) {
  .btn-header-cv span { display: none !important; }
  .btn-header-cv { padding: 5px 7px !important; }
  .brand-name { font-size: 12.5px !important; }
}