/* ============================================================
   AURANTIUM — main stylesheet
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.04}
p{margin:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
.dim{color:var(--text-dim)}
.grad{background:linear-gradient(100deg,var(--blue-bright),var(--blue-tint));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- eyebrow ---- */
.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  color:var(--blue-bright);margin:0 0 18px;text-transform:uppercase;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);
  font-weight:600;font-size:15px;padding:11px 20px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:.22s var(--ease);white-space:nowrap;
}
.btn .ico{width:18px;height:18px;transition:transform .22s var(--ease)}
.btn--lg{padding:15px 26px;font-size:16px}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px -8px rgba(27,119,210,.7)}
.btn--primary:hover{background:var(--blue-bright);box-shadow:0 12px 30px -8px rgba(46,144,234,.8);transform:translateY(-1px)}
.btn--primary:hover .ico{transform:translateX(3px)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line-strong)}

/* ============================================================ NAV */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(11,13,16,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{transition:transform .4s var(--ease)}
.brand:hover .brand__mark{transform:rotate(45deg)}
.nav__links{display:flex;gap:28px;margin-left:18px}
.nav__links a{font-size:15px;color:var(--text-2);font-weight:500;position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue-bright);transition:width .25s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{width:100%}
.nav__cta{margin-left:auto;display:flex;gap:12px;align-items:center}
.nav__burger{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--text);transition:.25s}

/* ============================================================ HERO */
.hero{position:relative;padding:calc(var(--nav-h) + 88px) 0 120px;overflow:hidden;isolation:isolate}
.hero__net{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.9}
.hero__grid{position:absolute;inset:0;z-index:-3;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 78%);
  opacity:.5}
.hero__glow{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);
  width:140%;height:90%;z-index:-3;
  background:radial-gradient(ellipse 50% 60% at 50% 100%,var(--blue-glow),transparent 70%);
  filter:blur(20px);opacity:.7}
.hero__inner{position:relative;text-align:center;max-width:920px}
.hero__title{font-size:clamp(40px,7.2vw,82px);font-weight:900;letter-spacing:-.035em}
.hero__lede{margin:26px auto 0;max-width:660px;font-size:clamp(17px,2.2vw,21px);color:var(--text-2)}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero__trust{display:inline-flex;align-items:center;gap:12px;margin-top:42px;max-width:660px;
  font-size:14px;color:var(--text-dim);font-family:var(--font-mono);font-weight:500;
  padding:12px 22px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.02)}
.hero__trust span{text-wrap:balance}
.hero__trust .ico{width:26px;height:26px;color:var(--blue-bright);flex:none}

/* ============================================================ STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:-30px;
  position:relative;z-index:2;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.stat{background:linear-gradient(180deg,var(--surface),var(--ink-2));padding:30px 26px;text-align:center}
.stat__n{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4vw,44px);
  color:var(--text);letter-spacing:-.03em;height:46px;line-height:46px;white-space:nowrap}
.stat__n::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-left:6px;vertical-align:.55em}
.stat__l{display:block;margin-top:10px;font-size:13.5px;color:var(--text-dim);font-family:var(--font-mono);white-space:nowrap}
.stat--word .stat__n{font-size:clamp(22px,2.8vw,32px);letter-spacing:-.01em}

/* ============================================================ SECTIONS */
.section{padding:clamp(80px,10vw,140px) 0}
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-title{font-size:clamp(30px,4.6vw,50px)}
.sec-lede{margin-top:20px;font-size:18px;color:var(--text-2);line-height:1.65}

/* ---- modules grid ---- */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mod{position:relative;padding:26px 24px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface),var(--ink-2));border:1px solid var(--line);
  transition:.25s var(--ease);overflow:hidden}
.mod::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,var(--blue-soft),transparent 40%);opacity:0;transition:.25s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mod:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.mod:hover::before{opacity:1}
.mod__i{width:26px;height:26px;color:var(--blue-bright);margin-bottom:16px}
.mod h3{font-size:17px;font-weight:700;font-family:var(--font-body);letter-spacing:-.01em}
.mod p{margin-top:7px;font-size:14px;color:var(--text-dim);line-height:1.5}

/* ============================================================ INDUSTRIES */
.industries{background:
  radial-gradient(ellipse 70% 50% at 50% 0%,rgba(27,119,210,.06),transparent 70%)}
.inds{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ind{text-align:center;padding:30px 14px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface),var(--ink-2));border:1px solid var(--line);
  transition:.25s var(--ease)}
.ind:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ind .ico{width:30px;height:30px;color:var(--blue-bright);margin:0 auto 14px;stroke-width:1.5}
.ind h3{font-size:15px;font-weight:700;font-family:var(--font-body);letter-spacing:-.01em}
.ind p{margin-top:6px;font-size:12.5px;color:var(--text-dim);line-height:1.4}

/* ============================================================ FEATURE ROWS */
.feat__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.feat__row--rev .feat__copy{order:2}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:var(--text-2)}
.ticks .ico{width:20px;height:20px;color:var(--blue-bright);margin-top:2px;stroke-width:2.4}
.ticks em{color:var(--blue-tint);font-style:normal;font-family:var(--font-mono);font-size:14px}
.feat__art{position:relative}

/* scheduling board mock */
.board{background:linear-gradient(180deg,var(--surface-2),var(--ink-2));border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-lg)}
.board__top{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.board__top span{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);text-align:center;
  padding:7px 4px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02)}
.board__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:46px;gap:10px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 56px}
.blk{border-radius:7px;padding:8px 10px;font-size:11.5px;font-family:var(--font-mono);font-weight:500;
  color:#dce8f5;display:flex;align-items:flex-start;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);line-height:1.2}
.b-blue{background:linear-gradient(180deg,#1f7ad6,#155a9f)}
.b-blue2{background:linear-gradient(180deg,#2a6aa8,#1c4e80)}
.b-orange{background:linear-gradient(180deg,#e8771f,#b85b13);color:#fff}
.b-ghost{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px);
  border-style:dashed;border-color:var(--line-strong);color:var(--text-dim)}

/* traceability mock */
.trace{background:linear-gradient(180deg,var(--surface-2),var(--ink-2));border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-lg)}
.trace__step{display:flex;align-items:center;gap:14px}
.trace__step b{font-family:var(--font-body);font-size:15px;font-weight:600}
.trace__step small{display:block;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);margin-top:2px}
.trace__step>div{flex:1}
.dot{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.d-blue{background:var(--blue-bright)}
.d-orange{background:var(--orange)}
.trace__bar{width:2px;height:22px;margin-left:5.5px;background:linear-gradient(var(--line-strong),var(--line))}
.pill{font-family:var(--font-mono);font-size:11px;padding:5px 11px;border-radius:100px;font-weight:600}
.pill.ok{background:rgba(46,144,234,.14);color:#7fbcf2;border:1px solid rgba(46,144,234,.3)}
.pill.warn{background:var(--orange-soft);color:var(--orange-bright);border:1px solid rgba(232,119,31,.35)}

/* ============================================================ COMPLIANCE */
.compliance{background:
  radial-gradient(ellipse 60% 50% at 50% 0%,rgba(27,119,210,.10),transparent 70%),var(--ink-2);
  border-block:1px solid var(--line)}
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.comp{padding:30px 26px;border-radius:var(--r-md);background:rgba(255,255,255,.02);
  border:1px solid var(--line);transition:.25s var(--ease)}
.comp:hover{border-color:var(--line-2);background:rgba(255,255,255,.035)}
.comp .ico{width:30px;height:30px;color:var(--blue-bright);margin-bottom:18px;stroke-width:1.6}
.comp h3{font-size:18px;font-weight:700;font-family:var(--font-body)}
.comp p{margin-top:9px;font-size:14.5px;color:var(--text-dim);line-height:1.55}

/* ============================================================ WHY SWITCH / REASONS */
.switch{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(27,119,210,.07),transparent 70%)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.vs__head{padding:20px 28px;font-family:var(--font-display);font-weight:800;font-size:18px;
  letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.vs__head--old{background:var(--ink-2);color:var(--text-dim)}
.vs__head--new{background:linear-gradient(180deg,rgba(27,119,210,.18),rgba(27,119,210,.04));color:var(--text)}
.vs__mark{flex:none}
.vs__cell{padding:16px 28px;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.vs__old{background:var(--ink-2);color:var(--text-dim)}
.vs__new{background:var(--surface);color:var(--text-2)}
.vs__cell .ico{width:18px;height:18px;flex:none;margin-top:2px}
.vs__old .ico{color:var(--text-mute)}
.vs__new .ico{color:var(--blue-bright);stroke-width:2.6}

.reasons-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reason{padding:26px 24px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface),var(--ink-2));border:1px solid var(--line);
  transition:.25s var(--ease)}
.reason:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.reason .ico{width:26px;height:26px;color:var(--blue-bright);margin-bottom:16px}
.reason h3{font-size:17px;font-weight:700;font-family:var(--font-body);letter-spacing:-.01em}
.reason p{margin-top:8px;font-size:14px;color:var(--text-dim);line-height:1.55}

/* ============================================================ MOBILE APPS */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.app{position:relative;padding:38px 34px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--ink-2));border:1px solid var(--line-2);
  box-shadow:var(--shadow-md)}
.app::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--blue-soft),transparent 70%)}
.app__icn{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(46,144,234,.2),rgba(27,119,210,.08));
  border:1px solid rgba(46,144,234,.3);margin-bottom:22px}
.app__icn .ico{width:26px;height:26px;color:var(--blue-bright)}
.app h3{font-size:23px}
.app p{margin-top:12px;color:var(--text-2);font-size:15.5px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.chips li{font-family:var(--font-mono);font-size:12px;color:var(--text-2);
  padding:6px 12px;border-radius:100px;border:1px solid var(--line-2);background:rgba(255,255,255,.02)}

/* ============================================================ INTEGRATIONS */
.integ__row{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:center}
.integ__chips{display:flex;flex-wrap:wrap;gap:12px}
.ichip{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;
  padding:12px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface),var(--ink-2));transition:.22s var(--ease)}
.ichip:hover{border-color:rgba(46,144,234,.4);transform:translateY(-2px)}
.ichip .ico{width:18px;height:18px;color:var(--blue-bright)}

/* ============================================================ CTA */
.cta{position:relative;padding:clamp(80px,11vw,150px) 0;text-align:center;overflow:hidden;
  border-top:1px solid var(--line)}
.cta__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;height:120%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(27,119,210,.18),transparent 70%);z-index:-1}
.cta__inner{max-width:640px;margin-inline:auto}
.cta h2{font-size:clamp(32px,5vw,56px)}
.cta p{margin:20px auto 36px;color:var(--text-2);font-size:19px;max-width:520px}
.cta .hero__actions{margin-top:0}

/* ============================================================ FOOTER */
.foot{border-top:1px solid var(--line);background:var(--ink-2);padding:64px 0 30px}
.foot__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot__brand p{margin-top:18px;color:var(--text-dim);font-size:14.5px;max-width:280px}
.foot__col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);font-weight:600;margin-bottom:16px}
.foot__col a{display:block;color:var(--text-2);font-size:14.5px;padding:5px 0;transition:color .2s}
.foot__col a:hover{color:var(--blue-bright)}
.foot__bar{display:flex;justify-content:space-between;align-items:center;margin-top:54px;padding-top:24px;
  border-top:1px solid var(--line);font-size:13px;color:var(--text-mute);font-family:var(--font-mono)}

/* ============================================================ REVEAL ANIM */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}

/* ============================================================ RESPONSIVE */
@media(max-width:980px){
  .nav__links,.nav__cta .btn--ghost{display:none}
  .nav__burger{display:flex}
  .mods{grid-template-columns:repeat(2,1fr)}
  .inds{grid-template-columns:repeat(3,1fr)}
  .reasons-grid{grid-template-columns:repeat(2,1fr)}
  .comp-grid{grid-template-columns:repeat(2,1fr)}
  .feat__row,.integ__row{grid-template-columns:1fr;gap:40px}
  .feat__row--rev .feat__copy{order:0}
  .apps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .mods{grid-template-columns:1fr}
  .inds{grid-template-columns:repeat(2,1fr)}
  .reasons-grid{grid-template-columns:1fr}
  .comp-grid{grid-template-columns:1fr}
  .vs__cell,.vs__head{padding-left:14px;padding-right:14px;font-size:13px}
  .stats{grid-template-columns:1fr 1fr}
  .foot__inner{grid-template-columns:1fr 1fr}
  .foot__bar{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}












