/* DataHarmoni main site: extra styles on top of site.css. Effects are CSS and SVG; js/main.js only adds classes.
   Everything is visible without JS, and all motion is off under prefers-reduced-motion. */
:root{
  --ink-3:#12384D; --coral:#FF9C8A; --lav:#C3B5FF;
  --fc:#2DD4BF; --fct:#0F766E; --fcbg:#E6F7F5;
}
.f-teal{--fc:#2DD4BF;--fct:#0F766E;--fcbg:#E6F7F5}
.f-amber{--fc:#F5B841;--fct:#8A5A00;--fcbg:#FFF4DB}
.f-sky{--fc:#7CC4FF;--fct:#1F6FB2;--fcbg:#E6F2FD}
.f-coral{--fc:#FF9C8A;--fct:#B3412F;--fcbg:#FFEDE9}
.f-lav{--fc:#C3B5FF;--fct:#5B45C8;--fcbg:#EFEBFF}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- hero ---------- */
.hero-dark{background:radial-gradient(900px 480px at 78% 40%,rgba(45,212,191,.16),transparent 62%),radial-gradient(600px 400px at 10% 100%,rgba(124,196,255,.12),transparent 70%),var(--ink);color:#fff;padding:3rem 0 3.5rem;overflow:hidden}
.hero-dark h1{color:#fff}
.hero-dark .lead{color:#CFE0EA}
.hero-dark .eyebrow{color:#7FE9DB}
.hero-dark a{color:#7FE9DB}
.hero-dark :focus-visible{outline-color:#fff}
.hero-dark .btn-primary{background:var(--teal);color:var(--ink);border-color:var(--teal)}
.hero-dark .btn-primary:hover{background:#7FE9DB;color:var(--ink)}
.hero-dark .btn-secondary{background:transparent;color:#fff;border-color:#fff}
.hero-dark .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff}
.hero-grid{display:grid;gap:2rem;align-items:center}
.hero-art{max-width:640px;width:100%;margin:0 auto}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.hero-dark{padding:4.5rem 0 5rem}}

/* constellation */
.constellation{display:block;width:100%;height:auto;overflow:visible}
.constellation .ring{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 7}
.constellation .ln{fill:none;stroke-width:1.8;stroke-linecap:round;opacity:.75}
.constellation .ln-fam{opacity:.5;stroke-width:1.4}
.constellation .halo{fill:none;stroke-width:1.5;opacity:0}
.constellation .nbg{fill:var(--ink-3);stroke-width:2;transition:fill .25s,stroke-width .25s}
.constellation .core-bg{fill:var(--ink-3);stroke:rgba(255,255,255,.35);stroke-width:1.5}
.constellation .core-halo{fill:rgba(45,212,191,.12)}
.constellation .lbl{fill:#E6F1F7;font:600 15px var(--font)}
.constellation .node.hl .nbg{fill:#1D5272;stroke-width:3.5}
.constellation .node.hl .lbl{fill:#fff}
@media (max-width:520px){.constellation .lbl{display:none}}

/* stats band */
.statband{background:#fff;border-bottom:1px solid var(--line)}
.stats{list-style:none;margin:0;padding:1.4rem 0;display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.stats li{margin:0;display:flex;align-items:baseline;gap:.7rem}
.stats .num{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:1.2ch}
.stats span{color:var(--muted)}

/* ---------- metro map ---------- */
.metro{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.5rem;position:relative}
.metro>li{position:relative;margin:0;padding:0 0 0 2.4rem}
.metro>li::before{content:"";position:absolute;left:0;top:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;border:4px solid var(--fc);z-index:1}
.metro::before{content:"";position:absolute;left:.7rem;top:.9rem;bottom:1rem;width:4px;background:linear-gradient(180deg,#2DD4BF,#F5B841,#7CC4FF,#FF9C8A,#C3B5FF);border-radius:2px;transform-origin:top}
.metro h3{margin-bottom:.25rem}
.metro p{margin:0 0 .35rem;color:var(--muted)}
.metro .stn{font-weight:700;color:var(--fct)}
@media (min-width:900px){
  .metro{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem;padding-top:2.6rem}
  .metro>li{padding:0}
  .metro>li::before{top:-2.6rem;left:0}
  .metro::before{left:.7rem;right:1rem;top:-1.7rem;bottom:auto;width:auto;height:4px;background:linear-gradient(90deg,#2DD4BF,#F5B841,#7CC4FF,#FF9C8A,#C3B5FF);transform-origin:left;margin-top:2.6rem}
}

/* ---------- product cards ---------- */
.pgrid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));margin-top:1.5rem}
.pcard{position:relative;border:1px solid var(--line);border-top:4px solid var(--fc);border-radius:var(--r);background:#fff;padding:1.2rem 1.3rem 1.1rem;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.pcard:hover,.pcard:focus-within{transform:translateY(-4px);box-shadow:0 12px 28px rgba(14,42,58,.12)}
.pcard:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.pcard a:focus-visible{outline:none}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem}
.ico{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:11px;background:var(--fcbg);color:var(--fct);flex:none}
.pill{font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--fct);background:var(--fcbg);padding:.15rem .6rem;border-radius:999px}
.pcard h3{margin-bottom:.4rem}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard p{color:var(--muted);margin-bottom:.7rem}
.pcard .host{margin:auto 0 0;font:600 .85rem var(--mono);color:var(--fct);word-break:break-all}
.pcard:hover .host{text-decoration:underline}

/* families (products page) */
.families{padding:0 0 3rem}
.fam{border-top:1px solid var(--line);padding:2.2rem 0 .6rem}
.fam h2{display:flex;align-items:center;gap:.7rem;font-size:1.5rem}
.fam-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.fam-list>li{margin:0;border:1px solid var(--line);border-left:5px solid var(--fc);border-radius:var(--r);padding:1.1rem 1.3rem;background:#fff}
.fam-list p{color:var(--muted)}
.meta{display:grid;gap:.35rem;margin:0}
.meta div{display:grid;grid-template-columns:5rem 1fr;gap:.5rem}
.meta dt{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.meta dd{margin:0}
.pick{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem}
.pick li{margin:0;display:grid;gap:.4rem 1rem;grid-template-columns:1fr;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1.1rem;background:#fff}
.pick li a{font-weight:700}
@media (min-width:760px){.pick li{grid-template-columns:1fr auto}.pick li a::after{content:" \2192"}}

/* ---------- flow map ---------- */
.flow{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.6rem;counter-reset:f}
.flow>li{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.1rem 1rem;counter-increment:f}
.flow>li::before{content:counter(f);display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:.6rem}
.flow h3{font-size:1.05rem}
.flow p{margin:0;color:var(--muted);font-size:.95rem}
.flow>li:not(:last-child)::after{content:"";position:absolute;left:1.9rem;top:100%;width:3px;height:1.6rem;background:repeating-linear-gradient(180deg,var(--teal-d) 0 6px,transparent 6px 11px);background-size:3px 22px}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem}
  .flow>li:not(:last-child)::after{left:100%;top:1.9rem;width:1.6rem;height:3px;background:repeating-linear-gradient(90deg,var(--teal-d) 0 6px,transparent 6px 11px);background-size:22px 3px}
}
.section-alt .flow>li{background:#fff}

/* ---------- timeline ---------- */
.timeline{margin-top:2rem}
.tl-track{position:relative;height:5.2rem;margin:0 .6rem 1.4rem}
.tl-line{position:absolute;left:0;right:0;top:2.2rem;height:4px;background:var(--line);border-radius:2px}
.tl-bar{position:absolute;top:2.2rem;height:4px;border-radius:2px;transform-origin:left}
.tl-bar-1{left:24.5%;width:69.2%;background:var(--teal-d)}
.tl-bar-2{left:93.7%;width:6.3%;background:repeating-linear-gradient(90deg,var(--amber) 0 5px,transparent 5px 9px)}
.tl-dot{position:absolute;top:1.55rem;width:1.6rem;height:1.6rem;margin-left:-.8rem;border-radius:50%;background:var(--ink);color:#fff;font:700 .85rem/1.6rem var(--font);text-align:center;box-shadow:0 0 0 4px #fff}
.tl-d1{left:24.5%}.tl-d2{left:83.5%}.tl-d3{left:93.7%;background:#fff;color:var(--ink);border:3px dashed var(--ink);line-height:1.1rem}
.tl-tick{position:absolute;bottom:0;font:600 .85rem var(--font);color:var(--muted)}
.tl-y1{left:0}.tl-y2{left:50%;transform:translateX(-50%)}.tl-y3{right:0}
.tl-notes{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tl-notes li{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.tl-notes h4{margin:0 0 .4rem;font-size:1.02rem;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.tl-notes p{margin:0;color:var(--muted)}
.tl-n{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ink);color:#fff;font-size:.8rem}
.tag{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.1rem .5rem;border-radius:999px;background:#FFF4DB;color:#6B4600;border:1px solid #E9C877}

/* ---------- call to action band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink)}
.cta-band .wrap>*{max-width:40rem}
@media (min-width:900px){.cta-band{background:var(--ink) url("/assets/streams.svg") no-repeat right -120px center/760px auto}}

/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-anim .reveal:not(.in){opacity:0;transform:translateY(16px)}
  .reveal{transition:opacity .7s ease,transform .7s ease}
  .pgrid .reveal:nth-child(3n+2){transition-delay:.08s}.pgrid .reveal:nth-child(3n){transition-delay:.16s}
  .pcard.reveal.in{transition:opacity .7s ease,transform .25s ease,box-shadow .25s ease}
  .flow>li:nth-child(2){transition-delay:.1s}.flow>li:nth-child(3){transition-delay:.2s}.flow>li:nth-child(4){transition-delay:.3s}.flow>li:nth-child(5){transition-delay:.4s}
  .fam-list>li,.tl-notes li,.card{transition:transform .25s ease,box-shadow .25s ease}
  .fam-list>li:hover,.tl-notes li:hover,.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,42,58,.1)}

  /* lines that draw themselves */
  .constellation .ln{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
  .js-anim .constellation:not(.in) .ln{stroke-dashoffset:1}
  .constellation .ln:nth-of-type(2){transition-delay:.12s}.constellation .ln:nth-of-type(3){transition-delay:.24s}.constellation .ln:nth-of-type(4){transition-delay:.36s}.constellation .ln:nth-of-type(5){transition-delay:.48s}
  .constellation .ln:nth-of-type(6){transition-delay:.6s}.constellation .ln:nth-of-type(7){transition-delay:.72s}.constellation .ln:nth-of-type(8){transition-delay:.84s}.constellation .ln:nth-of-type(9){transition-delay:.96s}
  .constellation .node{transition:opacity .6s ease .8s}
  .js-anim .constellation:not(.in) .node,.js-anim .constellation:not(.in) .core{opacity:0}
  .constellation .ring-2{transform-box:fill-box;transform-origin:center;animation:spin 120s linear infinite}
  .constellation .core-halo{transform-box:fill-box;transform-origin:center;animation:breathe 4.5s ease-in-out infinite}
  .js-anim .metro:not(.in)::before{transform:scale(0,1)}
  .metro::before{transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
  @media (max-width:899px){.js-anim .metro:not(.in)::before{transform:scale(1,0)}}
  .js-anim .metro:not(.in)>li{opacity:0}
  .metro>li{transition:opacity .6s ease}
  .metro>li:nth-child(2){transition-delay:.25s}.metro>li:nth-child(3){transition-delay:.5s}.metro>li:nth-child(4){transition-delay:.75s}.metro>li:nth-child(5){transition-delay:1s}
  .flow>li:not(:last-child)::after{animation:dash-h 1.2s linear infinite}
  .js-anim .timeline:not(.in) .tl-bar{transform:scale(0,1)}
  .tl-bar{transition:transform 1.6s cubic-bezier(.4,0,.2,1) .2s}
  .btn{transition:background-color .2s,transform .2s}
  .btn-primary:hover{transform:translateY(-2px)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.18);opacity:.55}}
@keyframes dash-h{to{background-position:22px 0}}
@media (prefers-reduced-motion:reduce){.constellation .halo,.constellation .dot{display:none}}
.cta-band .btn-secondary{background:transparent;color:#fff;border-color:#fff}
.cta-band .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff}