/* PADDOX — home page (immersive scroll). Loaded after v2.css. */

/* ============== HERO ============== */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#050607}
.hero-field{position:absolute;inset:0;z-index:0;will-change:transform,opacity}
.hero-field canvas{width:100%;height:100%;display:block}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(5,6,7,.97) 1%,rgba(5,6,7,.5) 26%,rgba(5,6,7,0) 56%),
    linear-gradient(90deg,rgba(5,6,7,.8),rgba(5,6,7,.1) 44%,rgba(5,6,7,0) 68%),
    radial-gradient(60% 48% at 66% 16%,rgba(255,255,255,.05),rgba(255,255,255,0) 60%)}
.hero-in{position:relative;z-index:3;width:100%;padding:0 0 clamp(86px,13vh,150px);will-change:transform,opacity}
.hero h1{font-size:clamp(50px,8.6vw,140px);line-height:.86;letter-spacing:-.05em;max-width:15ch}
.hero .sub{max-width:560px;margin:26px 0 0;font-size:clamp(17px,1.45vw,21px);color:var(--fg-soft);line-height:1.5}
.hero-cta{display:flex;gap:12px;margin-top:34px;align-items:center;flex-wrap:wrap}

/* ============== FLAGSHIP DEMO ============== */
.flagship{position:relative;background:linear-gradient(180deg,#070809,#0B0C0E 40%);padding:clamp(80px,11vw,150px) 0 clamp(80px,11vw,150px)}
.flag-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,60px)}
.flag-head h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.035em;line-height:1.0;max-width:16ch}
.flag-head .meta{max-width:360px}
.flag-head .meta p{color:var(--fg-soft);font-size:16.5px;line-height:1.5}
.flag-head .meta .lk{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--blue);font-weight:500}
.flag-head .meta .lk:hover .btn-arrow{transform:translateX(3px)}

.dashwrap{position:relative;will-change:transform}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-2);margin-top:clamp(28px,3.5vw,44px);border-radius:12px;overflow:hidden}
.pillar{background:#0E1013;padding:26px 24px}
.pillar .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mut-2)}
.pillar h4{font-size:19px;margin-top:12px;letter-spacing:-.02em}
.pillar p{color:var(--mut);font-size:13.5px;margin-top:8px;line-height:1.45}
@media(max-width:880px){.pillars{grid-template-columns:1fr 1fr}}

/* ---- override legacy dashboard AI-tropes for the home demo ---- */
.flagship{--surface:#101214;--surface-2:#1B1E22;--bg-2:#101214;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.055);--line-strong:rgba(255,255,255,.16);
  --mark-1:var(--blue);--mark-2:var(--gray-1);--blue-glow:rgba(255,255,255,.10)}
.flagship .dash{border:0;border-radius:14px;background:linear-gradient(180deg,#15181c,#0e1013);
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 50px 120px -50px rgba(0,0,0,.92),0 0 90px -40px rgba(255,255,255,.05)}
.flagship .dash::before{display:none}
.flagship .dash-live .led,.flagship .feed-list li .fled,.flagship .chip .led{box-shadow:none!important;border-radius:2px;animation:none!important;background:var(--blue)}
.flagship .atile.working{box-shadow:0 0 0 1.5px rgba(64,185,255,.45),0 12px 34px -18px rgba(0,95,206,.4)}
.flagship .dash-links path.flow{filter:none}
.flagship .hnode .nm,.flagship .hnode .rl{white-space:nowrap}
.flagship .dash-feed-h{gap:12px}.flagship .dash-feed-h .c{white-space:nowrap}

/* ============== VISION (light) ============== */
.paper{background:var(--paper);color:var(--ink-on-paper)}
.vision{position:relative;overflow:hidden}
.vision-field{position:absolute;top:0;right:0;width:min(54%,760px);height:100%;z-index:0;pointer-events:none;
  opacity:.5;-webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.5) 34%,#000 80%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.5) 34%,#000 80%)}
.vision-field canvas{width:100%;height:100%;display:block}
.vision-in{position:relative;z-index:1}
.vision .statement{font-size:clamp(34px,5.2vw,82px);font-weight:600;letter-spacing:-.04em;line-height:1.0;max-width:17ch;margin:0}
.vision .support{display:flex;gap:60px;flex-wrap:wrap;margin-top:clamp(36px,4.5vw,56px);max-width:900px}
.vision .support p{color:#3a3d41;font-size:clamp(16px,1.3vw,19px);line-height:1.55;max-width:46ch}
.vision .lk{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:var(--blue-deep);font-weight:500}
.vision .lk:hover .btn-arrow{transform:translateX(3px)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:clamp(56px,7vw,96px)}
.principle{padding-top:22px;border-top:1.5px solid rgba(12,13,15,.16)}
.principle .pn{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--blue-deep)}
.principle h4{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;margin-top:18px}
.principle p{color:var(--mut-paper);font-size:15px;line-height:1.5;margin-top:10px;max-width:34ch}
@media(max-width:820px){.vision-field{width:80%;opacity:.32}.principles{grid-template-columns:1fr;gap:0}
  .principle{margin-top:0}.principle+.principle{margin-top:2px}}

/* ============== SECTORS (light) ============== */
.sectors-sec{background:var(--paper-2);color:var(--ink-on-paper)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.03em;line-height:1.04;max-width:20ch}
.sec-head .lk{display:inline-flex;align-items:center;gap:8px;color:var(--blue-deep);font-weight:500;white-space:nowrap}
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sector{position:relative;background:#fff;border-radius:14px;padding:28px 26px 24px;min-height:188px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);overflow:hidden;
  box-shadow:0 1px 2px rgba(12,13,15,.05)}
.sector:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(12,13,15,.06),0 24px 50px -28px rgba(12,13,15,.4)}
.sector .ix{font-family:var(--f-mono);font-size:12px;color:#a6a9ad;letter-spacing:.08em}
.sector .go{position:absolute;top:26px;right:26px;color:#b6b9bd;transition:.3s var(--ease)}
.sector:hover .go{color:var(--blue-deep);transform:translate(3px,-3px)}
.sector .nm{font-size:27px;font-weight:600;letter-spacing:-.025em;margin-top:auto}
.sector .ds{color:var(--mut-paper);font-size:13px;margin-top:7px;font-family:var(--f-mono);letter-spacing:-.01em}
.sector::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blue-deep);transition:width .4s var(--ease)}
.sector:hover::after{width:100%}
@media(max-width:880px){.sectors{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sectors{grid-template-columns:1fr}}

/* ============== SUITE (dark) ============== */
.suite{background:var(--bg)}
.suite-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.suite-head h2{font-size:clamp(32px,4.4vw,60px);letter-spacing:-.035em;line-height:1.02;margin-top:18px}
.suite-head p{color:var(--fg-soft);font-size:clamp(16px,1.3vw,19px);line-height:1.5;margin-top:20px;max-width:54ch}
.prod{display:flex;flex-direction:column;gap:1px;background:var(--hair-2);border-radius:14px;overflow:hidden}
.prow{display:grid;grid-template-columns:auto 1.1fr 1.4fr auto;align-items:center;gap:30px;
  background:var(--panel);padding:30px 32px;transition:background .25s var(--ease);position:relative}
.prow:hover{background:var(--panel-2)}
.prow .pmark{width:40px;height:40px}
.prow .pname{font-size:23px;font-weight:600;letter-spacing:-.025em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prow .flag{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  background:rgba(64,185,255,.12);padding:4px 8px;border-radius:5px}
.prow .pcat{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--mut);margin-top:6px}
.prow .pdesc{color:var(--fg-soft);font-size:15.5px;line-height:1.45}
.prow .parrow{justify-self:end;color:var(--mut);transition:.3s var(--ease)}
.prow:hover .parrow{color:var(--blue);transform:translate(3px,-3px)}
@media(max-width:900px){
  .prow{grid-template-columns:auto 1fr auto;gap:18px}
  .prow .pdesc{display:none}
}

/* ============== CLOSING CTA (dark) ============== */
.closing{background:linear-gradient(180deg,var(--bg),#070809);text-align:center}
.closing h2{font-size:clamp(40px,6.4vw,104px);letter-spacing:-.045em;line-height:.92;max-width:16ch;margin:0 auto}
.closing .cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* mobile nav */
.nav-burger{display:none}
.mobile-menu{display:none}
@media(max-width:880px){
  :root{--pad:22px}
  .nav-links{display:none}
  .nav-cta .btn-line{display:none}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:rgba(255,255,255,.06);color:var(--fg);cursor:pointer;border:0;border-radius:9px;font-size:18px}
  .nav.on-paper .nav-burger{background:rgba(12,13,15,.06);color:var(--ink-on-paper)}
  .mobile-menu{display:block;position:fixed;inset:72px 0 auto;z-index:55;background:var(--bg-2);border-bottom:1px solid var(--hair);
    padding:16px var(--pad);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s var(--ease)}
  .mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
  .mobile-menu a{display:block;padding:14px 4px;font-size:18px;border-bottom:1px solid var(--hair-2);color:var(--fg-soft)}
  .flag-head{gap:18px}
}