:root{
  --bg: #07060a;
  --bg2: #0b0a10;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --line: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --shadow2: 0 16px 50px rgba(0,0,0,.35);
  --r: 18px;
  --r2: 24px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: "Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --a: #7c3aed;
  --b: #22d3ee;
  --c: #60a5fa;

  color-scheme: dark;
}

/* light theme */
html[data-theme="light"]{
  --bg: #f7f7fb;
  --bg2: #ffffff;
  --panel: rgba(10,10,20,.06);
  --panel2: rgba(10,10,20,.04);
  --line: rgba(10,10,20,.12);
  --text: rgba(10,10,18,.92);
  --muted: rgba(10,10,18,.64);
  --shadow: 0 24px 70px rgba(10,10,20,.16);
  --shadow2: 0 18px 50px rgba(10,10,20,.10);

  color-scheme: light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  min-height:100svh;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background: rgba(124,58,237,.35)}

.container{width:min(1120px, calc(100% - 2rem)); margin-inline:auto}

/* background */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.bg__blob{
  position:absolute; width:52vmax; height:52vmax; filter:blur(60px);
  opacity:.35; border-radius:999px;
  animation: drift 26s ease-in-out infinite;
}
.bg__blob--a{left:-18vmax; top:-22vmax; background:radial-gradient(circle at 30% 30%, var(--a), transparent 60%)}
.bg__blob--b{right:-18vmax; bottom:-24vmax; background:radial-gradient(circle at 60% 50%, var(--b), transparent 60%); animation-duration:33s}
.bg__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 15%, black 0%, transparent 60%);
  opacity:.22;
}
html[data-theme="light"] .bg__grid{opacity:.10}
.bg__noise{
  position:absolute; inset:0; opacity:.045; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
html[data-theme="light"] .bg__noise{opacity:.03}

@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5vmax, 3vmax, 0) scale(1.08)}
}

/* header */
.topbar{
  position:sticky; top:0; z-index:20;
  padding: .8rem 0;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 85%, transparent), color-mix(in oklab, var(--bg) 35%, transparent));
  border-bottom:1px solid color-mix(in oklab, var(--line) 55%, transparent);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.topbar__actions{display:flex; align-items:center; gap:.35rem}

.brand{display:flex; align-items:center; gap:.7rem}
.brand__mark{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800;
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 35%, transparent), color-mix(in oklab, var(--b) 18%, transparent));
  border:1px solid color-mix(in oklab, var(--line) 75%, transparent);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--a) 18%, transparent);
}
.brand__name{font-family:var(--display); font-weight:800; letter-spacing:-.02em}

.nav{display:flex; gap:.25rem; align-items:center}
.nav__link{
  padding:.55rem .85rem;
  border-radius:999px;
  color:color-mix(in oklab, var(--text) 92%, transparent);
  font-size:.95rem;
  border:1px solid transparent;
}
.nav__link:hover{background:var(--panel); border-color:var(--line)}
.nav__link--cta{
  background:var(--panel);
  border-color:var(--line);
}

.theme{
  background:transparent; border:1px solid transparent; cursor:pointer;
  width:44px; height:44px; border-radius:14px;
  color:color-mix(in oklab, var(--text) 92%, transparent);
}
.theme:hover{background:var(--panel); border-color:var(--line)}
.theme__icon{font-size:1.05rem}

.burger{
  display:none; background:transparent; border:1px solid transparent; cursor:pointer;
  width:44px; height:44px; border-radius:14px;
}
.burger:hover{background:var(--panel); border-color:var(--line)}
.burger span{
  display:block; width:20px; height:2px; background:color-mix(in oklab, var(--text) 90%, transparent);
  margin:5px auto; border-radius:2px;
}

/* mobile menu */
.mobile{border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent)}
.mobile__inner{display:grid; gap:.4rem; padding:1rem 0}
.mobile__link{
  padding:.85rem 1rem; border-radius:14px;
  background:var(--panel2); border:1px solid var(--line);
}
.mobile__link:hover{background:var(--panel)}
.mobile__link--cta{background: color-mix(in oklab, var(--a) 20%, transparent); border-color: color-mix(in oklab, var(--a) 35%, transparent)}

/* hero */
.hero{padding: 4.2rem 0 0}
.hero--page{padding: 3.4rem 0 0}
.hero__inner{display:grid; grid-template-columns: 1.25fr .9fr; gap:2rem; align-items:center; padding: 1.5rem 0 1.75rem}
.hero__inner--page{grid-template-columns: 1.2fr .8fr; padding-top: 1rem}
.hero__aside{justify-self:end; width:100%}

.pill{
  display:inline-flex; gap:.55rem; align-items:center;
  padding:.45rem .75rem; border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:color-mix(in oklab, var(--text) 80%, transparent);
  font-size:.9rem;
}
.pill--soft{background:var(--panel2); border-color:color-mix(in oklab, var(--line) 70%, transparent)}
.dot{width:10px; height:10px; border-radius:999px; background:color-mix(in oklab, var(--a) 95%, white 10%); box-shadow:0 0 0 6px color-mix(in oklab, var(--a) 14%, transparent)}
.hero__title{
  margin:.9rem 0 .4rem;
  font-family:var(--display);
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  letter-spacing:-.04em;
  line-height:1.05;
}
.grad{
  background: linear-gradient(90deg, color-mix(in oklab, var(--a) 95%, white 10%), color-mix(in oklab, var(--c) 95%, white 10%), color-mix(in oklab, var(--b) 95%, white 10%));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow: 0 0 60px color-mix(in oklab, var(--a) 20%, transparent);
}
.hero__lead{color:var(--muted); font-size:1.05rem; line-height:1.7; max-width:60ch}
.hero__actions{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.1rem 0 1.15rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding:.9rem 1.1rem;
  border:1px solid var(--line);
  font-weight:700;
  letter-spacing:-.01em;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn--primary{
  background: color-mix(in oklab, var(--text) 92%, white 4%);
  color: color-mix(in oklab, var(--bg) 92%, black 10%);
  border-color: color-mix(in oklab, var(--line) 80%, white 10%);
}
html[data-theme="light"] .btn--primary{background: #0c0b14; color:white; border-color: rgba(0,0,0,.2)}
.btn--primary:hover{box-shadow: 0 18px 50px color-mix(in oklab, var(--a) 14%, transparent)}
.btn--ghost{
  background:var(--panel2);
  color:var(--text);
}
.btn--ghost:hover{background:var(--panel)}
.btn--block{width:100%}

.stats{
  display:flex; gap:1rem; flex-wrap:wrap; margin:0;
  padding:0; list-style:none;
}
.stats__item{
  min-width: 140px;
  padding:.8rem .9rem;
  border-radius: 16px;
  background:var(--panel2);
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
}
.stats dt{
  font-family:var(--display);
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.stats dd{
  margin:.1rem 0 0;
  color:var(--muted);
  font-size:.9rem;
}

/* trust */
.trust{margin-top:1rem}
.logos{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem}
.logo{
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  font-size:.78rem;
  color:color-mix(in oklab, var(--text) 82%, transparent);
}

/* hero card */
.hero__card{justify-self:end; width:100%}
.card{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: linear-gradient(135deg, var(--panel), var(--panel2));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card--glow{position:relative}
.card--glow::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--a) 30%, transparent), transparent 55%),
              radial-gradient(circle at 80% 65%, color-mix(in oklab, var(--b) 24%, transparent), transparent 60%);
  opacity:.9;
}
.card__top{display:flex; justify-content:space-between; gap:.5rem; padding:1rem 1rem .8rem; position:relative; z-index:1}
.chip, .badge{
  font-size:.8rem; padding:.35rem .6rem; border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:color-mix(in oklab, var(--text) 78%, transparent);
}
.badge{border-color: color-mix(in oklab, var(--b) 22%, var(--line)); background: color-mix(in oklab, var(--b) 10%, transparent)}
.card__canvas{padding:0 1rem 1rem; position:relative; z-index:1}
.mini{
  border-radius: 18px;
  border:1px solid color-mix(in oklab, var(--line) 90%, transparent);
  background: color-mix(in oklab, var(--bg) 65%, black 10%);
  padding:1rem;
  position:relative;
  overflow:hidden;
}
.mini__bar{height:14px; border-radius:999px; background: linear-gradient(90deg, color-mix(in oklab, var(--a) 85%, white 10%), color-mix(in oklab, var(--b) 75%, white 10%)); width:72%}
.mini__bar--soft{margin-top:.6rem; opacity:.55; width:48%}
.mini__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1rem}
.mini__tile{
  height:56px; border-radius:14px;
  background:var(--panel2);
  border:1px solid var(--line);
}
.mini__spark{
  position:absolute; inset:-40%;
  background: conic-gradient(from 180deg, transparent, color-mix(in oklab, var(--a) 18%, transparent), transparent, color-mix(in oklab, var(--b) 14%, transparent), transparent);
  animation: spin 10s linear infinite;
  opacity:.7;
}
@keyframes spin{to{transform:rotate(360deg)}}

.card__bottom{padding: 0 1rem 1rem; position:relative; z-index:1}
.card__title{margin:0; font-family:var(--display); font-weight:800}
.card__desc{margin:.35rem 0 .6rem; color:var(--muted); line-height:1.6}
.link{color: color-mix(in oklab, var(--a) 70%, var(--b) 30%); font-weight:800}
.link:hover{text-decoration:underline; text-underline-offset:4px}

/* marquee */
.marquee{
  border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--line) 55%, transparent);
  background: color-mix(in oklab, var(--panel2) 65%, transparent);
  overflow:hidden;
}
.marquee__track{
  display:flex; gap:2.2rem;
  padding:.9rem 0;
  width:max-content;
  will-change: transform;
  animation: marquee var(--marquee-duration, 18s) linear infinite;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.75rem;
}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--marquee-distance, 50%)))} }

/* sections */
.section{padding: 4.5rem 0}
.section--alt{
  background: linear-gradient(to bottom, color-mix(in oklab, var(--a) 10%, transparent), color-mix(in oklab, var(--bg) 100%, transparent));
  border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--line) 55%, transparent);
}
.section__head{margin-bottom:1.6rem}
.section__spacer{height:1.6rem}
.kicker{
  color: color-mix(in oklab, var(--b) 85%, var(--text) 10%);
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:900; font-size:.75rem;
  margin:0 0 .5rem;
}
.section__head h2{
  margin:0 0 .35rem;
  font-family:var(--display);
  letter-spacing:-.03em;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
.muted{margin:0; color: var(--muted); line-height:1.7}
.tiny{font-size:.85rem}

/* grids */
.grid{display:grid; gap:1rem}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.panel{
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--panel2);
  padding:1.25rem 1.15rem;
  box-shadow: var(--shadow2);
}
.panel__icon{font-size:1.4rem; margin-bottom:.35rem}
.panel h3{margin:.2rem 0 .4rem; font-family:var(--display); letter-spacing:-.02em}
.panel p{margin:0 0 .8rem; color:var(--muted); line-height:1.7}

/* lists */
.list{margin:.7rem 0 0; padding-left:1.05rem; color:var(--muted)}
.list li{margin:.28rem 0}
.list--ol{padding-left:1.35rem}
.checks{margin:.7rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem; color:var(--muted)}
.checks li{display:flex; gap:.55rem; align-items:flex-start}
.checks li::before{
  content:"✓";
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  margin-top:.05rem;
  background: color-mix(in oklab, var(--a) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--a) 35%, transparent);
  color:color-mix(in oklab, var(--text) 90%, transparent);
  font-weight:900;
  flex:0 0 auto;
}

/* split layout */
.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem; align-items:start; margin-top:1.6rem}
.split--reverse{grid-template-columns: .9fr 1.1fr}
.split--reverse .split__copy{order:2}
.split__card{justify-self:end; width:100%}

.glass{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: linear-gradient(135deg, var(--panel), var(--panel2));
  box-shadow: var(--shadow2);
  padding: 1.1rem 1.1rem 1rem;
}
.glass__title{margin:0 0 .4rem; font-family:var(--display); font-weight:900; letter-spacing:-.02em}

.split__actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem}

/* work */
.work{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.work--home .workcard{cursor:pointer}
.work--grid{grid-template-columns:1fr; gap:1.1rem}
.workcard{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  overflow:hidden;
  transition: transform .14s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow2);
  display:block;
}
.workcard:hover{transform: translateY(-2px); border-color: color-mix(in oklab, var(--a) 28%, var(--line)); background: var(--panel); box-shadow: var(--shadow)}
.workcard__media{height:160px; position:relative}
.shot{position:absolute; inset:0}
.shot--a{background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--b) 35%, transparent), transparent 60%), radial-gradient(circle at 70% 60%, color-mix(in oklab, var(--a) 35%, transparent), transparent 60%), linear-gradient(135deg, var(--panel), var(--panel2))}
.shot--b{background: radial-gradient(circle at 40% 40%, rgba(249,115,22,.22), transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--b) 25%, transparent), transparent 60%), linear-gradient(135deg, var(--panel), var(--panel2))}
.shot--c{background: radial-gradient(circle at 30% 60%, rgba(99,102,241,.26), transparent 60%), radial-gradient(circle at 75% 35%, rgba(236,72,153,.22), transparent 60%), linear-gradient(135deg, var(--panel), var(--panel2))}
.workcard__body{padding:1rem}
.workcard__body h3{margin:.1rem 0 .35rem; font-family:var(--display); letter-spacing:-.02em}
.workcard__body p{margin:0 0 .7rem; color:var(--muted); line-height:1.65}
.tags{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{
  font-size:.75rem; padding:.25rem .55rem; border-radius:999px;
  border:1px solid var(--line);
  background: var(--panel2);
  color: color-mix(in oklab, var(--text) 78%, transparent);
}

/* cases */
.case{
  display:grid; grid-template-columns: 360px 1fr; gap:1.1rem;
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.case__media{position:relative; min-height:220px}
.case__body{padding:1.05rem 1.05rem 1rem}
.case__body h2{margin:.05rem 0 .35rem; font-family:var(--display); letter-spacing:-.02em}
.case__meta{display:flex; flex-wrap:wrap; gap:.45rem; margin:.7rem 0 .25rem}

/* steps */
.steps{display:grid; gap:.8rem; padding:0; margin:0; list-style:none}
.step{
  display:grid; grid-template-columns: 70px 1fr;
  gap:1rem;
  padding:1rem 1.05rem;
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--panel2);
  box-shadow: var(--shadow2);
}
.step__nr{
  font-family:var(--display); font-weight:900; letter-spacing:-.04em;
  font-size:1.15rem;
  color: color-mix(in oklab, var(--a) 70%, var(--b) 20%);
}
.step__body h3{margin:.05rem 0 .3rem; font-family:var(--display); letter-spacing:-.02em}
.step__body p{margin:0; color:var(--muted); line-height:1.7}

/* timeline */
.timeline{display:grid; gap:.6rem; margin-top:.6rem}
.timeline__item{display:flex; gap:.6rem; align-items:flex-start}
.timeline__dot{
  width:12px; height:12px; border-radius:999px;
  margin-top:.35rem;
  background: color-mix(in oklab, var(--b) 50%, var(--a) 30%);
  box-shadow:0 0 0 6px color-mix(in oklab, var(--b) 12%, transparent);
  flex:0 0 auto;
}

/* pricing */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; align-items:stretch}
.price{
  position:relative;
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  padding:1.2rem 1.1rem 1.1rem;
  box-shadow: var(--shadow2);
}
.price h3{margin:.1rem 0 .4rem; font-family:var(--display); letter-spacing:-.02em}
.price__value{
  margin:0 0 .2rem;
  font-family:var(--display);
  font-size:1.7rem;
  letter-spacing:-.03em;
  font-weight:900;
}
.price__value span{font-size:.95rem; font-weight:700; color:var(--muted)}
.price__desc{margin:.25rem 0 .9rem; color:var(--muted); line-height:1.7}
.price--featured{
  border-color: color-mix(in oklab, var(--a) 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 16%, transparent), color-mix(in oklab, var(--b) 7%, transparent));
  box-shadow: 0 40px 120px color-mix(in oklab, var(--a) 14%, transparent);
}
.ribbon{
  position:absolute; right:14px; top:14px;
  font-size:.75rem; font-weight:900;
  padding:.35rem .6rem; border-radius:999px;
  background: color-mix(in oklab, var(--text) 92%, white 4%);
  color: color-mix(in oklab, var(--bg) 92%, black 10%);
}
.note{
  margin-top:1rem;
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--panel2);
  padding:1rem 1.05rem;
  box-shadow: var(--shadow2);
}

/* compare table */
.tablewrap{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  overflow:auto;
  box-shadow: var(--shadow2);
}
.table{width:100%; border-collapse:collapse; min-width:680px}
.table th, .table td{padding:.85rem .9rem; border-bottom:1px solid color-mix(in oklab, var(--line) 70%, transparent); text-align:left}
.table th{font-family:var(--display); font-weight:900}
.table tr:hover td{background: color-mix(in oklab, var(--panel) 85%, transparent)}

/* FAQ */
.faq{display:grid; gap:.6rem}
.faq__item{
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--panel2);
  padding:.9rem 1rem;
  box-shadow: var(--shadow2);
}
.faq__item summary{cursor:pointer; font-weight:900; font-family:var(--display); letter-spacing:-.01em}
.faq__item p{margin:.55rem 0 0}

/* blog */
.blog{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.post{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  padding:1.05rem 1.05rem 1rem;
  box-shadow: var(--shadow2);
  transition: transform .14s ease, background .2s ease, border-color .2s ease;
}
.post:hover{transform: translateY(-2px); background: var(--panel); border-color: color-mix(in oklab, var(--a) 28%, var(--line))}
.post__tag{
  display:inline-block;
  font-size:.75rem; font-weight:900;
  padding:.25rem .55rem; border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--a) 12%, transparent);
  margin-bottom:.55rem;
}
.post h3{margin:.05rem 0 .35rem; font-family:var(--display); letter-spacing:-.02em}

/* articles */
.article{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  padding:1.2rem 1.15rem 1.1rem;
  box-shadow: var(--shadow2);
}
.article + .article{margin-top:1rem}
.article h2{font-family:var(--display); letter-spacing:-.02em; margin:.1rem 0 .5rem}
.article p{margin:.5rem 0 0; color:var(--muted)}
.article ul, .article ol{color:var(--muted)}

/* contact */
.contact{display:grid; grid-template-columns: 1.15fr .85fr; gap:1rem; align-items:start}
.form{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  padding: 1.1rem;
  box-shadow: var(--shadow2);
}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
label{display:grid; gap:.35rem; margin:.8rem 0}
label span{font-weight:900; color:color-mix(in oklab, var(--text) 84%, transparent); font-size:.95rem}
input, textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 65%, black 10%);
  color: var(--text);
  padding:.85rem .9rem;
  font: inherit;
  outline:none;
}
html[data-theme="light"] input, html[data-theme="light"] textarea{background:white}
input:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--b) 45%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--b) 12%, transparent);
}
.form__actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}

.aside{display:grid; gap:1rem}
.aside__box{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--panel2);
  padding: 1.05rem 1.05rem 1rem;
  box-shadow: var(--shadow2);
}
.aside__box h3{margin:.1rem 0 .25rem; font-family:var(--display)}
.aside__links{display:grid; gap:.35rem; margin-top:.6rem}

/* values */
.values{display:grid; gap:.65rem; margin-top:.6rem}
.value{display:flex; gap:.7rem; align-items:flex-start}
.value__icon{
  width:36px; height:36px; border-radius:14px;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--a) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--a) 25%, var(--line));
  flex:0 0 auto;
}

.miniquote{
  margin-top:.8rem;
  border-radius: 18px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  padding:.85rem .9rem;
}
.miniquote p{margin:0; font-weight:700; letter-spacing:-.01em}
.miniquote span{display:block; margin-top:.35rem}

/* CTA */
.cta{padding: 3.2rem 0 3.6rem}
.cta__inner{
  border-radius: 28px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 18%, transparent), color-mix(in oklab, var(--b) 10%, transparent));
  box-shadow: var(--shadow);
  padding: 1.2rem 1.2rem 1.1rem;
  display:grid; grid-template-columns: 1.15fr .85fr; gap:1rem; align-items:center;
}
.cta__actions{display:flex; gap:.7rem; justify-content:flex-end; flex-wrap:wrap}

/* footer */
.footer{
  padding: 2.2rem 0 2.6rem;
  border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent);
  background: color-mix(in oklab, var(--panel2) 60%, transparent);
}
.footer__inner{display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start; flex-wrap:wrap}
.footer__brand{margin:0; font-family:var(--display); font-weight:900}
.footer__cols{display:flex; gap:2rem; flex-wrap:wrap}
.footer__col{display:grid; gap:.35rem; min-width:160px}
.footer__title{margin:0 0 .25rem; font-weight:900; font-family:var(--display)}
.footer a{color:color-mix(in oklab, var(--text) 78%, transparent)}
.footer a:hover{text-decoration:underline; text-underline-offset:4px}

/* responsive */
@media (max-width: 980px){
  .hero__inner, .hero__inner--page{grid-template-columns:1fr; padding-top: .8rem}
  .hero__card, .hero__aside{justify-self:stretch}
  .grid--3{grid-template-columns:1fr}
  .work{grid-template-columns:1fr}
  .case{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .blog{grid-template-columns:1fr}
  .cta__inner{grid-template-columns:1fr}
  .cta__actions{justify-content:flex-start}
  .nav{display:none}
  .burger{display:block}
}

/* motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important}
  /* behoud marquee beweging, disable andere animaties/transitions */
  *:not(.marquee__track){animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important}
}