/* Jipa by Taqadum — confidential AI infrastructure.
   Look follows the brochure: Core Black hero with photography, black and white section rhythm, square corners,
   mono labels, teal accent for kickers and rules, Taqadum red for buttons and emphasis. Violet only in the logo and family bar.
   Flat colour blocks only: no gradient overlays on photos. */
:root {
    --core: #070B14;
    --graphite: #111827;
    --graphite-2: #0C1220;
    --paper: #F3F4F6;
    --line: #DDE1E7;
    --line-d: #1F2633;
    --ink: #0B1220;
    --body: #3A4252;
    --muted: #5B6474;
    --soft: #9AA3B2;
    --on-dark: #AEB6C4;
    --white: #ffffff;
    --teal: #029194;
    --teal-text: #017578;
    --green: #36BA9C;
    --violet: #5420D0;
    --red: #E4572E;
    --accent: #C9431C;
    --accent-hi: #B33A17;
    --f-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'Space Mono', ui-monospace, monospace;
    --wrap: 1180px;
    --nav-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body { margin: 0; font-family: var(--f-body); font-size: 1.0625rem; color: var(--body); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }
h1, h2, h3 { font-family: var(--f-head); color: var(--ink); line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.85rem); font-weight: 600; margin-bottom: 1.25rem; max-width: 24ch; text-wrap: balance; }
h2 em { font-style: normal; color: var(--teal); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }
strong { color: var(--ink); font-weight: 600; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--f-mono); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--white); color: var(--ink); padding: 10px 16px; z-index: 100; text-decoration: none; }
.skip:focus { left: 8px; }

.kicker { display: flex; align-items: center; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; color: var(--teal-text); margin-bottom: 1.1rem; }
.kicker b { color: var(--red); font-weight: 700; margin-right: .9em; letter-spacing: 0; }
.lead { font-size: 1.125rem; color: var(--body); max-width: 62ch; }
.note { font-size: .92rem; color: var(--muted); border-left: 3px solid var(--red); padding: .15rem 0 .15rem .9rem; max-width: 54ch; }
.note-inline { margin-top: 2.2rem; }
.more { margin-top: 1.75rem; font-weight: 600; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* Dark sections */
.dark { background: var(--core); color: var(--on-dark); }
.dark h2, .dark h3, .dark strong { color: var(--white); }
.dark h2 em { color: var(--green); }
.dark .kicker { color: var(--teal); }
.dark .lead { color: var(--on-dark); }
.dark .note { color: var(--on-dark); }
.dark a:not(.btn) { color: #FF8A66; }
.dark a:not(.btn):hover { color: #FFB199; }

/* Buttons */
.btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; padding: .92rem 1.55rem; border-radius: 2px; font-family: var(--f-body); font-weight: 600; font-size: .96rem; line-height: 1.3; text-decoration: none; text-align: center; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hi); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.hero .btn-ghost, .dark .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.55); }
.hero .btn-ghost:hover, .dark .btn-ghost:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50; background: var(--core); border-bottom: 1px solid var(--line-d); }
.nav .tri-bar { top: 0; bottom: auto; height: 4px; }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 4px; }
.nav-logo img { height: 40px; width: auto; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; }
.nav-menu a { text-decoration: none; font-size: .92rem; font-weight: 500; color: #E6E9EF; white-space: nowrap; transition: color .2s; }
.nav-menu a:hover { color: var(--green); }
.nav-menu .nav-parent { color: var(--green); padding-left: 24px; border-left: 1px solid var(--line-d); }
.nav-menu .nav-parent:hover { color: var(--white); }
.nav-menu .nav-cta { background: var(--accent); color: var(--white); padding: .62rem 1.1rem; border-radius: 2px; font-weight: 600; }
.nav-menu .nav-cta:hover { background: var(--accent-hi); color: var(--white); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--white); content: ''; transition: transform .2s, background .2s; }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-7px) rotate(-45deg); }

/* Taqadum family bar */
.tri-bar { display: flex; height: 5px; position: absolute; left: 0; right: 0; bottom: 0; }
.tri-bar span { flex: 1; }
.tri-bar span:nth-child(1) { background: var(--teal); }
.tri-bar span:nth-child(2) { background: var(--green); }
.tri-bar span:nth-child(3) { background: var(--violet); }

/* Photo figures (as in the brochure) */
.fig { position: relative; overflow: hidden; background: var(--core); margin: 0; }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap { position: absolute; left: 0; bottom: 0; background: var(--core); color: var(--white); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; padding: 8px 14px; }
.cap b { color: var(--teal); font-weight: 400; margin-right: .9em; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: min(100svh, 900px); padding-top: var(--nav-h); background: var(--core); color: var(--white); }
.hero-copy { display: flex; align-items: center; padding: 64px 56px 72px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); }
.hero-in { max-width: 640px; }
.eyebrow { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em; color: var(--soft); margin-bottom: 1.6rem; }
.eyebrow a { color: var(--green); text-decoration: none; }
.eyebrow a:hover { color: var(--white); text-decoration: underline; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; color: var(--white); margin-bottom: 1.8rem; }
.hero h1 span { color: var(--red); }
.hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--on-dark); max-width: 54ch; margin-bottom: 2.1rem; }
.hero-line { margin-top: 1.6rem; color: var(--soft); font-size: .98rem; max-width: 50ch; }
.hero .note { margin-top: 1.2rem; color: var(--on-dark); }
.hero-photo { min-height: 100%; }
.hero-photo img { position: absolute; inset: 0; object-position: 50% 40%; }
.hero-photo .cap { left: auto; right: 0; }

/* Proof strip */
.strip { background: var(--graphite); border-bottom: 1px solid var(--line-d); }
.strip-inner { display: flex; align-items: center; gap: 36px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.strip-lead { font-size: .72rem; letter-spacing: .1em; color: var(--soft); }
.strip ul { list-style: none; display: flex; gap: 14px 44px; flex-wrap: wrap; margin: 0; padding: 0; }
.strip li { font-family: var(--f-head); font-weight: 600; font-size: 1.04rem; color: var(--white); display: flex; align-items: center; gap: .7em; }
.strip li::before { content: ''; width: 8px; height: 8px; background: var(--red); }

/* Sections */
.section { padding: 112px 0; }
.section-alt { background: var(--paper); }
.section .wrap > h2 { margin-bottom: 1.4rem; }
.section .wrap > .lead { margin-bottom: 3rem; }
.section .wrap > h2:not(:has(+ .lead)) { margin-bottom: 3rem; }

/* Cards */
.cards { display: grid; gap: 20px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--teal); padding: 30px 28px 34px; }
.ico { margin-bottom: 20px; }
.ico svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: .65rem; }
.card p { color: var(--body); font-size: .98rem; }

/* Protection diagram */
.dia { margin: 72px 0 0; background-color: var(--core); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23131B2B' stroke-width='1'/%3E%3C/svg%3E"); border-top: 4px solid var(--teal); padding: 26px 32px 0; color: var(--on-dark); }
.dia-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .72rem; letter-spacing: .08em; color: var(--soft); margin-bottom: 48px; }
.dia-top span:first-child { color: var(--teal); }
.dia-stage { display: grid; grid-template-columns: 236px minmax(60px, 1fr) minmax(0, 440px) minmax(60px, 1fr) 236px; align-items: center; justify-content: center; }
.dia .badge { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--teal); }
.dia .badge svg { width: 28px; height: 28px; fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dia-node { padding: 24px 22px 26px; }
.dia-node b { display: block; font-family: var(--f-head); font-size: 1.12rem; font-weight: 600; color: var(--white); line-height: 1.25; margin-top: 18px; margin-bottom: 6px; }
.dia-node span { display: block; font-size: .88rem; line-height: 1.5; color: var(--on-dark); }
.dia-key { background: var(--graphite); border: 1px solid var(--line-d); border-top: 4px solid var(--teal); }
.dia-compute { border: 1.5px dashed #5B6474; }
.dia-wm { height: 46px; width: auto; margin-bottom: 16px; }
.dia-env { position: relative; border: 2px solid var(--red); background: var(--graphite-2); padding: 42px 22px 22px; }
.dia-legend { position: absolute; top: -17px; left: 18px; display: flex; align-items: center; gap: 8px; background: var(--red); padding: 5px 12px 5px 10px; font-size: .72rem; letter-spacing: .04em; color: var(--white); }
.dia-legend svg { width: 14px; height: 14px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dia-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dia-tiles li { display: flex; align-items: center; gap: 16px; background: var(--graphite); border: 1px solid var(--line-d); border-left: 4px solid var(--teal); padding: 14px 18px 14px 14px; }
.dia-tiles b { display: block; font-family: var(--f-head); font-size: 1.05rem; font-weight: 600; color: var(--white); line-height: 1.25; }
.dia-tiles li span { display: block; font-size: .86rem; color: var(--on-dark); line-height: 1.4; margin-top: 2px; }
.dia-tiles em { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--red); }
.dia-flow { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 0 6px; }
.dia-flow em { font-style: normal; text-align: center; font-size: .68rem; letter-spacing: .08em; color: var(--green); }
.dia-flow i { position: relative; display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 14px); background-size: 14px 2px; animation: flowR 1s linear infinite; }
.dia-flow i::after { content: ''; position: absolute; top: -5px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.dia-flow i::before { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: var(--green); animation: pktR 2.4s linear infinite; }
.dia-flow-compute i::before { left: auto; right: 0; animation-name: pktL; }
.dia-layers { list-style: none; margin: 56px -32px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-d); background: var(--graphite-2); }
.dia-layers li { padding: 22px 28px 26px; border-left: 1px solid var(--line-d); position: relative; }
.dia-layers li:first-child { border-left: 0; }
.dia-layers li::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--green); }
.dia-layers li:nth-child(2)::before { background: var(--teal); }
.dia-layers li:nth-child(3)::before { background: var(--red); }
.dia-layers .mono { display: block; font-size: .72rem; letter-spacing: .06em; color: var(--green); margin-bottom: 8px; }
.dia-layers li:nth-child(3) .mono { color: var(--red); }
.dia-layers b { display: block; font-family: var(--f-head); font-size: 1.05rem; font-weight: 600; color: var(--white); line-height: 1.25; }
.dia-layers em { display: block; font-style: normal; font-size: .86rem; line-height: 1.5; color: var(--on-dark); margin-top: 4px; }
.dia-flow-key i::after { right: -3px; border-left: 10px solid var(--red); }
.dia-flow-compute i { animation-name: flowL; }
.dia-flow-compute i::after { left: -3px; border-right: 10px solid var(--red); }
@keyframes flowR { to { background-position: 14px 0; } }
@keyframes flowL { to { background-position: -14px 0; } }
@keyframes flowD { to { background-position: 0 14px; } }
@keyframes flowU { to { background-position: 0 -14px; } }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { border-top: 4px solid var(--teal); padding-top: 24px; }
.step-n { display: block; font-size: .78rem; letter-spacing: .12em; color: var(--red); margin-bottom: 1.4rem; }
.step h3 { font-size: 1.3rem; margin-bottom: .75rem; }
.step p { font-size: .98rem; color: var(--on-dark); }

/* Platform grid */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feat article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 30px 38px; }
.feat .ico svg { stroke: var(--teal); stroke-width: 1.7; }
.feat h3 { margin-bottom: .6rem; }
.feat p { font-size: .96rem; }

/* Banner (photo + black statement block) */
.banner { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; margin-top: 72px; background: var(--core); }
.banner .fig { min-height: 300px; }
.banner .q { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.banner .rule { width: 44px; height: 4px; background: var(--red); margin-bottom: 26px; }
.banner h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; color: var(--white); line-height: 1.25; margin-bottom: 18px; max-width: 22ch; }
.banner h3 span { color: var(--green); }
.banner p { color: var(--on-dark); font-size: .98rem; max-width: 46ch; margin-bottom: 28px; }
.banner-flip { margin-top: 88px; min-height: 340px; }

/* Agent workspaces */
.agents { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 64px; align-items: start; }
.agents-photo { position: sticky; top: calc(var(--nav-h) + 28px); height: min(700px, calc(100vh - 140px)); min-height: 420px; }
.tbl { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); margin-bottom: 28px; }
.tbl th, .tbl td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .98rem; }
.tbl thead th { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); font-weight: 400; background: var(--paper); border-bottom-color: var(--ink); }
.tbl tbody th { font-family: var(--f-head); font-weight: 600; color: var(--ink); width: 32%; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.ctrl { background: var(--core); border-left: 5px solid var(--teal); padding: 26px 30px; }
.ctrl p { font-family: var(--f-head); font-weight: 500; font-size: 1.08rem; line-height: 1.5; color: #E6E9EF; }

/* Use cases */
.uses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.use { grid-column: span 2; background: var(--paper); padding: 30px 28px 34px; }
.use-half { grid-column: span 3; }
.use .tag { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; margin-bottom: 22px; background: var(--teal); color: var(--white); font-size: .72rem; letter-spacing: .08em; }
.use h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.use p { font-size: .98rem; max-width: 46ch; }

/* Service options */
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.option { background: var(--graphite); border: 1px solid var(--line-d); border-top: 4px solid var(--teal); padding: 32px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.option:nth-child(2) { border-top-color: var(--white); }
.option:nth-child(3) { border-top-color: var(--red); }
.chip { display: inline-block; font-size: .68rem; letter-spacing: .08em; color: var(--green); border: 1px solid currentColor; padding: 3px 10px; margin-bottom: 22px; }
.option:nth-child(2) .chip { color: var(--white); }
.chip-red { color: #FF8A66; }
.option h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.option p { font-size: .98rem; margin-bottom: 1.8rem; flex: 1; color: var(--on-dark); }
.commercial { margin-top: 28px; padding: 22px 26px; background: var(--graphite); border-left: 5px solid var(--teal); color: var(--white); font-weight: 500; max-width: 80ch; }

/* Why */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.why h2 { max-width: 16ch; }
.why .lead { margin-bottom: 0; }
.why-list { list-style: none; margin: 0; padding: 0; }
.why-list li { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.why-list li:first-child { padding-top: 4px; border-top: 0; }
.why-list b { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: .85rem; color: var(--white); background: var(--teal); }
.why-list h3 { margin-bottom: .3rem; }
.why-list p { font-size: .96rem; }

/* FAQs */
.faqs { border-top: 2px solid var(--ink); max-width: 860px; }
.faqs details { border-bottom: 1px solid var(--line); background: transparent; }
.faqs summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; font-family: var(--f-head); font-weight: 600; font-size: 1.12rem; color: var(--ink); position: relative; letter-spacing: -0.01em; line-height: 1.3; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-weight: 400; font-size: 1.5rem; color: var(--red); }
.faqs details[open] summary::after { content: '–'; }
.faqs details p { padding: 0 48px 24px 0; color: var(--body); max-width: 68ch; }
.faq-note { margin-top: 2rem; color: var(--body); max-width: 860px; }
.faq-note a { font-weight: 600; text-decoration: none; }
.faq-note a:hover { text-decoration: underline; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
.contact h2 { max-width: 16ch; }
.contact .lead { margin-bottom: 2rem; }
.contact .note { margin-top: 1.8rem; }
.contact-mail { margin-top: 1.4rem; font-family: var(--f-mono); font-size: .95rem; }
.contact-dl { margin-top: .8rem; font-size: .96rem; font-weight: 500; }
.contact-photo { margin-top: 40px; height: 250px; }
.form { background: var(--white); border-top: 4px solid var(--red); padding: 36px 34px 34px; color: var(--body); }
.dark .form h3 { color: var(--ink); }
.form h3 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: .98rem; color: var(--ink); background: var(--white); border: 1px solid #B7BEC9; border-radius: 2px; padding: 12px 14px; line-height: 1.4; }
.field textarea { resize: vertical; min-height: 88px; }
.field select:invalid { color: var(--muted); }
.field input::placeholder, .field textarea::placeholder { color: #7A8393; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.field.err input, .field.err select { border-color: var(--accent); }
.form-reminder { font-size: .88rem; color: var(--muted); margin: 6px 0 22px; }
.form .btn { width: 100%; }
.form-status { margin-top: 16px; font-size: .95rem; color: var(--ink); border-left: 3px solid var(--red); padding-left: .9rem; }

/* More from Taqadum */
.family { padding: 88px 0; }
.family h2 { max-width: 22ch; }
.family-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.family-link { display: flex; flex-direction: column; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--teal); padding: 30px 28px 28px; text-decoration: none; color: var(--body); transition: transform .2s, box-shadow .2s; }
.family-link:nth-child(2) { border-top-color: var(--red); }
.family-link:hover, .family-link:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 18, 32, .1); color: var(--body); }
.family-link .mono { font-size: .72rem; letter-spacing: .1em; color: var(--teal-text); margin-bottom: 14px; }
.family-link b { font-family: var(--f-head); font-size: 1.3rem; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: .5rem; }
.family-link em { font-style: normal; font-size: .98rem; margin-bottom: 1.5rem; }
.family-link .go { margin-top: auto; font-weight: 600; color: var(--accent); }
.family-link:hover .go { text-decoration: underline; }

/* Footer */
.footer { position: relative; background: #05080F; color: var(--on-dark); padding: 76px 0 30px; }
.footer .tri-bar { top: 0; bottom: auto; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 36px; }
.footer-logo { height: 96px; width: auto; margin-bottom: 1rem; }
.footer-desc { font-size: .95rem; color: var(--soft); }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; align-content: start; }
.footer-links a { text-decoration: none; font-size: .95rem; color: #E6E9EF; }
.footer-links a:hover { color: var(--green); text-decoration: underline; }
.footer-bottom p { border-top: 1px solid var(--line-d); padding-top: 22px; font-size: .86rem; color: var(--soft); }
.footer-bottom .credits { border-top: 0; padding-top: 10px; font-size: .74rem; line-height: 1.6; color: #8A93A6; }
.footer-bottom .credits a { color: #8A93A6; }
.footer-bottom .credits a:hover { color: var(--white); }

/* Responsive */
@media (max-width: 1160px) {
    .dia-stage { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
    .dia-node { padding: 22px 22px 24px; }
    .dia-flow { flex-direction: row; justify-content: center; align-items: center; height: 64px; gap: 14px; padding: 0; }
    .dia-flow i { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--red) 0 8px, transparent 8px 14px); background-size: 2px 14px; animation: flowD 1s linear infinite; }
    .dia-flow-compute i { animation-name: flowU; }
    .dia-flow i::after { left: -5px; top: auto; border: 6px solid transparent; }
    .dia-flow-key i::after { right: auto; bottom: -3px; border-left: 6px solid transparent; border-top: 10px solid var(--red); border-bottom: 0; }
    .dia-flow-compute i::after { left: -5px; top: -3px; bottom: auto; border-right: 6px solid transparent; border-bottom: 10px solid var(--red); border-top: 0; }
    .dia-flow em { text-align: left; }
    .dia-flow i::before { top: 0; left: -3px; animation-name: pktD; }
    .dia-flow-compute i::before { top: auto; right: auto; left: -3px; bottom: 0; animation-name: pktU; }
    .dia-layers { grid-template-columns: 1fr; }
    .dia-layers li { border-left: 0; border-top: 1px solid var(--line-d); }
    .dia-layers li:first-child { border-top: 0; }
}
@media (max-width: 1020px) {
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-copy { padding: 56px 24px 56px; }
    .hero-photo { min-height: 420px; }
    .cards-3, .options { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; gap: 36px; }
    .feat { grid-template-columns: repeat(2, 1fr); }
    .uses { grid-template-columns: repeat(2, 1fr); }
    .use, .use-half { grid-column: auto; }
    .banner, .banner-flip { grid-template-columns: 1fr; }
    .banner-flip .fig { order: -1; }
    .agents { grid-template-columns: 1fr; gap: 40px; }
    .agents-photo { position: relative; top: 0; height: 360px; min-height: 0; }
    .why, .contact { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 1100px) {
    .nav-toggle { display: block; }
    .nav-menu { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--core); padding: 8px 24px 24px; border-bottom: 1px solid var(--line-d); transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
    .nav-menu.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
    .nav-menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-d); }
    .nav-menu li:last-child a { margin-top: 16px; text-align: center; border-bottom: 0; }
    .nav-menu .nav-parent { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
    :root { --nav-h: 68px; }
    body { font-size: 1rem; }
    .nav-logo img { height: 34px; }
    .section { padding: 76px 0; }
    .hero-copy { padding: 40px 24px 48px; }
    .hero-photo { min-height: 360px; }
    .cards-3, .options, .uses, .feat { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .btns { flex-direction: column; }
    .dia { padding: 20px 16px 0; }
    .dia-layers { margin: 40px -16px 0; }
    .dia-layers li { padding: 20px 20px 22px; }
    .dia-env { padding: 36px 14px 14px; }
    .dia-tiles li { padding: 14px; gap: 12px; }
    .banner .q { padding: 36px 24px; }
    .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: 100%; }
    .tbl thead { position: absolute; left: -9999px; }
    .tbl tbody th { width: 100%; padding: 18px 20px 2px; border-bottom: 0; }
    .tbl td { padding: 0 20px 18px; }
    .form { padding: 28px 22px; }
    .faqs summary { font-size: 1.04rem; }
    .section .wrap > h2:not(:has(+ .lead)) { margin-bottom: 2.2rem; }
    .footer-links { grid-template-columns: 1fr 1fr; gap: 10px 32px; }
    .family { padding: 64px 0; }
    .family-links { grid-template-columns: 1fr; }
}
@keyframes pktR { from { left: 0; } to { left: calc(100% - 8px); } }
@keyframes pktL { from { right: 0; } to { right: calc(100% - 8px); } }
@keyframes pktD { from { top: 0; } to { top: calc(100% - 8px); } }
@keyframes pktU { from { bottom: 0; } to { bottom: calc(100% - 8px); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}