/* ===========================================================================
   SaimLabs.ai — shared stylesheet
   Everything used by more than one page lives here. Page-specific rules stay
   in that page's own <style> block.

   Accent: each page sets --accent in its own :root. Service pages alternate
   between the blue and the gold so consecutive pages don't look identical.
     blue  oklch(0.78 0.11 220)   index, custom-ai-models,
                                  intelligent-dashboards, ai-video-and-content
     gold  oklch(0.80 0.11 75)    automation-and-workflows,
                                  integration-and-deployment
   =========================================================================== */

:root{
  --bg:#04080f;
  --bg-alt:#060c15;
  --ink:#eaf0f6;
  --accent:oklch(0.78 0.11 220);
  --accent-alt:oklch(0.80 0.11 75);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;}

/* ===== brand lockup (emblem + wordmark) ===== */
.brand-mark{height:38px;width:38px;display:block;flex:none;}
.brand-word{height:19px;width:auto;display:block;}
.brand-mark-sm{height:32px;width:32px;}
.brand-word-sm{height:16px;}
@media (max-width:700px){
  .brand-mark{height:32px;width:32px;}
  .brand-word{height:16px;}
  .brand-mark-sm{height:28px;width:28px;}
  .brand-word-sm{height:14px;}
}
@media (max-width:360px){ .brand-word{display:none;} }

/* ===== interaction classes =================================================
   These replace the old generated .hv0 … .hv13 names, which collided: the
   same class meant different things on different pages (.hv4 was a link
   colour on three pages and a flex gap on index).
   ========================================================================= */

.u-btn-solid,.u-btn-solid-sm,.u-btn-ghost,.u-link-accent,.u-link-bright,
.u-nudge,.u-card,.u-card-alt,.u-chip,.u-icon-btn{transition:all .25s ease;}

/* primary light button (main CTA) */
.u-btn-solid:hover{
  background:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 14px 40px rgba(0,0,0,0.45)!important;
}
/* same, smaller shadow (nav-sized) */
.u-btn-solid-sm:hover{
  background:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 12px 34px rgba(0,0,0,0.4)!important;
}
/* outlined button */
.u-btn-ghost:hover{
  border-color:var(--accent)!important;
  color:#fff!important;
}
/* text link that warms to the accent */
.u-link-accent:hover{ color:var(--accent)!important; }
/* muted text link that brightens */
.u-link-bright:hover{ color:#eaf0f6!important; }
/* link with a trailing arrow — the gap opens on hover */
.u-nudge:hover{ gap:12px!important; }
/* lifting card */
.u-card:hover{
  transform:translateY(-4px)!important;
  border-color:color-mix(in oklch, var(--accent) 55%, transparent)!important;
  background:#0c1726!important;
}
/* lifting card, alternate accent (index alternates them down the grid) */
.u-card-alt:hover{
  transform:translateY(-4px)!important;
  border-color:color-mix(in oklch, var(--accent-alt) 55%, transparent)!important;
  background:#0c1726!important;
}
/* bordered chip / secondary button */
.u-chip:hover{
  border-color:var(--accent)!important;
  background:rgba(255,255,255,0.06)!important;
}
/* round icon button (audio player) */
.u-icon-btn:hover{
  background:color-mix(in oklch, var(--accent) 24%, transparent)!important;
}

/* ===== keyboard focus =====================================================
   The browser default ring is weak on this dark background.
   ========================================================================= */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ===== skip link ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#04080f;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  padding:12px 20px;border-radius:0 0 8px 0;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ===== reduced motion =====================================================
   Honour the OS setting: stop transforms, autoplay loops and smooth scroll.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
  .u-card:hover,.u-card-alt:hover,
  .u-btn-solid:hover,.u-btn-solid-sm:hover{transform:none!important;}
}