/* DEEP STEED — light editorial base, electric cyan as the live accent.
   Cool paper canvas, near-black type, cyan for rules, dots, buttons, glows.
   Adjacent sections alternate three tones for depth:
     default section = cool paper  ·  section.dark = soft-cyan band  ·  section.light = white.
   Overlays shared/system.css (which is light-default). */

:root{
  --accent:#0790AD;        /* readable electric cyan — text, links, hairlines */
  --accent-bri:#22DDFF;    /* bright cyan — button fills, dots, glows */
  --ink:#0B1A20;           /* cool near-black */
  --paper:#EAF1F3;         /* default canvas: cool light */
  --white:#FFFFFF;
  --tint:#DAF0F7;          /* soft-cyan depth band (reuses .dark sections) */
  --tint-deep:#C4E6F0;     /* grid/borders inside a tint band */
  --card:#FFFFFF;
  --line:#CFDADD; --muted:#576B73;
  --fg:var(--ink); --bg:var(--paper);
}
body{background:var(--bg);color:var(--fg)}
::selection{background:rgba(7,144,173,.20);color:var(--ink)}

/* ---------- per-page accent (one color per vertical; cyan is the master brand) ---------- */
body.v-health{--accent:#0E9C8C;--accent-bri:#19D6C2;--tint:#D8F4EF;--tint-deep:#BEE9E1}
body.v-edu{--accent:#5350E0;--accent-bri:#7C79FF;--tint:#E8E8FD;--tint-deep:#D5D5F7}
body.v-hosp{--accent:#C2640F;--accent-bri:#FF9A2E;--tint:#FBEBD9;--tint-deep:#F6DAB8}
body.v-ecom{--accent:#B5308F;--accent-bri:#F25CCB;--tint:#FBE3F4;--tint-deep:#F5CCE9}

/* ---------- type ---------- */
.lede{color:#3A4A50}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)}
.accent{color:var(--accent)}
.mono{font-family:'IBM Plex Mono',monospace}
.eyebrow{color:var(--muted)}
.kicker p{color:#3A4A50}

/* ---------- header ---------- */
header{background:color-mix(in srgb,var(--paper) 88%,transparent);border-bottom:1px solid var(--line)}
.nav a:hover{color:var(--accent)}
.nav .cta{background:var(--accent-bri);color:#04252D;box-shadow:0 0 16px rgba(34,221,255,.35)}
.nav .cta:hover{filter:brightness(.96)}
.logo.img img{height:34px}

/* ---------- buttons ---------- */
.btn{border-color:#B7C6CB;color:var(--ink)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent-bri);border-color:var(--accent-bri);color:#04252D;box-shadow:0 0 20px rgba(34,221,255,.32)}
.btn.primary:hover{filter:brightness(.96);color:#04252D}
.bb-mnav a.m-cta{color:var(--accent)}

/* ---------- section rhythm ---------- */
/* .dark is reused across every page — here it renders as the soft-cyan DEPTH band, not black */
section.dark{background:var(--tint);color:var(--ink)}
section.dark .lede,section.dark .kicker p{color:#33474E}
section.dark .eyebrow{color:var(--muted)}
section.dark .eyebrow::before{background:radial-gradient(circle 6.5px at 6.5px 50%,var(--ink) 97%,transparent),radial-gradient(circle 6.5px at 19.5px 50%,var(--accent) 97%,transparent)}
section.dark .card{background:var(--white)}
section.dark .card p{color:#4A5960}
section.dark .grid{background:var(--tint-deep);border-color:var(--tint-deep)}
section.dark .stats{background:var(--tint-deep);border-color:var(--tint-deep)}
section.dark .stat{background:var(--white)}
section.dark .media{background:#CBE7F0}
section.dark .ph{background:#CBE7F0;border-color:var(--tint-deep)}
section.light{background:var(--white);color:var(--ink)}
.divider{background:var(--line)}

/* cards, doors, stats on light */
.card{background:var(--card)}
.card p{color:#4A5960}
.card:hover{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.door{background:var(--card)}
.door p{color:#4A5960}
.door:hover{background:var(--ink);color:#EAF7FA;box-shadow:inset 0 0 0 1px var(--accent),0 0 26px rgba(34,221,255,.20)}
.door:hover p{color:#BFD4DB}
.door:hover .go{color:var(--accent-bri)}
.stat b{color:var(--ink)}
.stat b .z,.stat b.z2::before{color:inherit}
.stat b.z2::before{content:"0"}

/* glowing hairlines */
.glow-rule{border:none;height:1px;background:linear-gradient(90deg,var(--accent),rgba(7,144,173,.1));box-shadow:0 0 10px rgba(34,221,255,.4);opacity:.8}
.grid,.stats{box-shadow:0 10px 30px rgba(11,26,32,.05)}

/* pulsing status dots */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent-bri);box-shadow:0 0 10px var(--accent-bri);animation:pulse 2.2s ease-in-out infinite;vertical-align:middle;margin-right:.55rem;flex:none}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 5px var(--accent-bri)}50%{opacity:.45;box-shadow:0 0 15px var(--accent-bri)}}
.status{font:500 .68rem/1.6 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center}

/* product frames */
.frame{border:1px solid var(--line);box-shadow:0 14px 40px rgba(11,26,32,.07);border-radius:8px;background:var(--white);padding:1.8rem}
.frame .bar{display:flex;gap:6px;margin-bottom:1.1rem}
.frame .bar i{width:8px;height:8px;border-radius:50%;background:#CDD8DB}
.frame .bar i:first-child{background:var(--accent-bri);box-shadow:0 0 8px var(--accent-bri)}

/* ---------- hero: cool paper + thin cyan grid + particle field ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tint) 0%,var(--paper) 74%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(11,26,32,.05) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,rgba(11,26,32,.05) 0 1px,transparent 1px 56px)}
.hero .wrap{position:relative;z-index:2}
canvas.steed-field{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* typed subline cursor */
[data-typed].typing::after{content:"▮";color:var(--accent);margin-left:2px;animation:steed-blink .9s steps(1) infinite}
@keyframes steed-blink{50%{opacity:0}}

/* ---------- scan-line section reveal (extends .bb-rv) ---------- */
section h2{position:relative}
html.bb-motion section h2.bb-rv::after{content:"";position:absolute;left:0;bottom:-14px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(7,144,173,.15) 55%,transparent);
  box-shadow:0 0 10px rgba(34,221,255,.35);transform:scaleX(0);transform-origin:left}
html.bb-motion section h2.bb-rv.bb-in::after{animation:steed-scan 1s cubic-bezier(.2,.7,.2,1) .1s forwards}
@keyframes steed-scan{to{transform:scaleX(1)}}

/* ---------- media & placeholders ---------- */
.media{background:#DCE8EB}
.media img{filter:grayscale(1) contrast(1.03)}
.media .cap{background:var(--paper);color:var(--muted)}
.ph{background:#DCE8EB;border-color:var(--line)}

/* ---------- listline (specs / FAQ rows) ---------- */
.listline{list-style:none;margin-top:2.4rem}
.listline li{padding:1.2rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:baseline}
.listline .no{font:500 .7rem 'IBM Plex Mono';color:var(--accent)}
.listline b{font:600 1rem 'Inter Tight';display:block;margin-bottom:.25rem}
.listline p{font-size:.9rem;color:#4A5960}

/* FAQ details */
details{border-bottom:1px solid var(--line);padding:.4rem 0}
summary{cursor:pointer;font:600 .95rem 'Inter Tight';padding:1rem 1.6rem 1rem 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:2px;top:.8rem;color:var(--accent);font-size:1.2rem}
details[open] summary::after{content:"–"}
details p{font-size:.9rem;color:#4A5960;padding:0 0 1.1rem;max-width:64ch}

/* pricing tiers */
.tier{background:var(--white);padding:2.2rem;position:relative;border:1px solid var(--line)}
.tier .price{font:700 clamp(2rem,4vw,2.8rem)/1 'Inter Tight';letter-spacing:-.03em;margin:.9rem 0 .3rem}
.tier .fmt{font:500 .66rem 'IBM Plex Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tier ul{list-style:none;margin:1.3rem 0 1.6rem;font-size:.88rem;color:#4A5960}
.tier ul li{padding:.34rem 0 .34rem 1.2rem;position:relative}
.tier ul li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.tier.pick{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 0 30px rgba(34,221,255,.14)}
.tier .flag{position:absolute;top:-11px;left:2.2rem;background:var(--accent-bri);color:#04252D;font:600 .62rem 'IBM Plex Mono';letter-spacing:.14em;text-transform:uppercase;padding:.25rem .7rem;border-radius:3px}

/* chips for capability tags */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.chip{font:500 .72rem 'IBM Plex Mono';letter-spacing:.06em;border:1px solid var(--line);border-radius:99px;padding:.45rem .9rem;color:#33474E;background:var(--white)}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* forms */
.form label{display:block;font:500 .64rem 'IBM Plex Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .4rem}
.form input,.form select,.form textarea{width:100%;background:var(--white);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:400 .95rem 'Inter';padding:.75rem .9rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 10px rgba(34,221,255,.25)}
.form .ok{display:none;text-align:center;padding:2rem 0}
.form .ok .dot{width:12px;height:12px}

/* footer */
footer.site ul{color:#4A5960}
footer.site a:hover{color:var(--accent)}
.outro b{color:var(--ink)}
.outro .glyph{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .dot{animation:none}
  [data-typed].typing::after{animation:none;content:""}
  html.bb-motion section h2.bb-rv::after{transform:none;animation:none}
}

/* ---------- services dropdown ---------- */
.nav li.has-menu{position:relative}
.nav .menu-trigger::after{content:"▾";font-size:.75em;margin-left:.35em;opacity:.7}
.nav li.has-menu::after{content:"";position:absolute;left:-1rem;right:-1rem;top:100%;height:1.2rem}
.nav .menu{position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);display:none;grid-template-columns:repeat(2,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.12);z-index:60;width:max-content;max-width:min(92vw,620px)}
.nav li.has-menu:hover .menu,.nav li.has-menu:focus-within .menu{display:grid}
.nav .menu a{display:block;padding:.85rem 1.1rem;background:var(--paper);color:var(--ink)}
.nav .menu a b{display:block;font:600 .84rem 'Inter Tight'}
.nav .menu a span{display:block;font:400 .68rem 'IBM Plex Mono';color:var(--muted);margin-top:.2rem}
.nav .menu a:hover{background:var(--tint);color:var(--ink)}
.nav .menu a:hover b{color:var(--accent)}
.nav .menu .menu-head{grid-column:1/-1;background:var(--paper);font:500 .62rem 'IBM Plex Mono';letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:.75rem 1.1rem .2rem;border-top:1px solid var(--line)}
.nav .menu a.sec{display:grid;grid-template-columns:36px 1fr;column-gap:.85rem;align-items:center;padding:.95rem 1.1rem}
.nav .menu a.sec .ico{grid-row:span 2;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,var(--paper));color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent)}
.nav .menu a.sec b{font-size:.9rem}
.nav .menu a.sec:hover{background:color-mix(in srgb,var(--c) 9%,var(--paper))}
.nav .menu a.sec:hover b{color:var(--c)}
.bb-mnav a{font-size:clamp(1.35rem,5.5vw,2rem)}

/* ---------- hero sector links ---------- */
.sector-row{margin-top:2.2rem}
.sector-row-label{display:block;font:500 .62rem 'IBM Plex Mono';letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.sector-links{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media(max-width:900px){.sector-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sector-links{grid-template-columns:1fr}}
.sector-link{display:grid;grid-template-columns:10px 1fr;column-gap:.7rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--line);border-radius:6px;background:color-mix(in srgb,var(--white) 70%,transparent);transition:.2s}
.sector-link i{grid-row:span 2;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.sector-link b{font:600 .86rem 'Inter Tight';color:var(--ink)}
.sector-link span{font:400 .66rem 'IBM Plex Mono';color:var(--muted)}
.sector-link:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--white));transform:translateY(-2px)}
.sector-link:hover b{color:var(--c)}

/* ---------- portfolio access ---------- */
.footer-portfolio{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:1.6rem 1.8rem;margin-bottom:2.4rem;border:1px solid var(--line);border-radius:8px;background:var(--tint)}
@media(max-width:800px){.footer-portfolio{grid-template-columns:1fr}}
.footer-portfolio h4{font:700 .95rem 'Inter Tight';margin-bottom:.4rem}
.footer-portfolio p{font:400 .84rem/1.55 'Inter';color:#4A4948;max-width:48ch}
.portfolio-form.compact .fields{display:grid;grid-template-columns:1.3fr 1fr auto;gap:.6rem;align-items:center}
@media(max-width:600px){.portfolio-form.compact .fields{grid-template-columns:1fr}}
.portfolio-form.compact input,.portfolio-form.compact select{padding:.65rem .8rem;font-size:.86rem}
.portfolio-form.compact .btn{padding:.7rem 1rem;white-space:nowrap}
.portfolio-form button.btn{cursor:pointer;font-family:'Inter';border:1px solid var(--accent-bri)}
.form .btns .btn{cursor:pointer}

/* ---------- direct answer + faq ---------- */
section.direct{padding:2.2rem 0 0}
.direct-answer{font-size:1.02rem;max-width:68ch;border-left:3px solid var(--accent);padding-left:1.1rem;color:#2A3A40}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font:600 1rem 'Inter Tight';cursor:pointer;list-style:none;position:relative;padding-right:2rem}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin-top:.6rem;max-width:70ch;color:#4A4948}