/* Hybrid concepts: current dark design × concept A */

body.t-dark, .hero.dark {
  --bg: #131312; --bg-2: #1c1c1a; --bg-3: #262623;
  --ink: #efede8; --ink-2: #d6d3cc; --mute: #8f8c85; --line: #2f2f2c; --line-2: #45443f;
  --btn: #efede8; --on-btn: #131312;
}
body.t-light {
  --bg: #ffffff; --bg-2: #f2f2f1; --bg-3: #e8e8e6;
  --ink: #111111; --ink-2: #3a3a3a; --mute: #7a7a78; --line: #e3e3e1; --line-2: #cfcfcc;
  --btn: #111111; --on-btn: #ffffff;
}
:root {
  --signal: #ff5b24; --on-signal: #140803;
  --cobalt: #3d49ff; --lilac: #b9a8ff; --citron: #e3ef4f; --rose: #ff94b8; --jade: #17a578; --sand: #e8c9a0;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(16px, 3.4vw, 48px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main [id] { scroll-margin-top: 72px; }
.rv { opacity: 0; transition: opacity 700ms var(--ease); }
.rv.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transition: none; } }

.caps { font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.88; margin: 0; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.04em; border-radius: 50%; background: var(--signal); }
.nw { white-space: nowrap; }
.k { font-size: 0.8125rem; color: var(--mute); }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 12px; background: var(--btn); color: var(--on-btn); font-weight: 500; font-size: 0.9375rem; border: 0; cursor: pointer; transition: background-color 160ms, color 160ms; }
.btn:hover { background: var(--signal); color: var(--on-signal); }
.btn-signal { background: var(--signal); color: var(--on-signal); }
.btn-signal:hover { background: var(--btn); color: var(--on-btn); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-line:hover { background: var(--bg-2); color: var(--ink); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink); }
.hdr .wrap { height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 1.0625rem; }
.brand svg { width: 32px; }
.clock { font-size: 0.8125rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.clock b { color: var(--ink); font-weight: 500; }
.hdr-r { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.hdr-r nav { display: flex; gap: 22px; font-size: 0.9375rem; color: var(--ink-2); }
.hdr-r nav a:hover { color: var(--ink); }
.hdr-r .btn { height: 38px; padding: 0 14px; border-radius: 11px; font-size: 0.875rem; }
@media (max-width: 860px) { .hdr .wrap { grid-template-columns: auto 1fr; } .clock, .hdr-r nav { display: none; } .hdr-r { gap: 8px; } }

/* Mobile menu: two lines that cross into an X; the panel drops below the header */
.menu-btn { display: none; position: relative; width: 44px; height: 38px; border: 0; border-radius: 11px; background: var(--bg-3); color: var(--ink); cursor: pointer; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ease); }
.menu-btn i:first-child { top: 15px; }
.menu-btn i:last-child { top: 21px; }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); }
.mnav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 64px); overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); }
.mnav .wrap { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-top: 28px; padding-bottom: 32px; }
.mnav a.caps { display: block; padding: 10px 0; font-size: clamp(3rem, 15vw, 4.5rem); line-height: 0.9; color: var(--ink-2); }
.mnav a.caps[aria-current="page"] { color: var(--signal); }
.mnav-links { display: flex; gap: 24px; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--mute); }
.mnav-links a:hover { color: var(--ink); }
@media (max-width: 860px) { .menu-btn { display: block; } }
@media (min-width: 861px) { .mnav { display: none; } }
body.menu-open { overflow: hidden; }

/* Hero */
.hero { position: relative; overflow: hidden; overflow: clip; background: var(--bg); color: var(--ink); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: center; padding-block: clamp(40px, 6vw, 88px); }
.hero h1 { font-size: clamp(3rem, 7vw, 7.25rem); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; align-items: center; }
.hero-meta p { margin: 0 12px 0 0; max-width: 40ch; color: var(--ink-2); }
.mark { width: 100%; aspect-ratio: 1; max-width: 560px; justify-self: end; color: var(--ink); }
.mark svg { width: 100%; height: 100%; overflow: visible; }
.mark .sway { transform-box: fill-box; transform-origin: center; animation: sway 7s var(--ease) infinite; }
.mark .drift { transform-box: fill-box; transform-origin: center; animation: drift 9s var(--ease) infinite; }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-3%, -5%); } 66% { transform: translate(2%, 4%); } }
.mark.tile { background: var(--bg-2); border-radius: 24px; padding: 8%; }
@media (prefers-reduced-motion: reduce) { .mark .sway, .mark .drift { animation: none; } }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .mark { order: -1; max-width: 360px; justify-self: center; }
  .mark.tile { max-width: none; aspect-ratio: 16 / 10; }
}

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.facts div { padding: 28px 24px 30px 0; }
.facts div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts .k { display: block; max-width: 30ch; }
.facts b { display: block; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-variation-settings: "wdth" 72; font-weight: 700; line-height: 1.05; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts div:nth-child(3) { border-left: 0; padding-left: 0; } .facts div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.sec { padding-block: clamp(88px, 10vw, 144px) 0; }
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: clamp(24px, 3vw, 40px); }
.sh h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.sh a { font-size: 0.9375rem; color: var(--ink-2); }
.sh a:hover { color: var(--signal); }

/* Work index */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index a { display: grid; grid-template-columns: 48px minmax(0, 2.2fr) minmax(0, 3fr) minmax(0, 1fr) 24px; gap: 20px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding 300ms var(--ease); }
.index .n { font-size: 0.8125rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.index .t { font-size: clamp(1.4rem, 2.2vw, 2rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 1; }
.index .s { color: var(--ink-2); font-size: 0.9375rem; }
.index .c { font-size: 0.8125rem; color: var(--mute); }
.index .ar { justify-self: end; transition: transform 300ms var(--ease); }
.index a:hover { padding-left: 12px; }
.index a:hover .t { color: var(--signal); }
.index a:hover .ar { transform: rotate(-45deg); }
.index .inline { display: none; }
@media (max-width: 860px) {
  .index a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .index .n, .index .c { display: none; }
  .index .s { grid-column: 1; }
  .index .ar { grid-row: 1; grid-column: 2; }
  .index .inline { display: block; grid-column: 1 / -1; order: -1; height: 160px; border-radius: 14px; margin-bottom: 10px; }
  .index a:hover { padding-left: 0; }
}
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 300px; height: 220px; border-radius: 16px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity 200ms, transform 300ms var(--ease); overflow: hidden; }
.peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 860px), (hover: none) { .peek { display: none; } }
.dev { position: absolute; width: 26%; aspect-ratio: 9 / 19; border-radius: 12px; background: #fff; padding: 8% 6%; display: flex; flex-direction: column; gap: 7%; }
.dev i { display: block; border-radius: 3px; background: rgb(0 0 0 / 0.1); }
.dev i:nth-child(1) { height: 6%; width: 55%; }
.dev i:nth-child(2) { height: 30%; background: rgb(0 0 0 / 0.16); border-radius: 6px; }
.dev i:nth-child(3) { height: 5%; width: 80%; }
.dev i:nth-child(4) { height: 16%; margin-top: auto; }
.dev.d1 { left: 26%; top: 20%; }
.dev.d2 { left: 50%; top: 10%; }
.dark .dev { background: #131312; }
.dark .dev i { background: rgb(255 255 255 / 0.16); }

/* Case studies */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.case { display: grid; gap: 14px; }
.case-m { position: relative; height: clamp(220px, 24vw, 340px); border-radius: 16px; overflow: hidden; }
.case-m .dev { width: 18%; }
.case h3 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.case p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 52ch; }
.case:hover h3 { color: var(--signal); }
@media (max-width: 760px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* Launched posters */
.posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.poster { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; border-radius: 14px; background: var(--c); color: #131312; }
.poster .pb { position: absolute; z-index: -1; left: var(--x1); top: var(--y1); width: 30%; height: 82%; border-radius: 12% / 4.4%; background: repeating-linear-gradient(0deg, #131312 0 4px, transparent 4px 10px); border: 1.5px solid #131312; transform: rotate(32.8deg); transition: transform 700ms var(--ease); }
.poster .pc { position: absolute; z-index: -1; left: var(--x2); top: var(--y2); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: #131312; transition: transform 700ms var(--ease); }
.poster:hover .pb { transform: rotate(18deg); }
.poster:hover .pc { transform: translate(-8%, 6%); }
.poster b { font-size: clamp(1.3rem, 1.8vw, 1.8rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 0.92; background: var(--c); padding-top: 8px; }
.poster span { font-size: 0.75rem; background: var(--c); }
@media (max-width: 960px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* How I work — lilac band */
.band { background: #efede8; color: #131312; margin-top: clamp(88px, 10vw, 144px); }
.band .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--pad); padding-block: clamp(64px, 8vw, 112px); }
.band .intro { grid-column: 1 / span 4; display: grid; gap: 12px; align-content: start; }
.band .intro h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.band .intro p { margin: 0; color: rgb(19 19 18 / 0.75); max-width: 36ch; }
.band ol { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 32px; }
.band li { border-top: 1px solid rgb(19 19 18 / 0.25); padding-top: 14px; display: grid; gap: 4px; align-content: start; }
.band li .k { color: rgb(19 19 18 / 0.6); }
.band li b { font-weight: 600; font-size: 1.0625rem; }
.band li span:last-child { font-size: 0.9375rem; color: rgb(19 19 18 / 0.75); }
@media (max-width: 960px) { .band .intro, .band ol { grid-column: 1 / -1; } }
@media (max-width: 560px) { .band ol { grid-template-columns: minmax(0, 1fr); } }

/* Rows (how I work / experience) */
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); }
.two h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); margin-bottom: 12px; }
.two > div > p { margin: 0 0 20px; color: var(--ink-2); max-width: 46ch; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rows .n { color: var(--mute); font-size: 0.8125rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
.rows b { font-weight: 600; }
.rows span { color: var(--ink-2); font-size: 0.9375rem; }
.rows.xp li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }
.rows .y { color: var(--mute); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rows li, .rows.xp li { grid-template-columns: minmax(0, 1fr) auto; } .rows .n { display: none; } .rows span { grid-column: 1 / -1; } }

/* Contact */
.contact { margin-top: clamp(88px, 10vw, 144px); background: #131312; color: #efede8; }
.contact.orange { background: var(--signal); color: #131312; }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-block: clamp(72px, 9vw, 128px); }
.contact h2 { font-size: clamp(2.6rem, 6vw, 5.5rem); }
.contact .mail { margin: 14px 0 0; font-size: 0.9375rem; opacity: 0.75; }
.contact .btn { height: 52px; padding: 0 24px; border-radius: 14px; background: var(--signal); color: var(--on-signal); }
.contact .btn:hover { background: #efede8; color: #131312; }
.contact.orange .btn { background: #131312; color: #efede8; }
.contact.orange .btn:hover { background: #fff; color: #131312; }
.contact.orange .dot { background: #131312; }
footer { background: #131312; color: #8f8c85; font-size: 0.8125rem; border-top: 1px solid #2f2f2c; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; }
footer a:hover { color: #fff; }
@media (max-width: 760px) { .contact .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Dialog */
.call { width: min(480px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--bg); color: var(--ink); border-left: 1px solid var(--line); }
.call::backdrop { background: rgb(8 8 8 / 0.5); }
.call-in { padding: 32px clamp(20px, 4vw, 36px); display: grid; gap: 20px; }
.call-top { display: flex; justify-content: space-between; align-items: center; }
.call-top h2 { font-size: 2.4rem; }
.x { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: none; cursor: pointer; }
.fld { display: grid; gap: 6px; }
.fld label { font-size: 0.875rem; color: var(--ink-2); }
.fld input, .fld textarea { font: inherit; color: var(--ink); border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px; padding: 12px 14px; }
.fld textarea { min-height: 110px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); }
.fld.bad input { border-color: var(--signal); }
.call .done { display: none; }
.call.sent form { display: none; }
.call.sent .done { display: grid; gap: 16px; }

/* Lens hero: soft ball drifting behind a bar-shaped window that brings it into focus */
.lens-hero { min-height: clamp(580px, 88svh, 860px); display: flex; align-items: center; }
.lens-hero .wrap { position: relative; z-index: 2; width: 100%; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lens .win-fill { fill: var(--bg-2); }
.lens .win-shadow { fill: none; stroke: rgb(0 0 0 / 0.45); stroke-width: 58; }
@media (max-width: 860px) {
  .lens-hero { min-height: calc(100svh - 60px); align-items: flex-end; padding-top: 34svh; }
  .lens-hero .wrap { padding-top: 0; }
  .lens-hero .wrap { grid-template-columns: minmax(0, 1fr); }
}
.hero-cv { margin: 28px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.hero-cv span { color: var(--mute); margin-right: 6px; }
.hero-cv span + span, .hero-cv span:not(:first-child) { margin-left: 18px; }
.sec-lead { margin: -8px 0 clamp(28px, 3.4vw, 44px); max-width: 60ch; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); color: var(--ink-2); }

/* Selected work: expanding panels */
.panels { display: flex; gap: 12px; height: clamp(380px, 34vw, 480px); }
.pnl { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 1.6vw, 22px); border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); transition: flex 800ms var(--ease), border-color 320ms, color 320ms; }
.pnl:hover { border-color: var(--line-2); }
.pnl.is-open { flex: 3.4 1 0; border-color: transparent; color: var(--on-field); }
.pnl-media { position: absolute; inset: 0; z-index: -1; background: var(--field); opacity: 0; transition: opacity 500ms var(--ease); }
.pnl-media .ph { position: absolute; inset: 0 0 30% 38%; display: grid; place-items: center; }
.pnl.is-open .pnl-media { opacity: 1; }
.pnl:not(.is-open) .pnl-media .ph-dev { translate: 0 40px; }
.pnl-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.pnl-sector { opacity: 0; transition: opacity 320ms; }
.pnl.is-open .pnl-sector { opacity: 1; }
.pnl-name { margin: 0; font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 700; text-transform: uppercase; line-height: 0.9; font-variation-settings: "wdth" 72; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.pnl.is-open .pnl-name { writing-mode: horizontal-tb; transform: none; font-size: clamp(1.9rem, 3vw, 2.8rem); }
.pnl-sum { margin: 10px 0 0; max-width: 32ch; font-size: 0.875rem; line-height: 1.45; display: none; }
.pnl.is-open .pnl-sum { display: block; animation: pnlfade 600ms var(--ease) both 200ms; }
@keyframes pnlfade { from { opacity: 0; transform: translateY(10px); } }
.ph-dev { position: absolute; width: 26%; aspect-ratio: 9 / 19; border-radius: 18px; background: var(--ph-screen, #f6f4ef); padding: 9% 7%; display: flex; flex-direction: column; gap: 6%; transition: translate 900ms var(--ease); }
.ph-dev:nth-child(1) { transform: translate(-42%, 6%); }
.ph-dev:nth-child(2) { transform: translate(42%, -6%); }
.ph-dev i { display: block; border-radius: 4px; background: var(--ph-block, rgb(0 0 0 / 0.1)); }
.ph-dev i:nth-child(1) { height: 7%; width: 55%; }
.ph-dev i:nth-child(2) { height: 30%; background: var(--ph-accent, rgb(0 0 0 / 0.18)); border-radius: 8px; }
.ph-dev i:nth-child(3) { height: 5%; width: 80%; }
.ph-dev i:nth-child(4) { height: 5%; width: 65%; }
.ph-dev i:nth-child(5) { height: 16%; margin-top: auto; }
.ph-dark { --ph-screen: #1c1c1a; --ph-block: rgb(255 255 255 / 0.12); --ph-accent: rgb(255 255 255 / 0.22); }
@media (max-width: 860px) {
  .panels { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .panels::-webkit-scrollbar { display: none; }
  .pnl, .pnl.is-open { flex: 0 0 80%; height: 380px; scroll-snap-align: center; border-color: transparent; color: var(--on-field); }
  .pnl .pnl-media { opacity: 1; }
  .pnl .pnl-media .ph { inset: 0 0 34% 0; }
  .pnl .pnl-media .ph-dev { translate: none; }
  .pnl .pnl-sector { opacity: 1; }
  .pnl .pnl-name { writing-mode: horizontal-tb; transform: none; font-size: 2.1rem; }
  .pnl .pnl-sum { display: block; animation: none; }
}

/* AI integrations */
.ai { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ai-card { display: grid; gap: 10px; align-content: start; padding: 28px 24px 30px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color 320ms; }
.ai-card:hover { border-color: var(--line-2); }
.ai-card h3 { margin: 4px 0 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.ai-card p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.ai-ico { position: relative; width: 44px; height: 44px; margin-bottom: 18px; }
.ai-ico::before { content: ""; position: absolute; left: 6px; top: 2px; width: 14px; height: 40px; border-radius: 3.5px; background: var(--ink); transform: rotate(var(--a)); transition: transform 700ms var(--ease); }
.ai-ico::after { content: ""; position: absolute; right: -2px; top: 11px; width: 21px; height: 21px; border-radius: 50%; background: var(--signal); transition: transform 700ms var(--ease); }
.ai-card:hover .ai-ico::before { transform: rotate(calc(var(--a) + 32.8deg)); }
.ai-card:hover .ai-ico::after { transform: translateX(-6px); }
@media (max-width: 1080px) { .ai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ai { grid-template-columns: minmax(0, 1fr); } }

/* Hero pattern options */
.lens .pat { fill: none; stroke: var(--pc); stroke-width: 1; }
.lens .pat-base { --pc: rgb(239 237 232 / 0.05); stroke-width: 1.3; }
.lens .pat-near { --pc: rgb(255 170 130 / 0.45); stroke-width: 1.3; }
.lens .pat-in { --pc: rgb(239 237 232 / 0.28); }

/* Launched: app cards */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) 120px; align-items: center; gap: 22px; min-height: 148px; padding: 22px 0 22px 22px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color 320ms, background-color 320ms; }
.app:hover { border-color: var(--line-2); background: var(--bg-3); }
.app-icon { position: relative; width: 68px; height: 68px; border-radius: 17px; background: var(--c); }
.app-icon::before { content: ""; position: absolute; left: 20px; top: 12px; width: 13px; height: 44px; border-radius: 3.3px; background: #131312; transform: rotate(var(--a)); transition: transform 700ms var(--ease); }
.app-icon i { position: absolute; right: 11px; top: 24px; width: 20px; height: 20px; border-radius: 50%; background: #131312; transition: transform 700ms var(--ease); }
.app:hover .app-icon::before { transform: rotate(calc(var(--a) + 32.8deg)); }
.app:hover .app-icon i { transform: translateX(-6px); }
.app-body { display: grid; gap: 4px; }
.app-body b { font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 1; }
.app-body span { font-size: 0.9375rem; color: var(--ink-2); max-width: 38ch; }
.app-shot { align-self: stretch; position: relative; margin: -22px 0 -22px; }
.app-shot::before { content: ""; position: absolute; left: 14px; right: -24px; top: 26px; bottom: -40px; border-radius: 14px 14px 0 0; background: var(--c); transform: translateY(18px); transition: transform 600ms var(--ease); }
.app-shot i { position: absolute; left: 28px; height: 8px; border-radius: 4px; background: rgb(19 19 18 / 0.25); transform: translateY(18px); transition: transform 600ms var(--ease); }
.app-shot i:nth-child(1) { top: 44px; width: 52px; }
.app-shot i:nth-child(2) { top: 62px; width: 72px; height: 34px; border-radius: 7px; background: rgb(19 19 18 / 0.18); }
.app-shot i:nth-child(3) { top: 106px; width: 44px; }
.app:hover .app-shot::before, .app:hover .app-shot i { transform: none; }
.app-go { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #efede8; color: #131312; font-size: 0.85rem; transition: transform 320ms var(--ease); z-index: 1; }
.app:hover .app-go { transform: rotate(45deg); }
@media (max-width: 960px) { .apps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .app { grid-template-columns: auto minmax(0, 1fr); padding-right: 22px; } .app-shot { display: none; } .app-body { padding-right: 20px; } }

.social { display: flex; flex-wrap: wrap; gap: 28px; }
.social a { display: inline-flex; align-items: center; gap: 9px; }
.social svg { width: 18px; height: 18px; }

/* Glass pane over the hero scene */
.lens-top { z-index: 1; }
.glass {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.035) 0%, rgb(255 255 255 / 0.008) 45%, rgb(255 255 255 / 0.02) 100%);
  -webkit-backdrop-filter: blur(3.5px) saturate(135%); backdrop-filter: blur(3.5px) saturate(135%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.glass::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 20% 0%, rgb(255 255 255 / 0.04), transparent 60%); }
.lens .hole-rim { fill: none; stroke: rgb(255 255 255 / 0.12); stroke-width: 1; }

/* Built */
.built { display: grid; grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; }
.bt { display: grid; gap: 12px; }
.bt-art { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--c); }
.bt-lg .bt-art { aspect-ratio: 1 / 1; }
.bt-art i { position: absolute; display: block; transition: transform 600ms var(--ease); }
.bt:hover .bt-art i { transform: translateY(-5px); }
.bt-name { font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1; letter-spacing: 0.01em; }
.bt-lg .bt-name { font-size: clamp(1.3rem, 2.2vw, 2rem); }
.bt-cap { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--signal); }
.bt-cap::after { content: " ↗"; letter-spacing: 0; }
.bt:hover .bt-name { color: var(--signal); }

/* Chat: bubbles and a typing indicator */
.art-chat i { height: 13%; border-radius: 18px; }
.art-chat i:nth-child(1) { left: 9%; top: 12%; width: 56%; background: #fff; border-bottom-left-radius: 4px; }
.art-chat i:nth-child(2) { right: 9%; top: 32%; width: 48%; background: #131312; border-bottom-right-radius: 4px; }
.art-chat i:nth-child(3) { left: 9%; top: 52%; width: 64%; background: #fff; border-bottom-left-radius: 4px; }
.art-chat .typing { left: 9%; top: 72%; width: 22%; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8%; border-bottom-left-radius: 4px; }
.art-chat .typing b { width: 9%; aspect-ratio: 1; border-radius: 50%; background: #131312; opacity: 0.35; animation: typing 1.2s infinite; }
.art-chat .typing b:nth-child(2) { animation-delay: 0.2s; }
.art-chat .typing b:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 30% { opacity: 1; } }

/* Gather: attendees and a date */
.art-gather .av { top: 18%; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c); }
.art-gather .av:nth-child(1) { left: 12%; background: #131312; }
.art-gather .av:nth-child(2) { left: 32%; background: #fff; }
.art-gather .av:nth-child(3) { left: 52%; background: var(--signal); }
.art-gather .date { left: 12%; right: 12%; top: 50%; bottom: 12%; border-radius: 12px; background: #fff; color: #131312; display: grid; place-content: center; text-align: center; font-style: normal; font-weight: 700; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 0.9; font-variation-settings: "wdth" 72; }
.art-gather .date b { display: block; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; }

/* Monitorul Local: a front page */
.art-news .mast { left: 10%; right: 10%; top: 10%; height: 9%; background: #131312; border-radius: 3px; }
.art-news .head { left: 10%; right: 10%; top: 25%; height: 5%; background: #131312; opacity: 0.8; border-radius: 3px; }
.art-news .head.short { top: 33%; right: 34%; }
.art-news .img { left: 10%; right: 10%; top: 43%; height: 28%; background: #fff; border-radius: 6px; }
.art-news .ln { left: 10%; right: 10%; top: 76%; height: 3.5%; background: #131312; opacity: 0.35; border-radius: 3px; }
.art-news .ln.short { top: 83%; right: 40%; }

/* Penpal: an envelope with a stamp */
.art-letter .env { left: 12%; right: 12%; top: 30%; height: 40%; background: #fff; border-radius: 6px; overflow: hidden; transform: rotate(-6deg); }
.bt:hover .art-letter .env { transform: rotate(-2deg) translateY(-5px); }
.art-letter .env::before, .art-letter .env::after { content: ""; position: absolute; top: -2px; width: 72%; height: 2px; background: #131312; opacity: 0.35; transform-origin: 0 0; }
.art-letter .env::before { left: 0; transform: rotate(33deg); }
.art-letter .env::after { right: 0; transform-origin: 100% 0; transform: rotate(-33deg); }
.art-letter .stamp { right: 18%; top: 24%; width: 18%; aspect-ratio: 4 / 5; background: var(--signal); outline: 2px dashed #fff; outline-offset: -5px; transform: rotate(8deg); }

@media (max-width: 960px) { .built { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bt-lg { grid-column: 1 / -1; } .bt-lg .bt-art { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .art-chat .typing b { animation: none; opacity: 0.6; } }

.lens-hero h1 { max-width: 10ch; }
@media (max-width: 860px) { .lens-hero h1 { max-width: none; } }

.lens .ball-soft { fill: #ff5b24; opacity: 0.5; }

/* Grain pattern */
.lens .tile-base { opacity: 0.022; }
.lens .tile-near { opacity: 0.38; }



/* ================= Pages ================= */

.hdr nav a[aria-current="page"] { color: var(--ink); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer .wrap { align-items: center; }

/* Browser-window mockup */
.web { position: absolute; left: 9%; right: 9%; top: 12%; bottom: 0; background: #f6f4ef; border-radius: 10px 10px 0 0; overflow: hidden; display: flex; flex-direction: column; color: var(--c-accent, #17a578); }
.web-bar { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #e3e0d8; }
.web-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d8d4ca; }
.web-body { flex: 1; display: grid; grid-template-columns: 18% 1fr; min-height: 0; }
.web-side { background: #eeebe4; padding: 12px 10px; display: grid; align-content: start; gap: 9px; }
.web-side b { display: block; height: 7px; border-radius: 4px; background: #d8d4ca; }
.web-side b:first-child { width: 60%; background: #1c1c1a; }
.web-main { padding: 12px; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.web-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.web-cards span { height: clamp(18px, 3vw, 44px); border-radius: 7px; background: #e7e3db; }
.web-cards span:last-child { background: var(--signal); }
.web-main svg { width: 100%; height: 100%; min-height: 30px; }

/* Media field shared by cards, project heroes and galleries */
.media { display: block; position: relative; overflow: hidden; border-radius: 16px; background: var(--f); }
.media .dev { width: 17%; }
.media.dark .dev { background: #131312; }
.media.dark .dev i { background: rgb(255 255 255 / 0.16); }

/* ---------- Work index ---------- */
.page-head { padding-block: clamp(56px, 8vw, 120px) clamp(28px, 4vw, 48px); display: grid; gap: 18px; }
.page-head h1 { font-size: clamp(3rem, 8vw, 7.25rem); }
.page-head p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.work-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: clamp(24px, 3vw, 36px); }
.work-bar .filters { margin-bottom: 0; }
/* Platform switch: a solid track with a sliding orange thumb, set apart from the outlined sector chips */
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; background: var(--bg-3); flex: none; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 12px; background: var(--signal); transform: translateX(calc(var(--i) * 100%)); transition: transform 360ms var(--ease); }
.seg button { position: relative; height: 44px; padding: 0 20px; border: 0; background: none; color: var(--ink-2); cursor: pointer; font: inherit; font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; font-size: 1.125rem; letter-spacing: 0.01em; transition: color 200ms; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--on-signal); }
.seg sup { font-size: 0.62em; margin-left: 4px; opacity: 0.6; vertical-align: 0.5em; font-variation-settings: "wdth" 100; }
.filters button:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
@media (max-width: 600px) { .seg { width: 100%; } .seg button { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.filters button { height: 36px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2); background: transparent; font-size: 0.875rem; color: var(--ink-2); cursor: pointer; transition: background-color 160ms, color 160ms, border-color 160ms; }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.grid-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) 20px; }
.card { display: grid; gap: 12px; }
.card[hidden] { display: none; }
.card .media { aspect-ratio: 4 / 3; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.card h3 { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 1; transition: color 160ms; }
.card:hover h3 { color: var(--signal); }
.card p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.card .media > * { transition: transform 700ms var(--ease); }
.card:hover .media > * { transform: translateY(-5px); }
@media (max-width: 1024px) { .grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-work { grid-template-columns: minmax(0, 1fr); } }

.launched { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.launched a { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1.4fr) 24px; gap: 20px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding 300ms var(--ease); }
.launched .sw { width: 14px; height: 14px; border-radius: 50%; background: var(--f); }
.launched b { font-size: clamp(1.4rem, 2.2vw, 2rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 1; }
.launched span { color: var(--ink-2); font-size: 0.9375rem; }
.launched em { font-style: normal; justify-self: end; transition: transform 300ms var(--ease); }
.launched a:hover { padding-left: 12px; }
.launched a:hover b { color: var(--signal); }
.launched a:hover em { transform: rotate(-45deg); }
@media (max-width: 700px) { .launched a { grid-template-columns: 14px minmax(0, 1fr) 24px; } .launched span { grid-column: 2; grid-row: 2; } .launched em { grid-row: 1; grid-column: 3; } }

/* ---------- Project page ---------- */
.p-head { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 3vw, 40px); display: grid; gap: 16px; }
.p-back { font-size: 0.875rem; color: var(--ink-2); justify-self: start; }
.p-back:hover { color: var(--signal); }
.p-head h1 { font-size: clamp(3rem, 8vw, 7.25rem); }
.p-sum { margin: 4px 0 0; max-width: 40ch; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.3; color: var(--ink-2); }
.p-hero .media { aspect-ratio: 16 / 8; }
.p-hero .media .dev { width: 12%; }
.p-facts { margin-top: clamp(32px, 4vw, 56px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-facts b { font-size: 1rem; font-variation-settings: "wdth" 100; font-weight: 600; line-height: 1.35; }
.p-facts .k { display: block; margin-bottom: 6px; }
@media (max-width: 860px) { .p-hero .media { aspect-ratio: 4 / 3; } .p-hero .media .dev { width: 22%; } }
.p-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(24px, 5vw, 80px); }
.p-row h2 { font-size: clamp(1.8rem, 3vw, 2.75rem); }
.p-row p { margin: 0; max-width: 58ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }
.p-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.p-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.p-steps .k { padding-top: 3px; }
@media (max-width: 860px) { .p-row { grid-template-columns: minmax(0, 1fr); } }
.p-gallery { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.p-gallery .media { aspect-ratio: 4 / 3; }
.p-gallery .media .dev { width: 22%; }
.p-gallery .media:nth-child(2) .dev { width: 30%; }
@media (max-width: 760px) { .p-gallery { grid-template-columns: minmax(0, 1fr); } }
.p-row .p-outcome { font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; max-width: 26ch; margin: 0; color: var(--ink); }
.p-ext { margin-top: 24px; display: inline-flex; gap: 8px; font-size: 0.9375rem; color: var(--ink-2); }
.p-ext:hover { color: var(--signal); }
.next { display: block; margin-top: clamp(88px, 10vw, 144px); border-top: 1px solid var(--line); }
.next .wrap { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-block: clamp(40px, 5vw, 72px); }
.next b { display: block; font-size: clamp(2.4rem, 6vw, 5.5rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 0.9; transition: color 160ms; }
.next:hover b { color: var(--signal); }
.next .k { display: block; margin-bottom: 12px; }
.next em { font-style: normal; font-size: 2rem; transition: transform 300ms var(--ease); }
.next:hover em { transform: translateX(8px); }
.next + .contact { margin-top: 0; }

/* ---------- About ---------- */
.about-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); }
.about-intro p { margin: 0 0 1em; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--ink-2); max-width: 52ch; }
.about-intro p:first-child { color: var(--ink); }
@media (max-width: 860px) { .about-intro { grid-template-columns: minmax(0, 1fr); } }
.rows.xp li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr) auto; }
.rows.xp .note { color: var(--mute); }
@media (max-width: 960px) { .rows.xp li { grid-template-columns: minmax(0, 1fr) auto; } .rows.xp span:not(.y) { grid-column: 1 / -1; } }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.skills h3 { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 500; color: var(--mute); }
.skills ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
.skills li { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- Contact and meeting form ---------- */
.contact-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(56px, 8vw, 120px) 0; }
.contact-page h1 { font-size: clamp(3rem, 7vw, 6.5rem); }
.contact-page aside { display: grid; gap: 20px; align-content: start; }
.contact-page aside p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.contact-page dl { margin: 12px 0 0; display: grid; gap: 14px; }
.contact-page dt { font-size: 0.8125rem; color: var(--mute); }
.contact-page dd { margin: 2px 0 0; font-size: 1.0625rem; }
.contact-page dd a:hover { color: var(--signal); }
@media (max-width: 860px) { .contact-page { grid-template-columns: minmax(0, 1fr); } }
.meet-form { display: grid; gap: 18px; }
.meet-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .meet-form .row2 { grid-template-columns: 1fr; } }
.fld select { font: inherit; color: var(--ink); border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px; padding: 12px 14px; appearance: none; }
.fld input[type="date"] { color-scheme: dark; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips legend { font-size: 0.875rem; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2); font-size: 0.875rem; color: var(--ink-2); cursor: pointer; transition: all 160ms; }
.chips label:hover { border-color: var(--ink-2); }
.chips input:checked + label { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips input:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 2px; }
.meet-note { font-size: 0.8125rem; color: var(--mute); margin: 0; }
.meet-done { display: none; gap: 14px; }
.meet-done p { margin: 0; font-size: 1.25rem; }
.is-sent .meet-form { display: none; }
.is-sent .meet-done { display: grid; }
.call.is-sent form { display: none; }

/* ---------- 404 ---------- */
.nf { min-height: 70svh; display: grid; align-content: center; gap: 24px; justify-items: start; }
.nf h1 { font-size: clamp(3rem, 9vw, 8rem); }
.nf p { margin: 0; color: var(--ink-2); }

/* ---------- Design system page ---------- */
.ds-sec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px 48px; padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.ds-sec > header h2 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.ds-sec > header p { color: var(--mute); font-size: 0.875rem; margin: 10px 0 0; max-width: 30ch; }
@media (max-width: 860px) { .ds-sec { grid-template-columns: minmax(0, 1fr); } }
.sw-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.sw-row + .sw-row { margin-top: 28px; }
.sw-chip { height: 96px; border-radius: 14px; border: 1px solid var(--line); }
.sw-name { margin-top: 10px; font-size: 0.875rem; }
.sw-name span { display: block; color: var(--mute); font-variant-numeric: tabular-nums; }
.spec { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--line); }
.spec .k b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 720px) { .spec { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.ds-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ds-row + .ds-row { margin-top: 20px; }
.ds-demo { display: grid; gap: 20px; }
.ds-mark { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ds-mark div { aspect-ratio: 4 / 3; border-radius: 14px; display: grid; place-items: center; }
.ds-mark svg { width: 44%; }
@media (max-width: 640px) { .ds-mark { grid-template-columns: minmax(0, 1fr); } }
.ds-hero { position: relative; height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }

.web-bar i, .web-cards span, .web-side b { display: block; }

.contact-page { padding-bottom: clamp(88px, 10vw, 144px); }
.ai-ico { display: block; width: 44px; height: 44px; margin-bottom: 18px; color: var(--ink); }
.ai-ico::before, .ai-ico::after { content: none; }
.ai-ico svg { width: 44px; height: 44px; transition: transform 500ms var(--ease); }
.ai-card:hover .ai-ico svg { transform: translateY(-3px); }

@media (max-width: 760px) { .p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------- Services ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.svc-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 24px; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding 300ms var(--ease); }
.svc-list b { font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-variation-settings: "wdth" 72; font-weight: 700; text-transform: uppercase; line-height: 1; }
.svc-list span { color: var(--ink-2); font-size: 0.9375rem; }
.svc-list em { font-style: normal; justify-self: end; transition: transform 300ms var(--ease); }
.svc-list a:hover { padding-left: 12px; }
.svc-list a:hover b { color: var(--signal); }
.svc-list a:hover em { transform: translateX(6px); }
@media (max-width: 700px) { .svc-list a { grid-template-columns: minmax(0, 1fr) 24px; } .svc-list span { grid-column: 1; grid-row: 2; } .svc-list em { grid-row: 1; grid-column: 2; } }
.svc-h1 { font-size: clamp(2.4rem, 5.6vw, 5rem) !important; max-width: 18ch; }
.svc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 5vw, 80px); }
.svc-cols h2 { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 500; }
@media (max-width: 760px) { .svc-cols { grid-template-columns: minmax(0, 1fr); } }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 1.0625rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--mute); font-size: 1.4rem; line-height: 1; transition: transform 300ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--signal); }
.faq details p { margin: 0 0 22px; max-width: 64ch; color: var(--ink-2); }

/* ---------- Real project images ---------- */
.media.img { background: var(--bg-2); }
.media.img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.p-cover { margin: 0 auto; }
.p-cover img, .p-shots img { width: 100%; height: auto; display: block; border-radius: 16px; background: var(--bg-2); }
.p-shots { display: grid; gap: clamp(16px, 2vw, 28px); }
.p-shots figure { margin: 0; }
.p-feat .k { color: var(--signal); font-size: 1.2rem; line-height: 1; }
.pnl-img { position: absolute; inset: 0; }
.pnl-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pnl-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(19 19 18 / 0.85) 100%); }
.pnl.is-open:has(.pnl-img) { color: #efede8; }