/* ============================================================
   Cliniqi marketing site - design system v2 "clinical light"
   Brand: Cliniqi (product) · PrimeStack (company, footer only)
   Light-first: airy whites, aurora washes, emerald accent.
   ============================================================ */

:root{
  --ink:#0f1f18; --ink-2:#31443b; --muted:#5d6f66; --faint:#8da399;
  --paper:#fdfdfb; --tint:#f4f6f1; --hairline:#e5eae3;
  --emerald:#10b981; --deep:#0c8a66; --bright:#37d6a0;
  --wash:#ecf8f2; --wash-2:#def2e8; --wash-line:#cfe9dc; --mint:#b7f0dc;
  --cover:#0d1b14; --cover-2:#13251b; --cover-line:#24382d;
  /* aurora + bento tints */
  --aur-mint:#dcf5e9; --aur-sky:#def0f5; --aur-cream:#f9f1e2; --aur-lilac:#edeaf8;
  --t-mint:#eaf8f1; --t-mint-l:#d3eee0;
  --t-sky:#e9f3f7; --t-sky-l:#d3e7ef;
  --t-sand:#f8f3e9; --t-sand-l:#ece0c9;
  --t-lilac:#f0edf9; --t-lilac-l:#ddd7ef;
  --t-rose:#f9eeee; --t-rose-l:#eed8d8;
  --t-sage:#eff5ea; --t-sage-l:#dce8d2;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:Inter,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rad:20px; --rad-sm:14px;
  --shadow:0 8px 26px rgba(15,31,24,.07);
  --shadow-lg:0 24px 60px -12px rgba(15,31,24,.14);
  --glow:0 18px 50px -12px rgba(16,185,129,.28);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:-.022em; line-height:1.06; margin:0 0 .42em}
h1{font-size:clamp(38px,6.2vw,74px)}
h2{font-size:clamp(29px,4vw,46px)}
h3{font-size:clamp(19px,2vw,23px); line-height:1.2}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.6vw,20px); line-height:1.58; color:var(--ink-2)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:clamp(60px,8.5vw,116px) 0; position:relative}
.section--tint{background:var(--tint)}
.section--wash{background:linear-gradient(180deg,var(--wash),var(--paper))}
.hr{height:1px;background:var(--hairline);border:0;margin:0}

/* serif italic accent inside display type */
h1 em,h2 em{font-style:italic; color:var(--deep)}
.grad-text{
  background:linear-gradient(115deg,var(--deep) 10%,var(--emerald) 55%,#2fae83 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--deep); margin:0 0 16px; display:flex; align-items:center; gap:10px;
}
.kicker::before{content:''; width:22px; height:2px; background:var(--emerald); border-radius:2px; flex:none}
.kicker--bare::before{display:none}
.secnum{font-family:var(--serif); font-size:clamp(44px,6vw,76px); line-height:.8; color:var(--wash-2); font-weight:600; letter-spacing:-.02em; user-select:none}
@media (max-width:680px){ .secnum{display:none} }
@media (max-width:640px){ h1 br, h2 br{display:none} }
.grid2>*, .grid3>*, .grid4>*, .split>*{min-width:0}

/* ---------------- aurora atmosphere ----------------
   A positioned parent gets .has-aurora; .aurora sits behind content. */
.has-aurora{position:relative; overflow:hidden}
.aurora{position:absolute; inset:0; pointer-events:none; z-index:0}
.has-aurora>.wrap{position:relative; z-index:1}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.75}
.blob--mint{background:var(--aur-mint)}
.blob--sky{background:var(--aur-sky); opacity:.55}
.blob--cream{background:var(--aur-cream)}
.blob--lilac{background:var(--aur-lilac)}
/* fine emerald dot grid, barely there */
.dots{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(rgba(12,138,102,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 34%, #000, transparent 78%);
  mask-image:radial-gradient(75% 60% at 50% 34%, #000, transparent 78%);
}

/* AI chip */
.aib{
  display:inline-block; background:var(--mint); color:#0a5f47; border-radius:6px; padding:1px 7px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.07em; vertical-align:2px; margin-left:7px;
}
.pill{display:inline-block;background:var(--mint);color:#0a5f47;border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill--line{background:transparent;border:1px solid var(--wash-line);color:var(--deep)}

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(253,253,251,.8);
  backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s;
}
.nav.is-scrolled{border-bottom-color:var(--hairline); background:rgba(253,253,251,.92)}
.nav__in{max-width:var(--maxw); margin:0 auto; padding:0 24px; height:70px; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none !important}
.brand__name{font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.brand__by{font-family:var(--mono); font-weight:500; color:var(--faint); font-size:9px; letter-spacing:.16em; margin-left:8px; text-transform:uppercase}
.nav__links{display:flex; align-items:center; gap:8px; margin-left:auto}
.nav__links>a{color:var(--ink-2); font-size:14.5px; font-weight:500; text-decoration:none; padding:7px 13px; border-radius:999px; transition:background .2s,color .2s}
.nav__links>a:not(.nav__cta):hover{color:var(--deep); background:var(--wash)}
.nav__links>a.is-active{color:var(--deep); background:var(--wash)}
/* the CTA keeps its gradient on hover - the generic pill hover must never wash it out */
.nav__links>a.nav__cta:hover{background:linear-gradient(135deg,#12c48b,var(--deep))}
.nav__cta{
  margin-left:8px; background:linear-gradient(135deg,#12c48b,var(--deep)); color:#fff !important; padding:10px 20px; border-radius:999px;
  font-size:14px; font-weight:600; text-decoration:none !important; transition:box-shadow .25s, transform .2s;
  box-shadow:0 6px 18px -6px rgba(16,185,129,.45);
}
.nav__cta:hover{transform:translateY(-1px); box-shadow:var(--glow)}

/* modules dropdown */
.dd{position:relative}
.dd__btn{
  display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:var(--ink-2); font-family:var(--sans); font-size:14.5px; font-weight:500; padding:7px 13px; border-radius:999px;
  transition:background .2s,color .2s;
}
.dd__btn:hover{color:var(--deep); background:var(--wash)}
.dd__btn svg{transition:transform .2s}
.dd.is-open .dd__btn svg{transform:rotate(180deg)}
.dd__menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--hairline); border-radius:var(--rad-sm); box-shadow:var(--shadow-lg);
  padding:10px; display:grid; grid-template-columns:repeat(2,224px); gap:2px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.dd__menu::before{content:''; position:absolute; left:0; right:0; top:-18px; height:18px}
.dd.is-open .dd__menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.dd__menu a{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px; text-decoration:none !important}
.dd__menu a:hover{background:var(--wash)}
.dd__menu .t{font-size:13.5px; font-weight:600; color:var(--ink); display:block; line-height:1.3}
.dd__menu .s{font-size:11.5px; color:var(--muted); line-height:1.35; display:block; margin-top:1px}
.dd__menu .n{font-family:var(--mono); font-size:9.5px; color:var(--deep); letter-spacing:.08em; margin-top:3px}

/* mobile */
.nav__burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px}
.nav__burger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .25s, opacity .25s}
.mnav{display:none}
@media (max-width:960px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .mnav{
    display:block; position:fixed; inset:70px 0 0 0; z-index:59; background:var(--paper);
    padding:18px 24px; overflow:auto; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .mnav.is-open{opacity:1; pointer-events:auto; transform:none}
  .mnav a{display:block; padding:13px 4px; font-size:17px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline)}
  .mnav .sub{font-size:14.5px; font-weight:500; color:var(--ink-2); padding-left:16px}
  .mnav .grp{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--deep); padding:16px 4px 6px}
  body.mnav-open{overflow:hidden}
  .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.is-open span:nth-child(2){opacity:0}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------------- legacy dark panel ----------------
   Kept dark + readable for any page not yet migrated to the light system.
   New pages should not add .dark sections. */
.dark{
  position:relative; color:#f5f2ea; background:
    radial-gradient(120% 75% at 88% -8%, rgba(16,185,129,.22), rgba(16,185,129,0) 55%),
    radial-gradient(85% 55% at -12% 108%, rgba(12,138,102,.18), rgba(12,138,102,0) 55%),
    var(--cover);
}
.dark h1,.dark h2,.dark h3{color:#f7f4ec}
.dark .lead{color:#c6d5cc}
.dark .muted{color:#8fa89b}
.dark .kicker{color:var(--bright)}
.dark .kicker::before{background:var(--bright)}
.dark em{font-style:italic; color:var(--bright)}
.dark a{color:var(--bright)}
.dark .cap{color:#93ac9f}
.dark .jdot{box-shadow:0 0 0 4px var(--cover)}
.dark .jstep p{color:#93ac9f}

/* ---------------- hero (light) ---------------- */
.hero{padding:clamp(66px,8.5vw,120px) 0 clamp(46px,5.5vw,80px)}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--deep); margin:0 0 22px; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.72); border:1px solid var(--wash-line);
  box-shadow:0 4px 14px -6px rgba(16,185,129,.25);
}
.hero .eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 4px rgba(16,185,129,.15); animation:heartbeat 2.2s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)} 12%{transform:scale(1.35)} 24%{transform:scale(1)}}
.hero .sub{max-width:600px}
.hero .taglist{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:2.1; margin:18px 0 0}
.hero .taglist b{color:var(--emerald); font-weight:500; padding:0 6px}

/* page hero (inner pages), light */
.phero{padding:clamp(52px,6.5vw,92px) 0 clamp(40px,5vw,64px)}
.phero .crumb{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 16px}
.phero .crumb a{color:var(--muted); text-decoration:none}
.phero .crumb a:hover{color:var(--deep)}
.phero .lead{max-width:720px}
/* not-yet-migrated pages still say class="dark phero"; keep their crumbs readable */
.dark.phero .crumb{color:#8fa89b}
.dark.phero .crumb a{color:#a9cdbc}
.dark.phero .crumb a:hover{color:var(--bright)}

/* stats: light stat chips */
.stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(30px,4vw,48px)}
.stat{
  background:rgba(255,255,255,.78); border:1px solid var(--hairline); border-radius:16px;
  padding:16px 22px 13px; min-width:128px; box-shadow:0 6px 20px -10px rgba(15,31,24,.10);
}
.stat b{display:block; font-family:var(--serif); font-weight:500; font-size:clamp(26px,2.8vw,36px); line-height:1; color:var(--deep); margin-bottom:6px}
.stat > span{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
@media (max-width:640px){ .stats{display:grid; grid-template-columns:1fr 1fr; gap:12px} .stat{min-width:0} }
/* legacy dark-band stats keep their old look */
.dark .stats{border-top:1px solid var(--cover-line); padding-top:clamp(20px,3vw,30px); gap:clamp(28px,5vw,64px)}
.dark .stat{background:transparent; border:0; border-radius:0; padding:0; box-shadow:none}
.dark .stat b{color:#fff}
.dark .stat > span{color:#8fa89b}

/* ECG line - draws itself when .in */
.ecg path{stroke-dasharray:600; stroke-dashoffset:600}
.ecg.in path{animation:ecgdraw 2.1s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes ecgdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .ecg path{stroke-dasharray:none; stroke-dashoffset:0} .ecg.in path{animation:none} }

/* ---------------- screenshot window ---------------- */
.window{
  border:1px solid var(--hairline); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 2px 6px rgba(15,31,24,.04), var(--shadow);
}
.window .bar{height:28px; background:linear-gradient(180deg,#fbfcfa,#f2f5f0); border-bottom:1px solid var(--hairline); display:flex; align-items:center; gap:6px; padding:0 12px}
.window .bar i{width:8px; height:8px; border-radius:50%; background:#dde3da}
.window .bar .url{margin-left:8px; font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.04em}
.window img{width:100%}
.window--dark{border-color:rgba(255,255,255,.12); box-shadow:0 16px 44px rgba(0,0,0,.5)}
.window--dark .bar{background:#1c2a23; border-bottom-color:#263831}
.window--dark .bar i{background:#3c5348}
.window--dark .bar .url{color:#6e857a}
.window--glow{box-shadow:0 30px 80px -20px rgba(16,185,129,.3), var(--shadow-lg)}
.cap{font-size:13px; color:var(--muted); margin:12px 2px 0}

/* shot hover zoom */
.window .shotwrap{overflow:hidden}
.window .shotwrap img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.window:hover .shotwrap img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){ .window:hover .shotwrap img{transform:none} }

/* ---------------- cards & lists ---------------- */
.card{border:1px solid var(--hairline); border-radius:var(--rad); padding:28px 30px; background:#fff; box-shadow:0 2px 10px -6px rgba(15,31,24,.06)}
.card--wash{background:var(--wash); border-color:var(--wash-line); box-shadow:none}
.card--tint{background:var(--tint); border-color:var(--hairline); box-shadow:none}
.card--glass{background:rgba(255,255,255,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.card h3{margin-bottom:8px}
.sub-line{font-size:14px; color:var(--muted); margin:-4px 0 14px}
ul.bul{margin:12px 0 0; padding-left:20px}
ul.bul li{margin:0 0 10px; padding-left:4px}
ul.bul li::marker{color:var(--emerald)}
ul.bul b,ul.bul strong{font-weight:600}

/* grids */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:960px){ .grid3,.grid4{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid2,.grid3,.grid4{grid-template-columns:1fr} }

/* split: text + window */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,4.5vw,60px); align-items:center}
.split--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.split--flip .split__text{order:2}
.split--flip .split__media{order:1}
@media (max-width:900px){
  .split,.split--flip{grid-template-columns:1fr}
  .split--flip .split__text{order:1}
  .split--flip .split__media{order:2}
}

/* ---------------- bento (suite) ----------------
   12-col asymmetric grid. .btile--lg carries a screenshot. */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.btile{
  position:relative; display:flex; flex-direction:column; grid-column:span 3;
  border:1px solid var(--hairline); border-radius:var(--rad); padding:22px 22px 20px;
  background:#fff; text-decoration:none !important; color:var(--ink); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s, border-color .3s;
}
.btile:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.btile--lg{grid-column:span 6; grid-row:span 2; padding-bottom:0}
.btile .n{font-family:var(--mono); font-size:10.5px; color:var(--deep); letter-spacing:.12em; margin-bottom:12px}
.btile b{display:block; font-size:17px; font-weight:650; letter-spacing:-.01em; margin:0 0 6px}
.btile p{font-size:13.5px; line-height:1.5; color:var(--muted); margin:0}
.btile .go{
  margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:11px; color:var(--deep);
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s;
}
.btile:hover .go{opacity:1; transform:none}
@media (hover:none){ .btile .go{opacity:1; transform:none} }
.btile--lg .shot{
  flex:1; min-height:220px; margin:18px -1px -1px; border-radius:14px 14px 0 0; overflow:hidden;
  border:1px solid var(--hairline); border-bottom:0; box-shadow:0 -4px 24px -12px rgba(15,31,24,.14);
}
.btile--lg .shot img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block; transform:translateY(0); transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.btile--lg:hover .shot img{transform:translateY(-4px)}
/* tinted tiles */
.btile--mint{background:linear-gradient(160deg,var(--t-mint),#fff 80%); border-color:var(--t-mint-l)}
.btile--sky{background:linear-gradient(160deg,var(--t-sky),#fff 80%); border-color:var(--t-sky-l)}
.btile--sand{background:linear-gradient(160deg,var(--t-sand),#fff 80%); border-color:var(--t-sand-l)}
.btile--lilac{background:linear-gradient(160deg,var(--t-lilac),#fff 80%); border-color:var(--t-lilac-l)}
.btile--rose{background:linear-gradient(160deg,var(--t-rose),#fff 80%); border-color:var(--t-rose-l)}
.btile--sage{background:linear-gradient(160deg,var(--t-sage),#fff 80%); border-color:var(--t-sage-l)}
@media (max-width:1020px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .btile{grid-column:span 3}
  .btile--lg{grid-column:span 6; grid-row:auto}
  .btile--lg .shot{flex:none; height:250px; min-height:0}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .btile,.btile--lg{grid-column:span 1}
  .btile--lg .shot{height:200px}
}

/* legacy module grid (still used on some pages) */
.modgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1020px){ .modgrid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .modgrid{grid-template-columns:1fr} }
.mod{
  position:relative; display:block; border:1px solid var(--wash-line); background:var(--wash);
  border-radius:var(--rad); padding:20px 20px 48px; text-decoration:none !important; color:var(--ink);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.mod:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--emerald)}
.mod .mtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.mod .n{font-family:var(--mono); font-size:11px; color:var(--deep); letter-spacing:.1em}
.mod b{display:block; font-size:16.5px; margin:0 0 5px; font-weight:650; letter-spacing:-.01em}
.mod p{font-size:13.5px; line-height:1.5; color:var(--muted); margin:0}
.mod .go{
  position:absolute; right:16px; bottom:14px; font-family:var(--mono); font-size:11px; color:var(--deep);
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s;
}
.mod:hover .go{opacity:1; transform:none}
@media (hover:none){ .mod .go{opacity:1; transform:none} }

/* journey ribbon */
.journey{display:flex; margin-top:26px}
.jstep{flex:1; border-top:2px solid var(--wash-line); padding:16px 14px 0 0; min-width:0}
.jdot{display:block; width:11px; height:11px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px var(--paper), 0 0 12px rgba(16,185,129,.5); margin:-23px 0 10px}
.jstep b{display:block; font-size:14.5px; font-weight:650; margin-bottom:3px}
.jstep p{font-size:12.5px; line-height:1.45; color:var(--muted); margin:0}
@media (max-width:820px){ .journey{flex-direction:column; border-left:2px solid var(--wash-line); margin-left:5px}
  .jstep{border-top:0; padding:0 0 18px 18px}
  .jdot{margin:0 0 8px -24px} }

/* numbered flow */
.flow{display:flex; margin-top:30px}
.step{flex:1; border-top:2px solid var(--wash-line); padding:0 14px 0 0; min-width:0}
.k{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#12c48b,var(--deep)); color:#fff; font-family:var(--mono); font-size:13px; margin:-17px 0 12px;
  box-shadow:0 0 0 5px var(--paper), 0 6px 14px -4px rgba(16,185,129,.4);
}
.k--soft{background:var(--wash-2); color:var(--deep); box-shadow:0 0 0 5px var(--paper)}
.step b{display:block; font-size:15px; font-weight:650; margin-bottom:4px}
.step p{font-size:13px; line-height:1.5; color:var(--muted); margin:0}
@media (max-width:820px){ .flow{flex-direction:column; gap:0; border-left:2px solid var(--wash-line); margin-left:8px}
  .step{border-top:0; padding:0 0 20px 20px}
  .k{margin:0 0 8px -37px} }

/* feature rows on module pages */
.frow{padding:clamp(36px,5vw,64px) 0; border-top:1px solid var(--hairline)}
.frow:first-of-type{border-top:0}

/* quote */
.quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.8vw,21px); line-height:1.5; color:var(--ink-2);
  position:relative; padding-left:24px; margin:22px 0 0;
}
.quote::before{content:'\201C'; font-family:var(--serif); font-style:normal; font-size:44px; line-height:1; color:var(--emerald); position:absolute; left:0; top:-4px}

/* ---------------- marquee ---------------- */
.marquee{overflow:hidden; position:relative; padding:22px 0}
.marquee__track{display:flex; gap:26px; width:max-content; animation:marq 48s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee .window{width:430px; flex:none; transition:transform .4s cubic-bezier(.2,.6,.2,1)}
.marquee .window:nth-child(odd){transform:rotate(-1.1deg)}
.marquee .window:nth-child(even){transform:rotate(1.1deg) translateY(8px)}
.marquee .window:hover{transform:rotate(0) translateY(-4px); box-shadow:var(--shadow-lg)}
.marquee .window img{height:266px; object-fit:cover; object-position:top}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} .marquee{overflow-x:auto} .marquee .window{transform:none !important} }
@media (max-width:640px){ .marquee .window{width:320px} }

/* ---------------- reveals ---------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
.reveal[data-d="6"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ---------------- scribe hero demo (light glass) ---------------- */
.scribe{
  border:1px solid var(--hairline); border-radius:var(--rad); overflow:hidden;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -10px rgba(15,31,24,.10), 0 34px 90px -30px rgba(16,185,129,.30);
}
.scribe__bar{display:flex; align-items:center; gap:10px; padding:13px 16px; background:linear-gradient(180deg,#fdfefd,#f4f8f5); border-bottom:1px solid var(--hairline)}
.scribe__mic{width:10px; height:10px; border-radius:50%; background:var(--emerald); position:relative; flex:none}
.scribe__mic::after{content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(16,185,129,.45); animation:pulse 1.6s ease-out infinite}
.scribe__mic.done::after{animation:none; opacity:0}
.scribe__mic.done{background:#9fc4b4}
@keyframes pulse{0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.5);opacity:0}}
.scribe__label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--deep)}
.scribe__wave{display:flex; gap:3px; align-items:center; margin-left:auto; height:16px}
.scribe__wave i{width:3px; border-radius:2px; background:var(--emerald); height:5px; animation:wv 1s ease-in-out infinite}
.scribe__wave i:nth-child(2){animation-delay:.12s} .scribe__wave i:nth-child(3){animation-delay:.24s}
.scribe__wave i:nth-child(4){animation-delay:.36s} .scribe__wave i:nth-child(5){animation-delay:.48s}
@keyframes wv{0%,100%{height:4px} 50%{height:15px}}
.scribe.done .scribe__wave i{animation:none; height:4px; background:var(--wash-line)}
.scribe__t{min-height:74px; padding:16px 18px 8px; font-size:15.5px; line-height:1.65; color:var(--ink-2)}
.scribe__t .caret{display:inline-block; width:2px; height:1.05em; background:var(--emerald); vertical-align:-2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.scribe__fields{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 18px 18px}
.sf{border:1px solid var(--hairline); border-radius:12px; padding:9px 12px; background:#fbfcfa; transition:border-color .4s, background .4s, box-shadow .4s}
.sf .l{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:3px}
.sf .v{font-size:13.5px; color:#c3cfc8; transition:color .4s}
.sf.filled{border-color:var(--wash-line); background:var(--wash); box-shadow:0 4px 12px -6px rgba(16,185,129,.25)}
.sf.filled .v{color:var(--ink)}
.sf.filled .l{color:var(--deep)}
@media (max-width:640px){ .scribe__fields{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .scribe__mic::after,.scribe__wave i{animation:none}
}

/* floating UI fragments around the hero media */
.heromedia{position:relative}
.floatchip{
  position:absolute; z-index:2; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hairline); border-radius:14px; padding:10px 14px;
  box-shadow:0 14px 34px -12px rgba(15,31,24,.18);
  animation:floaty 7s ease-in-out infinite;
}
.floatchip .ic{
  width:26px; height:26px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;
  background:var(--wash-2); color:var(--deep); font-size:13px;
}
.floatchip .tx{line-height:1.25}
.floatchip .tx b{display:block; font-size:12px; font-weight:650; color:var(--ink); letter-spacing:-.01em}
.floatchip .tx span{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.floatchip--1{top:-26px; right:-18px}
.floatchip--2{bottom:64px; left:-48px; animation-delay:1.6s; animation-duration:8s}
.floatchip--3{bottom:16px; right:-26px; animation-delay:3s; animation-duration:6.4s}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
@media (max-width:1120px){ .floatchip--2{left:-10px} .floatchip--1{right:-6px} }
@media (max-width:900px){ .floatchip{display:none} }
@media (prefers-reduced-motion:reduce){ .floatchip{animation:none} }

/* ---------------- ask (reports on demand) ---------------- */
.ask{border:1px solid var(--hairline); border-radius:var(--rad); overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.askbar{background:linear-gradient(135deg,#132518,#0d1b14); color:#fff; padding:14px 16px; font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:10px}
.askbar .mic{width:9px; height:9px; border-radius:50%; background:var(--bright); flex:none}
.askt{width:100%; border-collapse:collapse; font-size:14px}
.askt th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; padding:12px 16px 6px}
.askt td{padding:9px 16px; border-top:1px solid var(--tint)}
.askt .up{color:var(--deep); font-weight:600}
.askt tr{opacity:1}
.ask.animate .askt tr.row{opacity:.35; transform:translateY(6px)}
.ask.animate.play .askt tr.row{opacity:1; transform:none; transition:opacity .5s, transform .5s}
.ask.animate.play .askt tr.row:nth-child(2){transition-delay:.15s}
.ask.animate.play .askt tr.row:nth-child(3){transition-delay:.3s}
.ask.animate.play .askt tr.row:nth-child(4){transition-delay:.45s}
.askfoot{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--tint); flex-wrap:wrap}
@media (max-width:560px){
  .askbar{font-size:12.5px; padding:12px 12px}
  .askt{font-size:12px}
  .askt td{padding:8px 10px}
  .askt th{padding:10px 10px 5px}
}
.askchip{background:var(--wash); color:var(--deep); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600}

/* ---------------- feature panel (light gradient container) ---------------- */
.panel{
  position:relative; overflow:hidden; border-radius:calc(var(--rad) + 8px);
  border:1px solid var(--wash-line);
  background:
    radial-gradient(90% 90% at 90% -10%, rgba(16,185,129,.12), rgba(16,185,129,0) 55%),
    radial-gradient(70% 80% at -8% 110%, rgba(222,240,245,.8), rgba(222,240,245,0) 60%),
    linear-gradient(180deg,#ffffff,#f3faf6);
  padding:clamp(30px,4.5vw,56px);
}
.panel--tight{padding:clamp(24px,3vw,38px)}

/* ---------------- CTA band (light glow) ---------------- */
.ctaband{border-radius:calc(var(--rad) + 8px); padding:clamp(36px,5vw,60px); overflow:hidden; position:relative}
.ctaband:not(.dark){
  border:1px solid var(--wash-line);
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(55,214,160,.25), rgba(55,214,160,0) 55%),
    radial-gradient(70% 110% at 8% 100%, rgba(222,240,245,.9), rgba(222,240,245,0) 60%),
    linear-gradient(160deg,#f2fbf6,#e8f7f0);
  box-shadow:0 30px 80px -30px rgba(16,185,129,.35);
}
.ctaband h2{margin-bottom:10px}
.ctaband .in{position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,4vw,56px); align-items:center}
@media (max-width:820px){ .ctaband .in{grid-template-columns:1fr} }

/* buttons */
.btn{
  display:inline-block; background:linear-gradient(135deg,#12c48b,var(--deep)); color:#fff !important; padding:14px 28px; border-radius:999px;
  font-size:15.5px; font-weight:700; text-decoration:none !important; transition:transform .2s, box-shadow .25s; border:0; cursor:pointer; font-family:var(--sans);
  box-shadow:0 10px 26px -10px rgba(16,185,129,.5);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--glow)}
.btn--ghost{background:rgba(255,255,255,.75); color:var(--ink) !important; border:1px solid var(--hairline); box-shadow:none; font-weight:600}
.btn--ghost:hover{box-shadow:var(--shadow); border-color:var(--wash-line); color:var(--deep) !important}
.dark .btn--ghost{background:transparent; color:#e7f1ea !important; border:1px solid #3a5346}
.dark .btn--ghost:hover{box-shadow:none; border-color:var(--bright); color:var(--bright) !important}
.btn--ink{background:var(--ink); color:#fff !important; box-shadow:0 10px 26px -12px rgba(15,31,24,.4)}
.btn--ink:hover{box-shadow:0 12px 30px -10px rgba(15,31,24,.35); background:var(--deep)}

/* ---------------- footer (light) ---------------- */
.footer{margin-top:clamp(24px,4vw,56px); border-top:1px solid var(--hairline); background:linear-gradient(180deg,var(--paper),var(--tint)); position:relative; overflow:hidden}
.footer .top{display:grid; grid-template-columns:1.4fr 1.5fr 1fr; gap:32px; padding:clamp(44px,6vw,68px) 0 36px; position:relative; z-index:1}
.footer .modcols{columns:2; column-gap:28px}
.footer .modcols li{break-inside:avoid}
@media (max-width:560px){ .footer .modcols{columns:1} }
@media (max-width:900px){ .footer .top{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer .top{grid-template-columns:1fr} }
.footer h4{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--deep); margin:0 0 14px}
.footer a{color:var(--ink-2); text-decoration:none; font-size:14px}
.footer a:hover{color:var(--deep)}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin:0 0 9px}
.footer .blurb{color:var(--muted); font-size:13.5px; line-height:1.6; max-width:300px; margin-top:14px}
.footer .bottom{border-top:1px solid var(--hairline); padding:20px 0 26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); position:relative; z-index:1}
.footer .bottom .sp{margin-left:auto; display:flex; gap:18px}
/* giant ghost wordmark */
.footer .ghost{
  position:absolute; left:50%; bottom:-.34em; transform:translateX(-50%);
  font-family:var(--serif); font-weight:600; letter-spacing:-.04em; line-height:1;
  font-size:clamp(120px,22vw,320px); color:#e9f5ee; user-select:none; pointer-events:none; white-space:nowrap;
}
/* legacy dark footer support (pre-migration pages inject .footer.dark) */
.footer.dark{border-top:0; background:
    radial-gradient(120% 75% at 88% -8%, rgba(16,185,129,.22), rgba(16,185,129,0) 55%),
    var(--cover)}
.footer.dark h4{color:#8fa89b}
.footer.dark a{color:#c6d5cc}
.footer.dark a:hover{color:var(--bright)}
.footer.dark .blurb{color:#93ac9f}
.footer.dark .bottom{border-top-color:var(--cover-line); color:#8fa89b}
.footer.dark .ghost{display:none}

/* ---------------- contact modal ---------------- */
dialog.contact{
  border:1px solid var(--hairline); border-radius:var(--rad); padding:0; max-width:440px; width:calc(100% - 40px);
  box-shadow:var(--shadow-lg);
}
dialog.contact::backdrop{background:rgba(15,31,24,.45); backdrop-filter:blur(4px)}
.contact__in{padding:26px 26px 22px}
.contact__in h3{margin-bottom:4px}
.contact__in .sub-line{margin-bottom:16px}
.contact label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:12px 0 5px}
.contact input,.contact textarea{
  width:100%; border:1px solid var(--hairline); border-radius:10px; padding:10px 12px; font-family:var(--sans);
  font-size:14.5px; color:var(--ink); background:#fff; outline:none; transition:border-color .2s, box-shadow .2s;
}
.contact input:focus,.contact textarea:focus{border-color:var(--emerald); box-shadow:0 0 0 3px rgba(16,185,129,.14)}
.contact .row{display:flex; gap:14px; align-items:center; margin-top:18px}
.contact .x{background:none; border:0; color:var(--muted); font-size:14px; cursor:pointer; font-family:var(--sans)}
.contact .status{font-size:13px; color:#b4552d; margin:10px 0 0; min-height:18px}
.contact .status.is-success{color:var(--deep)}

/* ---------------- security page bits ---------------- */
.shield{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .shield{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .shield{grid-template-columns:1fr} }
.lock-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--deep); background:rgba(255,255,255,.8);
  border:1px solid var(--wash-line); border-radius:999px; padding:7px 15px;
  box-shadow:0 4px 12px -8px rgba(16,185,129,.3);
}
.qrline{position:relative; overflow:hidden; border-radius:var(--rad-sm)}
.qrline::after{
  content:''; position:absolute; left:0; right:0; height:34%; top:-40%;
  background:linear-gradient(to bottom, rgba(16,185,129,0), rgba(16,185,129,.14), rgba(16,185,129,0));
  animation:scan 3.2s ease-in-out infinite;
}
@keyframes scan{0%{top:-40%} 60%,100%{top:110%}}
@media (prefers-reduced-motion:reduce){ .qrline::after{animation:none; display:none} }

/* count-up target */
.countup{font-variant-numeric:tabular-nums}

/* tables (compliance / registers) */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 14px; border-bottom:2px solid var(--wash-line)}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--tint); vertical-align:top}
.tbl td:first-child{font-weight:600; white-space:nowrap}
@media (max-width:640px){ .tbl td:first-child{white-space:normal} .tbl{font-size:13px} .tbl td,.tbl th{padding:9px 10px} }
.tblwrap{overflow-x:auto}

/* util */
.mt0{margin-top:0} .mb0{margin-bottom:0}
.gap-top{margin-top:clamp(28px,4vw,44px)}
.gap-top-sm{margin-top:18px}