/* ============================================================
   Premys AI: shared site chrome (base type, motion, nav, footer,
   responsive rules). Linked by every page after ds/styles.css.
   ============================================================ */
body{margin:0;background:var(--surface-page);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{text-decoration:none}
.eyebrow{font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--blue-600)}
.h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;color:var(--navy-900);text-wrap:balance}
.cta-primary{display:inline-flex;align-items:center;gap:8px;background:var(--blue-500);color:#fff;padding:15px 26px;border-radius:10px;font:600 16px/1 Inter,sans-serif;box-shadow:var(--shadow-glow-md);transition:transform .15s var(--ease-standard),background .15s}
.cta-primary:hover{background:var(--blue-600)}
.cta-primary:active{transform:scale(.97)}
.lift{transition:transform .2s var(--ease-standard),box-shadow .2s,border-color .2s}
.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-200)}

/* ---- video embed ---- */
.video-frame-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:none;padding:0;background:rgba(3,9,16,.28);cursor:pointer;transition:background .2s var(--ease-standard)}
.video-frame-play:hover{background:rgba(3,9,16,.4)}
.video-frame-play-icon{width:72px;height:72px;border-radius:50%;background:var(--blue-500);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow-md);transition:transform .2s var(--ease-standard)}
.video-frame-play:hover .video-frame-play-icon{transform:scale(1.06)}
.video-frame.is-playing .video-frame-play{display:none}

/* ---- motion system ---- */
html{scroll-behavior:smooth}
body{animation:pageIn .5s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise1{animation:riseIn .5s var(--ease-out) .15s both}
.rise2{animation:riseIn .5s var(--ease-out) .45s both}
.rise3{animation:riseIn .5s var(--ease-out) .8s both}
@keyframes glowPulse{0%,100%{box-shadow:0 0 60px rgba(0,130,255,.22)}50%{box-shadow:0 0 90px rgba(0,130,255,.38)}}
.chatcard{animation:glowPulse 4.5s ease-in-out infinite}
[data-mv]{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
[data-mv].mv-in{opacity:1;transform:none}
[data-mv-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-mv-stagger].mv-in>*{opacity:1;transform:none}
[data-mv-stagger].mv-in>*:nth-child(2){transition-delay:.09s}
[data-mv-stagger].mv-in>*:nth-child(3){transition-delay:.18s}
[data-mv-stagger].mv-in>*:nth-child(4){transition-delay:.27s}
[data-mv-stagger].mv-in>*:nth-child(5){transition-delay:.36s}
[data-mv-stagger].mv-in>*:nth-child(6){transition-delay:.45s}
[data-mv-stagger].mv-in>*:nth-child(7){transition-delay:.54s}
[data-mv-stagger].mv-in>*:nth-child(8){transition-delay:.63s}
.flowline{position:relative;height:2px;width:30px;background:var(--blue-100);border-radius:99px}
.flowdot{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:99px;background:var(--blue-500);box-shadow:0 0 10px rgba(0,130,255,.9);animation:flowx 1.5s var(--ease-in-out) infinite}
@keyframes flowx{0%{left:-2px;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:24px;opacity:0}}
.flowline-v{position:relative;width:2px;height:26px;background:var(--blue-100);border-radius:99px}
.flowdot-v{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:99px;background:var(--blue-500);box-shadow:0 0 10px rgba(0,130,255,.9);animation:flowy 1.5s var(--ease-in-out) infinite}
@keyframes flowy{0%{top:-2px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:20px;opacity:0}}
.railline{transform:scaleX(0);transform-origin:left}
[data-mv].mv-in .railline{transform:scaleX(1);transition:transform 1.1s var(--ease-out) .25s}
.caret{display:inline-block;width:1.5px;height:12px;background:var(--sky-400);margin-left:2px;vertical-align:middle;animation:mvblink 1.1s steps(1) infinite}
@keyframes mvblink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){[data-mv],[data-mv-stagger]>*{opacity:1;transform:none;transition:none}body{animation:none}}

/* ---- site nav (light tone = default, dark tone via .snav.dark) ---- */
.snav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100vw - 40px));z-index:100}
.snav a{text-decoration:none;transition:color .15s var(--ease-standard),background .15s}
.snav .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px 10px 20px;border-radius:16px;background:rgba(255,255,255,.80);border:1px solid rgba(9,32,64,.08);box-shadow:0 12px 40px rgba(9,32,64,.12);backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);transition:box-shadow .25s var(--ease-standard),background .25s var(--ease-standard)}
.snav.scrolled .bar{background:rgba(255,255,255,.92);box-shadow:0 16px 48px rgba(9,32,64,.18)}
.snav.dark .bar{background:rgba(6,13,22,.72);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.snav.dark.scrolled .bar{background:rgba(6,13,22,.88);box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 24px rgba(0,130,255,.12)}
.snav .brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--navy-900);white-space:nowrap}
.snav.dark .brand{color:#fff}
.snav .navlinks{display:flex;align-items:center;gap:6px}
.snav .navlinks a{font:500 13.5px/1 Inter,sans-serif;padding:9px 13px;border-radius:9px;white-space:nowrap;color:var(--ink-600)}
.snav .navlinks a:hover{color:var(--navy-900)}
.snav.dark .navlinks a{color:rgba(255,255,255,.75)}
.snav.dark .navlinks a:hover{color:#fff}
.snav .navlinks a.active{color:var(--blue-500);background:rgba(0,130,255,.10);font-weight:600}
.snav .navcta{display:inline-flex;align-items:center;background:var(--blue-500);color:#fff;padding:10px 18px;border-radius:10px;font:600 14px/1 Inter,sans-serif;box-shadow:var(--shadow-glow-sm);white-space:nowrap}

/* mobile nav toggle + panel (hidden on desktop) */
.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:none;background:transparent;color:var(--ink-600);cursor:pointer;flex:none}
.snav.dark .nav-toggle{color:rgba(255,255,255,.85)}
.nav-panel{display:none;flex-direction:column;gap:2px;margin-top:8px;padding:10px;border-radius:14px;background:rgba(255,255,255,.96);border:1px solid rgba(9,32,64,.08);box-shadow:0 16px 48px rgba(9,32,64,.18);backdrop-filter:saturate(140%) blur(18px)}
.snav.dark .nav-panel{background:rgba(6,13,22,.96);border:1px solid rgba(255,255,255,.12)}
.nav-panel a{font:500 14.5px/1 Inter,sans-serif;padding:12px 14px;border-radius:9px;color:var(--ink-600)}
.snav.dark .nav-panel a{color:rgba(255,255,255,.85)}
.nav-panel a.active{color:var(--blue-500);background:rgba(0,130,255,.10);font-weight:600}
.nav-panel .navcta{margin-top:6px;justify-content:center}

/* ---- site footer ---- */
.sfoot a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .15s}
.sfoot a:hover{color:var(--sky-400)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .snav .navlinks{display:none}
  .snav .bar > a.navcta{display:none}
  .nav-toggle{display:flex}
  .snav.nav-open .nav-panel{display:flex}

  .hero-grid{grid-template-columns:1fr !important;gap:40px !important}
  .grid-2{grid-template-columns:1fr !important}
  .grid-3{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr 1fr !important}
  .grid-stats{grid-template-columns:1fr 1fr !important}
  .problem-stats{grid-template-columns:1fr !important}
  .arch-grid{grid-template-columns:1fr !important;gap:36px !important}
  .diagram-grid{grid-template-columns:1fr !important;gap:24px !important}
  .diagram-grid .diagram-arrow{display:none !important}
  .gs-grid{grid-template-columns:1fr !important;gap:32px !important}
  .gs-grid .gs-sticky{position:static !important}
  .footer-grid{grid-template-columns:1fr 1fr !important}
  .footer-bottom{flex-direction:column !important;gap:12px !important;text-align:center}
  .scale-row{flex-wrap:wrap !important;justify-content:center !important;row-gap:24px !important}
  .scale-row .railline{display:none}
  .video-frame-play-icon{width:56px !important;height:56px !important}
}
@media (max-width:560px){
  .grid-stats{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr !important}
}