@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --font-sans: "Instrument Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --page: #09090b;
  --page-soft: #0d0d10;
  --section: #111116;
  --surface: #15141a;
  --surface-raised: #1a1820;
  --surface-hover: #201d26;
  --text: #f4f0ec;
  --text-secondary: #c2bbc3;
  --text-muted: #8d8790;
  --sakura: #e79ab8;
  --sakura-hover: #f0abc5;
  --sakura-subtle: rgba(231, 154, 184, .13);
  --border-subtle: rgba(255, 255, 255, .08);
  --success: #72c99a;
  --warning: #e0b86d;
  --error: #dd7b83;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --motion-fast: 190ms var(--ease);
  --motion-slow: 480ms var(--ease);
  --shadow-stage: 0 30px 90px rgba(0, 0, 0, .32), 0 3px 16px rgba(0, 0, 0, .22);
  --shadow-media: 0 22px 48px rgba(0, 0, 0, .36), 0 2px 8px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--text); background: var(--page); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; font-optical-sizing: auto; font-feature-settings: "ss01" 1, "cv10" 1; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(900px 650px at 78% 4%, rgba(116, 54, 92, .13), transparent 67%), radial-gradient(750px 600px at 8% 44%, rgba(72, 45, 71, .08), transparent 70%), linear-gradient(180deg, #0a090c 0%, #09090b 45%, #0c0b0e 100%); }
body::after { content: ""; position: fixed; inset: 0; opacity: .025; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.028em; font-weight: 650; }
h1, h2, h3 { text-wrap: balance; }
p { color: var(--text-secondary); }
.shell { width: min(100% - 40px, 1180px); margin-inline: auto; }
.shell-wide { width: min(100% - 48px, 1380px); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 11px 16px; border-radius: var(--radius-sm); background: var(--text); color: var(--page); font-weight: 700; transition: top var(--motion-fast); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(231,154,184,.9); outline-offset: 4px; border-radius: 5px; }

.site-header { position: sticky; top: 0; z-index: 50; height: 76px; display: flex; align-items: center; background: rgba(9,9,11,.48); transition: background var(--motion-fast), box-shadow var(--motion-fast), backdrop-filter var(--motion-fast); }
.site-header.is-scrolled { background: rgba(11,10,13,.84); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,.055), 0 14px 38px rgba(0,0,0,.16); }
.nav-shell { display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-logo { display: block; width: 172px; height: auto; max-height: 51px; object-fit: contain; object-position: left center; }
.brand-type { display: grid; line-height: 1; gap: 5px; }
.brand-type strong { font-size: .9rem; font-weight: 700; letter-spacing: .045em; }
.brand-type small { color: var(--text-muted); font-size: .57rem; font-weight: 650; letter-spacing: .15em; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-left: auto; }
.desktop-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: #aca6ae; font-size: .82rem; font-weight: 650; transition: color var(--motion-fast); }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--sakura); transition: right var(--motion-fast); }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--text); }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { right: 0; }
.nav-secondary { opacity: .72; }
.nav-action, .primary-action { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-radius: 11px; background: var(--sakura); color: #1a1015; font-weight: 700; font-size: .86rem; box-shadow: inset 0 1px rgba(255,255,255,.26); transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); }
.nav-action:hover, .primary-action:hover { transform: translateY(-2px); background: var(--sakura-hover); box-shadow: 0 8px 24px rgba(231,154,184,.14), inset 0 1px rgba(255,255,255,.3); }
.nav-action .arrow, .primary-action .arrow, .text-action .arrow { transition: transform var(--motion-fast); }
.nav-action:hover .arrow, .primary-action:hover .arrow, .text-action:hover .arrow { transform: translateX(3px); }
.menu-toggle { display: none; width: 46px; height: 46px; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: currentColor; transition: transform var(--motion-fast); }
.menu-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: absolute; top: 68px; left: 16px; right: 16px; padding: 20px; border-radius: var(--radius-lg); background: rgba(21,20,26,.97); box-shadow: var(--shadow-stage); backdrop-filter: blur(18px); }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { min-height: 48px; display: flex; align-items: center; color: var(--text-secondary); font-weight: 650; }
.mobile-menu nav a.is-active { color: var(--sakura); }
.mobile-menu .primary-action { margin-top: 14px; width: 100%; }

.eyebrow, .project-meta, .version-label { display: inline-flex; align-items: center; gap: 8px; color: var(--sakura); font-size: .72rem; line-height: 1.2; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--sakura); opacity: .8; }
.hero { min-height: 680px; max-height: 780px; display: grid; grid-template-columns: minmax(380px, .82fr) minmax(560px, 1.18fr); align-items: center; gap: clamp(30px, 5vw, 76px); padding-block: 54px 62px; }
.hero-copy { position: relative; z-index: 3; max-width: 650px; }
.hero h1 { max-width: 680px; margin: 24px 0 22px; font-size: clamp(3.2rem, 5vw, 5.6rem); line-height: 1; font-weight: 670; letter-spacing: -.045em; }
.hero h1 em { display: block; color: var(--sakura); font-style: normal; }
.hero-lede { max-width: 600px; margin-bottom: 30px; font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.65; }
.hero-actions, .closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.text-action { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: .88rem; font-weight: 680; }
.text-action::before { content: ""; position: absolute; }
.text-action:hover { color: var(--sakura-hover); }
.hero-visual { position: relative; height: min(600px, 58vw); min-height: 520px; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 10% 1% 4% 9%; border-radius: 42% 58% 48% 52% / 44% 45% 55% 56%; background: linear-gradient(140deg, rgba(34,27,37,.72), rgba(15,14,18,.38)); box-shadow: inset 0 1px rgba(255,255,255,.04); z-index: -2; }
.hero-visual::after { content: ""; position: absolute; inset: 5% -8% 2% 25%; opacity: .22; z-index: -3; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center, #000, transparent 72%); }
.hero-glow { position: absolute; inset: 7% -4% 0 6%; z-index: -4; border-radius: 50%; background: radial-gradient(circle at 55% 45%, rgba(215,120,160,.19), rgba(100,52,101,.08) 43%, transparent 70%); filter: blur(8px); }
.hero-visual figure { position: absolute; margin: 0; }
.media-shell { position: relative; width: 100%; height: 100%; background: #141218; overflow: hidden; }
.media-shell img { width: 100%; height: 100%; object-fit: cover; }
.media-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px rgba(255,255,255,.1); border-radius: inherit; }
.media-shell.has-error { min-height: 220px; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #19171e, #111015); color: var(--text-muted); text-align: center; }
.media-shell.has-error span { display: grid; gap: 6px; }
.media-shell.has-error strong { color: var(--text-secondary); }
.hero-dashboard { left: 12%; top: 15%; width: 84%; height: 58%; transform: rotate(1.4deg); z-index: 1; }
.hero-dashboard .media-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow-stage), 0 18px 52px rgba(188,101,145,.08); }
.hero-economy { left: 31%; top: 64%; width: 63%; height: 25%; transform: rotate(-1.7deg); z-index: 2; }
.hero-economy .media-shell { border-radius: var(--radius-md); box-shadow: var(--shadow-media); }
.hero-phone { left: 1%; top: 28%; width: 27%; height: 63%; transform: rotate(-3.2deg); z-index: 3; }
.hero-phone .media-shell { border-radius: 25px; box-shadow: 0 30px 65px rgba(0,0,0,.48), 0 10px 38px rgba(160,77,117,.12); }
.hero-note { position: absolute; right: 0; top: 8%; z-index: 4; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(20,18,24,.76); backdrop-filter: blur(12px); box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.hero-note span { display: block; margin-bottom: 4px; color: var(--sakura); font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.hero-note strong { display: block; font-size: .8rem; line-height: 1.35; letter-spacing: -.01em; }

.integration-band { position: relative; padding: 23px 0; background: linear-gradient(90deg, rgba(17,16,21,.72), rgba(24,20,27,.82), rgba(17,16,21,.72)); box-shadow: inset 0 1px rgba(255,255,255,.025), inset 0 -1px rgba(255,255,255,.025); }
.integration-band .shell-wide { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.integration-band p { margin: 0; font-size: .86rem; }
.integration-band p strong { color: var(--text); letter-spacing: -.01em; }
.tech-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.tech-line span { position: relative; color: #b4aeb6; font-size: .75rem; font-weight: 700; }
.tech-line span:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(231,154,184,.55); }

.capabilities-section { position: relative; padding: var(--space-8) 0; overflow: clip; background: radial-gradient(800px 500px at 10% 50%, rgba(99,55,88,.08), transparent 72%), linear-gradient(180deg, rgba(17,17,22,.52), rgba(9,9,11,0)); }
.capabilities-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -170px; top: 12%; border: 1px solid rgba(231,154,184,.08); border-radius: 42% 58% 50% 50%; transform: rotate(24deg); }
.capabilities-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(54px, 8vw, 120px); align-items: start; }
.section-heading { max-width: 660px; }
.section-heading h2 { margin: 20px 0 18px; font-size: clamp(2.35rem, 4vw, 3.65rem); line-height: 1.06; }
.section-heading p { max-width: 620px; margin-bottom: 0; font-size: 1rem; }
.capability-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 52px 46px; padding-top: 22px; }
.capability { display: flex; gap: 19px; align-items: flex-start; }
.capability:nth-child(even) { transform: translateY(54px); }
.capability-icon, .route-icon { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, rgba(231,154,184,.17), rgba(231,154,184,.055)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.capability-icon svg, .route-icon svg { width: 23px; fill: none; stroke: var(--sakura); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.capability h3 { margin: 2px 0 9px; font-size: 1.18rem; }
.capability p { margin: 0; font-size: .9rem; line-height: 1.7; }

.projects-section { padding: 44px 0 var(--space-8); }
.projects-heading { margin-bottom: 52px; }
.project-stage { position: relative; min-height: 610px; margin-bottom: 56px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-stage), inset 0 1px rgba(255,255,255,.055); }
.project-copy h2 { margin: 20px 0 16px; font-size: clamp(2.25rem, 3.5vw, 3.35rem); line-height: 1.08; }
.project-copy > p:not(.project-meta):not(.tech-line) { max-width: 610px; font-size: 1rem; }
.project-meta { gap: 9px; margin-bottom: 0; }
.project-meta span { display: inline-flex; align-items: center; }
.project-meta span + span::before { content: ""; width: 4px; height: 4px; margin-right: 9px; border-radius: 50%; background: currentColor; opacity: .65; }
.media-caption { position: absolute; z-index: 3; left: 18px; bottom: 16px; padding: 7px 10px; border-radius: 9px; background: rgba(16,14,18,.72); backdrop-filter: blur(10px); color: #c7c0c8; font-size: .67rem; font-weight: 650; }
.food-stage { display: grid; grid-template-columns: .82fr 1.18fr; background: radial-gradient(circle at 78% 45%, rgba(72,113,86,.14), transparent 42%), radial-gradient(circle at 48% 0, rgba(231,154,184,.12), transparent 42%), linear-gradient(135deg, #18171a, #121518); }
.food-stage::before { content: ""; position: absolute; right: -10%; bottom: -55%; width: 62%; aspect-ratio: 1; border-radius: 46% 54% 62% 38%; background: rgba(224,237,221,.025); transform: rotate(-18deg); }
.food-copy { z-index: 3; display: flex; align-items: center; padding: clamp(40px, 6vw, 86px); }
.food-visual { position: relative; min-height: 610px; }
.food-detail { position: absolute; right: 4%; top: 16%; width: 76%; height: 45%; transform: rotate(2deg); opacity: .88; }
.food-detail .media-shell { border-radius: var(--radius-lg); filter: saturate(.88) brightness(.8); box-shadow: var(--shadow-media); }
.food-phone { position: absolute; left: 8%; bottom: -7%; width: min(42%, 320px); height: 92%; z-index: 2; transform: rotate(-2deg); }
.food-phone .media-shell { border-radius: 28px; box-shadow: 0 34px 75px rgba(0,0,0,.52), 0 8px 26px rgba(58,92,68,.14); }
.economy-stage { min-height: 720px; padding: clamp(36px, 5vw, 72px); background: radial-gradient(circle at 80% 85%, rgba(111,59,98,.18), transparent 36%), linear-gradient(145deg, #16141b, #101116 70%); }
.economy-copy { position: relative; z-index: 3; width: 39%; }
.economy-visual { position: absolute; width: 69%; height: 74%; right: -1.8%; bottom: -1%; transform: rotate(-.5deg); }
.economy-visual::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 18%; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #141219, transparent); }
.economy-visual .media-shell { border-radius: var(--radius-lg) 0 0 0; box-shadow: -24px -14px 70px rgba(0,0,0,.28); }
.economy-detail { position: absolute; width: 34%; height: 28%; left: 9%; bottom: 8%; transform: rotate(1.5deg); }
.economy-detail .media-shell { border-radius: var(--radius-md); box-shadow: var(--shadow-media); }
.admin-stage { min-height: 690px; padding: 34px; background: radial-gradient(circle at 22% 18%, rgba(231,154,184,.12), transparent 34%), linear-gradient(160deg, #18161c, #101014); }
.admin-visual { position: absolute; inset: 34px 34px 140px; }
.admin-visual .media-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow-media); }
.admin-visual > .media-caption { top: 16px; bottom: auto; }
.admin-copy { position: absolute; z-index: 4; left: 7.5%; right: 6%; bottom: 36px; display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: end; gap: 24px; padding: 27px 30px; border-radius: var(--radius-lg); background: rgba(23,20,27,.88); backdrop-filter: blur(18px); box-shadow: 0 22px 55px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06); }
.admin-copy .project-meta { grid-column: 1; }
.admin-copy h2 { grid-column: 1; margin: 7px 0 0; font-size: clamp(1.8rem, 2.7vw, 2.7rem); }
.admin-copy > p:not(.project-meta):not(.tech-line) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.admin-copy .tech-line { grid-column: 2; }
.admin-copy .text-action { grid-column: 3; grid-row: 1 / span 3; align-self: center; }

.process-section { position: relative; padding: var(--space-8) 0; background: radial-gradient(700px 460px at 72% 35%, rgba(90,50,82,.09), transparent 72%), #0d0d10; overflow: hidden; }
.process-section .section-heading { margin-bottom: 60px; }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.process-flow::before { content: ""; position: absolute; left: 24px; right: 8%; top: 24px; height: 2px; background: linear-gradient(90deg, var(--sakura), rgba(231,154,184,.2)); }
.process-flow li { position: relative; z-index: 1; }
.process-node { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 50%; background: #201821; color: var(--sakura); font-size: .72rem; font-weight: 700; box-shadow: 0 0 0 7px #0d0d10, inset 0 1px rgba(255,255,255,.08); }
.process-flow strong { display: block; margin-bottom: 9px; font-size: .98rem; }
.process-flow p { margin: 0; font-size: .8rem; line-height: 1.65; }

.closing { position: relative; min-height: 470px; margin-top: 72px; margin-bottom: 72px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 42%, rgba(189,98,140,.18), transparent 36%), radial-gradient(circle at 75% 0, rgba(99,54,100,.15), transparent 38%), linear-gradient(145deg, #17141a, #0f0f13); box-shadow: inset 0 1px rgba(255,255,255,.05), var(--shadow-stage); }
.closing::before, .closing::after { content: ""; position: absolute; width: 300px; height: 390px; border: 1px solid rgba(231,154,184,.09); border-radius: 58% 42% 55% 45%; }
.closing::before { left: -120px; top: -140px; transform: rotate(32deg); }
.closing::after { right: -140px; bottom: -170px; transform: rotate(-28deg); }
.closing-copy { position: relative; z-index: 2; max-width: 720px; padding: 60px 30px; text-align: center; }
.closing h2 { margin: 20px 0 16px; font-size: clamp(2.65rem, 5vw, 4.7rem); line-height: 1.02; }
.closing p { max-width: 630px; margin-inline: auto; font-size: 1.05rem; }
.closing-actions { justify-content: center; margin-top: 26px; }
.contact-pending { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px !important; color: var(--text-muted); font-size: .76rem !important; }
.contact-pending span { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }

.page-lead { min-height: 500px; display: flex; align-items: center; padding-block: 70px 90px; background: radial-gradient(650px 430px at 18% 45%, rgba(106,56,94,.11), transparent 70%); }
.page-lead-copy { max-width: 850px; }
.page-lead h1 { margin: 22px 0 24px; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1.03; }
.scripts-copy h1, .custom-copy h1 { margin: 22px 0 24px; font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1.02; }
.page-lead p, .scripts-copy > p, .custom-copy > p { max-width: 720px; font-size: 1.08rem; }

.scripts-hero, .custom-hero { min-height: 700px; display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 76px; padding-block: 72px 92px; }
.quiet-note { margin-top: 30px; color: var(--text-muted); font-size: .8rem !important; }
.release-preview { position: relative; height: 560px; border-radius: var(--radius-xl); overflow: hidden; background: radial-gradient(circle at 55% 45%, rgba(231,154,184,.15), transparent 42%), linear-gradient(145deg, #17151b, #101014); box-shadow: var(--shadow-stage), inset 0 1px rgba(255,255,255,.05); }
.release-preview::after { content: "PRIVATE PROJECT PREVIEW"; position: absolute; right: 22px; bottom: 18px; color: rgba(255,255,255,.38); font-size: .62rem; font-weight: 700; letter-spacing: .11em; }
.preview-main { position: absolute; right: -8%; top: 12%; width: 82%; height: 58%; transform: rotate(1.5deg); }
.preview-main .media-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow-media); filter: brightness(.78); }
.preview-side { position: absolute; right: 4%; bottom: 9%; width: 60%; height: 27%; transform: rotate(-1deg); }
.preview-side .media-shell { border-radius: var(--radius-md); box-shadow: var(--shadow-media); filter: brightness(.75); }
.preview-phone { position: absolute; left: 5%; top: 16%; width: 31%; height: 77%; transform: rotate(-3deg); z-index: 3; }
.preview-phone .media-shell { border-radius: 25px; box-shadow: var(--shadow-media); }
.future-release { margin-bottom: 70px; padding: clamp(42px, 6vw, 78px); border-radius: var(--radius-xl); background: linear-gradient(140deg, #15141a, #101014); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.future-release > div:first-child { display: grid; grid-template-columns: .7fr 1.3fr; gap: 44px; align-items: start; }
.future-release h2 { margin: 0; font-size: clamp(2.2rem, 3.8vw, 3.6rem); line-height: 1.08; }
.future-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 54px; }
.future-columns p { margin: 0; }
.future-columns strong { display: inline-block; margin-bottom: 7px; color: var(--text); }
.dependency-note { margin: 46px 0 0; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(231,154,184,.07); color: #c7b4bf; font-size: .8rem; }
.product-catalog { display: grid; gap: 48px; padding-bottom: 90px; }
.catalog-product { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; padding: 34px; border-radius: var(--radius-xl); background: #141318; box-shadow: var(--shadow-stage); }
.catalog-product:nth-child(even) { grid-template-columns: .8fr 1.2fr; }
.catalog-product:nth-child(even) .catalog-media { order: 2; }
.catalog-media { height: 460px; overflow: hidden; border-radius: var(--radius-lg); }
.catalog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow); }
.catalog-media:hover img { transform: scale(1.02); }
.catalog-product h2 { margin: 18px 0 12px; font-size: 2.7rem; }
.catalog-support { color: var(--text-muted); font-size: .8rem; }
.catalog-price { display: block; margin: 20px 0 10px; color: var(--text); font-size: 1.25rem; }
.product-hero { min-height: 720px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.product-hero h1 { margin: 20px 0; font-size: clamp(3.2rem, 5vw, 4.7rem); }
.product-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.product-buy > strong { font-size: 1.5rem; }
.product-cover { height: 540px; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-stage); }
.product-cover img { width: 100%; height: 100%; object-fit: cover; }
.requirements-stage { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; padding: 60px; border-radius: var(--radius-xl); background: #15141a; }
.requirements-stage h2 { margin: 18px 0 10px; font-size: 2.8rem; }
.requirements-stage dl { margin: 0; }
.requirements-stage dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; box-shadow: inset 0 -1px rgba(255,255,255,.06); }
.requirements-stage dt { color: var(--text-muted); }
.requirements-stage dd { margin: 0; color: var(--text); font-weight: 700; }
.requirements-stage small { display: block; margin-top: 4px; color: var(--warning); font-weight: 500; }
.product-features { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; padding-block: 100px; }
.product-features > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }

.custom-media { position: relative; height: 590px; border-radius: var(--radius-xl); background: radial-gradient(circle at 40% 40%, rgba(231,154,184,.14), transparent 45%), #121116; overflow: hidden; box-shadow: var(--shadow-stage); }
.custom-media > div:first-child { position: absolute; width: 88%; height: 62%; left: 10%; top: 10%; transform: rotate(1deg); }
.custom-media > div:first-child .media-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow-media); }
.custom-media > div:last-child { position: absolute; width: 33%; height: 72%; left: 4%; bottom: -3%; z-index: 2; transform: rotate(-2deg); }
.custom-media > div:last-child .media-shell { border-radius: 25px; box-shadow: var(--shadow-media); }
.already-using { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; margin-block: 18px 110px; padding: 56px 64px; border-radius: var(--radius-xl); background: linear-gradient(125deg, rgba(231,154,184,.1), rgba(26,22,29,.7)); }
.already-using h2 { margin: 18px 0 0; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.1; }
.already-using > p { margin: 0; }
.service-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 8vw, 120px); padding-block: 80px 100px; }
.service-flow { display: grid; grid-template-columns: 1fr 1fr; column-gap: 46px; }
.service-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 26px 0; }
.service-item:nth-child(2n) { transform: translateY(42px); }
.service-item > span { color: rgba(231,154,184,.72); font-size: .7rem; font-weight: 700; }
.service-item h2 { margin: -3px 0 7px; font-size: 1.12rem; }
.service-item p { margin: 0; font-size: .9rem; }
.evidence-stage { position: relative; min-height: 680px; margin-block: 70px 100px; padding: 32px; border-radius: var(--radius-xl); overflow: hidden; background: #121116; box-shadow: var(--shadow-stage); }
.evidence-image { position: absolute; inset: 32px 32px 116px; }
.evidence-image .media-shell { border-radius: var(--radius-lg); }
.evidence-copy { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 32px; display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 26px; padding: 26px 30px; border-radius: var(--radius-lg); background: rgba(25,22,29,.9); backdrop-filter: blur(16px); }
.evidence-copy h2 { margin: 8px 0 0; font-size: 2rem; }
.evidence-copy > p:not(.project-meta) { margin: 0; }

.work-index { padding-bottom: 70px; }
.work-row { min-height: 610px; display: grid; align-items: center; gap: clamp(40px, 6vw, 86px); margin-bottom: 64px; padding: clamp(30px, 4vw, 52px); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(140deg, #16151a, #101014); box-shadow: var(--shadow-stage), inset 0 1px rgba(255,255,255,.05); }
.work-row-1 { grid-template-columns: 1.12fr .88fr; background: radial-gradient(circle at 28% 42%, rgba(69,109,83,.13), transparent 40%), linear-gradient(140deg, #171819, #101114); }
.work-row-2 { grid-template-columns: .8fr 1.2fr; }
.work-row-2 .work-row-media { order: 2; }
.work-row-3 { grid-template-columns: 1.35fr .65fr; }
.work-row-media { position: relative; height: 510px; }
.work-row-media .media-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow-media); }
.work-row-1 .work-row-media { width: min(78%, 350px); margin-inline: auto; }
.work-row-1 .work-row-media .media-shell { border-radius: 26px; }
.work-row-2 .work-row-media, .work-row-3 .work-row-media { height: 430px; }
.work-row-copy .project-copy h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }

.docs-page { background: #0c0c0f; }
.docs-top { padding: 92px 0 58px; }
.docs-top h1 { margin: 16px 0 10px; font-size: clamp(2.7rem, 4vw, 3.6rem); }
.docs-top p { margin: 0; }
.docs-layout { display: grid; grid-template-columns: 210px minmax(0, 760px) 170px; gap: 56px; align-items: start; padding: 42px 0 100px; }
.docs-nav, .docs-toc { position: sticky; top: 110px; }
.docs-nav strong, .docs-toc strong { display: block; margin-bottom: 16px; color: var(--text); font-size: .8rem; }
.docs-nav nav { display: grid; }
.docs-nav a, .docs-toc a { min-height: 40px; display: flex; align-items: center; color: var(--text-muted); font-size: .78rem; transition: color var(--motion-fast), transform var(--motion-fast); }
.docs-nav a:hover, .docs-toc a:hover { color: var(--sakura); transform: translateX(3px); }
.docs-toc { display: grid; }
.docs-reading { padding: 44px 48px; border-radius: var(--radius-lg); background: #121116; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.breadcrumb { color: var(--text-muted); font-size: .75rem; }
.docs-reading > h2 { margin: 24px 0 14px; font-size: 2.35rem; }
.docs-note { margin: 36px 0; padding: 20px 22px; border-radius: var(--radius-md); background: rgba(231,154,184,.075); box-shadow: inset 3px 0 var(--sakura); }
.docs-note strong { display: block; margin-bottom: 6px; }
.docs-note p { margin: 0; font-size: .86rem; }
.docs-reading section { padding: 24px 0; }
.docs-reading section h3 { margin-bottom: 6px; font-size: 1.12rem; }
.docs-reading section p { margin: 0; }

.release-history { min-height: 330px; display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 56px; border-radius: var(--radius-xl); background: linear-gradient(140deg, #15141a, #101014); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.release-marker { position: relative; }
.release-marker::before { content: ""; position: absolute; left: 18px; top: 12px; bottom: -56px; width: 2px; background: linear-gradient(var(--sakura), transparent); }
.release-marker span { position: relative; z-index: 1; width: 38px; height: 38px; display: block; border-radius: 50%; background: #2b1e27; box-shadow: 0 0 0 8px #15141a; }
.release-history h2 { margin: 20px 0 12px; font-size: 2.5rem; }

.support-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 90px; }
.support-routes:not(:has(.support-route:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-page .page-lead { min-height: 420px; padding-bottom: 48px; }
.support-route { min-height: 220px; display: flex; gap: 20px; padding: 30px; border-radius: var(--radius-lg); background: linear-gradient(145deg, #17151b, #111015); box-shadow: inset 0 1px rgba(255,255,255,.05); transition: transform var(--motion-fast), background var(--motion-fast); }
.support-route:hover { transform: translateY(-4px); background: linear-gradient(145deg, #1d1921, #151219); }
.support-route.is-muted { opacity: .78; }
.support-route h2 { margin: 2px 0 9px; font-size: 1.3rem; }
.support-route p { font-size: .86rem; }
.support-route strong { color: var(--sakura); font-size: .76rem; letter-spacing: -.01em; }
.request-panel { min-height: 340px; display: flex; align-items: center; justify-content: space-between; gap: 60px; margin-bottom: 90px; padding: clamp(42px, 6vw, 78px); border-radius: var(--radius-xl); background: radial-gradient(circle at 18% 50%, rgba(231,154,184,.12), transparent 38%), #141217; box-shadow: var(--shadow-stage); }
.request-panel > div { max-width: 700px; }
.request-panel h2 { margin: 18px 0 14px; font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1.08; }
.request-panel .contact-pending { justify-content: flex-start; margin: 0 !important; }
.request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; flex: 0 0 auto; }

.case-header { padding: 70px 0 55px; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 52px; color: var(--text-muted); font-size: .82rem; }
.case-header > div { max-width: 900px; }
.case-header h1 { margin: 22px 0 20px; font-size: clamp(3.1rem, 5vw, 3.8rem); line-height: 1.02; }
.case-header > div > p:not(.project-meta):not(.tech-line) { max-width: 760px; font-size: 1.12rem; }
.case-hero { position: relative; height: min(70vw, 760px); min-height: 480px; padding: 30px; border-radius: var(--radius-xl); background: linear-gradient(145deg, #17151b, #101014); box-shadow: var(--shadow-stage); }
.case-hero .media-shell { border-radius: var(--radius-lg); }
.case-study .case-hero:has(img[src*="food-delivery"]) { height: 760px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(65,103,76,.13), transparent 38%), #141416; }
.case-study .case-hero:has(img[src*="food-delivery"]) .media-shell { width: min(380px, 80vw); border-radius: 28px; box-shadow: var(--shadow-media); }
.case-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; padding-block: 105px; }
.case-intro h2 { margin: 18px 0 0; font-size: 2.7rem; line-height: 1.1; }
.case-intro > p { margin: 5px 0 0; font-size: 1.05rem; }
.flow-section { padding: 54px 60px; border-radius: var(--radius-xl); background: #121116; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.project-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 38px 0 0; padding: 0; list-style: none; }
.project-flow li { display: flex; align-items: center; gap: 15px; color: var(--text); font-weight: 700; }
.project-flow .arrow { color: var(--sakura); font-weight: 400; }
.interface-section { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 74px; padding-block: 100px; }
.interface-copy h2 { margin: 18px 0 14px; font-size: 2.7rem; }
.interface-detail { height: 420px; }
.interface-detail .media-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow-media); }
.highlight-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; padding-block: 60px 110px; }
.highlight-list { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 44px; }
.highlight-list article { padding-top: 18px; box-shadow: inset 0 1px rgba(255,255,255,.075); }
.highlight-list h3 { margin-bottom: 8px; font-size: 1.1rem; }
.highlight-list p { margin: 0; font-size: .86rem; }
.case-result { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 60px; padding: 64px; border-radius: var(--radius-xl); background: radial-gradient(circle at 12% 35%, rgba(231,154,184,.12), transparent 38%), #141217; box-shadow: var(--shadow-stage); }
.case-result h2 { margin: 18px 0 0; font-size: clamp(2rem, 3.7vw, 3.45rem); line-height: 1.12; }
.next-project { min-height: 190px; display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 30px; margin-block: 50px 90px; padding: 32px 40px; border-radius: var(--radius-lg); background: #121116; transition: background var(--motion-fast), transform var(--motion-fast); }
.next-project:hover { transform: translateY(-3px); background: #19161c; }
.next-project > span { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.next-project strong { font-size: 1.55rem; }
.next-project .arrow { color: var(--sakura); font-size: 1.5rem; }

.legal-content { max-width: 820px; padding-block: 110px 150px; }
.legal-content h1, .not-found h1 { margin: 18px 0; font-size: clamp(3.4rem, 7vw, 6rem); }
.legal-intro { font-size: 1.1rem; }
.not-found { min-height: 70vh; display: grid; align-items: center; text-align: center; }
.not-found .eyebrow { justify-content: center; }
.not-found p { margin-bottom: 26px; }

.site-footer { position: relative; padding: 70px 0 28px; background: linear-gradient(180deg, rgba(15,14,18,.15), #101014 34%, #0d0d10); }
.footer-main { display: grid; grid-template-columns: minmax(0, 38%) repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 3vw, 48px); row-gap: 60px; align-items: start; }
.footer-identity p { margin: 20px 0 0; color: var(--text-muted); font-size: .82rem; }
.footer-identity .brand-logo { width: 190px; max-height: none; }
.footer-main nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.footer-main > nav:not(.footer-legal) { grid-column: span 2; }
.footer-main nav a { min-height: 36px; display: flex; align-items: center; color: var(--text-muted); font-size: .76rem; transition: color var(--motion-fast); }
.footer-main nav a:hover { color: var(--sakura); }
.footer-main .footer-legal { grid-template-columns: 1fr; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 46px; padding-top: 20px; box-shadow: inset 0 1px rgba(255,255,255,.045); color: #716c73; font-size: .7rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-slow), transform var(--motion-slow); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .desktop-nav { gap: 19px; }
  .desktop-nav a { font-size: .76rem; }
  .hero { grid-template-columns: .82fr 1.18fr; gap: 22px; }
  .hero h1 { font-size: clamp(3rem, 5.5vw, 4.8rem); }
  .capabilities-layout { grid-template-columns: .7fr 1.3fr; gap: 56px; }
  .admin-copy { grid-template-columns: 1fr 1fr; }
  .admin-copy .text-action { grid-column: 1; grid-row: 3; }
  .scripts-hero, .custom-hero { gap: 44px; }
  .docs-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 38px; }
  .docs-toc { display: none; }
}

@media (max-width: 960px) {
  .shell-wide { width: min(100% - 36px, 1380px); }
  .desktop-nav, .nav-action { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .hero { min-height: auto; max-height: none; grid-template-columns: 1fr; padding-top: 68px; }
  .hero-copy { max-width: 740px; }
  .hero-visual { width: min(100%, 760px); height: 560px; justify-self: center; }
  .integration-band .shell-wide { align-items: flex-start; flex-direction: column; gap: 12px; }
  .capabilities-layout { grid-template-columns: 1fr; }
  .capability-composition { max-width: 760px; }
  .food-stage { grid-template-columns: .9fr 1.1fr; }
  .economy-stage { min-height: 770px; }
  .economy-copy { width: 58%; }
  .economy-visual { width: 82%; height: 61%; }
  .economy-detail { width: 40%; height: 23%; }
  .process-flow { grid-template-columns: 1fr; gap: 0; }
  .process-flow::before { left: 24px; top: 24px; bottom: 18px; width: 2px; height: auto; background: linear-gradient(var(--sakura), rgba(231,154,184,.15)); }
  .process-flow li { display: grid; grid-template-columns: 50px 1fr; gap: 22px; padding-bottom: 28px; }
  .process-node { margin: 0; }
  .process-flow p { max-width: 640px; }
  .scripts-hero, .custom-hero { min-height: auto; grid-template-columns: 1fr; padding-bottom: 70px; }
  .release-preview, .custom-media { height: 520px; }
  .already-using { grid-template-columns: 1fr; gap: 30px; }
  .service-section { grid-template-columns: 1fr; }
  .evidence-copy { grid-template-columns: 1fr 1fr; }
  .evidence-copy .text-action { grid-column: 1; }
  .work-row, .work-row-1, .work-row-2, .work-row-3 { grid-template-columns: 1fr; }
  .work-row-2 .work-row-media { order: 0; }
  .work-row-1 .work-row-media { height: 520px; }
  .work-row-2 .work-row-media, .work-row-3 .work-row-media { height: 430px; }
  .support-routes { grid-template-columns: 1fr 1fr; }
  .case-intro, .interface-section, .highlight-section, .case-result { grid-template-columns: 1fr; gap: 34px; }
  .project-flow { flex-wrap: wrap; justify-content: flex-start; gap: 14px 22px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > nav:not(.footer-legal) { grid-column: auto; }
  .footer-main .footer-legal { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --space-8: 4.5rem; }
  .shell { width: min(100% - 32px, 1180px); }
  .shell-wide { width: min(100% - 28px, 1380px); }
  .site-header { height: 68px; }
  .brand-type small { font-size: .53rem; }
  .hero { padding-top: 42px; padding-bottom: 38px; }
  .hero h1 { margin-top: 18px; font-size: clamp(2.85rem, 14vw, 4.35rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-visual { height: 430px; min-height: 430px; margin-top: 12px; }
  .hero-dashboard { left: 8%; top: 9%; width: 91%; height: 55%; }
  .hero-phone { left: 2%; top: 33%; width: 34%; height: 64%; }
  .hero-economy { left: 31%; top: 62%; width: 68%; height: 27%; }
  .hero-note { top: 3%; right: 2%; padding: 10px 12px; }
  .hero-note strong { font-size: .7rem; }
  .tech-line { gap: 8px 16px; }
  .capabilities-section { padding-top: 74px; }
  .section-heading h2 { font-size: clamp(2.1rem, 11vw, 3rem); }
  .capability-composition { grid-template-columns: 1fr; gap: 34px; padding-top: 0; }
  .capability:nth-child(even) { transform: none; }
  .projects-section { padding-top: 12px; }
  .project-stage { min-height: auto; margin-bottom: 30px; border-radius: var(--radius-lg); }
  .food-stage { display: flex; flex-direction: column; }
  .food-copy { padding: 36px 28px 18px; }
  .food-visual { min-height: 500px; }
  .food-detail { right: -8%; top: 9%; width: 82%; height: 36%; }
  .food-phone { left: 9%; width: 46%; height: 86%; }
  .economy-stage { min-height: 720px; padding: 34px 28px; }
  .economy-copy { width: 100%; }
  .economy-copy .project-copy > p:not(.project-meta):not(.tech-line) { font-size: .93rem; }
  .economy-visual { left: 28px; right: 0; width: calc(100% - 28px); height: 44%; bottom: 1%; }
  .economy-detail { left: auto; right: 8%; width: 46%; height: 19%; bottom: 36%; }
  .admin-stage { min-height: 700px; padding: 18px; }
  .admin-visual { inset: 18px 18px auto; height: 39%; }
  .admin-copy { left: 18px; right: 18px; bottom: 18px; display: block; padding: 26px 24px; }
  .admin-copy h2 { margin-bottom: 14px; }
  .admin-copy > p:not(.project-meta):not(.tech-line) { font-size: .87rem; }
  .admin-copy .tech-line { margin-bottom: 14px; }
  .media-caption { font-size: .58rem; max-width: calc(100% - 36px); }
  .process-section .section-heading { margin-bottom: 42px; }
  .closing { min-height: 430px; margin-top: 44px; margin-bottom: 44px; border-radius: var(--radius-lg); }
  .closing h2 { font-size: clamp(2.5rem, 13vw, 3.7rem); }
  .closing-actions { flex-direction: column; gap: 10px; }
  .page-lead { min-height: 400px; padding-block: 50px 62px; }
  .page-lead h1, .scripts-copy h1, .custom-copy h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .scripts-hero, .custom-hero { gap: 42px; padding-top: 48px; }
  .release-preview, .custom-media { height: 440px; }
  .future-release { padding: 34px 26px; }
  .future-release > div:first-child { grid-template-columns: 1fr; gap: 22px; }
  .future-columns { grid-template-columns: 1fr; gap: 22px; margin-top: 38px; }
  .catalog-product, .catalog-product:nth-child(even), .product-hero, .requirements-stage, .product-features { grid-template-columns: 1fr; }
  .catalog-product:nth-child(even) .catalog-media { order: 0; }
  .catalog-media, .product-cover { height: 300px; }
  .requirements-stage { padding: 34px 26px; }
  .requirements-stage dl > div { grid-template-columns: 1fr; gap: 6px; }
  .product-features > div:last-child { grid-template-columns: 1fr; }
  .already-using { margin-bottom: 70px; padding: 38px 28px; }
  .service-section { gap: 24px; padding-block: 50px 80px; }
  .service-flow { grid-template-columns: 1fr; }
  .service-item:nth-child(2n) { transform: none; }
  .evidence-stage { min-height: 650px; margin-top: 30px; padding: 18px; }
  .evidence-image { inset: 18px 18px auto; height: 36%; }
  .evidence-copy { left: 18px; right: 18px; bottom: 18px; display: block; }
  .evidence-copy h2 { margin-bottom: 12px; }
  .work-row { min-height: auto; padding: 22px; gap: 34px; border-radius: var(--radius-lg); }
  .work-row-media, .work-row-2 .work-row-media, .work-row-3 .work-row-media { height: 300px; }
  .work-row-1 .work-row-media { width: 62%; height: 460px; }
  .docs-top { padding-top: 62px; }
  .docs-layout { grid-template-columns: 1fr; padding-top: 10px; }
  .docs-nav { position: static; padding: 20px; border-radius: var(--radius-md); background: #121116; }
  .docs-nav nav { grid-template-columns: 1fr 1fr; }
  .docs-reading { padding: 32px 25px; }
  .release-history { grid-template-columns: 48px 1fr; padding: 36px 26px; }
  .support-routes { grid-template-columns: 1fr; }
  .support-routes:not(:has(.support-route:nth-child(3))) { grid-template-columns: 1fr; }
  .support-route { min-height: 180px; }
  .request-panel { align-items: flex-start; flex-direction: column; gap: 28px; }
  .request-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .case-header { padding-top: 48px; }
  .back-link { margin-bottom: 34px; }
  .case-header h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .case-hero { min-height: 350px; height: 58vw; padding: 14px; }
  .case-study .case-hero:has(img[src*="food-delivery"]) { height: 620px; }
  .case-intro { padding-block: 72px; }
  .flow-section { padding: 38px 26px; }
  .project-flow { display: grid; grid-template-columns: 1fr 1fr; }
  .project-flow li { min-height: 44px; justify-content: space-between; }
  .project-flow li:nth-child(even) .arrow { display: none; }
  .interface-section { padding-block: 72px; }
  .interface-detail { height: 270px; }
  .highlight-section { padding-bottom: 80px; }
  .highlight-list { grid-template-columns: 1fr; gap: 24px; }
  .case-result { padding: 40px 28px; }
  .next-project { grid-template-columns: 1fr auto; }
  .next-project > span { grid-column: 1 / -1; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-main nav { max-width: 400px; }
  .footer-main .footer-legal { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .brand-type small { display: none; }
  .site-header .brand-logo { width: 145px; max-height: 43px; }
  .hero-visual { height: 390px; min-height: 390px; }
  .hero-phone { width: 38%; }
  .hero-note { display: none; }
  .project-copy h2 { font-size: 2.2rem; }
  .food-visual { min-height: 450px; }
  .economy-stage { min-height: 700px; }
  .admin-stage { min-height: 740px; }
  .release-preview, .custom-media { height: 400px; }
  .work-row-1 .work-row-media { width: 75%; }
  .support-route { padding: 25px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}