:root {
  --black: #000;
  --ink: #0c0c0e;
  --panel: #141415;
  --panel-2: #1b1b1d;
  --line: #2b2b2b;
  --cream: #fafaf2;
  --muted: #8e8e8e;
  --dim: #646464;
  --green: #62c73b;
  --violet: #461ed7;
  --violet-soft: #7b5cff;
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --brand: Poppins, Inter, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--cream); font: 400 17px/1.55 var(--sans); overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { animation: none !important; } }

/* top bar */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); color: #fff; font: 500 14px/1 var(--brand); }
.topbar a { text-decoration: none; }
.topbar__nav { display: flex; gap: 0; padding: 0; border: 0; background: transparent; }
.topbar__nav a { color: #fff; padding: 13px 20px; border: 0; transition: background .2s; }
.topbar__nav a:first-child { border-left: 0; }
.topbar__nav a:hover, .topbar__nav a:focus-visible { background: transparent; text-decoration: none; color: var(--green); }
@media (max-width: 560px) { .topbar__nav { display: none; } }

/* type */
.eyebrow { margin: 0 0 18px; font-size: 12px; text-transform: uppercase; color: var(--green); }
.display { margin: 0; font: italic 500 clamp(24px, 4.6vw, 68px)/1.06 var(--brand); letter-spacing: -.035em; }
.display--sm { font-size: clamp(22px, 3.8vw, 56px); margin-top: clamp(80px, 12vw, 160px); }
.lede { max-width: 640px; margin: clamp(22px, 3vw, 36px) 0 0; color: #c9c9c2; font-size: clamp(17px, 1.35vw, 20px); }
.subhead { margin: clamp(70px, 9vw, 120px) 0 24px; font: 500 clamp(22px, 2vw, 28px)/1.2 var(--brand); }
.section { position: relative; padding: clamp(100px, 13vw, 180px) 0 0; }

/* HERO */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(88px, 10vw, 120px) 0 28px; overflow: hidden; isolation: isolate; }
.hero__glow { position: absolute; z-index: -2; left: 50%; top: 50%; width: max(115vw, 115svh); height: max(115vw, 115svh); max-width: none; object-fit: contain; opacity: 1; transform: translate(-50%, -50%) rotate(-55deg); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.12) 65%, rgba(0,0,0,.45)), linear-gradient(180deg, rgba(0,0,0,.55), transparent 30%, transparent 55%, #000 100%); }
.hero__inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 24px; align-content: center; align-items: start; flex: 1; }
.hero__title span { white-space: nowrap; }
.hero__title { margin: 0; font: italic 500 clamp(28px, 6.1vw, 92px)/1.08 var(--brand); letter-spacing: -.04em; animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero .eyebrow { grid-column: 1 / -1; margin-bottom: 0; animation: rise 1s both; }
.hero__stage { position: relative; aspect-ratio: 1.17; animation: rise 1.3s .15s cubic-bezier(.2,.7,.2,1) both; }
.hero__obj { position: absolute; left: -6%; bottom: -8%; width: 92%; animation: float 7s ease-in-out infinite; }
.hud { position: absolute; right: 2%; top: 2%; z-index: 2; padding: 22px 30px; }
.hud img { width: clamp(150px, 16vw, 240px); }
.hud__c { position: absolute; width: 26px; height: 26px; border: 5px solid var(--cream); }
.hud__c--tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.hud__c--tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hud__c--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.hud__c--br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud-line { position: absolute; z-index: 2; right: 10%; top: 24%; width: 26%; color: var(--cream); fill: var(--cream); overflow: visible; }
.meta { width: min(100% - 2 * var(--gutter), var(--max)); margin: 28px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.4); padding-top: 24px; }
.meta > div { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.3); }
.meta > div:first-child { padding-left: 0; border-left: 0; }
.meta > div:last-child { padding-right: 0; }
.meta dt { font: 400 11px/1 var(--mono); text-transform: uppercase; color: #fff; opacity: .85; margin-bottom: 12px; }
.meta dd { color: #fff; margin: 0; font-size: 14px; line-height: 1.4; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes float { 50% { transform: translateY(-14px) rotate(-1deg); } }
@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__stage { margin-top: 10px; }
  .meta { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .meta > div:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* CONTEXT */
.context__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 7vw, 100px); margin-top: clamp(50px, 7vw, 90px); }
.tag { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--panel-2); font-size: 13px; text-transform: uppercase; color: var(--cream); }
.context__grid .tag { display: block; padding: 0 0 18px; border-radius: 0; background: none; border-bottom: 1px solid #3b3b3b; font-size: 11px; letter-spacing: .12em; color: #fff; }
.ticks { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: context-fact; }
.ticks li { counter-increment: context-fact; padding: 18px 0 18px 40px; position: relative; color: #d4d4ce; }
.ticks li::before { content: counter(context-fact, decimal-leading-zero); position: absolute; left: 0; top: 20px; font: 11px/1.55 var(--mono); color: #85857f; }
.quote { margin: 28px 0 0; padding: 0 0 0 26px; border-left: 3px solid var(--green); font: 400 clamp(25px, 2.6vw, 38px)/1.3 var(--brand); letter-spacing: -.025em; }
.quote strong { font-weight: 500; color: var(--green); }

.v0 { margin: clamp(60px, 8vw, 110px) 0 0; position: relative; }
.v0 img { width: 100%; border-radius: 14px; border: 1px solid var(--line); filter: grayscale(.25); }
.v0 figcaption { margin-top: 12px; font-size: 12px; color: var(--dim); }
@media (max-width: 720px) { .context__grid { grid-template-columns: 1fr; } }

/* SCOPE */
.scope__list { list-style: none; padding: 0; margin: clamp(50px, 7vw, 90px) 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.scope__list li { padding: 22px 18px 26px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-height: 190px; }
.scope__list li + li { padding-left: 18px; }
.scope__list li:last-child { border-right: 0; }
.scope__list span { color: var(--green); font-size: 12px; }
.scope__list b { margin-top: 28px; font: 500 clamp(18px, 1.6vw, 23px)/1.15 var(--brand); }
.scope__list i { font-style: normal; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .scope__list { grid-template-columns: 1fr 1fr; }
  .scope__list li, .scope__list li + li { padding: 20px 14px; border-bottom: 1px solid var(--line); min-height: 150px; }
  .scope__list li:nth-child(2n) { border-right: 0; }
}

/* BRAND bento */
.bento { display: grid; gap: 12px; margin-top: clamp(50px, 7vw, 90px); }
.bento--brand { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); }
.tile { position: relative; border-radius: var(--radius); background: var(--panel); overflow: hidden; display: grid; place-items: center; padding: 28px; min-height: 220px; }
.tile__label { position: absolute; left: 18px; bottom: 14px; font-size: 11px; text-transform: uppercase; color: var(--dim); }
.tile--cream { background: var(--cream); }
.tile--cream .tile__label { color: #8a8a80; }
.tile--logo { grid-column: span 3; }
.tile--logo img { width: min(78%, 420px); }
.logo-dark { filter: brightness(0); }
.tile--video { grid-column: span 3; padding: 0; background: #000; min-height: 320px; }
.tile--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--emoji { min-height: 320px; }
.tile--emoji { grid-column: span 3; background: #fff; }
.tile--emoji .tile__label { color: #555; }
.tile--emoji img { width: 80%; }
.tile--palette { grid-column: span 6; padding: 0; display: grid; place-items: stretch; grid-template-columns: 1.3fr 1fr 1fr .8fr; min-height: 260px; }
.swatch { background: var(--c); height: 100%; display: flex; align-items: flex-end; padding: 16px; font-size: 11px; line-height: 1.4; border-right: 1px solid #1a1a1a; }
.tile--type { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; }
.type-a { font: 500 96px/0.9 var(--brand); }
.tile--type div { display: flex; flex-direction: column; gap: 2px; }
.tile--type b { font: 500 18px/1.2 var(--brand); }
.tile--type b.mono { font-family: var(--mono); font-size: 15px; }
.tile--type span.mono { font-size: 11px; color: var(--dim); text-transform: uppercase; }
.tile--dock { grid-column: span 3; background: linear-gradient(160deg, #d9d9d9, #bdbdbd); }
.tile--dock .tile__label { color: #555; }
.dock { position: relative; display: flex; gap: 14px; align-items: end; padding: 14px 18px; border-radius: 26px; background: rgba(255,255,255,.35); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.dock img { width: clamp(54px, 6vw, 84px); border-radius: 20%; }
.dock__app { transform: scale(1.15); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.dock__tip { position: absolute; left: 50%; top: -46px; translate: -50% 0; padding: 6px 14px; border-radius: 8px; background: rgba(240,240,240,.9); color: #111; font: 500 14px/1 var(--sans); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.tile--tab { grid-column: span 3; background: #2a2a2c; align-items: end; padding: 32px 0 52px 28px; }
.tile--tab .tile__label { color: #ccc; }
.browser-tab { width: 100%; background: #fff; border-radius: 18px 0 0 0; color: #333; }
.browser-tab__tab { display: inline-flex; padding: 16px 26px; }
.browser-tab__tab img { width: 160px; filter: brightness(0) opacity(.85); }
.browser-tab__bar { display: flex; gap: 20px; align-items: center; padding: 14px 26px 22px; font-size: 22px; border-top: 1px solid #eee; }
.browser-tab__url { flex: 1; padding: 8px 16px; border-radius: 10px; background: #f0f0f0; color: #999; font-size: 17px; }
@media (max-width: 900px) {
  .bento--brand { grid-template-columns: 1fr 1fr; }
  .tile--logo, .tile--video, .tile--emoji, .tile--palette, .tile--type, .tile--dock, .tile--tab { grid-column: span 2; grid-row: auto; }
  .tile--video { aspect-ratio: 4/3; }
  .tile--palette { grid-template-columns: 1fr 1fr; }
  .swatch { min-height: 130px; }
}

/* WEBSITE */
.website { overflow: hidden; isolation: isolate; }
.website__bg { position: absolute; inset: 0 0 auto; height: 70%; z-index: -1; opacity: .35; mask-image: linear-gradient(transparent 0%, #000 20%, transparent 85%); -webkit-mask-image: linear-gradient(transparent 0%, #000 20%, transparent 85%); }
.website__bg img { width: 100%; height: 100%; object-fit: cover; }
.site-stage { position: relative; margin-top: clamp(50px, 7vw, 90px); display: grid; grid-template-columns: 1fr minmax(180px, 250px); gap: clamp(16px, 3vw, 40px); align-items: end; }
.browser { border-radius: 14px; overflow: hidden; background: #111; border: 1px solid #333; box-shadow: 0 40px 120px rgba(98,199,59,.12); }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #1b1b1d; border-bottom: 1px solid #2c2c2c; font: 12px var(--mono); color: var(--dim); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3c; }
.browser__bar span { margin-left: 14px; padding: 4px 14px; border-radius: 6px; background: #111; }
.browser__view, .phone__view { position: relative; overflow: hidden; }
.browser__view { aspect-ratio: 1200 / 645; }
.browser__view img, .phone__view img { width: 100%; transition: transform 9s cubic-bezier(.45,.05,.4,1); will-change: transform; }
.phone { position: relative; border-radius: 38px; padding: 10px; background: #111; border: 1px solid #3a3a3a; }
.phone__view { aspect-ratio: 9 / 19.5; border-radius: 30px; }
.phone__notch { position: absolute; z-index: 2; left: 50%; top: 18px; translate: -50% 0; width: 32%; height: 22px; border-radius: 20px; background: #000; }
.pr-card { position: absolute; left: clamp(-10px, 3vw, 40px); bottom: clamp(-40px, -3vw, -20px); width: min(340px, 70%); padding: 18px 20px; border-radius: 0; background: rgba(20,20,21,.9); backdrop-filter: blur(14px); border: 1px solid #333; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.pr-card__head { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; color: var(--green); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--green { background: var(--green); box-shadow: 0 0 10px var(--green); }
.pr-card__title { margin: 10px 0 6px; font: 500 18px/1.25 var(--brand); }
.pr-card__flow { list-style: none; display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #2c2c2c; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.pr-card__flow li { padding: 5px 9px; border-radius: 0; border: 1px solid #333; }
.pr-card__flow li + li::before { content: "→"; margin: 0 8px 0 -2px; color: #555; }
.pr-card__flow li + li { border: 0; padding-left: 0; }
.pr-card__flow li.on { color: var(--green); }
.hint { margin: 60px 0 0; font-size: 11px; text-transform: uppercase; color: var(--dim); }
.grid-site { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shot { margin: 0; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid #222; position: relative; }
.shot--wide { grid-column: span 2; }
.shot img { width: 100%; }
.shot figcaption { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.7); font-size: 11px; text-transform: uppercase; }
@media (max-width: 720px) {
  .site-stage { grid-template-columns: 1fr; }
  .phone { width: 62%; margin: 0 auto; }
  .pr-card { position: relative; left: 0; bottom: 0; width: 100%; margin-top: 12px; }
  .grid-site { grid-template-columns: 1fr; }
  .shot--wide { grid-column: auto; }
}

/* 3D objects marquee */
.objects { margin-top: clamp(50px, 7vw, 90px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.objects__track { display: flex; gap: 12px; width: max-content; animation: marquee 60s linear infinite; }
.objects:hover .objects__track { animation-play-state: paused; }
.objects__track img { flex: 0 0 auto; width: clamp(220px, 24vw, 340px); height: clamp(220px, 24vw, 340px); object-fit: contain; padding: clamp(16px, 2vw, 28px); border-radius: var(--radius); background: radial-gradient(circle at 50% 60%, #17251a, #050505 70%); border: 1px solid #1d1d1d; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* covers */
.covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cover { position: relative; border-radius: var(--radius); overflow: hidden; background: #000b10; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.cover::before { content: ""; position: absolute; inset: -8%; z-index: 0; background: radial-gradient(ellipse at 10% 15%, #29129b 0, transparent 40%), radial-gradient(ellipse at 82% 8%, #579a82 0, transparent 23%), radial-gradient(ellipse at 90% 92%, #007c52 0, transparent 36%), radial-gradient(ellipse at 5% 95%, #112aa9 0, transparent 35%); filter: blur(15px); }
.cover::after { content: ""; position: absolute; inset: 45% 0 0; z-index: 2; background: linear-gradient(transparent, rgba(0,0,0,.88) 70%); }
.cover > img { position: absolute; z-index: 1; width: 62%; right: 6%; top: 6%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cover__text { position: relative; z-index: 3; padding: 20px; }
.cover:hover > img { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
.cover__text span { font-size: 10px; text-transform: uppercase; color: var(--green); }
.cover h4 { margin: 6px 0 0; font: 500 clamp(16px, 1.4vw, 19px)/1.2 var(--brand); }
.cover--xl { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.cover--xl > img { width: 70%; right: 4%; top: 4%; }
.cover--xl h4 { font-size: clamp(22px, 2.4vw, 34px); max-width: 80%; }
.cover--obj-start-card::before { background: radial-gradient(ellipse at 0% 10%, #6b20d6, transparent 65%), radial-gradient(ellipse at 100% 90%, #35ed32, transparent 65%); }
.cover--emoji-trio::before { background: radial-gradient(ellipse at 10% 20%, #4512af, transparent 45%), radial-gradient(ellipse at 50% 110%, #4711b2, transparent 55%), radial-gradient(ellipse at 0% 100%, #2fa95a, transparent 23%); }
@media (max-width: 900px) { .covers { grid-template-columns: 1fr 1fr; } .cover--xl { min-height: 380px; } }
@media (max-width: 560px) { .covers { grid-template-columns: 1fr; } .cover--xl { grid-column: auto; grid-row: auto; } }

/* social */
.social { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.social__card { position: relative; border-radius: var(--radius); overflow: hidden; background: #0f0f10; border: 1px solid #222; min-height: 380px; padding: 24px; isolation: isolate; }
.social__logo { width: 120px; }
.social__title { margin: 24px 0 0; font: 600 clamp(28px, 3vw, 44px)/1 var(--brand); letter-spacing: -.02em; position: relative; z-index: 2; }
.social__title b { font-size: 1.45em; font-weight: 700; }
.social__title--box { display: inline-block; max-width: 72%; padding: 18px; border: 1px solid #444; border-radius: 16px; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; background: rgba(0,0,0,.5); }
.social__obj { position: absolute; z-index: -1; right: -6%; top: 6%; width: 62%; }
.social__obj--keys { top: auto; bottom: -4%; width: 70%; right: -8%; }
.social__ui { position: absolute; left: 24px; bottom: 24px; width: 46%; border-radius: 12px; border: 1px solid #333; }
.social__card--tum { display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: radial-gradient(circle at 50% 55%, rgba(98,199,59,.35), transparent 60%), #000; }
.social__kicker { margin: 0; font-size: 15px; }
.social__badge { width: 78%; }
.social__foot { margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .social { grid-template-columns: 1fr; } }

/* PRODUCT */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(50px, 7vw, 90px); counter-reset: s; }
.process__step { padding: 24px; border-radius: var(--radius); background: var(--panel); position: relative; }
.process__step span { font-size: 11px; text-transform: uppercase; color: var(--green); }
.process__step p { margin: 40px 0 0; font-size: 17px; }
.process__step::after { counter-increment: s; content: "0" counter(s); position: absolute; right: 24px; top: 24px; font: 400 11px/1.5 var(--mono); letter-spacing: .02em; color: #85857f; }
.review { margin: 12px 0 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.review img { width: 100%; border-radius: var(--radius); border: 1px solid #222; }
.review figcaption { padding: 24px; border-radius: var(--radius); background: var(--panel); color: var(--cream); border: 1px solid #2c2c2c; display: flex; flex-direction: column; justify-content: space-between; }
.review figcaption span { font-size: 11px; text-transform: uppercase; color: #85857f; }
.review figcaption p { margin: 0; font: 400 clamp(18px, 1.6vw, 22px)/1.35 var(--sans); }
@media (max-width: 820px) { .process, .review { grid-template-columns: 1fr; } }

/* before / after */
.ba { margin-top: clamp(40px, 6vw, 70px); display: grid; grid-template-columns: 1fr auto; gap: 16px 12px; }
.ba__tabs, .ba__switch { display: flex; gap: 6px; flex-wrap: wrap; }
.ba button { appearance: none; border: 1px solid #333; background: transparent; color: var(--cream); padding: 10px 18px; border-radius: 999px; font: 500 14px/1 var(--brand); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ba button:hover { border-color: #666; }
.ba__tabs button[aria-selected="true"] { background: var(--cream); color: #000; border-color: var(--cream); }
.ba__switch { padding: 4px; border-radius: 999px; background: var(--panel-2); }
.ba__switch button { border: 0; padding: 10px 16px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.ba__switch button[aria-pressed="true"] { background: var(--green); color: #000; }
.ba__pair { grid-column: 1 / -1; display: none; }
.ba__pair.is-active { display: block; }
.ba__before, .ba__after { border-radius: 16px; overflow: hidden; border: 1px solid #2a2a2a; background: #0c0c0e; aspect-ratio: 16 / 8.6; position: relative; }
.ba__before img, .ba__after > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ba[data-state="after"] .ba__before, .ba[data-state="before"] .ba__after { display: none; }
.ba__pair .ba__before, .ba__pair .ba__after { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: scale(.99); } }
.ba__note { margin: 16px 0 0; font-size: 13px; color: var(--muted); max-width: 780px; }
.ba__note span { color: var(--cream); }
@media (max-width: 700px) { .ba { grid-template-columns: 1fr; } .ba__before, .ba__after { aspect-ratio: auto; } .ba__before img, .ba__after > img { height: auto; } }

/* recreated app UI */
.app { display: grid; grid-template-columns: 200px 1fr; height: 100%; font-family: var(--brand); font-size: 12px; color: #fff; background: #0c0c0e; text-align: left; }
.app__side { background: #101010; border-right: 1px solid #1f1f1f; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.app__logo { width: 64px; margin-bottom: 8px; }
.app__project { padding: 9px 10px; border-radius: 8px; background: #181819; display: flex; flex-direction: column; }
.app__project b { font-weight: 500; font-size: 12px; }
.app__project span { font-size: 9px; color: var(--dim); }
.app__group { margin: 10px 0 0; font-size: 10px; text-transform: uppercase; color: #8a8787; display: flex; justify-content: space-between; letter-spacing: .04em; }
.app__group i { font-style: normal; }
.app__btn, .app__item { padding: 7px 10px; border-radius: 7px; background: #181819; font-size: 11px; }
.app__sub { margin: 6px 0 0; font-size: 9px; color: var(--dim); }
.app__empty { margin: 0; font-size: 9px; color: var(--dim); }
.app__user { margin-top: auto; padding: 7px 10px; border-radius: 7px; background: #181819; font-size: 10px; color: #bbb; }
.app__main { padding: 22px clamp(16px, 5%, 70px); overflow: hidden; }
.app__main--center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.app__hello { margin: 0; font: 500 clamp(18px, 2vw, 26px)/1.2 var(--brand); }
.app__input { position: relative; width: min(100%, 460px); padding: 14px 16px 34px; border-radius: 12px; background: #181819; border: 1px solid #2b2b2b; color: var(--dim); font-size: 12px; }
.caret { color: #fff; animation: blink 1s steps(1) infinite; margin-right: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.app__send { position: absolute; right: 10px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: #646464; color: #000; font-style: normal; display: grid; place-items: center; font-size: 12px; }
.app__h { margin: 0 0 10px; font-weight: 500; font-size: 14px; }
.result { max-width: 560px; padding: 14px; border-radius: 12px; background: #141415; border: 1px solid #232323; display: flex; flex-direction: column; gap: 8px; }
.result__status { margin: 0; color: #ffb700; font-size: 10px; text-transform: uppercase; }
.result__sum { margin: 0; font-size: 10.5px; color: #aaa; font-family: var(--sans); }
.result__label { margin: 6px 0 0; font-size: 9px; text-transform: uppercase; color: #8a8787; }
.issue, .plan { padding: 10px 12px; border-radius: 9px; background: #1b1b1d; border: 1px solid #262626; }
.issue p, .plan p { margin: 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 11px; }
.issue b, .plan b { font-weight: 500; }
.issue > span { display: block; margin-top: 4px; font-size: 9.5px; color: #8a8787; font-family: var(--sans); }
.sev { flex-shrink: 0; padding: 2px 6px; border-radius: 4px; font-size: 8.5px; text-transform: uppercase; color: #000; }
.sev--high { background: #ff4d4d; } .sev--mid { background: #ffb700; }
.issue__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.issue__actions em { font-style: normal; font-size: 9px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: #2b2b2b; }
.issue__actions em.ok { background: #e6e6e6; color: #000; }
.plan { display: flex; justify-content: space-between; align-items: center; }
.plan p { flex-direction: column; align-items: flex-start; gap: 2px; }
.plan span { font-size: 9px; color: var(--dim); }
.plan em { font-style: normal; font-size: 9px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: #2b2b2b; }
@media (max-width: 700px) { .app { grid-template-columns: 1fr; } .app__side { display: none; } .app__main { padding: 18px; } .app__main--center { min-height: 260px; } }

/* 60+ */
.sixty { margin-top: clamp(100px, 13vw, 180px); }
.sixty__num { margin: 0; font: italic 500 clamp(40px, 7vw, 108px)/1 var(--brand); letter-spacing: -.04em; }
.sixty__num span { color: var(--green); font-size: 1.9em; display: block; line-height: .9; }
.sixty__wall { margin-top: clamp(40px, 6vw, 70px); display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--gutter) 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.sixty__wall figure { margin: 0; flex: 0 0 auto; height: clamp(260px, 32vw, 420px); scroll-snap-align: center; position: relative; }
.sixty__wall img { height: 100%; width: auto; max-width: none; border-radius: 16px; border: 1px solid #2a2a2a; }
.sixty__wall figcaption { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.75); font-size: 11px; text-transform: uppercase; }
.wall-app { aspect-ratio: 1.1; }
.plans { height: 100%; padding: 22px; border-radius: 16px; border: 1px solid #2a2a2a; background: #0c0c0e; font-family: var(--brand); display: flex; flex-direction: column; gap: 8px; position: relative; }
.plans__head { display: flex; justify-content: space-between; align-items: center; }
.plans__head b { font-weight: 500; font-size: 16px; }
.run { padding: 6px 12px; border-radius: 999px; background: #fff; color: #000; font-size: 11px; }
.plans__search { padding: 9px 12px; border-radius: 8px; background: #181819; color: var(--dim); font-size: 11px; }
.plans__row { padding: 11px 13px; border-radius: 9px; background: #141415; border: 1px solid #222; display: flex; flex-direction: column; gap: 2px; }
.plans__row b { font-weight: 500; font-size: 13px; }
.plans__row span { font-size: 10px; color: var(--dim); }
.plans__row.is-sel { border-color: #555; background: #1b1b1d; }
.plans__menu { position: absolute; right: 22px; top: 54px; display: flex; flex-direction: column; padding: 4px; border-radius: 9px; background: #232325; border: 1px solid #333; font-size: 11px; }
.plans__menu span { padding: 6px 12px; border-radius: 6px; color: #aaa; }
.plans__menu .on { background: #333; color: #fff; }

/* OUTRO */
.outro { position: relative; margin-top: clamp(100px, 13vw, 180px); padding: clamp(100px, 13vw, 180px) 0; overflow: hidden; isolation: isolate; border-top: 1px solid #1d1d1d; }
.outro__glow { position: absolute; z-index: -1; left: 50%; top: 50%; width: max(145vw, 145svh); height: max(145vw, 145svh); object-fit: cover; opacity: .35; transform: translate(-50%, -50%) rotate(-55deg); }
.outro__big { margin: 0; max-width: 1100px; font: italic 500 clamp(30px, 4.4vw, 64px)/1.05 var(--brand); letter-spacing: -.03em; }
.outro__facts { list-style: none; padding: 0; margin: clamp(50px, 7vw, 90px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.outro__facts li { padding: 22px; border-radius: var(--radius); background: rgba(12,12,14,.7); backdrop-filter: blur(16px); border: 1px solid #262626; display: flex; flex-direction: column; gap: 6px; }
.outro__facts b { font: 500 clamp(28px, 3vw, 44px)/1 var(--brand); color: var(--green); }
.outro__facts span { color: var(--muted); font-size: 14px; }
@media (max-width: 820px) { .outro__facts { grid-template-columns: 1fr 1fr; } }

.footer { display: flex; justify-content: space-between; align-items: center; padding: 28px var(--gutter); border-top: 1px solid #1d1d1d; font: 500 14px var(--brand); }
.footer img { width: 120px; }
.footer a { text-decoration: none; color: var(--muted); }
.footer a:hover { color: var(--cream); }


/* Full transparent design over independently animated backgrounds. */
.desktop-preview { position: relative; isolation: isolate; background: #000; transition: transform 9s cubic-bezier(.45,.05,.4,1); will-change: transform; }
.desktop-preview > img { position: relative; z-index: 1; width: 100%; height: auto; transition: none; pointer-events: none; }
.preview-motion { position: absolute; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.preview-motion--bars { top: 0; height: 25%; mask-image: linear-gradient(#000 0%, #000 68%, transparent 100%); -webkit-mask-image: linear-gradient(#000 0%, #000 68%, transparent 100%); }
.preview-motion--bars video { position: absolute; left: 50%; top: 44%; width: 105%; max-width: none; height: 145%; object-fit: contain; transform: translate(-50%, -50%) rotate(-55deg); }
.preview-motion--bars::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 32%, transparent 64%, rgba(0,0,0,.65)), linear-gradient(180deg, rgba(0,0,0,.65), transparent 22%, transparent 65%, #000); }
.preview-motion--blob { top: 28%; height: 22%; mask-image: radial-gradient(ellipse at 53% 50%, #000 30%, transparent 73%); -webkit-mask-image: radial-gradient(ellipse at 53% 50%, #000 30%, transparent 73%); }
.preview-motion--blob video { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .desktop-preview { transition: none; } }

.preview-play { position: absolute; z-index: 2; left: 32%; top: 17.5%; transform: translate(-50%, -50%); width: 7%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.65); box-shadow: 0 4px 24px #0008; pointer-events: none; }
.preview-play svg { width: 52%; height: 52%; fill: #fff; }

.tile--logo-variant { grid-column: span 3; padding: 0 0 28px; background: #fff; }
.tile--logo-variant > img { width: 100%; height: auto; }
.tile--logo-variant .tile__label { color: #555; }
@media (max-width: 900px) { .tile--logo-variant { grid-column: span 2; } }

/* Compact logo specimen beside the motion study. */
.logo-family { grid-column: span 3; background: #fff; color: #111; padding: 12px 24px; display: grid; grid-template-rows: repeat(3, 1fr); min-height: 320px; }
.logo-family__row { display: grid; grid-template-columns: minmax(100px, 1fr) 1.5fr; align-items: center; gap: 18px; border-bottom: 1px solid #dedede; }
.logo-family__row:last-child { border-bottom: 0; }
.logo-family__row > span { color: #666; font-size: 10px; text-transform: uppercase; }
.logo-family__row > img { width: 100%; max-width: 245px; height: 96px; object-fit: contain; justify-self: center; }
.logo-family__row--emoji > img { max-width: 185px; }
@media (max-width: 900px) { .logo-family { grid-column: span 2; } }
@media (max-width: 560px) { .logo-family { padding-inline: 16px; } .logo-family__row { grid-template-columns: 95px 1fr; gap: 8px; } }

/* Side-by-side light and dark logo variations. */
.logo-comparison { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #292929; min-height: 320px; }
.logo-comparison__column { display: grid; grid-template-rows: 34px repeat(3, 1fr); padding: 16px 12px 8px; background: #fff; color: #555; }
.logo-comparison__column--dark { background: #000; color: #aaa; }
.logo-comparison__heading { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 0 8px; }
.logo-comparison__specimen { display: grid; place-items: center; border-top: 1px solid #e7e7e7; }
.logo-comparison__specimen img { width: 100%; max-width: 210px; height: 90px; object-fit: contain; }
.logo-comparison__column--dark .logo-comparison__specimen { border-color: #262626; }
.logo-comparison__column--dark img { filter: invert(1); }
@media (max-width: 900px) { .logo-comparison { grid-column: span 2; } }

/* Asymmetric, compact logo specimen sheet. */
.brand-sheet { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; background: #333; }
.brand-sheet__cell { position: relative; min-height: 210px; display: grid; place-items: center; padding: 22px 28px 45px; background: #fff; color: #666; overflow: hidden; }
.brand-sheet__cell--primary, .brand-sheet__cell--tilted { grid-column: span 2; }
.brand-sheet__cell > span { position: absolute; left: 20px; bottom: 16px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.brand-sheet__cell > img { width: 250px; max-width: 85%; height: auto; max-height: 150px; object-fit: contain; }
.brand-sheet__cell--primary > img { filter: brightness(0); width: 340px; }
.brand-sheet__cell--dark { background: #000; color: #999; }
.brand-sheet__cell--dark > img { filter: invert(1); }
.brand-sheet__cell--expressions > img { width: 230px; }
.brand-sheet__cell--tilted > img { width: 300px; }
@media (max-width: 600px) { .brand-sheet { grid-template-columns: 1fr 1fr; } .brand-sheet__cell { min-height: 165px; padding: 16px 12px 40px; } .brand-sheet__cell--primary { grid-column: span 2; } .brand-sheet__cell--tilted { grid-column: span 2; } .brand-sheet__cell > span { left: 12px; font-size: 9px; } }

/* Lockups above a row of standalone signs. */
.logo-board { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.logo-board__cell { position: relative; grid-column: span 2; background: #fff; color: #666; min-height: 210px; display: grid; place-items: center; padding: 28px 24px 48px; }
.logo-board__cell--wide { grid-column: span 3; min-height: 190px; }
.logo-board__cell--black { background: #070707; color: #aaa; border: 1px solid #242424; }
.logo-board__cell > img { width: min(75%, 270px); height: auto; max-height: 128px; object-fit: contain; }
.logo-board__cell > span { position: absolute; left: 20px; bottom: 16px; font-size: 10px; text-transform: uppercase; }
.logo-board__cell .logo-board__primary, .logo-board__cell .logo-board__horizontal { filter: brightness(0); }
.logo-board__cell .logo-board__horizontal { width: min(70%, 180px); }
.logo-board__cell .logo-board__tilted { width: 125px; }
.logo-board__cell .logo-board__emoji { filter: invert(1); width: min(90%, 245px); }
@media (max-width: 600px) { .logo-board { grid-template-columns: 1fr 1fr; } .logo-board__cell, .logo-board__cell--wide { grid-column: span 1; min-height: 170px; padding-inline: 14px; } .logo-board__cell:last-child { grid-column: span 2; } }

.logo-board__cell--wordmark { grid-column: 1 / -1; min-height: 180px; }
.logo-board__cell--wordmark > img { width: min(65%, 290px); filter: brightness(0) invert(1); }

/* Shared background control for all logo specimens. */
.logo-board__toolbar { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 24px; padding: 0 0 14px; border-bottom: 1px solid #333; margin-bottom: 8px; }
.logo-board__toolbar button { appearance: none; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: #888; font-size: 12px; text-transform: uppercase; cursor: pointer; }
.logo-board__toolbar button[aria-pressed="true"] { color: #fff; border-bottom-color: #fff; }
.logo-board__toolbar button:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.logo-board[data-logo-theme] .logo-board__cell { border: 1px solid #292929; background: #000; color: #aaa; }
.logo-board[data-logo-theme="white"] .logo-board__cell { background: #fff; color: #666; border-color: #ddd; }
.logo-board[data-logo-theme="black"] .logo-board__cell > img { filter: brightness(0) invert(1); }
.logo-board[data-logo-theme="white"] .logo-board__cell > img { filter: brightness(0); }
.logo-board[data-logo-theme="black"] .logo-board__cell > img.logo-board__alternate,
.logo-board[data-logo-theme="black"] .logo-board__cell > img.logo-board__tilted,
.logo-board[data-logo-theme="black"] .logo-board__cell > img.logo-board__emoji { filter: invert(1); }
.logo-board[data-logo-theme="white"] .logo-board__cell > img.logo-board__alternate,
.logo-board[data-logo-theme="white"] .logo-board__cell > img.logo-board__tilted,
.logo-board[data-logo-theme="white"] .logo-board__cell > img.logo-board__emoji { filter: none; }

/* Keep theme controls close to a compact two-row specimen grid. */
.logo-board { gap: 8px; }
.logo-board__toolbar { justify-content: flex-start; gap: 20px; padding-bottom: 4px; margin-bottom: 0; border-bottom: 0; }
.logo-board__toolbar button { font-size: 11px; padding: 8px 0; }
.logo-board__cell, .logo-board__cell--wide, .logo-board__cell--wordmark { grid-column: span 2; min-height: 150px; padding: 18px 20px 36px; }
.logo-board__cell > img { max-height: 86px; width: min(80%, 225px); }
.logo-board__cell .logo-board__primary { width: min(85%, 245px); }
.logo-board__cell .logo-board__horizontal { width: min(65%, 155px); }
.logo-board__cell .logo-board__tilted { width: 82px; }
.logo-board__cell .logo-board__emoji { width: min(85%, 205px); }
.logo-board__cell--wordmark > img { width: min(75%, 210px); }
.logo-board__cell > span { left: 16px; bottom: 12px; font-size: 9px; }
@media (max-width: 600px) { .logo-board__cell, .logo-board__cell--wide, .logo-board__cell--wordmark, .logo-board__cell:last-child { grid-column: span 1; min-height: 130px; } }

/* Application examples follow the logo background selector. */
.browser-tab__tab { align-items: center; gap: 12px; }
.browser-tab__tab img { width: 34px; height: 34px; object-fit: contain; filter: none; }
.browser-tab__tab > span { font: 400 24px/1 var(--sans); }
.bento--brand[data-brand-theme="black"] .tile--dock { background: #000; border: 1px solid #252525; }
.bento--brand[data-brand-theme="black"] .dock { background: linear-gradient(145deg, #242424, #111); box-shadow: inset 0 0 0 1px #555; }
.bento--brand[data-brand-theme="black"] .dock__tip { background: #222; color: #fff; border: 1px solid #555; box-shadow: none; }
.bento--brand[data-brand-theme="black"] .tile--dock .tile__label { color: #aaa; }
.bento--brand[data-brand-theme="black"] .tile--tab { background: #080808; border: 1px solid #252525; }
.bento--brand[data-brand-theme="black"] .browser-tab { background: #202629; color: #fff; }
.bento--brand[data-brand-theme="black"] .browser-tab__tab img { filter: invert(1); mix-blend-mode: screen; }
.bento--brand[data-brand-theme="black"] .browser-tab__bar { border-color: #3a4246; }
.bento--brand[data-brand-theme="black"] .browser-tab__url { background: #323a3e; color: #bbb; }
.bento--brand[data-brand-theme="white"] .tile--tab { background: #e6e6e6; }
.bento--brand[data-brand-theme="white"] .tile--tab .tile__label { color: #555; }

/* Reference proportions: two lockups, two signs plus a lockup, then wordmark and expressions. */
.logo-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logo-board .logo-board__cell { grid-column: span 1; min-height: 170px; padding: 24px 18px 38px; }
.logo-board .logo-board__cell--wide, .logo-board .logo-board__cell--tilted-lockup, .logo-board .logo-board__cell--wordmark, .logo-board .logo-board__cell--expressions { grid-column: span 2; }
.logo-board .logo-board__cell--wide > img { width: 78%; max-width: 330px; max-height: 90px; }
.logo-board .logo-board__cell--wide > img.logo-board__primary { width: 78%; }
.logo-board .logo-board__horizontal { width: 76%; max-width: 165px; max-height: none; }
.logo-board .logo-board__tilted { width: 65%; max-width: 120px; max-height: 110px; }
.logo-board .logo-board__cell--tilted-lockup > img { width: 80%; max-width: 330px; max-height: 100px; }
.logo-board .logo-board__cell--wordmark > img { width: 65%; max-width: 255px; max-height: 95px; }
.logo-board .logo-board__cell--expressions > img { width: 70%; max-width: 280px; max-height: 95px; }
@media (max-width: 600px) { .logo-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } .logo-board .logo-board__cell { min-height: 125px; padding-inline: 10px; } .logo-board__cell > span { font-size: 8px; left: 8px; } }

/* Reduce the logo sheet height while preserving reference proportions. */
.logo-board { gap: 6px; }
.logo-board .logo-board__cell { min-height: 112px; padding: 14px 18px 28px; }
.logo-board .logo-board__cell--wide > img { max-width: 260px; max-height: 56px; }
.logo-board .logo-board__horizontal { max-width: 125px; }
.logo-board .logo-board__tilted { max-width: 78px; max-height: 65px; }
.logo-board .logo-board__cell--tilted-lockup > img { max-width: 240px; max-height: 68px; }
.logo-board .logo-board__cell--wordmark > img { max-width: 195px; max-height: 58px; }
.logo-board .logo-board__cell--expressions > img { max-width: 205px; max-height: 62px; }
.logo-board__cell > span { bottom: 8px; font-size: 8px; }
.logo-board__toolbar { padding-bottom: 0; }
@media (max-width: 600px) { .logo-board .logo-board__cell { min-height: 100px; padding: 12px 8px 26px; } }

.logo-board .logo-board__cell--expressions { grid-column: span 2; }

/* Fade scrolling content beneath the fixed navigation. */
.topbar { isolation: isolate; }
.topbar::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -32px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.98) 0%, rgba(0,0,0,.95) 52%, rgba(0,0,0,.65) 75%, transparent 100%); }

/* Keep the opening visual clear; protect navigation only after scrolling. */
.topbar::before { opacity: 0; transition: opacity .2s ease; bottom: -20px; }
.topbar.is-scrolled::before { opacity: 1; }

/* Local protection behind the navigation, rather than across the page. */
.topbar::before { display: none; }
.topbar__nav { position: relative; isolation: isolate; }
.topbar__nav::before { content: ""; position: absolute; z-index: -1; inset: -18px -25px -24px; pointer-events: none; background: #000; mask-image: radial-gradient(ellipse at center, #000 38%, transparent 73%); -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 73%); opacity: 0; transition: opacity .2s ease; }
.topbar.is-scrolled .topbar__nav::before { opacity: .98; }

/* Frosted navigation surface shown over scrolling content. */
.topbar__nav::before { inset: -4px -8px; background: rgba(255,255,255,.035); mask-image: none; -webkit-mask-image: none; backdrop-filter: blur(22px) saturate(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.05); border: 1px solid rgba(255,255,255,.08); }
.topbar.is-scrolled .topbar__nav::before { opacity: 1; }

/* Mobile transparent export and animated layers move as a single page. */
.mobile-preview { position: relative; isolation: isolate; background: #080808; transition: transform 9s cubic-bezier(.45,.05,.4,1); will-change: transform; }
.mobile-preview > img { position: relative; z-index: 1; width: 100%; height: auto; transition: none; pointer-events: none; }
.mobile-preview .preview-motion--bars { top: 0; height: 13%; mask-image: linear-gradient(#000, #000 35%, transparent 100%); -webkit-mask-image: linear-gradient(#000, #000 35%, transparent 100%); }
.mobile-preview .preview-motion--bars video { width: 190%; height: 110%; top: 26%; object-fit: contain; }
.mobile-preview .preview-motion--blob { top: 26%; height: 14%; mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 73%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 73%); }
.mobile-preview .preview-motion--blob video { width: 150%; max-width: none; height: 100%; margin-left: -25%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .mobile-preview { transition: none; } }

.preview-pause { position: absolute; z-index: 8; right: 10px; top: 8px; padding: 7px 10px; border: 1px solid #ffffff40; background: #151515cf; color: #fff; font-size: 10px; line-height: 1; cursor: pointer; backdrop-filter: blur(12px); }
.preview-pause:hover, .preview-pause:focus-visible { background: #333; border-color: #fff; }
.phone .preview-pause { top: 10px; right: 10px; font-size: 9px; }

.preview-pause, .phone .preview-pause { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; font-size: 14px; }

.browser { position: relative; }
.browser__view > .preview-pause, .phone__view > .preview-pause { top: 14px; right: 14px; }
.preview-pause:focus-visible { outline: 2px solid #b9d8ff; outline-offset: -3px; }


/* Compact, native-code interface specimen. */

.tile--dock, .tile--tab { border-radius: 0; }

.topbar__nav a { transition: color .2s ease; }

/* Pro-card motion is confined to the artwork and softly blended at the top/right. */
.pricing-preview { isolation: isolate; background: #000; }
.pricing-preview > img { position: relative; width: 100%; height: auto; }
.pricing-preview__motion { position: absolute; z-index: 1; left: 35.56%; top: 40.53%; width: 28.9%; height: 45.56%; overflow: hidden; border-radius: 1.7%; mix-blend-mode: screen; pointer-events: none; mask-image: linear-gradient(to bottom, transparent 23%, #000 42%), linear-gradient(to right, #000 65%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to bottom, transparent 23%, #000 42%), linear-gradient(to right, #000 65%, transparent 100%); -webkit-mask-composite: source-in; }
.pricing-preview__motion video { position: absolute; left: -28%; top: 23%; width: 155%; max-width: none; height: auto; aspect-ratio: 1; object-fit: cover; opacity: .8; }
.pricing-preview figcaption { z-index: 2; }

/* Let the feature animation dissolve into the black page. */
.desktop-preview .preview-motion--blob { mask-image: radial-gradient(ellipse at 52% 43%, #000 0%, rgba(0,0,0,.88) 24%, rgba(0,0,0,.42) 46%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 52% 43%, #000 0%, rgba(0,0,0,.88) 24%, rgba(0,0,0,.42) 46%, transparent 70%); }
.desktop-preview .preview-motion--blob::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 52% 43%, transparent 10%, rgba(0,0,0,.25) 38%, #000 76%); }
.desktop-preview .preview-motion--blob video { opacity: .75; }

/* Balance the visible size of differently proportioned 3D assets. */
.objects__track img[src$="obj-binoculars.webp"] { padding: clamp(28px, 3.4vw, 48px); }
.objects__track img[src$="obj-tags.webp"] { padding: clamp(10px, 1.1vw, 16px); }

/* Green-led treatment for the hiring article. */
.cover--pointer::before { background: radial-gradient(ellipse at 85% 20%, #248a47 0%, transparent 55%), radial-gradient(ellipse at 25% 65%, #126b39 0%, transparent 62%), radial-gradient(ellipse at 0% 5%, #4613b4 0%, transparent 48%), #000b10; }
.cover--pointer > img { width: 74%; right: 1%; top: 3%; }

/* Portrait motion paired with two compact landscape social compositions. */
.social { grid-template-columns: minmax(230px, .85fr) minmax(0, 1.35fr); gap: 16px; align-items: stretch; }
.social__video { grid-row: span 2; position: relative; margin: 0; min-height: 0; background: #080808; border: 1px solid #292929; display: flex; align-items: center; justify-content: center; padding: 0 0 32px; }
.social__video video { width: 100%; max-height: 500px; aspect-ratio: 680 / 960; object-fit: contain; }
.social__video figcaption { position: absolute; left: 18px; bottom: 10px; color: #888; text-transform: uppercase; font-size: 9px; }
.social .social__card { border-radius: 0; min-height: 245px; padding: 24px; }
.social .social__title { font-size: clamp(24px, 2.3vw, 34px); margin-top: 18px; max-width: 60%; }
.social .social__title b { font-size: 1.25em; }
.social .social__obj { width: 46%; right: -1%; top: -8%; }
.social .social__ui { width: 33%; left: auto; right: 20px; bottom: 15px; }
.social .social__title--box { max-width: 56%; padding: 0; border: 0; border-radius: 0; background: none; font-size: clamp(21px, 2vw, 29px); line-height: 1.15; }
.social .social__obj--keys { width: 48%; right: -1%; top: auto; bottom: -10%; }
@media (max-width: 760px) { .social { grid-template-columns: 1fr; } .social__video { grid-row: auto; } .social__video video { max-height: 480px; } .social .social__card { min-height: 260px; } }

/* Shared page rhythm: section / subsection / content / related elements. */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-grid: 16px;
  --space-content: clamp(32px, 4vw, 48px);
  --space-subsection: clamp(48px, 6vw, 64px);
  --space-section: clamp(80px, 9vw, 112px);
}
.section { padding-top: var(--space-section); }
.eyebrow { margin-bottom: var(--space-2); }
.lede { margin-top: var(--space-3); }
.display--sm { margin-top: var(--space-subsection); }
.subhead { margin: var(--space-subsection) 0 var(--space-3); }
.context__grid, .scope__list, .bento, .site-stage, .process { margin-top: var(--space-content); }
.context__grid { column-gap: var(--space-subsection); }
.objects { margin-top: clamp(24px, 3vw, 32px); }
.objects__track { gap: var(--space-grid); }
.bento, .covers, .social, .grid-site, .process, .review { gap: var(--space-grid); }
.grid-site { margin-top: var(--space-subsection); }
.process__step p { margin-top: var(--space-4); }
.review { margin-top: var(--space-content); }
.ba, .sixty__wall { margin-top: var(--space-content); }
.sixty { margin-top: var(--space-subsection); }
.outro { margin-top: var(--space-section); padding-block: var(--space-subsection); }
.footer { padding-block: var(--space-3); }

/* Preserve the artwork proportions and keep every object within its post. */
.social { align-items: start; }
.social__video { align-self: start; }
.social__video video { aspect-ratio: auto; height: auto; max-height: none; object-fit: contain; }
.social .social__card { aspect-ratio: 2 / 1; min-height: 245px; }
.social .social__obj, .social .social__obj--keys { width: 43%; height: 78%; right: 3%; top: 10%; bottom: auto; object-fit: contain; }
.social .social__ui { width: 30%; height: auto; right: 7%; bottom: 7%; object-fit: contain; }
.social .social__title, .social .social__title--box { max-width: 51%; }
@media (max-width: 760px) { .social__video { width: min(100%, 420px); justify-self: center; } .social .social__card { aspect-ratio: 1.7; } }

/* Restore the reference social compositions and their rounded frames. */
.social .social__card { background: #000; border: 0; border-radius: 12px; padding: 3.4%; aspect-ratio: 1.88; min-height: 0; }
.social .social__logo { width: 17%; position: relative; z-index: 3; }
.social .social__title { position: relative; z-index: 2; max-width: 55%; margin-top: 4%; font: 700 clamp(30px, 3.65vw, 54px)/1.02 var(--brand); letter-spacing: -.035em; }
.social .social__title b { font-size: 1.45em; line-height: .94; }
.social .social__card--discord .social__obj { z-index: 1; width: 57%; height: 108%; right: -3%; top: 8%; object-fit: contain; }
.social .social__ui { z-index: 3; width: 32%; height: auto; left: 6%; right: auto; top: 53%; bottom: auto; border-radius: 17px; }
.social__card--discord::before { content: ""; position: absolute; right: -5%; top: 4%; width: 24%; height: 38%; background: url('./assets/discord-lab.webp') center / contain no-repeat; opacity: .2; }
.social__card--discord::after { content: ""; position: absolute; left: 46%; bottom: -12%; width: 25%; height: 35%; background: url('./assets/discord-lab.webp') center / contain no-repeat; opacity: .17; }
.social .social__card--post { aspect-ratio: 1.7; }
.social .social__title--box { max-width: 73%; margin-top: 3%; padding: 3% 2.5%; border: 1px solid #666; border-radius: 20px; background: #111; font: 700 clamp(22px, 2.55vw, 38px)/1.08 var(--brand); letter-spacing: -.025em; }
.social .social__obj--keys { z-index: 3; width: 56%; height: 69%; right: -4%; top: auto; bottom: -7%; object-fit: contain; }
@media (max-width: 760px) { .social .social__title { font-size: clamp(27px, 6.2vw, 46px); } .social .social__title--box { font-size: clamp(22px, 4.6vw, 34px); } }

/* Balance the portrait video with two bordered posts of matching total height. */
.social { grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr); align-items: stretch; grid-template-rows: 1fr 1fr; }
.social__video { align-self: stretch; padding-bottom: 28px; overflow: hidden; border-radius: 12px; }
.social__video video { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: contain; }
.social .social__card { border: 1px solid #333; aspect-ratio: 1.8; min-height: 0; height: 100%; }
.social .social__card--post { aspect-ratio: 1.8; }
@media (max-width: 760px) {
 .social { grid-template-columns: 1fr; grid-template-rows: auto; }
 .social__video { grid-row: auto; width: min(100%, 360px); height: auto; justify-self: center; }
 .social__video video { height: auto; aspect-ratio: 680 / 960; }
 .social .social__card { height: auto; }
}

/* Original social exports: no reconstruction, cropping, or aspect-ratio changes. */
.social { grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr); grid-template-rows: auto auto; align-items: start; }
.social__original { margin: 0; min-width: 0; line-height: 0; border: 1px solid #333; border-radius: 12px; overflow: hidden; }
.social__original > img { display: block; width: 100%; height: auto; object-fit: contain; }
.social__video { height: 100%; align-self: stretch; }
@media (max-width: 760px) { .social { grid-template-columns: 1fr; } .social__video { height: auto; } }

/* Let the two original PNGs define the row heights; stretch the video to their exact sum. */
.social { align-items: stretch; }
.social__video { align-self: stretch; height: auto; min-height: 0; display: block; padding-bottom: 28px; }
.social__video video { position: absolute; inset: 0 0 28px; width: 100%; height: calc(100% - 28px); object-fit: contain; }
.social__original { align-self: start; }
@media (max-width: 760px) { .social__video { aspect-ratio: 680 / 960; padding-bottom: 28px; } }

/* One before/after choice for the complete set of examples. */
.ba { grid-template-columns: 1fr; gap: var(--space-content); }
.ba__switch { justify-self: start; }
.ba__pair, .ba__pair.is-active { display: block; }

/* Browse one comparison at a time without lengthening the page. */
.ba { grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-2); }
.ba__pager { display: flex; align-items: center; gap: 14px; }
.ba__pager button { border-radius: 0; width: 36px; height: 36px; padding: 0; }
.ba__pager span { font-size: 11px; color: var(--muted); }
.ba__pair[hidden] { display: none; }
.ba__pair.is-active { grid-column: 1 / -1; }
@media (max-width: 480px) { .ba__switch button { padding: 9px 12px; } .ba__pager { gap: 8px; } }

/* Uniform comparison stage; retain every screen's intrinsic proportions. */
.ba__before, .ba__after { width: 100%; aspect-ratio: 1200 / 645; display: grid; place-items: center; background: #080808; }
.ba__before img, .ba__after > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ba__after > .app { position: absolute; left: 50%; top: 50%; width: 1200px; height: 645px; max-width: none; grid-template-columns: 200px 1fr; transform: translate(-50%, -50%) scale(var(--comparison-scale, 1)); transform-origin: center; }
.ba__after .app__side { display: flex; }
@media (max-width: 700px) { .ba__before, .ba__after { aspect-ratio: 1200 / 645; } .ba__before img, .ba__after > img { height: 100%; } }

/* Shared rounded specimen cards, spacing, and segmented controls. */
:root { --radius-specimen: 16px; --control-radius: 999px; }
.bento--brand, .logo-board { gap: var(--space-grid); }
.logo-board .logo-board__cell, .tile--dock, .tile--tab { border-radius: var(--radius-specimen); overflow: hidden; }
.logo-board__toolbar { margin: 0; padding: 0; justify-self: start; }
.logo-board__toolbar, .ba__switch { display: flex; align-items: center; gap: 4px; padding: 4px; background: #1b1b1d; border: 1px solid #303030; border-radius: var(--control-radius); }
.logo-board__toolbar button, .ba__switch button { appearance: none; border: 0; border-radius: var(--control-radius); padding: 10px 16px; margin: 0; background: transparent; color: #aaa; font: 400 11px/1 var(--mono); text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.logo-board__toolbar button[aria-pressed="true"], .ba__switch button[aria-pressed="true"] { background: var(--green); color: #000; border: 0; }
.logo-board__toolbar button:hover:not([aria-pressed="true"]), .ba__switch button:hover:not([aria-pressed="true"]) { color: #fff; background: #ffffff0d; }
.logo-board__toolbar button:focus-visible, .ba__switch button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Original sign-up states share one stage, fitted without cropping. */
.signup-slideshow { background: #000; }
.signup-slideshow__stage { position: relative; aspect-ratio: 1440 / 1024; }
.signup-slideshow__stage > .signup-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; z-index: 0; transition: none; }
.signup-slideshow__stage > .signup-slide.is-previous { opacity: 1; z-index: 1; }
.signup-slideshow__stage > .signup-slide.is-current { opacity: 1; z-index: 2; transition: opacity .2s ease-out; }
.signup-slideshow__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.signup-slideshow__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #666; cursor: pointer; }
.signup-slideshow__dots button[aria-pressed="true"] { background: var(--green); }
@media (prefers-reduced-motion: reduce) { .signup-slideshow__stage > .signup-slide { transition: none; } }


/* ===== Design system (tokens from the Agentiqa Figma library) ===== */
.ds {
  --ds-black-400: #1a1e1c; --ds-black-300: #6b7171; --ds-grey-500: #d5d7dc;
  --ds-green: #63c73b; --ds-green-300: #8cd97b; --ds-red: #ff533c; --ds-red-300: #ff533c4d;
  --ds-white: #fafaf2; --ds-white-400: #fafaf2cc; --ds-white-300: #fafaf299; --ds-white-200: #fafaf226; --ds-white-50: #fafaf20d;
  --ds-field: #171717;
  margin-top: var(--space-subsection);
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--radius);
  background: #0b0b0b;
  border: 1px solid #1d1d1d;
}
.ds__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 48px; align-items: end; padding-bottom: clamp(28px, 4vw, 48px); }
.ds__head h3 { margin: 0; font: 500 clamp(32px, 4vw, 56px)/1.1 var(--brand); letter-spacing: -.03em; }
.ds__head p { margin: 0; max-width: 560px; color: var(--muted); font-size: 16px; }
.ds__stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.ds__stats li { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 40px; background: var(--ds-white-50); }
.ds__stats b { font: 500 15px/1 var(--brand); color: var(--cream); letter-spacing: 0; }

.ds-block { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid #1f1f1f; }
.ds-block__label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; text-transform: uppercase; color: var(--cream); }
.ds-block__label span { color: var(--dim); }
.ds-block__label small { font-size: 9px; color: var(--dim); text-transform: none; letter-spacing: 0; }

/* spacing */
.ds-space { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; }
.ds-space__scale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.ds-space__scale li { display: grid; grid-template-columns: 100px auto 1fr; align-items: center; gap: 14px; }
.ds-space__scale i { order: 2; display: block; height: 14px; width: calc(var(--v) * 2.4px); max-width: 100%; border-radius: 3px; background: var(--ds-green); opacity: calc(.35 + var(--v) / 160); }
.ds-space__scale b { order: 1; font-weight: 400; color: var(--cream); text-align: right; }
.ds-space__scale li { grid-template-columns: 120px 32px minmax(0, 1fr); }
.ds-space__scale li > b { grid-column: 2; grid-row: 1; }
.ds-space__scale li > i { grid-column: 3; grid-row: 1; }
.ds-space__radii { display: flex; gap: 12px; font-size: 9px; text-transform: uppercase; color: var(--muted); }
.ds-space__radii div { display: flex; flex-direction: column; gap: 6px; }
.ds-space__radii i { display: block; width: 96px; height: 64px; border: 1px solid var(--ds-white-200); background: var(--ds-white-50); margin-bottom: 4px; }
.ds-space__radii i.ds-blur { border: 0; border-radius: 12px; background: linear-gradient(135deg, #63c73b88, #ff533c55); filter: blur(6px); }
.ds-space__radii b { font-weight: 400; color: var(--cream); }

/* buttons */
.dsb { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 40px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; text-decoration: none; }
.dsb svg { width: 15px; height: 15px; }
.dsb__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.dsb--primary { background: var(--ds-white); color: #000; }
.dsb--primary:hover:not(:disabled), .dsb--primary.is-hover { background: var(--ds-white-400); }
.dsb--secondary { background: var(--ds-white); color: #000; }
.dsb--secondary:hover:not(:disabled), .dsb--secondary.is-hover { background: #c8c8c2; }
.dsb--ghost { background: linear-gradient(180deg, #2a2d2b, var(--ds-black-400)); color: var(--cream); }
.dsb--ghost:hover:not(:disabled), .dsb--ghost.is-hover { background: #333735; }
.dsb--text { background: none; color: var(--cream); padding-inline: 4px; border-radius: 0; box-shadow: inset 0 -1px 0 transparent; }
.dsb--text:hover:not(:disabled), .dsb--text.is-hover { box-shadow: inset 0 -1px 0 var(--ds-white-200); }
.dsb:disabled { cursor: default; }
.dsb--primary:disabled, .dsb--secondary:disabled { background: #96968f; color: #2a2a2a; }
.dsb--ghost:disabled { background: #111; color: var(--ds-white-300); }
.dsb--text:disabled { color: var(--ds-white-300); }
.dsb:focus-visible { outline: 1px solid var(--ds-green); outline-offset: 3px; }
.dsb--icon { min-width: 72px; padding: 0 20px; }
.dsb--sm { min-height: 36px; padding: 0 16px; font-size: 10px; gap: 10px; }
.dsb--sm .dsb__dot { width: 8px; height: 8px; }
.dsb[aria-busy="true"] { min-width: 72px; }
.dsb .ds-loading, .ds-loading { display: block; width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .9s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-btns { display: grid; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 20px; border-radius: 20px; background: #000; }
.ds-btns__row { display: grid; grid-template-columns: 76px repeat(4, minmax(170px, 1fr)); align-items: center; gap: 12px; min-height: 60px; }
.ds-btns__row > span:first-child { font-size: 9px; text-transform: uppercase; color: var(--dim); }
.ds-btns__row--head { min-height: 28px; font-size: 9px; text-transform: uppercase; color: var(--muted); }
.ds-btns__row > span[role="cell"] { display: flex; }

/* inputs */
.ds-inputs { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; }
.ds-inputs__states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-content: start; padding: 20px; border-radius: 20px; background: #000; }
.ds-inputs__area { padding: 20px; border-radius: 20px; background: #000; }
.dsi-wrap { display: flex; flex-direction: column; min-width: 0; }
.dsi-state { display: block; font-size: 9px; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.dsi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; min-height: 58px; padding: 9px 14px; border-radius: 8px; background: var(--ds-field); border: 1.5px solid transparent; font: 500 15px/20px var(--brand); color: var(--cream); transition: border-color .2s; }
.dsi__title { grid-column: 1; font-size: 12px; line-height: 16px; color: var(--ds-white-300); display: flex; justify-content: space-between; gap: 8px; }
.dsi__title em { font-style: normal; font-size: 10px; color: var(--ds-white-400); }
.dsi__val { grid-column: 1; display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.dsi > .dsi__val:first-child { grid-row: 1 / 3; }
.dsi__val.is-ph { color: var(--ds-white-300); }
.dsi__caret { width: 1.5px; height: 18px; background: var(--ds-green); margin: 0 1px; animation: ds-blink 1s steps(1) infinite; }
@keyframes ds-blink { 50% { opacity: 0; } }
.dsi__icon { grid-column: 3; grid-row: 1 / 3; width: 16px; height: 16px; color: var(--cream); }
.dsi__clear { grid-column: 2; grid-row: 1 / 3; font-size: 16px; line-height: 1; }
.dsi__cap { margin-top: 6px; font: 500 12px/16px var(--brand); color: var(--ds-white-400); }
.dsi.is-focus, .dsi--live:focus-within { border-color: var(--ds-green); }
.dsi.is-disabled, .dsi.is-disabled .dsi__icon { color: var(--ds-white-300); }
.dsi.is-disabled .dsi__title, .dsi__cap.is-disabled { color: #fafaf259; }
.dsi.is-error { background: #3a140e; color: var(--ds-red); }
.dsi.is-error .dsi__title, .dsi.is-error .dsi__icon, .dsi.is-error .dsi__title em { color: var(--ds-red); }
.dsi__cap.is-error { color: var(--ds-red); }
.dsi--live input, .dsi--live textarea { grid-column: 1; width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: none; color: var(--cream); font: inherit; resize: none; }
.dsi--live input::placeholder, .dsi--live textarea::placeholder { color: var(--ds-white-300); }
.dsi--live input { caret-color: var(--ds-green); }
.dsi--area { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 6px; }
.dsi--area .dsi__title { grid-column: 1; }
.dsi--area textarea { caret-color: var(--ds-green); }
.dsi--area .dsi__val { white-space: normal; }
.ds-inputs__area .dsi + .dsi__cap { margin-bottom: 16px; }
.ds-inputs__area .dsi__cap:last-child { margin-bottom: 0; }

/* navigation */
.ds-nav { display: grid; gap: 12px; min-width: 0; }
.ds-header { display: flex; align-items: center; gap: 28px; min-height: 64px; padding: 0 14px 0 24px; border-radius: 12px; background: #000; border: 1px solid #1a1a1a; min-width: 0; }
.ds-header img { width: 112px; height: auto; flex: none; }
.ds-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ds-white-400); }
.ds-lang svg { width: 12px; height: 12px; }
.ds-header__links { display: flex; gap: 24px; margin: 0 auto; font-size: 11px; text-transform: uppercase; color: var(--ds-white-400); white-space: nowrap; }
.ds-header__cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ds-header__links + .ds-header__cta { margin-left: 0; }
.ds-burger { display: grid; gap: 3px; width: 16px; margin: 0 8px 0 14px; }
.ds-burger i { display: block; height: 1.5px; background: var(--ds-white-400); }
.ds-nav__row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.ds-header--mobile { justify-content: space-between; }
.ds-nav__parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.ds-part { padding: 16px; border-radius: 16px; background: #000; min-width: 0; }
.ds-menu { margin: 0; padding: 6px; list-style: none; border-radius: 10px; background: var(--ds-field); font-size: 10px; text-transform: uppercase; }
.ds-menu li { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 6px; color: var(--ds-white-400); cursor: pointer; }
.ds-menu li:hover, .ds-menu li:focus-visible { background: var(--ds-white-50); color: var(--cream); outline: none; }
.ds-menu li svg { width: 12px; height: 12px; opacity: 0; }
.ds-menu li[aria-selected="true"] { color: var(--cream); }
.ds-menu li[aria-selected="true"] svg { opacity: 1; }
.ds-links2 { display: grid; gap: 14px; font-size: 11px; text-transform: uppercase; color: var(--ds-white-300); }
.ds-links2 span { padding-bottom: 6px; justify-self: start; }
.ds-links2 .is-hover { color: var(--cream); box-shadow: inset 0 -1px 0 var(--ds-white-200); }
.ds-tag { display: inline-block; padding: 5px 10px; border-radius: 40px; background: var(--ds-white-50); box-shadow: inset 0 0 0 1px var(--ds-white-200); font-size: 9px; text-transform: uppercase; color: var(--ds-white-400); }
.ds-progress2 { position: relative; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--ds-white-200); overflow: hidden; }
.ds-progress2 span { position: absolute; inset: 0 auto 0 0; width: 62%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-green), var(--ds-green-300)); box-shadow: 0 0 12px var(--ds-green); animation: ds-progress 3.2s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes ds-progress { 0% { width: 4%; } 70%, 100% { width: 92%; } }

@media (max-width: 1100px) {
  .ds-block { grid-template-columns: 1fr; gap: 20px; }
  .ds-block__label { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .ds-inputs { grid-template-columns: 1fr; }
  .ds-header__links { display: none; }
}
@media (max-width: 760px) {
  .ds { padding: 20px 16px; border-radius: 16px; }
  .ds__head { grid-template-columns: 1fr; }
  .ds-space { grid-template-columns: 1fr; }
  .ds-space__scale li { grid-template-columns: 96px 28px minmax(0, 1fr); }
  .ds-inputs__states { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .ds-btns { padding: 14px; }
  .ds-nav__row { grid-template-columns: 1fr; }
  .ds-header--tablet .ds-lang, .ds-header--tablet .dsb--primary { display: none; }
  .ds-header > .ds-header__cta .dsb--ghost { display: none; }
  .ds-header { gap: 16px; padding-left: 16px; }
  .ds-nav__parts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .ds-inputs__states { grid-template-columns: 1fr; }
  .ds-nav__parts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ds-loading, .dsi__caret, .ds-progress2 span { animation: none; } }

/* Kata portfolio: footer next-case link */
.footer { gap: 24px; flex-wrap: wrap; }
.footer .footer__next { color: #fff; margin-left: auto; transition: color .2s; }
.footer .footer__next:hover, .footer .footer__next:focus-visible { color: var(--green); }