@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/manrope-cyrillic.woff2?v=20260901-1') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/manrope-latin.woff2?v=20260901-1') 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:'Unbounded';font-style:normal;font-weight:500 900;font-display:swap;src:url('/fonts/unbounded-cyrillic.woff2?v=20260901-1') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 900;font-display:swap;src:url('/fonts/unbounded-latin.woff2?v=20260901-1') 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:'Caveat';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/caveat-cyrillic.woff2?v=20260901-1') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/caveat-latin.woff2?v=20260901-1') 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}

/* =========================================================
   МАЛЕВИЧ — design tokens
   Суprематизм: чёрный фон, жёлтый акцент, геометрический сигнал (повёрнутый квадрат)
   ========================================================= */

:root{
  --ink: #111111;
  --ink-2: #191919;
  --ink-3: #1f1f1f;
  --paper: #F7F5EF;
  --paper-dim: #C9C6BC;
  --yellow: #F4D913;
  --yellow-2: #FFE94D;
  --yellow-dim: #B8A20B;
  --grey-warm: #8f8a7d;
  --grey-cool: #5b5b58;
  --line: rgba(247,245,239,0.14);
  --line-strong: rgba(247,245,239,0.28);

  --badge-black: #000000;
  --badge-pink: #FF7AAE;
  --badge-beige: #EFE0C8;
  --badge-violet: #8F7BFF;

  --font-display: 'Unbounded', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', cursive;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --header-h: 64px;
}

*,*::before,*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@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;
  }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.particle-field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
main,
.site-footer{
  position:relative;
  z-index:1;
}

img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

.container{
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

.sr-only{
  position:absolute; 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; left:12px; top:-60px;
  background:var(--yellow); color:#111; padding:10px 16px;
  border-radius: var(--radius-sm); font-weight:700; z-index:200;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 12px; }

:focus-visible{
  outline: 2px solid var(--yellow-2);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:8px;height:8px;
  background: var(--yellow);
  transform: rotate(45deg);
  flex-shrink:0;
}

.section{
  padding: 96px 0;
  position: relative;
}
@media (max-width: 640px){
  .section{ padding: 64px 0; }
}

.section-head{
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head h2{
  font-size: clamp(28px, 4vw, 44px);
  margin-top: 14px;
}
.section-head p{
  margin-top: 16px;
  color: var(--paper-dim);
  font-size: 17px;
  max-width: 52ch;
}
#services .section-head{
  max-width: 820px;
}
#services .section-head h2{
  font-size: clamp(28px, 3.2vw, 34px);
  white-space: pre-line;
}
#services .section-head p{
  max-width:none;
  white-space:nowrap;
}
@media (max-width: 720px){
  #services .section-head p{ white-space:normal; }
}
#process .section-head{
  max-width: 1100px;
}
#process .section-head h2{
  white-space: pre-line;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }

.btn-primary{
  background: var(--yellow);
  color: #151300;
}
.btn-primary:hover{
  background: var(--yellow-2);
  box-shadow: 0 0 0 4px rgba(244,217,19,0.18);
}

.btn-ghost{
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover{
  border-color: var(--yellow);
  color: var(--yellow);
}

.btn-dark{
  background: #151300;
  color: var(--yellow);
}
.btn-dark:hover{ background:#000; }

.btn-sm{ padding: 10px 18px; font-size: 14px; }

#openBriefBtn1{
  padding:8px 16px;
  border:3px solid #111;
  border-radius:0;
  background:transparent;
  color:#111;
  box-shadow:none;
}
#openBriefBtn1:hover{
  background:#fff;
  box-shadow:none;
}

/* ============ Header ============ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  height: var(--header-h);
}
.site-header .container{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.tg-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(17,17,17,0.08);
  color:#151300;
  font-weight:700;
  font-size:14px;
  transition: background .18s var(--ease);
}
.tg-link:hover{ background: rgba(17,17,17,0.16); }
.tg-link svg{ width:18px; height:18px; flex-shrink:0; }
.tg-link .tg-text{ display:inline; }

@media (max-width: 560px){
  .tg-link .tg-text{ display:none; }
  .tg-link{ padding:10px; }
}

/* ============ Glitch logo ============ */
.glitch-logo{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 16px;
  border:0;
  border-radius:0;
  background: var(--badge-black);
  overflow:hidden;
  isolation:isolate;
  transition: background-color .35s var(--ease);
}
.glitch-logo .glitch-stack{
  position:relative;
  z-index:3;
  height: 20px;
  display:grid;
  place-items:center;
  width: 144px;
}
.glitch-logo .glitch-word{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 20px;
  line-height:1;
  letter-spacing: 0.02em;
  color: var(--paper);
  white-space: nowrap;
  opacity:0;
}
.glitch-logo .glitch-word.is-visible{ opacity:1; }
@media (max-width:340px){
  .glitch-logo{ flex:0 0 124px; padding-inline:8px; }
  .glitch-logo .glitch-stack{ width:108px; }
  .glitch-logo .glitch-word{ font-size:15px; }
}
.glitch-logo .glitch-word::before,
.glitch-logo .glitch-word::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
}
.glitch-logo.is-glitching{ animation:glitchFrame .42s steps(1,end); }
.glitch-logo.is-glitching::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.28) 4px 6px, transparent 6px 10px);
  animation:glitchScan .42s steps(2,end);
}
.glitch-logo.is-glitching .glitch-word.is-visible{ animation:glitchCore .42s steps(1,end); }
.glitch-logo.is-glitching .glitch-word.is-visible::before{
  color:#00d9ff;
  opacity:1;
  text-shadow:3px 0 #000;
  animation:glitchBlue .42s steps(1,end);
}
.glitch-logo.is-glitching .glitch-word.is-visible::after{
  color:#ff1744;
  opacity:1;
  text-shadow:-3px 0 #fff;
  animation:glitchRed .42s steps(1,end);
}
@keyframes glitchFrame{
  0%,100%{ transform:translate(0) skew(0); box-shadow:none; }
  8%{ transform:translateX(-6px) skewX(6deg) scaleX(1.05); background:#000; box-shadow:6px 0 #00d9ff,-6px 0 #ff1744; }
  18%{ transform:translateX(5px) skewX(-4deg) scaleX(.97); background:#fff; box-shadow:-7px 0 #00d9ff,7px 0 #ff1744; }
  31%{ transform:translateX(-4px) scaleX(1.07); background:#000; box-shadow:5px 0 #ff1744,-5px 0 #00d9ff; }
  47%{ transform:translateX(7px) skewX(7deg) scaleX(.95); background:#00d9ff; box-shadow:-7px 0 #000,7px 0 #ff1744; }
  63%{ transform:translateX(-7px) scaleX(1.06); background:#ff1744; box-shadow:7px 0 #fff,-7px 0 #000; }
  78%{ transform:translateX(4px) skewX(-5deg) scaleX(.98); background:#000; box-shadow:-6px 0 #00d9ff,6px 0 #ff1744; }
}
@keyframes glitchCore{
  0%,100%{ transform:translateX(0) scaleX(1); color:#fff; }
  12%{ transform:translateX(7px) scaleX(1.04); color:#000; }
  25%{ transform:translateX(-7px) scaleX(.97); color:#fff; }
  39%{ transform:translateX(6px) scaleX(1.06); color:#000; }
  56%{ transform:translateX(-8px) scaleX(.95); color:#fff; }
  72%{ transform:translateX(7px) scaleX(1.05); color:#000; }
  88%{ transform:translateX(-5px) scaleX(.98); color:#fff; }
}
@keyframes glitchBlue{
  0%,100%{ clip-path:inset(0); transform:translate(0); }
  14%{ clip-path:inset(0 0 68%); transform:translateX(-10px); }
  33%{ clip-path:inset(57% 0 13%); transform:translateX(9px); }
  51%{ clip-path:inset(28% 0 48%); transform:translate(-6px,0); }
  69%{ clip-path:inset(76% 0 0); transform:translateX(11px); }
  86%{ clip-path:inset(9% 0 65%); transform:translateX(-8px); }
}
@keyframes glitchRed{
  0%,100%{ clip-path:inset(0); transform:translate(0); }
  9%{ clip-path:inset(66% 0 4%); transform:translateX(10px); }
  27%{ clip-path:inset(17% 0 58%); transform:translateX(-9px); }
  44%{ clip-path:inset(43% 0 30%); transform:translate(7px,0); }
  62%{ clip-path:inset(3% 0 72%); transform:translateX(-11px); }
  81%{ clip-path:inset(73% 0 5%); transform:translateX(8px); }
}
@keyframes glitchScan{
  0%,100%{ opacity:0; transform:translateX(0); }
  15%{ opacity:.65; transform:translateX(-7px); }
  38%{ opacity:.25; transform:translateX(9px); }
  58%{ opacity:.55; transform:translateX(-6px); }
  82%{ opacity:.18; transform:translateX(8px); }
}

/* ============ Hero ============ */
.hero{
  padding: 72px 0 96px;
  position: relative;
  min-height: clamp(720px, calc(100svh - var(--header-h) - 42px), 938px);
  overflow: clip;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(247,245,239,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,245,239,.075) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 92%, transparent 100%);
}
.hero-grid{
  position:relative;
  z-index:1;
  min-height:clamp(552px, calc(100svh - 274px), 770px);
}
.hero-copy{
  position:relative;
  z-index:2;
  width:min(52%, 650px);
  padding-top:42px;
  text-shadow:0 2px 18px rgba(17,17,17,.9);
  pointer-events:none;
}
.hero-copy .btn{ pointer-events:auto; }

.hero h1{
  font-size: clamp(40px, 6.4vw, 76px);
  margin-top: 18px;
}
.hero .slogan{
  font-family: var(--font-hand);
  color: var(--yellow);
  font-size: clamp(22px, 3vw, 30px);
  display:block;
  margin-top: 6px;
  transform: rotate(-1deg);
}
.hero p.lead{
  margin-top: 22px;
  font-size: 18px;
  color: var(--paper-dim);
  max-width: 46ch;
}
.hero-ctas{
  margin-top: 34px;
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Living digital matter */
.workspace{
  position:absolute;
  z-index:1;
  inset:-72px 0 -96px 0;
  border:0;
  background:transparent;
  overflow:visible;
  color:rgba(247,245,239,.2);
  --matter-x:0px;
  --matter-y:0px;
  --matter-x2:0px;
  --matter-y2:0px;
}
.matter-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.matter-background{
  transform-box:fill-box;
  transform-origin:center;
  transform:translate(var(--background-shift, var(--active-shift, 0px)), var(--background-shift-y, 0px)) scale(var(--background-scale-x, var(--background-scale, 1)), var(--background-scale-y, var(--background-scale, 1)));
  transition:transform .6s var(--ease);
}
.matter-base{
  opacity:.15;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .8s var(--ease), transform .14s var(--ease);
}
.matter-depth-1{ transform:translate(var(--matter-x), var(--matter-y)); }
.matter-depth-2{ transform:translate(var(--matter-x2), var(--matter-y2)); }
.matter-axis,.matter-wire,.matter-curve{
  fill:none;
  stroke:rgba(247,245,239,.28);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
.matter-wire{ stroke:var(--yellow-dim); stroke-dasharray:5 9; }
.matter-curve{ stroke:rgba(244,217,19,.52); stroke-width:2; }
.matter-panel{
  fill:rgba(247,245,239,.025);
  stroke:rgba(247,245,239,.34);
  stroke-width:1.4;
}
.matter-dash{ stroke-dasharray:8 8; }
.matter-node{ fill:var(--ink); stroke:var(--yellow); stroke-width:2; }
.matter-notes{
  opacity:.08;
  fill:var(--grey-warm);
  font:500 11px/1 var(--font-display);
  letter-spacing:.1em;
  transition:opacity .8s var(--ease);
}
.matter-notes .matter-hand{
  fill:var(--paper-dim);
  font:500 22px/1 var(--font-hand);
  letter-spacing:0;
}
.matter-active-plane{
  display:none;
  transform-box:fill-box;
  transform-origin:center;
  transform:translateX(var(--active-shift, 0px)) scale(var(--plane-scale, 1));
  transition:transform .9s var(--ease);
}
.matter-state{
  opacity:0;
  transform:scale(.92) rotate(-1deg);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .72s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
.state-frame,.state-soft,.state-accent{
  stroke:var(--paper);
  stroke-width:2;
  fill:rgba(17,17,17,.88);
  vector-effect:non-scaling-stroke;
}
.state-soft{ fill:rgba(247,245,239,.06); stroke:rgba(247,245,239,.62); }
.state-accent{ fill:var(--yellow); stroke:var(--yellow); }
.state-line,.state-flow,.state-chart{
  fill:none;
  stroke:var(--paper);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.state-flow{ stroke:var(--yellow); stroke-width:3; }
.state-chart{ stroke:var(--yellow); stroke-width:4; }
.state-chart-fill{ fill:rgba(244,217,19,.14); stroke:none; }
.state-node{ fill:var(--yellow); stroke:var(--ink); stroke-width:2; }
.state-title{
  fill:var(--paper);
  font:700 16px/1 var(--font-display);
  letter-spacing:.05em;
}
.state-title-dark{ fill:var(--ink); }
.state-caption{
  fill:var(--paper);
  font:700 12px/1 var(--font-display);
  letter-spacing:.08em;
}
.state-line-dark{ stroke:var(--ink); }
.state-node-dark{ fill:var(--ink); stroke:var(--yellow); }
.state-route{
  stroke-dasharray:10 12;
  animation:state-route 1.6s linear infinite;
}
.digital-matter.is-paused .state-route{ animation-play-state:paused; }
.site-stage{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.app-layer,.app-ui-card,.ad-surface,.crm-request,.data-source,.chat-message,.bot-lead{
  transform-box:fill-box;
  transform-origin:center;
}
.digital-matter[data-mode] .matter-zone:not(.is-active){ color:rgba(247,245,239,.18); }
.digital-matter[data-mode="site"] .matter-state[data-state="site"],
.digital-matter[data-mode="app"] .matter-state[data-state="app"],
.digital-matter[data-mode="ads"] .matter-state[data-state="ads"],
.digital-matter[data-mode="crm"] .matter-state[data-state="crm"],
.digital-matter[data-mode="analytics"] .matter-state[data-state="analytics"],
.digital-matter[data-mode="bot"] .matter-state[data-state="bot"]{
  opacity:1;
  transform:scale(1) rotate(0);
}
.digital-matter[data-mode="site"] .site-stage-landing{ animation:site-landing 7.2s var(--ease) infinite; }
.digital-matter[data-mode="site"] .site-stage-multipage{ animation:site-multipage 7.2s var(--ease) infinite; }
.digital-matter[data-mode="site"] .site-stage-commerce{ animation:site-commerce 7.2s var(--ease) infinite; }
.digital-matter[data-mode="app"] .app-layer-left{ animation:app-layer-left 3.8s var(--ease) infinite; }
.digital-matter[data-mode="app"] .app-layer-right{ animation:app-layer-right 3.8s var(--ease) infinite; }
.digital-matter[data-mode="app"] .app-ui-card{ animation:app-ui 3.8s var(--ease) infinite; }
.digital-matter[data-mode="ads"] .ad-surface{ animation:surface-pull 3.6s var(--ease) infinite; }
.digital-matter[data-mode="ads"] .ad-surface-2{ animation-delay:.12s; }
.digital-matter[data-mode="ads"] .ad-surface-3{ animation-delay:.24s; }
.digital-matter[data-mode="ads"] .ad-surface-4{ animation-delay:.36s; }
.digital-matter[data-mode="crm"] .crm-request{ animation:crm-order 4.6s var(--ease) infinite; }
.crm-request-1{ --chaos-x:110px; --chaos-y:-138px; --chaos-r:-8deg; }
.crm-request-2{ --chaos-x:-92px; --chaos-y:146px; --chaos-r:7deg; }
.crm-request-3{ --chaos-x:104px; --chaos-y:132px; --chaos-r:-6deg; }
.crm-request-4{ --chaos-x:-126px; --chaos-y:-124px; --chaos-r:9deg; }
.digital-matter[data-mode="analytics"] .data-source{ animation:data-source 3.2s var(--ease) infinite; }
.digital-matter[data-mode="analytics"] .data-source-2{ animation-delay:.16s; }
.digital-matter[data-mode="analytics"] .data-source-3{ animation-delay:.32s; }
.digital-matter[data-mode="analytics"] .data-source-4{ animation-delay:.48s; }
.digital-matter[data-mode="analytics"] .analytics-core{ animation:analytics-core 3.2s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
.digital-matter[data-mode="bot"] .chat-message{ animation:message-in 5s var(--ease) infinite; }
.digital-matter[data-mode="bot"] .chat-message-2{ animation-delay:.7s; }
.digital-matter[data-mode="bot"] .chat-message-3{ animation-delay:1.4s; }
.digital-matter[data-mode="bot"] .bot-lead{ animation:lead-in 5s var(--ease) 2.1s infinite; }
@media (min-width:960px){
  .digital-matter{
    --active-shift:290px;
    --background-scale:.64;
  }
  .digital-matter[data-mode="site"]{ --plane-scale:.96; }
  .digital-matter[data-mode="app"]{ --plane-scale:.88; }
  .digital-matter[data-mode="ads"]{ --plane-scale:.73; }
  .digital-matter[data-mode="crm"]{ --plane-scale:.74; }
  .digital-matter[data-mode="analytics"]{ --plane-scale:.75; }
  .digital-matter[data-mode="bot"]{ --plane-scale:.82; }
}
@media (min-width:1400px){
  .digital-matter{
    --active-shift:270px;
    --background-shift:293px;
    --background-scale:.76;
  }
  .digital-matter[data-mode="site"]{ --plane-scale:1.08; }
  .digital-matter[data-mode="app"]{ --plane-scale:.88; }
  .digital-matter[data-mode="ads"]{ --plane-scale:.84; }
  .digital-matter[data-mode="crm"]{ --plane-scale:.84; }
  .digital-matter[data-mode="analytics"]{ --plane-scale:.88; }
  .digital-matter[data-mode="bot"]{ --plane-scale:.9; }
}
@media (min-width:1600px){
  .digital-matter{
    --active-shift:220px;
    --background-shift:260px;
    --background-scale:.88;
  }
}
@media (min-width:1900px){
  .digital-matter{
    --background-shift:270px;
    --background-shift-y:43px;
    --background-scale-x:1.07;
    --background-scale-y:1.15;
  }
}
.matter-particle-stage{
  position:absolute;
  z-index:3;
  top:50%;
  right:clamp(0px,2vw,40px);
  width:min(48vw,780px);
  height:min(72vh,680px);
  min-height:500px;
  transform:translateY(-50%);
  overflow:hidden;
}
.matter-particles{
  display:block;
  width:100%;
  height:100%;
}
.matter-current{
  position:absolute;
  left:50%;
  top:auto;
  bottom:clamp(22px,5vh,42px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font:700 clamp(10px,1vw,13px)/1 var(--font-display);
  letter-spacing:.12em;
  color:rgba(247,245,239,.48);
  text-shadow:0 2px 18px var(--ink);
}
.matter-current strong{
  color:var(--yellow);
  font:inherit;
}
.matter-current::after{
  content:'';
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  width:42px;
  height:1px;
  transform:translateX(-50%);
  background:currentColor;
  opacity:.65;
}
@media (max-width:959px){
  .hero{ min-height:0; padding-bottom:70px; }
  .hero-grid{ min-height:0; }
  .hero-copy{ width:100%; padding-top:0; }
  .workspace{
    position:relative;
    inset:auto;
    width:100vw;
    height:clamp(430px, 50vw, 760px);
    margin:34px calc(50% - 50vw) -20px;
  }
  .matter-particle-stage{
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    transform:none;
  }
  .matter-current{ top:auto; bottom:20px; }
}
@media (max-width:640px){
  .workspace{ height:430px; margin-top:24px; }
  .matter-current{ top:auto; bottom:14px; font-size:9px; }
  .digital-matter[data-shape="bots"] .matter-current{ bottom:38px; }
}

@keyframes state-route{ to{ stroke-dashoffset:-44; } }
@keyframes site-landing{ 0%,24%{ opacity:1; transform:scale(1); } 31%,94%{ opacity:0; transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); } }
@keyframes site-multipage{ 0%,25%,61%,100%{ opacity:0; transform:scale(.9); } 32%,55%{ opacity:1; transform:scale(1); } }
@keyframes site-commerce{ 0%,56%,100%{ opacity:0; transform:scale(.9); } 64%,94%{ opacity:1; transform:scale(1); } }
@keyframes app-layer-left{ 0%,100%{ transform:translate(42px,0); opacity:.45; } 35%,72%{ transform:translate(-30px,10px); opacity:1; } }
@keyframes app-layer-right{ 0%,100%{ transform:translate(-44px,18px); opacity:.45; } 35%,72%{ transform:translate(32px,-12px); opacity:1; } }
@keyframes app-ui{ 0%,100%{ transform:translateY(12px); opacity:.55; } 40%,70%{ transform:translateY(0); opacity:1; } }
@keyframes surface-pull{ 0%,100%{ transform:translate(0,0); } 48%,72%{ transform:translate(14px,6px); } }
@keyframes crm-order{ 0%,14%,100%{ transform:translate(var(--chaos-x),var(--chaos-y)) rotate(var(--chaos-r)); opacity:.55; } 42%,86%{ transform:translate(0,0) rotate(0); opacity:1; } }
@keyframes data-source{ 0%,100%{ transform:scale(.92); opacity:.45; } 45%,72%{ transform:scale(1); opacity:1; } }
@keyframes analytics-core{ 0%,22%,100%{ transform:scale(.94); } 50%,82%{ transform:scale(1.03); } }
@keyframes message-in{ 0%,8%,100%{ transform:translateY(18px); opacity:0; } 22%,82%{ transform:translateY(0); opacity:1; } }
@keyframes lead-in{ 0%,16%,100%{ transform:scale(.8); opacity:0; } 30%,76%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .matter-state *{ animation:none !important; }
  .site-stage-commerce,.chat-message,.bot-lead{ opacity:1; }
  .matter-particles{ opacity:.82; }
}

/* ============ Directions (cursor glow panels) ============ */
.directions-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1399px){
  .directions-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .directions-grid{ grid-template-columns: 1fr; }
}

.glow-panel{
  position:relative;
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 30px 28px 34px;
  overflow:hidden;
  min-height: 300px;
  display:flex;
  flex-direction:column;
}
.glow-panel::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(244,217,19,0.14), transparent 60%);
  opacity:0;
  transition: opacity .3s var(--ease);
  pointer-events:none;
}
.glow-panel::after{
  content:'';
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(244,217,19,.9), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s var(--ease);
  pointer-events:none;
}
.glow-panel:hover::before,
.glow-panel:hover::after,
.glow-panel.is-active::before,
.glow-panel.is-active::after,
.glow-panel.is-touched::before,
.glow-panel.is-touched::after{ opacity:1; }
.glow-panel .num{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--yellow-dim);
  letter-spacing: .08em;
}
.glow-panel h3{
  font-size: 24px;
  margin-top: 14px;
}
@media (max-width:350px){
  .glow-panel{ padding-inline:20px; }
  .glow-panel h3{ font-size:22px; }
}
.glow-panel .tagline{
  color: var(--yellow);
  margin-top: 10px;
  font-size: 15px;
  min-height: 4.8em;
}
.glow-panel ul{
  list-style:none;
  margin: 18px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.glow-panel li{
  font-size: 14px;
  color: var(--paper);
  display:flex;
  align-items:center;
  gap:8px;
}
.glow-panel li::before{
  content:'';
  width:5px;height:5px;
  background: var(--yellow);
  flex-shrink:0;
}

/* ============ Process ============ */
.process-wrap{
  display:grid;
  gap:0;
}
.process-step{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
  align-items:start;
  padding:28px 0;
  border-top:1px solid var(--line);
}
.process-step:first-child{ border-top:none; }
@media (max-width: 720px){
  .process-step{ grid-template-columns:60px 1fr; gap:16px; margin-left:0 !important; }
}

.process-step .step-num{
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size:56px;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--yellow-dim);
  line-height: 1;
}
@media (max-width: 720px){
  .process-step .step-num{ font-size: 36px; }
}
.process-step h3{
  font-size: 21px;
}
.process-step p{
  color: var(--paper-dim);
  margin: 10px 0 0;
  max-width: 56ch;
}

/* ============ Value / concept block ============ */
.value-banner{
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 48px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items:center;
}
@media (max-width: 860px){
  .value-banner{ grid-template-columns: 1fr; padding: 32px 24px; }
}
.value-banner h2{
  font-size: clamp(24px, 3.4vw, 34px);
}
.value-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.value-list li{
  padding-left: 22px;
  position:relative;
  color: var(--paper-dim);
  font-size: 15px;
}
.value-list li::before{
  content:'';
  position:absolute;
  left:0; top:6px;
  width:10px; height:10px;
  border: 1.6px solid var(--yellow);
  transform: rotate(45deg);
}
.value-list strong{
  display:block;
  color: var(--paper);
  margin-bottom:2px;
}

/* ============ Final CTA ============ */
.final-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:390px;
  text-align:center;
  border-radius: var(--radius-lg);
  background: var(--yellow);
  color: #151300;
  padding: 64px clamp(24px, 6vw, 80px);
  animation: funny-candle-card 3s infinite linear;
}
.final-cta.is-animation-paused,
.final-cta.is-animation-paused *{ animation-play-state:paused !important; }
.final-cta-copy{
  position:relative;
  z-index:2;
  width:min(620px, 100%);
  margin:0 auto;
}
.final-cta .eyebrow{
  color:#151300;
  animation: funny-candle-ink 3s infinite linear;
}
.final-cta .eyebrow::before{
  background:#151300;
  animation: funny-candle-mark 3s infinite linear;
}
.final-cta h2{
  margin-top:16px;
  font-size: clamp(28px, 4.4vw, 46px);
  color:#151300;
  animation: funny-candle-ink 3s infinite linear;
}
.final-cta p{
  margin-top: 14px;
  font-size: 17px;
  color: rgba(21,19,0,0.72);
  animation: funny-candle-muted-ink 3s infinite linear;
}
.final-cta .hero-ctas{
  justify-content:center;
  margin-top: 30px;
}
.final-cta .btn-dark{
  animation: funny-candle-button 3s infinite linear;
}
.final-cta .btn-dark:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.final-cta .btn-dark:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 6px #151300;
}
.final-cta .btn-ghost{
  border-color: rgba(21,19,0,0.3);
  color:#151300;
}
.final-cta .btn-ghost:hover{ border-color:#151300; }

.funny-candle{
  position:absolute;
  right:32px;
  bottom:-5px;
  z-index:1;
  width:300px;
  height:190px;
  pointer-events:none;
}
.funny-candle__candles{
  position:absolute;
  left:50%;
  bottom:5px;
  width:250px;
  height:150px;
  transform:translateX(-50%);
  z-index:1;
}
.funny-candle__tall,
.funny-candle__short{
  position:absolute;
  background:#fff;
  border:3px solid #673c63;
  border-bottom:0;
  border-radius:3px 3px 0 0;
  box-shadow:-2px 0 0 #95c6f2 inset;
  transform-origin:center right;
}
.funny-candle__tall{
  left:50%;
  top:50%;
  width:35px;
  height:100px;
  transform:translate(60%,-25%);
  animation:funny-candle-breathe 3s infinite linear;
}
.funny-candle__short{
  left:20%;
  top:calc(65% + 2px);
  width:42px;
  height:60px;
  transform:translate(60%,-15%);
  animation:funny-candle-shake 3s infinite linear;
}
.funny-candle__wick{
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:15px;
  background:#673c63;
  border-radius:8px;
  transform:translate(-50%,-100%);
}
.funny-candle__short .funny-candle__wick{
  height:12px;
  transform-origin:bottom center;
  animation:funny-candle-wick 3s infinite linear;
}
.funny-candle__eyes{
  position:absolute;
  left:50%;
  top:0;
  width:35px;
  height:30px;
  transform:translateX(-50%);
}
.funny-candle__eyes i{
  position:absolute;
  top:20%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#673c63;
  transform:translateX(-70%);
}
.funny-candle__eyes i:first-child{ left:30%; }
.funny-candle__eyes i:last-child{ left:70%; }
.funny-candle__tall .funny-candle__eyes i{ animation:funny-candle-blink 3s infinite linear; }
.funny-candle__short .funny-candle__eyes i{
  top:50%;
  transform:translateX(-80%);
}
.funny-candle__short .funny-candle__eyes i:first-child{ animation:funny-candle-look-left 3s infinite linear; }
.funny-candle__short .funny-candle__eyes i:last-child{ animation:funny-candle-look-right 3s infinite linear; }
.funny-candle__mouth{
  position:absolute;
  left:40%;
  top:20%;
  width:0;
  height:0;
  border-radius:50%;
  background:#673c63;
  transform:translate(-50%,-50%);
  animation:funny-candle-blow 3s infinite linear;
}
.funny-candle__fire{
  position:absolute;
  top:50%;
  left:40%;
  width:16px;
  height:20px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:#ff9800;
  transform:translate(calc(-50% - 7px),-50%);
  animation:funny-candle-fire 3s infinite linear;
}
.funny-candle__light-wave{
  position:absolute;
  top:50%;
  left:38.4%;
  width:75px;
  height:75px;
  border:2px solid rgba(255,255,255,.2);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(2.5);
  animation:funny-candle-light 3s infinite linear;
}
.funny-candle__smoke{
  position:absolute;
  background:#777;
  transform:translate(-50%,-50%);
}
.funny-candle__smoke--line{
  left:30%;
  top:50%;
  width:30px;
  height:3px;
  animation:funny-candle-smoke-left 3s infinite linear;
}
.funny-candle__smoke--dot{
  left:30%;
  top:40%;
  width:10px;
  height:10px;
  border-radius:50%;
  animation:funny-candle-smoke-up 3s infinite linear;
}

@keyframes funny-candle-card{
  0%,59.8%,98%,100%{ background:var(--yellow); box-shadow:inset 0 0 0 1px transparent; }
  60%,97.8%{ background:var(--ink); box-shadow:inset 0 0 0 1px rgba(244,217,19,.45); }
}
@keyframes funny-candle-ink{
  0%,59.8%,98%,100%{ color:#151300; }
  60%,97.8%{ color:var(--paper); }
}
@keyframes funny-candle-muted-ink{
  0%,59.8%,98%,100%{ color:rgba(21,19,0,.72); }
  60%,97.8%{ color:rgba(247,245,239,.78); }
}
@keyframes funny-candle-mark{
  0%,59.8%,98%,100%{ background:#151300; }
  60%,97.8%{ background:var(--yellow); }
}
@keyframes funny-candle-button{
  0%,59.8%,98%,100%{ background:#151300; color:var(--yellow); }
  60%,97.8%{ background:var(--yellow); color:#151300; }
}
@keyframes funny-candle-blink{
  0%,35%,40%,100%{ opacity:1; transform:translateX(-70%); }
  36%,39%{ opacity:0; }
  50%,65%{ transform:translateX(-140%); }
  66%{ transform:translateX(-70%); }
}
@keyframes funny-candle-breathe{
  0%,40%,65%,75%,100%{ transform:scale(1) translate(60%,-25%); }
  45%,55%{ transform:scale(1.1) translate(60%,-28%); }
  60%{ transform:scale(.89) translate(60%,-25%); }
  70%{ transform:scale(.95) translate(60%,-25%); }
}
@keyframes funny-candle-blow{
  0%,40%,67%,100%{ width:0; height:0; left:30%; }
  50%,54%{ width:15px; height:15px; left:30%; }
  59%{ width:5px; height:5px; left:20%; }
  62%{ width:2px; height:2px; left:20%; }
}
@keyframes funny-candle-smoke-left{
  0%,59%,68%,100%{ width:0; }
  59%{ left:40%; }
  60%{ width:30px; left:30%; }
  68%{ left:20%; }
}
@keyframes funny-candle-smoke-up{
  0%,64%,80%,100%{ width:0; height:0; top:0; }
  65%{ width:10px; height:10px; top:40%; left:40%; }
  80%{ top:20%; }
}
@keyframes funny-candle-shake{
  0%,59%,67%,70%,100%{ left:20%; transform:translate(60%,-15%); background:#fff; border-color:#673c63; box-shadow:-2px 0 #95c6f2 inset; }
  62%{ left:18%; }
  65%{ left:21%; }
  75%{ transform:scale(1.15,.85) translate(60%,-15%); }
  91%{ transform:scale(1.18,.82) translate(60%,-10%); background:#f44336; border-color:#f44336; box-shadow:-2px 0 #f44336 inset; }
  92%{ transform:scale(.85,1.15) translate(60%,-15%); }
  95%{ transform:scale(1.05,.95) translate(60%,-15%); }
}
@keyframes funny-candle-wick{
  0%,59%{ transform:translate(-50%,-100%); }
  62%{ transform:rotate(-15deg) translate(-50%,-100%); }
  65%{ transform:rotate(15deg) translate(-50%,-100%); }
  70%{ transform:rotate(-5deg) translate(-50%,-100%); }
  72%{ transform:rotate(5deg) translate(-50%,-100%); }
  74%,84%{ transform:rotate(0) translate(-50%,-100%); }
  85%{ transform:rotate(180deg) translate(0,120%); }
  92%,100%{ transform:translate(-50%,-100%); }
}
@keyframes funny-candle-light{
  10%,29%,59%,89%{ transform:translate(-50%,-50%) scale(0); border-color:transparent; }
  20%,50%,90%{ transform:translate(-50%,-50%) scale(1); }
  26%,27%,56%,57%,95%,96%{ transform:translate(-50%,-50%) scale(2); border-color:rgba(255,255,255,.5); }
  0%,28%,58%,100%{ transform:translate(-50%,-50%) scale(2.5); border-color:rgba(255,255,255,.2); }
}
@keyframes funny-candle-fire{
  59%,89%{ left:40%; width:0; height:0; }
  0%,7%,15%,23%,31%,39%,47%,55%,90%,100%{ left:40.8%; width:16px; height:20px; background:#ffc107; }
  3%,11%,19%,27%,35%,43%,51%,58%,94%{ left:41.2%; width:16px; height:20px; background:#ff9800; }
}
@keyframes funny-candle-look-left{
  0%,70%,90%,100%{ background:#673c63; border:0; border-radius:50%; transform:translate(-90%,0); }
  71%,89%{ background:transparent; border:solid #673c63; border-width:0 2px 2px 0; border-radius:0; transform:rotate(-45deg) translate(-50%,-65%); }
}
@keyframes funny-candle-look-right{
  0%,70%,90%,100%{ top:50%; background:#673c63; border:0; border-radius:50%; transform:translate(-80%,0); }
  71%,89%{ top:30%; background:transparent; border:solid #673c63; border-width:0 2px 2px 0; border-radius:0; transform:rotate(135deg) translate(-80%,20%); }
}

@media (max-width:760px){
  .final-cta{
    min-height:clamp(340px, calc(665px - 58vw), 480px);
    padding:52px 24px 60px;
    text-align:center;
  }
  .final-cta-copy{ width:100%; }
  .final-cta .hero-ctas{ justify-content:center; }
  .funny-candle{
    right:-36px;
    bottom:-5px;
    transform:scale(.78);
    transform-origin:center bottom;
  }
}

/* ============ Footer ============ */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 16px;
}
.footer-brand{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 15px;
}
.footer-meta{
  color: var(--grey-warm);
  font-size: 13px;
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
}
.footer-meta a:hover{ color: var(--yellow); }

/* ============ Optional analytics consent ============ */
.analytics-consent{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1100;
  width:min(520px, calc(100% - 40px));
  padding:20px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--ink-2);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.analytics-consent[hidden]{ display:none; }
.analytics-consent strong{ display:block; margin-bottom:6px; }
.analytics-consent p{ color:var(--paper-dim); font-size:14px; line-height:1.5; }
.analytics-consent p a{ color:var(--paper); text-decoration:underline; }
.analytics-consent__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media (max-width:640px){
  .analytics-consent{ right:12px; bottom:12px; width:calc(100% - 24px); padding:18px; }
  .analytics-consent__actions .btn{ flex:1 1 auto; min-height:44px; }
}

/* ============ Sketch arrows ============ */
.sketch-arrow{
  position:absolute;
  pointer-events:none;
  opacity: 0.85;
}

/* ============ Modal / Brief form ============ */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(10,10,8,0.7);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 1000;
  opacity:0;
  visibility:hidden;
  transition: opacity .22s var(--ease);
}
.modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.modal-card{
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  transform: translateY(16px);
  transition: transform .25s var(--ease);
}
.modal-overlay.is-open .modal-card{ transform: translateY(0); }

@media (max-width: 640px){
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-card{
    max-width: 100%;
    max-height: 94vh;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px 28px;
  }
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 16px;
}
.modal-head h2{ font-size: 24px; }
.modal-head p{ color: var(--paper-dim); margin-top: 8px; font-size: 14px; }

.modal-close{
  background: none;
  border: none;
  color: var(--paper);
  font-size: 22px;
  line-height:1;
  padding: 6px;
  border-radius: 8px;
  flex-shrink:0;
}
.modal-close:hover{ color: var(--yellow); }

.brief-form{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.field label{
  font-size: 13px;
  font-weight:700;
  color: var(--paper-dim);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="url"],
.field textarea{
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--paper);
  font-size: 15px;
  font-family: inherit;
  width: 100%;
  transition: border-color .18s var(--ease);
}
.field input[type="file"]{
  width:100%;
  padding:10px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--paper-dim);
  background:var(--ink);
  font:inherit;
  font-size:13px;
}
.field input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:8px 12px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--yellow);
  color:#151300;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.field-hint{
  color:var(--grey-warm);
  font-size:12px;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color: var(--yellow);
}
.field textarea{ resize: vertical; min-height: 84px; }

.contact-toggle{
  display:flex;
  gap:8px;
}
.chip{
  flex:1;
  text-align:center;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight:700;
  background: transparent;
  color: var(--paper-dim);
}
.chip[aria-pressed="true"]{
  background: var(--yellow);
  border-color: var(--yellow);
  color:#151300;
}

.pill-group{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  color: var(--paper-dim);
  background: transparent;
}
.pill input{ position:absolute; opacity:0; pointer-events:none; }
.pill:has(input:checked){
  background: var(--yellow);
  border-color: var(--yellow);
  color:#151300;
  font-weight:700;
}
.pill:has(input:focus-visible){
  outline: 2px solid var(--yellow-2);
  outline-offset: 2px;
}

.consent-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--paper-dim);
}
.consent-row input{ margin-top: 3px; }
.consent-row a{
  color:var(--yellow);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-privacy-link{
  align-self:flex-start;
  margin-top:-10px;
  color:var(--grey-warm);
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-privacy-link:hover{ color:var(--yellow); }

/* ============ Legal pages ============ */
.legal-brand{
  font-family:var(--font-display);
  font-weight:700;
  color:#111;
}
.legal-back{
  border:2px solid #111;
  padding:7px 14px;
  color:#111;
  font-weight:700;
  line-height:1.2;
}
.legal-back:hover{ background:#fff; }
.legal-page{ padding:72px 0 96px; }
.legal-card{
  max-width:900px;
  margin:0 auto;
  padding:clamp(24px, 5vw, 56px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--ink-2);
}
.legal-card h1{
  margin-top:16px;
  font-size:clamp(28px, 5vw, 48px);
}
.legal-card h2{
  margin-top:36px;
  font-size:20px;
}
.legal-card p,
.legal-card ul{ margin-top:14px; }
.legal-card ul{ padding-left:22px; }
.legal-card li + li{ margin-top:6px; }
.legal-card a{ color:var(--yellow); }
.legal-version{ color:var(--grey-warm); }
.legal-draft{
  margin-top:28px;
  padding:16px 18px;
  border-left:4px solid var(--yellow);
  background:rgba(244,217,19,.08);
  color:var(--paper);
}
.legal-final{ font-weight:700; }
.legal-related{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.honeypot{
  position:absolute !important;
  left: -9999px !important;
  width: 1px; height:1px;
  overflow:hidden;
}

.form-error{
  color: #ff8a8a;
  font-size: 13px;
  margin-top: 4px;
  display:none;
}
.field.has-error input, .field.has-error textarea{ border-color:#ff8a8a; }
.field.has-error .form-error{ display:block; }

.form-status{
  font-size: 13px;
  color: var(--paper-dim);
  min-height: 18px;
}
.form-status.is-error{ color:#ff8a8a; }

.brief-success{
  text-align:center;
  padding: 20px 0 4px;
}
.brief-success .ok-badge{
  width:56px;height:56px;
  border-radius:50%;
  background: var(--yellow);
  color:#151300;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 18px;
  font-size: 26px;
  font-weight: 900;
}
.brief-success h3{ font-size:22px; }
.brief-success p{ color: var(--paper-dim); margin-top: 10px; }
.brief-success .btn{ margin-top: 22px; }

/* ============ Admin stub ============ */
.admin-lock{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  text-align:center;
  padding: 24px;
}
.admin-lock .badge-sq{
  width:14px;height:14px;
  background: var(--yellow);
  transform: rotate(20deg);
  margin: 0 auto 20px;
}

/* ============ Ink cursor ============ */
.ink-filter{
  position:fixed;
  width:0;
  height:0;
  overflow:hidden;
}
.ink-cursor{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:0;
  z-index:10000;
  pointer-events:none;
  opacity:0;
  filter:url("#inkGoo");
  mix-blend-mode:difference;
  transition:opacity .15s ease;
}
.ink-cursor.is-visible{ opacity:1; }
.ink-cursor span{
  position:absolute;
  top:-13px;
  left:-13px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--ink-cursor-color, var(--yellow));
  will-change:transform;
  transition:opacity .12s ease;
}
.ink-cursor.is-idle span:not(:first-child){ opacity:0; }
@media (hover:hover) and (pointer:fine){
  html.has-ink-cursor,
  html.has-ink-cursor *{ cursor:none !important; }
}
@media (hover:none), (pointer:coarse){
  .ink-cursor{ display:none; }
}