:root {
    --ink: #18231f;
    --muted: #65716c;
    --faint: #8d9992;
    --line: #dfe7e1;
    --paper: #f6f8f5;
    --white: #ffffff;
    --dark: #07130f;
    --dark-soft: #0d211a;
    --green: #12b76a;
    --green-deep: #087a48;
    --lime: #b7edc9;
    --gold: #e3b75b;
    --max: 1180px;
    --shadow: 0 20px 60px rgba(23, 43, 32, .08);
}

@media (max-width: 720px) {
    .site-header.menu-open .mega-menu { display: none; }
    .site-header.menu-open .nav-menu-item.is-open > .mega-menu { display: block; }
}

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

html {
    scroll-behavior: smooth;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg { max-width: 100%; }
.text-keep { white-space: nowrap; }

.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.official-page { overflow: hidden; background: var(--paper); transition: opacity .5s ease, transform .5s ease; }

body.official-loading { overflow: hidden; cursor: progress; }
body.official-loading .official-page { opacity: 0; transform: translateY(10px); }
body.official-page-ready .official-page { opacity: 1; transform: none; }
body.official-loading::before,
body.official-loader-exit::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--dark);
    opacity: 1;
    transition: opacity .45s ease, visibility .45s ease;
}
body.official-loading::after,
body.official-loader-exit::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10001;
    width: 126px;
    height: 42px;
    background: url("/public/official/Image-3-white-green.png") center / contain no-repeat;
    opacity: .82;
    transform: translate(-50%, -50%) scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}
body.official-loading::before { pointer-events: auto; }
body.official-loading::after { animation: official-loader-pulse .72s ease-in-out infinite alternate; }
body.official-loader-exit::before { visibility: hidden; opacity: 0; pointer-events: none; }
body.official-loader-exit::after { opacity: 0; transform: translate(-50%, -50%) scale(1.03); pointer-events: none; }

.page-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.25,1); }
.page-reveal.is-visible { opacity: 1; transform: none; }

@keyframes official-loader-pulse {
    from { opacity: .62; transform: translate(-50%, -50%) scale(.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.announcement {
    position: relative;
    z-index: 5;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: #042c1a;
    font-size: 12px;
    font-weight: 750;
}

.announcement a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; }
.announcement strong { color: #fff; }
.announcement span { color: rgba(4, 44, 26, .82); }

.site-header {
    position: relative;
    z-index: 4;
    min-height: 76px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--line);
}

.site-header.is-dark { background: rgba(7,19,15,.88); border-bottom-color: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(16px); }
.site-header .container { display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 850; letter-spacing: 0; white-space: nowrap; }
.brand em { color: var(--green); font-style: normal; }
.site-header.is-dark .brand { color: #fff; }

.main-nav { display: flex; align-items: center; gap: 22px; margin-left: 10px; }
.main-nav .nav-collapsed-link { display: none; }
.nav-menu-item { position: static; display: inline-flex; align-items: center; gap: 2px; }
.main-nav a { color: var(--muted); font-size: 13px; font-weight: 700; transition: color .18s ease; }
.site-header.is-dark .main-nav a { color: rgba(255,255,255,.7); }
.main-nav a:hover, .main-nav a[aria-current="page"], .site-header.is-dark .main-nav a:hover { color: var(--green); }
.mega-menu-toggle { display: inline-grid; place-items: center; width: 18px; height: 24px; border: 0; padding: 0; background: transparent; color: currentColor; cursor: pointer; }
.mega-menu-toggle span { display: block; color: var(--muted); font-size: 15px; line-height: 1; transition: transform .18s ease, color .18s ease; }
.site-header.is-dark .mega-menu-toggle span { color: rgba(255,255,255,.7); }
.nav-menu-item.is-open > a, .nav-menu-item.is-open .mega-menu-toggle span { color: var(--green); }
.nav-menu-item.is-open .mega-menu-toggle span { transform: rotate(180deg); }
.mega-menu { position: absolute; top: 100%; left: 0; z-index: 20; width: 100%; border-top: 1px solid rgba(183,237,201,.13); border-bottom: 1px solid rgba(183,237,201,.17); background: rgba(7,19,15,.98); box-shadow: 0 22px 50px rgba(0,0,0,.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; }
.nav-menu-item:hover > .mega-menu, .nav-menu-item.is-open > .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mega-menu-inner { width: min(var(--max), calc(100% - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 30px; margin: 0 auto; padding: 24px 0 20px; }
.mega-menu-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.mega-menu-group { display: grid; align-content: start; gap: 9px; }
.mega-menu-group h3 { margin: 0 0 14px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.mega-menu-group a { min-height: 35px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.84); font-size: 14px; font-weight: 650; }
.mega-menu-group a:hover, .mega-menu-group a:focus-visible { color: #fff; }
.mega-menu.is-solution .mega-menu-inner { padding-bottom: 20px; }
.mega-solution-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.mega-solution-card { position: relative; min-height: 218px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid rgba(183,237,201,.18); padding: 17px; background: linear-gradient(145deg, rgba(31,72,52,.9), rgba(10,30,22,.92)); color: #fff; }
.mega-solution-card::before, .mega-solution-card::after { display: none; }
.mega-solution-card:nth-child(2) { background: linear-gradient(145deg, rgba(40,65,39,.9), rgba(13,28,19,.92)); }.mega-solution-card:nth-child(3) { background: linear-gradient(145deg, rgba(18,57,42,.94), rgba(8,25,18,.94)); }
.mega-solution-index { position: relative; z-index: 1; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.mega-solution-card > strong { position: relative; z-index: 1; margin-top: 30px; color: #fff; font-size: 17px; line-height: 1.2; }.mega-solution-card > small { position: relative; z-index: 1; margin-top: 9px; color: rgba(255,255,255,.64); font-size: 11px; line-height: 1.55; }.mega-solution-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }.mega-solution-tags i { border: 1px solid rgba(183,237,201,.25); padding: 3px 5px; color: rgba(255,255,255,.74); font-size: 9px; font-style: normal; }.mega-solution-card > b { position: relative; z-index: 1; margin: 11px 0 0; color: var(--lime); font-size: 17px; }.mega-solution-card:hover { border-color: rgba(183,237,201,.54); transform: translateY(-2px); }.mega-solution-card:hover > strong { color: var(--lime); }
.mega-icon { position: relative; width: 19px; height: 19px; flex: 0 0 19px; border: 1.5px solid currentColor; border-radius: 4px; color: rgba(255,255,255,.84); }
.mega-icon::before, .mega-icon::after { content: ""; position: absolute; background: currentColor; }
.mega-icon.is-grid::before { inset: 4px; border: 1px solid currentColor; background: transparent; }.mega-icon.is-grid::after { top: 3px; bottom: 3px; left: 8px; width: 1px; box-shadow: -4px 0 0 currentColor, 4px 0 0 currentColor; }
.mega-icon.is-layers { border-radius: 50%; }.mega-icon.is-layers::before { top: 5px; right: 3px; left: 3px; height: 1px; box-shadow: 0 4px 0 currentColor; }.mega-icon.is-search { border-radius: 50%; }.mega-icon.is-search::after { right: -4px; bottom: -3px; width: 7px; height: 1.5px; transform: rotate(45deg); }.mega-icon.is-users::before { width: 6px; height: 6px; top: 3px; left: 5px; border-radius: 50%; }.mega-icon.is-users::after { width: 11px; height: 5px; bottom: 3px; left: 3px; border-radius: 8px 8px 2px 2px; }.mega-icon.is-bag::before { top: 5px; right: 3px; bottom: 3px; left: 3px; border: 1px solid currentColor; background: transparent; }.mega-icon.is-bag::after { top: 2px; left: 6px; width: 5px; height: 4px; border: 1px solid currentColor; border-bottom: 0; background: transparent; }.mega-icon.is-pulse::before { top: 8px; left: 2px; width: 13px; height: 1px; transform: rotate(-26deg); }.mega-icon.is-chart::before { bottom: 3px; left: 4px; width: 3px; height: 6px; box-shadow: 5px -4px 0 currentColor, 10px -8px 0 currentColor; }.mega-icon.is-spark { border-radius: 50%; }.mega-icon.is-spark::before { top: 3px; bottom: 3px; left: 8px; width: 1px; }.mega-icon.is-spark::after { top: 8px; right: 3px; left: 3px; height: 1px; }.mega-icon.is-check::before { top: 8px; left: 3px; width: 10px; height: 5px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; background: transparent; transform: rotate(-45deg); }.mega-icon.is-refresh { border-radius: 50%; }.mega-icon.is-refresh::before { top: 2px; right: 2px; bottom: 2px; left: 2px; border: 1px solid currentColor; border-left-color: transparent; border-radius: 50%; background: transparent; }.mega-icon.is-shield { clip-path: polygon(50% 0, 92% 17%, 82% 77%, 50% 100%, 18% 77%, 8% 17%); border-radius: 0; }.mega-icon.is-wallet::before { top: 5px; right: 2px; bottom: 5px; left: 2px; border: 1px solid currentColor; background: transparent; }.mega-icon.is-wallet::after { top: 8px; right: 4px; width: 3px; height: 3px; border-radius: 50%; }
.mega-menu-rail { display: flex; flex-direction: column; align-items: flex-start; min-height: 260px; padding: 18px; background: rgba(15,48,35,.7); }
.mega-menu-rail > strong { color: var(--green); font-size: 11px; font-weight: 800; }.mega-menu-rail h3 { margin: 10px 0 0; color: #fff; font-size: 15px; }.mega-menu-rail p { margin: 5px 0 7px; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.45; }.mega-rail-visual { position: relative; width: 100%; height: 70px; margin-top: 10px; overflow: hidden; border: 1px solid rgba(183,237,201,.16); background: #123226; }.mega-rail-visual::before, .mega-rail-visual i, .mega-rail-visual b { content: ""; position: absolute; display: block; }.mega-rail-visual::before { width: 128px; height: 128px; top: -62px; right: -12px; border: 1px solid rgba(183,237,201,.3); border-radius: 50%; }.mega-rail-visual i:nth-child(1) { top: 20px; left: 14px; width: 42px; height: 6px; background: #5da978; }.mega-rail-visual i:nth-child(2) { top: 36px; left: 14px; width: 74px; height: 4px; background: rgba(183,237,201,.32); }.mega-rail-visual i:nth-child(3) { right: 22px; bottom: 14px; width: 8px; height: 8px; border-radius: 50%; background: #12b76a; }.mega-rail-visual b { right: 23px; bottom: 18px; left: 90px; height: 1px; background: rgba(183,237,201,.33); transform: rotate(-28deg); }.mega-rail-link { color: var(--lime); font-size: 11px; font-weight: 750; }.mega-rail-link span { margin-left: 5px; font-size: 14px; }.mega-rail-updates { width: 100%; margin-top: 10px; border-top: 1px solid rgba(183,237,201,.14); padding-top: 8px; }.mega-rail-updates > b { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .08em; }.mega-rail-updates ul { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }.mega-rail-updates li { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.76); font-size: 10px; }.mega-rail-updates li::before { content: ""; width: 4px; height: 4px; flex: 0 0 4px; border: 1px solid var(--lime); border-radius: 50%; }
.mega-menu-footer { border-top: 1px solid rgba(183,237,201,.14); }.mega-menu-footer-inner { width: min(var(--max), calc(100% - 48px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0 auto; padding: 13px 0 15px; }.mega-menu-footer a { display: grid; gap: 3px; }.mega-menu-footer strong { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; }.mega-menu-footer small { color: rgba(255,255,255,.5); font-size: 10px; }.mega-menu-footer a:hover strong { color: var(--lime); }
.mega-menu-actions { display: grid; gap: 8px; width: 100%; margin-top: auto; }
.mega-action { min-height: 34px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(183,237,201,.28); padding: 0 11px; color: #fff; font-size: 12px; font-weight: 750; }
.mega-action.primary { border-color: var(--green); background: var(--green-deep); color: #083d25; }
.mega-action.primary:hover, .mega-action.primary:focus-visible { background: #05683e; color: #dff7e8; }
.mega-action.secondary { color: #9fdab2; }
.mega-action.secondary:hover { border-color: rgba(183,237,201,.64); background: rgba(255,255,255,.05); }
.mega-action span { font-size: 15px; }
.site-header.is-dark .main-nav .mega-action.primary { color: #083d25; }
.site-header.is-dark .main-nav .mega-action.primary:hover, .site-header.is-dark .main-nav .mega-action.primary:focus-visible { color: #dff7e8; }
.site-header.is-dark .main-nav .mega-action.secondary { color: #9fdab2; }
.mega-menu a::after { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-actions .button { min-height: 38px; padding: 0 15px; font-size: 12px; }

/* Navigation interaction and compact rail refinements. */
.mega-menu-inner { grid-template-columns: minmax(0, 1fr) 286px; }
.mega-menu-toggle span { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; font-size: 0; transform: translateY(-2px) rotate(45deg); }
.nav-menu-item.is-open .mega-menu-toggle span { transform: translateY(2px) rotate(225deg); }
.mega-menu-rail h3 { margin-top: 11px; color: rgba(255,255,255,.95); font-size: 16px; line-height: 1.3; }
.mega-menu-rail p { max-width: 25ch; margin: 7px 0 10px; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.55; }
.mega-rail-updates { margin-top: 12px; padding-top: 10px; }
.mega-rail-updates ul { gap: 6px; margin-top: 8px; }
.mega-rail-updates li { color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.35; }
.mega-rail-updates ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.mega-rail-updates li { min-width: 0; }
.mega-menu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mega-action { min-width: 0; min-height: 34px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.mega-action span { margin-left: 4px; font-size: 13px; }
.mega-icon.is-shield { border: 0; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 92% 17%, 82% 77%, 50% 100%, 18% 77%, 8% 17%); }
.mega-icon.is-shield::before { inset: 2px; background: rgba(7,19,15,.98); clip-path: polygon(50% 0, 92% 17%, 82% 77%, 50% 100%, 18% 77%, 8% 17%); }
.mega-icon.is-shield::after { display: none; }

@media (max-width: 720px) {
    .site-header.menu-open .mega-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: none; }
    .site-header.menu-open .nav-menu-item.is-open > .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; }
}

.mobile-nav-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: transparent; color: inherit; padding: 8px 10px; border-radius: 6px; cursor: pointer; }

.button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 19px;
    color: #fff;
    background: var(--green-deep);
    font-size: 13px;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { background: #05683e; transform: translateY(-1px); }
.button.is-light { background: #fff; color: var(--green-deep); }
.button.is-light:hover { background: var(--lime); }
.button.is-outline { color: var(--ink); border-color: var(--line); background: transparent; }
.button.is-outline:hover { border-color: var(--green); color: var(--green-deep); background: #fff; }
.is-dark .button.is-outline, .hero-dark .button.is-outline { color: #fff; border-color: rgba(255,255,255,.25); }
.is-dark .button.is-outline:hover, .hero-dark .button.is-outline:hover { background: rgba(255,255,255,.1); color: #fff; }

.hero-dark {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--dark);
}
.hero-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 76% 35%, rgba(18,183,106,.23), transparent 32%), radial-gradient(circle at 15% 80%, rgba(59,110,91,.17), transparent 34%);
    pointer-events: none;
}
.hero-dark .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); align-items: center; gap: 60px; padding: 90px 0 110px; }
.hero-grid.security-hero-copy { grid-template-columns: 1fr; }
.hero-dark.security-hero { min-height: 0; display: block; padding: 92px 0 100px; }
.security-hero .hero-grid { padding: 0; }
.security-hero-copy .hero-copy { max-width: 760px; }
.hero-copy { max-width: 600px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--green-deep); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.hero-dark .eyebrow { color: var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(40px, 5.3vw, 76px); line-height: 1.04; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: 0; }
h3 { margin-bottom: 0; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.hero-copy h1 { margin-top: 24px; }
.hero-copy p { max-width: 580px; margin: 26px 0 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.hero-dark .hero-copy p { color: rgba(255,255,255,.7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 18px; color: var(--faint); font-size: 12px; }
.hero-dark .hero-note { color: rgba(255,255,255,.48); }

.hero-visual { position: relative; min-height: 420px; display: grid; place-items: center; }
.hero-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-visual-panel { position: relative; z-index: 1; width: min(460px, 90%); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: 0 24px 80px rgba(0,0,0,.3); padding: 18px; backdrop-filter: blur(12px); }
.hero-visual-panel::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 5px; background: var(--green); margin-bottom: 18px; }
.mock-toolbar { display: flex; justify-content: space-between; color: rgba(255,255,255,.58); font-size: 10px; }
.mock-toolbar strong { color: #fff; font-size: 13px; }
.mock-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; margin-top: 18px; }
.mock-box { min-height: 92px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(0,0,0,.16); padding: 12px; }
.mock-box.large { grid-row: span 2; min-height: 196px; }
.mock-label { color: rgba(255,255,255,.55); font-size: 10px; }
.mock-value { margin-top: 12px; color: #fff; font-size: 24px; font-weight: 850; }
.mock-bars { display: flex; align-items: end; gap: 5px; height: 90px; margin-top: 12px; }
.mock-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--green), rgba(18,183,106,.2)); }
.mock-bars i:nth-child(1) { height: 38%; }.mock-bars i:nth-child(2) { height: 55%; }.mock-bars i:nth-child(3) { height: 44%; }.mock-bars i:nth-child(4) { height: 75%; }.mock-bars i:nth-child(5) { height: 92%; }.mock-bars i:nth-child(6) { height: 68%; }

.section { padding: 112px 0; }
.section.is-dark { background: var(--dark); color: #fff; }
.section.is-white { background: #fff; }
.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head h2 { margin-top: 18px; }
.section-head p { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.is-dark .section-head p { color: rgba(255,255,255,.64); }
.section-head.center { margin-right: auto; margin-left: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.stat { min-height: 132px; display: grid; align-content: center; gap: 8px; padding: 20px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { font-size: 32px; letter-spacing: 0; }
.stat span { color: var(--muted); font-size: 12px; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.four > article { border-width: 2px; }
.feature-card, .scenario-card, .resource-card, .trust-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 28px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.feature-card { min-height: 230px; }
.feature-card:hover, .scenario-card:hover, .resource-card:hover, .trust-card:hover { border-color: rgba(18,183,106,.52); box-shadow: var(--shadow); }
.card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: #e4f7eb; color: var(--green-deep); font-size: 20px; font-weight: 900; }
.feature-card h3, .scenario-card h3, .resource-card h3 { margin-top: 22px; }
.feature-card p, .scenario-card p, .resource-card p, .trust-card p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.card-link { display: inline-flex; margin-top: 22px; color: var(--green-deep); font-size: 13px; font-weight: 800; }

.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 80px; }
.split.reverse > :first-child { order: 2; }
.split-copy h2 { margin-top: 18px; }
.split-copy > p { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; color: var(--ink); font-size: 14px; line-height: 1.65; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #dff7e8; color: var(--green-deep); font-size: 12px; font-weight: 900; }
.visual-panel { position: relative; min-height: 390px; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: var(--dark); box-shadow: var(--shadow); }
.visual-panel svg { width: 100%; height: 100%; min-height: 390px; display: block; margin: auto; object-fit: contain; object-position: center; }

.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: steps; }
.workflow-step { position: relative; min-height: 160px; padding: 0 28px 0 0; border-top: 2px solid var(--green); }
.workflow-step:not(:last-child)::after { content: "→"; position: absolute; top: -13px; right: auto; left: calc(100% - 13px); width: 26px; color: var(--green); font-size: 25px; line-height: 1; text-align: center; }
.workflow-step:not(:last-child):hover::after { animation: workflow-arrow-run .85s cubic-bezier(.22,.7,.25,1) both; }
@keyframes workflow-arrow-run {
    from { left: -13px; }
    to { left: calc(100% - 13px); }
}
.workflow-step + .workflow-step { padding-left: 28px; border-left: 1px solid var(--line); }
.workflow-step::before { counter-increment: steps; content: "0" counter(steps); display: block; margin-top: 18px; color: var(--green-deep); font-size: 12px; font-weight: 900; }
.workflow-step h3 { margin-top: 12px; font-size: 17px; }.workflow-step p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.dark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dark-card { min-height: 210px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.045); padding: 26px; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.dark-card:hover { border-color: rgba(183,237,201,.52); background: rgba(18,183,106,.08); }
.dark-card h3 { margin-top: 22px; color: #fff; }.dark-card p { margin: 12px 0 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.8; }
.dark-card .card-icon { background: rgba(183,237,201,.12); color: var(--lime); }

.banner-cta { position: relative; overflow: hidden; padding: 76px 0; background: var(--green-deep); color: #fff; }
.banner-cta::after { content: ""; position: absolute; width: 520px; height: 520px; right: -130px; top: -230px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.04), 0 0 0 120px rgba(255,255,255,.025); }
.banner-cta .container { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.banner-cta h2 { max-width: 670px; font-size: clamp(28px, 3.6vw, 46px); }.banner-cta p { margin: 16px 0 0; color: rgba(255,255,255,.72); font-size: 15px; }

.site-footer { padding: 64px 0 0; background: var(--dark); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .7fr); gap: 35px; padding-bottom: 54px; }
.footer-brand p { max-width: 330px; margin: 18px 0 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.8; }
.footer-column { display: grid; align-content: start; gap: 13px; }.footer-column strong { color: #fff; font-size: 12px; }.footer-column a { color: rgba(255,255,255,.56); font-size: 13px; }.footer-column a:hover { color: var(--lime); }
.footer-bottom { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-size: 11px; }

.sub-hero { position: relative; overflow: hidden; padding: 92px 0 100px; background: var(--dark); color: #fff; }
.sub-hero::after { content: ""; position: absolute; width: 600px; height: 600px; right: -180px; top: -250px; border: 1px solid rgba(183,237,201,.16); border-radius: 50%; box-shadow: 0 0 0 55px rgba(183,237,201,.035), 0 0 0 110px rgba(183,237,201,.02); }
.sub-hero .container { position: relative; z-index: 1; }.sub-hero h1 { max-width: 800px; margin-top: 22px; font-size: clamp(42px, 6vw, 72px); }.sub-hero p { max-width: 640px; margin: 24px 0 0; color: rgba(255,255,255,.66); font-size: 17px; line-height: 1.85; }
.sub-hero .hero-actions { margin-top: 30px; }

.page-intro { max-width: 720px; margin-bottom: 48px; }.page-intro h2 { margin-top: 16px; }.page-intro p { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.scenario-card { min-height: 280px; }.scenario-card .card-icon { width: 50px; height: 50px; font-size: 22px; }.scenario-meta { margin-top: 22px; color: var(--green-deep); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.case-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }.case-feature { min-height: 360px; position: relative; overflow: hidden; border-radius: 10px; background: var(--dark); color: #fff; padding: 38px; }.case-feature > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .78; }.case-feature > *:not(svg) { position: relative; z-index: 1; }.case-feature p { max-width: 450px; margin: 20px 0 0; color: rgba(255,255,255,.66); line-height: 1.8; }.case-side { display: grid; gap: 16px; }.case-stat { display: grid; align-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 28px; }.case-stat strong { color: var(--green-deep); font-size: 34px; }.case-stat span { margin-top: 8px; color: var(--muted); font-size: 13px; }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }.price-card { position: relative; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 32px; }.price-card.featured { border: 2px solid var(--green); box-shadow: 0 18px 45px rgba(18,183,106,.12); }.price-badge { position: absolute; right: 20px; top: 20px; border-radius: 4px; padding: 5px 8px; background: #dff7e8; color: var(--green-deep); font-size: 10px; font-weight: 850; }.price-card h3 { margin-top: 18px; }.price-card > p { min-height: 52px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.price { margin: 28px 0 0; font-size: 38px; font-weight: 850; letter-spacing: 0; }.price small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }.price-card .button { width: 100%; margin-top: 26px; }.price-card ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); list-style: none; }.price-card li { position: relative; padding-left: 23px; color: var(--muted); font-size: 13px; line-height: 1.5; }.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green-deep); font-weight: 900; }
.price-note { margin-top: 24px; color: var(--faint); font-size: 12px; line-height: 1.7; }

.faq-list { display: grid; gap: 10px; max-width: 850px; }.faq-item { border: 1px solid var(--line); border-radius: 7px; background: #fff; }.faq-item summary { cursor: pointer; list-style: none; padding: 20px 24px; font-size: 15px; font-weight: 800; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary::after { content: "+"; float: right; color: var(--green-deep); font-size: 20px; font-weight: 400; }.faq-item[open] summary::after { content: "−"; }.faq-answer { padding: 0 24px 22px; color: var(--muted); font-size: 14px; line-height: 1.85; }

.form-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }.form-copy h1 { margin-top: 18px; font-size: clamp(36px, 4.8vw, 62px); }.form-copy > p { margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }.contact-list { display: grid; gap: 16px; margin-top: 35px; }.contact-list div { display: grid; gap: 5px; }.contact-list strong { font-size: 13px; }.contact-list span { color: var(--muted); font-size: 13px; }
.lead-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 34px; box-shadow: var(--shadow); }.form-field { display: grid; gap: 8px; }.form-field.full { grid-column: 1 / -1; }.form-field label { color: var(--ink); font-size: 12px; font-weight: 800; }.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #ccd8d0; border-radius: 5px; background: #fff; color: var(--ink); padding: 12px 13px; outline: none; }.form-field textarea { min-height: 120px; resize: vertical; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18,183,106,.12); }.lead-form .button { border: 0; cursor: pointer; }.form-result { grid-column: 1 / -1; min-height: 20px; margin: 0; color: var(--green-deep); font-size: 13px; }
.lead-form > .button.full { grid-column: 1 / -1; }
.form-secondary-link { grid-column: 1 / -1; margin: -2px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.form-secondary-link a { color: var(--green-deep); font-weight: 800; text-underline-offset: 5px; }
.form-secondary-link a:hover { text-decoration: underline; }

.custom-select { position: relative; min-width: 0; }
.custom-select-native { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.custom-select-trigger { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #ccd8d0; border-radius: 5px; background: #fff; color: var(--ink); padding: 12px 13px; cursor: pointer; text-align: left; }
.custom-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-chevron { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.custom-select-trigger:hover, .custom-select.is-open .custom-select-trigger { border-color: #16814c; }
.custom-select-trigger:focus-visible { outline: 0; border-color: #16814c; box-shadow: 0 0 0 3px rgba(22,129,76,.12); }
.custom-select.is-open .custom-select-chevron { transform: rotate(180deg); }
.custom-select-menu { position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 20; display: grid; gap: 3px; max-height: 220px; overflow-y: auto; padding: 6px; border: 1px solid #cbd6ce; border-radius: 6px; background: #fff; box-shadow: 0 16px 34px rgba(24,34,28,.16); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.custom-select.is-open .custom-select-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-option { width: 100%; min-height: 38px; border: 0; border-radius: 4px; background: transparent; color: #304037; padding: 9px 10px; cursor: pointer; font-size: 13px; text-align: left; }
.custom-select-option:hover, .custom-select-option:focus-visible { outline: 0; background: #eaf8ef; color: #12683f; }
.custom-select-option.is-selected { background: #e4f4e9; color: #16814c; font-weight: 750; }
.section.is-white .custom-select-trigger { border-color: #cbd6ce; background: #fff; color: #18221c; }
.section.is-white .custom-select-option { color: #304037; }
.section.is-white .custom-select-option:hover, .section.is-white .custom-select-option:focus-visible { background: #eaf8ef; color: #12683f; }
.section.is-white .custom-select-option.is-selected { background: #e4f4e9; color: #16814c; }

.resource-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.resource-card { min-height: 220px; }.resource-tag { color: var(--green-deep); font-size: 11px; font-weight: 850; letter-spacing: .12em; }.resource-card .card-link { justify-content: space-between; width: 100%; border-top: 1px solid var(--line); padding-top: 16px; }
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.trust-card { min-height: 190px; }.trust-card h3 { margin-top: 18px; font-size: 17px; }
.quote { max-width: 800px; margin: 0 auto; text-align: center; }.quote blockquote { margin: 0; color: var(--ink); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.35; font-weight: 760; letter-spacing: 0; }.quote cite { display: block; margin-top: 22px; color: var(--muted); font-size: 13px; font-style: normal; }

.legal-note { border-left: 3px solid var(--green); padding: 14px 18px; background: #eaf8ef; color: var(--green-deep); font-size: 13px; line-height: 1.75; }

@media (max-width: 980px) {
    .site-header .container { gap: 18px; }.main-nav { gap: 13px; }.header-actions { gap: 6px; }.header-actions .button:first-child { display: none; }
    .hero-grid, .split, .form-layout { grid-template-columns: 1fr; gap: 45px; }.hero-grid { padding: 72px 0 85px; }.hero-visual { min-height: 380px; }.split.reverse > :first-child { order: initial; }
    .card-grid.four { grid-template-columns: repeat(2, 1fr); }.footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 720px) {
    .container { width: min(calc(100% - 32px), var(--max)); }.announcement { justify-content: flex-start; overflow: hidden; }.announcement a { width: 100%; justify-content: center; white-space: nowrap; font-size: 11px; }.announcement span { display: none; }
    .site-header { min-height: 68px; }.site-header .container { flex-wrap: wrap; }.main-nav, .header-actions { display: none; }.mobile-nav-toggle { display: block; }.site-header.menu-open { align-items: flex-start; padding-top: 17px; }.site-header.menu-open .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: max-content max-content max-content; align-content: start; align-items: center; gap: 0 18px; }.site-header.menu-open .brand { grid-column: 1; grid-row: 1; }.site-header.menu-open .mobile-nav-toggle { grid-column: 2; grid-row: 1; margin-left: 0; }.site-header.menu-open .main-nav, .site-header.menu-open .header-actions { grid-column: 1 / -1; width: 100%; min-width: 0; }.site-header.menu-open .main-nav { grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 12px 0 16px; border-top: 1px solid var(--line); }.site-header.menu-open .main-nav .nav-collapsed-link { display: none; }.site-header.is-dark.menu-open .main-nav { border-top-color: rgba(255,255,255,.12); }.main-nav a { padding: 10px 0; }.nav-menu-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 0; }.nav-menu-item > a { min-width: 0; }.mega-menu-toggle { width: 22px; height: 36px; justify-self: end; }.site-header.menu-open .mega-menu { position: static; grid-column: 1 / -1; width: auto; border: 0; box-shadow: none; background: transparent; }.site-header.menu-open .nav-menu-item.is-open > .mega-menu { display: block; }.site-header.menu-open .mega-menu-inner { width: auto; display: block; padding: 0 0 6px; }.site-header.menu-open .mega-menu-groups { grid-template-columns: 1fr; gap: 0; padding: 0 0 5px 12px; border-left: 1px solid rgba(183,237,201,.24); }.site-header.menu-open .mega-menu-groups.mega-solution-cards { gap: 8px; padding-left: 12px; }.site-header.menu-open .mega-solution-card { min-height: 0; display: grid; grid-template-columns: 30px 1fr auto; column-gap: 8px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(183,237,201,.14); background: transparent; }.site-header.menu-open .mega-solution-card::before, .site-header.menu-open .mega-solution-card::after { display: none; }.site-header.menu-open .mega-solution-card > strong { grid-column: 2; margin: 0; font-size: 12px; }.site-header.menu-open .mega-solution-card > small { grid-column: 2; margin: 3px 0 0; font-size: 10px; }.site-header.menu-open .mega-solution-index { grid-row: 1 / span 2; font-size: 10px; }.site-header.menu-open .mega-solution-tags { display: none; }.site-header.menu-open .mega-solution-card > b { grid-column: 3; grid-row: 1 / span 2; margin: 0; }.site-header.menu-open .mega-menu-group { gap: 5px; padding: 6px 0 9px; }.site-header.menu-open .mega-menu-group h3 { margin: 0 0 3px; font-size: 10px; }.site-header.menu-open .mega-menu-group a { min-height: 27px; font-size: 12px; }.site-header.menu-open .mega-icon { width: 15px; height: 15px; flex-basis: 15px; transform: scale(.82); transform-origin: left center; }.site-header.menu-open .mega-menu-rail { min-height: 0; display: block; border: 0; padding: 7px 0 8px 12px; background: transparent; }.site-header.menu-open .mega-menu-rail > strong, .site-header.menu-open .mega-menu-rail h3, .site-header.menu-open .mega-menu-rail p, .site-header.menu-open .mega-rail-visual, .site-header.menu-open .mega-rail-link, .site-header.menu-open .mega-rail-updates { display: none; }.site-header.menu-open .mega-menu-actions { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.site-header.menu-open .mega-action { min-height: 32px; padding: 0 9px; font-size: 11px; }.site-header.menu-open .mega-menu-footer { display: none; }.site-header.menu-open .header-actions { grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 0 16px; border-top: 1px solid var(--line); }.site-header.is-dark.menu-open .header-actions { border-top-color: rgba(255,255,255,.12); }.site-header.menu-open .header-actions .button, .site-header.menu-open .header-actions .button:first-child { display: inline-flex; width: 100%; }
    .site-header.menu-open .main-nav { margin-top: 10px; }
    h1 { font-size: clamp(36px, 12vw, 58px); }.hero-grid { padding: 58px 0 70px; }.hero-copy p { font-size: 15px; }.hero-visual { min-height: 320px; }.hero-visual-panel { width: 94%; }.mock-box.large { min-height: 160px; }.mock-grid { grid-template-columns: 1.1fr .9fr; }
    .section { padding: 76px 0; }.section-head { margin-bottom: 32px; }.stat-band { grid-template-columns: repeat(2, 1fr); }.stat { min-height: 108px; padding: 18px; }.stat:nth-child(2) { border-right: 0; }.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.stat strong { font-size: 27px; }
    .card-grid, .card-grid.four, .dark-grid, .security-grid, .price-grid, .resource-layout, .case-layout, .job-grid { grid-template-columns: 1fr; }.feature-card, .scenario-card, .resource-card { min-height: auto; }.job-card { padding: 22px; }.workflow { grid-template-columns: 1fr; gap: 22px; }.workflow-step, .workflow-step + .workflow-step { min-height: 0; padding: 0 0 22px 28px; border-top: 0; border-left: 2px solid var(--green); }.workflow-step:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -13px; left: -13px; transform: translateY(0); transition: transform .2s ease; }.workflow-step:not(:last-child):hover::after { animation: none; transform: translateY(7px); }.workflow-step::before { margin-top: 0; }.visual-panel, .visual-panel svg { min-height: 300px; }.banner-cta .container { display: grid; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding: 16px 0; }.sub-hero { padding: 68px 0 76px; }.sub-hero h1 { font-size: clamp(38px, 12vw, 58px); }.lead-form { grid-template-columns: 1fr; padding: 22px; }.form-field.full { grid-column: auto; }.form-result { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* Preserve the original dark brand direction while tightening typography and controls. */
:root {
    --ink: #eee8db;
    --muted: rgba(238, 232, 219, .66);
    --faint: rgba(238, 232, 219, .38);
    --line: rgba(238, 232, 219, .14);
    --paper: #070807;
    --white: #101411;
    --dark: #050605;
    --dark-soft: #0d1711;
    --green: #72e39a;
    --green-deep: #72e39a;
    --lime: #c7f4d4;
    --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

body, .official-page { background: var(--paper); color: var(--ink); }
.official-page { background: #070807; }
.announcement { min-height: 40px; background: rgba(114,227,154,.08); border-bottom: 1px solid rgba(114,227,154,.22); color: var(--ink); }
.announcement strong, .announcement b { color: var(--lime); }.announcement span { color: var(--muted); }
.site-header, .site-header.is-dark { background: rgba(7,8,7,.92); border-bottom-color: var(--line); color: var(--ink); backdrop-filter: blur(18px); }
.brand { width: 112px; height: 36px; display: block; overflow: hidden; background: url('/public/official/Image-3-white-green.png') center / contain no-repeat; font-size: 0; letter-spacing: 0; }
.brand > * { display: none; }.site-header .brand, .site-footer .brand { filter: none; }
.main-nav a, .site-header.is-dark .main-nav a { color: var(--muted); }.main-nav a:hover, .main-nav a[aria-current="page"], .site-header.is-dark .main-nav a:hover { color: var(--lime); }
.header-actions .button:first-child { display: inline-flex; }
.button { min-height: 44px; border-radius: 4px; padding: 0 20px; color: #070807; background: var(--ink); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0; }
.button:hover { background: var(--lime); color: #07100a; }.button.is-light { background: var(--ink); color: #070807; }.button.is-light:hover { background: var(--lime); }.button.is-outline, .is-dark .button.is-outline, .hero-dark .button.is-outline { border-color: rgba(238,232,219,.24); background: rgba(255,255,255,.02); color: var(--ink); }.button.is-outline:hover, .is-dark .button.is-outline:hover, .hero-dark .button.is-outline:hover { border-color: rgba(199,244,212,.6); background: rgba(114,227,154,.08); color: var(--lime); }
.hero-dark, .sub-hero { background: #050605; }.hero-dark::before { background: radial-gradient(circle at 78% 35%, rgba(114,227,154,.12), transparent 32%), radial-gradient(circle at 15% 80%, rgba(189,165,108,.08), transparent 34%); }.hero-copy p, .hero-dark .hero-copy p, .sub-hero p { color: var(--muted); }.hero-note, .hero-dark .hero-note { color: var(--faint); }
.eyebrow, .hero-dark .eyebrow { color: var(--lime); }.section, .section.is-white, .section.is-dark { background: transparent; color: var(--ink); }.section.is-dark { background: #050605; }.section-head p, .section-head p, .split-copy > p, .page-intro p { color: var(--muted); }
.stat-band { border-color: var(--line); background: rgba(255,255,255,.025); }.stat { border-color: var(--line); }.stat strong { color: var(--ink); }.stat span { color: var(--muted); }
.feature-card, .scenario-card, .resource-card, .trust-card, .price-card, .faq-item, .case-stat, .lead-form { border-color: var(--line); background: rgba(255,255,255,.045); box-shadow: none; }.feature-card:hover, .scenario-card:hover, .resource-card:hover, .trust-card:hover { border-color: rgba(114,227,154,.48); background: rgba(114,227,154,.06); box-shadow: none; }.card-icon { background: rgba(114,227,154,.1); color: var(--lime); }.feature-card p, .scenario-card p, .resource-card p, .trust-card p, .price-card > p, .faq-answer, .case-stat span { color: var(--muted); }.card-link, .resource-tag { color: var(--lime); }.check-list li { color: var(--ink); }.check-list li::before { background: rgba(114,227,154,.12); color: var(--lime); }
.visual-panel { background: #07130f; }.banner-cta { background: #102319; }.banner-cta p { color: var(--muted); }.footer-column a, .footer-brand p { color: var(--muted); }.footer-bottom { border-color: var(--line); color: var(--faint); }
.dark-card { border-color: var(--line); background: rgba(255,255,255,.045); }.dark-card:hover { border-color: rgba(114,227,154,.48); background: rgba(114,227,154,.07); }.dark-card p { color: var(--muted); }.dark-card .card-icon { background: rgba(114,227,154,.1); color: var(--lime); }
.workflow-step { border-color: var(--green); }.workflow-step + .workflow-step { border-color: var(--line); }.workflow-step::before { color: var(--lime); }.workflow-step p { color: var(--muted); }
.price-card.featured { border-color: var(--green); box-shadow: 0 18px 55px rgba(114,227,154,.08); }.price-badge { background: rgba(114,227,154,.12); color: var(--lime); }.price-card ul { border-color: var(--line); }.price-card li { color: var(--muted); }.price-card li::before { color: var(--lime); }.price-note { color: var(--faint); }
.faq-item summary { color: var(--ink); }.faq-item summary::after { color: var(--lime); }.form-copy > p, .contact-list span { color: var(--muted); }.form-field label { color: var(--ink); }.form-field input, .form-field select, .form-field textarea { border-color: var(--line); background: rgba(255,255,255,.06); color: var(--ink); }.form-field input::placeholder, .form-field textarea::placeholder { color: var(--faint); }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(114,227,154,.12); }.form-result { color: var(--lime); }.legal-note { background: rgba(114,227,154,.08); color: var(--lime); border-color: var(--green); }
.quote blockquote { color: var(--ink); }.quote cite { color: var(--muted); }

/* Use light bands for grouping while keeping the dark brand as the default canvas. */
.section.is-white {
    background: #fff;
    color: #18221c;
    border-top: 1px solid rgba(24, 34, 28, .06);
    border-bottom: 1px solid rgba(24, 34, 28, .06);
}
.section.is-white .section-head h2,
.section.is-white .split-copy h2,
.section.is-white .quote blockquote,
.section.is-white h3 { color: #18221c; }
.section.is-white .section-head p,
.section.is-white .page-intro p,
.section.is-white .split-copy > p,
.section.is-white .form-copy > p,
.section.is-white .workflow-step p,
.section.is-white .quote cite,
.section.is-white .price-note { color: #5d675f; }
.section.is-white .eyebrow { color: #16814c; }
.section.is-white .feature-card,
.section.is-white .scenario-card,
.section.is-white .resource-card,
.section.is-white .trust-card,
.section.is-white .price-card,
.section.is-white .faq-item,
.section.is-white .case-stat {
    border-color: #d7ddd6;
    background: #fff;
    box-shadow: 0 12px 30px rgba(24, 34, 28, .06);
}
.section.is-white .feature-card,
.section.is-white .scenario-card,
.section.is-white .resource-card,
.section.is-white .trust-card {
    border-width: 2px;
}
.section.is-white .feature-card:hover,
.section.is-white .scenario-card:hover,
.section.is-white .resource-card:hover,
.section.is-white .trust-card:hover {
    border-color: #16814c;
    background: #f3faf5;
    box-shadow: 0 16px 34px rgba(24, 34, 28, .1);
}
.section.is-white .feature-card p,
.section.is-white .scenario-card p,
.section.is-white .resource-card p,
.section.is-white .trust-card p,
.section.is-white .price-card > p,
.section.is-white .faq-answer,
.section.is-white .case-stat span,
.section.is-white .price-card li { color: #5d675f; }
.section.is-white .card-icon {
    background: #e4f4e9;
    color: #16814c;
}
.section.is-white .card-link,
.section.is-white .resource-tag,
.section.is-white .price-card li::before { color: #16814c; }
.section.is-white .price-card ul { border-color: #e1e5e0; }
.section.is-white .price-card.featured {
    border-color: #16814c;
    box-shadow: 0 18px 42px rgba(22, 129, 76, .14);
}
.section.is-white .price-badge {
    background: #e4f4e9;
    color: #16814c;
}
.section.is-white .workflow-step { border-color: #16814c; }
.section.is-white .workflow-step + .workflow-step { border-color: #c8d4cb; }
.section.is-white .workflow-step::before { color: #16814c; }
.section.is-white .check-list li { color: #26342b; }
.section.is-white .check-list li::before {
    background: #e4f4e9;
    color: #16814c;
}
.section.is-white .faq-item summary { color: #18221c; }
.section.is-white .faq-item summary::after { color: #16814c; }
.section.is-white .contact-list span { color: #5d675f; }
.section.is-white .stat span,
.section.is-white .legal-note { color: #5d675f; }
.section.is-white .form-field label { color: #18221c; }
.section.is-white .lead-form {
    border-color: #d7ddd6;
    background: #fff;
    box-shadow: 0 18px 45px rgba(24, 34, 28, .08);
}
.section.is-white .form-field input,
.section.is-white .form-field select,
.section.is-white .form-field textarea {
    border-color: #cbd6ce;
    background: #fff;
    color: #18221c;
}
.section.is-white .form-field input::placeholder,
.section.is-white .form-field textarea::placeholder { color: #7a857d; }
.section.is-white .form-field input:focus,
.section.is-white .form-field select:focus,
.section.is-white .form-field textarea:focus {
    border-color: #16814c;
    box-shadow: 0 0 0 3px rgba(22, 129, 76, .12);
}
.section.is-white .form-result { color: #16814c; }
.section.is-white .form-consent { color: #7a857d; }
.section.is-white .form-secondary-link { color: #5d675f; }
.section.is-white .form-secondary-link a { color: #16814c; }

.job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.job-card { display: flex; flex-direction: column; min-height: 100%; padding: 28px; border: 1px solid #d7ddd6; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(24, 34, 28, .06); }
.job-card:hover { border-color: #79bd92; box-shadow: 0 16px 34px rgba(24, 34, 28, .1); }
.job-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; color: #16814c; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.job-meta b { color: #7a857d; font-weight: 650; letter-spacing: 0; }
.job-card h3 { color: #18221c; font-size: 24px; }
.job-card > p { margin: 16px 0 0; color: #5d675f; font-size: 14px; line-height: 1.8; }
.job-card ul { display: grid; gap: 11px; margin: 22px 0 28px; padding: 20px 0 0 20px; border-top: 1px solid #e1e5e0; color: #5d675f; font-size: 13px; line-height: 1.65; }
.job-card li::marker { color: #16814c; }
.job-card .card-link { margin-top: auto; padding-top: 16px; border-top: 1px solid #e1e5e0; color: #16814c; }

.console-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }.console-window { position: relative; z-index: 1; width: min(540px, 94%); overflow: hidden; border: 1px solid rgba(238,232,219,.2); border-radius: 8px; background: rgba(12,20,15,.94); box-shadow: 0 30px 85px rgba(0,0,0,.45); }.console-bar { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 15px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 10px; }.console-bar strong { margin-right: auto; color: var(--muted); font-size: 11px; font-weight: 650; }.console-dots { display: flex; gap: 4px; }.console-dots i { width: 6px; height: 6px; display: block; border-radius: 50%; background: rgba(238,232,219,.3); }.console-dots i:first-child { background: #72e39a; }.console-layout { display: grid; grid-template-columns: 122px 1fr; min-height: 330px; }.console-sidebar { display: grid; align-content: start; gap: 4px; padding: 18px 11px; border-right: 1px solid var(--line); color: var(--faint); font-size: 10px; }.console-sidebar b { margin: 0 8px 13px; color: var(--ink); font-size: 11px; }.console-sidebar span { padding: 9px 8px; border-radius: 4px; }.console-sidebar .is-active { background: rgba(114,227,154,.12); color: var(--lime); }.console-content { min-width: 0; padding: 18px; }.console-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }.console-head div { display: grid; gap: 6px; }.console-head small, .console-tile small, .console-chart small { color: var(--faint); font-size: 10px; }.console-head strong { color: var(--ink); font-size: 17px; }.console-status { color: var(--lime); font-size: 10px; }.console-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }.console-tile { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 5px; padding: 12px 10px; }.console-tile strong { color: var(--ink); font-size: 21px; }.console-tile em { color: var(--lime); font-size: 9px; font-style: normal; }.console-chart { margin-top: 12px; border: 1px solid var(--line); border-radius: 5px; padding: 12px; }.console-chart > div { display: flex; justify-content: space-between; }.console-chart span { color: var(--faint); font-size: 10px; }.console-chart svg { width: 100%; height: 82px; margin-top: 8px; }.console-rows { display: grid; gap: 5px; margin-top: 12px; }.console-rows span { display: flex; justify-content: space-between; padding: 7px 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.console-rows b { color: var(--lime); font-weight: 650; }

.report-reading { max-width: 820px; }
.report-policy.section { padding: 72px 0 88px; }
.report-policy .section-head { margin-bottom: 38px; }
.report-policy .section-head h1 { margin-top: 18px; font-size: clamp(42px, 6vw, 64px); }
.section.is-white.report-policy { background: #fff; color: #18221c; }
.section.is-white.report-policy .section-head h1,
.section.is-white.report-policy .section-head h2,
.section.is-white.report-policy h2,
.section.is-white.report-policy h3 { color: #18221c; }
.section.is-white.report-policy .section-head p,
.section.is-white.report-policy > p { color: #4f5d54; }
.report-policy h2 { margin: 34px 0 12px; font-size: 24px; line-height: 1.3; }
.report-policy > p { margin: 0 0 16px; font-size: 15px; line-height: 1.9; }
.report-email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px; margin: 28px 0 0 !important; padding: 18px 20px; border-left: 3px solid var(--green-deep); background: #f3f8f4; }
.report-email strong { color: var(--ink); font-size: 13px; }
.report-email a { color: var(--green-deep); font-size: 20px; font-weight: 850; }
.report-email span { color: var(--muted); font-size: 13px; }
.report-reading .section-head { margin-bottom: 30px; }
.report-reading h3 { margin: 28px 0 10px; font-size: 18px; }
.report-reading > p { max-width: 760px; margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.report-reading .check-list { margin: 0 0 22px; }
.report-reading .legal-note { margin-top: 28px; }
.report-document { max-width: var(--max); padding-top: 12px; padding-bottom: 14px; color: #1b2820; }
.report-document header { padding-bottom: 34px; border-bottom: 1px solid #d6dfd8; }
.report-document header h2 { margin: 14px 0 14px; color: #14251b; font-size: 30px; line-height: 1.35; }
.report-document h1 { margin: 16px 0 18px; color: #14251b; font-size: clamp(40px, 5vw, 58px); line-height: 1.12; }
.report-document .report-lead { max-width: none; margin: 0; color: #4d5d52; font-size: 16px; line-height: 1.9; }
.report-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 25px; padding: 17px 20px; border-left: 4px solid #16814c; background: #eef6f0; }
.report-email span { color: #4d5d52; font-size: 13px; font-weight: 800; }
.report-email a { color: #126c40; font-size: 21px; font-weight: 850; }
.report-email strong { color: #5d6b61; font-size: 12px; font-weight: 650; }
.report-rule { padding: 30px 0; border-bottom: 1px solid #dfe6e0; }
.report-rule:last-child { border-bottom: 0; }
.report-rule h2 { margin: 0 0 12px; color: #14251b; font-size: 22px; line-height: 1.35; }
.report-rule p { max-width: none; margin: 0 0 13px; color: #4d5d52; font-size: 15px; line-height: 1.9; }
.report-rule ol { max-width: none; margin: 0; padding-left: 24px; color: #4d5d52; font-size: 15px; line-height: 1.9; }
.report-rule li { padding-left: 5px; }
.security-hero .hero-note a { color: var(--lime); }
.report-hero.hero-dark { height: 390px; min-height: 390px; padding: 54px 0; }
.report-hero .hero-copy { max-width: 760px; }
.report-hero .hero-copy h1 { margin-bottom: 22px; }
.report-hero .hero-note { margin-top: 0; font-size: 14px; line-height: 1.9; }
.report-hero .hero-note a { font-size: 18px; font-weight: 800; }
@media (max-width: 720px) { .report-hero.hero-dark { height: auto; min-height: 330px; padding: 52px 0 58px; } .report-hero .hero-copy h1 { font-size: 42px; } .report-document header { padding-bottom: 26px; } .report-rule { padding: 24px 0; } }
.report-brief.section { padding: 84px 0 96px; background: #fff; color: #18221c; }
.report-brief > .container { max-width: 980px; }
.brief-header { max-width: 760px; padding-bottom: 38px; border-bottom: 1px solid #d7ddd6; }
.brief-header h1 { margin: 16px 0 18px; color: #14251b; font-size: clamp(42px, 5vw, 64px); line-height: 1.1; }
.brief-header p { margin: 0 0 22px; color: #4f5d54; font-size: 17px; line-height: 1.85; }
.brief-email { display: inline-block; color: #126c40; font-size: 24px; font-weight: 850; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 38px 0; border-bottom: 1px solid #d7ddd6; }
.brief-grid h2 { margin: 0 0 14px; color: #14251b; font-size: 24px; }
.brief-grid p, .brief-grid ol, .brief-note { color: #4f5d54; font-size: 15px; line-height: 1.9; }
.brief-grid p { margin: 0; }.brief-grid ol { margin: 0; padding-left: 22px; }.brief-grid li { padding-left: 4px; }
.brief-note { max-width: 900px; margin: 30px 0 0; }
.brief-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.brief-sections section { padding: 30px 0; border-bottom: 1px solid #d7ddd6; }
.brief-sections h2 { margin: 0 0 12px; color: #14251b; font-size: 21px; }
.brief-sections p { margin: 0; color: #4f5d54; font-size: 15px; line-height: 1.9; }
@media (max-width: 720px) { .brief-grid { grid-template-columns: 1fr; gap: 30px; } .report-brief.section { padding: 58px 0 70px; } }
@media (max-width: 720px) { .brief-sections { grid-template-columns: 1fr; } }

@media (min-width: 981px) {
    .hero-visual .console-window { width: 100%; justify-self: end; }
}

.visual-panel { border: 1px solid rgba(183, 237, 201, .22); border-radius: 14px; transition: border-color .22s ease, box-shadow .22s ease; }
.visual-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(255,255,255,.08); border-radius: inherit; pointer-events: none; transition: border-color .22s ease; }
.visual-panel:hover,
.visual-panel:focus-within {
    border-color: rgba(114, 227, 154, .62);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3), 0 0 0 2px rgba(114, 227, 154, .08);
}
.visual-panel:hover::after,
.visual-panel:focus-within::after {
    border-color: rgba(199, 244, 212, .2);
}

@media (max-width: 720px) {
    .brand { width: 94px; height: 31px; }.header-actions .button:first-child { display: none; }.mobile-nav-toggle { border-color: var(--line); color: var(--ink); background: transparent; }.site-header.menu-open .main-nav { border-color: var(--line); }.console-window { width: 97%; }.console-layout { grid-template-columns: 92px 1fr; min-height: 300px; }.console-sidebar { padding: 14px 7px; font-size: 9px; }.console-sidebar span { padding: 8px 5px; }.console-content { padding: 13px 10px; }.console-tile { padding: 9px 7px; }.console-tile strong { font-size: 17px; }.console-tile em { font-size: 8px; }.console-head strong { font-size: 15px; }.console-status { font-size: 9px; }.console-rows { display: none; }
}

/* Final interaction and typography pass. */
h1, h2, h3, p { letter-spacing: 0; }
h1, h2, h3 { text-wrap: balance; word-break: keep-all; }
h1 { max-width: 900px; }
h2 { max-width: 820px; }
.sub-hero h1 { max-width: 780px; }
.section-head h2, .split-copy h2, .form-copy h1 { max-width: 760px; }
.section-head p, .page-intro p, .split-copy > p, .form-copy > p { max-width: 680px; line-height: 1.85; }
.section-head.center p { margin-right: auto; margin-left: auto; }
.eyebrow { display: none; }
.hero-copy h1, .sub-hero h1 { margin-top: 0; }
.footer-brand p { display: block; }
.button {
    min-height: 46px;
    min-width: 112px;
    border-radius: 5px;
    padding: 0 18px;
    gap: 10px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 750;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}
.button.is-outline { box-shadow: none; }
.button:hover { box-shadow: 0 11px 24px rgba(0, 0, 0, .2); }
.button.is-outline:hover { box-shadow: none; }
.inline-icon { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .2s ease; }
.button:hover .inline-icon, .card-link:hover .inline-icon { transform: translateX(3px); }
.card-link { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 750; line-height: 1.4; }
.card-link .inline-icon { width: 15px; height: 15px; flex: 0 0 15px; transition: transform .2s ease; }
.section.is-white .button { background: #18221c; color: #fff; }
.section.is-white .button:hover { background: #16814c; color: #fff; }
.section.is-white .button.is-outline { border-color: #b9c7bd; background: transparent; color: #18221c; }
.section.is-white .button.is-outline:hover { border-color: #16814c; background: #e4f4e9; color: #12683f; }
.section.is-white h1, .section.is-white h2, .section.is-white h3,
.section.is-white .price, .section.is-white .contact-list strong { color: #18221c; }
.section.is-white .price small { color: #5d675f; }
.section.is-white .form-copy .eyebrow { color: #16814c; }
.mobile-nav-toggle { min-width: 0; font-size: 12px; font-weight: 700; }

/* Low-contrast motion keeps dark areas alive without competing with content. */
.hero-dark, .sub-hero, .section.is-dark { isolation: isolate; }
.hero-dark::before, .sub-hero::after, .section.is-dark::before {
    background-image: repeating-linear-gradient(90deg, rgba(199,244,212,.055) 0, rgba(199,244,212,.055) 1px, transparent 1px, transparent 84px), repeating-linear-gradient(0deg, rgba(199,244,212,.04) 0, rgba(199,244,212,.04) 1px, transparent 1px, transparent 84px);
    background-size: 100% 100%, 100% 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: .28;
    pointer-events: none;
    animation: official-grid-drift 24s linear infinite;
}
.hero-dark::before { opacity: .22; }
.hero-dark::after, .sub-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: repeating-linear-gradient(116deg, transparent 0, transparent 118px, rgba(114,227,154,.055) 119px, transparent 120px);
    opacity: .32;
    pointer-events: none;
    animation: official-scan-drift 30s linear infinite;
}
.sub-hero::before, .sub-hero::after, .section.is-dark::before { z-index: 0; }
.sub-hero::after { inset: 0; width: auto; height: auto; right: 0; top: 0; z-index: 0; }
.section.is-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.section.is-dark > .container { position: relative; z-index: 1; }
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(90deg, rgba(199,244,212,.04) 0, rgba(199,244,212,.04) 1px, transparent 1px, transparent 100px); opacity: .22; animation: official-grid-drift 28s linear infinite; pointer-events: none; }
.site-footer > * { position: relative; z-index: 1; }
@keyframes official-grid-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-42px, 28px, 0); } }
@keyframes official-scan-drift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(3%, 2%, 0); } }
@media (prefers-reduced-motion: reduce) {
    .hero-dark::before, .hero-dark::after, .sub-hero::before, .sub-hero::after, .section.is-dark::before, .site-footer::before { animation: none; }
}

@media (max-width: 720px) {
    .button { min-height: 44px; min-width: 104px; padding: 0 15px; }
    .section-head p, .page-intro p, .split-copy > p, .form-copy > p { line-height: 1.78; }
    h1, h2, h3, .sub-hero h1 { max-width: 100%; overflow-wrap: break-word; word-break: normal; }
    h1, .sub-hero h1 { font-size: clamp(30px, 9vw, 36px); line-height: 1.16; }
    h2 { line-height: 1.2; }
    .form-copy, .lead-form, .form-field { width: 100%; min-width: 0; }
    .form-copy h1 { max-width: 100%; }
    .form-copy h1 .text-keep { white-space: normal; }
    .form-copy > p, .contact-list span { max-width: 100%; overflow-wrap: anywhere; word-break: normal; }
    .form-field input, .form-field select, .form-field textarea, .custom-select { min-width: 0; }
    .hero-copy, .sub-hero .container { max-width: 100%; }
    .sub-hero p, .hero-copy p { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; }
    .job-grid { grid-template-columns: 1fr; }
}

/* Keep banner motion quiet and consistent across the official pages. */
.announcement,
.hero-dark,
.sub-hero,
.banner-cta,
.section.is-dark {
    position: relative;
    isolation: isolate;
}

.announcement { overflow: hidden; }
.announcement::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28%;
    width: 24%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
    pointer-events: none;
    animation: official-banner-sheen 18s ease-in-out infinite;
}
.announcement > * { position: relative; z-index: 1; }

.hero-dark::before,
.sub-hero::before,
.banner-cta::before,
.section.is-dark::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 83px, rgba(199,244,212,.045) 84px, transparent 85px),
        repeating-linear-gradient(0deg, transparent 0, transparent 83px, rgba(199,244,212,.035) 84px, transparent 85px);
    opacity: .46;
    pointer-events: none;
    animation: official-banner-grid 30s linear infinite;
}

.hero-dark::after,
.sub-hero::after,
.banner-cta::after,
.section.is-dark::after {
    content: "";
    position: absolute;
    inset: -35% -12%;
    z-index: -1;
    background: repeating-linear-gradient(116deg, transparent 0, transparent 146px, rgba(114,227,154,.055) 147px, transparent 149px);
    opacity: .42;
    pointer-events: none;
    transform: rotate(-2deg);
    animation: official-banner-scan 36s ease-in-out infinite alternate;
}

.hero-dark .container,
.sub-hero .container,
.banner-cta .container,
.section.is-dark > .container { position: relative; z-index: 1; }

/* The SVG and its frame share one green surface; inner nodes use a lighter green plane. */
.visual-panel {
    --visual-bg: #0b2118;
    --visual-surface: #163d2c;
    background: var(--visual-bg);
    border-color: rgba(183,237,201,.3);
}
.visual-panel > svg {
    position: relative;
    z-index: 0;
    background: var(--visual-bg);
    border-radius: inherit;
}
.visual-panel > svg > rect:first-child { fill: var(--visual-bg); }
.visual-panel > svg [fill="#07130f"] { fill: var(--visual-surface); }
.visual-panel > svg [fill="#102d22"] { fill: var(--visual-surface); }

@keyframes official-banner-grid {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-42px, 28px, 0); }
}
@keyframes official-banner-scan {
    from { transform: translate3d(-3%, -1%, 0) rotate(-2deg); }
    to { transform: translate3d(3%, 1%, 0) rotate(-2deg); }
}
@keyframes official-banner-sheen {
    0%, 52% { transform: translateX(0); opacity: 0; }
    60% { opacity: 1; }
    78%, 100% { transform: translateX(570%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .announcement::after,
    .hero-dark::before,
    .hero-dark::after,
    .sub-hero::before,
    .sub-hero::after,
    .banner-cta::before,
    .banner-cta::after,
    .section.is-dark::before,
    .section.is-dark::after { animation: none; }
}

/* Large diagrams should support the hierarchy, not compete with the page copy. */
.visual-panel > svg,
.case-feature > svg,
.hero-visual > .console-backdrop {
    --diagram-accent: #5da978;
    --diagram-line: #86ad94;
    --diagram-soft: #9bbba5;
}
.visual-panel > svg [stroke="#12b76a"],
.case-feature > svg [stroke="#12b76a"],
.hero-visual > .console-backdrop [stroke="#12b76a"] { stroke: var(--diagram-accent); }
.visual-panel > svg [stroke="#b7edc9"],
.case-feature > svg [stroke="#b7edc9"],
.hero-visual > .console-backdrop [stroke="#b7edc9"] { stroke: var(--diagram-line); }
.visual-panel > svg [stroke="#72e39a"],
.case-feature > svg [stroke="#72e39a"],
.hero-visual > .console-backdrop [stroke="#72e39a"] { stroke: var(--diagram-soft); }
.visual-panel > svg [fill="#12b76a"],
.case-feature > svg [fill="#12b76a"],
.hero-visual > .console-backdrop [fill="#12b76a"] { fill: var(--diagram-accent); }
.visual-panel > svg [fill="#b7edc9"],
.case-feature > svg [fill="#b7edc9"],
.hero-visual > .console-backdrop [fill="#b7edc9"] { fill: var(--diagram-soft); }
.hero-visual > .console-backdrop [fill="#72e39a"] { fill: var(--diagram-soft); }

/* Diagram motion is interaction-driven. The page does not animate these areas by itself. */
.visual-panel > svg *,
.case-feature > svg *,
.hero-visual > .console-backdrop *,
.hero-visual-panel .mock-box,
.hero-visual-panel .mock-bars i { animation: none !important; }
.has-diagram-interaction .diagram-interactive {
    cursor: pointer;
    pointer-events: all;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease, stroke-width .2s ease;
}
.has-diagram-interaction .diagram-interactive.is-dimmed { opacity: .22; }
.has-diagram-interaction .diagram-interactive.is-hovered,
.has-diagram-interaction .diagram-interactive.is-active,
.has-diagram-interaction .diagram-interactive:focus-visible {
    opacity: 1;
    transform: none;
    stroke-width: revert;
}
.has-diagram-interaction .diagram-interactive:focus,
.has-diagram-interaction .diagram-interactive:focus-visible { outline: none !important; }

/* Give the remaining product diagrams distinct shapes instead of repeating hard cards. */
.visual-panel > svg[aria-label="站点分组示意图"] > g:nth-of-type(1) rect {
    rx: 24px;
    ry: 24px;
    stroke-dasharray: 2 8;
    opacity: .52;
}
.visual-panel > svg[aria-label="站点分组示意图"] > g:nth-of-type(2) rect {
    rx: 18px;
    ry: 18px;
}
.visual-panel > svg[aria-label="站点分组示意图"] > g:nth-of-type(2) {
    opacity: .88;
}
.visual-panel > svg[aria-label="内容任务看板示意图"] > g:nth-of-type(1) rect {
    rx: 22px;
    ry: 22px;
    opacity: .72;
}
.visual-panel > svg[aria-label="内容任务看板示意图"] > g:nth-of-type(3) rect {
    rx: 14px;
    ry: 14px;
}
.visual-panel > svg[aria-label="内容任务看板示意图"] > g:nth-of-type(1),
.visual-panel > svg[aria-label="内容任务看板示意图"] > g:nth-of-type(3) {
    opacity: .86;
}
.visual-panel > svg[aria-label="任务队列示意图"] > g:nth-of-type(1) rect {
    rx: 28px;
    ry: 28px;
    opacity: .82;
}
.visual-panel > svg[aria-label="任务队列示意图"] > g:nth-of-type(4) rect {
    rx: 15px;
    ry: 15px;
}
.visual-panel > svg[aria-label="任务队列示意图"] > g:nth-of-type(1) {
    opacity: .9;
}
.visual-panel > svg[aria-label="资源文档结构示意图"] > g:nth-of-type(1) rect {
    rx: 30px;
    ry: 30px;
    opacity: .82;
}
.visual-panel > svg[aria-label="资源文档结构示意图"] > g:nth-of-type(1) {
    transform: translateY(4px);
}
.visual-panel > svg[aria-label="资源文档结构示意图"] > g:nth-of-type(2) rect {
    rx: 3px;
    ry: 3px;
}

/* Rectangular diagrams share the same dark console surface as the homepage overview. */
.visual-panel {
    --visual-bg: #0c140f;
    --visual-surface: #14281d;
    background: var(--visual-bg);
}
.visual-panel > svg {
    background: var(--visual-bg);
}
.visual-panel > svg > rect:first-child { fill: var(--visual-bg); }

/* Keep the resources diagram at its authored ratio so document cards stay rectangular. */
.resource-visual {
    min-height: 0;
    aspect-ratio: 12 / 7;
}
.resource-visual > svg {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 12 / 7;
}

/* Every page hero gets a sparse arc field rather than a repeated texture. */
.hero-dark,
.sub-hero {
    background-color: #050605;
    background-image: none;
}
.hero-dark::before,
.sub-hero::before {
    inset: 0;
    z-index: 0;
    background: url("/public/official/hero-field.svg") center right / auto 100% no-repeat;
    opacity: .72;
    animation: official-arc-field 42s ease-in-out infinite alternate;
}
.hero-dark::after,
.sub-hero::after {
    inset: 0;
    z-index: 0;
    background: url("/public/official/hero-field.svg") 10% center / auto 100% no-repeat;
    opacity: .12;
    transform: none;
    animation: official-arc-field-secondary 54s ease-in-out infinite alternate;
}
.hero-dark .container,
.sub-hero .container { position: relative; z-index: 1; }
@keyframes official-arc-field {
    from { transform: translate3d(-1.5%, 0, 0); }
    to { transform: translate3d(1.5%, 0, 0); }
}
@keyframes official-arc-field-secondary {
    from { transform: translate3d(1%, 0, 0); }
    to { transform: translate3d(-1%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-dark::before,
    .hero-dark::after,
    .sub-hero::before,
    .sub-hero::after { animation: none; }
}

/* CTA bands use a stable surface; depth comes from the section edges, not moving light. */
.banner-cta {
    background: #102319;
    box-shadow: inset 0 1px rgba(199,244,212,.08), inset 0 -1px rgba(4,18,10,.32);
}
.banner-cta::before,
.banner-cta::after { content: none; }

/* Persistent ambient motion makes operational pages feel live without moving the content itself. */
.official-scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9998;
    height: 2px;
    background: #12b76a;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    will-change: transform;
}

.console-status,
.console-dots i:first-child { animation: official-status-pulse 2.6s ease-in-out infinite; }
.console-chart svg path:first-child {
    stroke-dasharray: 10 7;
    animation: official-flow-line 3.8s linear infinite;
}

.ambient-flow-path { animation: official-flow-line 5.5s linear infinite; }
.ambient-node {
    animation: official-node-pulse 3.4s ease-in-out var(--ambient-delay, 0s) infinite;
}
.has-interaction .ambient-node { animation-play-state: paused; }

.hero-dark::before,
.sub-hero::before { animation-duration: 20s; }
.hero-dark::after,
.sub-hero::after { animation-duration: 28s; }

@keyframes official-flow-line { to { stroke-dashoffset: -96; } }

@keyframes official-status-pulse {
    0%, 100% { opacity: .62; }
    50% { opacity: 1; }
}

@keyframes official-node-pulse {
    0%, 100% { opacity: .48; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .official-scroll-progress { display: none; }
    .console-status,
    .console-dots i:first-child,
    .console-chart svg path:first-child,
    .ambient-flow-path,
    .ambient-node { animation: none; }
}
.banner-cta::before {
    content: "S";
    position: absolute;
    top: 50%;
    right: 3%;
    z-index: 0;
    color: rgba(199,244,212,.045);
    font-family: Arial, sans-serif;
    font-size: 230px;
    font-weight: 900;
    line-height: .8;
    transform: translateY(-52%);
    pointer-events: none;
}
@media (max-width: 720px) {
    .hero-dark.security-hero { padding: 68px 0 76px; }
    .banner-cta::before { right: -8%; font-size: 150px; }
}

/* Text links reveal their underline on hover; the current navigation item keeps it visible. */
.main-nav a,
.footer-column a,
.footer-bottom a {
    position: relative;
    justify-self: start;
    transition: color .18s ease;
}
.main-nav a::after,
.footer-column a::after,
.footer-bottom a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .24s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"],
.footer-column a:hover,
.footer-column a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
    color: var(--lime);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after,
.footer-column a:hover::after,
.footer-column a:focus-visible::after,
.footer-bottom a:hover::after,
.footer-bottom a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.main-nav a:focus-visible,
.footer-column a:focus-visible,
.footer-bottom a:focus-visible {
    outline: 2px solid rgba(199, 244, 212, .55);
    outline-offset: 4px;
}
@media (max-width: 720px) {
    .site-header.menu-open .main-nav a::after { bottom: 3px; }
}

/* Complaint page uses a compact security header instead of the standard sub-page hero. */
.hero-dark.security-hero.report-hero {
    height: 390px;
    min-height: 390px;
    padding: 54px 0;
}
@media (max-width: 720px) {
    .hero-dark.security-hero.report-hero {
        height: auto;
        min-height: 330px;
        padding: 52px 0 58px;
    }
}

/* Keep every sub-page title field on one stable desktop baseline. */
.sub-hero,
.hero-dark.security-hero {
    height: 520px;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding: 70px 0;
}
.hero-dark.security-hero .hero-grid { width: 100%; }
.security-hero .hero-copy {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.security-hero .hero-copy p { margin-right: auto; margin-left: auto; }
.security-hero .eyebrow { justify-content: center; }
.security-hero .hero-actions { justify-content: center; }

/* Sub-page heroes share the centered title treatment; the homepage remains a two-column hero. */
.sub-hero .container {
    text-align: center;
}
.sub-hero h1,
.sub-hero p {
    margin-right: auto;
    margin-left: auto;
}
.sub-hero .hero-actions {
    justify-content: center;
}
@media (min-width: 1101px) {
    .sub-hero h1,
    .security-hero h1 {
        max-width: none;
        white-space: nowrap;
        font-size: clamp(42px, 5vw, 64px);
    }
    .security-hero .hero-copy {
        max-width: none;
    }
}
@media (max-width: 720px) {
    .sub-hero,
    .hero-dark.security-hero {
        height: auto;
        min-height: 430px;
        padding: 68px 0 76px;
    }
    .sub-hero h1,
    .hero-dark.security-hero h1 {
        overflow-wrap: break-word;
        word-break: normal;
        text-wrap: balance;
    }
    .sub-hero p,
    .hero-dark.security-hero p {
        overflow-wrap: break-word;
        word-break: normal;
    }
}

/* The commerce section is one continuous transaction flow, not a grid of feature cards. */
.commerce-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
    padding-top: 20px;
}
.commerce-flow::before {
    content: "";
    position: absolute;
    top: 46px;
    right: 12.5%;
    left: 12.5%;
    height: 1px;
    background: #b9d5c3;
}
.commerce-stage {
    position: relative;
    min-width: 0;
    padding: 0 28px;
    text-align: center;
}
.commerce-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #79a889;
    border-right: 1px solid #79a889;
    transform: rotate(45deg);
}
.commerce-stage-head {
    display: grid;
    justify-items: center;
    gap: 16px;
}
.commerce-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid #9fc8ad;
    border-radius: 50%;
    background: #fff;
    color: #16814c;
    box-shadow: 0 0 0 8px #fff;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.commerce-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.commerce-stage:hover .commerce-icon {
    border-color: #16814c;
    background: #16814c;
    color: #fff;
}
.commerce-kicker {
    color: #16814c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}
.commerce-stage h3 {
    margin-top: 18px;
    color: #18221c;
    font-size: 20px;
}
.commerce-stage p {
    max-width: 240px;
    margin: 12px auto 0;
    color: #5d675f;
    font-size: 13px;
    line-height: 1.75;
}

/* Pricing page */
.pricing-hero .pricing-hero-note { margin-top: 22px; color: var(--faint); font-size: 12px; }
.price-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.price-grid-four .price-card { display: flex; flex-direction: column; padding: 28px 24px; }
.plan-topline { min-height: 22px; }
.plan-label { color: var(--green-deep); font-size: 11px; font-weight: 800; letter-spacing: 0; }
.price-card .plan-topline + h3 { margin-top: 11px; }
.price-card .price { margin-top: 22px; font-size: 34px; white-space: nowrap; }
.price-card .price small { color: inherit; font-size: 18px; font-weight: 700; }
.price-card .price > span { color: var(--muted); font-size: 12px; font-weight: 500; }
.price-grid-four .price-card .button { margin-top: 20px; }
.price-grid-four .price-card ul { margin-top: 22px; }
.price-grid-four .price-card li { font-size: 12px; }
.price-grid-four .price-card.featured { transform: translateY(-8px); }
.pricing-included { background: #0b100c; }
.included-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.included-card { min-height: 230px; padding: 28px 24px; background: #0b100c; }
.included-number { display: block; margin-bottom: 32px; color: var(--green-deep); font-size: 11px; font-weight: 800; }
.included-card h3 { margin: 0; font-size: 17px; }
.included-card p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.pricing-source-note { margin: 18px 0 0; color: var(--faint); font-size: 12px; line-height: 1.75; }
.pricing-scenario-list { border-top: 1px solid #d7ddd6; }
.pricing-scenario { display: grid; grid-template-columns: 58px minmax(220px, .82fr) minmax(0, 1.18fr); column-gap: 26px; padding: 30px 0; border-bottom: 1px solid #d7ddd6; }
.scenario-index { display: grid; place-items: start center; width: 34px; height: 34px; border: 1px solid #9fc8ad; border-radius: 50%; color: #16814c; font-size: 11px; font-weight: 850; line-height: 1; padding-top: 10px; }
.scenario-type { display: block; color: #16814c; font-size: 11px; font-weight: 800; line-height: 1.45; }
.pricing-scenario h3 { margin: 8px 0 0; color: #18221c; font-size: 20px; }
.scenario-summary p { margin: 12px 0 0; color: #5d675f; font-size: 13px; line-height: 1.75; }
.scenario-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-content: start; margin: 0; padding: 2px 0 2px 28px; border-left: 1px solid #e1e7e1; }
.scenario-details div { display: grid; gap: 7px; }
.scenario-details dt { color: #18221c; font-size: 11px; font-weight: 800; }
.scenario-details dd { margin: 0; color: #5d675f; font-size: 12px; line-height: 1.75; }
.pricing-process { padding-bottom: 4px; }
.section.is-white .price-card .price > span { color: #5d675f; }
.section.is-white .price-card .price small { color: #18221c; }
.product-cta h2 {
    max-width: none;
    white-space: nowrap;
}
@media (max-width: 980px) {
    .price-grid-four, .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .price-grid-four .price-card.featured { transform: none; }
    .pricing-scenario { grid-template-columns: 48px minmax(0, 1fr); row-gap: 24px; }
    .scenario-details { grid-column: 2; padding: 20px 0 0; border-top: 1px solid #e1e7e1; border-left: 0; }
    .commerce-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 0; }
    .commerce-flow::before { content: none; }
    .commerce-stage:nth-child(2n + 1) { border-right: 1px solid #d7ddd6; }
    .commerce-stage:not(:last-child)::after { content: none; }
}
@media (max-width: 560px) {
    .price-grid-four, .included-grid { grid-template-columns: 1fr; }
    .price-grid-four .price-card { padding: 26px; }
    .included-card { min-height: 0; }
    .pricing-scenario { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 26px 0; }
    .pricing-scenario h3 { font-size: 18px; }
    .scenario-details { grid-template-columns: 1fr; grid-column: 1 / -1; gap: 16px; padding-top: 18px; }
    .product-cta h2 { white-space: normal; }
    .commerce-flow {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 4px 0 0 66px;
    }
    .commerce-flow::before {
        content: "";
        top: 28px;
        right: auto;
        bottom: 28px;
        left: 25px;
        width: 1px;
        height: auto;
    }
    .commerce-stage,
    .commerce-stage:nth-child(2n + 1) {
        min-height: 0;
        border-right: 0;
        padding: 0;
        text-align: left;
    }
    .commerce-stage-head {
        display: flex;
        justify-content: flex-start;
        gap: 16px;
    }
    .commerce-icon {
        position: absolute;
        top: 0;
        left: -66px;
        width: 50px;
        height: 50px;
        box-shadow: 0 0 0 7px #fff;
    }
    .commerce-kicker { padding-top: 17px; }
    .commerce-stage h3 { margin-top: 12px; }
    .commerce-stage p {
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }
}