:root{--navy:#0B2A4A;--navy2:#173F6B;--gold:#F4B400;--ink:#1b2437;--mute:#5b667a;--bg:#f6f8fb;--card:#fff;--line:#dfe5ee;--ok:#1a7f4b;--r:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#e8edf6;--mute:#9aa8c0;--bg:#0c1426;--card:#142038;--line:#243452}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--navy2)}@media (prefers-color-scheme:dark){a{color:#8fb4ff}}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
header.site{background:var(--navy);color:#fff;position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.06em;font-size:20px}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav a{color:#cfdcf5;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:15px}
nav a:hover,nav a[aria-current]{background:rgba(255,255,255,.12);color:#fff}
.hero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:64px 0 72px}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.12;margin:0 0 14px;max-width:18ch}
.hero p{font-size:18px;color:#d5e1f8;max-width:56ch;margin:0 0 26px}
.btn{display:inline-block;background:var(--gold);color:#1a1a1a;font-weight:700;padding:12px 22px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;font-size:16px}
.btn:hover{filter:brightness(1.07)}.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);margin-left:8px}
.btn.dl{background:var(--navy);color:#fff}
section{padding:48px 0}section h2{font-size:28px;margin:0 0 6px}.lead{color:var(--mute);margin:0 0 26px;max-width:62ch}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{margin:0 0 6px;font-size:17px}.card p{margin:0;color:var(--mute);font-size:15px}
.ico{width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:800;margin-bottom:12px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:#e7eefc;color:#25437c;margin-right:6px}
.pill.fix{background:#e3f5ea;color:#1a6b40}.pill.feature{background:#fff2c9;color:#7a5a00}.pill.security{background:#fde4e4;color:#912121}
@media (prefers-color-scheme:dark){.pill{background:#233a66;color:#bcd0ff}.pill.fix{background:#183a2a;color:#9fe3bd}.pill.feature{background:#463a10;color:#ffd95a}.pill.security{background:#4a1f1f;color:#ffb3b3}}
.rel{border-left:4px solid var(--gold);padding:4px 0 4px 18px;margin:0 0 28px}
.rel h3{margin:0 0 2px}.rel .meta{color:var(--mute);font-size:14px;margin-bottom:8px}.rel ul{margin:8px 0 0;padding-left:20px}
.dlrow{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line)}
.dlrow:first-child{border-top:0}.dlrow small{color:var(--mute);display:block;word-break:break-all}
ol.steps{padding-left:22px}ol.steps li{margin:8px 0}
.note{background:#fff8e1;border:1px solid #f0d98a;border-radius:10px;padding:12px 16px;color:#5b4700;font-size:15px}
@media (prefers-color-scheme:dark){.note{background:#3a3010;border-color:#6b5a1a;color:#ffe58a}}
code{background:rgba(120,140,180,.18);padding:1px 6px;border-radius:5px;font-size:.92em}
footer{background:var(--navy);color:#9db2d8;padding:28px 0;font-size:14px;margin-top:30px}footer a{color:#cfdcf5}
.badge{display:inline-block;background:rgba(255,255,255,.14);padding:4px 12px;border-radius:99px;font-size:14px;margin-bottom:16px}
/* ---- Hive Flow / product-first ---- */
:root{--orange:#F7931E;--blue:#2F5F94}
.hero2{background:radial-gradient(1200px 500px at 80% 0,#2a5a8a 0,transparent 60%),linear-gradient(160deg,var(--navy),#082038);color:#fff;padding:56px 0 40px;overflow:hidden}
.hero2 .wrap{display:grid;gap:24px;grid-template-columns:1.1fr .9fr;align-items:center}
.eyebrow{color:var(--gold);font-weight:700;letter-spacing:.14em;font-size:13px;text-transform:uppercase;margin:0 0 8px}
.hero2 h1{font-size:clamp(40px,7vw,72px);line-height:1;margin:0 0 10px;letter-spacing:-.01em}
.hero2 h1 span{color:var(--gold)}
.hero2 .sub{font-size:20px;color:#dbe6fb;margin:0 0 8px;max-width:30ch}
.hero2 p.tag{color:#a8bde3;margin:0 0 26px;font-style:italic}
.hero2 .btn.ghost{margin-left:8px}
#heroart{width:100%;height:auto;display:block}
@media (max-width:760px){.hero2 .wrap{grid-template-columns:1fr}#heroart{max-width:340px;margin:0 auto}}
.bee{animation:bob 4s ease-in-out infinite;transform-box:fill-box}
@keyframes bob{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-8px)}}
.flow{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.flow button{border:1.5px solid var(--line);background:var(--card);color:var(--ink);padding:9px 18px;border-radius:99px;font:600 15px system-ui;cursor:pointer}
.flow button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.flow button i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.flowbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
#hive{width:100%;height:auto;display:block}
#hive .cell{transition:opacity .25s}#hive .dim{opacity:.22}
#hive text{font-family:system-ui,sans-serif;pointer-events:none}
.flowmsg{margin:12px 4px 2px;color:var(--mute);min-height:3.2em}
.flowlist{display:none}
@media (max-width:640px){#hive{display:none}.flowlist{display:grid;gap:12px;margin-top:6px}.flow{display:none}.flowmsg{display:none}}
.flowlist .card h3{display:flex;align-items:center;gap:8px}.flowlist .card i{width:12px;height:12px;border-radius:3px;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.dot,.bee{display:none;animation:none}}
.journey{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;counter-reset:j;margin-top:8px}
.journey li{list-style:none;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:12px;padding:12px;font-size:14px;position:relative}
.journey li:not(:last-child)::after{content:"\203A";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:26px;font-weight:700;z-index:2}
.journey b{display:block;margin-bottom:2px;font-size:15px}.journey span{color:var(--mute)}
@media (max-width:860px){.journey{grid-template-columns:1fr 1fr}.journey li::after{display:none}}
.family{display:grid;gap:16px;grid-template-columns:1.2fr 1fr 1fr}
.family .star{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;border:0}.family .star p{color:#cfdcf5}.family .star h3{color:var(--gold)}
@media (max-width:760px){.family{grid-template-columns:1fr}}
/* ---- company home + image backgrounds ---- */
.brand small{font-weight:600;font-size:11px;letter-spacing:.2em;color:#9db2d8;margin-left:2px;align-self:flex-end;padding-bottom:3px}
@media (max-width:520px){.brand small{display:none}}
.hero-co{background:#eaf1fa url(img/hero-home.webp) 85% center/cover no-repeat;position:relative;color:var(--navy)}
.hero-co::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.88) 0,rgba(255,255,255,.72) 36%,rgba(255,255,255,0) 66%)}
.hero-co .wrap{position:relative;padding-top:72px;padding-bottom:80px}
.hero-co img.logo{width:min(440px,86%);height:auto;display:block;margin:0 0 20px}
.hero-co h1{font-size:clamp(28px,4.4vw,44px);line-height:1.1;margin:0 0 10px;color:var(--navy)}
.hero-co p{font-size:20px;max-width:34ch;margin:0 0 24px;color:#2a3b59}
.btn.dark{background:var(--navy);color:#fff}.btn.outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);margin-left:8px}
@media (max-width:640px){.hero-co::before{background:rgba(255,255,255,.88)}.btn.outline{margin:10px 0 0}}
.imgsec{position:relative;color:#fff;background-size:cover;background-position:center}
.imgsec::before{content:"";position:absolute;inset:0;background:var(--ov,rgba(11,42,74,.82))}
.imgsec>.wrap{position:relative}
.imgsec h2{color:#fff}.imgsec .lead{color:#d5e1f8}.imgsec a{color:var(--gold)}
.fp{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.fp h2{font-size:clamp(32px,5vw,52px);margin:4px 0 8px}.fp h2 span{color:var(--gold)}
.chips{display:flex;flex-direction:column;gap:10px}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:12px 16px;backdrop-filter:blur(2px)}
.chip b{display:flex;align-items:center;gap:8px}.chip i{width:12px;height:12px;border-radius:3px;transform:rotate(45deg)}.chip span{font-size:14px;color:#d5e1f8}
@media (max-width:760px){.fp{grid-template-columns:1fr}}
.contact{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.contact .card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff}.contact .card p{color:#d5e1f8}.contact .card a{font-weight:700;font-size:18px;word-break:break-all}
.hero2.img{background:linear-gradient(90deg,rgba(11,42,74,.97) 0,rgba(11,42,74,.9) 40%,rgba(11,42,74,.55) 100%),url(img/hero-cmp.webp) center/cover}
.flowsec h2{color:#fff}.flowsec .lead{color:#d5e1f8}
.flowsec .flow button{background:rgba(255,255,255,.92);color:#0B2A4A}.flowsec .flow button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1a1a1a}
.imgsec a.btn{color:#1a1a1a}.imgsec a.btn.ghost{color:#fff}
header.site .wrap{min-height:72px}

.prod{display:grid;gap:16px;grid-template-columns:1.2fr 1fr 1fr;align-items:stretch}
.prod .card h3{margin:8px 0 4px}.prod .card>p{color:var(--mute);margin:0 0 10px}
.prod .card.star{border:2px solid var(--gold)}
ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.ticks li{position:relative;padding-left:24px;font-size:15px}
ul.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);border-radius:2px}
@media (max-width:900px){.prod{grid-template-columns:1fr}}

#hive .hx{cursor:pointer;transition:filter .2s}#hive .hx:hover,#hive .hx:focus{filter:brightness(1.12);outline:none}#hive .hx.sel{stroke:#0B2A4A;stroke-width:6}
.flowmsg{display:grid;gap:8px;min-height:7em}.flowmsg .cdet{display:block;background:#f3f6fa;border-left:4px solid var(--gold);border-radius:8px;padding:10px 14px;color:var(--ink)}.flowmsg .cdet.hint{background:none;border:0;padding:0;font-style:italic}

.flowsec .flowbox{background:radial-gradient(900px 500px at 50% 45%,rgba(60,40,0,.55),rgba(6,22,40,.92));border-color:rgba(244,180,0,.4)}
.flowsec .flowmsg{color:#d5e1f8}.flowsec .flowmsg .cdet{background:rgba(255,255,255,.08);color:#fff}
#hive .hx.sel{stroke:#fff;stroke-width:4}#hive .hx:hover,#hive .hx:focus{filter:url(#glow) brightness(1.25)}

#hive .hxg .pop{transition:opacity .2s}#hive .hxg.hot .pop{opacity:.15}
#hive .hxg.sel .hxp{stroke:#fff;stroke-width:4}#hive .hx:hover,#hive .hx:focus{filter:none;outline:none}
#hive .lift{transition:transform .22s cubic-bezier(.2,.8,.3,1.2);transform-box:fill-box;transform-origin:center}
#hive .lift.go{transform:translate(var(--dx),var(--dy)) scale(1.2)}
#hive .lift .hxp{stroke:#FFD54A;stroke-width:3.5}
.hxtip{position:absolute;z-index:5;background:rgba(6,22,40,.96);color:#e8effc;border:1px solid rgba(244,180,0,.55);border-left:5px solid var(--gold);border-radius:10px;padding:12px 14px;box-shadow:0 8px 26px rgba(0,0,0,.45);pointer-events:none;font-size:14px;line-height:1.45}
.hxtip strong{display:block;color:#FFD54A;font-size:16px;margin-bottom:4px}
@media (prefers-reduced-motion:reduce){#hive .lift{transition:none}}