/* ============================================================
   Atani.ai — shared stylesheet
   Edit brand colours, fonts and animations here in ONE place.
   Layout/spacing lives inline on each element in the HTML.
   ============================================================ */

/* ---- Reset & base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#070B14;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(76,125,255,0.32)}
img{max-width:100%}

/* ---- Design tokens (brand colours) --------------------------------- */
:root{
  --accent:#4C7DFF;                                   /* primary brand blue  */
  --accent-2:color-mix(in oklab,var(--accent),white 32%); /* lighter blue   */
  --accent-soft:color-mix(in oklab,var(--accent),transparent 80%); /* glow   */
  --teal:#35D6B0;                                     /* secondary accent    */
  --amber:#FBBF24;                                    /* used on FMCG study  */
  --ink:#EEF1F7;                                      /* primary text        */
  --muted:#98A4B8;                                    /* body text           */
  --dim:#5C6878;                                      /* captions / labels   */
  --border:rgba(255,255,255,0.09);                    /* hairlines           */
}

/* ---- Form controls (Get started) ----------------------------------- */
input::placeholder,textarea::placeholder{color:#5C6878}
select option{background:#0F1626;color:#EEF1F7}

/* ---- Case-studies category filter ---------------------------------- */
button[data-filter]{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;cursor:pointer;padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,0.14);background:transparent;color:#98A4B8;transition:background .2s ease,color .2s ease,border-color .2s ease}
button[data-filter]:hover{border-color:var(--accent-2);color:#EEF1F7}
button[data-filter][data-active]{background:var(--accent);border-color:var(--accent);color:#fff}
a[data-category][data-off]{display:none !important}

/* ---- Keyframes ----------------------------------------------------- */
@keyframes ataniDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-40px)}}
@keyframes ataniDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,40px)}}
@keyframes ataniFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ataniFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes ataniPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes ataniScan{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
@keyframes ataniSweep{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes ataniProg27{0%{width:54%}50%{width:74%}100%{width:54%}}
@keyframes ataniProg08{0%{width:30%}50%{width:48%}100%{width:30%}}
@keyframes ataniDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@keyframes ataniDash{to{stroke-dashoffset:-24}}
@keyframes ataniSpin{to{transform:rotate(360deg)}}
@keyframes ataniPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ---- Scroll-reveal: handled in js/atani.js via inline transforms
   (kept transform-only so content is never stuck hidden). ----------- */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px){
  [data-atani-navlinks]{display:none!important;}
  [data-atani-burger]{display:flex!important;}
}
@media (max-width:600px){
  [style*="padding:0 32px"]{padding-left:20px!important;padding-right:20px!important;}
}

/* mobile: hero stats as centred 2-col grid */
@media (max-width:640px){
  [data-hero-stats]{display:grid!important;grid-template-columns:1fr 1fr;gap:0!important;text-align:center}
  [data-hero-stat]{padding:16px 8px}
  [data-hero-stat]:nth-child(1),[data-hero-stat]:nth-child(3){border-right:1px solid var(--border)}
  [data-hero-stat]:nth-child(1),[data-hero-stat]:nth-child(2){border-bottom:1px solid var(--border)}
  [data-hero-div]{display:none!important}
}
/* mobile: process steps as vertical timeline */
@media (max-width:640px){
  [data-process-grid]{position:relative;padding-left:34px;grid-template-columns:1fr!important}
  [data-process-grid]::before{content:'';position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--accent) 0%,color-mix(in oklab,var(--accent),transparent 60%) 100%)}
  [data-process-step]{position:relative}
  [data-process-step]::before{content:'';position:absolute;left:-32px;top:30px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #070B14;box-shadow:0 0 0 1px var(--border),0 0 12px -2px var(--accent)}
}
/* mobile: comparison table -> stacked labelled cards */
@media (max-width:640px){
  [data-cmp]{min-width:0!important;font-size:13px!important}
  [data-cmp] thead{display:none}
  [data-cmp],[data-cmp] tbody,[data-cmp] tr,[data-cmp] td{display:block;width:100%}
  [data-cmp] tr{border:1px solid var(--border);border-radius:12px;margin:0 0 12px;overflow:hidden;background:rgba(255,255,255,0.015)}
  [data-cmp] td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right;padding:11px 15px!important;border-bottom:1px solid rgba(255,255,255,0.05)!important;background:transparent!important}
  [data-cmp] td:last-child{border-bottom:0!important}
  [data-cmp] td:first-child{display:block;text-align:left;background:rgba(255,255,255,0.04)!important;font-size:13.5px;padding:12px 15px!important}
  [data-cmp] td:not(:first-child)::before{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:left;flex:1 1 auto;align-self:center}
  [data-cmp] td:nth-child(2)::before{content:'Traditional panel'}
  [data-cmp] td:nth-child(3)::before{content:'Fully synthetic AI'}
  [data-cmp] td:nth-child(4)::before{content:'Atani True Twins™'}
}
/* mobile: case-study "How we did it" instrument + spec table stack */
@media (max-width:760px){
  [data-howgrid]{grid-template-columns:1fr!important;gap:26px!important;margin-top:26px!important}
}

/* ---- Mobile menu nav links ----------------------------------------- */
[data-atani-mobilemenu] nav a{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
  padding:18px 0;
  border-bottom:1px solid var(--border);
}
[data-atani-mobilemenu] nav a:visited{color:var(--ink)}

/* ---- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important}
  [data-atani-reveal]{opacity:1!important;transform:none!important}
}