/* =====================================================================
   CloudWise Services - site styles
   Palette taken from the logo: navy wordmark, cobalt-to-cyan hexagon
   facets and the orange "signal" dot.
   ===================================================================== */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/sora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }

:root {
    --ink: #0A1A4A;        /* "Cloud" wordmark navy */
    --ink-2: #102A6B;
    --ink-3: #1B357F;
    --cobalt: #1D4ED8;     /* left facet */
    --azure: #1590E0;      /* "Wise" blue */
    --cyan: #22C3E6;       /* light facet */
    --signal: #FF7A1A;     /* orange dot / lower facet */
    --signal-deep: #E8590C;
    --paper: #F4F7FC;
    --white: #FFFFFF;
    --line: #DCE4F2;
    --line-dark: rgba(255, 255, 255, .14);
    --muted: #4F5F84;
    --muted-light: #A9B9DB;

    --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
    --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

    /* type scale (1.25 ratio) */
    --t-xs: .8rem;
    --t-sm: .9rem;
    --t-md: 1.0625rem;
    --t-lg: 1.25rem;
    --t-xl: 1.6rem;
    --t-2xl: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    --t-hero: clamp(2.1rem, 1.2rem + 3.4vw, 3.7rem);

    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --nav-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 400 var(--t-md)/1.65 var(--f-body);
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--cobalt); }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--signal); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm); z-index: 100; font-weight: 600; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 24px;
    border-radius: var(--r-sm); border: 2px solid transparent;
    font: 600 var(--t-md)/1 var(--f-display); text-decoration: none; cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--signal { background: var(--signal); color: var(--ink); }
.btn--signal:hover { background: #FF8F3D; }
.btn--signal:active { transform: translateY(1px); }
.btn--ghost { border-color: rgba(255,255,255,.4); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.btn--block { width: 100%; }

/* ---------- Navigation ---------- */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
    transition: background-color .25s, box-shadow .25s;
}
.nav__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; gap: 24px; }
.nav__brand { display: block; position: relative; height: clamp(44px, 2.4vw + 26px, 58px); aspect-ratio: 560 / 173; flex: none; }
.nav__brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.logo-on-light { opacity: 0; }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); }
.nav__links a { color: var(--white); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav__links a:not(.nav__cta):hover { color: var(--cyan); }
.nav__cta { background: var(--signal); color: var(--ink) !important; padding: 10px 18px; border-radius: var(--r-sm); font-family: var(--f-display); font-weight: 600 !important; }
.nav__cta:hover { background: #FF8F3D; }
.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.nav__toggle span { display: block; height: 2px; background: var(--white); margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }

.nav.is-solid { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.nav.is-solid .logo-on-dark { opacity: 0; }
.nav.is-solid .logo-on-light { opacity: 1; }
.nav.is-solid .nav__links a:not(.nav__cta) { color: var(--ink); }
.nav.is-solid .nav__links a:not(.nav__cta):hover { color: var(--cobalt); }
.nav.is-solid .nav__toggle span { background: var(--ink); }

/* ---------- Hero ---------- */
.hero {
    position: relative; color: var(--white); overflow: hidden;
    background:
        radial-gradient(900px 500px at 85% 20%, rgba(34,195,230,.18), transparent 60%),
        radial-gradient(700px 500px at 10% 100%, rgba(29,78,216,.45), transparent 60%),
        var(--ink);
    padding: calc(var(--nav-h) + clamp(32px, 6vw, 72px)) 0 0;
}
.hero::before { /* faint honeycomb texture */
    content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.2v32.4L28 64.8 0 48.6V16.2zM28 64.8l28 16.2v32.4M28 64.8L0 81v32.4' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 97px;
    mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.hero__inner {
    position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__title { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; max-width: 15ch; text-wrap: balance; }
.hero__lede { margin-top: 24px; font-size: var(--t-lg); line-height: 1.6; color: #C9D6F2; max-width: 34em; }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Pillars - echo the logo tagline (orange dots between words) and act as map filters */
.pillars { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.pillars li { display: flex; align-items: center; }
.pillars li + li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin: 0 6px; }
.pillars button {
    background: none; border: 0; color: #C9D6F2; cursor: pointer; padding: 8px 8px;
    font: 600 var(--t-sm)/1 var(--f-display); letter-spacing: .14em; border-radius: 4px;
}
.pillars button:hover { color: var(--white); }
.pillars button[aria-pressed="true"] { color: var(--ink); background: var(--cyan); }

/* ---------- Honeycomb ---------- */
.hive { --hw: min(122px, calc((100vw - 2 * var(--gutter)) / 4.55)); --hh: calc(var(--hw) * 1.1547); justify-self: center; width: calc(var(--hw) * 4.5); }
.hive__grid {
    display: grid;
    grid-template-columns: repeat(9, calc(var(--hw) / 2));
    grid-auto-rows: calc(var(--hh) * .75);
    padding-bottom: calc(var(--hh) * .25);
}
.hex {
    grid-column: span 2; width: var(--hw); height: var(--hh);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    border: 0; padding: 0; cursor: pointer; color: var(--white);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    transform: scale(.93);
    background:
        linear-gradient(150deg, var(--cobalt) 0 40%, #1868DB 40% 64%, #129CDF 64% 100%);
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.hex i { font-size: calc(var(--hw) * .2); }
.hex span { font: 600 max(10.5px, calc(var(--hw) * .115))/1.1 var(--f-display); text-align: center; padding: 0 8px; }
.hex:nth-child(1) { grid-column: 1 / span 2; } .hex:nth-child(2) { grid-column: 3 / span 2; } .hex:nth-child(3) { grid-column: 5 / span 2; } .hex:nth-child(4) { grid-column: 7 / span 2; }
.hex:nth-child(5) { grid-column: 2 / span 2; } .hex:nth-child(6) { grid-column: 4 / span 2; } .hex:nth-child(7) { grid-column: 6 / span 2; } .hex:nth-child(8) { grid-column: 8 / span 2; }
.hex:nth-child(9) { grid-column: 1 / span 2; } .hex:nth-child(10) { grid-column: 3 / span 2; } .hex:nth-child(11) { grid-column: 5 / span 2; } .hex:nth-child(12) { grid-column: 7 / span 2; }
.hex:nth-child(2n) { background: linear-gradient(150deg, #173FB8 0 36%, var(--cobalt) 36% 60%, #1A7FDD 60% 100%); }
.hex:nth-child(3n) { background: linear-gradient(150deg, #0F2E8C 0 42%, #1866D9 42% 70%, var(--cyan) 70% 100%); }
.hex--feature { background: linear-gradient(150deg, #0E2E7E 0 38%, #1590E0 38% 66%, var(--cyan) 66% 100%) !important; }
.hex:hover { transform: scale(.98); }
.hex:focus-visible { outline: none; background: var(--white) !important; color: var(--ink); }
.hex.is-active { transform: scale(1); background: linear-gradient(150deg, var(--cobalt) 0 40%, #129CDF 40% 62%, var(--signal) 62% 100%) !important; }
.hex.is-dim { opacity: .22; filter: saturate(.4); }

.hive__detail {
    margin-top: 8px; min-height: 120px; padding: 18px 20px;
    border-left: 3px solid var(--signal); background: rgba(255,255,255,.05); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.hive__detail-title { font: 700 var(--t-lg)/1.2 var(--f-display); }
.hive__detail-text { margin-top: 6px; color: #C9D6F2; font-size: var(--t-sm); }
.hive__detail a { color: var(--cyan); font-weight: 600; font-size: var(--t-sm); display: inline-block; margin-top: 8px; }

/* load sequence: the hexagons assemble once */
@media (prefers-reduced-motion: no-preference) {
    .js .hex { animation: hexIn .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms + 150ms); }
    @keyframes hexIn { from { opacity: 0; transform: scale(.5) rotate(-30deg); } to { opacity: 1; transform: scale(.93); } }
}

/* protocol strip */
.protocols {
    position: relative; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-dark);
    padding: 18px var(--gutter); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px;
    color: #7F93BF; font: 500 var(--t-sm)/1.4 var(--f-display);
}

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section__head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 56px); }
.section__head h2 { font-size: var(--t-2xl); font-weight: 700; text-wrap: balance; }
.section__head p { margin-top: 16px; color: var(--muted); font-size: var(--t-lg); line-height: 1.6; }
.section__head--light h2 { color: var(--white); }
.section__head--light p { color: var(--muted-light); }

/* ---------- Capabilities ---------- */
.caps__group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(24px, 4vw, 64px); padding: 40px 0; border-top: 2px solid var(--ink); }
.caps__group:last-child { padding-bottom: 0; }
.caps__label h3 { font-size: var(--t-xl); font-weight: 700; }
.caps__label p { margin-top: 10px; color: var(--muted); }
.caps__label { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.caps__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.cap { padding: 22px 0 28px; border-top: 1px solid var(--line); }
.caps__list .cap:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.cap h4 { font-size: var(--t-lg); font-weight: 600; display: flex; align-items: center; gap: 12px; }
.cap h4 i {
    flex: none; width: 34px; height: 38px; display: grid; place-items: center; font-size: 15px; color: var(--white);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(150deg, var(--cobalt) 0 45%, var(--azure) 45% 70%, var(--cyan) 70%);
}
.cap p { margin-top: 12px; color: var(--muted); }
.tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: var(--t-xs); font-weight: 500; padding: 4px 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-3); }
.cap:target h4 { color: var(--cobalt); }

/* ---------- Industries ---------- */
.industries { background: var(--paper); }
.feature {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px);
    border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); margin-bottom: 24px; overflow: hidden; position: relative;
}
.feature h3 { font-size: var(--t-2xl); font-weight: 700; margin-top: 18px; }
.feature__copy > p { margin-top: 14px; font-size: var(--t-lg); line-height: 1.6; max-width: 34em; }
.feature__icon {
    width: 54px; height: 62px; display: grid; place-items: center; font-size: 22px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.checks { margin-top: 22px; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; line-height: 1.55; }
.checks li::before {
    content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 14px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* surface: dark (navy) or light (white card) */
.feature--dark { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--white); }
.feature--dark .feature__copy > p { color: #C9D6F2; }
.feature--dark .checks li { color: #DCE6FA; }
.feature--light { background: var(--white); border: 1px solid var(--line); }
.feature--light .feature__copy > p { color: var(--muted); }
/* layout: art on the left */
.feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.feature--flip .feature__copy { order: 2; }
/* accent colour for the icon and bullets */
.feature--cyan .checks li::before { background: var(--cyan); }
.feature--cyan .feature__icon { background: linear-gradient(150deg, var(--cobalt) 0 45%, var(--cyan) 45%); color: var(--white); }
.feature--light.feature--cyan .checks li::before { background: var(--azure); }
.feature--orange .checks li::before { background: var(--signal); }
.feature--orange .feature__icon { background: linear-gradient(150deg, var(--signal-deep) 0 45%, var(--signal) 45%); color: var(--white); }
.feature--cobalt .checks li::before { background: var(--cobalt); }
.feature--cobalt .feature__icon { background: linear-gradient(150deg, var(--ink) 0 45%, var(--cobalt) 45%); color: var(--white); }
.rail-art { width: 100%; height: auto; }

/* infographic SVGs */
.ig { width: 100%; height: auto; overflow: visible; }
.ig text { font-family: var(--f-body); }
.ig .ig-t { font: 600 13px var(--f-display); }
.ig .ig-s { font-size: 11.5px; }
.ig .ig-big { font: 700 20px var(--f-display); }
@media (prefers-reduced-motion: no-preference) {
    .blades--a { transform-origin: 298px 110px; animation: spinBlade 7s linear infinite; }
    .blades--b { transform-origin: 384px 158px; animation: spinBlade 5s linear infinite; }
    .flow { animation: flow 1.6s linear infinite; }
    @keyframes spinBlade { to { transform: rotate(360deg); } }
    @keyframes flow { to { stroke-dashoffset: -28; } }
}

.panel { background: var(--ink); color: var(--white); border-radius: var(--r-md); padding: 20px; font-size: var(--t-sm); box-shadow: 0 24px 48px -24px rgba(10,26,74,.6); }
.panel__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-display); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line-dark); }
.panel__live { font-size: var(--t-xs); color: #86EFAC; display: inline-flex; align-items: center; gap: 6px; }
.panel__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.panel__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-dark); }
.panel__rows span { color: #C9D6F2; }
.st { font-weight: 600; font-size: var(--t-xs); padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.st--ok { background: rgba(34,197,94,.16); color: #86EFAC; }
.st--warn { background: var(--signal); color: var(--ink); }
.st--fault { background: rgba(250,204,21,.16); color: #FDE68A; }
.panel__foot { margin-top: 14px; color: var(--muted-light); font-size: var(--t-xs); display: flex; gap: 8px; align-items: flex-start; }
.panel__foot::before { content: "\f0a1"; font: var(--fa-font-solid); color: var(--signal); margin-top: 2px; }
.panel--glass { background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); box-shadow: none; }
.meters li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); color: #C9D6F2; }
.meters svg { width: 100%; height: 8px; display: block; }
.meters b { text-align: right; font-family: var(--f-display); color: var(--white); }
.meters__main span, .meters__main b { color: var(--white); font-weight: 700; font-size: var(--t-md); }
.spark { margin-top: 16px; }
.spark__label { font-size: var(--t-xs); color: var(--muted-light); margin-bottom: 4px; }
.spark__svg { width: 100%; height: auto; overflow: visible; }
.spark__svg .ig-s { font-size: 11px; font-family: var(--f-body); }

.sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 8px; margin-top: 40px; border-top: 1px solid var(--line); }
.sectors li { display: flex; gap: 14px; padding: 24px 20px 4px 0; }
.sectors i { color: var(--cobalt); font-size: 20px; margin-top: 3px; width: 24px; flex: none; }
.sectors h4 { font-size: var(--t-md); font-weight: 600; }
.sectors p { margin-top: 6px; color: var(--muted); font-size: var(--t-sm); }

/* ---------- Edge to cloud ---------- */
.e2c { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; counter-reset: none; position: relative; }
.chain__node { position: relative; padding: 22px 18px 24px; border: 1px solid var(--line-dark); border-radius: var(--r-md); background: rgba(255,255,255,.03); }
.chain__node i { font-size: 22px; color: var(--cyan); }
.chain__node h4 { margin-top: 14px; font-size: var(--t-md); font-weight: 600; }
.chain__node p { margin-top: 8px; color: var(--muted-light); font-size: var(--t-sm); line-height: 1.5; }
.chain__node:not(:last-child)::after { /* connector */
    content: ""; position: absolute; top: 34px; right: -17px; width: 18px; height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--signal));
}
.chain__node:nth-child(4) { border-color: rgba(34,195,230,.5); }
.chain__security { margin-top: 24px; padding: 16px 20px; border-radius: var(--r-md); background: rgba(255,122,26,.1); border: 1px solid rgba(255,122,26,.35); color: #FFD7B8; display: flex; gap: 12px; align-items: baseline; }
.chain__security i { color: var(--signal); }
@media (prefers-reduced-motion: no-preference) {
    .chain__node:not(:last-child)::before { /* data packet travelling to the next stage */
        content: ""; position: absolute; top: 32px; right: -14px; width: 6px; height: 6px; border-radius: 50%;
        background: var(--signal); z-index: 1; animation: packet 2.4s linear infinite; animation-delay: calc(var(--i, 0) * .4s);
    }
    @keyframes packet { 0% { transform: translateX(-4px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateX(14px); opacity: 1; } 70%, 100% { transform: translateX(14px); opacity: 0; } }
}

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, var(--cobalt), var(--cyan), var(--signal)); }
.steps li { position: relative; }
.steps__n {
    position: relative; display: grid; place-items: center; width: 44px; height: 50px; font: 700 var(--t-md)/1 var(--f-display); color: var(--white);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--ink); margin-top: -3px;
}
.steps li:last-child .steps__n { background: var(--signal); color: var(--ink); }
.steps h4 { margin-top: 18px; font-size: var(--t-lg); font-weight: 600; }
.steps p { margin-top: 8px; color: var(--muted); font-size: var(--t-sm); }

/* ---------- Why + stack ---------- */
.why { background: var(--paper); }
.why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); }
.why h2 { font-size: var(--t-2xl); font-weight: 700; }
.why__list { margin: 28px 0 0; display: grid; gap: 22px; }
.why__list dt { font: 600 var(--t-lg)/1.3 var(--f-display); }
.why__list dd { margin: 6px 0 0; color: var(--muted); }
.stack { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); align-self: start; }
.stack h3 { font-size: var(--t-lg); font-weight: 600; margin-bottom: 8px; }
.stack__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.stack__row:first-of-type { border-top: 0; }
.stack__row h4 { font: 600 var(--t-sm)/1.5 var(--f-body); letter-spacing: 0; color: var(--cobalt); }
.stack__row p { font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Contact ---------- */
.contact { background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact__info h2 { font-size: var(--t-2xl); font-weight: 700; text-wrap: balance; }
.contact__info > p { margin-top: 14px; color: var(--muted); font-size: var(--t-lg); }
.next { margin-top: 28px; display: grid; gap: 14px; counter-reset: n; }
.next li { counter-increment: n; position: relative; padding-left: 44px; color: var(--muted); }
.next li b { color: var(--ink); font-weight: 600; }
.next li::before {
    content: counter(n); position: absolute; left: 0; top: -2px; width: 28px; height: 32px; display: grid; place-items: center;
    font: 700 var(--t-sm)/1 var(--f-display); color: var(--white); background: var(--cobalt);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.contact__details { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.contact__details li { display: flex; gap: 14px; align-items: flex-start; }
.contact__details i { color: var(--signal-deep); width: 18px; margin-top: 5px; text-align: center; }
.contact__details a { color: var(--ink); font-weight: 500; }

.form { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--cobalt); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); box-shadow: 0 30px 60px -40px rgba(10,26,74,.45); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
    width: 100%; font: 400 var(--t-md)/1.4 var(--f-body); color: var(--ink);
    padding: 12px 14px; border: 1.5px solid #C8D3E8; border-radius: var(--r-sm); background: var(--white);
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(29,78,216,.18); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C2410C; }
.field__hint { margin-top: 6px; font-size: var(--t-xs); color: var(--muted); }
.field__err { margin-top: 6px; font-size: var(--t-xs); color: #B42318; font-weight: 500; }
.field__err:empty { display: none; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.captcha__box { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; }
.captcha__box img { font-size: 11px; color: var(--muted); width: 180px; height: auto; aspect-ratio: 220 / 70; border-radius: var(--r-sm); border: 1.5px solid #C8D3E8; background: var(--paper); }
.captcha__refresh { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1.5px solid #C8D3E8; background: var(--white); color: var(--ink); cursor: pointer; }
.captcha__refresh:hover { border-color: var(--cobalt); color: var(--cobalt); }
.captcha__refresh.is-spinning i { animation: spin .6s linear; }
.captcha__box input { text-transform: uppercase; letter-spacing: .25em; font-family: var(--f-display); font-weight: 600; }

#submitBtn { margin-top: 6px; }
.spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(10,26,74,.3); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
.is-busy .spinner { display: inline-block; }
.is-busy { pointer-events: none; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { margin-top: 14px; font-size: var(--t-sm); font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-error { color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; padding: 12px 14px; border-radius: var(--r-sm); }
.form__privacy { margin-top: 12px; font-size: var(--t-xs); color: var(--muted); text-align: center; }

.form.is-done > :not(.form-done) { display: none !important; }
.form-done { text-align: left; padding: 8px 0; outline: none; }
.form-done__icon { width: 60px; height: 68px; display: grid; place-items: center; font-size: 26px; color: var(--white); background: linear-gradient(150deg, var(--cobalt) 0 45%, var(--azure) 45% 70%, var(--signal) 70%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.form-done h3 { margin-top: 18px; font-size: var(--t-xl); }
.form-done p { margin-top: 10px; color: var(--muted); }
.form-done button { margin-top: 20px; background: none; border: 0; color: var(--cobalt); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--muted-light); padding: 64px 0 0; font-size: var(--t-sm); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.footer__brand img { width: 300px; max-width: 100%; height: auto; }
.footer h4 { color: var(--white); font-size: var(--t-md); font-weight: 600; margin-bottom: 14px; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--muted-light); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__base { margin-top: 48px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--line-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .chain__node:nth-child(3)::after, .chain__node:nth-child(3)::before { display: none; }
    .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__title { max-width: 18ch; }
    .hive { margin-top: 8px; }
    .caps__group { grid-template-columns: 1fr; }
    .caps__label { position: static; }
    .feature, .feature--flip { grid-template-columns: 1fr; }
    .feature--flip .feature__copy { order: 0; }
    .steps { grid-template-columns: 1fr; gap: 0; }
    .steps::before { top: 0; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--cobalt), var(--cyan), var(--signal)); }
    .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding-bottom: 26px; }
    .steps li:last-child { padding-bottom: 0; }
    .steps::before { bottom: 60px; }
    .steps__n { grid-row: span 2; }
    .steps h4 { margin-top: 10px; }
    .why__grid, .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    :root { --nav-h: 68px; }
    .nav__brand { height: 44px; }
    .nav__toggle { display: block; }
    .nav__links {
        position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
        background: var(--white); padding: 8px var(--gutter) 20px; box-shadow: 0 12px 24px -12px rgba(10,26,74,.3);
        transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
    }
    .nav__links a { color: var(--ink) !important; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
    .nav__links .nav__cta { margin-top: 14px; text-align: center; border-bottom: 0; }
    .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; }
    .nav.is-open { background: var(--white); }
    .nav.is-open .logo-on-dark { opacity: 0; }
    .nav.is-open .logo-on-light { opacity: 1; }
    .nav.is-open .nav__toggle span { background: var(--ink); }
    .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
    .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 700px) {
    .caps__list { grid-template-columns: 1fr; }
    .caps__list .cap:nth-child(2) { border-top: 1px solid var(--line); padding-top: 22px; }
    .chain { grid-template-columns: 1fr; gap: 14px; }
    .chain__node { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; padding: 16px; }
    .chain__node i { grid-row: span 2; margin-top: 2px; }
    .chain__node h4 { margin-top: 0; }
    .chain__node:not(:last-child)::after { display: block !important; top: auto; bottom: -15px; right: auto; left: 31px; width: 2px; height: 14px; background: linear-gradient(180deg, var(--cyan), var(--signal)); }
    .chain__node:not(:last-child)::before { display: none; }
    .sectors { grid-template-columns: 1fr; }
    .stack__row { grid-template-columns: 1fr; gap: 2px; }
    .form__row { grid-template-columns: 1fr; }
    .captcha__box { grid-template-columns: auto auto; }
    .captcha__box input { grid-column: 1 / -1; }
    .footer__grid { grid-template-columns: 1fr; }
    .hive__detail { min-height: 140px; }
    .feature { padding: 24px 20px; }
    .ig .ig-t { font-size: 16px; }
    .ig .ig-s { font-size: 14px; }
    .ig .ig-big { font-size: 23px; }
    .meters li { grid-template-columns: 5.5rem minmax(0, 1fr) 2.6rem; gap: 8px; }
    .panel__rows li { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}