/* ==========================================================================
   U2 AI Studio — corporate site, design system
   2026-09-11. Written for one job: make twenty brands read as one studio.

   The umbrella brand has no colour of its own on a dark ground — the wordmark
   is white and PANTONE 282 C navy disappears into the page. So the accent here
   is a *spectrum*: the twenty official sub-brand values do the chromatic work,
   the shell stays neutral glass. Every product card carries its own --c, set
   inline from data/brands.json, and nothing else in the page competes with it.
   ========================================================================== */

:root{
  /* ---- ground -------------------------------------------------------- */
  --bg:            #04080F;
  --bg-2:          #071223;
  --ink:           #F2F6FB;
  --text:          #C4D2E3;
  --text-2:        #90A3BC;
  --text-3:        #6B7E97;

  /* ---- the studio's own marks ---------------------------------------- */
  --navy:          #001E43;          /* PANTONE 282 C, the second colour of every brand */
  --ice:           #8FB6FF;          /* luminous stand-in for navy on dark ground */
  --ice-2:         #C9DCFF;

  /* ---- glass --------------------------------------------------------- */
  --line:          rgba(255,255,255,.10);
  --line-2:        rgba(255,255,255,.18);
  --line-3:        rgba(255,255,255,.28);
  --fill:          linear-gradient(158deg,rgba(255,255,255,.070),rgba(255,255,255,.024));
  --fill-2:        linear-gradient(158deg,rgba(255,255,255,.105),rgba(255,255,255,.038));
  --blur:          blur(20px) saturate(150%);
  --shadow:        0 28px 64px -38px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-lg:     0 48px 120px -44px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.18);

  /* ---- geometry ------------------------------------------------------ */
  --r:             20px;
  --r-sm:          14px;
  --r-lg:          28px;
  --maxw:          1240px;
  --gutter:        clamp(20px,4vw,40px);
  --nav-h:         72px;

  /* ---- type ---------------------------------------------------------- */
  --font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  color-scheme: dark;
}

/* ---------- reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16.5px;
  line-height:1.65;
  font-weight:420;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

/* The wash: six of the twenty brand values, fixed behind everything. It is what
   makes the glass read as glass; on a flat ground the cards look like grey boxes.
   z-index:-1 rather than a rule on body>*, which would drop the fixed nav,
   cookie bar and mobile sheet back into the page flow. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 560px at 12% -4%,  rgba(232,34,118,.13), transparent 62%),
    radial-gradient(760px 520px at 88%  6%,  rgba(0,136,216,.14),  transparent 64%),
    radial-gradient(900px 620px at 72% 52%,  rgba(0,175,170,.09),  transparent 64%),
    radial-gradient(760px 560px at  4% 62%,  rgba(97,0,123,.13),   transparent 62%),
    radial-gradient(820px 600px at 92% 96%,  rgba(162,212,96,.08), transparent 62%),
    linear-gradient(180deg,#04080F 0%,#061020 46%,#04080F 100%);
}
/* a fine grid, the only texture on the page */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1200px 800px at 50% 0%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 0%,#000 0%,transparent 78%);
}

/* ---------- shared layout ------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(60px,6.4vw,104px);position:relative}
.sec--tight{padding-block:clamp(40px,4.2vw,68px)}
.sec--top{padding-top:clamp(72px,8vw,124px)}

.skip{position:absolute;left:-9999px;top:0;z-index:900;background:var(--ice);color:#04101B;
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3,h4{color:var(--ink);font-weight:760;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(2.4rem,5.2vw,4.05rem);letter-spacing:-.042em;line-height:1.03}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.16rem;letter-spacing:-.018em;line-height:1.3}
h4{font-size:.94rem;letter-spacing:-.01em}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.73rem;font-weight:680;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--line-3))}

.lede{font-size:1.06rem;color:var(--text-2);max-width:62ch}
.sec__head{margin-bottom:clamp(28px,3vw,42px);max-width:74ch}
.sec__head h2{margin:14px 0 14px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow::before{display:none}

/* the spectrum: the studio's only chromatic gesture */
.grad{background:linear-gradient(96deg,#FF5C9E 0%,#8FB6FF 30%,#4ED3D8 58%,#C3E79B 84%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}

/* ---------- glass primitives ---------------------------------------------- */
.glass{
  position:relative;isolation:isolate;
  background:var(--fill);
  border:1px solid var(--line);
  border-radius:var(--r);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow);
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.10),transparent 58%);
}

/* ---------- buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 22px;border-radius:999px;border:1px solid transparent;
  font-size:.94rem;font-weight:640;letter-spacing:-.005em;cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn svg{width:16px;height:16px;flex:none}
.btn--lg{height:54px;padding:0 28px;font-size:1rem}
.btn--sm{height:38px;padding:0 16px;font-size:.86rem}
.btn--primary{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(219,232,255,.88));
  color:#05101F;
  box-shadow:0 16px 36px -18px rgba(180,205,255,.7), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(180,205,255,.85), inset 0 1px 0 #fff}
.btn--ghost{
  background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--line-3);transform:translateY(-2px)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}

.arrow{transition:transform .22s ease}
a:hover .arrow,.btn:hover .arrow{transform:translateX(3px)}

/* ---------- navigation ---------------------------------------------------- */
.nav{position:sticky;top:0;z-index:600;
  background:linear-gradient(180deg,rgba(4,8,15,.72),rgba(4,8,15,.44));
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  transition:border-color .3s ease,background .3s ease}
.nav.is-stuck{border-bottom-color:var(--line);
  background:linear-gradient(180deg,rgba(4,8,15,.88),rgba(4,8,15,.66));
  box-shadow:0 18px 44px -34px rgba(0,0,0,.95)}
.nav__in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.nav__logo{flex:none;display:flex;align-items:center}
.nav__logo img{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__links a{font-size:.92rem;font-weight:500;color:var(--text-2);position:relative;
  transition:color .18s ease}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:1.5px;border-radius:2px;background:linear-gradient(90deg,#FF5C9E,#8FB6FF,#4ED3D8)}
.nav__tools{display:flex;align-items:center;gap:12px;flex:none}
.lang{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:999px;padding:3px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lang a{padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.03em;
  color:var(--text-3);transition:.18s ease}
.lang a.is-active{background:rgba(255,255,255,.10);color:var(--ink)}
.lang a:hover{color:var(--ink)}
.nav__burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);align-items:center;justify-content:center;cursor:pointer}
.nav__burger span{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;
  position:relative;transition:.22s ease}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:17px;
  height:1.5px;background:var(--ink);border-radius:2px;transition:.22s ease}
.nav__burger span::before{top:-5.5px}.nav__burger span::after{top:5.5px}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.sheet{position:fixed;inset:var(--nav-h) 0 0;z-index:590;display:none;flex-direction:column;gap:6px;
  padding:26px var(--gutter) 40px;
  background:linear-gradient(180deg,rgba(4,8,15,.97),rgba(6,16,32,.99));
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);overflow-y:auto}
.sheet.is-open{display:flex}
.sheet a{padding:15px 2px;font-size:1.12rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}
.sheet .btn{margin-top:18px}

/* ---------- hero ---------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(48px,6vw,86px);padding-bottom:clamp(28px,3.4vw,46px);
  overflow:hidden}
.hero__in{max-width:960px}
.hero h1{margin:20px 0 24px}
.hero__lede{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--text-2);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero__note{margin-top:22px;font-size:.84rem;color:var(--text-3)}

/* the studio pill: twenty dots, one per brand */
.spectrum{display:flex;gap:5px;margin-bottom:26px;align-items:center}
.spectrum i{width:7px;height:7px;border-radius:50%;background:var(--c);display:block;
  box-shadow:0 0 12px -2px var(--c)}

/* ---------- marquee: the twenty, scrolling ------------------------------- */
.marquee{position:relative;margin-top:clamp(36px,4.4vw,60px);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__row{display:flex;gap:12px;width:max-content;animation:slide 64s linear infinite}
.marquee__row--b{animation-duration:78s;animation-direction:reverse;margin-top:12px}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
.mchip{display:inline-flex;align-items:center;gap:11px;flex:none;
  height:54px;padding:0 19px 0 15px;border-radius:15px;
  background:var(--fill);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .22s ease,background .22s ease,transform .22s ease}
.mchip:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:var(--fill-2);transform:translateY(-2px)}
.mchip__dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 14px -1px var(--c)}
.mchip__t{font-size:.9rem;font-weight:620;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.mchip__c{font-size:.74rem;color:var(--text-3);white-space:nowrap}

/* ---------- stat band ----------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line);background:var(--line)}
.stat{background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  padding:26px 24px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.stat b{display:block;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;color:var(--ink);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:9px;font-size:.83rem;color:var(--text-3);line-height:1.45}

/* ---------- product grid -------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  padding:22px 20px 20px;border-radius:var(--r);
  background:var(--fill);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.pcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 56%),
    radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.08),transparent 58%);
}
/* the brand's own colour as a hairline across the top edge */
.pcard::after{
  content:"";position:absolute;left:20px;right:20px;top:-1px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.75;
  transition:opacity .24s ease,left .24s ease,right .24s ease;
}
.pcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 46%,var(--line-2));
  background:var(--fill-2);
  box-shadow:0 34px 74px -40px color-mix(in srgb,var(--c) 60%,rgba(0,0,0,.9)),
             inset 0 1px 0 rgba(255,255,255,.18)}
.pcard:hover::after{opacity:1;left:0;right:0}
.pcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  min-height:38px;margin-bottom:16px}
/* the lockup is the heading; the brand's colour stays in the hairline, the
   glow and the domain, so twenty wordmarks do not fight each other */
.pcard__logo{margin:0;font-size:0;line-height:0}
.pcard__logo img{height:34px;width:auto;max-width:172px;opacity:.92;
  transition:opacity .24s ease}
.pcard:hover .pcard__logo img{opacity:1}
.pcard__cat{font-size:.69rem;font-weight:640;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:9px}
.pcard p{font-size:.875rem;line-height:1.56;color:var(--text-2);flex:1}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}
.pcard__dom{font-family:var(--mono);font-size:.74rem;color:var(--text-3);letter-spacing:-.01em}
.pcard:hover .pcard__dom{color:var(--c)}
.pcard__go{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);transition:.22s ease}
.pcard__go svg{width:12px;height:12px;stroke:var(--text-2);fill:none;stroke-width:2}
.pcard:hover .pcard__go{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent)}
.pcard:hover .pcard__go svg{stroke:var(--ink)}

/* status badge — the honest label, per the 2026-09-11 product table */
.badge{display:inline-flex;align-items:center;gap:6px;flex:none;
  height:22px;padding:0 9px;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--text-2);background:rgba(255,255,255,.045)}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge--live{color:#6EE7A8;border-color:rgba(110,231,168,.34);background:rgba(110,231,168,.10)}
.badge--live i{box-shadow:0 0 8px #6EE7A8}
.badge--early{color:#8FB6FF;border-color:rgba(143,182,255,.34);background:rgba(143,182,255,.10)}
.badge--service,.badge--program{color:#E7C98F;border-color:rgba(231,201,143,.30);background:rgba(231,201,143,.09)}
.badge--dev{color:var(--text-3)}

/* ---------- thesis blocks ------------------------------------------------- */
.thesis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcard{padding:26px 24px}
.tcard__n{font-family:var(--mono);font-size:.74rem;color:var(--text-3);letter-spacing:.06em}
.tcard h3{margin:13px 0 10px}
.tcard p{font-size:.9rem;line-height:1.6;color:var(--text-2)}
.tcard__brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.tcard__brands span{font-size:.72rem;font-weight:600;color:var(--text-3);
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035)}

/* ---------- numbered steps ------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;padding-top:22px}
.step::before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;border-radius:3px;
  background:linear-gradient(90deg,var(--ice),transparent)}
.step__n{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ice);letter-spacing:.06em}
.step h3{margin:12px 0 9px}
.step p{font-size:.88rem;color:var(--text-2);line-height:1.58}

/* ---------- layered list (technology page) -------------------------------- */
.layers{display:flex;flex-direction:column;gap:12px}
.layer{display:grid;grid-template-columns:78px 1fr;gap:24px;align-items:start;padding:24px 26px}
.layer__n{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--text-3);
  letter-spacing:-.03em;line-height:1}
.layer h3{margin-bottom:9px}
.layer p{font-size:.92rem;color:var(--text-2);line-height:1.62;max-width:70ch}

/* ---------- timeline ------------------------------------------------------ */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;padding-top:30px}
.tl::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--line),var(--line-2),var(--line))}
.tlitem{position:relative}
.tlitem::before{content:"";position:absolute;top:-30px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--ice);box-shadow:0 0 0 4px rgba(143,182,255,.16),0 0 14px -1px var(--ice)}
.tlitem b{display:block;font-family:var(--mono);font-size:.88rem;font-weight:700;color:var(--ice);
  letter-spacing:.04em;margin-bottom:9px}
.tlitem h3{font-size:1.04rem;margin-bottom:7px}
.tlitem p{font-size:.86rem;color:var(--text-2);line-height:1.55}

/* ---------- board --------------------------------------------------------- */
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.person{padding:0;overflow:hidden;display:flex;flex-direction:column}
.person__ph{position:relative;aspect-ratio:1;overflow:hidden;background:var(--navy)}
.person__ph img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.03);transition:filter .4s ease,transform .5s ease}
.person:hover .person__ph img{filter:saturate(1) contrast(1);transform:scale(1.035)}
.person__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(4,8,15,.72) 100%)}
.person__ph--empty{display:grid;place-items:center;
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.person__ph--empty span{font-size:1.9rem;font-weight:700;color:var(--text-3);letter-spacing:-.03em}
.person__b{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1}
.person h3{font-size:.94rem;margin-bottom:5px;letter-spacing:-.02em}
.person__role{font-size:.755rem;font-weight:620;color:var(--ice);line-height:1.4}
/* isim ya da unvan iki satira dustugunde kartlarin alt satiri kaymasin */
.person__area{display:block;margin-top:auto;padding-top:8px;font-size:.76rem;color:var(--text-3)}

/* ---------- reference wall ------------------------------------------------ */
.refgroup{margin-bottom:44px}
.refgroup h3{font-size:.76rem;font-weight:680;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:18px}
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
/* One colour, one weight. The source files are raster scans with the logo
   baked onto white, so they are converted once at build time: the background
   is sampled from the corners and removed, and the remaining ink becomes white
   with the alpha it had. 3.9 MB of embedded JPEG became 219 KB of PNG.
   Six of them do not survive that (a light-grey plate behind the mark, or a
   dark field); those show as a wordmark until a transparent file arrives —
   same tile, same weight, so the wall still reads as one thing. */
.ref{display:flex;align-items:center;justify-content:center;height:96px;padding:20px 24px;
  border-radius:var(--r-sm);background:rgba(255,255,255,.042);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .22s ease,background .22s ease,transform .22s ease}
.ref:hover{border-color:var(--line-2);background:rgba(255,255,255,.075);transform:translateY(-2px)}
.ref img{max-height:42px;max-width:100%;width:auto;opacity:.66;transition:opacity .22s ease}
.ref:hover img{opacity:.94}
.ref--word span{font-size:.96rem;font-weight:650;letter-spacing:-.015em;color:var(--text-2);
  text-align:center;line-height:1.3;transition:color .22s ease}
.ref--word:hover span{color:var(--ink)}

/* ---------- forms --------------------------------------------------------- */
.formwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3vw,42px);align-items:start}
.formcard{padding:clamp(26px,3vw,38px)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.field label{font-size:.83rem;font-weight:600;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.94rem;color:var(--ink);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390A3BC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:42px}
.field select option{background:#0A1424;color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ice);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(143,182,255,.18)}
.field__err{display:none;font-size:.79rem;color:#FF8B8B}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:rgba(255,139,139,.6)}
.field.is-bad .field__err{display:block}

.file{position:relative}
.file input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.file__box{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:12px;
  border:1px dashed var(--line-2);background:rgba(255,255,255,.03);transition:.2s ease}
.file:hover .file__box{border-color:var(--line-3);background:rgba(255,255,255,.055)}
.file__box svg{width:19px;height:19px;flex:none;stroke:var(--text-2);fill:none;stroke-width:1.8}
.file__t{font-size:.9rem;color:var(--text);line-height:1.35}
.file__h{display:block;font-size:.76rem;color:var(--text-3);margin-top:2px}

.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px}
.consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--ice);cursor:pointer}
.consent span{font-size:.82rem;line-height:1.55;color:var(--text-2)}
.consent a,.consent button{color:var(--ice);text-decoration:underline;background:none;border:0;
  padding:0;font-size:inherit;cursor:pointer}
.consent.is-bad span{color:#FF8B8B}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{min-height:20px;font-size:.85rem;color:var(--text-2);margin-bottom:12px}
.form__micro{margin-top:15px;font-size:.76rem;line-height:1.55;color:var(--text-3)}
.form-done{display:none;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:44px 20px}
.form-done.is-on{display:flex}
.form-done svg{width:46px;height:46px;stroke:#6EE7A8;fill:none;stroke-width:1.8}
.form-done p{font-size:1.02rem;color:var(--ink);max-width:38ch}

/* contact aside */
.aside{padding:clamp(24px,3vw,32px)}
.aside h3{margin-bottom:16px}
.aside__row{display:flex;flex-direction:column;gap:3px;padding:13px 0;border-bottom:1px solid var(--line)}
.aside__row:last-of-type{border-bottom:0}
.aside__row span{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.aside__row a,.aside__row b{font-size:.94rem;font-weight:500;color:var(--ink)}
.aside__row a:hover{color:var(--ice)}
.cities{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.cities span{font-size:.88rem;color:var(--text);font-weight:500}
.cities i{width:3px;height:3px;border-radius:50%;background:var(--text-3);display:block}

/* ---------- modal --------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:800;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,32px)}
.modal.is-open{display:flex}
.modal__bd{position:absolute;inset:0;background:rgba(2,6,14,.72);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
.modal__p{position:relative;width:100%;max-width:680px;max-height:86vh;overflow-y:auto;
  padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(18,30,50,.96),rgba(8,16,30,.97));
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.modal__x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;
  display:grid;place-items:center;transition:.18s ease}
.modal__x:hover{background:rgba(255,255,255,.11);border-color:var(--line-2)}
.modal__x svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2}
.modal__p h3{font-size:1.3rem;margin-bottom:6px;padding-right:44px}
.modal__meta{font-size:.82rem;color:var(--text-3);margin-bottom:22px}
.imprint{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;font-size:.88rem;line-height:1.5}
.imprint dt{color:var(--text-3)}
.imprint dd{color:var(--ink)}

/* ---------- cookie bar ---------------------------------------------------- */
.cookiebar{position:fixed;left:0;right:0;bottom:18px;z-index:750;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 20px;width:min(880px,calc(100vw - 32px));margin-inline:auto;
  padding:16px 20px;border-radius:18px;
  background:var(--fill);border:1px solid var(--line-2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(26px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.cookiebar.is-shown{opacity:1;transform:none;pointer-events:auto}
.cookiebar p{flex:1 1 300px;margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.cookiebar p a{color:var(--ice);text-decoration:underline}
.cookiebar__a{display:flex;gap:10px;flex:0 0 auto}

/* ---------- footer -------------------------------------------------------- */
.footer{border-top:1px solid var(--line);margin-top:clamp(32px,3.4vw,56px);
  background:linear-gradient(180deg,rgba(255,255,255,.026),transparent)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px);
  padding-block:clamp(40px,4.6vw,60px) 30px}
.footer__logo img{height:30px;width:auto;margin-bottom:18px}
.footer__about{font-size:.87rem;color:var(--text-2);max-width:34ch;line-height:1.62}
.footer h4{font-size:.74rem;font-weight:680;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:15px}
.footer__col a,.footer__col button{display:block;font-size:.88rem;color:var(--text-2);
  margin-bottom:11px;background:none;border:0;padding:0;text-align:left;cursor:pointer;
  transition:color .18s ease}
.footer__col a:hover,.footer__col button:hover{color:var(--ink)}
.footer__brands{display:flex;flex-wrap:wrap;gap:7px 15px;align-items:baseline;
  padding-block:20px;border-top:1px solid var(--line)}
.footer__brands b{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);font-weight:680;margin-right:6px}
.footer__brands a{font-size:.78rem;color:var(--text-3);transition:color .18s ease}
.footer__brands a:hover{color:var(--ink)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  justify-content:space-between;padding-block:20px 30px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--text-3)}
.footer__legal{display:flex;flex-wrap:wrap;gap:16px}
.footer__legal a,.footer__legal button{color:inherit;background:none;border:0;padding:0;
  font-size:inherit;cursor:pointer;transition:color .18s ease}
.footer__legal a:hover,.footer__legal button:hover{color:var(--ink)}

/* ---------- legal pages --------------------------------------------------- */
.doc{max-width:78ch;margin-inline:auto}
.doc h2{font-size:1.26rem;margin:38px 0 12px;letter-spacing:-.02em}
.doc h3{font-size:1.02rem;margin:24px 0 9px}
.doc p,.doc li{font-size:.95rem;line-height:1.78;color:var(--text)}
.doc p{margin-bottom:13px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc ul li{list-style:disc;margin-bottom:6px}
.doc ol li{list-style:decimal;margin-bottom:6px}
.doc a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}
.doc strong{color:var(--ink);font-weight:640}
.doc table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:.88rem;
  display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.doc th{background:rgba(255,255,255,.05);color:var(--ink);font-weight:640}
.doc__meta{font-size:.84rem;color:var(--text-3);margin-bottom:30px;padding-bottom:22px;
  border-bottom:1px solid var(--line)}
.doc__back{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--text-2);
  margin-bottom:26px;transition:color .18s ease}
.doc__back:hover{color:var(--ink)}
.doc__back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- reveal --------------------------------------------------------
   Scoped to .js, which /assets/js/js-on.js sets in the head. If that file does
   not run, nothing is ever hidden: a page whose content depends on JavaScript
   to become visible is a page that disappears for anyone it fails for. */
.js [data-rv]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-rv]{opacity:1;transform:none}}

/* ---------- one focus ring, one selection, one scrollbar ------------------ */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ice);outline-offset:2px;border-radius:6px}
::selection{background:rgba(143,182,255,.34);color:#fff}
*{scrollbar-color:rgba(143,182,255,.34) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(143,182,255,.3);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(143,182,255,.55);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .thesis{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .tl{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .formwrap{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__tools .btn{display:none}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .layer{grid-template-columns:1fr;gap:12px}
  .layer__n{font-size:1.1rem}
}
@media (max-width:620px){
  :root{--nav-h:64px}
  .pgrid,.thesis,.steps,.board{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:30px}
  .tl::before{display:none}
  .tlitem{padding-left:24px}
  .tlitem::before{top:6px;left:0}
  .hero__cta .btn{width:100%}
  .cookiebar{flex-direction:column;align-items:stretch}
  .cookiebar__a{width:100%}
  .cookiebar__a .btn{flex:1}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .refs{grid-template-columns:repeat(2,1fr)}
  .ref{height:82px}
}

/* A browser without backdrop-filter must not be left with transparent cards. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.pcard,.mchip,.modal__p,.cookiebar,.sheet,.nav,.stat,.ref,
  .field input,.field select,.field textarea{background:rgba(10,22,42,.94)}
}