@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/sora-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/sora-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/sora-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/sora-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/sora-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/alphalogix/assets/fonts/sora-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: the proposed alphalogix.com.au as a clickable prototype. Every page shares one sticky header
   with mega menus, one footer, and one lead form; the "SEO & leads" drawer shows each page's search
   and lead plan. Single committed look (the brand's own navy and blue on white), so no dark variant. */
:root {
  color-scheme: light;
  --ink: #05070F; --night: #070B1A; --navy: #0B1230; --line: rgba(147, 228, 255, 0.14);
  --blue: #0436FB; --blue-hi: #3D63FF; --sky: #93E4FF;
  --white: #FFFFFF; --mist: #B6C0D4; --paper: #F4F6FB; --rule: #E3E8F2;
  --text: #1E1E1E; --sub: #5A6274; --ok: #34D399; --teal: #2DD4BF; --amber: #F5B544; --red: #F0614F;
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Poppins", "Segoe UI", system-ui, sans-serif;
  --hdr: 72px;
}
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); }
body { background: var(--white); color: var(--text); margin: 0; }
.alx { font-family: var(--body); color: var(--text); -webkit-font-smoothing: antialiased; }
.alx *, .alx *::before, .alx *::after { box-sizing: border-box; }
:where(.alx) a { color: inherit; text-decoration: none; }
.alx h1, .alx h2, .alx h3, .alx h4 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
.alx p { margin: 0; }
.alx img { max-width: 100%; display: block; }
.alx button { font: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.dark .eyebrow, .eyebrow.on-dark { color: var(--sky); }
.sec { padding-block: 100px; }
.sec.paper { background: var(--paper); }
.sec.dark { background: var(--night); color: var(--white); position: relative; overflow: hidden; }
.sec.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 12% 0%, rgba(4, 54, 251, 0.26), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(147, 228, 255, 0.08), transparent 70%); pointer-events: none; }
.sec.dark > .wrap { position: relative; }
.h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; font-weight: 600; color: var(--ink); margin-top: 14px; }
.dark .h2 { color: var(--white); }
.lead { font-size: 17px; line-height: 1.7; color: var(--sub); }
.dark .lead { color: var(--mist); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: 48px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 15px; padding: 13px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; }
.btn svg, .lnk svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.btn:hover svg, .lnk:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 10px 30px -12px rgba(4, 54, 251, 0.75); }
.btn-primary:hover { background: var(--blue-hi); transform: translateY(-1px); }
.btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.24); background: transparent; }
.btn-ghost:hover { border-color: var(--sky); color: var(--sky); }
.btn-line { color: var(--ink); border-color: #CBD3E4; background: var(--white); }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--blue); }
.dark .lnk { color: var(--sky); }
.alx :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* ================= Header ================= */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(5, 7, 15, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(147, 228, 255, 0.10); color: var(--white); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; gap: 20px; }
.logo img { height: 28px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav > li { list-style: none; position: static; }
.nav { padding: 0; margin-block: 0; }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: #DCE3F2; background: none; border: 0; cursor: pointer; }
.nav-btn svg { width: 12px; height: 12px; transition: transform .2s ease; opacity: 0.7; }
.nav-btn:hover, .nav > li.open > .nav-btn { color: var(--white); background: rgba(147, 228, 255, 0.08); }
.nav > li.open > .nav-btn svg { transform: rotate(180deg); }
.nav-btn.cur { color: var(--sky); }
.hdr-cta { display: flex; align-items: center; gap: 14px; }
.hdr-login { font-size: 14px; color: #DCE3F2; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hdr-login:hover { color: var(--sky); }
.hdr-login svg { width: 16px; height: 16px; }
.hdr .btn { padding: 10px 16px; font-size: 14px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: none; color: var(--white); cursor: pointer; place-items: center; }
.burger svg { width: 22px; height: 22px; }

/* Mega panels */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #070B1A; border-bottom: 1px solid rgba(147, 228, 255, 0.12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.nav > li.open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.mega-in { padding-block: 30px 34px; }
.mega-svc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; }
.msvc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.msvc { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(147, 228, 255, 0.1); background: rgba(20, 28, 56, 0.45); transition: border-color .2s ease, background-color .2s ease; min-width: 0; }
.msvc:hover { border-color: rgba(147, 228, 255, 0.3); background: rgba(20, 28, 56, 0.75); }
.msvc-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.msvc-head .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(4, 54, 251, 0.22); color: var(--sky); }
.msvc-head .ic svg { width: 18px; height: 18px; }
.msvc-head b { display: block; font-size: 15px; font-weight: 600; color: var(--white); }
.msvc-head b + span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--mist); }
.msvc-head:hover b { color: var(--sky); }
.msvc ul { list-style: none; margin: 14px 0 0; padding: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border-top: 1px solid rgba(147, 228, 255, 0.08); min-width: 0; }
.msvc li a { display: block; font-size: 13px; line-height: 1.4; color: #C9D2E6; overflow-wrap: anywhere; }
.msvc li a:hover { color: var(--white); }
.msvc-all { margin: auto 0 0; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sky); white-space: nowrap; }
.msvc-all svg { width: 14px; height: 14px; }
.msvc-side { display: grid; gap: 12px; grid-auto-rows: min-content; }
.msvc-cs { --cs: #E4002B; position: relative; display: grid; gap: 8px; padding: 18px; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, rgba(228, 0, 43, 0.35), rgba(0, 0, 0, 0.9) 60%), #000; border: 1px solid rgba(228, 0, 43, 0.45); transition: border-color .2s ease, transform .2s ease; }
.msvc-cs:hover { border-color: var(--cs); transform: translateY(-2px); }
.msvc-cs img { height: 18px; width: auto; }
.msvc-cs b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--white); }
.msvc-cs span { font-size: 13px; line-height: 1.5; color: #C9D2E6; }
.msvc-cs .lnk { font-style: normal; color: #FF5C75; font-size: 13.5px; }
.msvc-link { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(147, 228, 255, 0.1); transition: border-color .2s ease, background-color .2s ease; }
.msvc-link:hover { border-color: rgba(147, 228, 255, 0.3); background: rgba(20, 28, 56, 0.6); }
.msvc-link b { font-size: 14px; font-weight: 600; color: var(--white); }
.msvc-link span { font-size: 12.5px; line-height: 1.45; color: var(--mist); }
/* the foot link of every dropdown sits on navy: sky, like the "See all" links, not the page blue (Peter, 8 Oct) */
.mega-foot .lnk { color: var(--sky); }
.mega-foot .lnk:hover, .mega-foot .lnk:focus-visible { color: var(--white); }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(147, 228, 255, 0.10); font-size: 13.5px; color: var(--mist); }
.mega-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mcard { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 18px; border-radius: 14px; border: 1px solid rgba(147, 228, 255, 0.12); background: rgba(20, 28, 56, 0.55); transition: border-color .2s ease, background-color .2s ease; }
.mcard:hover { border-color: rgba(147, 228, 255, 0.35); background: rgba(20, 28, 56, 0.9); }
.mcard .ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(4, 54, 251, 0.22); color: var(--sky); }
.mcard .ic svg { width: 20px; height: 20px; }
.mcard b { font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--white); }
.mcard span { font-size: 13px; color: var(--mist); line-height: 1.5; }
.mcard.photo { grid-template-columns: 64px 1fr; }
.mcard.photo img { grid-row: span 2; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--white); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); overflow-y: auto; overscroll-behavior: contain; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); padding-inline: 20px; border-bottom: 1px solid rgba(147, 228, 255, 0.10); flex: none; }
.drawer-top button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: none; color: var(--white); display: grid; place-items: center; cursor: pointer; }
.drawer-top svg { width: 22px; height: 22px; }
.drawer-body { padding: 10px 20px 20px; display: grid; gap: 2px; }
.drawer details { border-bottom: 1px solid rgba(147, 228, 255, 0.08); }
.drawer summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font-family: var(--display); font-weight: 600; font-size: 18px; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 16px; height: 16px; transition: transform .2s ease; opacity: 0.7; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer details ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.drawer details li a { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 8px; color: #DCE3F2; font-size: 15px; }
.drawer details li a:hover { background: rgba(147, 228, 255, 0.06); }
.drawer details li .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(4, 54, 251, 0.22); color: var(--sky); flex: none; }
.drawer details li .ic svg { width: 16px; height: 16px; }
.drawer-cta { margin-top: auto; padding: 20px; display: grid; gap: 10px; border-top: 1px solid rgba(147, 228, 255, 0.10); }
.drawer-cta .btn { width: 100%; }
.drawer-cta .call { text-align: center; font-size: 14px; color: var(--mist); }
.drawer-cta .call a, .onebadge b a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(147, 228, 255, 0.5); text-underline-offset: 3px; }

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--mist); margin-bottom: 22px; list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a:hover { color: var(--white); }

/* ================= Home hero (3D network) ================= */
.alx-hero { position: relative; overflow: hidden; min-height: 760px; display: flex; align-items: center; background: radial-gradient(90% 80% at 72% 50%, #0A1640 0%, var(--night) 52%, var(--ink) 100%); color: var(--white); padding-block: 110px 90px; }
.alx-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.alx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 7, 15, 0.94) 0%, rgba(5, 7, 15, 0.70) 34%, rgba(5, 7, 15, 0) 58%), linear-gradient(0deg, rgba(5, 7, 15, 0.9) 0%, rgba(5, 7, 15, 0) 22%); }
.alx-hero-inner { position: relative; z-index: 3; width: 100%; }
.alx-hero-copy { max-width: 640px; }
.alx-hero h1.kw { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }
.display { font-family: var(--display); font-size: clamp(36px, 4.4vw, 58px); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; margin-top: 18px; text-wrap: balance; }
.display > span:not(.w):not(.ln) { display: block; background: linear-gradient(90deg, #FFFFFF 0%, var(--sky) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { font-size: 18px; line-height: 1.65; color: var(--mist); margin-top: 22px; max-width: 56ch; }
/* The page reset (.alx p { margin: 0 }) outranks a single class, so paragraph spacing is stated at the reset's weight
   (7 Oct: every hero's headline and subhead had been sitting flush). wp_build checks for any new case. */
.alx .display { margin-top: 14px; }
.alx .hero-lede { margin-top: 18px; }
.alx .cs-src { margin-top: 10px; }
.alx .ct-licence { margin-top: 16px; }
.alx .g-sub { margin: 0 0 14px; }
.alx .guide-note { margin-top: 22px; }
.alx .note { margin-top: 18px; }
.alx .tier-add { margin-top: 22px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; color: var(--mist); }
.proof span { display: inline-flex; align-items: center; gap: 8px; }
.proof svg { width: 15px; height: 15px; color: var(--sky); flex: none; }
.alx-callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.alx-callout { position: absolute; left: 0; top: 0; width: 220px; display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 10px 13px; border-radius: 11px; background: rgba(9, 13, 30, 0.82); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; line-height: 1.4; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); opacity: 0; scale: 0.96; transition: opacity .45s ease, scale .45s ease; will-change: transform; }
.alx-callout.on { opacity: 1; scale: 1; }
.alx-callout i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16); }
.alx-callout.amber i { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 181, 68, 0.18); }
.alx-callout.blue i { background: var(--sky); box-shadow: 0 0 0 4px rgba(147, 228, 255, 0.16); }
.alx-callout b { display: block; font-weight: 500; color: var(--white); }
.alx-callout small { color: var(--mist); font-size: 11.5px; }
.alx-hint { position: absolute; z-index: 3; right: 24px; bottom: 22px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(182, 192, 212, 0.55); }

/* Partners */
.partners { background: var(--ink); color: var(--mist); padding-block: 32px 38px; border-top: 1px solid rgba(147, 228, 255, 0.08); }
.partners p { text-align: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* The row is the logos twice and slides left by half its width. A gap also follows the last logo, so half the width is
   exactly one row and the loop never jumps (Peter, 9 Oct 2026: the ribbon "keeps skipping"; it jumped 32 px each loop). */
.track { --gap: 14px; display: flex; width: max-content; gap: var(--gap); padding-inline-end: var(--gap); align-items: center; animation: scroll 70s linear infinite; padding-block: 6px; }
.marquee:hover .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: max(16px, 4vw); } .track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding-inline-end: 0; } .track > [aria-hidden="true"] { display: none; } }
/* Partner logos, dark-mode treatment: every logo in white on the dark sections, full strength on hover.
   Colour files become white silhouettes; white-only files show as supplied; mixed files go greyscale. */
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.lg { display: grid; place-items: center; }
.lg img { max-height: 26px; max-width: 120px; width: auto; height: auto; object-fit: contain; opacity: 0.78; transition: opacity .2s ease, transform .2s ease; }
.lg.colour img { filter: brightness(0) invert(1); }
.lg.dark img { filter: grayscale(1) brightness(1.5); }
.lg:hover img { opacity: 1; transform: translateY(-1px); }
.logos.sm { gap: 12px 20px; }
.logos.sm .lg img { max-height: 19px; max-width: 86px; }
.svc-card .logos.sm { margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: var(--night); }
.box .logos.sm { margin-bottom: 14px; }
.track { --gap: 64px; }
.track .lg img { max-height: 32px; max-width: 150px; }
.track .lg.tall img { max-height: 42px; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Service index cards (home + services hub) */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 26px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; min-width: 0; }
.svc-card:hover { transform: translateY(-3px); border-color: #C9D5FF; box-shadow: 0 24px 50px -30px rgba(4, 54, 251, 0.45); }
.svc-card .top { display: flex; align-items: center; gap: 14px; }
.ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); flex: none; }
.ico svg { width: 24px; height: 24px; }
.svc-card h3 { font-size: 20px; font-weight: 600; color: var(--ink); }
.svc-card h3 a:hover { color: var(--blue); }
.svc-card > p { font-size: 14.5px; line-height: 1.65; color: var(--sub); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; align-content: flex-start; }
.chips a, .chips span { display: inline-block; font-size: 12.5px; line-height: 1.3; padding: 6px 10px; border-radius: 999px; background: var(--paper); color: #3B4357; border: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.chips a:hover { border-color: #C9D5FF; color: var(--blue); }
/* Touch screens (7 Oct): every link and button at least 40 px tall to tap */
@media (pointer: coarse), (max-width: 760px) {
  .chips a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 8px; }
  .na-views a { display: inline-flex; align-items: center; min-height: 40px; }
  .proof a.where, .lp-trust a.where { display: inline-flex; align-items: center; min-height: 40px; }
  .alx .ctl button { height: 44px; width: 40px; }
  .alx .lp-switch button { min-height: 40px; }
  .alx .lg-toc li > a { min-height: 40px; align-items: center; }
  .lnk { min-height: 40px; }
  .socials a { width: 42px; height: 42px; }
  .ftr-bot nav a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* Contact tiles: the whole tile is the link (7 Oct), not just the number or address inside it */
.ct-ways li, .ct-phones li { position: relative; }
.ct-ways li a::after, .ct-phones li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Screens hold their 16:9 shape before a lazy image arrives, so the page does not jump while scrolling */
.g-shots .zoom img, .nx-shot .zoom img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.dark .chips span, .chips.on-dark span { background: rgba(147, 228, 255, 0.08); color: #DCE3F2; border-color: rgba(147, 228, 255, 0.14); }

/* Offer strip */
.offer-strip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 34px; border-radius: 20px; background: linear-gradient(120deg, #0436FB 0%, #1C49FF 50%, #3D63FF 100%); color: var(--white); }
.offer-strip h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; }
.offer-strip p { margin-top: 10px; color: #DDE5FF; font-size: 15.5px; line-height: 1.65; }
.offer-strip .cta-row { margin-top: 0; justify-content: flex-end; }
.offer-strip .btn-white { background: var(--white); color: var(--blue); }
.offer-strip .btn-white:hover { background: #EAF0FF; }
.offer-strip .btn-ghost { border-color: rgba(255, 255, 255, 0.4); }

/* Platforms */
.plat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pcard { display: grid; grid-template-rows: auto auto auto 1fr; gap: 18px; padding: 30px; border-radius: 20px; background: linear-gradient(180deg, rgba(20, 28, 56, 0.9), rgba(12, 17, 36, 0.9)); border: 1px solid var(--line); min-width: 0; }
.tag { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
.pcard h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.15; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.55; color: #DCE3F2; }
.ticks svg { width: 18px; height: 18px; color: var(--sky); margin-top: 2px; }
.light .ticks li, .ticks.light li { color: var(--text); }
.light .ticks svg, .ticks.light svg { color: var(--blue); }
.screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: #050812; border: 1px solid var(--line); margin: 0; }
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* A real product screen in a home platform card (7 Oct) */
.pshot { margin: 0; display: grid; gap: 10px; min-width: 0; }
.pshot img, .pshot video { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border-radius: 14px; border: 1px solid var(--line); background: #050812; }
.pshot figcaption { font-size: 12.5px; color: var(--mist); }
.pshot .g-src { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #C9D3EA; }
.screen figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: rgba(182, 192, 212, 0.8); letter-spacing: 0.04em; }

/* Industries */
.inds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.ind { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; max-width: 100%; color: var(--white); display: flex; align-items: flex-end; }
.ind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.ind:hover img { transform: scale(1.06); }
.ind::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 15, 0) 45%, rgba(5, 7, 15, 0.85) 100%); }
.ind b { position: relative; z-index: 1; padding: 18px; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.3; }

/* Team */
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.portrait { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 4.4; max-width: 100%; margin: 0; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.portrait figcaption { position: absolute; left: 16px; bottom: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 13px; line-height: 1.4; }
.portrait figcaption b { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; }
.office { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.office figure { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.office img { width: 100%; height: 100%; object-fit: cover; }
.visit { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; margin-top: 26px; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); }
.visit .vic { position: relative; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); grid-row: span 2; }
.visit .vic svg { width: 22px; height: 22px; }
.visit .vic::after { content: ""; position: absolute; inset: 0; border-radius: 13px; border: 2px solid rgba(4, 54, 251, 0.35); animation: ping 2.8s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.visit b, .visit > span:not(.vic) { grid-column: 2; min-width: 0; }
.visit b { align-self: end; }
.visit > span:not(.vic) { align-self: start; }
.visit b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.visit span { font-size: 14px; color: var(--sub); line-height: 1.5; }
.visit .acts { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lp-trust svg, .addr svg { width: 15px; height: 15px; color: var(--sky); flex: none; }
.lp-trust span { display: inline-flex; align-items: center; gap: 8px; }

/* Closing CTA */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: 110px; }
.cta-band > img { position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; object-position: 50% 25%; opacity: 0.9; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 38%, rgba(5, 7, 15, 0.75) 60%, rgba(5, 7, 15, 0.15) 100%); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.08; font-weight: 600; max-width: 15ch; }
.cta-band p { font-size: 18px; line-height: 1.65; color: var(--mist); margin-top: 18px; max-width: 46ch; }

/* ================= Service page ================= */
.sv-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: 70px 80px; }
.sv-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.sv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 15, 0.96) 0%, rgba(5, 7, 15, 0.82) 45%, rgba(5, 7, 15, 0.45) 100%); }
.sv-hero .wrap { position: relative; z-index: 1; }
.sv-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sv-hero h1 { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); display: flex; align-items: center; gap: 12px; }
.sv-hero h1 .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(4, 54, 251, 0.3); color: var(--sky); }
.sv-hero h1 .ic svg { width: 18px; height: 18px; }
.sv-hero .display { font-size: clamp(32px, 3.9vw, 52px); }
.offer { padding: 26px; border-radius: 18px; background: rgba(10, 15, 34, 0.86); border: 1px solid rgba(147, 228, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; gap: 14px; min-width: 0; }
.offer .tag { display: inline-flex; align-items: center; gap: 8px; }
.offer .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.offer h2 { font-size: 24px; font-weight: 600; line-height: 1.2; }
.offer p { font-size: 14.5px; line-height: 1.65; color: var(--mist); }
.offer .btn { width: 100%; }
.offer small { font-size: 12px; color: rgba(182, 192, 212, 0.75); text-align: center; }
.tools { display: grid; gap: 12px; margin-top: 30px; }
.tools > span:first-child { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.tools .lg { animation: badgeIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.tools .lg:nth-child(1) { animation-delay: .35s; } .tools .lg:nth-child(2) { animation-delay: .42s; } .tools .lg:nth-child(3) { animation-delay: .49s; } .tools .lg:nth-child(4) { animation-delay: .56s; } .tools .lg:nth-child(5) { animation-delay: .63s; } .tools .lg:nth-child(6) { animation-delay: .7s; } .tools .lg:nth-child(7) { animation-delay: .77s; } .tools .lg:nth-child(8) { animation-delay: .84s; } .tools .lg:nth-child(n+9) { animation-delay: .91s; }
@keyframes badgeIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 50px; align-items: start; }
.problem blockquote { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.7vw, 34px); line-height: 1.2; font-weight: 600; color: var(--ink); }
.problem blockquote::before { content: ""; display: block; width: 44px; height: 3px; background: var(--blue); margin-bottom: 20px; border-radius: 2px; }
.problem .lead p + p { margin-top: 14px; }
.inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.inc details { border-radius: 14px; background: var(--white); border: 1px solid var(--rule); transition: border-color .2s ease, box-shadow .2s ease; min-width: 0; }
.inc details[open] { border-color: #C9D5FF; box-shadow: 0 20px 44px -30px rgba(4, 54, 251, 0.5); }
.inc details.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(4, 54, 251, 0.15); } }
.inc summary { list-style: none; cursor: pointer; padding: 20px 20px 18px; display: grid; gap: 8px; }
.inc summary::-webkit-details-marker { display: none; }
.inc summary b { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.inc summary b svg { width: 18px; height: 18px; color: var(--blue); flex: none; transition: transform .2s ease; margin-top: 2px; }
.inc details[open] summary b svg { transform: rotate(45deg); }
.inc summary span { font-size: 14px; line-height: 1.6; color: var(--sub); }
.inc .more { padding: 0 20px 20px; font-size: 14px; line-height: 1.7; color: var(--sub); display: grid; gap: 10px; }
.diff { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; }
.diff ul { list-style: none; margin: 0; padding: 0; }
.diff li { display: grid; grid-template-columns: 26px 1fr; gap: 6px 16px; padding-block: 20px; border-top: 1px solid var(--rule); }
.diff li:last-child { border-bottom: 1px solid var(--rule); }
.diff li svg { width: 22px; height: 22px; color: var(--blue); grid-row: span 2; margin-top: 2px; }
.diff li b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.diff li span { font-size: 14.5px; line-height: 1.7; color: var(--sub); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 26px 22px 24px; border-radius: 16px; background: rgba(20, 28, 56, 0.7); border: 1px solid var(--line); counter-increment: s; min-width: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: var(--sky); }
.steps li b { display: block; margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--white); }
.steps li p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--mist); }
.light .steps li { background: var(--white); border-color: var(--rule); }
.light .steps li::before { color: var(--blue); }
.light .steps li b { color: var(--ink); }
.light .steps li p { color: var(--sub); }
.faq { max-width: 880px; display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: var(--white); border: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; font-weight: 500; font-size: 16px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--blue); flex: none; transition: transform .2s ease; margin-top: 3px; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .ans { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.75; color: var(--sub); display: grid; gap: 10px; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 50px; align-items: start; }
.callout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 34px; align-items: center; padding: 34px; border-radius: 20px; background: linear-gradient(180deg, rgba(20, 28, 56, 0.95), rgba(10, 15, 34, 0.95)); border: 1px solid var(--line); color: var(--white); }
.callout h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; margin-top: 10px; }
.callout p { margin-top: 10px; color: var(--mist); font-size: 15px; line-height: 1.7; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.related a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--rule); background: var(--white); font-weight: 500; color: var(--ink); }
.related a:hover { border-color: #C9D5FF; color: var(--blue); }

/* Guardian / Nexus */
.p-hero { position: relative; overflow: hidden; background: radial-gradient(80% 90% at 80% 40%, #0B1A4A 0%, var(--night) 55%, var(--ink) 100%); color: var(--white); padding-block: 70px 90px; }
.p-hero .wrap { position: relative; z-index: 1; }
.p-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 50px; align-items: center; }
.p-hero h1 { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #FDE7BD; background: rgba(245, 181, 68, 0.12); border: 1px solid rgba(245, 181, 68, 0.35); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.det { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.det div { padding: 22px; border-radius: 14px; border: 1px solid var(--rule); background: var(--white); min-width: 0; }
.det b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.det b::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 3px; flex: none; }
.det p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.note { margin-top: 18px; font-size: 13.5px; color: var(--sub); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pillars div { padding: 26px; border-radius: 16px; background: rgba(20, 28, 56, 0.7); border: 1px solid var(--line); min-width: 0; }
.pillars b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--white); }
.pillars p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--mist); }
.surf { display: grid; gap: 70px; }
.surf article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.surf article:nth-child(even) .shot, .surf article:nth-child(even) .nx-shot { order: 2; }
.nx-shot { margin: 0; min-width: 0; }
.nx-shot video { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--rule); background: #050812; box-shadow: 0 30px 60px -40px rgba(5, 7, 15, 0.55); }
.nx-shot img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(5, 7, 15, 0.55); }
.nx-src { margin-left: 10px; }
.surf h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; color: var(--ink); margin-top: 10px; }
.surf .sum { margin-top: 10px; font-size: 17px; color: var(--ink); font-weight: 500; line-height: 1.5; }
.surf .body { margin-top: 14px; display: grid; gap: 12px; font-size: 15px; line-height: 1.75; color: var(--sub); }
.shot { aspect-ratio: 16 / 10; max-width: 100%; border-radius: 16px; border: 1px dashed #B9C6E4; background: repeating-linear-gradient(135deg, #F4F6FB 0 14px, #EEF2FA 14px 28px); display: grid; place-items: center; text-align: center; padding: 24px; color: #6A7389; font-size: 13.5px; line-height: 1.55; }
.shot b { display: block; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cols5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.box { padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); min-width: 0; }
.box b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.box .who { display: block; margin-top: 4px; font-size: 13px; color: var(--blue); font-weight: 500; }
.box p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--sub); }
.dark .box { background: rgba(20, 28, 56, 0.7); border-color: var(--line); }
.dark .box b { color: var(--white); }
.dark .box p { color: var(--mist); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 13px; color: var(--mist); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }

/* Industries page */
.ind-rows { display: grid; gap: 22px; }
.ind-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 30px; align-items: center; padding: 18px; border-radius: 18px; border: 1px solid var(--rule); background: var(--white); }
.ind-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.ind-row h2 { font-size: 22px; font-weight: 600; color: var(--ink); }
.ind-row p { margin-top: 8px; color: var(--sub); font-size: 15px; line-height: 1.65; }
.ind-row .chips { margin-top: 14px; }

/* Reels landing page */
.lp-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: 56px 70px; }
.lp-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.lp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 15, 0.7), rgba(5, 7, 15, 0.92)); }
.lp-hero .wrap { position: relative; z-index: 1; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.lp-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.lp-switch button { font-size: 12.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(147, 228, 255, 0.25); background: transparent; color: var(--mist); cursor: pointer; }
.lp-switch button[aria-pressed="true"] { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.lp-hero h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.1; font-weight: 600; }
.lp-hero .ticks { margin-top: 24px; }
.lp-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 13px; color: var(--mist); }

/* Forms */
.form { display: grid; gap: 12px; padding: 26px; border-radius: 18px; background: var(--white); color: var(--text); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); min-width: 0; }
.form h2, .form h3 { font-size: 21px; font-weight: 600; color: var(--ink); }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: #3B4357; min-width: 0; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; border: 1px solid #CBD3E4; background: var(--white); color: var(--text); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid rgba(4, 54, 251, 0.35); border-color: var(--blue); }
.form textarea { min-height: 90px; resize: vertical; }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 12.5px; line-height: 1.5; color: var(--sub); }
.form .consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.form .consent a { color: var(--blue); text-decoration: underline; }
.form .btn { width: 100%; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .form-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: 14px; line-height: 1.6; }
.form .sent { padding: 14px; border-radius: 12px; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; font-size: 14px; line-height: 1.6; }
.form .utm { display: none; padding: 12px; border-radius: 10px; background: var(--paper); font-size: 12px; color: var(--sub); line-height: 1.6; }
.seo-on .form .utm { display: block; }
.form .utm code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: var(--ink); }

/* Lead drawer */
.lead-drawer { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: end; background: rgba(5, 7, 15, 0.55); }
.lead-panel { width: min(480px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; gap: 16px; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.5); }
.lead-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lead-top b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.xbtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #CBD3E4; background: var(--white); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.xbtn svg { width: 18px; height: 18px; }
.lead-panel .form { box-shadow: none; border: 1px solid var(--rule); }
.lead-alt { font-size: 13.5px; color: var(--sub); line-height: 1.7; }
.lead-alt a { color: var(--blue); }

/* Footer */
.ftr { background: var(--ink); color: var(--mist); padding-block: 70px 30px; font-size: 14px; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 34px; }
.ftr h2 { font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a:hover { color: var(--white); }
.ftr .brand img { height: 28px; width: auto; }
.ftr .brand p { margin-top: 16px; line-height: 1.7; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(147, 228, 255, 0.18); display: grid; place-items: center; color: var(--white); }
.socials a:hover { border-color: var(--sky); color: var(--sky); }
.socials svg { width: 17px; height: 17px; }
.phones { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-variant-numeric: tabular-nums; }
.phones dt { color: var(--white); font-weight: 500; }
.phones dd { margin: 0; }
.ftr .meta { margin-top: 14px; display: grid; gap: 8px; line-height: 1.6; }
.ftr .meta b { color: var(--white); font-weight: 500; }
.ftr-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(147, 228, 255, 0.1); font-size: 13px; }
.ftr-bot nav { display: flex; gap: 18px; }
.lp-mode .hdr .nav, .lp-mode .hdr .hdr-login, .lp-mode .burger, .lp-mode .ftr-grid > :not(.brand):not(.contact) { display: none; }
.lp-mode .ftr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lp-mode .hdr-cta { margin-left: auto; }

/* ================= SEO & leads drawer ================= */
.seo { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100%); background: #0A0F22; color: #DCE3F2; border-left: 1px solid rgba(147, 228, 255, 0.16); overflow-y: auto; overscroll-behavior: contain; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(90px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; line-height: 1.6; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.8); }
.seo h3 { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin: 22px 0 10px; }
.seo-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.seo-top b { font-family: var(--display); font-size: 16px; color: var(--white); }
.seo-top .xbtn { background: transparent; border-color: rgba(147, 228, 255, 0.25); color: var(--white); }
.serp { padding: 14px; border-radius: 12px; background: var(--white); color: #202124; font-family: Arial, sans-serif; }
.serp .u { font-size: 12px; color: #4D5156; }
.serp .t { font-size: 18px; color: #1A0DAB; line-height: 1.3; margin-top: 4px; }
.serp .d { font-size: 13px; color: #4D5156; line-height: 1.5; margin-top: 4px; }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; }
.kv dt { color: var(--mist); }
.kv dd { margin: 0; color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.len { font-variant-numeric: tabular-nums; font-size: 12px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.len.ok { background: rgba(52, 211, 153, 0.15); color: #A7F3D0; }
.len.warn { background: rgba(245, 181, 68, 0.16); color: #FDE7BD; }
.seo ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.seo .pill { display: inline-block; margin: 0 6px 6px 0; padding: 3px 9px; border-radius: 999px; background: rgba(147, 228, 255, 0.10); color: #DCE3F2; font-size: 12.5px; }
.seo .card { padding: 14px; border-radius: 12px; background: rgba(147, 228, 255, 0.06); border: 1px solid rgba(147, 228, 255, 0.12); }
.seo .card b { color: var(--white); }
.seo .muted { color: var(--mist); font-size: 12.5px; }

/* Prototype bar */
.pbar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 75; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(10, 15, 34, 0.94); border: 1px solid rgba(147, 228, 255, 0.22); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7); color: var(--white); max-width: calc(100vw - 24px); }
.pbar .lbl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); padding: 0 6px 0 8px; white-space: nowrap; }
.pbar select { font: inherit; font-size: 13px; color: var(--white); background: #141C38; border: 1px solid rgba(147, 228, 255, 0.2); border-radius: 9px; padding: 8px 10px; max-width: 46vw; }
.pbar button { font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 9px; border: 0; background: var(--blue); color: var(--white); cursor: pointer; white-space: nowrap; }
.pbar button[aria-pressed="true"] { background: var(--sky); color: var(--ink); }

/* Pages */
.page[hidden] { display: none !important; }
.page:not([hidden]) { animation: pageIn .55s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.reveal-on [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
.reveal-on [data-reveal].at-rest { transition: none; }
.reveal-on .at-rest :is(.iic, .eic) path { animation: none; stroke-dasharray: none; }

/* ================= Motion layer ================= */
/* Scroll progress along the bottom of the header */
.hdr::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--blue), var(--sky)); }
/* Slogan: three lines rise in, then each takes the light in turn */
.slogan .ln { display: block; opacity: .42; transition: opacity .9s ease, text-shadow .9s ease; }
.slogan .ln.on { opacity: 1; text-shadow: 0 0 34px rgba(147, 228, 255, 0.35); }
.slogan .ln > span { display: inline-block; animation: wordUp 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .2s + .15s); }
.slogan .ln:last-child > span { background: linear-gradient(90deg, #FFFFFF 0%, var(--sky) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Headlines arrive word by word */
.w { display: inline-block; }
.words-go .w { animation: wordUp .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 55ms + .12s); }
.display span .w { background: linear-gradient(90deg, #FFFFFF 0%, var(--sky) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes wordUp { from { opacity: 0; transform: translateY(.5em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
/* Photo heroes: slow drift, parallax and a live network over the photo */
.sv-hero > img, .lp-hero > img { animation: drift 28s ease-in-out infinite alternate; transform-origin: 62% 40%; will-change: scale, translate; }
@keyframes drift { from { scale: 1.03; } to { scale: 1.13; } }
canvas.nodes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }
.sv-hero .wrap, .lp-hero .wrap, .p-hero .wrap { z-index: 2; }
/* Cards: a soft light follows the pointer */
.svc-card, .inc details, .box, .det div, .offer, .pcard, .pillars div, .steps li, .related a, .mcard { --mx: -999px; --my: -999px; background-image: radial-gradient(380px circle at var(--mx) var(--my), var(--spot, rgba(4, 54, 251, 0.07)), transparent 45%); }
.pcard, .offer, .pillars div, .steps li, .mcard, .dark .box { --spot: rgba(147, 228, 255, 0.10); }
.pcard { transition: transform .35s ease, border-color .3s ease; transform-style: preserve-3d; }
.pcard:hover { border-color: rgba(147, 228, 255, 0.32); }
/* Icons draw themselves when their card arrives */
/* Line icons (7 Oct): visible at rest. Only while the reveal script runs (.reveal-on, which reduced motion never sets)
   is a line hidden until its own card arrives, and then it draws. Before this, each icon family had its own rule that
   hid it by default, so anything the script did not reach (reduced motion, a missed observer) stayed blank. */
.reveal-on [data-reveal]:not(.is-in) :is(.iic, .eic) path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.reveal-on [data-reveal].is-in :is(.iic, .eic) path { stroke-dasharray: 100; animation: draw 1.6s ease both .25s; }
.reveal-on .is-in .ico svg *, .reveal-on .is-in > .ic svg *, .reveal-on .is-in h1 .ic svg * { stroke-dasharray: 100; animation: draw 1.6s ease both .2s; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* Process: the line fills, then each step lands */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.steps.is-in::before { transform: scaleX(1); }
.light .steps::before { background: linear-gradient(90deg, var(--blue), #7FA0FF); }
/* Mega menus: columns and cards cascade in */
.nav > li.open .msvc, .nav > li.open .msvc-side, .nav > li.open .mcard { animation: megaIn .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes megaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Primary buttons: a light sweep on hover, and an occasional one on the main calls to action */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%); transform: translateX(-130%); }
.btn-primary:hover::after { transform: translateX(130%); transition: transform .8s ease; }
.alx-hero .btn-primary::after, .offer .btn-primary::after, .lp-hero .btn-primary::after { animation: shine 6s ease-in-out infinite 2s; }
@keyframes shine { 0%, 82% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
/* Live dot on offers and status pills */
.offer .tag::before, .status::before { animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
/* Nexus screenshot placeholders: a slow scan so they read as screens waiting to be filled */
.shot { position: relative; overflow: hidden; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(4, 54, 251, 0.06) 50%, transparent 100%); background-size: 100% 40%; background-repeat: no-repeat; animation: scan 5s linear infinite; }
@keyframes scan { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.slogan-line { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; color: var(--white); }
.slogan-line span { color: var(--sky); }


/* Service scenes: one animated illustration per service, beside the problem it solves */
.problem.vis { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.problem.vis .eyebrow { display: flex; }
.problem.vis blockquote { font-size: clamp(22px, 2.4vw, 30px); }
.svc-vis { aspect-ratio: 16 / 11; box-shadow: 0 40px 80px -40px rgba(4, 54, 251, 0.55), 0 0 0 1px rgba(147, 228, 255, 0.10); border-radius: 18px; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.has-video::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 18, 0) 55%, rgba(5, 8, 18, 0.75)); }
.has-video figcaption { z-index: 2; color: rgba(226, 232, 244, 0.85); }
.vchips { position: absolute; left: 14px; top: 14px; z-index: 2; display: grid; gap: 8px; justify-items: start; }
/* our logo as a watermark on AI-generated videos, in place of a caption (Peter, 8 Oct) */
.wm { position: absolute; right: 14px; bottom: 12px; z-index: 2; display: block; pointer-events: none; }
.alx .wm img { height: 18px; width: auto; opacity: .85; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.alx-hero > .wm-hero { right: 24px; bottom: 22px; z-index: 3; }
.alx .wm-hero img { height: 20px; }
.vchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #fff; background: rgba(8, 14, 34, 0.72); border: 1px solid rgba(147, 228, 255, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); animation: vchip-in .6s ease forwards; animation-delay: var(--d); }
.vchip svg { width: 15px; height: 15px; color: #4ADE80; flex: none; }
@keyframes vchip-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vchip { animation: none; opacity: 1; transform: none; } }
.svc-vis::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%); }
@media (max-width: 1080px) { .problem.vis { grid-template-columns: minmax(0, 1fr); gap: 34px; } .svc-vis { aspect-ratio: 4 / 3; } }

/* What's included: an icon per item that draws itself, a plain-English line, and the detail on open */
.inc summary { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.inc summary > :not(.iic) { grid-column: 2; min-width: 0; }
.inc summary .iic { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); transition: background-color .25s ease, color .25s ease; }
.inc summary .iic svg { width: 22px; height: 22px; }
.inc details[open] .iic, .inc details:hover .iic { background: var(--blue); color: var(--white); }
.inc .more-h { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.inc .more { padding-left: 78px; }
@media (max-width: 680px) { .inc .more { padding-left: 20px; } }

/* ================= The Alphalogix difference: five cards, each with its own small motion ================= */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.bx { --spot: rgba(147, 228, 255, 0.10); position: relative; overflow: hidden; padding: 28px; border-radius: 20px; background-color: rgba(20, 28, 56, 0.72); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: border-color .3s ease; }
.bx:hover { border-color: rgba(147, 228, 255, 0.32); }
.bx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(4, 54, 251, 0.18), transparent 45%); }
.bx > * { position: relative; }
.bx-tag { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); }
.bx h3 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; line-height: 1.22; color: var(--white); }
.bx p { font-size: 14.5px; line-height: 1.65; color: var(--mist); }
/* Tiling (Peter, 8 Oct: "this section is so empty"): rows sized by their own content. "Five suppliers" used to span two
   rows beside two stacked cards and floated in empty space; now it shares one row with Microsoft, then three equal
   cards, then the partners row. */
.bx-a { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; }
.bx-a .bx-copy { display: grid; gap: 12px; }
.bx-a h3 { font-size: clamp(24px, 2.4vw, 32px); }
.bx-b { grid-column: span 5; }
.bx-c, .bx-d, .bx-e { grid-column: span 4; }
/* the three cards in a row share the tallest one's height: their pictures grow into it rather than leaving a gap */
.bx-c .beat-wrap { flex: 1 1 auto; grid-template-rows: minmax(64px, 1fr) auto; }
.bx-c .beat { height: 100%; }
.bx-d .merge { flex: 1 1 auto; height: auto; min-height: 120px; }
/* Partners we supply and support (7 Oct): the bento's full-width last row */
.bx-f { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: center; gap: 18px 40px; }
.bx-f > div { display: grid; gap: 10px; }
.bx-f .logos { gap: 18px 34px; justify-content: flex-start; }
.bx-f .lg img { max-height: 28px; max-width: 132px; filter: brightness(0); opacity: .62; transition: opacity .25s ease, filter .25s ease; }
.bx-f .lg.colour:hover img { filter: none; opacity: 1; }
.bx-f .lg:not(.colour):hover img { opacity: .9; }
/* one team, start to finish: a loop with a light running through each stage */
.loop { width: 100%; max-width: 340px; height: auto; justify-self: center; overflow: visible; }
.loop .orbit { fill: none; stroke: rgba(147, 228, 255, 0.16); stroke-width: 1.5; stroke-dasharray: 3 6; }
.loop .orbit-lit { fill: none; stroke: rgba(147, 228, 255, 0.55); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 160px 160px; }
.is-in .loop .orbit-lit { animation: orbitDraw 2.2s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
@keyframes orbitDraw { to { stroke-dashoffset: 0; } }
.loop .stage circle:first-child { fill: #0B1230; stroke: rgba(147, 228, 255, 0.45); stroke-width: 1.5; }
.loop .stage .core { fill: var(--sky); opacity: .35; transform-box: fill-box; transform-origin: center; animation: stageLit 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes stageLit { 0%, 16%, 100% { opacity: .35; transform: scale(1); } 4% { opacity: 1; transform: scale(1.7); } }
.loop text { font-family: var(--body); font-size: 13px; font-weight: 500; fill: #DCE3F2; }
.loop .hub1 { font-family: var(--display); font-size: 20px; font-weight: 600; fill: var(--white); }
.loop .hub2 { font-size: 11.5px; fill: var(--mist); }
.loop .runner { fill: #FFFFFF; filter: drop-shadow(0 0 6px rgba(147, 228, 255, 0.95)); }
/* Microsoft */
.ms-row { display: flex; align-items: center; min-height: 40px; }
.ms-logo { height: 30px; width: auto; }
.ms-row .lg img { max-height: 30px; max-width: 160px; opacity: .95; }
.bx-b .chips { margin-top: auto; }
/* a statistic's source, after the sentence that uses it: visibly a link */
.cite a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.cite a:hover { color: var(--blue); }
/* What we look after: each row lights up and gets its tick in turn, then the set resets (6 s, like .merge). At rest,
   and with reduced motion, every row shows its tick. */
.alx .msx { list-style: none; margin: auto 0 0; padding: 12px; display: grid; gap: 8px; border-radius: 14px; background: var(--paper); border: 1px dashed #C9D5FF; }
.msx li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--white); border: 1px solid #DCE4FA; font-size: 13.5px; font-weight: 500; color: var(--ink); animation: msxRow 6s ease-in-out infinite both; animation-delay: calc(var(--i) * .7s); }
.msx .ic { width: 18px; height: 18px; flex: none; color: var(--blue); }
.msx .tk { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E3F5EC; color: #0E8A5F; animation: msxTick 6s ease-in-out infinite both; animation-delay: calc(var(--i) * .7s); }
.msx .tk svg { width: 13px; height: 13px; }
@keyframes msxRow { 0%, 6% { border-color: #DCE4FA; box-shadow: none; } 12% { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(4, 54, 251, 0.12); } 24%, 100% { border-color: #DCE4FA; box-shadow: none; } }
@keyframes msxTick { 0%, 8% { transform: scale(0); opacity: 0; } 14% { transform: scale(1.15); opacity: 1; } 18%, 86% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msx li, .msx .tk { animation: none; } }
/* problems fixed early: a live line, a blip caught and turned green */
.beat-wrap { margin-top: auto; display: grid; gap: 8px; }
.beat { width: 100%; height: 64px; overflow: visible; }
.beat-bg { stroke: rgba(147, 228, 255, 0.12); stroke-width: 1; fill: none; }
.beat-line { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: beatRun 4s linear infinite; }
@keyframes beatRun { 0% { stroke-dashoffset: 100; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .beat-line { animation: none; stroke-dashoffset: 0; } }
.blip { fill: var(--amber); transform-box: fill-box; transform-origin: center; animation: blip 4s ease-in-out infinite; }
@keyframes blip { 0%, 52% { fill: var(--amber); opacity: 0; transform: scale(.5); } 58% { opacity: 1; transform: scale(1.6); } 66% { fill: var(--amber); } 74%, 92% { fill: var(--teal); opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.beat-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mist); }
.beat-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18); }
/* made for you: three inputs merge into one plan */
.merge { position: relative; margin-top: auto; height: 120px; border-radius: 14px; background: rgba(5, 7, 15, 0.45); border: 1px dashed rgba(147, 228, 255, 0.16); overflow: hidden; }
.merge span, .merge b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; }
.merge span { color: #DCE3F2; background: rgba(147, 228, 255, 0.10); border: 1px solid rgba(147, 228, 255, 0.22); animation: mergeIn 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.merge .m1 { --fx: -105%; --fy: -95%; } .merge .m2 { --fx: 0%; --fy: -10%; animation-delay: .15s; } .merge .m3 { --fx: 105%; --fy: -95%; animation-delay: .3s; }
@keyframes mergeIn { 0%, 12% { transform: translate(var(--fx), calc(var(--fy) + 60%)); opacity: 1; } 45% { transform: translate(0, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } }
.merge .mres { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); background: var(--sky); box-shadow: 0 0 30px rgba(147, 228, 255, 0.5); animation: mergeOut 6s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes mergeOut { 0%, 40% { opacity: 0; transform: scale(.7); } 52% { opacity: 1; transform: scale(1.06); } 60%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.96); } }
/* we stay with you: a timeline that draws itself */
.tl { position: relative; list-style: none; margin: auto 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tl::before { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px; background: rgba(147, 228, 255, 0.14); }
.tl::after { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; }
.is-in .tl::after { animation: tlDraw 2.4s cubic-bezier(.4, 0, .2, 1) .4s forwards; }
@keyframes tlDraw { to { transform: scaleX(1); } }
.tl li { position: relative; font-size: 13px; line-height: 1.4; color: #DCE3F2; padding-top: 12px; opacity: .35; transition: opacity .5s ease; }
.tl li::before { content: ""; position: absolute; left: 0; top: -26px; width: 14px; height: 14px; border-radius: 50%; background: #0B1230; border: 2px solid rgba(147, 228, 255, 0.35); transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease; }
.is-in .tl li { opacity: 1; transition-delay: calc(.5s + var(--i) * .55s); }
.is-in .tl li::before { border-color: var(--sky); background-color: var(--blue); box-shadow: 0 0 0 5px rgba(147, 228, 255, 0.14); transition-delay: calc(.5s + var(--i) * .55s); }
@media (max-width: 1080px) {
  .bx-a, .bx-b, .bx-c, .bx-d, .bx-e, .bx-f { grid-column: span 12; grid-row: auto; }
  .bx-f { grid-template-columns: minmax(0, 1fr); }
  .bx-a { grid-template-columns: minmax(0, 1fr); }
  .loop { max-width: 300px; }
}
@media (max-width: 680px) {
  .bx { padding: 22px; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; padding-top: 0; }
  .tl::before, .tl::after { display: none; }
  .tl li { padding-top: 0; padding-left: 24px; }
  .tl li::before { top: 1px; }
}
@media (prefers-reduced-motion: reduce) { .loop .orbit-lit { stroke-dashoffset: 0; } .tl::after { transform: none; } .tl li { opacity: 1; } .merge span { display: none; } .merge .mres { opacity: 1; } }

/* ================= Support plans (no prices on the site) ================= */
.drawer-link { display: block; padding: 16px 2px; font-family: var(--display); font-weight: 600; font-size: 18px; border-bottom: 1px solid rgba(147, 228, 255, 0.08); }
.plan-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pline { padding: 24px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); display: grid; gap: 16px; align-content: start; min-width: 0; --mx: -999px; --my: -999px; background-image: radial-gradient(380px circle at var(--mx) var(--my), rgba(4, 54, 251, 0.07), transparent 45%); }
.pline.addon { border-style: dashed; border-color: #B9C6E4; }
.pl-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.pl-top .iic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); }
.pl-top .iic svg { width: 22px; height: 22px; }
.pl-top b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); }
.pl-tag { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--blue); }
.pline.addon .pl-tag { color: #7A5A12; }
.pline .ticks li { font-size: 14px; }
.builder { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 50px; align-items: start; }
.extras { margin-top: 28px; padding: 20px 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.extras b { font-family: var(--display); font-weight: 600; color: var(--ink); }
.extras ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--sub); line-height: 1.6; }
.plan-form { border: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(4, 54, 251, 0.45); }
.steppers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stepper { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
.stepper label { display: grid; gap: 2px; font-weight: 400; }
.stepper label b { font-size: 14px; color: var(--ink); font-weight: 600; }
.stepper label span { font-size: 12px; color: var(--sub); line-height: 1.4; }
.ctl { display: flex; align-items: center; border: 1px solid #CBD3E4; border-radius: 10px; background: var(--white); overflow: hidden; }
.ctl button { width: 34px; height: 38px; border: 0; background: none; font-size: 18px; color: var(--blue); cursor: pointer; }
.ctl button:hover { background: #EEF2FF; }
.form .ctl input { width: 46px; border: 0; border-radius: 0; padding: 8px 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ctl input::-webkit-outer-spin-button, .ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan-sum { padding: 12px 14px; border-radius: 12px; background: #EEF2FF; color: #1E2A6B; font-size: 14px; line-height: 1.6; }
.plan-strip-sec { padding-block: 0 20px; }
.plan-strip { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 24px; border-radius: 18px; background: linear-gradient(120deg, #0B1230, #0E1A4A); color: var(--white); border: 1px solid var(--line); }
.plan-strip .iic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: rgba(4, 54, 251, 0.35); color: var(--sky); }
.plan-strip .iic svg { width: 24px; height: 24px; }
.plan-strip .tag { display: block; margin-bottom: 4px; }
.plan-strip p { color: var(--mist); font-size: 15px; line-height: 1.65; }
@media (max-width: 1080px) { .plan-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } .builder { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .plan-lines, .steppers { grid-template-columns: minmax(0, 1fr); }
  .plan-strip { grid-template-columns: 48px minmax(0, 1fr); }
  .plan-strip .cta-row { grid-column: 1 / -1; }
}

/* Camera support tiers */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background-color: rgba(20, 28, 56, 0.72); border: 1px solid var(--line); min-width: 0; }
.tier.pick { border-color: rgba(147, 228, 255, 0.45); box-shadow: 0 30px 70px -40px rgba(4, 54, 251, 0.9); background-color: rgba(18, 30, 72, 0.9); }
.tier-flag { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--sky); color: var(--ink); }
.tier-clock { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.tier-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tier-clock circle { fill: none; stroke: rgba(147, 228, 255, 0.14); stroke-width: 4; }
.tier-clock .arc { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--cover)); filter: drop-shadow(0 0 4px rgba(147, 228, 255, 0.6)); animation: arc-glow var(--pd, 2.4s) ease-in-out infinite; }
.tier-pulse { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(147, 228, 255, 0.55); animation: tier-pulse var(--pd, 2.4s) ease-out infinite; }
@keyframes tier-pulse { 0% { transform: scale(0.92); opacity: 0.8; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes arc-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(147, 228, 255, 0.45)); } 50% { filter: drop-shadow(0 0 9px rgba(147, 228, 255, 0.95)); } }
.reveal-on .tier:not(.is-in) .tier-pulse, .reveal-on .tier:not(.is-in) .arc { animation-play-state: paused; }
.tier-clock b { position: relative; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--white); }
.tier h3 { font-size: 24px; font-weight: 600; color: var(--white); }
.tier-h { font-size: 13px; font-weight: 500; color: var(--sky); letter-spacing: 0.04em; }
.tier p { font-size: 14.5px; line-height: 1.65; color: var(--mist); }
.tier .ticks { margin-bottom: 6px; }
.tier .btn { margin-top: auto; width: 100%; }
.tier-add { margin-top: 22px; font-size: 14px; color: var(--mist); line-height: 1.7; }
.tier-add b { color: var(--white); font-weight: 500; }
@media (max-width: 1080px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tier-clock .arc { animation: none; } .tier-pulse { display: none; } }

/* ================= Industries: scenes and icons, no stock photos ================= */
.inds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.indc { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 24px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); color: var(--text); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; min-width: 0; --mx: -999px; --my: -999px; background-image: radial-gradient(380px circle at var(--mx) var(--my), rgba(4, 54, 251, 0.07), transparent 45%); }
.indc:hover { transform: translateY(-3px); border-color: #C9D5FF; box-shadow: 0 24px 50px -30px rgba(4, 54, 251, 0.45); }
.indc .iic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); transition: background-color .25s ease, color .25s ease; }
.indc:hover .iic { background: var(--blue); color: var(--white); }
.indc .iic svg { width: 24px; height: 24px; }
.indc b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); }
.indc > span:not(.iic) { font-size: 14.5px; line-height: 1.6; color: var(--sub); }
.indc .lnk { font-style: normal; }
.ind-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ind-jump button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid rgba(147, 228, 255, 0.22); background: rgba(20, 28, 56, 0.6); color: #DCE3F2; font-size: 13.5px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.ind-jump button:hover { border-color: var(--sky); color: var(--white); }
.ind-jump .iic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 54, 251, 0.3); color: var(--sky); }
.ind-jump .iic svg { width: 16px; height: 16px; }
.ind-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ind-split.flip > figure { order: 2; }
.ind-split .eyebrow { gap: 10px; }
.ind-split .eyebrow::before { display: none; }
.eic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); }
.eic svg { width: 17px; height: 17px; }
.ind-split .ticks { margin-top: 22px; }
.ind-use { display: grid; gap: 10px; margin-top: 22px; }
.ind-use > span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); }
.ind-sec .cta-row { margin-top: 26px; }
@media (max-width: 1080px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind-split { grid-template-columns: minmax(0, 1fr); gap: 30px; } .ind-split.flip > figure { order: 0; } }
@media (max-width: 680px) { .inds { grid-template-columns: minmax(0, 1fr); } }

.ind-photo { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: var(--paper); box-shadow: 0 40px 80px -46px rgba(5, 7, 15, 0.55); }
.ind-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.ind-photo:hover img { transform: scale(1.04); }
/* Artlist loops (7 Oct): an industry's loop, the home hero's and the About hero's, each inert until its file exists */
.ind-photo { position: relative; }
.ind-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ind-photo figcaption { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(5, 8, 18, 0.62); color: #E3E8F2; font-size: 11.5px; letter-spacing: 0.02em; }
.alx-hero-bg, .sv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.alx-hero-bg { opacity: 0.3; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.sv-hero-bg { opacity: 0.55; }
.ind-photo .ph { display: grid; place-items: center; height: 100%; color: var(--sub); font-size: 14px; border: 1px dashed #B9C6E4; border-radius: 20px; }

/* Industry cards with real photos */
.indc { padding: 0; overflow: hidden; grid-template-rows: auto auto auto 1fr auto; }
.indc > b, .indc > span:not(.indc-img):not(.iic), .indc > .lnk { padding-inline: 22px; }
.indc > .lnk { padding-bottom: 22px; }
.indc-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 6px; }
.indc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.indc:hover .indc-img img { transform: scale(1.05); }
.indc-img .indc-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.indc-img .indc-vid.on { opacity: 1; }
.indc-img .wm { right: 10px; bottom: 8px; }
.alx .indc-img .wm img { height: 14px; }
/* The badge sits outside the photo's crop, straddling its bottom edge (inside the photo it was cut in half). */
.indc > .iic { position: relative; z-index: 1; margin: -45px 0 0 16px; box-shadow: 0 10px 24px -10px rgba(5, 7, 15, 0.5); background: var(--white); }
.indc > b { margin-top: 0; }
.indc.indc-more { grid-template-rows: 1fr auto auto; align-content: end; padding: 26px 0 0; border: 0; color: var(--white); background: linear-gradient(155deg, var(--blue), #0A1F8F 70%, #05070F); }
.indc.indc-more b { color: var(--white); font-size: 22px; }
.indc.indc-more > span { color: rgba(255, 255, 255, 0.82); }
.indc.indc-more .lnk { color: var(--sky); }

/* Service pages: how you pay + the platform, as one row of two matching cards */
.info-sec { padding-block: 70px; }
.info-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.icard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); min-width: 0; }
.icard .iic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); }
.icard .iic svg { width: 22px; height: 22px; }
.icard .tag { color: var(--blue); }
.icard h3 { font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.2; color: var(--ink); }
.icard p { font-size: 15px; line-height: 1.7; color: var(--sub); }
.icard > .lnk, .icard > .btn { margin-top: auto; }
.icard.dark { background: linear-gradient(160deg, #0E1A4A, #0B1230 60%); border-color: var(--line); }
.icard.dark .tag { color: var(--sky); }
.icard.dark h3 { color: var(--white); }
.icard.dark p { color: var(--mist); }
@media (max-width: 860px) { .info-row { grid-template-columns: minmax(0, 1fr); } }

/* Why Alphalogix: light, so it can never be mistaken for the dark process section */
.diff-sec.why { background: var(--paper); }
.why .bx { background-color: var(--white); border-color: var(--rule); --spot: rgba(4, 54, 251, 0.07); box-shadow: 0 24px 50px -40px rgba(5, 7, 15, 0.35); }
.why .bx::before { background: linear-gradient(140deg, rgba(4, 54, 251, 0.06), transparent 40%); }
.why .bx:hover { border-color: #C9D5FF; }
.why .bx-tag { color: var(--blue); }
.why .bx h3 { color: var(--ink); }
.why .bx p { color: var(--sub); }
.why .ms-row .lg img { filter: none; opacity: 1; }
.why .beat-bg { stroke: rgba(4, 54, 251, 0.12); }
.why .beat-line { stroke: var(--blue); }
.why .beat-note { color: var(--sub); }
.why .merge { background: var(--paper); border-color: #C9D5FF; }
.why .merge span { color: var(--ink); background: var(--white); border-color: #C9D5FF; }
.why .merge .mres { background: var(--blue); color: var(--white); box-shadow: 0 0 30px rgba(4, 54, 251, 0.35); }
/* why: readable on white */
.why .bx::before { display: none; }
.why .bx p { color: #3B4357; font-size: 15px; }
.why .bx-tag { font-size: 12.5px; font-weight: 600; }
.why .beat-note, .why .facts span { color: #3B4357; }
.why .facts b { color: var(--ink); }
.why .onenum li { color: #3B4357; background: #F4F6FB; border-color: #D5DCEA; font-size: 13.5px; }
.why .merge span { font-size: 13px; }
.why .head .lead { color: #3B4357; }
/* one team, one number */
.onenum { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(168px, 1fr); align-items: center; min-height: 240px; }
.onenum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.onenum li { font-size: 13px; padding: 8px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); color: var(--sub); text-align: center; white-space: nowrap; }
.reveal-on .is-in .onenum li { animation: fadeDown .9s ease forwards; animation-delay: calc(1.2s + var(--i) * .12s); }
@keyframes fadeDown { to { opacity: .7; text-decoration: line-through; text-decoration-color: rgba(240, 97, 79, 0.8); } }
.onelines { width: 100%; height: 100%; overflow: visible; }
.onelines path { fill: none; stroke: var(--blue); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.reveal-on [data-reveal]:not(.is-in) .onelines path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.reveal-on .is-in .onelines path { stroke-dasharray: 100; animation: draw 1.1s ease both; animation-delay: calc(.3s + var(--i) * .1s); }
.onebadge { justify-self: stretch; display: grid; justify-items: center; gap: 6px; padding: 20px 14px; border-radius: 18px; background: linear-gradient(160deg, #0E1A4A, #0B1230); color: var(--white); text-align: center; box-shadow: 0 24px 50px -24px rgba(4, 54, 251, 0.6); }
.onebadge img { height: 22px; width: auto; }
.onebadge b { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.onebadge span { font-size: 12px; color: var(--mist); }
.reveal-on .is-in .onebadge { animation: badgePop .7s cubic-bezier(.2, .7, .2, 1.3) both 1s; }
@keyframes badgePop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
/* local and licensed */
.facts { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 14px; }
.facts > li { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.facts b { font-size: 14px; color: var(--ink); font-weight: 600; }
.facts span { font-size: 14px; color: var(--sub); }
.states { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.states li { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 9px; border-radius: 8px; background: #EEF2FF; color: var(--blue); }
.reveal-on .is-in .states li { animation: badgeIn .5s ease both; animation-delay: calc(.4s + var(--i) * .08s); }
/* process: what you get at each step */
.pget { display: grid; gap: 2px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(147, 228, 255, 0.07); border: 1px solid rgba(147, 228, 255, 0.14); font-size: 13.5px; line-height: 1.5; color: var(--white); opacity: 0; transform: translateY(10px); transition: opacity .6s ease 1.05s, transform .6s ease 1.05s; }
.pget i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); }
.pstep.on .pget { opacity: 1; transform: none; }
.light .pget { background: #EEF2FF; border-color: #C9D5FF; color: var(--ink); }
.light .pget i { color: var(--blue); }
@media (max-width: 680px) { .onenum { grid-template-columns: minmax(0, 1fr); gap: 14px; } .onelines { display: none; } .onenum ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pget { opacity: 1; transform: none; } }

/* Story pieces (restored: the first insert was skipped because ".box .who {" already matched) */
.who { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.who > b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.who .ticks li { font-size: 14.5px; }
.inc summary .tech { font-size: 11.5px; letter-spacing: 0.02em; color: #8A93A8; margin-top: -4px; }
.faq-more { justify-self: start; margin-top: 6px; }
.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gcard { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); min-height: 150px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gcard:hover { border-color: #C9D5FF; transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(4, 54, 251, 0.45); }
.gq { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.35; }
.ga { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--blue); }
.ga .ico { width: 34px; height: 34px; border-radius: 10px; }
.ga .ico svg { width: 18px; height: 18px; }
.ga svg:last-child { width: 16px; height: 16px; }
.guide-note { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); font-size: 15px; line-height: 1.7; color: var(--sub); }
.guide-note b { color: var(--ink); }
@media (max-width: 1080px) { .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .guide { grid-template-columns: minmax(0, 1fr); } }

/* How you pay: the bill picture */
.icard { position: relative; overflow: hidden; }
.icard.pay { background: radial-gradient(120% 80% at 100% 0%, #E9EFFF 0%, var(--paper) 55%); }
.bill { margin: 6px 0 2px; width: 100%; padding: 16px 16px 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); }
.bill figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7488; margin-bottom: 10px; }
.bill svg { display: block; width: 100%; height: auto; overflow: visible; }
.bill .gb { fill: none; stroke: #C3CADB; stroke-width: 1.4; stroke-dasharray: 3 3; }
.bill .fb { fill: var(--blue); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms + .3s); }
.bill text { font-size: 9px; fill: #8A93A8; text-anchor: middle; font-family: var(--body); }
.reveal-on .icard:not(.is-in) .bill .fb { transform: scaleY(0); }
.bill-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--sub); }
.bill-key span { display: inline-flex; align-items: center; gap: 7px; }
.bill-key i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.k-fixed { background: var(--blue); }
.k-spiky { border: 1.4px dashed #A9B1C4; }
.iticks { list-style: none; display: grid; gap: 8px; margin: 2px 0 6px; padding: 0; }
.iticks li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.iticks svg { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--blue); }
.icard.dark .iticks li { color: #DDE4F2; }
.icard.dark .iticks svg { color: var(--sky); }

/* Nexus: everything reporting in, one problem fixed */
.sgrid { position: relative; margin: 6px 0 4px; width: 100%; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(147, 228, 255, 0.14); }
.sg-cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.sg-cells i { aspect-ratio: 1; border-radius: 6px; background: #22C55E; box-shadow: 0 0 12px -2px rgba(34, 197, 94, 0.6); }
.sg-cells i.warn { animation: sg-fix 6s ease-in-out infinite 1.6s; }
@keyframes sg-fix { 0%, 8% { background: #22C55E; box-shadow: 0 0 12px -2px rgba(34, 197, 94, 0.6); } 14%, 46% { background: #F59E0B; box-shadow: 0 0 18px 0 rgba(245, 158, 11, 0.8); } 54%, 100% { background: #22C55E; box-shadow: 0 0 12px -2px rgba(34, 197, 94, 0.6); } }
.reveal-on .icard:not(.is-in) .sg-cells i { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.sg-cells i { transition: background .4s ease, box-shadow .4s ease; transition-delay: calc(var(--i) * 35ms + .3s); }
.sg-chip { position: absolute; right: 14px; top: -15px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #fff; background: #0B1230; border: 1px solid rgba(34, 197, 94, 0.5); opacity: 0; animation: sg-chip 6s ease-in-out infinite 1.6s; }
.sg-chip svg { width: 14px; height: 14px; color: #4ADE80; }
@keyframes sg-chip { 0%, 50% { opacity: 0; transform: translateY(4px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sgrid .bill-key { margin-top: 22px; color: var(--mist); }
.k-ok { background: #22C55E; }
.k-warn { background: #F59E0B; }

/* Recent work: the real job, its photo, its numbers */
.case-sec { padding-block: 0 80px; }
.case { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #0E1A4A, #0A1029 70%); border: 1px solid var(--line); color: var(--white); box-shadow: 0 50px 90px -50px rgba(4, 54, 251, 0.55); transition: border-color .25s ease, transform .25s ease; }
.case:hover { border-color: rgba(147, 228, 255, 0.4); transform: translateY(-3px); }
.case-img { position: relative; margin: 0; min-height: 320px; }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.case:hover .case-img img { transform: scale(1.04); }
.case-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(10, 16, 41, 0.85)), linear-gradient(0deg, rgba(10, 16, 41, 0.6), transparent 40%); }
.case-loc { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #fff; padding: 7px 12px; border-radius: 999px; background: rgba(8, 14, 34, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.case-loc svg { width: 14px; height: 14px; color: var(--sky); }
.case-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(26px, 3.4vw, 46px); }
.case-body .tag { color: var(--sky); }
.case-body h3 { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.case-body > p { font-size: 15.5px; line-height: 1.7; color: var(--mist); }
.case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 6px 0; }
.case-stats div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(147, 228, 255, 0.14); }
.case-stats b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.case-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--mist); }
.case-body .case-more { font-size: 14.5px; color: #C9D3E8; }
.case-body .lnk { color: var(--sky); margin-top: 2px; }
@media (max-width: 860px) { .case { grid-template-columns: minmax(0, 1fr); } .case-img { min-height: 240px; aspect-ratio: 16 / 10; } .case-img::after { background: linear-gradient(0deg, rgba(10, 16, 41, 0.7), transparent 45%); } }
@media (max-width: 420px) { .case-stats { gap: 8px; } .case-stats div { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .sg-cells i.warn, .sg-chip { animation: none; } .sg-chip { opacity: 1; } }

/* Read more: live articles on the service's topic */
.read-sec { padding-block: 10px 90px; }
.read-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 30px; flex-wrap: wrap; margin-bottom: 30px; }
.reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reads.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reads.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.read { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--white); border: 1px solid var(--rule); color: var(--ink); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.read:hover { border-color: #C9D5FF; transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(4, 54, 251, 0.45); }
.read-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0B1230; }
.read-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease; }
.read:hover .read-img img { transform: scale(1.05); }
.read-type { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--blue); background: rgba(255, 255, 255, 0.94); }
.read-type.cs { color: #fff; background: var(--blue); }
.read-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; flex: 1; }
.read-body > b { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.35; }
.read-body > span:not(.read-meta) { font-size: 14px; line-height: 1.6; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-meta { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6B7488; }
.read-meta .lnk { font-style: normal; }
.n2 .read-body > b, .n2 .read-body > span:not(.read-meta) { max-width: 52ch; }
@media (max-width: 1080px) { .reads, .reads.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reads, .reads.n2, .reads.n4 { grid-template-columns: minmax(0, 1fr); } }

/* Blog posts and case studies (7 Oct): the live posts' own blocks, set in the site's type. The rules are written at the
   page reset's weight (.alx …), which otherwise zeroes every paragraph's margin. */
.post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13.5px; color: var(--mist); }
.post-kind { padding: 4px 10px; border-radius: 999px; background: rgba(147, 228, 255, 0.12); color: var(--sky); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.alx .post-hero .lg-title { margin-top: 14px; max-width: 24ch; text-wrap: balance; }
/* on a phone the post's own title is the heading right below, so the breadcrumb stops at its section */
@media (max-width: 640px) { .post-hero .crumbs li:last-child { display: none; } }
.post-sec { padding-top: 56px; }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.post-aside { position: sticky; top: 104px; }
.post-card { display: grid; gap: 12px; padding: 24px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); }
.post-card b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); }
.post-card p { font-size: 14px; line-height: 1.65; color: var(--sub); }
.post-card .btn { justify-content: center; }
.post-cover { margin: 0 0 36px; }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; }
.prose { max-width: 720px; min-width: 0; font-size: 17px; line-height: 1.8; color: var(--text); overflow-wrap: break-word; }
.alx .prose > * + * { margin-top: 1.15em; }
.alx .prose h2 { margin-top: 1.9em; font-size: clamp(23px, 2.3vw, 29px); line-height: 1.25; font-weight: 600; color: var(--ink); }
.alx .prose h3 { margin-top: 1.6em; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.alx .prose h4 { margin-top: 1.4em; font-size: 17px; font-weight: 600; color: var(--ink); }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.alx .prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--blue); }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue); font-size: 18.5px; color: var(--ink); }
.alx .prose figure { margin-block: 1.9em; }
.prose img { max-width: 100%; height: auto; border-radius: 14px; }
.prose figcaption { margin-top: 8px; font-size: 13px; color: var(--sub); text-align: center; }
.prose hr, .prose .wp-block-separator { border: 0; border-top: 1px solid var(--rule); margin-block: 2.4em; }
.prose .wp-block-spacer { height: 8px !important; }
.prose .wp-block-embed iframe, .prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 10px; background: var(--blue); color: var(--white); text-decoration: none; font-size: 15px; font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--paper); font: 0.9em ui-monospace, "Cascadia Mono", Consolas, monospace; }
.blog-list { padding-top: 56px; }
.blog-empty { font-size: 16px; color: var(--sub); }
@media (max-width: 1080px) { .post-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .post-aside { position: static; } }
@media (max-width: 640px) { .prose { font-size: 16.5px; } .post-cover { margin-bottom: 26px; } }

/* Industries: compact read-more row inside each industry */
.rmini { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--rule); }
.rmini-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.rmini-head > span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.rmini-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rmini-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rmini-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rm { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.paper .rm { background: var(--white); }
.rm:hover { border-color: #C9D5FF; transform: translateY(-3px); box-shadow: 0 20px 44px -30px rgba(4, 54, 251, 0.5); }
.rm-img { display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #0B1230; }
.rm-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.rm:hover .rm-img img { transform: scale(1.06); }
.rm-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rm-type { font-size: 11.5px; font-weight: 500; color: #6B7488; }
.rm-type.cs { color: var(--blue); }
.rm-body b { font-family: var(--display); font-weight: 600; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rmini-row.n4 .rm { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (max-width: 1080px) { .rmini-row, .rmini-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rmini-row.n4 .rm { grid-template-columns: 112px minmax(0, 1fr); align-items: center; } }
@media (max-width: 640px) { .rmini-row, .rmini-row.n2, .rmini-row.n4 { grid-template-columns: minmax(0, 1fr); } .rm { grid-template-columns: 96px minmax(0, 1fr); } }

/* ================= Process, drawn in from step 1 to 4 ================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.proc { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ptrack { position: absolute; z-index: 0; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(147, 228, 255, 0.18) 0 6px, transparent 6px 12px); }
.ptrack[data-dir="y"] { background: repeating-linear-gradient(180deg, rgba(147, 228, 255, 0.18) 0 6px, transparent 6px 12px); }
.pfill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--sky)); box-shadow: 0 0 14px rgba(147, 228, 255, 0.55); transform: scaleX(0); transform-origin: left center; }
.ptrack[data-dir="y"] .pfill { background: linear-gradient(180deg, var(--blue), var(--sky)); transform: scaleY(0); transform-origin: center top; }
.pdot { position: absolute; width: 10px; height: 10px; margin: -4px 0 0 -5px; top: 50%; left: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(147, 228, 255, 0.25), 0 0 18px rgba(147, 228, 255, 0.9); opacity: 0; }
.ptrack[data-dir="y"] .pdot { left: 50%; top: 0; margin: -5px 0 0 -4px; }
.proc.done .ptrack[data-dir="x"] .pdot { animation: dotx 4.2s cubic-bezier(.45, 0, .55, 1) infinite .4s; }
.proc.done .ptrack[data-dir="y"] .pdot { animation: doty 4.2s cubic-bezier(.45, 0, .55, 1) infinite .4s; }
@keyframes dotx { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes doty { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.pstep { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; row-gap: 24px; min-width: 0; }
.pnode { position: relative; justify-self: center; width: 52px; height: 52px; display: grid; place-items: center; }
.pnode svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.pnode .base { fill: var(--night); stroke: rgba(147, 228, 255, 0.18); stroke-width: 1.5; }
.pnode .ring { fill: none; stroke: var(--sky); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 151 151; stroke-dashoffset: 151; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 0 6px rgba(147, 228, 255, 0.6)); }
.pnode span { position: relative; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: rgba(147, 228, 255, 0.35); transform: scale(.8); transition: color .5s ease .25s, transform .6s cubic-bezier(.2, .7, .2, 1.4) .25s; }
.pstep.on .pnode .ring { stroke-dashoffset: 0; }
.pstep.on .pnode span { color: var(--white); transform: none; }
.pbox { position: relative; padding: 24px 22px; border-radius: 16px; background: rgba(20, 28, 56, 0); transition: background-color .9s ease .55s; min-width: 0; }
.pbox::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 24px; margin-left: -1px; background: linear-gradient(180deg, var(--sky), rgba(147, 228, 255, 0.2)); transform: scaleY(0); transform-origin: top; transition: transform .35s ease .2s; }
.pframe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pframe rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: rgba(147, 228, 255, 0.55); stroke-width: 1.4; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1) .45s, stroke .8s ease 1.4s; }
.pico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(4, 54, 251, 0.22); color: var(--sky); opacity: 0; transform: translateY(8px); transition: opacity .5s ease .6s, transform .6s cubic-bezier(.2, .7, .2, 1) .6s; }
.pico svg { width: 22px; height: 22px; }
.pico path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s ease .75s; }
.pbox b { display: block; margin-top: 16px; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--white); opacity: 0; transform: translateY(10px); transition: opacity .55s ease .75s, transform .6s cubic-bezier(.2, .7, .2, 1) .75s; }
.pbox p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--mist); opacity: 0; transform: translateY(10px); transition: opacity .6s ease .9s, transform .6s cubic-bezier(.2, .7, .2, 1) .9s; }
.pstep.on .pbox { background-color: rgba(20, 28, 56, 0.72); }
.pstep.on .pbox::before { transform: scaleY(1); }
.pstep.on .pframe rect { stroke: rgba(147, 228, 255, 0.16); }
.pstep.on .pico, .pstep.on .pbox b, .pstep.on .pbox p { opacity: 1; transform: none; }
.pstep.on .pico path { stroke-dashoffset: 0; }
.pstep.on .pbox:hover .pframe rect { stroke: rgba(147, 228, 255, 0.45); transition-delay: 0s; }
/* Light sections (Guardian pilot) */
.light .ptrack { background: repeating-linear-gradient(90deg, rgba(4, 54, 251, 0.18) 0 6px, transparent 6px 12px); }
.light .ptrack[data-dir="y"] { background: repeating-linear-gradient(180deg, rgba(4, 54, 251, 0.18) 0 6px, transparent 6px 12px); }
.light .pnode .base { fill: var(--white); stroke: rgba(4, 54, 251, 0.18); }
.light .pnode .ring { stroke: var(--blue); filter: none; }
.light .pnode span { color: rgba(4, 54, 251, 0.35); }
.light .pstep.on .pnode span { color: var(--blue); }
.light .pbox::before { background: linear-gradient(180deg, var(--blue), rgba(4, 54, 251, 0.15)); }
.light .pframe rect { stroke: rgba(4, 54, 251, 0.55); }
.light .pstep.on .pbox { background-color: var(--white); box-shadow: 0 24px 50px -34px rgba(4, 54, 251, 0.45); }
.light .pstep.on .pframe rect { stroke: var(--rule); }
.light .pico { background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); }
.light .pbox b { color: var(--ink); }
.light .pbox p { color: var(--sub); }
/* Tablet and phone: the same sequence, top to bottom */
@media (max-width: 1080px) {
  .proc { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pstep { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto; column-gap: 22px; row-gap: 0; align-items: start; }
  .pnode { justify-self: start; }
  .pbox::before { left: -22px; top: 25px; width: 22px; height: 2px; margin: 0; background: linear-gradient(90deg, var(--sky), rgba(147, 228, 255, 0.2)); transform: scaleX(0); transform-origin: left; }
  .pstep.on .pbox::before { transform: scaleX(1); }
  .light .pbox::before { background: linear-gradient(90deg, var(--blue), rgba(4, 54, 251, 0.15)); }
}
@media (prefers-reduced-motion: reduce) {
  .pstep .pnode .ring { stroke-dashoffset: 0; }
  .pico, .pbox b, .pbox p { opacity: 1; transform: none; }
  .pico path { stroke-dashoffset: 0; }
}

/* ================= Responsive ================= */
@media (max-width: 1240px) {
  .nav, .hdr-cta .hdr-login, .hdr-cta .btn { display: none; }
  .burger { display: grid; }
  .hdr-cta { margin-left: auto; }
  .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr .brand, .ftr .contact { grid-column: span 3; }
  .lp-mode .ftr .brand, .lp-mode .ftr .contact { grid-column: auto; }
  .lp-mode .hdr-cta .btn { display: inline-flex; }
}
@media (max-width: 1080px) {
  .alx-hero { min-height: 0; align-items: flex-start; padding-block: 90px 300px; }
  .alx-hero::after { background: linear-gradient(180deg, rgba(5, 7, 15, 0.88) 0%, rgba(5, 7, 15, 0.55) 55%, rgba(5, 7, 15, 0) 80%); }
  .alx-callout { width: 190px; }
  .head, .plat, .team-grid, .sv-grid, .problem, .diff, .faq-wrap, .callout, .p-grid, .lp-grid, .offer-strip { grid-template-columns: minmax(0, 1fr); }
  .offer-strip .cta-row { justify-content: flex-start; }
  .svc-grid, .inc, .cols3, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inds, .cols5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .surf article { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .surf article:nth-child(even) .shot { order: 0; }
  .cta-band > img { width: 100%; opacity: 0.45; }
  .cta-band::after { background: linear-gradient(90deg, rgba(5, 7, 15, 0.92) 30%, rgba(5, 7, 15, 0.6) 100%); }
}
@media (max-width: 680px) {
  .wrap { padding-inline: 16px; }
  .sec { padding-block: 66px; }
  .alx-hero { padding-block: 70px 270px; }
  .alx-hint { display: none; }
  .svc-grid, .inc, .cols3, .pillars, .det, .steps, .form .row2 { grid-template-columns: minmax(0, 1fr); }
  .inds, .cols5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols5 { grid-template-columns: minmax(0, 1fr); }
  .office { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ind-row { grid-template-columns: minmax(0, 1fr); }
  .visit { grid-template-columns: 48px minmax(0, 1fr); }
  .visit .acts { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
  .ftr-grid, .lp-mode .ftr-grid { grid-template-columns: minmax(0, 1fr); }
  .ftr .brand, .ftr .contact { grid-column: auto; }
  .pcard, .offer, .offer-strip, .callout, .form { padding: 20px; }
  .sv-hero, .p-hero { padding-block: 44px 56px; }
  .pbar .lbl { display: none; }
}
/* Addresses and licence numbers link out (map pin, NSW register) */
a.where { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a.where:hover { text-decoration-color: currentColor; }
/* Guardian (7 Oct): logo lockup, how it works, packages (step 1), downloads; Nexus live demo */
.g-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.g-lockup svg { width: 38px; height: 42px; }
.g-lockup span { font-family: "Manrope", var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; color: var(--white); }
.g-lockup.n { gap: 15px; }   /* Nexus logo pack: the round mark sits 0.58em from the wordmark */
.g-lockup.n svg { width: 38px; height: 38px; }
/* How Guardian connects (7 Oct): every camera sends stream 1 to the VMS (as today) and stream 2 to Guardian */
.gc-panel { margin: 0; padding: clamp(10px, 1.6vw, 18px); border-radius: 22px; background: radial-gradient(90% 120% at 40% 70%, rgba(201, 162, 39, 0.07), transparent 60%), #070B1A; border: 1px solid #1B2440; box-shadow: 0 40px 80px -50px rgba(5, 7, 15, 0.6); }
.gc-svg { display: block; width: 100%; height: auto; }
.gc-narrow { display: none; max-width: 440px; margin: 0 auto; }
@media (max-width: 760px) { .gc-wide { display: none; } .gc-narrow { display: block; } }
.gc-site { fill: none; stroke: rgba(147, 228, 255, 0.22); stroke-width: 1.4; stroke-dasharray: 7 7; }
.gc-tag { fill: #93E4FF; font: 600 12px Poppins, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.gc-tag-r { fill: #B6C0D4; letter-spacing: 0.06em; text-transform: none; font-weight: 500; }
.gc-cam rect, .gc-cam path { fill: #16203F; stroke: #93E4FF; stroke-width: 1.6; stroke-linejoin: round; }
.gc-cam .gc-mount { fill: none; stroke-linecap: round; }
.gc-box { fill: #0E1530; stroke: #2A3660; stroke-width: 1.4; }
.gc-box.gc-g { stroke: #C9A227; stroke-width: 1.8; filter: drop-shadow(0 0 18px rgba(201, 162, 39, 0.25)); }
.gc-box.gc-o { fill: #0B1230; }
.gc-t { fill: #FFFFFF; font: 600 19px Sora, sans-serif; }
.gc-t.gc-sm { font-size: 16px; }
.gc-gt { font-family: Manrope, Sora, sans-serif; font-weight: 700; letter-spacing: 0.02em; font-size: 22px; }
.gc-gt.gc-sm { font-size: 18px; }
.gc-s { fill: #B6C0D4; font: 400 13.5px Poppins, sans-serif; }
.gc-s.gc-xs { font-size: 12px; }
.gc-pb { fill: #E3E8F2; }
.gc-proto { fill: #93E4FF; letter-spacing: 0.04em; }
.gc-t.gc-pb { fill: #E8C766; }
.gc-line { fill: none; stroke: rgba(147, 228, 255, 0.38); stroke-width: 2; }
.gc-l2 { stroke: rgba(232, 199, 102, 0.6); stroke-width: 2.2; stroke-dasharray: 100; stroke-dashoffset: 0; }
.gc-legend .gc-l2 { stroke-dasharray: none; }
.gc-oline { stroke: rgba(245, 181, 68, 0.35); }
.gc-dot { fill: #93E4FF; offset-rotate: 0deg; animation: gc-run var(--t, 2.6s) linear infinite; animation-delay: var(--d, 0s); }
.gc-dot.gc-gold { fill: #FFE7A3; }
.gc-dot.gc-alert { fill: #F5B544; animation-name: gc-alert; }
.gc-rec { fill: #F0614F; animation: gc-blink 1.6s ease-in-out infinite; }
.gc-chip rect { fill: #0436FB; }
.gc-chip circle { fill: #F5B544; }
.gc-chip-t { fill: #FFFFFF; font: 500 13px Poppins, sans-serif; }
.gc-chip { animation: gc-chip 6s ease-in-out infinite; }
.gc-g2 { transition: opacity .7s ease; }
.gc-live { fill: rgba(52, 211, 153, 0.12); stroke: rgba(52, 211, 153, 0.5); stroke-width: 1; }
.gc-live-t { fill: #34D399; font: 600 11px Poppins, sans-serif; letter-spacing: 0.1em; }
.gw-r { fill: #121B3A; stroke: #26315A; stroke-width: 1; }
.gw-new { fill: rgba(232, 199, 102, 0.12); stroke: #E8C766; stroke-width: 1.4; opacity: 0; }
.gw-t { fill: #FFFFFF; font: 500 14px Poppins, sans-serif; }
.gw-l { fill: #8E9AB8; font: 400 12.5px Poppins, sans-serif; }
.gc-narrow .gw-t { font-size: 13px; }
.gc-narrow .gw-l { font-size: 11.5px; }
.gw-row { animation: gw-row 8s ease-in-out infinite; }
.gw-row .gw-new { animation: gw-new 8s ease-in-out infinite; animation-delay: inherit; }
@keyframes gw-row { 0% { transform: translateY(-46px); opacity: 0; } 5% { transform: translateY(0); opacity: 1; } 25% { transform: translateY(0); } 30% { transform: translateY(46px); } 50% { transform: translateY(46px); } 55% { transform: translateY(92px); } 75% { transform: translateY(92px); } 80% { transform: translateY(138px); opacity: 1; } 94% { transform: translateY(138px); opacity: 1; } 98%, 100% { transform: translateY(150px); opacity: 0; } }
@keyframes gw-new { 0%, 3% { opacity: 0; } 6%, 20% { opacity: 1; } 26%, 100% { opacity: 0; } }
.gc-off .gc-g2 { opacity: 0.08; }
.gc-off .gc-g2 .gc-dot { animation-play-state: paused; opacity: 0; }
.gc-try { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.gc-try-msg { font-size: 14.5px; color: var(--sub); }
.gc-off .gc-try-msg { color: var(--ink); font-weight: 500; }
@keyframes gc-run { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes gc-alert { 0%, 55% { offset-distance: 0%; opacity: 0; } 58% { opacity: 1; } 76% { offset-distance: 100%; opacity: 1; } 80%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes gc-chip { 0%, 74% { opacity: 0; transform: translateY(6px); } 80%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes gc-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.reveal-on .gc-panel:not(.is-in) .gc-l2 { stroke-dashoffset: 100; }
.reveal-on .gc-panel.is-in .gc-g2 .gc-l2 { animation: gc-draw 1.4s cubic-bezier(.45, 0, .25, 1) both .5s; }
.reveal-on .gc-panel:not(.is-in) * { animation-play-state: paused; }
.gc-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gc-facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); min-width: 0; }
.gc-facts li > svg { width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
.gc-facts b { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.gc-facts p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--sub); }
@media (max-width: 900px) { .gc-facts { grid-template-columns: minmax(0, 1fr); } }
/* Nexus: why we built it, how it connects, who it is for (Peter, 7 Oct). The drawings reuse the Guardian connect styles. */
.nc-panel { background: radial-gradient(90% 120% at 50% 60%, rgba(122, 92, 255, 0.11), transparent 60%), #070B1A; }
.nw-fig figcaption { margin: 10px 4px 0; font-size: 12.5px; color: #8E9AB8; text-align: right; }
.nw-r { fill: #121B3A; stroke: #26315A; stroke-width: 1; }
.nw-dot { fill: #F0614F; }
.nw-host { fill: #FFFFFF; font: 500 14px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.02em; }
.nw-off { fill: #F0614F; font: 600 11px Poppins, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.nw-foot { fill: #B6C0D4; }
.nw-plan { fill: #0B1230; stroke: #2A3660; stroke-width: 1.4; }
.nw-room { fill: #0E1530; stroke: rgba(147, 228, 255, 0.18); stroke-width: 1; }
.nw-rl { fill: #7C87A3; font: 500 11.5px Poppins, sans-serif; }
.nw-cab { fill: #16203F; stroke: #B4BEFF; stroke-width: 1.4; }
.nw-ok { fill: #2DD4BF; }
.nw-m { fill: #F0614F; stroke: #070B1A; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.nw-cable { fill: none; stroke: rgba(240, 97, 79, 0.6); stroke-width: 1.4; stroke-dasharray: 4 4; }
.nw-ring { fill: none; stroke: #B4BEFF; stroke-width: 2.2; stroke-dasharray: 100; }
.nw-cause { fill: #E3E8F2; font-weight: 500; }
.nw-arrow { fill: none; stroke: #B4BEFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nw-row { animation: nw-row 9s ease-in-out infinite; animation-delay: calc(var(--i) * 0.22s); }
.nw-m { animation: nw-m 9s ease-in-out infinite; animation-delay: calc(var(--i) * 0.22s); }
.nw-cable { animation: nw-cable 9s ease-in-out infinite; }
.nw-ring { animation: nw-ring 9s ease-in-out infinite; }
.nw-cause { animation: nw-cause 9s ease-in-out infinite; }
@keyframes nw-row { 0% { opacity: 0; transform: translateX(-10px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nw-m { 0%, 22% { opacity: 0; transform: scale(0.2); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nw-cable { 0%, 50% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nw-ring { 0%, 56% { stroke-dashoffset: 100; opacity: 0; } 58% { opacity: 1; } 66%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes nw-cause { 0%, 64% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } }
.nw-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nw-points li { padding: 22px; border-radius: 16px; background: rgba(20, 28, 56, 0.7); border: 1px solid var(--line); min-width: 0; }
.nw-n { display: block; margin-bottom: 10px; font: 600 13px var(--display); letter-spacing: 0.1em; color: #B4BEFF; }
.nw-points b { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--white); }
.nw-points p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--mist); }
.nc-dev rect, .nc-dev path, .nc-dev circle { fill: #16203F; stroke: #93E4FF; stroke-width: 1.5; stroke-linejoin: round; }
.nc-dev .nc-port { fill: rgba(147, 228, 255, 0.4); stroke: none; }
.nc-dev .nc-led { fill: #34D399; stroke: none; }
.nc-agent rect { fill: #FFFFFF; }
.nc-agent-t { fill: #5A6274; font: 600 9.5px Poppins, sans-serif; letter-spacing: 0.1em; }
.nc-plate { fill: #FFFFFF; }
.nc-user { fill: none; stroke: #B4BEFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nc-user .fill { fill: #B4BEFF; stroke: none; }
.nx-user .fill { fill: currentColor; stroke: none; }
.nc-ping { fill: none; stroke: rgba(147, 228, 255, 0.3); stroke-width: 1.4; stroke-dasharray: 3 5; }
.nc-fw { fill: #1A2348; stroke: #F0614F; stroke-width: 1.2; }
.nc-fw-b { fill: none; stroke: rgba(240, 97, 79, 0.45); stroke-width: 1; }
.nc-pass { fill: rgba(7, 11, 26, 0.55); stroke: #34D399; stroke-width: 2; }
.nc-in { stroke: rgba(240, 97, 79, 0.45); stroke-dasharray: 5 5; }
.nc-x { fill: none; stroke: #F0614F; stroke-width: 3; stroke-linecap: round; }
.nc-okt { fill: #34D399; }
.nc-redt { fill: #F79A8E; }
.nc-pb { fill: #E3E8F2; }
.gc-box.nc-n { stroke: #7A5CFF; stroke-width: 1.8; filter: drop-shadow(0 0 18px rgba(122, 92, 255, 0.35)); }
.nc-nt { font-family: Manrope, Sora, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.02em; }
.nc-team { fill: #121B3A; stroke: rgba(180, 190, 255, 0.4); stroke-width: 1; }
.nc-team-t { fill: #FFFFFF; font: 500 13px Poppins, sans-serif; }
.gc-dot.nc-ndot { fill: #B4BEFF; }
.gc-dot.nc-red { fill: #F0614F; }
.nc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gc-box.nc-ninja { stroke: rgba(56, 189, 248, 0.75); }
.pw-ninja { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 12px 30px -20px rgba(5, 7, 15, 0.55); }
.pw-ninja span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
.pw-ninja img { display: block; height: 20px; width: auto; }
.head .pw-ninja { margin-top: 16px; }
.nx-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 18px; }
.nx-lock .g-lockup { margin-bottom: 0; }
.p-hero .pw-ninja { margin: 0; padding: 6px 14px; }
.p-hero .pw-ninja img { height: 18px; }
.na-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.na-card { display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); min-width: 0; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.na-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(11, 18, 48, 0.45); border-color: #C9D2F5; }
.na-ico { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #0B1230, #5534D6); color: #FFFFFF; }
.na-ico svg { width: 28px; height: 28px; }
.na-card b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); }
.na-sub { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--blue); }
.na-card p { flex: 1; margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--sub); }
.na-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.na-views span { margin-right: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); }
.na-views a { padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-size: 12.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.na-views a:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 1100px) { .nw-points, .nc-facts, .na-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nw-points, .nc-facts, .na-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .nw-row, .nw-m, .nw-cable, .nw-ring, .nw-cause { animation: none; } .na-card { transition: none; } .na-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gw-row, .gw-row .gw-new { animation: none !important; } .gc-dot { display: none; } .gc-l2 { animation: none !important; stroke-dashoffset: 0 !important; } .gc-chip { animation: none; opacity: 1; } .gc-rec { animation: none; } .gc-g2 { transition: none; } }
/* Guardian page, 7 Oct: the story, objects, rule diagrams, screens and roadmap */
.g-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.g-story-fig { margin: 0; position: relative; border-radius: 18px; padding: 18px 18px 12px; background: radial-gradient(120% 90% at 85% 100%, rgba(201, 162, 39, 0.10), transparent 60%), #080C18; border: 1px solid var(--line); min-width: 0; }
.g-story-fig figcaption { margin-top: 6px; font-size: 11.5px; color: var(--mist); opacity: 0.7; }
.g-descent { display: block; width: 100%; height: auto; }
.g-story-vid { padding: 0; overflow: hidden; aspect-ratio: 16 / 9; align-self: start; }
.g-story-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-story-vid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(5, 7, 15, 0.72), transparent 45%); }
.g-story-vid .g-km { z-index: 2; left: 22px; bottom: 18px; }
.g-story-vid .wm { z-index: 3; }
.gd-strata { fill: none; stroke: rgba(147, 228, 255, 0.06); stroke-width: 1; }
.gd-ground { stroke: rgba(232, 199, 102, 0.55); stroke-width: 1.5; }
.gd-portal { fill: none; stroke: #E8C766; stroke-width: 1.6; stroke-linejoin: round; }
.gd-lbl { fill: var(--mist); font: 500 11px Poppins, sans-serif; opacity: 0.8; }
.gd-bed { fill: none; stroke: rgba(232, 199, 102, 0.12); stroke-width: 7; stroke-linecap: round; }
.gd-drift { fill: none; stroke: #C9A227; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.gd-lamp { fill: #E8C766; }
.gd-face { fill: #111318; stroke: #E8C766; stroke-width: 1.2; }
.gd-seam { stroke: rgba(232, 199, 102, 0.35); stroke-width: 1; }
.gd-car { fill: #FAFAF7; offset-distance: 100%; offset-rotate: 0deg; }
.reveal-on .g-story-fig:not(.is-in) .gd-drift { stroke-dashoffset: 100; }
.reveal-on .g-story-fig:not(.is-in) .gd-lamp, .reveal-on .g-story-fig:not(.is-in) .gd-car { opacity: 0; }
.reveal-on .g-story-fig.is-in .gd-drift { animation: gd-draw 3.4s cubic-bezier(.45, 0, .25, 1) both .3s; }
.reveal-on .g-story-fig.is-in .gd-lamp { animation: gd-lamp 0.6s ease both calc(0.6s + var(--i) * 0.42s), gd-glow 3.2s ease-in-out infinite calc(4s + var(--i) * 0.3s); }
.reveal-on .g-story-fig.is-in .gd-car { animation: gd-ride 9s ease-in-out infinite 3.8s; }
@keyframes gd-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes gd-lamp { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes gd-ride { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 88% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.g-km { position: absolute; left: 30px; bottom: 54px; text-align: left; }
.g-km b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4vw, 46px); line-height: 1; color: #E8C766; font-variant-numeric: tabular-nums; }
.g-km span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: gs; }
.g-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.g-steps li::before { counter-increment: gs; content: counter(gs, decimal-leading-zero); font-family: var(--display); font-weight: 600; font-size: 15px; color: #E8C766; padding-top: 8px; border-top: 1px solid rgba(232, 199, 102, 0.45); }
.g-steps b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--white); }
.g-steps p { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--mist); }
.g-sub { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
.g-objs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.g-obj { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); min-width: 0; }
.g-obj b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.g-obj span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--sub); }
.rd { display: block; width: 100%; height: auto; margin-bottom: 16px; border-radius: 10px; }
.rd-bg { fill: #0B1020; }
.rd-vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0B1020; margin: 0 0 16px; }
.rd-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-vid .wm { right: 7px; bottom: 5px; }
.alx .rd-vid .wm img { height: 11px; }
.rd-floor { fill: none; stroke: rgba(147, 228, 255, 0.07); stroke-width: 1; }
.rd-zone { fill: #F5B544; fill-opacity: 0.26; stroke: #F5B544; stroke-width: 1.2; stroke-dasharray: 4 3; animation: rd-lit 6s ease-in-out infinite; }
.rd-walk { fill: rgba(52, 211, 153, 0.12); }
.rd-edge { fill: none; stroke: #F5B544; stroke-width: 1.6; }
.rd-arrow { fill: none; stroke: #34D399; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rd-lane { fill: rgba(147, 228, 255, 0.07); }
.rd-lane-c { fill: none; stroke: rgba(220, 227, 242, 0.35); stroke-width: 1; stroke-dasharray: 6 5; }
.rd-trail { fill: none; stroke: rgba(147, 228, 255, 0.7); stroke-width: 1.4; stroke-linecap: round; animation: rd-chip 6s ease-in-out infinite; }
.rd-lbl { fill: #F5B544; font: 600 7px Poppins, sans-serif; letter-spacing: 0.06em; }
.rd-p circle { fill: #DCE3F2; }
.rd-p path { stroke: #DCE3F2; stroke-width: 2.6; stroke-linecap: round; }
.rd-v .b { fill: #DCE3F2; }
.rd-v .w { fill: #2A3150; }
.rd-v circle { fill: #111; }
.rd-chip { animation: rd-chip 6s ease-in-out infinite; }
.rd-chip rect { fill: #0436FB; }
.rd-chip text { fill: #FFFFFF; font: 500 7.4px Poppins, sans-serif; }
.rd-ring { fill: none; stroke: #93E4FF; stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 0; animation: rd-ring 6s linear infinite; }
.rd-tally rect { fill: #93E4FF; }
.rd-tally .t1 { animation: rd-t1 6s linear infinite; }
.rd-tally .t2 { animation: rd-t2 6s linear infinite; }
.rd-tally .t3 { animation: rd-t3 6s linear infinite; }
.rd-a-inl { animation: rd-inl 6s ease-in-out infinite; }
.rd-a-inr { animation: rd-inr 6s ease-in-out infinite; }
.rd-a-cross { animation: rd-cross 6s ease-in-out infinite; }
.rd-a-pop { animation: rd-pop 6s ease-in-out infinite; }
.rd-a-sway { animation: rd-sway 6s ease-in-out infinite; }
.rd-a-dash { animation: rd-dash 6s cubic-bezier(.2, .7, .3, 1) infinite; }
.rd-a-flow { animation: rd-flow 6s linear infinite; }
@keyframes rd-chip { 0%, 36% { opacity: 0; } 42%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes rd-lit { 0%, 36% { fill-opacity: 0.05; } 42%, 74% { fill-opacity: 0.3; } 80%, 100% { fill-opacity: 0.05; } }
.rd-zone.soft { fill-opacity: 0.12; animation-name: rd-lit-soft; }
@keyframes rd-lit-soft { 0%, 36% { fill-opacity: 0.02; } 42%, 74% { fill-opacity: 0.12; } 80%, 100% { fill-opacity: 0.02; } }
@keyframes rd-inl { 0% { transform: translateX(-84px); opacity: 0; } 6% { opacity: 1; } 38%, 74% { transform: none; opacity: 1; } 92% { transform: translateX(-84px); opacity: 1; } 100% { transform: translateX(-84px); opacity: 0; } }
@keyframes rd-inr { 0% { transform: translateX(84px); opacity: 0; } 6% { opacity: 1; } 38%, 74% { transform: none; opacity: 1; } 92% { transform: translateX(-90px); opacity: 1; } 100% { transform: translateX(-90px); opacity: 0; } }
@keyframes rd-cross { 0% { transform: translateY(-30px); opacity: 0; } 8% { opacity: 1; } 38%, 74% { transform: none; opacity: 1; } 92% { transform: translateY(26px); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes rd-pop { 0%, 34% { opacity: 0; } 40%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes rd-sway { 0%, 100% { transform: translateX(-2px); } 25% { transform: translateX(2px); } 50% { transform: translateX(-1px); } 75% { transform: translateX(2px); } }
@keyframes rd-ring { 0% { stroke-dashoffset: 100; opacity: 1; } 40%, 74% { stroke-dashoffset: 0; opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rd-dash { 0% { transform: translateX(-118px); opacity: 0; } 4% { opacity: 1; } 30%, 74% { transform: none; opacity: 1; } 84%, 100% { transform: none; opacity: 0; } }
@keyframes rd-flow { 0% { transform: translateX(-40px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
@keyframes rd-t1 { 0%, 22% { opacity: 0.18; } 26%, 100% { opacity: 1; } }
@keyframes rd-t2 { 0%, 55% { opacity: 0.18; } 59%, 100% { opacity: 1; } }
@keyframes rd-t3 { 0%, 88% { opacity: 0.18; } 92%, 100% { opacity: 1; } }
.reveal-on .det > div:not(.is-in) .rd * { animation-play-state: paused; }
.g-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
.g-shots figure { margin: 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
/* click to zoom (Peter, 7 Oct): the screen is a button that opens the pop-up */
.zoom { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; border-radius: 14px; cursor: zoom-in; }
.zoom img, .zoom video { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.zoom:hover img, .zoom:hover video { transform: translateY(-3px); box-shadow: 0 36px 70px -38px rgba(5, 7, 15, 0.65); }
.zoom-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(5, 8, 18, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); color: #FFFFFF; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; transition: background 0.25s ease, transform 0.35s ease; }
.zoom-hint svg { width: 15px; height: 15px; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { background: #1D4ED8; transform: translateY(-3px); }
.zm { position: fixed; inset: 0; z-index: 95; background: rgb(3, 6, 16); animation: zm-in 0.22s ease-out; }
.zm[hidden] { display: none; }
.zm-box { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.zm-top { display: flex; align-items: center; gap: 14px; color: #FFFFFF; max-width: 1920px; width: 100%; margin: 0 auto; }
.zm-cap { flex: 1; min-width: 0; }
.zm-cap b { font-family: var(--display); font-weight: 600; font-size: 17px; }
.zm-tip { display: none; }
.zm-tag { display: inline-block; white-space: nowrap; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #C9D3EA; }
.zm-count { font-size: 13px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.zm .zm-x { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #FFFFFF; flex: none; }
.zm-stage { display: grid; place-items: center; min-height: 0; padding: 0 64px; }
.zm-stage img, .zm-stage video { display: block; max-width: min(100%, 1920px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); width: auto; height: auto; border-radius: 10px; background: #050812; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85); cursor: default; animation: zm-up 0.26s ease-out; }
.zm-nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(10, 16, 40, 0.78); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.zm-nav:hover { background: #1D4ED8; }
.zm-nav[hidden] { display: none; }
.zm-nav svg { width: 22px; height: 22px; }
.zm-prev { left: 14px; }
.zm-next { right: 14px; }
@keyframes zm-in { from { opacity: 0; } }
@keyframes zm-up { from { opacity: 0; transform: scale(0.97); } }
@media (max-width: 760px) { .zm-stage { padding: 0; } .zm-nav { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin-top: 0; } .zm-box { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .zm-stage img, .zm-stage video { max-height: calc(100dvh - 170px); } .zm-cap b { display: block; font-size: 15px; } .zm-cap .zm-tag { margin: 6px 0 0; } }
@media (max-width: 760px) and (orientation: portrait) { .zm-box { grid-template-rows: auto minmax(0, 1fr) auto; } .zm-tip { display: block; margin: 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.6); } }
@media (prefers-reduced-motion: reduce) { .zm, .zm-stage img, .zm-stage video { animation: none; } .zoom img, .zoom video, .zoom-hint { transition: none; } .zoom:hover img, .zoom:hover video, .zoom:hover .zoom-hint { transform: none; } }
.g-shots figure:first-child { grid-column: 1 / -1; }
.g-shots figure:first-child .shot { aspect-ratio: 16 / 7; }
.g-shots img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(5, 7, 15, 0.5); }
.g-shots figcaption b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.g-src { margin-left: 10px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub); background: var(--paper); border: 1px solid var(--rule); vertical-align: 2px; }
.g-shots figcaption span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.g-road { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.g-rg { padding: 24px; border-radius: 16px; background: rgba(20, 28, 56, 0.7); border: 1px solid var(--line); min-width: 0; }
.g-rg h3 { margin: 0 0 16px; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
.g-rg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.g-rg.wide { grid-column: 1 / -1; }
details.g-rg > summary, details.role > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.g-rg > summary::-webkit-details-marker, details.role > summary::-webkit-details-marker { display: none; }
details.g-rg > summary h3 { margin: 0; }
details.g-rg[open] > summary { margin-bottom: 16px; }
details.role > summary + p { margin-top: 10px; }
details.g-rg > summary svg, details.role > summary svg { width: 16px; height: 16px; flex: none; color: var(--sky); transition: transform .25s ease; }
details.role > summary svg { color: var(--blue); }
details[open].g-rg > summary svg, details[open].role > summary svg { transform: rotate(45deg); }
@media (min-width: 761px) { details.g-rg > summary, details.role > summary { pointer-events: none; } details.g-rg > summary svg, details.role > summary svg { display: none; } }
@media (max-width: 760px) { details.g-rg > summary, details.role > summary { cursor: pointer; min-height: 40px; } }
.g-rg.wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.rm-i { display: grid; gap: 5px; justify-items: start; }
.rm-i b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--white); }
.rm-i p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--mist); }
.rm-s { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rm-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rm-s.dev { color: #F5B544; background: rgba(245, 181, 68, 0.12); }
.rm-s.dev::before { animation: rm-pulse 2.4s ease-in-out infinite; }
.rm-s.plan { color: var(--sky); background: rgba(147, 228, 255, 0.1); }
@keyframes rm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.g-priv { margin-top: 22px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(232, 199, 102, 0.35); background: rgba(232, 199, 102, 0.06); }
.g-priv b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--white); }
.g-priv p { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--mist); }
.g-priv p + p { margin-top: 10px; }
.g-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.g-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(10, 16, 40, 0.6); border: 1px solid rgba(232, 199, 102, 0.35); font-size: 13px; font-weight: 500; color: var(--white); }
.g-gdpr { width: 34px; height: 34px; flex: none; }
.g-gdpr-bg { fill: #0B1A5C; stroke: rgba(232, 199, 102, 0.45); stroke-width: 1; }
.g-gdpr-stars polygon { fill: #F4D03F; }
.g-gdpr-lock { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; }
.g-gdpr-body { fill: #FFFFFF; }
.g-gdpr-key { fill: #0B1A5C; }
.g-au-shield { fill: none; stroke: #E8C766; stroke-width: 2; stroke-linejoin: round; }
.g-au-tick { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { .g-story, .g-road { grid-template-columns: minmax(0, 1fr); } .g-objs { grid-template-columns: minmax(0, 1fr); } .g-rg.wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .g-rg.wide ul { grid-template-columns: minmax(0, 1fr); } .g-shots { grid-template-columns: minmax(0, 1fr); } .g-shots figure:first-child .shot { aspect-ratio: 16 / 10; } .g-km { position: static; text-align: left; margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .rd *, .rd-chip, .rd-zone, .rd-ring, .rd-trail { animation: none !important; } .gd-drift, .gd-lamp, .gd-car { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } .rm-s.dev::before { animation: none; } }
.g-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: g; }
.g-flow li { position: relative; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.g-flow li + li::before { content: ""; position: absolute; left: -18px; top: 42px; width: 18px; height: 2px; background: linear-gradient(90deg, #C9A227, #E8C766); }
.g-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--display); color: #0F0F0F; background: linear-gradient(140deg, #E8C766, #C9A227); }
.g-flow b { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); }
.g-flow p { font-size: 15px; line-height: 1.65; color: var(--sub); }
.g-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-pack { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 18px; background: rgba(20, 28, 56, 0.7); border: 1px solid var(--line); min-width: 0; }
/* three steps up: the mark lights one more tier, the card takes on more gold (Peter, 7 Oct: they looked the same) */
.g-pack-2 { border-color: rgba(201, 162, 39, 0.45); background: linear-gradient(170deg, rgba(201, 162, 39, 0.10), rgba(20, 28, 56, 0.75) 45%); }
.g-pack-3 { border-color: rgba(232, 199, 102, 0.8); background: linear-gradient(170deg, rgba(232, 199, 102, 0.20), rgba(20, 28, 56, 0.85) 55%); box-shadow: 0 30px 70px -40px rgba(201, 162, 39, 0.55); }
.g-pack-top { display: flex; align-items: center; gap: 14px; }
.g-tiers { width: 44px; height: 48px; flex: none; overflow: visible; }
.g-tier { fill: transparent; stroke: rgba(232, 199, 102, 0.35); stroke-width: 3; transition: fill .5s ease calc(.25s + var(--k) * .25s), stroke .5s ease calc(.25s + var(--k) * .25s); }
.g-tier.on { fill: var(--c); stroke: var(--c); }
.reveal-on .g-pack:not(.is-in) .g-tier.on { fill: transparent; stroke: rgba(232, 199, 102, 0.35); }
.g-tier-node { fill: #FAFAF7; }
.g-pack-lvl { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.g-pack-name { display: block; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--white); line-height: 1.2; }
.g-pack-3 .g-pack-name { color: #F4DC92; }
.g-pack-plus { align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #F4DC92; background: rgba(232, 199, 102, 0.12); border: 1px solid rgba(232, 199, 102, 0.35); }
.g-pack-plus.base { color: var(--mist); background: rgba(147, 228, 255, 0.06); border-color: var(--line); }
.g-pack .ticks svg { color: #E8C766; }
.g-pack .ticks b { display: block; font-family: var(--display); font-weight: 600; color: #F4DC92; letter-spacing: 0.01em; }
@media (prefers-reduced-motion: reduce) { .g-tier { transition: none; } }
.g-pack-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #E8C766; }
.g-pack .ticks { flex: none; align-content: start; }
.g-pack .btn { align-self: flex-start; margin-top: auto; }
.g-dl, .n-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); }
.n-demo { background: linear-gradient(120deg, #0B1230, #0436FB); border: 0; }
.n-demo .h2, .n-demo .eyebrow { color: var(--white); }
.n-demo .lead { color: #DCE3F2; max-width: 70ch; }
.n-demo .btn-primary { background: var(--white); color: var(--blue); }
@media (max-width: 1080px) {
  .g-flow, .g-packs { grid-template-columns: minmax(0, 1fr); }
  .g-flow li + li::before { display: none; }
  .g-dl, .n-demo { grid-template-columns: minmax(0, 1fr); }
  .g-dl .btn, .n-demo .btn { justify-self: start; }
}
/* CrowdStrike Falcon trial banner: co-branded, so CrowdStrike red is used inside it and nowhere else */
.cs-sec { background: var(--ink); padding: 6px 0 52px; }
.cs-ban { --cs: #E4002B; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 44px; width: 100%; min-height: 240px; padding: 34px 48px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: #000; color: var(--white); text-align: left; font: inherit; cursor: pointer; transition: border-color .25s ease, transform .25s ease; }
.cs-ban:hover { border-color: rgba(228, 0, 43, 0.55); transform: translateY(-2px); }
.cs-ban:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.cs-ban::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.86) 48%, rgba(0, 0, 0, 0.45) 100%); }
.cs-ban > :not(.cs-bg) { position: relative; z-index: 2; }
.cs-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0.6; }
.cs-num { display: flex; align-items: baseline; font-family: var(--display); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.cs-num b { font-size: clamp(84px, 10vw, 150px); }
.cs-num i { font-style: normal; font-size: clamp(46px, 5.4vw, 80px); color: var(--cs); margin-left: 4px; }
.cs-copy { display: grid; gap: 10px; max-width: 560px; }
.cs-kick { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cs); }
.cs-h { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.cs-p { font-size: 16px; line-height: 1.55; color: #B4B9C2; }
.cs-act { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.cs-logo { display: block; height: 24px; width: auto; }
.cs-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 8px; background: var(--white); color: #000; font-weight: 600; font-size: 16px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.cs-btn span { color: var(--cs); transition: color .2s ease; }
.cs-ban:hover .cs-btn { background: var(--cs); color: var(--white); }
.cs-ban:hover .cs-btn span { color: var(--white); }
.cs-bar { position: absolute !important; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--cs); transform-origin: left; transform: scaleX(var(--cs-p, 1)); }
.cs-1c .cs-bar, .cs-2c .cs-bar { display: none; }
.cs-src { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: #7A808C; }
/* 1c: three threat-report figures take turns */
.cs-1c .cs-roll { grid-column: 1 / 3; display: grid; }
.cs-1c::before { background: radial-gradient(ellipse at 30% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.94) 72%); }
.cs-stat { grid-area: 1 / 1; display: flex; align-items: center; gap: 40px; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.cs-stat.on { opacity: 1; transform: none; }
.cs-stat .cs-h { font-size: clamp(20px, 2vw, 26px); }
.cs-dots { grid-area: 2 / 1; display: flex; gap: 8px; margin-top: 18px; }
.cs-dots i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); transition: width .3s ease, background-color .3s ease; }
.cs-dots i.on { width: 40px; background: var(--cs); }
/* 2c: one sensor, pulsing out to what it protects */
.cs-2c .cs-bg { object-fit: contain; object-position: 70% 50%; opacity: 0.32; }
.cs-2c::before { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.93) 66%); }
.cs-rings { width: 120px; height: 120px; }
.cs-rings i, .cs-rings b { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.cs-rings i { width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 1.5px solid var(--cs); animation: csRing 2.4s ease-out infinite; }
.cs-rings i:nth-child(2) { animation-delay: .8s; }
.cs-rings i:nth-child(3) { animation-delay: 1.6s; }
.cs-rings b { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--cs); box-shadow: 0 0 30px var(--cs); }
@keyframes csRing { from { transform: scale(1); opacity: 0.8; } to { transform: scale(9); opacity: 0; } }
.cs-nodes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cs-nodes span { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 13px; color: var(--white); }
@media (max-width: 1080px) {
  .cs-ban { grid-template-columns: auto minmax(0, 1fr); padding: 30px 32px; }
  .cs-act { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .cs-1c .cs-roll { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .cs-sec { padding-bottom: 40px; }
  .cs-ban { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 22px 28px; min-height: 0; }
  .cs-ban::before, .cs-1c::before, .cs-2c::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.95)); }
  .cs-stat { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cs-rings { width: 72px; height: 72px; }
  .cs-act { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .cs-btn { justify-content: center; }
  .cs-logo { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cs-rings i { animation: none; opacity: 0.5; } .cs-rings i:nth-child(2) { transform: scale(3); opacity: 0.3; } .cs-rings i:nth-child(3) { transform: scale(5); opacity: 0.15; } }
/* CrowdStrike trial page */
.cs-hero > img { opacity: 0.4; object-position: center 20%; }
.cs-with { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; color: var(--mist); }
.cs-with img { height: 20px; width: auto; display: block; }
.cs-hero .ticks li { color: #DCE3F2; }
.cs-why-sec { --cs: #E4002B; }
.cs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-fig { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 16px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(228, 0, 43, 0.25); }
.cs-fig .cs-num b { font-size: clamp(56px, 6vw, 84px); }
.cs-fig .cs-num i { font-size: clamp(32px, 3.4vw, 46px); }
.cs-fig p { font-size: 15px; line-height: 1.6; color: var(--mist); }
.cs-why-sec .cs-src { margin-top: 16px; }
@media (max-width: 1080px) { .cs-figs { grid-template-columns: minmax(0, 1fr); } }
/* The trial page belongs to CrowdStrike: black throughout, and the site's accent tokens switched to CrowdStrike red */
.cs-page { --blue: #E4002B; --blue-hi: #FF2D52; --sky: #FF5C75; --night: #000; --cs: #E4002B; }
.cs-page .sec.dark { background: #000; }
.cs-page .cs-tl-sec, .cs-page .cs-faq { background: #07080C; }
.cs-page .sec.dark::before { background: radial-gradient(60% 50% at 12% 0%, rgba(228, 0, 43, 0.14), transparent 70%); }
.cs-page .cs-hero::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0.42) 100%); }
.cs-page .btn-primary { box-shadow: 0 10px 30px -12px rgba(228, 0, 43, 0.7); }
.cs-page .form input:focus, .cs-page .form select:focus, .cs-page .form textarea:focus { outline-color: rgba(228, 0, 43, 0.35); border-color: var(--cs); }
.cs-page .dark .box { background: #0B0C10; border-color: rgba(255, 255, 255, 0.08); }
.cs-page .ab-ic { background: rgba(228, 0, 43, 0.14); color: #FF5C75; }
.cs-page .pstep.on .pbox { background-color: #0B0C10; }
.cs-page .faq details { background: #0B0C10; border-color: rgba(255, 255, 255, 0.1); }
.cs-page .faq summary { color: var(--white); }
.cs-page .faq .ans { color: var(--mist); }
.cs-card { display: grid; gap: 14px; }
.cs-card h2 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.02em; }
.cs-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-inc li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; color: var(--ink); }
.cs-inc svg { width: 18px; height: 18px; margin-top: 2px; color: var(--cs); }
.cs-terms { font-size: 14px; line-height: 1.6; color: var(--sub); }
.cs-card .btn svg { width: 15px; height: 15px; }
.cs-fine { font-size: 12.5px; line-height: 1.5; color: var(--sub); text-align: center; }
.cs-help { padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--sub); text-align: center; }
.cs-help .lnk { font-size: 14px; }
.cs-direct { position: relative; z-index: 1; margin-top: 14px; font-size: 13.5px; color: var(--mist); text-align: center; }
.cs-direct a { display: inline-flex; align-items: center; gap: 6px; color: var(--white); text-decoration: underline; text-decoration-color: rgba(228, 0, 43, 0.7); text-underline-offset: 3px; }
.cs-direct a:hover { text-decoration-color: currentColor; }
.cs-direct svg { width: 13px; height: 13px; }
/* CrowdStrike trial page: motion in CrowdStrike's style (black, red, sensor pulses). With reduced motion every piece
   rests on its final frame. */
.cs-hero > img { animation: csDrift 26s ease-in-out infinite alternate; transform-origin: 30% 40%; }
@keyframes csDrift { from { transform: scale(1.1) translateX(-1.5%); } to { transform: scale(1) translateX(1.5%); } }
.cs-glow { position: absolute; z-index: 1; right: 6%; top: 8%; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(228, 0, 43, 0.32), rgba(228, 0, 43, 0) 62%); animation: csBreath 6s ease-in-out infinite; }
@keyframes csBreath { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }
.cs-hero .wrap { z-index: 2; }
.cs-formwrap { position: relative; --cs: #E4002B; }
.cs-formwrap > .form { position: relative; z-index: 1; box-shadow: 0 30px 80px -30px rgba(228, 0, 43, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.cs-formwrap .cs-rings { position: absolute; left: -10px; top: -10px; z-index: 0; }
.cs-why-sec { position: relative; overflow: hidden; }
.cs-why-sec > .wrap { position: relative; z-index: 1; }
.cs-mesh { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; opacity: 0.4; pointer-events: none; animation: csMesh 34s ease-in-out infinite alternate; }
@keyframes csMesh { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -2%, 0); } }
.cs-fig { position: relative; overflow: hidden; transition: border-color .3s ease, transform .3s ease; }
.cs-fig::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cs); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .3s; }
.reveal-on .cs-fig.is-in::after, .cs-fig:not([data-reveal])::after { transform: scaleX(1); }
.cs-fig:hover { border-color: rgba(228, 0, 43, 0.7); transform: translateY(-3px); }
/* the attack chain: an illustration, labelled as one */
.cs-chain { margin: 44px 0 0; padding: 28px 30px 24px; border-radius: 16px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); }
.cs-chain figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 13.5px; color: var(--mist); }
.cs-track { position: relative; height: 56px; margin-top: 18px; }
.cs-line, .cs-run { position: absolute; left: 12.5%; top: 50%; height: 2px; margin-top: -1px; }
.cs-line { right: 12.5%; background: rgba(255, 255, 255, 0.16); }
.cs-run { width: 25%; background: var(--cs); box-shadow: 0 0 12px var(--cs); animation: csRun 7s cubic-bezier(.5, 0, .3, 1) infinite; }
.cs-dot { position: absolute; left: 37.5%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cs); box-shadow: 0 0 18px var(--cs); animation: csDot 7s cubic-bezier(.5, 0, .3, 1) infinite; }
.cs-hit { position: absolute; left: 37.5%; top: 50%; }
.cs-hit i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--white); opacity: 0; animation: csHit 7s ease-out infinite; }
.cs-hit i + i { animation-delay: .25s; }
.cs-stamp { position: absolute; left: 37.5%; top: -2px; margin-left: 18px; padding: 3px 10px; border: 1.5px solid var(--white); border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); background: rgba(228, 0, 43, 0.85); animation: csStamp 7s ease-out infinite; }
@keyframes csRun { 0% { width: 0; } 38% { width: 25%; } 100% { width: 25%; } }
@keyframes csDot { 0% { left: 12.5%; opacity: 1; } 38% { left: 37.5%; } 90% { left: 37.5%; opacity: 1; } 100% { left: 37.5%; opacity: 0; } }
@keyframes csHit { 0%, 38% { opacity: 0; transform: scale(1); } 40% { opacity: 0.9; } 62% { opacity: 0; transform: scale(5); } 100% { opacity: 0; transform: scale(5); } }
@keyframes csStamp { 0%, 39% { opacity: 0; transform: scale(1.6); } 44% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.cs-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; font-size: 14px; }
.cs-steps li { display: grid; gap: 4px; padding: 0 6px; }
.cs-steps li span { font-size: 11.5px; letter-spacing: 0.16em; color: var(--cs); }
.cs-steps li.on { color: var(--white); }
.cs-steps li.off { color: #6B7280; }
.cs-steps li.off span { color: #4B5060; }
@media (max-width: 1080px) {
  .cs-glow { width: 420px; height: 420px; right: -10%; }
}
@media (max-width: 680px) {
  .cs-chain { padding: 22px 16px 18px; }
  .cs-steps { font-size: 12px; }
  .cs-stamp { font-size: 10px; padding: 2px 7px; margin-left: 12px; }
  .cs-formwrap .cs-rings { display: none; }
}
/* Trial page v3 (7 Oct): what's in the trial, what it involves, what you get, and adversaries popping in on scroll */
.cs-page .sec.dark > .wrap { position: relative; z-index: 1; }
.cs-pop { position: absolute; bottom: 0; z-index: 0; width: clamp(220px, 24vw, 350px); height: auto; opacity: 0.42; pointer-events: none; filter: drop-shadow(0 0 40px rgba(228, 0, 43, 0.35)); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; }
.cs-pop-l { left: -1%; }
.cs-pop-r { right: -1%; }
.reveal-on .cs-pop-l[data-reveal]:not(.is-in) { opacity: 0; transform: translate(-45%, 6%); }
.reveal-on .cs-pop-r[data-reveal]:not(.is-in) { opacity: 0; transform: translate(45%, 6%); }
.reveal-on .cs-pop[data-reveal].is-in { opacity: 0.42; animation: csFloat 7s ease-in-out 1.4s infinite alternate; }
@keyframes csFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }
.cs-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cs-prod { position: relative; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: #0B0C10; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; transition: border-color .3s ease, transform .3s ease; }
.cs-prod::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--cs); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.cs-prod:hover { border-color: rgba(228, 0, 43, 0.55); transform: translateY(-3px); }
.cs-prod:hover::before { transform: scaleX(1); }
.cs-prod b { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--white); }
.cs-prod p { font-size: 14.5px; line-height: 1.6; color: var(--mist); }
.cs-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cs-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: #DCE3F2; }
.cs-facts svg { width: 18px; height: 18px; margin-top: 2px; color: var(--cs); }
.cs-tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 880px; --tl-p: 1; }
.cs-tl-rail { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: rgba(255, 255, 255, 0.12); }
.cs-tl-rail span { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--tl-p) * 100%); background: var(--cs); box-shadow: 0 0 12px var(--cs); }
.cs-tl-step { position: relative; display: grid; gap: 6px; margin-left: 40px; padding: 18px 22px; border-radius: 14px; background: #0B0C10; border: 1px solid rgba(255, 255, 255, 0.08); }
.cs-tl-dot { position: absolute; left: -36px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--cs); border: 2px solid var(--cs); box-shadow: 0 0 16px var(--cs); }
.reveal-on .cs-tl-step:not(.is-in) .cs-tl-dot { background: #000; box-shadow: none; }
.cs-tl-dot { transition: background-color .4s ease .3s, box-shadow .4s ease .3s; }
.cs-tl-when { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs); }
.cs-tl-step b { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--white); }
.cs-tl-step p { font-size: 15px; line-height: 1.65; color: var(--mist); max-width: 68ch; }
.cs-tl-alx { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; justify-self: start; margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: rgba(4, 54, 251, 0.18); border: 1px solid rgba(123, 149, 255, 0.4); font-size: 14px; color: #DCE3F2; }
.cs-tl-alx i { font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #93E4FF; }
.cs-get { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cs-get-col { display: grid; gap: 18px; align-content: start; padding: 26px; border-radius: 16px; background: #0B0C10; border: 1px solid rgba(228, 0, 43, 0.35); }
.cs-get-col.alx { border-color: rgba(123, 149, 255, 0.45); }
.cs-get-h { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--white); }
.cs-get-h img { height: 22px; width: auto; display: block; }
.cs-get .cs-inc li { color: #DCE3F2; font-size: 15px; }
.cs-get .cs-inc svg { color: var(--cs); }
.cs-get-col.alx .cs-inc svg { color: #7B95FF; }
@media (max-width: 1080px) {
  .cs-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-facts, .cs-get { grid-template-columns: minmax(0, 1fr); }
  .cs-pop { width: 200px; opacity: 0.26; }
  .reveal-on .cs-pop[data-reveal].is-in { opacity: 0.26; }
}
@media (max-width: 680px) {
  .cs-prods { grid-template-columns: minmax(0, 1fr); }
  .cs-tl-step { margin-left: 32px; padding: 16px 16px; }
  .cs-tl-dot { left: -30px; }
  .cs-pop { width: 150px; opacity: 0.2; }
  .reveal-on .cs-pop[data-reveal].is-in { opacity: 0.2; }
}
/* Legal pages: long-form reading, contents alongside */
.lg-hero { padding-block: 56px 60px; }
.sv-hero h1.lg-title { display: block; font-family: var(--display); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--white); }
.lg-sec { padding-top: 56px; }
.lg-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; }
.lg-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; font-size: 13.5px; padding-right: 6px; }
.lg-toc summary { display: none; }
.lg-toc > b { display: block; margin: 0 0 8px; padding-left: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.lg-toc ol { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 1px; }
.lg-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 5px 8px; border-radius: 8px; color: var(--sub); line-height: 1.4; }
.lg-toc a span { color: var(--blue); font-variant-numeric: tabular-nums; }
.lg-toc a:hover { background: var(--paper); color: var(--ink); }
.lg-body { max-width: 760px; font-size: 16px; line-height: 1.75; color: var(--text); min-width: 0; }
.lg-body p { margin-top: 14px; }
.lg-body p.sub { margin-top: 6px; padding-left: 26px; }
.lg-body .lg-meta { margin-top: 0; font-size: 14px; color: var(--sub); font-style: italic; }
.lg-body .lg-kv { margin-top: 6px; }
.lg-body .lg-kv b { color: var(--ink); }
.lg-body ul { margin: 12px 0 0; padding-left: 22px; }
.lg-body li + li { margin-top: 6px; }
.lg-body a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(4, 54, 251, 0.3); text-underline-offset: 3px; }
.lg-body a:hover { text-decoration-color: currentColor; }
.lg-part { margin: 64px 0 0; padding-top: 22px; border-top: 2px solid var(--ink); font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink); scroll-margin-top: 100px; }
.lg-body > .lg-part:first-child { margin-top: 0; }
.lg-h { display: flex; gap: 12px; font-family: var(--display); font-weight: 600; color: var(--ink); line-height: 1.3; scroll-margin-top: 100px; }
.lg-h .n { flex: none; min-width: 2.4em; color: var(--blue); font-variant-numeric: tabular-nums; }
.lg-h.lg-h2 { margin-top: 44px; font-size: 21px; }
.lg-h.lg-h3 { margin-top: 26px; font-size: 16.5px; }
.lg-part + .lg-h2, .lg-meta + p + p + .lg-h2 { margin-top: 28px; }
.lg-dl { margin: 16px 0 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; font-size: 15px; }
.lg-dl div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 14px 18px; }
.lg-dl div + div { border-top: 1px solid var(--rule); }
.lg-dl div:nth-child(even) { background: var(--paper); }
.lg-dl dt { font-weight: 600; color: var(--ink); }
.lg-dl dd { margin: 0; min-width: 0; }
.lg-dl dd p:first-child { margin-top: 0; }
@media (max-width: 1080px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lg-toc { position: static; max-height: none; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
  .lg-toc summary { display: block; cursor: pointer; font-weight: 600; color: var(--ink); }
  .lg-toc[open] summary { margin-bottom: 12px; }
}
@media (max-width: 680px) {
  .lg-dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lg-h .n { min-width: 2em; }
  .lg-body p.sub { padding-left: 14px; }
}
/* Team: initials until the photo shoot */
.tm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 24px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); min-width: 0; }
.tm b { display: block; margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.tm-role { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--blue); }
.tm-av + div > .tm-role:first-child { margin-top: 18px; }
.tm p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.tm-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 28px 22px; border-radius: 16px; background: linear-gradient(150deg, var(--navy), var(--blue)); color: var(--white); min-width: 0; }
.tm-cta b { font-family: var(--display); font-weight: 600; font-size: 19px; }
.tm-cta p { font-size: 14px; line-height: 1.6; color: #DCE3F2; }
.tm-cta .btn { margin-top: 8px; }
.tm-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; color: var(--white); background: linear-gradient(140deg, #0436FB, #6A8BFF); }
.tm-av.av1 { background: linear-gradient(140deg, #0B1230, #3D63FF); }
.tm-av.av2 { background: linear-gradient(140deg, #1D2B6B, #5B7BFF); }
.tm-av.av3 { background: linear-gradient(140deg, #070B1A, #0436FB); }
.tm-av svg { width: 24px; height: 24px; }
.tm-av.ph { overflow: hidden; background: var(--rule); }
.tm-av.ph img { width: 100%; height: 100%; object-fit: cover; }
.tm .tm-av { width: 104px; height: 104px; font-size: 28px; }
.tm .tm-av.ph { box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--rule); }
/* a role icon stands in for someone not yet named: light, so it reads as the job, not as a missing photo */
.tm-av.role { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 1px #D3DCF6; }
.tm-av.role svg { width: 42%; height: 42%; }
.tm .tm-av.role { box-shadow: inset 0 0 0 1px #D3DCF6, 0 10px 24px -14px rgba(4, 54, 251, 0.45); }
.tm-stack .tm-av.role { background: var(--paper); box-shadow: 0 0 0 3px var(--white), inset 0 0 0 1px #D3DCF6; }
.tm-stack .tm-av.role svg { width: 52%; height: 52%; }
.tm-strip { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 14px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); color: inherit; transition: border-color .2s ease; }
.tm-strip:hover { border-color: #C9D5FF; }
.tm-stack { display: flex; flex: none; }
.tm-stack .tm-av { width: 40px; height: 40px; font-size: 13px; box-shadow: 0 0 0 3px var(--white); }
.tm-stack .tm-av + .tm-av { margin-left: -10px; }
.tm-stack .tm-av svg { width: 18px; height: 18px; }
.tm-txt { min-width: 0; }
.tm-txt b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.tm-txt span { font-size: 14px; color: var(--sub); }
.tm-strip .lnk { margin-left: auto; white-space: nowrap; }
@media (max-width: 1080px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tm { padding: 22px 18px; }
  .tm .tm-av { width: 88px; height: 88px; font-size: 24px; }
  .tm-strip { flex-wrap: wrap; gap: 10px 14px; }
  .tm-stack .tm-av { width: 34px; height: 34px; font-size: 11.5px; }
  .tm-stack .tm-av + .tm-av { margin-left: -8px; }
  .tm-strip .lnk { margin-left: 0; }
}
/* About and contact */
.ab-story { margin-top: 18px; }
.ab-story p + p { margin-top: 14px; }
.ab-quote { margin: 28px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--blue); }
.ab-quote p { font-family: var(--display); font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.ab-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--sub); }
.ab-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(140deg, #E8EEFF, #F4F8FF); color: var(--blue); margin-bottom: 16px; }
.ab-ic svg { width: 22px; height: 22px; }
.ab-name { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ab-name div { padding: 30px; border-radius: 18px; background: rgba(20, 28, 56, 0.7); border: 1px solid var(--line); min-width: 0; }
.ab-name b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; background: linear-gradient(90deg, #FFFFFF 0%, var(--sky) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-name p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--mist); }
.ct-ways { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-ways li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(20, 28, 56, 0.6); border: 1px solid var(--line); min-width: 0; }
.ct-ways .ci { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(4, 54, 251, 0.3); color: var(--sky); }
.ct-ways .ci svg { width: 20px; height: 20px; }
.ct-ways b { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.ct-ways .cv { display: block; margin-top: 3px; color: var(--white); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ct-ways a.cv:hover { color: var(--sky); }
.ct-doors .box { display: flex; flex-direction: column; align-items: flex-start; }
.ct-doors .box .lnk { margin-top: auto; padding-top: 16px; }
button.lnk { background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.ct-phones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ct-phones li { position: relative; display: grid; gap: 6px; padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); min-width: 0; }
.ct-phones .st { font-size: 13px; color: var(--sub); padding-right: 84px; }
.ct-phones a { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-phones a:hover { color: var(--blue); }
.ct-phones .hq { position: absolute; top: 14px; right: 14px; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #E8EEFF; color: var(--blue); font-weight: 500; }
.ct-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.ct-photo { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.ct-licence { margin-top: 16px; font-size: 13px; color: var(--sub); }
@media (max-width: 1080px) {
  .ab-name, .ct-visit { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ct-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ct-ways { grid-template-columns: minmax(0, 1fr); }
  .ct-phones { gap: 8px; }
  .ct-phones li { padding: 14px; }
  .ct-phones .st { font-size: 12px; padding-right: 0; }
  .ct-phones .hq { position: static; justify-self: start; }
  .ct-phones a { font-size: 16px; }
  .ab-name div { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .alx *, .alx *::before, .alx *::after { animation: none !important; transition: none !important; }
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
}

/* WordPress build only */
.utm, .pbar, .seo { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }