/* ============================================================
   CLARUS WORKS — shared design system
   Swiss grotesque · navy-black ↔ light · electric-blue accent
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* dark surfaces */
  --bg:        #0a0e18;
  --bg-2:      #0e1322;
  --bg-3:      #141a2b;
  --ink:       #eef1f8;
  --ink-dim:   #98a1b9;
  --ink-faint: #5a6480;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);

  /* light surfaces */
  --paper:     #f4f6fb;
  --paper-2:   #ffffff;
  --paper-ink: #0b0f1a;
  --paper-dim: #545d72;
  --paper-faint:#8b93a7;
  --paper-line:rgba(11,15,26,.10);

  /* accent (swappable via Tweaks) */
  --accent:    #4f7cff;
  --accent-2:  #7b5cff;
  --accent-ink:#ffffff;
  --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);

  /* type */
  --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid scale */
  --step--1: clamp(.8rem, .77rem + .15vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.6vw, 5rem);
  --step-5:  clamp(3.2rem, 2rem + 6vw, 7rem);

  --wrap: 1200px;
  --r: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(72px,9vw,140px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,88px)}

/* themed sections */
.panel-dark{background:var(--bg);color:var(--ink)}
.panel-dark2{background:var(--bg-2);color:var(--ink)}
.panel-light{background:var(--paper);color:var(--paper-ink)}
.panel-light .eyebrow{color:var(--paper-dim)}
.panel-light .lede{color:var(--paper-dim)}

/* ---- Type primitives ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;
}
.eyebrow::before{
  content:"";width:1.6em;height:1px;background:var(--accent);
  display:inline-block;
}
.eyebrow--dot::before{width:7px;height:7px;border-radius:50%;background:var(--accent)}

h1,h2,h3,h4{font-weight:600;line-height:1.04;letter-spacing:-.022em;margin:0}
.display{font-size:var(--step-5);line-height:.98;letter-spacing:-.03em;font-weight:600}
.h1{font-size:var(--step-4)}
.h2{font-size:var(--step-3)}
.h3{font-size:var(--step-2);letter-spacing:-.018em}
.h4{font-size:var(--step-1);letter-spacing:-.01em}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-dim);font-weight:400;letter-spacing:-.005em;max-width:46ch;text-wrap:pretty}
.muted{color:var(--ink-dim)}
.accent-text{color:var(--accent)}
.balance{text-wrap:balance}

/* ---- Buttons ---- */
.btn{
  --pad:15px 24px;
  display:inline-flex;align-items:center;gap:.6em;
  padding:var(--pad);border-radius:999px;
  font-size:var(--step--1);font-weight:600;letter-spacing:.01em;
  cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s, box-shadow .25s, color .25s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px -8px var(--accent);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 34px -10px var(--accent);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.panel-light .btn-ghost{color:var(--paper-ink);border-color:var(--paper-line)}
.panel-light .btn-ghost:hover{border-color:var(--paper-ink);background:rgba(11,15,26,.04)}
.btn-lg{--pad:18px 30px;font-size:var(--step-0)}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--step--1);color:var(--accent)}
.link-arrow .arr{transition:transform .3s var(--ease)}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---- Nav ---- */
.nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in oklab, var(--bg) 88%, transparent)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.02em;font-size:1.12rem}
.brand .logo-mark{height:30px;width:auto;flex:none;display:block}
.footer .brand .logo-mark{height:32px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  padding:9px 14px;border-radius:999px;font-size:var(--step--1);font-weight:500;
  color:var(--ink-dim);transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px}
.nav-toggle svg{width:24px;height:24px}

@media (max-width:880px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:2px;padding:18px clamp(20px,5vw,40px) 26px;
    background:color-mix(in oklab,var(--bg) 96%, transparent);
    border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .4s var(--ease);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px 14px;font-size:1.05rem}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
}

/* ---- Footer ---- */
.footer{background:var(--bg-2);color:var(--ink);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,90px) 36px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer h5{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{color:var(--ink-dim);font-size:var(--step--1);transition:color .2s}
.footer ul a:hover{color:var(--ink)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid var(--line);
  font-size:var(--step--1);color:var(--ink-faint)}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--ink-dim);transition:.2s}
.footer-social a:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.footer-social svg{width:17px;height:17px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}}

/* ---- Cards / grid ---- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);position:relative;overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.panel-light .card{background:var(--paper-2);border-color:var(--paper-line);box-shadow:0 1px 2px rgba(11,15,26,.04)}
.panel-light .card:hover{box-shadow:0 24px 50px -28px rgba(11,15,26,.22)}
.card .ico{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in oklab,var(--accent) 30%, transparent);
}
.card .ico svg{width:23px;height:23px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-dim);font-size:var(--step--1);margin:0;line-height:1.55}
.panel-light .card p{color:var(--paper-dim)}
.card .num{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-faint);letter-spacing:.05em}

/* glow accent that follows card top */
.card--feature::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .4s;
}
.card--feature:hover::before{opacity:.9}

/* ---- Section header ---- */
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:62ch;margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}
.sec-head .lede{margin:0}
.panel-light .sec-head .lede{color:var(--paper-dim)}

/* ---- Image placeholder ---- */
.ph{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
    var(--bg-3);
  border:1px solid var(--line);
  display:grid;place-items:center;min-height:200px;
}
.panel-light .ph{
  background:
    repeating-linear-gradient(135deg, rgba(11,15,26,.04) 0 12px, transparent 12px 24px),
    #eef1f8;
  border-color:var(--paper-line);
}
.ph .ph-tag{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);background:color-mix(in oklab,var(--bg) 70%, transparent);
  border:1px solid var(--line);padding:7px 12px;border-radius:8px;
}
.panel-light .ph .ph-tag{color:var(--paper-faint);background:rgba(255,255,255,.7);border-color:var(--paper-line)}

/* ---- Stats / counters ---- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .figure{font-size:var(--step-3);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .label{font-size:var(--step--1);color:var(--ink-dim)}
.panel-light .stat .label{color:var(--paper-dim)}

/* ---- Pill / badge ---- */
.pill{display:inline-flex;align-items:center;gap:.5em;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-2);font-size:var(--step--1);color:var(--ink-dim);
  font-family:var(--mono);letter-spacing:.04em}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.panel-light .pill{border-color:var(--paper-line);color:var(--paper-dim)}

/* ---- Hairline divider list ---- */
.rows{border-top:1px solid var(--line)}
.panel-light .rows{border-top-color:var(--paper-line)}

/* ---- Reveal motion ----
   Content is VISIBLE by default. The hidden->shown transition only engages
   once JS confirms a live animation timeline and adds html.motion-ok
   (skipped under reduced-motion or offscreen/static render), so content is
   never trapped invisible. The user's Tweaks toggle uses body[data-motion]. */
.motion-ok [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.motion-ok [data-reveal].is-in{opacity:1;transform:none}
.motion-ok [data-reveal-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.motion-ok [data-reveal-stagger].is-in>*{opacity:1;transform:none}
body[data-motion="off"] [data-reveal],
body[data-motion="off"] [data-reveal-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
/* Hard failsafe: if the animation timeline is frozen (probe never advances),
   html.motion-dead forces a visible, NON-transitioning resting state so content
   can never be trapped at its hidden start frame. */
html.motion-dead [data-reveal],
html.motion-dead [data-reveal-stagger]>*,
html.motion-dead .hero .rise{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Animated gradient mesh ---- */
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mesh::before,.mesh::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
}
.mesh::before{width:50vw;height:50vw;left:-10vw;top:-18vw}
.mesh::after{width:42vw;height:42vw;right:-8vw;top:6vw;
  background:radial-gradient(circle at 60% 40%, var(--accent-2), transparent 60%)}
.motion-ok .mesh::before{animation:drift1 18s var(--ease) infinite alternate}
.motion-ok .mesh::after{animation:drift2 22s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(8vw,6vw) scale(1.12)}}
@keyframes drift2{to{transform:translate(-7vw,5vw) scale(1.08)}}
body[data-motion="off"] .mesh::before,body[data-motion="off"] .mesh::after{animation:none}

/* subtle grid overlay */
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
          mask:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
  opacity:.5}

.rele{position:relative;z-index:1}

/* ---- Marquee ---- */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content}
.motion-ok .marquee-track{animation:scrollx 32s linear infinite}
body[data-motion="off"] .marquee-track{animation:none}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee-item{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;display:flex;align-items:center;gap:14px}
.marquee-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---- CTA band ---- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--bg-3),var(--bg-2));border:1px solid var(--line);
  padding:clamp(40px,6vw,80px)}
.cta-band .mesh{opacity:.7}

/* ---- utility ---- */
.flow>*+*{margin-top:1.1em}
.center{text-align:center}
.maxw{max-width:62ch}
.hide-sm{}
@media (max-width:620px){.hide-sm{display:none}}
.divider{height:1px;background:var(--line);border:0;margin:0}
.eyebrow-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}