:root {
  --orange: #FF6301;
  --orange-l: #FF8A3D;
  --orange-xl: #FFB067;
  --orange-d: #C94600;
  --ink: #0E0E10;
  --ink-2: #161619;
  --ink-3: #202024;
  --line-d: rgba(255, 255, 255, .12);
  --line-l: rgba(14, 14, 16, .12);
  --white: #FFFFFF;
  --paper: #F5F4F2;
  --muted-d: #A9A9B1;
  --muted-l: #55555C;
  --grad: linear-gradient(135deg, #FFB067 0%, #FF8A3D 20%, #FF6301 55%, #DD4A00 100%);
  --grad-soft: linear-gradient(155deg, #FF9A52 0%, #FF6301 48%, #E45000 100%);
  --grad-text: linear-gradient(100deg, #FF6301 0%, #FF9A52 35%, #FF6301 60%, #D94600 100%);
  --display: 'Orbitron', 'Segoe UI', sans-serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --slant: -11deg;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: max(16px, 3.2vw);
  --nav-h: 68px;
  --c: 18px;
  --poly: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 18v10M18 23h10' stroke='%23FF6301' stroke-opacity='.34' stroke-width='1.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 24px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
::selection { background: var(--orange); color: var(--ink); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; }
ul, ol { list-style: none; }
em { font-style: normal; }
u, s { text-decoration: none; }
fieldset { border: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 300; padding: 10px 16px; background: var(--orange); color: var(--ink); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.wrap { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
.is-off, .is-off * { animation-play-state: paused !important; }

.stripes { position: absolute; top: 0; bottom: 0; left: -90px; right: -90px; background: repeating-linear-gradient(101deg, transparent 0 78px, rgba(255, 255, 255, .085) 78px 80px); animation: stripes 8s linear infinite; pointer-events: none; }
.stripes--ora { background: repeating-linear-gradient(101deg, transparent 0 78px, rgba(255, 99, 1, .1) 78px 80px); }
@keyframes stripes { to { transform: translate3d(81.5px, 0, 0); } }
.sweep { position: absolute; top: -10%; bottom: -10%; left: -45%; width: 42%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(var(--slant)); animation: sweep 7s cubic-bezier(.45, 0, .55, 1) infinite; pointer-events: none; }
.sweep--ora { background: linear-gradient(90deg, transparent, rgba(255, 99, 1, .13), transparent); }
@keyframes sweep { 0% { transform: translateX(0) skewX(var(--slant)); } 70%, 100% { transform: translateX(380%) skewX(var(--slant)); } }
.plus { position: absolute; inset: 0; background-image: var(--plus); pointer-events: none; }
.lines { position: absolute; top: 0; bottom: 0; left: -90px; right: -90px; background: repeating-linear-gradient(101deg, transparent 0 118px, rgba(255, 255, 255, .035) 118px 120px); animation: lines 16s linear infinite; pointer-events: none; }
@keyframes lines { to { transform: translate3d(122.2px, 0, 0); } }
.orb { position: absolute; border-radius: 50%; pointer-events: none; }
.light { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 99, 1, .2), transparent 68%); opacity: 0; pointer-events: none; transition: opacity .4s; }
[data-light]:hover .light { opacity: 1; }
.ghost { position: absolute; display: flex; width: max-content; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 6vw, 96px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 99, 1, .2); animation: ghost 80s linear infinite; pointer-events: none; }
.ghost span { padding-right: .5em; }
.ghost--rev { animation-direction: reverse; }
@keyframes ghost { to { transform: translate3d(-50%, 0, 0); } }

.panel { position: relative; --surface: linear-gradient(165deg, #1E1E22, #111113); background: linear-gradient(145deg, rgba(255, 138, 61, .75), rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .05) 64%, rgba(255, 99, 1, .45)); clip-path: var(--poly); overflow: hidden; }
.panel::before { content: ''; position: absolute; inset: 1px; background: var(--surface); clip-path: var(--poly); }
.panel > * { position: relative; }
.panel > .fx, .form > .fx, .panel > .sr-only { position: absolute; }
.fx { inset: 1px; z-index: 0; clip-path: var(--poly); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 99, 1, .3), transparent 72%), linear-gradient(0deg, rgba(255, 99, 1, .16), transparent 55%); }
.fx i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 44%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); transform: translateX(-130%) skewX(var(--slant)); transition: transform .9s var(--ease); }
[data-fx]:hover > .fx { opacity: 1; }
[data-fx]:hover > .fx i { transform: translateX(330%) skewX(var(--slant)); }
.panel[data-fx] { transition: background .3s; }
.panel[data-fx]:hover { background: linear-gradient(145deg, #FFB067, #FF6301 40%, rgba(255, 255, 255, .25) 70%, #FF6301); }

.intro { display: none; position: fixed; inset: 0; z-index: 200; background: var(--white); align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.js .intro { display: flex; animation: introSafe 0s 4s forwards; }
.no-intro .intro { display: none !important; }
.intro svg { width: min(70vw, 560px); height: auto; overflow: visible; }
.intro__blade { position: absolute; top: -10%; bottom: -10%; left: -30%; width: 160%; background: var(--grad); transform: translateX(-160%); }
@keyframes introSafe { to { visibility: hidden; } }

.scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.scrollbar span { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }

.nav { position: fixed; top: 12px; left: var(--gutter); right: var(--gutter); z-index: 100; height: var(--nav-h); padding: 0 16px 0 22px; display: flex; align-items: center; gap: 28px; background: linear-gradient(100deg, #17171A, #0E0E10 60%); color: var(--white); clip-path: var(--poly); }
.nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--orange), transparent 40%, transparent 70%, var(--orange-l)); }
.nav__brand { position: relative; display: block; width: 186px; height: 40px; }
.nav__k { position: absolute; left: 0; top: 0; width: 40px; height: 40px; transition: opacity .35s, transform .45s var(--ease); }
.nav__logo { position: absolute; left: 0; top: 3px; width: 186px; height: 34px; opacity: 0; transform: translateX(-14px); transition: opacity .35s, transform .45s var(--ease); }
.nav.is-scrolled .nav__k { opacity: 0; transform: translateX(10px); }
.nav.is-scrolled .nav__logo { opacity: 1; transform: none; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { position: relative; padding: 8px 0; font-size: 15px; font-weight: 600; text-decoration: none; color: #E7E7EA; transition: color .25s; }
.nav__links a:hover { color: #fff; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-on::after { transform: scaleX(1); }

.burger { display: none; position: relative; width: 56px; height: 44px; margin-left: auto; isolation: isolate; }
.burger::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad); transform: skewX(var(--slant)); }
.burger i { position: absolute; left: 15px; height: 3px; background: var(--ink); transform-origin: center; transition: transform .4s var(--ease), width .3s var(--ease), opacity .2s, top .4s var(--ease); }
.burger i:nth-child(1) { top: 13px; width: 26px; transform: skewX(-30deg); }
.burger i:nth-child(2) { top: 21px; width: 18px; left: 19px; transform: skewX(-30deg); }
.burger i:nth-child(3) { top: 29px; width: 26px; transform: skewX(-30deg); }
.burger[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 40px) var(--gutter) 28px; color: var(--white); background: var(--grad-soft); overflow: hidden; visibility: hidden; clip-path: polygon(130% 0, 140% 0, 125% 100%, 115% 100%); transition: clip-path .75s cubic-bezier(.76, 0, .24, 1), visibility 0s .75s; }
.menu.is-open { visibility: visible; clip-path: polygon(-30% 0, 140% 0, 125% 100%, -45% 100%); transition: clip-path .75s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
.menu__bg { position: absolute; inset: 0; overflow: hidden; }
.menu__k { position: absolute; right: -24%; top: 8%; width: 110%; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, .1); }
.ghost--menu { bottom: 12%; left: 0; font-size: 62px; -webkit-text-stroke-color: rgba(255, 255, 255, .22); animation-duration: 60s; }
.menu__links { position: relative; display: grid; }
.menu__links a { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 13px 0 14px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.menu__links a:first-child { border-top: 1px solid rgba(255, 255, 255, .28); }
.menu__links small { grid-row: span 2; padding-top: 7px; font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--ink); }
.menu__links span { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 8vw, 40px); line-height: 1.12; }
.menu__links em { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.menu__foot { position: relative; margin-top: auto; padding-top: 20px; display: grid; gap: 22px; justify-items: start; }
.menu__logo { width: 180px; height: 33px; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 30px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .01em; isolation: isolate; transition: color .3s var(--ease); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--grad); transform: skewX(var(--slant)); box-shadow: 0 14px 30px -12px rgba(255, 99, 1, .75); transition: background .3s, box-shadow .3s; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; transform: skewX(var(--slant)); transition: background-position .75s var(--ease); }
.btn:hover::after { background-position: -40% 0; }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 12px; }
.btn--ghost::before { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { color: var(--white); }
.btn--ghost:hover::before { background: var(--ink); }
.btn--glow { color: var(--white); }
.btn--glow::before { background: linear-gradient(120deg, #26262B, #0E0E10) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 14px 34px -12px rgba(255, 99, 1, .8), 0 0 24px -8px rgba(255, 138, 61, .9); }
.btn--glow:hover { color: var(--ink); }
.btn--glow:hover::before { background: var(--grad) padding-box, var(--grad) border-box; }
.btn__chat circle { transform-box: fill-box; transform-origin: center; animation: chatdot 1.3s ease-in-out infinite; }
.btn__chat circle:nth-of-type(2) { animation-delay: .15s; }
.btn__chat circle:nth-of-type(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-2.5px); } }
.btn--ink { color: var(--white); }
.btn--ink::before { background: linear-gradient(120deg, #26262B, #0E0E10); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); }
.btn--ink::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 138, 61, .85) 50%, transparent 62%); }

.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-d); }
.kicker i { width: 28px; height: 10px; background: var(--grad); transform: skewX(-30deg); flex: none; }
.kicker--dark { color: var(--orange-l); }
.kicker--ink { color: var(--ink); }
.kicker--ink i { background: var(--ink); }

.title { font-family: var(--display); font-weight: 800; font-size: clamp(29px, 4.1vw, 60px); line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
.title em { display: inline-block; padding-right: .12em; transform: skewX(var(--slant)); transform-origin: left bottom; background: var(--grad-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.title--white { color: var(--white); }
.title--s { font-size: clamp(25px, 2.8vw, 40px); }
.contact .title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); animation: none; }
.ai .title em { background: linear-gradient(100deg, #6E1F00 0%, #A63800 35%, #6E1F00 60%, #8A2C00 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai .kicker--ink { color: #FFF1E6; }
.ai .kicker--ink i { background: #fff; }
.head { position: relative; display: grid; gap: 20px; margin-bottom: clamp(48px, 7vw, 92px); max-width: 980px; }
.head__lead { max-width: 660px; font-size: clamp(17px, 1.4vw, 20px); color: var(--muted-l); }
.head--dark .head__lead { color: var(--muted-d); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 16px; align-items: center; min-height: 100svh; padding: calc(var(--nav-h) + 34px) var(--gutter) 74px; overflow: hidden; background: linear-gradient(120deg, #FFFFFF 0%, #FFFFFF 30%, #FFF0E4 56%); }
.hero__white { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__white .plus { -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .9) 55%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .9) 55%); }
.hero__glow { position: absolute; border-radius: 50%; animation: drift 11s ease-in-out infinite alternate; }
.hero__glow--a { left: -12%; bottom: -30%; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(255, 138, 61, .3), transparent 66%); }
.hero__glow--b { left: 26%; top: -32%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(255, 176, 103, .34), transparent 66%); animation-delay: -5s; }
@keyframes drift { to { transform: translate3d(5vw, -3vw, 0) scale(1.08); } }
.ghost--top { top: calc(var(--nav-h) + 22px); left: 0; -webkit-text-stroke-color: rgba(255, 99, 1, .12); }
.ghost--bot { bottom: 18px; left: 0; animation-duration: 95s; -webkit-text-stroke-color: rgba(255, 99, 1, .24); }
.edge { position: absolute; inset: 0; --ea: 8deg; }
.edge i { position: absolute; top: 0; left: calc(54.76% - var(--x) * 1%); width: 2px; height: 140%; background: linear-gradient(180deg, rgba(255, 99, 1, .55), rgba(255, 99, 1, .12)); transform-origin: top; transform: rotate(var(--ea)); }
.edge b { position: absolute; top: 0; left: calc(54.76% - var(--x) * 1%); width: 4px; height: 190px; margin-left: -1px; background: linear-gradient(180deg, transparent, #fff 45%, var(--orange) 80%, transparent); transform-origin: top; transform: rotate(var(--ea)) translateY(-220px); animation: streak 5.6s cubic-bezier(.5, 0, .5, 1) var(--d) infinite; }
@keyframes streak { 0% { transform: rotate(var(--ea)) translateY(-220px); } 55%, 100% { transform: rotate(var(--ea)) translateY(110vh); } }
.hero__blade { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; background: var(--grad-soft); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; }
.hero__k { position: absolute; right: -9%; top: -14%; width: 74%; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, .11); }
.hero__text { position: relative; z-index: 2; display: grid; gap: 15px; }
.brand { position: relative; width: clamp(260px, 32vw, 600px); aspect-ratio: 2197 / 400; margin-bottom: 2px; }
.brand__logo { position: relative; width: 100%; height: 100%; }
.brand__halo { position: absolute; left: -9%; top: -60%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 61, .55), transparent 68%); animation: halo 3.6s ease-in-out infinite alternate; }
@keyframes halo { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1.12); } }
.brand__shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(img/kanivo-studio-noir.svg) center / 100% 100% no-repeat; mask: url(img/kanivo-studio-noir.svg) center / 100% 100% no-repeat; pointer-events: none; }
.brand__shine i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent); transform: translateX(-120%) skewX(-16deg); }
.hero__kicker { margin-bottom: 26px; font-size: clamp(10.5px, calc(var(--bw, 420px) * .0272), 15.5px); letter-spacing: .06em; }
.hero__kicker i { width: 32px; }
.hero__kicker span { text-wrap: balance; }
.hero__title { font-family: var(--display); font-weight: 800; --h1: clamp(30px, 3.55vw, 66px); font-size: var(--h1); line-height: 1.1; }
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
.hero__word { display: flex; align-items: flex-end; height: calc(var(--h1) * 1.62); overflow: hidden; transform: skewX(var(--slant)); transform-origin: left bottom; }
.word { display: block; white-space: nowrap; line-height: 1.12; font-weight: 900; font-size: calc(var(--h1) * 1.2); }
.word b { display: inline-block; font-weight: inherit; background: linear-gradient(180deg, #FFA45E 8%, #FF6301 56%, #D84600 100%); -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform; }
.hero__lead { max-width: 540px; font-size: clamp(15.5px, 1.15vw, 17.5px); color: var(--muted-l); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; padding-left: 4px; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; max-width: 580px; }
.tab { position: relative; padding: 8px 12px 10px; font-size: 13.5px; font-weight: 700; color: #3C3C42; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(255, 99, 1, .22); transition: color .2s, background .2s; overflow: hidden; }
.tab:hover { color: var(--orange-d); box-shadow: inset 0 0 0 1px var(--orange); }
.tab.is-active { color: var(--white); background: linear-gradient(120deg, #26262B, #0E0E10); box-shadow: none; }
.tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; }

.stage { position: relative; z-index: 1; width: 100%; height: min(74svh, 760px); max-width: calc(min(74svh, 760px) * 1.32); min-height: 480px; justify-self: end; }
.stage__bg { display: none; }
.stage__halo { position: absolute; left: 6%; top: 2%; width: 88%; height: 80%; background: radial-gradient(ellipse, rgba(255, 255, 255, .34), transparent 66%); pointer-events: none; animation: halo 4.2s ease-in-out infinite alternate; }
.stage__lay { position: absolute; inset: 0; pointer-events: none; }
.browser { position: absolute; left: 2%; top: 7%; width: 84%; background: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 70px -24px rgba(50, 16, 0, .7), 0 0 0 1px rgba(255, 255, 255, .22); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: linear-gradient(180deg, #24242A, #111114); }
.browser__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #4A4A52; }
.browser__bar > i:first-child { background: var(--orange); }
.browser__url { margin: 0 auto; padding: 2px 16px; font-size: 11.5px; color: #D6D6DB; background: rgba(255, 255, 255, .08); border-radius: 4px; }
.browser__tag { font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-l); }
.browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: #fff; }
.wipe { position: absolute; top: -6%; bottom: -6%; left: -25%; width: 150%; z-index: 20; background: linear-gradient(100deg, #FF9A52, #FF6301 60%, #0E0E10 60.5%); transform: translateX(-160%); pointer-events: none; }

.mini { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; color: var(--fg); background: var(--bg); }
.mini.is-active { visibility: visible; }
.m-nav { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 3.2cqw; font-size: 1.45cqw; font-weight: 600; }
.m-nav b { margin-right: auto; font-size: 1.7cqw; font-weight: 800; letter-spacing: .02em; }
.m-nav em { padding: .7cqw 1.6cqw; background: var(--acc); color: var(--on); font-weight: 800; }
.m-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 1cqw; padding: 0 3.2cqw; }
.m-copy { display: grid; gap: 1.4cqw; justify-items: start; }
.m-copy strong { display: block; font-size: 5.6cqw; line-height: 1.05; font-family: var(--mf); font-weight: var(--mw, 800); }
.m-copy p { font-size: 1.6cqw; line-height: 1.4; opacity: .85; }
.m-btn { padding: 1.1cqw 2cqw; background: var(--acc); color: var(--on); font-size: 1.7cqw; font-weight: 800; }
.m-ill { width: 100%; height: 100%; max-height: 40cqw; }
.m-row { display: flex; gap: 1cqw; padding: 1.8cqw 3.2cqw 2.2cqw; }
.m-row span { flex: 1; padding: 1.1cqw 1.4cqw; font-size: 1.5cqw; font-weight: 700; background: var(--card); color: var(--cardfg, var(--fg)); }
.mini--auto { --bg: #E8F6FD; --fg: #13294B; --acc: #FFD23F; --on: #13294B; --card: #fff; --mf: 'Manrope', sans-serif; }
.mini--auto .m-body { padding-right: 0; }
.mini--auto .m-copy strong { font-size: 5.2cqw; letter-spacing: -.02em; }
.mini--fast { --bg: #D7261E; --fg: #FFF4D6; --acc: #FFC529; --on: #7A0F0A; --card: #A81A14; --mf: 'Bowlby One', sans-serif; --mw: 400; }
.mini--fast .m-copy strong { color: #FFC529; font-size: 6.2cqw; line-height: 1; }
.mini--fast .m-row span { text-align: center; }
.mini--resto { --bg: #12261E; --fg: #F3EBDC; --acc: #C9A45C; --on: #12261E; --card: #1B3429; --mf: 'Playfair Display', serif; --mw: 700; }
.mini--resto .m-nav b { margin: 0 auto; font-family: 'Playfair Display', serif; font-size: 2.4cqw; font-weight: 700; }
.mini--resto .m-body { grid-template-columns: 1fr 1.1fr; }
.mini--resto .m-copy strong { font-size: 5.4cqw; font-weight: 700; }
.mini--resto .m-row span { background: none; border-top: 1px solid rgba(201, 164, 92, .5); text-align: center; color: #C9A45C; }
.mini--coiffeur { --bg: #F1E8DF; --fg: #1A1714; --acc: #1A1714; --on: #F1E8DF; --card: #E4D5C7; --mf: 'Italiana', serif; --mw: 400; }
.mini--coiffeur .m-nav { text-transform: uppercase; letter-spacing: .1em; font-size: 1.2cqw; }
.mini--coiffeur .m-nav b { font-family: 'Italiana', serif; font-size: 2.2cqw; font-weight: 400; letter-spacing: .14em; }
.mini--coiffeur .m-copy strong { font-size: 8cqw; line-height: .98; }
.mini--coiffeur .m-body { grid-template-columns: 1.3fr 1fr; }
.mini--coiffeur .m-btn { border-radius: 99px; padding: 1.1cqw 2.4cqw; font-weight: 600; }
.mini--coiffeur .m-row span { background: none; border-bottom: 1px solid #1A1714; font-weight: 600; }
.mini--enseigne { --bg: #FFF6E5; --fg: #0B3F3F; --acc: #E4572E; --on: #fff; --card: #F7E4C0; --mf: 'DM Serif Display', serif; --mw: 400; }
.mini--enseigne .m-nav b { font-family: 'DM Serif Display', serif; font-size: 2.4cqw; font-weight: 400; }
.mini--enseigne .m-copy strong { font-size: 4.6cqw; line-height: 1.08; }
.mini--enseigne .m-btn { border-radius: 8px; }
.mini--enseigne .m-row span { border-radius: 8px; text-align: center; }
.mini--fleur { --bg: #FDF2F4; --fg: #1F4D3A; --acc: #D9486E; --on: #fff; --card: #F9DDE3; --mf: 'Yeseva One', serif; --mw: 400; }
.mini--fleur .m-nav b { font-family: 'Yeseva One', serif; font-size: 2.3cqw; font-weight: 400; }
.mini--fleur .m-copy strong { font-size: 5cqw; line-height: 1.08; }
.mini--fleur .m-btn { border-radius: 99px; padding: 1.1cqw 2.4cqw; }
.mini--fleur .m-row span { border-radius: 99px; text-align: center; }
.mini--boul { --bg: #FFF3DC; --fg: #5A3417; --acc: #5A3417; --on: #FFF3DC; --card: #F8DDAA; --mf: 'Pacifico', cursive; --mw: 400; }
.mini--boul .m-nav b { font-family: 'Pacifico', cursive; font-size: 2.3cqw; font-weight: 400; }
.mini--boul .m-copy strong { font-size: 6.4cqw; line-height: 1.2; color: #A85A14; }
.mini--boul .m-row span { text-align: center; }
.mini--garage { --bg: #14171C; --fg: #F2F3F5; --acc: #FFC400; --on: #14171C; --card: #1F242B; --mf: 'Barlow Condensed', sans-serif; --mw: 800; }
.mini--garage .m-nav { text-transform: uppercase; font-size: 1.3cqw; letter-spacing: .05em; }
.mini--garage .m-copy strong { font-style: italic; font-size: 6.4cqw; line-height: .96; text-transform: uppercase; color: #FFC400; }
.mini--garage .m-btn { transform: skewX(-10deg); text-transform: uppercase; font-size: 1.5cqw; }
.mini--garage .m-row span { border-left: .5cqw solid #FFC400; text-transform: uppercase; }

.float { position: absolute; background: var(--white); color: var(--ink); border-radius: 10px; box-shadow: 0 22px 44px -18px rgba(50, 16, 0, .6), 0 0 0 1px rgba(255, 255, 255, .5); }
.float small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-l); }
.float--palette { right: 6%; top: 1.5%; padding: 12px 14px 14px; animation: bob 4.2s ease-in-out infinite alternate; }
.swatches { display: flex; gap: 6px; margin-top: 7px; }
.swatches i { width: 30px; height: 30px; background: #ccc; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: background .2s; }
.float--font { left: 6%; bottom: 5.5%; display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 16px; animation: bob 5s ease-in-out -2s infinite alternate; }
.float--font b { font-size: 40px; line-height: 1; font-weight: 800; color: var(--orange); min-width: 56px; }
.float--font strong { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; }
.float--action { left: 38%; bottom: 4.5%; padding: 11px 26px 14px 16px; animation: bob 4.6s ease-in-out -1s infinite alternate; }
.float--action em { display: inline-block; margin-top: 6px; padding: 8px 16px; font-size: 13.5px; font-weight: 800; white-space: nowrap; background: var(--a, var(--orange)); color: var(--b, var(--ink)); transition: background .2s, color .2s; }
.float__cursor { position: absolute; right: 8px; bottom: 2px; width: 26px; height: 26px; }
@keyframes bob { to { transform: translate3d(0, -9px, 0); } }
.phone { position: absolute; right: 1%; bottom: 8%; width: 18.5%; min-width: 118px; padding: 7px; background: linear-gradient(145deg, #3A3A42, #0B0B0D 40%); border-radius: 22px; box-shadow: 0 30px 50px -20px rgba(30, 10, 0, .75); }
.phone__view { position: relative; aspect-ratio: 9 / 18.5; overflow: hidden; border-radius: 16px; container-type: inline-size; background: var(--pbg, #E8F6FD); color: var(--pfg, #13294B); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10% 7% 8%; transition: background .2s; }
.p-logo { font-size: 5.6cqw; font-weight: 800; white-space: nowrap; }
.p-ill { width: 100%; height: 0; margin: 4cqw 0; flex: 1 1 0; min-height: 0; }
.p-title { font-size: 13cqw; line-height: 1.04; font-weight: 800; }
.p-line { display: block; width: 100%; height: 2.4cqw; margin-top: 2cqw; background: currentColor; opacity: .25; }
.p-line--s { width: 64%; }
.p-btn { width: 100%; margin-top: 4cqw; padding: 5cqw 2cqw; text-align: center; font-size: 6.4cqw; font-weight: 800; background: var(--pa, #FFD23F); color: var(--pb, #13294B); }
.stage__note { position: absolute; right: 2%; bottom: -6px; font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; }

.bands { position: relative; z-index: 6; height: 0; pointer-events: none; }
.band { position: absolute; left: -2%; width: 104%; overflow: hidden; padding: 13px 0; }
.band--a { top: -46px; background: linear-gradient(100deg, #FFB067, #FF6301 40%, #E85200); color: var(--ink); transform: rotate(-1.3deg); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5); }
.band--b { top: -30px; background: var(--ink); color: var(--white); transform: rotate(1.2deg); }
.band__track { display: flex; width: max-content; animation: ghost 60s linear infinite; }
.band--b .band__track { animation-direction: reverse; animation-duration: 76s; }
.band span { display: block; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: .03em; }
.band i { font-style: normal; margin: 0 22px; opacity: .55; }

.about { position: relative; background: linear-gradient(170deg, #17171A, #0B0B0D); color: var(--white); padding: clamp(110px, 13vw, 190px) 0 clamp(84px, 10vw, 150px); overflow: hidden; }
.about__bg { position: absolute; inset: 0; overflow: hidden; }
.orb--a { left: -14%; top: 8%; width: 56vw; height: 56vw; background: radial-gradient(circle, rgba(255, 99, 1, .2), transparent 66%); animation: drift 13s ease-in-out infinite alternate; }
.orb--b { right: -18%; bottom: -22%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(255, 138, 61, .16), transparent 66%); animation: drift 15s ease-in-out -6s infinite alternate-reverse; }
.about__k { position: absolute; right: -4%; top: 3%; width: min(52vw, 700px); height: auto; aspect-ratio: 1; }
.kline { fill: none; stroke: url(#kgrad); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; }
.about__big { position: relative; max-width: 1200px; margin: 24px 0 26px; font-family: var(--display); font-weight: 800; font-size: clamp(27px, 4.5vw, 68px); line-height: 1.12; }
.about__big .wd { display: inline-block; white-space: pre; }
.about__lead { position: relative; max-width: 780px; margin-bottom: clamp(38px, 5vw, 66px); font-size: clamp(17px, 1.55vw, 22px); line-height: 1.5; color: #E2E2E6; }
.roles { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role { padding: 20px 24px 26px; }
.role__ill { width: 100%; height: auto; aspect-ratio: 300 / 140; margin-bottom: 18px; }
.rs { position: relative; display: flex; align-items: center; justify-content: center; background: #0D0D10; border-radius: 6px; box-shadow: inset 0 0 0 1px #2C2C32; overflow: hidden; }
.rs__frame { width: 86%; height: 78%; display: flex; flex-direction: column; gap: 5px; padding: 6px; background: #151518; border: 2px solid #3A3A42; border-radius: 6px; overflow: hidden; }
.rs__bar { display: flex; gap: 4px; }
.rs__bar i { width: 6px; height: 6px; border-radius: 50%; background: #4A4A52; }
.rs__bar i:first-child { background: var(--orange); }
.rs__grid { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.rs-h { flex: 1 1 54%; height: 34px; background: var(--grad); }
.rs-i { flex: 1 1 30%; min-width: 56px; height: 34px; background: #3A3A42; }
.rs-c { flex: 1 1 26%; min-width: 44px; height: 18px; background: #2C2C32; }
.rs__label { position: absolute; right: 8px; bottom: 7px; padding: 2px 8px; font-size: 11px; font-weight: 800; color: var(--ink); background: var(--grad); }
.role__n { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--orange-l); }
.role h3 { margin-top: 2px; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.25; }
.role p { margin-top: 8px; color: var(--muted-d); font-size: 16px; }

.works { position: relative; background: linear-gradient(190deg, #FFFFFF 40%, #FFF3E9); padding: clamp(84px, 11vw, 160px) 0; overflow: hidden; }
.works__bg { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(200deg, #000, transparent 46%); mask-image: linear-gradient(200deg, #000, transparent 46%); }
.plus--works { -webkit-mask-image: linear-gradient(20deg, #000, transparent 55%); mask-image: linear-gradient(20deg, #000, transparent 55%); }
.work { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.work + .work { margin-top: clamp(72px, 10vw, 150px); }
.work--flip .work__media { order: 2; }
.work__media { position: relative; padding-bottom: 6%; }
.work__media::before { content: ''; position: absolute; left: -8%; right: -8%; top: -12%; bottom: -12%; background: radial-gradient(ellipse, var(--acc, rgba(255, 99, 1, .4)), transparent 66%); opacity: .5; animation: halo 5s ease-in-out infinite alternate; pointer-events: none; }
.browser--work { position: relative; left: auto; top: auto; width: 92%; box-shadow: 0 50px 80px -36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .1); }
.work--flip .browser--work { margin-left: 8%; }
.work__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-3); }
.work__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone--work { right: 0; bottom: 0; width: 19%; min-width: 92px; padding: 5px; border-radius: 18px; }
.phone--work .phone__view { padding: 0; border-radius: 14px; display: block; }
.phone--work img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work--flip .phone--work { right: auto; left: 0; }
.work__info { position: relative; display: grid; gap: 18px; justify-items: start; }
.work__info::before { content: attr(data-n); position: absolute; right: 0; top: -28px; font-family: var(--display); font-weight: 900; font-size: clamp(70px, 9vw, 136px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 99, 1, .24); pointer-events: none; }
.work__meta { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted-l); }
.work__meta span { font-family: var(--display); color: var(--orange-d); }
.work__name { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; }
.work__info > p:not(.work__meta) { color: var(--muted-l); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb { position: relative; padding: 9px 16px; font-size: 14px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 99, 1, .25); overflow: hidden; transition: background .25s, color .25s; }
.thumb:hover { box-shadow: inset 0 0 0 1px var(--orange); }
.thumb.is-active { background: var(--ink); color: var(--white); box-shadow: none; }
.thumb.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform-origin: left; animation: thumbbar 4.5s linear; }
.is-manual .thumb.is-active::after { animation: none; }
@keyframes thumbbar { from { transform: scaleX(0); } }
.specs { display: grid; gap: 10px; width: 100%; padding-top: 16px; border-top: 1px solid var(--line-l); font-size: 15px; }
.specs > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.specs dt { font-weight: 700; color: var(--muted-l); }
.dots { display: flex; gap: 6px; }
.dots i { width: 20px; height: 20px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-family: var(--display); font-weight: 700; font-size: 14px; text-decoration: none; color: var(--orange-d); border-bottom: 2px solid var(--orange); }
.link svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link:hover svg { transform: translate(3px, -3px); }

.method { position: relative; margin-top: -4vw; background: linear-gradient(170deg, #17171A 0%, #0E0E10 50%, #141417 100%); color: var(--white); padding: calc(clamp(84px, 11vw, 160px) + 4vw) 0 clamp(40px, 6vw, 90px); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
.method::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4vw; background: linear-gradient(100deg, var(--orange), transparent 60%); clip-path: polygon(0 calc(4vw - 3px), 100% -3px, 100% 0, 0 4vw); pointer-events: none; }
.stripes--soft { background: repeating-linear-gradient(101deg, transparent 0 78px, rgba(255, 255, 255, .04) 78px 80px); }
.sweep--soft { background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .09), transparent); }
.method__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.method__k { position: absolute; right: -14%; top: 4%; width: 74vw; max-width: 1100px; height: auto; aspect-ratio: 1; color: rgba(255, 99, 1, .08); }
.plus--method { opacity: .55; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25)); }
.method__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.method__stick { position: sticky; top: calc(var(--nav-h) + 12px); z-index: 2; height: calc(100svh - var(--nav-h) - 24px); display: flex; align-items: center; justify-content: center; }
.bench { width: min(100%, calc((100svh - var(--nav-h) - 110px) * 1.6)); background: linear-gradient(145deg, #FFB067, #FF6301 30%, #0E0E10 60%, #FF6301); padding: 2px; color: var(--white); clip-path: var(--poly); }
.bench__bar { display: flex; align-items: center; gap: 12px; padding: 16px 22px 16px 28px; font-size: 15px; background: var(--ink); }
.bench__bar span { font-family: var(--display); font-weight: 800; color: var(--orange-l); }
.bench__bar b { font-weight: 700; white-space: nowrap; }
.bench__rail { flex: 1; height: 3px; background: var(--ink-3); margin-left: 12px; }
.bench__rail i { display: block; height: 100%; background: var(--grad); transform: scaleX(.1667); transform-origin: left; }
.bench__view { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(165deg, #1C1C20, #111113); overflow: hidden; container-type: inline-size; }
.st { position: absolute; inset: 0; padding: 3.6cqw; visibility: hidden; }
.st.is-on { visibility: visible; }
.st--1 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3cqw; align-items: center; }
.brief { display: grid; gap: 1.1cqw; }
.brief li { display: flex; align-items: center; gap: 1.6cqw; padding: 1.5cqw 1.8cqw; background: rgba(255, 255, 255, .06); font-size: clamp(11.5px, 1.9cqw, 17px); font-weight: 600; }
.brief i { display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; min-width: 18px; min-height: 18px; background: var(--grad); color: var(--ink); flex: none; }
.brief svg { width: 70%; height: 70%; }
.docs { position: relative; height: 80%; }
.doc { position: absolute; display: flex; align-items: flex-end; width: 44%; aspect-ratio: 4 / 5; padding: 1cqw; font-size: clamp(10px, 1.5cqw, 13px); font-weight: 700; color: var(--ink); background: var(--white); }
.doc::before { content: ''; position: absolute; left: 12%; right: 12%; top: 10%; height: 44%; background: repeating-linear-gradient(180deg, currentColor 0 3px, transparent 3px 11px); opacity: .28; }
.doc--a { left: 4%; top: 2%; background: var(--grad); rotate: -5deg; }
.doc--b { right: 2%; top: 10%; rotate: 4deg; }
.doc--c { left: 12%; bottom: 3%; background: #D9D9DE; rotate: 3deg; }
.doc--d { right: 8%; bottom: 0; background: var(--orange-xl); rotate: -3deg; }
.choice { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 16px; font-size: clamp(12px, 1.8cqw, 15px); font-weight: 700; background: rgba(255, 255, 255, .08); color: #E4E4E8; transition: background .25s, color .25s; }
.chip:hover { background: rgba(255, 255, 255, .16); }
.chip.is-active { background: var(--grad); color: var(--ink); }
.st--2, .st--3 { display: flex; flex-direction: column; gap: 2.4cqw; }
.idemo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.7fr; gap: 2cqw; --bg: #0B1020; --fg: #EAF6FF; --acc: #4DE1FF; --on: #0B1020; --f: 'Orbitron', sans-serif; --w: 800; --a: #4DE1FF; --b: #7A5CFF; --cc: #0B1020; }
.idemo__side { display: grid; grid-template-rows: auto 1fr auto; gap: 1.6cqw; min-height: 0; }
.idemo__sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.idemo__sw i { aspect-ratio: 1; }
.idemo__sw i:nth-child(1) { background: var(--a); }
.idemo__sw i:nth-child(2) { background: var(--b); }
.idemo__sw i:nth-child(3) { background: var(--cc); box-shadow: inset 0 0 0 1px var(--line-d); }
.idemo__aa { display: grid; align-content: center; padding: 1.4cqw 1.8cqw; background: rgba(255, 255, 255, .06); min-height: 0; }
.idemo__aa b { font-family: var(--f); font-weight: var(--w); font-size: 6.6cqw; line-height: 1.1; font-style: var(--st, normal); }
.idemo__aa span { font-size: clamp(11px, 1.6cqw, 14px); color: var(--muted-d); }
.idemo__ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.idemo__ph i { aspect-ratio: 1; background: linear-gradient(145deg, var(--a), var(--b)); }
.idemo__ph i:nth-child(2) { background: linear-gradient(35deg, var(--cc), var(--a)); box-shadow: inset 0 0 0 1px var(--line-d); }
.idemo__ph i:nth-child(3) { background: linear-gradient(200deg, var(--b), var(--cc)); }
.idemo__page { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4cqw; padding: 3cqw; background: var(--bg); color: var(--fg); min-height: 0; }
.idemo__page small { font-size: clamp(10px, 1.3cqw, 12px); opacity: .7; }
.idemo__page strong { font-family: var(--f); font-weight: var(--w); font-style: var(--st, normal); font-size: 5.2cqw; line-height: 1.05; text-transform: var(--tt, none); }
.idemo__page p { font-size: clamp(11.5px, 1.7cqw, 15px); line-height: 1.4; opacity: .85; }
.idemo__page em { padding: 1cqw 2cqw; font-size: clamp(11px, 1.6cqw, 14px); font-weight: 800; background: var(--acc); color: var(--on); border-radius: var(--r, 0); }
.wire { flex: 1; min-height: 0; display: grid; gap: 1cqw; margin: 0 auto; width: 100%; grid-template-columns: repeat(6, 1fr); grid-template-rows: .42fr 1.5fr .8fr .42fr; grid-template-areas: 'n n n n n n' 'h h h i i i' 'a a b b c c' 'x x x x x x'; }
.wire[data-layout="tel"] { width: 34%; grid-template-columns: 1fr; grid-template-rows: .4fr 1fr 1.1fr .7fr .7fr .7fr .5fr; grid-template-areas: 'n' 'h' 'i' 'a' 'b' 'c' 'x'; }
.w { display: flex; align-items: center; justify-content: center; padding: .6cqw; text-align: center; font-size: clamp(10px, 1.6cqw, 15px); font-weight: 700; line-height: 1.2; background: rgba(255, 255, 255, .06); outline: 1px dashed rgba(255, 255, 255, .22); outline-offset: -1px; color: #E4E4E8; }
.w--nav { grid-area: n; }
.w--hero { grid-area: h; background: var(--white); color: var(--ink); outline: 0; }
.w--img { grid-area: i; background: linear-gradient(145deg, #4A4A52, #26262B); }
.w--a { grid-area: a; }
.w--b { grid-area: b; }
.w--c { grid-area: c; }
.w--cta { grid-area: x; background: var(--grad); color: var(--ink); outline: 0; }
.st--4 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: center; }
.ux { display: grid; gap: 1.6cqw; }
.ux li { display: flex; align-items: center; gap: 1.8cqw; padding: 1.8cqw 2cqw; background: rgba(255, 255, 255, .06); font-size: clamp(12px, 2cqw, 18px); font-weight: 700; }
.ux b { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; min-width: 22px; min-height: 22px; flex: none; background: var(--grad); color: var(--ink); font-family: var(--display); font-size: clamp(11px, 1.6cqw, 14px); }
.uxphone { position: relative; justify-self: center; height: 100%; aspect-ratio: 9 / 16; max-height: 49cqw; padding: .7cqw; background: #000; border-radius: 2.6cqw; }
.uxphone__screen { position: relative; height: 100%; display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.6cqw 2cqw 2cqw; background: var(--white); border-radius: 2cqw; overflow: hidden; }
.ux-l { height: 1.8cqw; background: #2A2A30; }
.ux-l--s { width: 66%; height: 1cqw; background: #BDBDC4; }
.ux-img { flex: 1; min-height: 0; background: var(--grad); }
.ux-btn { padding: 1.6cqw 1cqw; background: var(--ink); color: var(--white); text-align: center; font-size: clamp(11px, 1.8cqw, 15px); font-weight: 800; }
.ux-ok { position: absolute; left: 2cqw; right: 2cqw; bottom: 2cqw; padding: 1.6cqw 1cqw; background: var(--orange); color: var(--ink); text-align: center; font-size: clamp(10px, 1.6cqw, 14px); font-weight: 800; opacity: 0; }
.ux-cursor { position: absolute; left: 70%; top: 34%; width: 4cqw; height: 4cqw; min-width: 22px; min-height: 22px; }
.mix { position: relative; height: 100%; }
.mix .ing { position: absolute; left: 0; width: 26%; padding: 1.4cqw 1cqw; text-align: center; background: rgba(255, 255, 255, .08); font-size: clamp(11px, 1.8cqw, 16px); font-weight: 700; }
.ing--1 { top: 4%; }
.ing--2 { top: 30%; }
.ing--3 { top: 56%; }
.ing--4 { top: 82%; }
.mix__pot { position: absolute; left: 37%; top: 50%; width: 22%; aspect-ratio: 1; margin-top: -11%; display: grid; place-items: center; align-content: center; gap: .4cqw; background: var(--grad); color: var(--ink); clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%); }
.mix__pot svg { width: 44%; height: 44%; }
.mix__pot small { font-size: clamp(10px, 1.6cqw, 14px); font-weight: 800; }
.mix__out { position: absolute; right: 0; top: 16%; width: 30%; display: grid; gap: .8cqw; padding: 1.6cqw; background: var(--white); color: var(--ink); }
.mix__out i { height: 1.4cqw; background: #2A2A30; }
.mix__out i:nth-child(2) { height: 6cqw; background: var(--grad); }
.mix__out i:nth-child(3) { width: 60%; height: 1cqw; background: #BDBDC4; }
.mix__out b { font-size: clamp(11px, 1.7cqw, 15px); font-weight: 800; }
.mix__check { position: absolute; right: 0; bottom: 6%; width: 30%; display: flex; align-items: center; gap: .8cqw; padding: 1.2cqw; background: rgba(255, 255, 255, .08); font-size: clamp(10px, 1.5cqw, 14px); font-weight: 700; line-height: 1.2; }
.mix__check svg { width: 2.4cqw; height: 2.4cqw; min-width: 14px; min-height: 14px; flex: none; color: var(--orange-l); }
.st--6 { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; }
.live__url { display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw 2.4cqw; background: var(--white); color: var(--ink); font-size: clamp(14px, 2.6cqw, 24px); font-weight: 800; }
.live__url i { width: 1.8cqw; height: 1.8cqw; min-width: 11px; min-height: 11px; border-radius: 50%; background: #18B65A; }
.live__url b { margin-left: auto; padding: .5cqw 1.4cqw; font-size: clamp(10.5px, 1.6cqw, 14px); background: #D7F5E3; color: #0B6B33; }
.live__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.live__list li { display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw; background: rgba(255, 255, 255, .06); font-size: clamp(11px, 1.8cqw, 16px); font-weight: 600; line-height: 1.25; }
.live__list svg { width: 2.2cqw; height: 2.2cqw; min-width: 14px; min-height: 14px; color: var(--orange-l); flex: none; }
.steps { position: relative; display: grid; }
.step { position: relative; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 40px 22px; border-left: 2px solid rgba(255, 255, 255, .12); }
.step::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.step.is-on::before { transform: none; }
.step > * { transition: opacity .35s; }
.step:not(.is-on) > * { opacity: .4; }
.step__n { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--orange-l); }
.step h3 { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.18; }
.step__lead { margin: 12px 0 8px; font-weight: 800; font-size: 18px; color: var(--white); }
.step p:not(.step__lead) { color: #B4B4BC; font-size: 16px; }
.step .step__try { margin-top: 12px; font-weight: 700; color: var(--orange-l); }

.ai, .contact { position: relative; overflow: hidden; color: var(--ink); background: var(--grad-soft); }
.ai { padding: clamp(84px, 10vw, 150px) 0; }
.ora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ora__k { position: absolute; left: -12%; bottom: -30%; width: 70vw; max-width: 1000px; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, .09); }
.ai__grid { position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ai__text { display: grid; gap: 22px; }
.ai__lead { max-width: 640px; font-size: clamp(17px, 1.45vw, 21px); font-weight: 600; line-height: 1.45; color: var(--white); }
.kitchen { width: 100%; height: auto; overflow: visible; }
.ai__cols { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 5vw, 64px); }
.ai__col { padding: 24px 26px 28px; color: var(--white); --surface: linear-gradient(165deg, #1B1B1F, #0C0C0E); background: linear-gradient(145deg, #FFD3B0, rgba(255, 255, 255, .15) 40%, #0E0E10 70%); }
.ai__col small { display: block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--orange-xl); }
.ai__col h3 { margin: 4px 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.2; }
.ai__col p { color: #D6D6DB; font-size: 16px; }
.aicon { height: 40px; display: flex; align-items: center; gap: 6px; }
.aicon--a i { width: 24px; height: 36px; background: var(--grad); animation: aiA 2.4s ease-in-out infinite; }
.aicon--a i:nth-child(2) { background: #fff; animation-delay: .25s; }
.aicon--a i:nth-child(3) { background: #55555C; animation-delay: .5s; }
@keyframes aiA { 50% { transform: translateY(-5px) scaleY(.82); } }
.aicon--b i { width: 18px; height: 18px; background: var(--grad); animation: aiB 2.8s var(--ease) infinite; }
.aicon--b i:nth-child(1) { --dx: 36px; }
.aicon--b i:nth-child(2) { --dx: 12px; background: #fff; }
.aicon--b i:nth-child(3) { --dx: -12px; background: var(--orange-xl); }
.aicon--b i:nth-child(4) { --dx: -36px; background: #55555C; }
@keyframes aiB { 45%, 70% { transform: translateX(var(--dx)) rotate(90deg); } }
.aicon--c svg { width: 32px; height: 32px; color: var(--orange-l); animation: aiC 2.2s ease-in-out infinite; }
.aicon--c i { width: 92px; height: 8px; background: linear-gradient(90deg, var(--orange), var(--orange-xl)); transform-origin: left; animation: aiD 2.2s var(--ease) infinite; }
@keyframes aiC { 0%, 30% { transform: scale(.6); opacity: 0; } 55%, 100% { transform: none; opacity: 1; } }
@keyframes aiD { 0% { transform: scaleX(0); } 55%, 100% { transform: none; } }

.services { position: relative; background: linear-gradient(175deg, #101012, #17171A 40%, #0C0C0E); color: var(--white); padding: clamp(84px, 11vw, 160px) 0; overflow: hidden; }
.services__bg, .footer__bg { position: absolute; inset: 0; overflow: hidden; }
.orb--c { right: -16%; top: -8%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(255, 99, 1, .2), transparent 66%); animation: drift 14s ease-in-out infinite alternate; }
.orb--d { left: -20%; top: 40%; width: 62vw; height: 62vw; background: radial-gradient(circle, rgba(255, 138, 61, .14), transparent 66%); animation: drift 17s ease-in-out -7s infinite alternate-reverse; }
.orb--e { left: 30%; top: -60%; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(255, 99, 1, .18), transparent 66%); animation: drift 13s ease-in-out infinite alternate; }
.cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { position: relative; padding: 1px; clip-path: var(--poly); background: linear-gradient(145deg, rgba(255, 138, 61, .55), rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .05) 64%, rgba(255, 99, 1, .3)); }
.card:hover { background: linear-gradient(145deg, #FFB067, #FF6301 40%, rgba(255, 255, 255, .25) 70%, #FF6301); }
.card__in { position: relative; height: 100%; padding: 18px 24px 26px; clip-path: var(--poly); background: linear-gradient(165deg, #1C1C20, #101012); overflow: hidden; }
.card__in::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 99, 1, .34), transparent 72%), linear-gradient(0deg, rgba(255, 99, 1, .18), transparent 55%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.card__in::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 44%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); transform: translateX(-130%) skewX(var(--slant)); transition: transform .9s var(--ease); pointer-events: none; }
.card:hover .card__in::before { opacity: 1; }
.card:hover .card__in::after { transform: translateX(330%) skewX(var(--slant)); }
.card__ill { position: relative; width: 100%; height: auto; aspect-ratio: 320 / 140; margin-bottom: 14px; transition: transform .5s var(--ease); overflow: visible; }
.card:hover .card__ill { transform: translateY(-4px) scale(1.04); }
.card h3 { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.22; }
.card p { position: relative; margin-top: 8px; color: var(--muted-d); font-size: 16px; }

.motion { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(84px, 10vw, 150px); }
.motion__text { display: grid; gap: 18px; }
.motion__text > p:last-child { color: var(--muted-d); }
.editor__stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 6.5; overflow: hidden; background-color: #0A0A0C; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 34px 34px; }
.editor__logo { width: 78%; height: auto; overflow: visible; }
.editor__flash { position: absolute; top: -10%; bottom: -10%; left: 0; width: 13%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); pointer-events: none; }
.editor__ctrl { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 0 22px; }
.editor__play { padding: 6px 14px; font-family: var(--display); font-size: 12px; font-weight: 700; background: var(--ink-3); transition: background .2s, color .2s; }
.editor__play:hover { background: var(--orange); color: var(--ink); }
.editor__ctrl output { font-family: var(--display); font-size: 13px; color: var(--orange-l); font-variant-numeric: tabular-nums; }
.editor__tracks { position: relative; margin-top: 10px; padding: 0 18px 22px 22px; display: grid; gap: 5px; cursor: ew-resize; touch-action: none; user-select: none; }
.track { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; color: #C9C9CF; }
.track > div { position: relative; height: 20px; background: var(--ink-3); }
.track i { position: absolute; top: 3px; bottom: 3px; background: var(--grad); }
.editor__head { position: absolute; top: -4px; bottom: 16px; left: calc(22px + 92px + 10px); width: 2px; background: var(--white); pointer-events: none; }
.editor__head::before { content: ''; position: absolute; left: -6px; top: -2px; width: 14px; height: 10px; background: var(--white); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); }

.infra { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(84px, 10vw, 150px); }
.infra__text { display: grid; gap: 18px; }
.choice--dark .chip { font-size: 15px; padding: 10px 18px; }
.tooltext { display: none; color: var(--muted-d); }
.tooltext.is-on { display: block; }
.dash { position: relative; background: var(--paper); color: var(--ink); clip-path: var(--poly); }
.dash__bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 14px 28px; background: var(--white); font-size: 15px; border-bottom: 1px solid var(--line-l); }
.dash__bar > i { width: 18px; height: 8px; background: var(--grad); transform: skewX(-30deg); }
.dash__live { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px; font-size: 12px; font-weight: 800; color: #0B6B33; background: #D7F5E3; }
.dash__live u { width: 7px; height: 7px; border-radius: 50%; background: #18B65A; animation: live 1.2s ease-in-out infinite alternate; }
@keyframes live { to { transform: scale(.55); opacity: .5; } }
.dash__bar span { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted-l); white-space: nowrap; }
.dash__view { position: relative; display: none; min-height: 336px; padding: 18px 20px 20px; }
.dash__view.is-on { display: block; }
.crm__head, .crm__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 108px; gap: 10px; align-items: center; }
.crm__head { padding: 0 12px 8px; font-size: 12.5px; font-weight: 700; color: var(--muted-l); }
.crm { display: grid; gap: 6px; height: 232px; overflow: hidden; align-content: start; }
.crm__row { height: 53px; padding: 0 12px; background: var(--white); font-size: 15px; }
.crm__row b { font-weight: 700; }
.status { padding: 5px 8px; width: 108px; font-size: 13px; font-weight: 800; background: #FFE3D1; color: #8A3000; transition: background .25s, color .25s; }
.status[data-s="1"] { background: #FFF1BF; color: #6D5200; }
.status[data-s="2"] { background: #D7F5E3; color: #0B6B33; }
.dash__hint { margin-top: 12px; max-width: 58%; line-height: 1.3; font-size: 13px; font-weight: 600; color: var(--muted-l); }
.toast { position: absolute; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; opacity: 0; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); }
.toast i { width: 9px; height: 9px; background: var(--grad); transform: skewX(-20deg); }
.schema { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr); align-items: center; padding-top: 6px; }
.tbl { position: relative; display: grid; background: var(--white); box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .5); }
.tbl b { padding: 9px 12px; background: var(--ink); color: var(--white); font-size: 14px; }
.tbl span { padding: 8px 12px; border-top: 1px solid var(--line-l); font-size: 14px; transition: background .25s, color .25s; }
.tbl span.is-hot { background: #FFE3D1; color: #8A3000; font-weight: 700; }
.tbl--b b { background: var(--grad); color: var(--ink); }
.schema .link { position: relative; display: block; padding: 0; border: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--orange) 0 6px, transparent 6px 11px); }
.schema .link i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 99, 1, .25); animation: packet 1.5s linear infinite; }
.schema .link--rev i { animation-direction: reverse; animation-delay: -.7s; }
@keyframes packet { from { left: -5px; } to { left: calc(100% - 5px); } }
.dblog { display: grid; gap: 4px; margin-top: 14px; height: 92px; overflow: hidden; padding: 10px 14px; background: var(--ink); color: #D6D6DB; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; align-content: end; }
.dblog span { display: block; white-space: nowrap; }
.dblog b { color: var(--orange-l); font-weight: 400; }
.stats__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats__nums div { padding: 12px 14px; background: var(--white); }
.stats__nums small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted-l); }
.stats__nums b { font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); font-variant-numeric: tabular-nums; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 170px; margin-top: 14px; }
.bars i { display: block; height: 100%; background: linear-gradient(180deg, var(--orange-xl), var(--orange)); transform: scaleY(.5); transform-origin: bottom; }
.bars__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted-l); }

.care { position: relative; background: linear-gradient(195deg, #FFFFFF 0%, #FFF1E5 100%); padding: clamp(84px, 11vw, 150px) 0; overflow: hidden; }
.care__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.plus--care { -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.bento { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 18px 22px 22px; color: var(--white); }
.tile h3 { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.25; }
.tile p { margin-top: 5px; color: var(--muted-d); font-size: 15.5px; line-height: 1.45; }
.tile > div { transition: transform .5s var(--ease); }
.tile:hover > div:not(.fx) { transform: translateY(-4px) scale(1.02); }
.tile--domain { grid-column: span 5; }
.tile--host { grid-column: span 4; }
.tile--legal { grid-column: span 3; }
.tile--update { grid-column: span 5; }
.tile--edit { grid-column: span 7; }
.tile > div { height: 90px; margin-bottom: 12px; }
.tile > .w-domain { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: clamp(15px, 1.5vw, 21px); font-weight: 800; background: var(--white); color: var(--ink); height: 56px; margin: 17px 0 29px; overflow: hidden; }
.w-domain u { width: 11px; height: 11px; border-radius: 50%; background: #18B65A; flex: none; }
.w-domain span { white-space: nowrap; }
.w-domain b { margin-left: auto; padding: 3px 10px; font-size: 12.5px; background: #D7F5E3; color: #0B6B33; flex: none; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -.12em; background: currentColor; animation: caret 1s steps(2) infinite; flex: none; }
@keyframes caret { 50% { opacity: 0; } }
.w-host { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.w-lock { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; }
.w-pulse { display: flex; flex: none; width: 400%; height: 44px; animation: pulseline 6s linear infinite; }
.w-pulse svg { width: 50%; height: 100%; flex: none; }
@keyframes pulseline { to { transform: translate3d(-50%, 0, 0); } }
.w-legal { position: relative; display: flex; align-items: center; }
.w-doc { display: grid; gap: 7px; align-content: center; width: 70px; height: 86px; padding: 8px 10px; background: var(--white); }
.w-doc i { display: block; height: 5px; background: var(--ink); transform-origin: left; }
.w-doc i:nth-child(2n) { width: 70%; background: #BDBDC4; }
.w-stamp { position: absolute; left: 54px; top: 34px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: var(--ink); }
.w-stamp svg { width: 62%; height: 62%; }
.w-update { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.w-update__bar { height: 12px; background: var(--ink-3); overflow: hidden; }
.w-update__bar i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.w-update__row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: #E4E4E8; }
.w-update__row span { font-family: var(--display); color: var(--orange-l); font-variant-numeric: tabular-nums; }
.w-edit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.w-bubble { padding: 11px 16px; font-size: clamp(14px, 1.25vw, 17px); font-weight: 700; color: var(--ink); background: var(--white); border-radius: 14px 14px 14px 2px; }
.w-status { padding: 6px 12px; font-size: 13px; font-weight: 800; background: #FFF1BF; color: #6D5200; transition: background .25s, color .25s; }
.w-status.is-done { background: #D7F5E3; color: #0B6B33; }
.care__you { position: relative; overflow: hidden; display: grid; gap: 6px; margin-top: 12px; padding: clamp(26px, 3.6vw, 46px); background: var(--grad-soft); color: var(--white); clip-path: var(--poly); }
.care__you small { position: relative; font-size: 14px; font-weight: 800; color: var(--ink); }
.care__you p { position: relative; font-size: clamp(20px, 2.4vw, 36px); font-weight: 700; line-height: 1.25; }
.care__you b { color: var(--ink); font-weight: 800; }

.contact { padding: clamp(84px, 10vw, 150px) 0; }
.ora__k--contact { left: auto; right: -16%; bottom: -24%; }
.ghost--contact { top: 18px; left: 0; -webkit-text-stroke-color: rgba(255, 255, 255, .22); }
.ghost--contact2 { bottom: 16px; left: 0; -webkit-text-stroke-color: rgba(255, 255, 255, .18); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__left { display: grid; gap: 24px; }
.note { --surface: linear-gradient(165deg, #1E1E22, #0E0E10); color: var(--white); }
.note__bar { display: flex; align-items: center; gap: 6px; padding: 12px 18px 12px 24px; border-bottom: 1px solid var(--line-d); }
.note__bar > i { width: 8px; height: 8px; border-radius: 50%; background: #4A4A52; }
.note__bar > i:first-child { background: var(--orange); }
.note__bar small { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--orange-xl); }
.note__plane { margin-left: auto; width: 26px; height: 26px; }
.note > p { padding: 16px 24px 22px; min-height: 104px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.4; }
.note .caret { background: var(--orange-l); }
.mailrow { display: grid; gap: 10px; justify-items: start; }
.mailbox { display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 22px 18px 20px; color: var(--white); text-decoration: none; }
.mailbox:hover .mailbox__icon svg { transform: rotate(-6deg) scale(1.06); }
.mailbox__icon svg { transition: transform .4s var(--ease); }
.mailbox__icon { display: block; flex: none; }
.mailbox__icon svg { width: 62px; height: 48px; overflow: visible; }
.mailbox__txt { min-width: 0; }
.mailbox__txt small { display: block; font-size: 13.5px; font-weight: 700; color: var(--orange-xl); }
.wabox .mailbox__txt small { color: #5BE38C; }
.mailbox__txt b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.75vw, 25px); line-height: 1.2; overflow-wrap: anywhere; }
.mailbox__arrow { flex: none; width: 26px; height: 26px; margin-left: auto; color: var(--orange-l); transition: transform .35s var(--ease); }
.mailbox:hover .mailbox__arrow { transform: translateX(6px); }
.copy { padding: 8px 14px; font-size: 14px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .2s, color .2s; }
.copy:hover { background: var(--ink); color: var(--white); }
.form { position: relative; display: grid; gap: 20px; padding: clamp(22px, 3vw, 40px); background: var(--white); clip-path: var(--poly); transition: box-shadow .3s; }
.form > :not(.fx) { position: relative; }
.form > .fx { inset: 0; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 99, 1, .11), transparent 72%); }
.form > .fx i { background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .14), transparent); }
.form:hover { box-shadow: inset 0 0 0 2px var(--orange); }
.form::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad); }
legend, .form label > span { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 800; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 8px 14px; font-size: 14px; font-weight: 700; background: var(--paper); transition: background .2s, color .2s, box-shadow .2s; }
.pill:hover { box-shadow: inset 0 0 0 1px var(--orange); }
.pill.is-active { background: var(--grad); color: var(--ink); box-shadow: 0 8px 18px -8px rgba(255, 99, 1, .8); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input, textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; resize: vertical; transition: border-color .2s, background .2s; }
input:focus, textarea:focus { outline: 0; border-bottom-color: var(--orange); background: #FFF3E9; }
.form__err { padding: 10px 14px; background: #FFE3D1; color: #8A3000; font-weight: 700; font-size: 15px; }
.form .btn { justify-self: start; margin-left: 4px; }
.form__help { font-size: 13.5px; color: var(--muted-l); }

.footer { position: relative; background: linear-gradient(170deg, #17171A, #0A0A0C); color: var(--white); padding: 64px 0 36px; overflow: hidden; }
.footer__in { display: grid; gap: 26px; }
.brand--foot { width: clamp(240px, 32vw, 460px); }
.footer nav { position: relative; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer a { font-size: 15px; font-weight: 600; text-decoration: none; color: #E2E2E6; transition: color .2s; }
.footer a:hover { color: var(--orange-l); }
.footer p { position: relative; font-size: 13.5px; color: var(--muted-d); max-width: 760px; }

@media (max-width: 1180px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; gap: 16px; padding-bottom: 74px; background: linear-gradient(170deg, #FFFFFF, #FFF0E4); }
  .hero__blade, .edge { display: none; }
  .hero__text { display: contents; }
  .hero__text > * { position: relative; z-index: 2; }
  .brand { order: 1; width: clamp(220px, 46vw, 340px); }
  .hero__kicker { order: 2; }
  .hero__title { order: 3; --h1: clamp(28px, 6.4vw, 56px); }
  .stage { order: 4; width: 100%; max-width: 860px; margin: 6px auto; height: auto; aspect-ratio: 16 / 13; min-height: 0; }
  .tabs { order: 5; max-width: none; margin-top: 4px; }
  .hero__actions { order: 6; }
  .hero__lead { order: 7; max-width: 680px; }
  .hero__glow--a { width: 120vw; height: 120vw; }
  .stage__bg { display: block; position: absolute; top: -3%; bottom: -3%; left: -50vw; right: -50vw; background: var(--grad-soft); overflow: hidden; clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
  .stage__k { position: absolute; left: 50%; top: -6%; width: 90vw; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, .11); }
  .browser { width: 84%; left: 0; }
  .browser--work { width: 92%; }
  .float--font { left: 0; bottom: 6%; }
  .float--action { left: 34%; bottom: 5%; }
  .stage .phone { bottom: 7%; }
  .stage__note { right: 0; bottom: 0; }
  .method__grid { display: block; }
  .method__stick { top: calc(var(--nav-h) + 16px); height: auto; display: block; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; background: linear-gradient(180deg, #0E0E10 86%, rgba(14, 14, 16, 0)); }
  .bench { width: 100%; }
  .step { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .work, .motion, .infra, .contact__grid, .ai__grid { grid-template-columns: minmax(0, 1fr); }
  .work--flip .work__media { order: 0; }
  .work__media { padding-bottom: 12%; }
  .kitchen { max-width: 680px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .cards, .ai__cols, .roles { grid-template-columns: minmax(0, 1fr); }
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .tile--domain, .tile--update, .tile--edit { grid-column: span 12; }
  .tile--host, .tile--legal { grid-column: span 6; }
  .role__ill, .card__ill { max-width: 420px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 60px; --c: 14px; }
  body { font-size: 16px; }
  .nav { top: 8px; padding: 0 10px 0 14px; }
  .nav__brand { width: 150px; height: 36px; }
  .nav__k { width: 36px; height: 36px; }
  .nav__logo { width: 150px; height: 28px; top: 4px; }
  .hero { padding-top: calc(var(--nav-h) + 28px); }
  .ghost--top { top: calc(var(--nav-h) + 12px); }
  .hero__actions .btn { flex: 1 1 100%; }
  .tab { padding: 7px 9px 9px; font-size: 12.5px; }
  .stage { aspect-ratio: auto; height: 108vw; }
  .stage .browser { width: 92%; left: 0; top: 11vw; border-radius: 9px; }
  .browser__bar { height: 26px; }
  .stage .float--palette { right: 0; top: 0; padding: 7px 9px 9px; }
  .swatches { gap: 4px; margin-top: 4px; }
  .swatches i { width: 18px; height: 18px; }
  .stage .float--font { left: 0; bottom: auto; top: 76vw; padding: 7px 12px 7px 10px; gap: 8px; }
  .float--font b { font-size: 24px; min-width: 34px; }
  .float--font strong { font-size: 13px; }
  .stage .float--action { display: none; }
  .stage .phone { width: 28vw; right: 0; bottom: auto; top: 44vw; min-width: 0; padding: 4px; border-radius: 14px; }
  .stage .phone__view { border-radius: 10px; }
  .stage__note { left: 0; right: 32vw; bottom: 2px; text-align: left; font-size: 11.5px; line-height: 1.3; }
  .method__stick { top: calc(var(--nav-h) + 10px); }
  .mailbox { gap: 12px; padding: 14px 16px; }
  .mailbox__icon svg { width: 46px; height: 36px; }
  .mailbox__arrow { display: none; }
  .bench__bar { padding: 10px 14px 10px 20px; font-size: 13px; }
  .bench__view { aspect-ratio: 16 / 11; }
  .step { padding: 44px 0 44px 16px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .track { grid-template-columns: 72px 1fr; font-size: 11.5px; }
  .editor__head { left: calc(22px + 72px + 10px); }
  .editor__stage { aspect-ratio: 16 / 8; }
  .dash__bar { padding-left: 22px; flex-wrap: wrap; }
  .dash__bar span { margin-left: 0; width: 100%; }
  .dash__view { padding: 12px 10px 14px; min-height: 300px; }
  .crm__head, .crm__row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) 88px; gap: 6px; }
  .crm__row { font-size: 13px; padding: 0 8px; }
  .crm__head { padding: 0 8px 6px; }
  .status { width: 88px; font-size: 11.5px; padding: 5px 4px; }
  .toast { font-size: 12px; right: 8px; }
  .schema { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); }
  .tbl b, .tbl span { padding: 6px; font-size: 11.5px; }
  .schema .link i { width: 8px; height: 8px; top: -3px; }
  .specs > div { grid-template-columns: 70px 1fr; }
  .form .btn { width: calc(100% - 8px); }
  .st { padding: 3cqw; }
  .brief li { padding: 1cqw 1.6cqw; }
  .brief { gap: .9cqw; }
  .tile--host, .tile--legal { grid-column: span 12; }
  .band--a { top: -38px; }
  .band--b { top: -24px; }
}

.lnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter); background: linear-gradient(100deg, #17171A, #0E0E10 60%); color: var(--white); }
.lnav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--orange), transparent 40%, transparent 70%, var(--orange-l)); }
.lnav__brand img { width: 186px; height: auto; }
.lnav__links { display: flex; gap: 24px; margin-left: auto; }
.lnav__links a { position: relative; padding: 6px 0; font-size: 15px; font-weight: 600; text-decoration: none; color: #E7E7EA; }
.lnav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.lnav__links a:hover::after, .lnav__links a[aria-current]::after { transform: scaleX(1); }
.lnav .btn { margin-left: 8px; }
.lhero { position: relative; overflow: hidden; background: var(--grad-soft); color: var(--white); padding: clamp(56px, 8vw, 110px) 0 calc(clamp(64px, 9vw, 120px) + 4vw); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.lhero .ora__k { left: auto; right: -10%; bottom: -40%; width: 60vw; }
.lhero__in { display: grid; gap: 16px; justify-items: start; }
.lhero .kicker--ink, .err .kicker--ink { color: #FFF1E6; }
.lhero .kicker--ink i, .err .kicker--ink i { background: #fff; }
.lhero h1, .err h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5.4vw, 80px); line-height: 1.05; animation: lup .9s var(--ease) both .1s; }
.lhero h1 em, .err h1 em { display: inline-block; padding-right: .1em; transform: skewX(var(--slant)); color: #7A2200; }
.lhero__lead { max-width: 640px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; animation: lup .9s var(--ease) both .25s; }
.lhero__chips { display: flex; flex-wrap: wrap; gap: 8px; animation: lup .9s var(--ease) both .4s; }
.lhero__chips span { padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--white); background: rgba(14, 14, 16, .85); }
@keyframes lup { from { opacity: 0; transform: translateY(26px); } }
.lbody { position: relative; overflow: clip; margin-top: -4vw; padding: calc(4vw + 30px) 0 clamp(70px, 9vw, 120px); background: linear-gradient(195deg, #FFFFFF 0%, #FFF1E5 100%); }
.lbody .plus { -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.ghost--legal { bottom: 24px; left: 0; -webkit-text-stroke-color: rgba(255, 99, 1, .16); }
.lgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ltoc { position: sticky; top: 96px; display: grid; gap: 2px; padding: 16px; background: var(--white); clip-path: var(--poly); box-shadow: inset 0 0 0 1px rgba(255, 99, 1, .2); }
.ltoc small { margin-bottom: 6px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-d); }
.ltoc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14.5px; font-weight: 700; text-decoration: none; color: #3C3C42; transition: background .25s, color .25s; }
.ltoc a b { font-family: var(--display); font-size: 11px; color: var(--orange-d); }
.ltoc a:hover { background: #FFF1E6; }
.ltoc a.is-on { background: var(--ink); color: var(--white); }
.ltoc a.is-on b { color: var(--orange-l); }
.lcards { display: grid; gap: 12px; }
.lcard { padding: 24px 28px 28px; color: var(--white); scroll-margin-top: 90px; }
.lcard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lcard__n { padding: 6px 9px; font-family: var(--display); font-size: 13px; font-weight: 800; color: var(--ink); background: var(--grad); }
.lcard h2 { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; }
.lcard p { color: #C9C9CF; }
.lcard p + p, .lcard p + .linfo, .lcard .linfo + p { margin-top: 12px; }
.lcard a { color: var(--orange-l); font-weight: 700; }
.linfo { display: grid; gap: 6px; }
.lcard p + .linfo { margin-top: 14px; }
.linfo div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .05); }
.linfo dt { color: var(--muted-d); font-weight: 700; }
.linfo dd { color: var(--white); font-weight: 700; overflow-wrap: anywhere; }
.lchecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lchecks li { position: relative; padding: 14px 14px 14px 44px; font-weight: 700; background: rgba(255, 255, 255, .05); }
.lchecks li::before { content: ''; position: absolute; left: 14px; top: 50%; width: 18px; height: 10px; margin-top: -7px; border-left: 3px solid var(--orange-l); border-bottom: 3px solid var(--orange-l); transform: rotate(-45deg); }
.lask { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px; background: var(--grad-soft); color: var(--white); clip-path: var(--poly); }
.lask > :not(.ora) { position: relative; }
.lask__txt small { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.lask__txt p { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }
.lask__btns { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 4px; }
.r-wait { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.r-wait.r-in { opacity: 1; transform: none; }
.footer__logo { width: clamp(220px, 26vw, 360px); height: auto; }
.err { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--grad-soft); color: var(--white); }
.ghost--err { bottom: 20px; left: 0; -webkit-text-stroke-color: rgba(255, 255, 255, .25); }
.err .ora__k { left: auto; right: -16%; top: -20%; bottom: auto; width: 70vw; }
.err__main { position: relative; flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: 40px var(--gutter) 90px; }
.err__art { position: relative; display: flex; align-items: center; justify-content: center; }
.err__k { width: min(64%, 360px); height: auto; overflow: visible; }
.e-corps { transform-box: fill-box; transform-origin: 30% 100%; animation: ecorps 4s ease-in-out infinite; }
.e-pied { transform-box: fill-box; transform-origin: 50% 0; animation: epied 4s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes ecorps { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(-4deg) translateX(-6px); } }
@keyframes epied { 0%, 12% { transform: none; } 38% { transform: translate(30px, 120px) rotate(28deg); } 46% { transform: translate(34px, 102px) rotate(22deg); } 54% { transform: translate(36px, 120px) rotate(28deg); } 78% { transform: translate(36px, 120px) rotate(28deg); } 100% { transform: none; } }
.err__code { position: absolute; right: 0; bottom: -6%; font-family: var(--display); font-weight: 900; font-size: clamp(90px, 15vw, 230px); line-height: .9; color: transparent; -webkit-text-stroke: 3px #fff; }
.err__code::before, .err__code::after { content: attr(data-t); position: absolute; inset: 0; -webkit-text-stroke: 0; color: #fff; clip-path: inset(0 0 100% 0); animation: glitch 3.200s steps(1) infinite; }
.err__code::after { color: var(--ink); animation-delay: .15s; }
@keyframes glitch { 0%, 70%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 72% { clip-path: inset(10% 0 60% 0); transform: translateX(-8px); } 75% { clip-path: inset(55% 0 20% 0); transform: translateX(10px); } 78% { clip-path: inset(30% 0 45% 0); transform: translateX(-4px); } 82% { clip-path: inset(0 0 0 0); transform: none; } 90% { clip-path: inset(0 0 100% 0); } }
.err__txt { display: grid; gap: 18px; justify-items: start; }
.err__txt h1 { font-size: clamp(32px, 4.6vw, 66px); }
.err__txt > p:not(.kicker) { max-width: 520px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; animation: lup .9s var(--ease) both .25s; }
.err__btns { display: flex; flex-wrap: wrap; gap: 14px; padding-left: 4px; animation: lup .9s var(--ease) both .4s; }
@media (max-width: 900px) {
  .lnav__links { display: none; }
  .lnav .btn { margin-left: auto; }
  .lgrid { grid-template-columns: minmax(0, 1fr); }
  .ltoc { position: relative; top: 0; display: flex; flex-wrap: wrap; }
  .ltoc small { width: 100%; }
  .err__main { grid-template-columns: minmax(0, 1fr); padding-top: 30px; }
  .err__art { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .lnav { padding: 10px 14px; }
  .lnav__brand img { width: 140px; }
  .lnav .btn { padding: 8px 14px; }
  .lcard { padding: 20px 18px 22px; }
  .linfo div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lchecks { grid-template-columns: minmax(0, 1fr); }
  .lask { padding: 22px 18px; }
  .lask__btns .btn, .err__btns .btn { flex: 1 1 100%; }
}