/* Single graphite theme: one background, sections separated by a frame, hairlines and surfaces. */
:root {
  --ink: #dce0e6;
  --muted: #abb2bf;
  --paper: #202020;
  --line: #3b4048;
  --surface: #26282c;
  --surface-deep: #1b1c1f;
  --rule: #2e3137;
  --label: #8b939f;
}

/* Frame: two rails along the content edges and hairlines between sections. */
main { position: relative; }
main::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: min(1328px, calc(100% - 48px)); transform: translateX(-50%); border-inline: 1px solid var(--rule); pointer-events: none; z-index: 1; }
main > section + section { border-top: 1px solid var(--rule); }
.site-footer { border-top-color: var(--rule); }

/* Headings and labels. */
.eyebrow { color: var(--label); }
.muted-heading { color: #858d99; }
.services .eyebrow { color: var(--blue); }
.process .eyebrow { color: var(--cyan); }
.experience .eyebrow { color: var(--lime); }
/* One continuous ambient layer behind the whole page: soft light pools that never start at a section edge. */
main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 700px at 86% 17%, #57b0f90d, transparent 70%),
    radial-gradient(800px 650px at 12% 36%, #56b6c207, transparent 70%),
    radial-gradient(1000px 750px at 14% 62%, #57b0f909, transparent 70%),
    radial-gradient(800px 650px at 88% 70%, #96cf6d06, transparent 70%),
    radial-gradient(900px 700px at 20% 86%, #56b6c207, transparent 70%); }

/* Proof strip. */
.proof-strip { background: transparent; border-color: var(--rule); }
.proof-grid > div { border-color: var(--line); }
.proof-grid p, .proof-grid strong span { color: var(--label); }
.proof-grid > div:nth-child(2) strong { color: var(--lime); }
.proof-grid > div:nth-child(3) strong { color: var(--blue); }
.proof-grid > div:nth-child(4) strong { color: var(--purple); }

/* Service cards: one surface, colour only as a top accent and icon. */
.service-card, .security-card, .recovery-card { background: var(--surface); border-color: var(--line); border-top: 2px solid var(--blue); }
.security-card { border-top-color: var(--lime); }
.recovery-card { border-top-color: var(--cyan); }
.service-card:hover { box-shadow: none; border-color: #4b515b; }
.service-card:hover, .security-card:hover { border-top-color: inherit; }
.infrastructure-card:hover { border-top-color: var(--blue); }
.security-card:hover { border-top-color: var(--lime); }
.recovery-card:hover { border-top-color: var(--cyan); }
.icon-box, .infrastructure-card .icon-box, .security-card .icon-box, .recovery-card .icon-box { background: #2d3036; border-color: var(--line); }
.infrastructure-card .icon-box svg, .card-arrow { color: var(--blue); stroke: var(--blue); }
.security-card .icon-box svg { stroke: var(--lime); }
.recovery-card .icon-box svg { stroke: var(--cyan); }
.card-heading .mono, .deliverable > .mono, .stack-row > .mono, .case-index { color: var(--label); }
.stack-row > div > span, .ticker-set > span { color: #8f97a3; }
.code-window { background: var(--surface-deep); }

/* Process. */
.process { background: transparent; border-block: 0; }
.process-grid > li { border-color: var(--line); }
.process-grid > li > span { color: var(--cyan); }

/* Company and examples. */
.company-copy > p.company-lead { color: var(--ink); }
.profile-badges > span { border-color: var(--line); color: var(--muted); }
.company-emblem { background: radial-gradient(ellipse at 50% 48%, #57b0f910, transparent 60%), var(--surface-deep); }
.case-card { background: var(--surface); }
.case-stack { color: var(--label); border-color: var(--line); }

/* Cooperation becomes a panel instead of a tinted band. */
.cooperation { background: transparent; border-block: 0; }
.cooperation .partnership { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 28px 32px; }
.partnership-symbol { color: var(--blue); }
.button-dark { border: 1px solid #485244; }
.button-dark:hover { background: #2a2d31; }

/* FAQ. */
.faq-list, .faq-list details { border-color: var(--line); }
.faq-list summary > span { color: var(--blue); }

@media (max-width: 650px) {
  main::after { width: calc(100% - 20px); }
  .cooperation .partnership { padding: 24px 20px; }
}

/* Navigation and hero UI text: 14px on desktop, never below 12px on mobile. */
.header-inner nav { font-size: 14px; gap: 32px; }
.header-inner nav .nav-contact { font-size: 14px; }
.text-link, .hero-actions .text-link { font-size: 14px; }
.floating-label strong { font-size: 13px; }
.floating-label div > span { font-size: 12px; }
.proof-grid p { font-size: 13px; }
@media (max-width: 1150px) { .header-inner nav { font-size: 13px; gap: 22px; } }
@media (max-width: 650px) {
  .header-inner nav .nav-contact { font-size: 12px; }
  .text-link, .hero-actions .text-link { font-size: 13px; }
  .proof-grid p { font-size: 12px; }
}

/* Language switch and click-to-reveal phone. */
.lang-switch { display: flex; align-items: center; gap: 2px; font: 12px var(--mono); letter-spacing: .8px; }
.lang-switch a { padding: 6px 7px; color: var(--label); border-radius: 4px; }
.lang-switch a[aria-current="page"] { color: var(--ink); background: #2d3036; }
.lang-switch a:hover { color: var(--lime); }
.phone-reveal { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 4px; background: none; border: 0; border-bottom: 1px dashed #4b515b; color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; }
.phone-reveal::before { content: "☏"; color: var(--lime); }
.phone-reveal:hover { color: var(--lime); border-bottom-color: var(--lime); }
@media (max-width: 650px) { .lang-switch { font-size: 11px; } .lang-switch a { padding: 5px; } .phone-reveal { font-size: 18px; } }
@media (max-width: 420px) {
  .header-inner { gap: 10px; }
  .terminal-brand .brand-caption { white-space: nowrap; letter-spacing: .2px; }
  .header-inner nav { gap: 8px; }
  .header-inner nav .nav-contact { white-space: nowrap; padding: 10px 12px; }
  .header-inner nav .nav-contact span { display: none; }
}

/* Closing wordmark: brand gradient (infrastructure blue to action green), soft vertical fade, room above the footer. */
.contact-wordmark { margin-bottom: 0; padding-bottom: 56px; color: #57b0f9; background: linear-gradient(100deg, #57b0f9 0%, #56b6c2 45%, #96cf6d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, .62) 100%); mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, .62) 100%); opacity: .9; }
.contact-wordmark > span { -webkit-text-fill-color: var(--lime); color: var(--lime); text-shadow: 0 0 28px #96cf6d66; }
@media (max-width: 650px) { .contact-wordmark { margin-bottom: 0; padding-bottom: 32px; } }

/* Body copy floor: descriptions 14-15px, supporting labels 12px. */
.scenario-panel > p, .ai-note, .partnership p:not(.eyebrow), .case-card > p, .process-grid p, .faq-list details > p, .engineering-note p, .company-copy > p:not(.eyebrow):not(.company-lead) { font-size: 15px; line-height: 1.75; }
.deliverable p, .scenario-result, .contact-note > p, .experience-heading > p:last-child, .contact-grid > div > p { font-size: 14px; line-height: 1.7; }
.case-stack, .profile-badges > span, .scenario-result > span, .deliverable > .mono, .card-heading .mono, .case-index { font-size: 12px; }
.scenario-button small { font-size: 13px; }
@media (max-width: 650px) {
  .scenario-panel > p, .ai-note, .partnership p:not(.eyebrow), .case-card > p, .process-grid p, .faq-list details > p, .engineering-note p, .company-copy > p:not(.eyebrow):not(.company-lead) { font-size: 15px; }
}
/* Let the ambient layer run through the AI and contact sections too (keep only their own accent light). */
.ai-section { background: radial-gradient(ellipse 70% 55% at 80% 50%, #cc6ee70a, transparent 70%); }
.contact { background: radial-gradient(ellipse 60% 60% at 80% 85%, #57b0f90a, transparent 70%); }

/* Third hero label for the green security layer. */
.label-sec { top: 50%; right: 0; animation-delay: -5s; }
.label-sec .label-icon { color: var(--lime); display: flex; }

/* Compact calls to action with a comfortable touch target. */
.button { font-size: 16px; line-height: 1.25; padding: 10px 16px; gap: 12px; min-height: 44px; max-width: 100%; justify-content: center; }
.button span { font-size: 1em; line-height: 1; flex-shrink: 0; }
.partnership .button { font-size: 15px; padding: 10px 16px; }
.text-link, .hero-actions .text-link { font-size: 16px; }
@media (max-width: 650px) {
  .button, .partnership .button { font-size: 15px; padding: 10px 12px; gap: 8px; }
  .text-link, .hero-actions .text-link { font-size: 15px; }
}

/* AI section: one incident flow (steps on the left, diagram on the right). */
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid #45404b; border-radius: 7px; color: #d7dbe3; transition: border-color .35s, background-color .35s; }
.flow-steps strong { display: block; font-size: 15px; font-weight: 500; transition: color .35s; }
.flow-steps small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--terminal-muted); }
.flow-index { font: 11px var(--mono); color: var(--label); padding-top: 3px; transition: color .35s; }
.flow-steps > li.is-active { border-color: #ac64c0; background: #cc6ee710; }
.flow-steps > li.is-active strong, .flow-steps > li.is-done .flow-index { color: var(--purple); }
.flow-actions { display: flex; align-items: center; gap: 10px; }
.flow-replay { background: none; border: 1px solid #615069; border-radius: 3px; padding: 4px 8px; color: #d4b3df; font: 11px var(--mono); letter-spacing: .4px; cursor: pointer; }
.flow-replay:hover { color: var(--purple); border-color: #ac64c0; }
.flow-diagram { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 18px 24px; }
.flow-row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; width: 100%; }
.flow-row > span { flex: 1; text-align: center; padding: 11px 8px; border: 1px solid #4b4654; border-radius: 5px; background: #2d2d34; color: #d1d5df; font: 11px var(--mono); transition: border-color .3s, color .3s, box-shadow .3s; }
.flow-outputs { width: 82%; }
.flow-outputs > span { background: #2d2932; border-color: #615069; color: #dcd4e4; font: 13px var(--font); }
.flow-outputs i { font-style: normal; color: var(--purple); margin-right: 6px; }
.flow-gap { width: 1px; height: 42px; background: #93649e; }
.flow-gap-short { height: 30px; }
.has-lines .flow-gap { background: transparent; }
.flow-diagram .agent-node { margin: 0; z-index: 1; }
.flow-human { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid #5d7a4b; border-radius: 7px; background: #262c22; transition: border-color .3s, box-shadow .3s; }
.flow-human svg { color: var(--lime); }
.flow-human strong { font-size: 14px; font-weight: 500; color: #eef0f4; }
.flow-human small { font: 11px var(--mono); color: #b9c7ad; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.flow-lines polyline { fill: none; stroke: #93649e; stroke-width: 1; stroke-linejoin: round; }
.flow-row > span.is-hit { border-color: #ac64c0; color: #eef0f4; }
.flow-human.is-hit { border-color: var(--lime); box-shadow: 0 0 0 1px #96cf6d44, 0 0 36px #96cf6d22; }
@media (max-width: 650px) {
  .flow-diagram { padding: 22px 0; }
  .flow-row { gap: 6px; }
  .flow-row > span { padding: 9px 3px; font-size: 10px; }
  .flow-outputs { width: 100%; }
  .flow-outputs > span { font-size: 12px; }
  .flow-steps > li { padding: 12px 14px; }
}
.ai-flow .scenario-content > h3 { font-size: 23px; line-height: 1.3; letter-spacing: -.5px; margin: 6px 0 0; }
.ai-flow .scenario-content > p { font-size: 15px; line-height: 1.75; color: var(--terminal-muted); margin: 12px 0 20px; }
@media (max-width: 650px) { .ai-flow .scenario-content > h3 { font-size: 21px; } }

/* Trimmed layout: single-column about, full-width AI flow, inline CTA, compact process. */
.company-solo { grid-template-columns: minmax(0, 1fr); }
.company-solo .company-copy { max-width: 760px; }
.ai-flow { grid-template-columns: minmax(0, 1fr); }
.ai-flow .scenario-content { margin: 0; }
.ai-flow .flow-diagram { max-width: 780px; margin-inline: auto; }
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.inline-cta p { margin: 0; font-size: 18px; color: var(--ink); }
.process.section { padding-block: 56px; }
.process .section-heading { margin-bottom: 28px; }
@media (max-width: 650px) {
  .hero-visual { width: min(100%, 300px); }
  .inline-cta { padding: 18px; }
  .inline-cta p { font-size: 16px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .process-grid > li { display: block; padding-top: 14px; }
  .process-grid > li > span { display: block; font-size: 26px; margin-bottom: 8px; }
  .process-grid h3 { font-size: 17px; }
  .process-grid p { font-size: 14px; margin-top: 6px; }
}