@charset "utf-8";
/* ==========================================================================
   WORKMOTION — Design System
   บริษัท เวิร์คโมชั่น จำกัด
   ========================================================================== */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:'Plex Thai';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-thai-thai-400.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Plex Thai';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-thai-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Thai';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-thai-thai-600.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Plex Thai';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-thai-latin-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Thai';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/plex-thai-thai-700.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Plex Thai';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/plex-thai-latin-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  /* brand — sampled from the WORKMOTION logo */
  --brand:#422979;
  --brand-700:#4F3882;
  --brand-600:#5E4795;
  --brand-400:#8B76C4;
  --brand-950:#1B1033;
  --brand-900:#2A1A4E;

  --accent:#E01C37;
  --accent-2:#BD1E50;
  --accent-soft:#FDECEF;

  --grad-accent:linear-gradient(135deg,#E8203A 0%,#BD1E50 100%);
  --grad-brand:linear-gradient(135deg,#422979 0%,#7A3E8E 55%,#E01C37 100%);

  /* surfaces */
  --bg:#ffffff;
  --bg-alt:#F7F6FB;
  --bg-deep:var(--brand-950);
  --surface:#ffffff;
  --surface-2:#FBFAFE;
  --border:#E7E4F0;
  --border-strong:#D6D1E6;

  /* text */
  --ink:#16112A;
  --ink-2:#4A4460;
  --ink-3:#726C88;
  --on-dark:#F4F2FA;
  --on-dark-2:#B9B2D4;

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(27,16,51,.05),0 2px 8px rgba(27,16,51,.04);
  --shadow:0 4px 12px rgba(27,16,51,.06),0 12px 32px rgba(27,16,51,.07);
  --shadow-lg:0 8px 24px rgba(27,16,51,.09),0 24px 64px rgba(27,16,51,.12);
  --shadow-brand:0 12px 32px rgba(66,41,121,.28);

  /* layout */
  --container:1180px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-y:clamp(4.5rem,9vw,8rem);
  --header-h:112px;      /* ตอนอยู่บนสุด — โลโก้เต็มตัวพร้อม tagline */
  --header-h-stuck:78px; /* ตอนเลื่อนลงแล้ว — หดให้ไม่กินจอ */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#120D22;
    --bg-alt:#180F2C;
    --bg-deep:#0C0818;
    --surface:#1B1433;
    --surface-2:#211939;
    --border:#2F2450;
    --border-strong:#3D2F63;
    --ink:#F2EFFA;
    --ink-2:#C3BCDC;
    --ink-3:#9990BA;
    --accent-soft:#33132096;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 4px 12px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.3);
    --shadow-lg:0 8px 24px rgba(0,0,0,.45),0 24px 64px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#120D22;
  --bg-alt:#180F2C;
  --bg-deep:#0C0818;
  --surface:#1B1433;
  --surface-2:#211939;
  --border:#2F2450;
  --border-strong:#3D2F63;
  --ink:#F2EFFA;
  --ink-2:#C3BCDC;
  --ink-3:#9990BA;
  --accent-soft:#33132096;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 12px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.3);
  --shadow-lg:0 8px 24px rgba(0,0,0,.45),0 24px 64px rgba(0,0,0,.4);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* หัวเว็บหดตอนเลื่อน จึงเผื่อระยะจากความสูงตอนหดไม่ใช่ตอนเต็ม */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-stuck) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  font-family:'Plex Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-weight:400;
  /* Thai needs a taller line box for tone marks + vowels */
  line-height:1.75;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
  word-break:normal;
  line-break:normal;
}

/* ---------- Typography ---------- */
/* Headings keep `overflow-wrap:normal` so Thai breaks on the browser's own
   word boundaries instead of mid-syllable the way break-word would. */
h1,h2,h3,h4{line-height:1.3;font-weight:700;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:normal}
.h-display{font-size:clamp(2rem,1.35rem + 2.9vw,3.1rem);line-height:1.24;letter-spacing:-.025em}
.h1{font-size:clamp(1.85rem,1.3rem + 2.3vw,2.75rem);line-height:1.26;letter-spacing:-.022em}
.h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);line-height:1.28;letter-spacing:-.02em}
.h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);line-height:1.35}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--ink-2);line-height:1.8;text-wrap:pretty}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
p{text-wrap:pretty}

.grad-text{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* keeps Thai descenders from being clipped */
  padding-bottom:.06em;
}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--bg-alt)}
.section--deep{background:var(--bg-deep);color:var(--on-dark)}
.section--deep .lead,.section--deep .muted{color:var(--on-dark-2)}

.stack>*+*{margin-top:1rem}
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}

.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.75rem;height:2px;border-radius:2px;background:var(--grad-accent)}
.section-head--center .eyebrow::before{display:none}
.section--deep .eyebrow{color:#FF7A8F}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;
  font-weight:600;font-size:.9875rem;line-height:1.3;
  border:1px solid var(--btn-bd);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;width:1.125em;height:1.125em}

.btn--primary{background:var(--grad-accent);box-shadow:0 8px 24px rgba(224,28,55,.3)}
.btn--primary:hover{box-shadow:0 12px 32px rgba(224,28,55,.42)}
.btn--brand{background:var(--brand);box-shadow:var(--shadow-brand)}
.btn--brand:hover{background:var(--brand-600)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--surface-2)}
.section--deep .btn--ghost,.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.section--deep .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.btn--lg{padding:1rem 2rem;font-size:1.0625rem}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.section-head--center .btn-row{justify-content:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;color:var(--brand);
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.link-arrow svg{width:1.05em;height:1.05em;flex:none;transition:transform .25s var(--ease)}
.link-arrow:hover{gap:.65rem;color:var(--accent)}
:root[data-theme="dark"] .link-arrow,
:root:not([data-theme="light"]) .link-arrow{color:var(--brand-400)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .link-arrow{color:var(--brand)}}

/* focus ring */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),height .3s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{display:flex;align-items:center;gap:1.5rem;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.header.is-stuck{
  height:var(--header-h-stuck);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--border);
  box-shadow:0 1px 24px rgba(27,16,51,.07);
}

/* Logo — the real wordmark, in a white and a purple cut.
   Which one shows depends on how dark the surface behind it is. */
.logo{display:flex;align-items:center;flex:none}
/* โลโก้มี tagline อยู่ข้างใน ตัวอักษร WORKMOTION เลยกินความสูงแค่ราวสองในสาม
   จึงต้องตั้งความสูงเผื่อไว้มากกว่าโลโก้ที่มีแต่ wordmark */
.logo img{height:76px;width:auto;vertical-align:middle;transition:height .3s var(--ease)}
.header.is-stuck .logo img{height:54px}
.footer .logo img{height:86px}
@media (max-width:900px){
  .logo img{height:58px}
  .header.is-stuck .logo img{height:46px}
  .footer .logo img{height:64px}
}
@media (max-width:600px){
  .logo img{height:46px}
  .header.is-stuck .logo img{height:40px}
}
/* the two cuts are stacked in the markup — exactly one is ever shown.
   these selectors carry a class+element so they outrank `.logo img` above. */
.logo img.logo__img--dark{display:none}
.logo img.logo__img--light{display:block}
/* once the header sits on the page background it needs the purple mark */
.header.is-stuck .logo img.logo__img--light{display:none}
.header.is-stuck .logo img.logo__img--dark{display:block}
/* …unless that background is dark too */
:root[data-theme="dark"] .header.is-stuck .logo img.logo__img--light{display:block}
:root[data-theme="dark"] .header.is-stuck .logo img.logo__img--dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .header.is-stuck .logo img.logo__img--light{display:block}
  :root:not([data-theme="light"]) .header.is-stuck .logo img.logo__img--dark{display:none}
}

/* Nav */
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:.35rem}
.nav__link{
  position:relative;padding:.5rem .85rem;border-radius:var(--r-sm);
  font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.82);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.header.is-stuck .nav__link{color:var(--ink-2)}
.nav__link:hover,.nav__link.is-active{color:#fff;background:rgba(255,255,255,.1)}
.header.is-stuck .nav__link:hover,.header.is-stuck .nav__link.is-active{color:var(--brand);background:var(--bg-alt)}
:root[data-theme="dark"] .header.is-stuck .nav__link:hover,
:root[data-theme="dark"] .header.is-stuck .nav__link.is-active{color:var(--brand-400)}

.header__actions{display:flex;align-items:center;gap:.6rem;flex:none}

.icon-btn{
  display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.icon-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px}
.header.is-stuck .icon-btn{border-color:var(--border-strong);background:var(--surface);color:var(--ink-2)}
.header.is-stuck .icon-btn:hover{color:var(--brand);border-color:var(--brand)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}

.nav-toggle{display:none}
.header__cta{display:inline-flex}

@media (max-width:1000px){
  .nav{
    /* วางชิดใต้ header เสมอ ไม่ต้องคำนวณความสูงเอง
       เพราะ header หดตอนเลื่อน ถ้า fix ตัวเลขไว้จะเกิดช่องว่าง */
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.25rem;
    padding:1rem var(--gutter) 1.5rem;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__link,.header.is-stuck .nav__link{color:var(--ink);font-size:1.0625rem;padding:.8rem 1rem}
  .nav__link:hover,.nav__link.is-active,
  .header.is-stuck .nav__link:hover,.header.is-stuck .nav__link.is-active{background:var(--bg-alt);color:var(--brand)}
  .nav-toggle{display:inline-grid}
  .header__cta{display:none}
  .nav .btn{margin-top:.75rem}
}
@media (min-width:1001px){.nav .btn{display:none}}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:clip;
  background:var(--brand-950);
  color:#fff;
  padding-block:calc(var(--header-h) + clamp(3.5rem,8vw,6.5rem)) clamp(4rem,8vw,7rem);
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.hero__orb--1{width:44rem;height:44rem;top:-16rem;right:-12rem;background:radial-gradient(circle,#7A3E8E 0%,transparent 68%);animation:float1 22s var(--ease) infinite alternate}
.hero__orb--2{width:36rem;height:36rem;bottom:-14rem;left:-10rem;background:radial-gradient(circle,#E01C37 0%,transparent 66%);opacity:.36;animation:float2 27s var(--ease) infinite alternate}
.hero__orb--3{width:28rem;height:28rem;top:22%;left:38%;background:radial-gradient(circle,#422979 0%,transparent 70%);opacity:.6;animation:float1 19s var(--ease) infinite alternate-reverse}
@keyframes float1{to{transform:translate3d(-6%,8%,0) scale(1.12)}}
@keyframes float2{to{transform:translate3d(8%,-7%,0) scale(1.15)}}

/* fine grid overlay */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 20%,transparent 78%);
}
.hero__inner{position:relative;display:grid;gap:clamp(3rem,6vw,4.5rem);grid-template-columns:1fr}
@media (min-width:960px){
  .hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
}

.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.45rem 1rem .45rem .55rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.9);
}
.badge__dot{
  width:1.45rem;height:1.45rem;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--grad-accent);
}
.badge__dot svg{width:.8rem;height:.8rem;stroke:#fff}

.hero h1{margin-block:1.5rem 1.25rem;color:#fff}
.hero__lead{font-size:clamp(1.05rem,1rem + .45vw,1.28rem);color:rgba(244,242,250,.78);line-height:1.8;max-width:36rem}
.hero .btn-row{margin-top:2.25rem}

.hero__trust{
  margin-top:3rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:34rem;
}
.hero__trust dt{font-size:clamp(1.6rem,1.3rem + 1.1vw,2.15rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;
  background:linear-gradient(135deg,#fff 20%,#C9B8F0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__trust dd{margin:.35rem 0 0;font-size:.8125rem;color:rgba(244,242,250,.62);line-height:1.5}

/* hero visual */
.hero__visual{position:relative;display:grid;gap:1rem}
.glass{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--r-lg);
  box-shadow:0 24px 64px rgba(0,0,0,.34);
}
.code-card{padding:0;overflow:hidden}
.code-card__bar{display:flex;align-items:center;gap:.45rem;padding:.85rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.1)}
.code-card__bar i{width:.7rem;height:.7rem;border-radius:50%;background:rgba(255,255,255,.24)}
.code-card__bar i:first-child{background:#FF5F57}
.code-card__bar i:nth-child(2){background:#FEBC2E}
.code-card__bar i:nth-child(3){background:#28C840}
.code-card__file{margin-inline-start:auto;font-size:.75rem;color:rgba(255,255,255,.5)}
.code-card pre{
  margin:0;padding:1.25rem 1.35rem;overflow-x:auto;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.8125rem;line-height:1.85;color:#D9D2F0;tab-size:2;
}
.code-card .c-key{color:#C792EA}
.code-card .c-fn{color:#82AAFF}
.code-card .c-str{color:#F78C6C}
.code-card .c-com{color:#6E6A86;font-style:italic}
.code-card .c-num{color:#F78C6C}

.hero__chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.82);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.chip:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}

/* wave divider */
.hero__wave{position:absolute;bottom:-1px;left:0;width:100%;height:auto;z-index:1;fill:var(--bg);pointer-events:none}

/* ---------- Cards ---------- */
.card{
  position:relative;isolation:isolate;
  padding:clamp(1.5rem,2.6vw,2rem);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
  height:100%;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--grad-accent);
  opacity:0;transition:opacity .35s var(--ease-out);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.card:hover::before{opacity:1}
.card__icon{
  width:3.25rem;height:3.25rem;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r);
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));
  color:var(--brand);
  margin-bottom:1.25rem;
  transition:transform .35s var(--ease-out);
}
.card:hover .card__icon{transform:scale(1.07) rotate(-4deg)}
.card__icon svg{width:1.6rem;height:1.6rem}
:root[data-theme="dark"] .card__icon{color:var(--brand-400)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card__icon{color:var(--brand-400)}}
.card h3{margin-bottom:.6rem}
.card p{color:var(--ink-2);font-size:.9375rem}
.card__list{margin-top:1.1rem;display:grid;gap:.5rem}
.card__list li{position:relative;padding-inline-start:1.5rem;font-size:.875rem;color:var(--ink-3);line-height:1.65}
.card__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--grad-accent);
}

/* feature card (larger, spans) */
.card--wide{display:grid;gap:1.5rem}
@media (min-width:720px){.card--wide{grid-template-columns:auto 1fr;align-items:start}
  .card--wide .card__icon{margin-bottom:0}}

/* ---------- Process ---------- */
.steps{counter-reset:step;display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.step{position:relative;padding:clamp(1.5rem,2.6vw,2rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step__num{
  font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.04em;
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.9;margin-bottom:.85rem;display:block;
}
.step h3{margin-bottom:.55rem}
.step p{color:var(--ink-2);font-size:.9375rem}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(1.25rem,3vw,2.5rem);text-align:center}
.stat__num{font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.section--deep .stat__num{background:linear-gradient(135deg,#fff 15%,#C9B8F0 100%);-webkit-background-clip:text;background-clip:text}
.stat__label{margin-top:.4rem;font-size:.9375rem;color:var(--ink-3)}
.section--deep .stat__label{color:var(--on-dark-2)}

/* ---------- Marquee (client logos) ----------
   Every logo sits in an identical white tile: the source images have wildly
   different aspect ratios and baked-in background colours, so a fixed box
   with object-fit:contain is the only way to make the row read as one set. */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;gap:1rem;animation:marquee 55s linear infinite}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .marquee__track{animation:none}
}

.marquee__item{
  flex:none;
  width:150px;height:92px;padding:.85rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  opacity:.9;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease);
}
/* the image fills the padded box and contain-scales inside it — a percentage
   max-height would not resolve against an auto-sized track and the logos
   would spill past the tile */
.marquee__item img{
  width:100%;height:100%;object-fit:contain;object-position:center;
}
.marquee__item:hover{
  opacity:1;
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
@media (max-width:600px){.marquee__item{width:124px;height:78px;padding:.7rem}}

/* ---------- Split / feature rows ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--flip>*:first-child{order:2}
}
.checklist{display:grid;gap:.85rem;margin-top:1.75rem}
.checklist li{display:flex;gap:.8rem;align-items:flex-start;font-size:.9688rem;color:var(--ink-2);line-height:1.7}
.checklist svg{
  width:1.4rem;height:1.4rem;flex:none;margin-top:.22em;padding:.22rem;
  border-radius:50%;background:var(--grad-accent);color:#fff;
}

.panel{
  padding:clamp(1.75rem,3.5vw,2.75rem);
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.panel--gradient{
  background:var(--grad-brand);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-brand);
}
.panel--gradient .lead{color:rgba(255,255,255,.85)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.85rem;max-width:52rem;margin-inline:auto}
.faq__item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq__item[open]{border-color:var(--brand-400);box-shadow:var(--shadow-sm)}
.faq__item summary{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.15rem 1.35rem;cursor:pointer;font-weight:600;font-size:1.0313rem;line-height:1.6;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:.7rem;height:.7rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-25%);
  transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.faq__answer{padding:0 1.35rem 1.35rem;color:var(--ink-2);font-size:.9688rem}

/* ---------- Contact / form ---------- */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

.contact-list{display:grid;gap:1.5rem;margin-top:2rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.contact-item__icon{
  width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 13%,transparent),color-mix(in srgb,var(--accent) 13%,transparent));
  color:var(--brand);
}
:root[data-theme="dark"] .contact-item__icon{color:var(--brand-400)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact-item__icon{color:var(--brand-400)}}
.contact-item__icon svg{width:1.3rem;height:1.3rem}
.contact-item dt{font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.contact-item dd{margin:.15rem 0 0;font-size:1.0313rem;font-weight:500;line-height:1.65}
.contact-item a:hover{color:var(--accent)}

.form{display:grid;gap:1.1rem}
.form__row{display:grid;gap:1.1rem}
@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.45rem}
.field label{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
  font-size:.9688rem;line-height:1.6;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:8rem}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent);
}
.form__note{font-size:.8125rem;color:var(--ink-3);line-height:1.6}
.form__status{
  display:none;padding:.85rem 1.1rem;border-radius:var(--r-sm);font-size:.9063rem;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
.form__status.is-shown{display:block}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);
  padding:clamp(2.5rem,5.5vw,4.5rem);
  background:var(--grad-brand);
  color:#fff;text-align:center;
  box-shadow:var(--shadow-brand);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle at 82% 78%,rgba(255,255,255,.12),transparent 42%);
}
.cta-band h2{color:#fff;margin-bottom:1rem}
.cta-band p{color:rgba(255,255,255,.85);max-width:38rem;margin-inline:auto}
.cta-band .btn-row{justify-content:center;margin-top:2rem}
.cta-band .btn--primary{background:#fff;color:var(--brand);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.cta-band .btn--primary:hover{background:#fff;color:var(--accent);box-shadow:0 14px 38px rgba(0,0,0,.28)}

/* ---------- Footer ---------- */
.footer{background:var(--brand-950);color:var(--on-dark);padding-block:clamp(3.5rem,7vw,5rem) 0}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.footer__brand{max-width:22rem}
.footer__brand p{margin-top:1.25rem;color:rgba(244,242,250,.62);font-size:.9063rem;line-height:1.75}
.footer h4{font-size:.8125rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,242,250,.55);margin-bottom:1.15rem}
.footer__links{display:grid;gap:.7rem}
.footer__links a{color:rgba(244,242,250,.78);font-size:.9375rem;transition:color .2s var(--ease),padding-inline-start .2s var(--ease)}
.footer__links a:hover{color:#fff;padding-inline-start:.3rem}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.75rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-size:.8438rem;color:rgba(244,242,250,.5);
}
.socials{display:flex;gap:.6rem}
.socials a{
  width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8);
  transition:background-color .25s var(--ease),transform .25s var(--ease),color .25s var(--ease);
}
.socials a:hover{background:var(--grad-accent);color:#fff;border-color:transparent;transform:translateY(-3px)}
.socials svg{width:1.05rem;height:1.05rem}

/* ---------- Page header (subpages) ---------- */
.page-head{
  position:relative;isolation:isolate;overflow:clip;
  background:var(--brand-950);color:#fff;
  padding-block:calc(var(--header-h) + clamp(3rem,6vw,4.5rem)) clamp(3rem,6vw,4.5rem);
}
.page-head .hero__bg{z-index:-2}
.page-head h1{color:#fff;margin-block:.85rem .85rem}
.page-head .lead{color:rgba(244,242,250,.76);max-width:44rem}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.8438rem;color:rgba(244,242,250,.55)}
.breadcrumb a{transition:color .2s var(--ease)}
.breadcrumb a:hover{color:#fff}
.breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb li+li::before{content:"/";color:rgba(255,255,255,.3)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;inset-block-end:1.5rem;inset-inline-end:1.5rem;z-index:90;
  width:2.9rem;height:2.9rem;display:grid;place-items:center;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--grad-accent);color:#fff;
  box-shadow:0 8px 24px rgba(224,28,55,.35);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:1.15rem;height:1.15rem}

/* ---------- Utility ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;top:0;inset-inline-start:0;z-index:200;
  transform:translateY(-120%);
  padding:.8rem 1.4rem;background:var(--accent);color:#fff;font-weight:600;
  border-radius:0 0 var(--r-sm) 0;transition:transform .2s var(--ease);
}
.skip-link:focus{transform:none}
.text-center{text-align:center}
.mt-lg{margin-top:clamp(2.5rem,5vw,4rem)}
.mt-md{margin-top:clamp(1.5rem,3vw,2.5rem)}
.divider{height:1px;background:var(--border);border:0;margin-block:clamp(2.5rem,5vw,4rem)}
[hidden]{display:none!important}

/* keep body from scrolling when the mobile nav is open */
body.nav-open{overflow:hidden}

/* print */
@media print{
  .header,.to-top,.hero__bg,.footer,.cta-band{display:none!important}
  body{color:#000;background:#fff}
}