/* Surface & Core: styles shared by every page. Page-only pieces live in each page. */
/* Geist, self-hosted (SIL Open Font License: fonts/GEIST-LICENSE.txt) */
@font-face { font-family: "Geist"; src: url("fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --bg: #0B0C0E;
  --panel: #131519;
  --panel-2: #1A1D22;
  --line: rgba(236, 238, 241, 0.1);
  --line-2: rgba(236, 238, 241, 0.18);
  --text: #ECEEF1;
  --muted: #8B919A;
  --core: #FF6A2B;
  --core-deep: #E5541A;
  --core-soft: rgba(255, 106, 43, 0.14);
  --light: #F1F0EC;
  --ink: #111214;
  --ink-soft: #55595F;
  --ok: #3DDC84;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: 20px;
  --max: 1240px;
}
@media (min-width: 900px) { :root { --gutter: 40px; } }
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding keeps anchor targets (#contact, #prices...) clear of the fixed header */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(96px + env(safe-area-inset-top, 0px)); scrollbar-color: #2A2E35 var(--bg); accent-color: var(--core); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 "Geist", system-ui, sans-serif; overflow-x: hidden; caret-color: var(--core); -webkit-font-smoothing: antialiased; }
/* The tilted reveal pre-state can poke past the edge on phones and widen the layout; clip it (clip, unlike hidden, keeps sticky working) */
main, .foot { overflow-x: clip; }
/* Text on the orange is dark ink: white on #FF6A2B is only 2.9:1 */
::selection { background: var(--core); color: var(--ink); }
svg { display: block; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.amp, .core-word { color: var(--core); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--core); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }

/* Pill buttons with a round arrow badge */
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 8px 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 16px/1 "Geist", sans-serif; text-decoration: none; white-space: nowrap;
  background: var(--text); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn .badge { width: 40px; height: 40px; border-radius: 50%; background: var(--core); color: #fff; display: grid; place-items: center; flex: none; transition: transform 240ms var(--ease-out); }
.btn .badge svg { width: 16px; height: 16px; }
.btn-core { background: var(--core); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 30px -12px rgba(255, 106, 43, 0.7); }
.btn-core .badge { background: #fff; color: var(--core); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 24px; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .badge { transform: rotate(45deg); }
  .btn:hover { background: #fff; }
  .btn-core:hover { background: var(--core-deep); color: var(--ink); }
  .btn-ghost:hover { background: rgba(236, 238, 241, 0.06); }
  .btn-dark:hover { background: #24262A; }
}

/* Header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color 220ms ease, box-shadow 220ms ease; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
.top.scrolled { background: rgba(11, 12, 14, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; flex: none; }
.left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.status { display: none; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--muted); white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18); }
.right { display: flex; align-items: center; gap: 4px; }
.navlink { display: none; text-decoration: none; color: var(--muted); padding: 10px 12px; font-size: 15px; border-radius: 999px; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .navlink:hover { color: var(--text); } }
.top .btn { min-height: 44px; padding-left: 18px; font-size: 15px; gap: 10px; }
.top .btn .badge { width: 32px; height: 32px; }
@media (min-width: 720px) { .status { display: inline-flex; } }
@media (min-width: 980px) { .navlink { display: inline-block; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

section { position: relative; }
.sec { padding: 96px 0; }
@media (min-width: 900px) { .sec { padding: 140px 0; } }
.h2 { font-size: clamp(40px, 8vw, 92px); }
.head { display: grid; gap: 18px; margin-bottom: 52px; }
.head p { color: var(--muted); font-size: 18px; max-width: 30em; }
@media (min-width: 900px) { .head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 48px; margin-bottom: 72px; } .head p { justify-self: end; text-align: right; } }

.pills { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: #C8CCD2; }
.pills.core-pills li { box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.35); }

/* Light panel */
.light { background: var(--light); color: var(--ink); border-radius: 36px; margin: 0 8px; }
@media (min-width: 900px) { .light { border-radius: 48px; margin: 0 16px; } }
.light .head p { color: var(--ink-soft); }
.ex-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }

/* Selected work: the concept sites, live, on a laptop (a phone on small screens) */
.work-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.work-tabs button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #E2E1DC; color: var(--ink);
  font: 500 15px "Geist", sans-serif; cursor: pointer; touch-action: manipulation;
  transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.work-tabs button:active { transform: scale(0.97); }
.work-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .work-tabs button[aria-selected="false"]:hover { background: #D6D5CF; } }
/* The laptop (a phone on small screens). The screen scrolls through the whole concept homepage. */
.stage { perspective: 1600px; }
.device { margin: 0 auto; max-width: 1040px; transform-origin: 50% 100%; }
.lid { background: #17191D; border-radius: 22px 22px 8px 8px; padding: 12px 12px 16px; box-shadow: inset 0 0 0 1px #2E3137, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 50px 90px -50px rgba(17, 18, 20, 0.7); }
.lid::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: #34373D; margin: -4px auto 6px; }
.viewport { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #fff; }
.scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; scroll-behavior: auto; }
.scroller::-webkit-scrollbar { display: none; }
.scroller:focus-visible { outline: 2px solid var(--core); outline-offset: -2px; }
.scroller img { display: block; width: 100%; height: auto; transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out); }
.scroller img.swap { opacity: 0; filter: blur(6px); }
/* How far down the page you are, in orange on the right edge */
.screen-bar { position: absolute; z-index: 2; top: 8px; bottom: 8px; right: 6px; width: 4px; border-radius: 4px; background: rgba(17, 18, 20, 0.12); pointer-events: none; }
.screen-bar i { position: absolute; left: 0; right: 0; top: 0; height: 18%; border-radius: 4px; background: var(--core); transform: translateY(calc(var(--p, 0) * 455%)); }
.screen-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(17, 18, 20, 0.86); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.screen-hint svg { width: 18px; height: 18px; }
.screen-hint .wheel { animation: wheel 1.6s var(--ease-out) infinite; }
@keyframes wheel { 0% { transform: translateY(-2px); opacity: 1; } 70%, 100% { transform: translateY(3px); opacity: 0; } }
.viewport.used .screen-hint { opacity: 0; transform: translate(-50%, 8px); }
.base { position: relative; height: 18px; margin: 0 -6%; border-radius: 2px 2px 20px 20px; background: linear-gradient(#DADBDE, #A7A9AE); box-shadow: 0 20px 30px -20px rgba(17, 18, 20, 0.6); }
.base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 7px; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: #8F9196; }
.device.phone { max-width: 300px; }
.device.phone .lid { border-radius: 40px; padding: 10px; }
.device.phone .lid::before { display: none; }
.device.phone .viewport { aspect-ratio: 390 / 740; border-radius: 30px; }
.device.phone .base { display: none; }
.work-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-top: 28px; }
.work-meta h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; }
.work-meta p { color: var(--ink-soft); margin-top: 6px; max-width: 36em; }
.work-meta a { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.work-meta a svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .work-meta a:hover svg { transform: rotate(45deg); } }
.work-note { margin-top: 18px; color: var(--ink-soft); font-size: 15px; max-width: 40em; }
/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: 28px; overflow: hidden; }
.step { background: var(--bg); padding: 30px 24px 34px; }
.step .n { font-size: 13px; color: var(--core); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 28px; letter-spacing: -0.03em; margin-top: 40px; line-height: 1.05; }
.step p { margin-top: 12px; color: var(--muted); font-size: 16px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } .step { padding: 34px 30px 40px; min-height: 340px; display: flex; flex-direction: column; } .step h3 { margin-top: auto; } }

/* Prices */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 380px) {
  .brand { font-size: 17px; gap: 8px; } .brand svg { width: 24px; height: 24px; }
  .top .btn { padding: 0 16px; font-size: 14px; }
  .top .btn .badge { display: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .plan .btn { white-space: normal; text-align: left; line-height: 1.2; padding-top: 7px; padding-bottom: 7px; }
  .plan { padding: 24px 20px; }
}
.plan {
  border-radius: 28px; padding: 28px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column;
}
.plan h3 { font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan .tag { font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; background: var(--core-soft); color: #FF956A; }
.price { font-size: clamp(56px, 9vw, 84px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; margin-top: 26px; font-variant-numeric: tabular-nums; }
.once { margin-top: 6px; color: var(--muted); font-size: 15px; }
.plan .desc { margin-top: 18px; color: #C8CCD2; font-size: 16px; }
.spec { list-style: none; margin: 22px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 15px; color: #C8CCD2; }
.spec li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.spec svg { width: 16px; height: 16px; color: var(--core); margin-top: 3px; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan-main {
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 106, 43, 0.18), transparent 60%), linear-gradient(180deg, #1E1A19, var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 106, 43, 0.45), 0 30px 70px -40px rgba(255, 106, 43, 0.45);
}
@media (min-width: 980px) { .plans { grid-template-columns: 1fr 1.12fr 1fr; } .plan-main { margin: -18px 0; padding: 36px 32px; } }
.after-bar { display: grid; gap: 16px; margin-top: 18px; }
.offer { border-radius: 22px; padding: 20px 24px; background: var(--core-soft); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.3); font-size: 16px; }
.offer b { color: var(--core); font-weight: 600; }
.extras { border-radius: 22px; padding: 20px 24px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--muted); }
.extras b { color: var(--text); font-weight: 500; }
@media (min-width: 900px) { .after-bar { grid-template-columns: 1fr 1fr; } }

/* FAQ */
.faq-grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } .faq-grid .h2 { position: sticky; top: 120px; align-self: start; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 56px 24px 0; position: relative; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; touch-action: manipulation; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEEF1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 220ms var(--ease-out), background-color 200ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--core); box-shadow: none; }
.faq details p { padding: 0 0 26px; color: var(--muted); max-width: 40em; }

/* Contact */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; } }
.contact-grid > div > p { margin-top: 22px; color: var(--muted); font-size: 18px; max-width: 28em; }
.mail { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.mail small { display: block; color: var(--muted); font-size: 13px; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.mail-row a { font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.copy { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--panel-2); color: var(--text); font: 500 13px "Geist", sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); touch-action: manipulation; }
.form { border-radius: 30px; padding: 26px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--line); }
.form h3 { font-size: 26px; letter-spacing: -0.03em; }
.form > p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.form fieldset { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.form legend, .form label.lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.chips label:active span { transform: scale(0.97); }
.chips input:checked + span { background: var(--text); color: var(--ink); box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--core); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chips input:not(:checked) + span:hover { box-shadow: inset 0 0 0 1px var(--muted); } }
.fields { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields .full { grid-column: 1 / -1; } }
.field input, .field textarea {
  width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: rgba(11, 12, 14, 0.6); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2); padding: 14px 16px; font: 400 16px "Geist", sans-serif; resize: vertical;
  transition: box-shadow 160ms ease;
}
.field textarea { min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #7A808A; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--core); }
.field .err, .form fieldset .err { color: #FF9B73; font-size: 14px; margin-top: 6px; }
.form .opt { margin-left: 6px; color: var(--muted); }
.form .send { margin-top: 24px; }
.form .send[aria-busy="true"] { opacity: 0.72; cursor: progress; }
.form .form-err { margin-top: 20px; }
.form .form-err + .send { margin-top: 14px; }
/* Honeypot: off-screen for people, still in the page for bots */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile takes no room unless Cloudflare asks the visitor to tick a box */
.ts.shown { margin-top: 22px; }
.form-done { display: none; padding: 20px 0 6px; }
.form-done h3 { font-size: 30px; }
.form-done p { color: var(--muted); margin-top: 10px; max-width: 34em; }
.form-done p b { color: var(--text); font-weight: 500; }
.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.done-actions .copy { min-height: 44px; padding: 0 18px; font-size: 14px; }
.form-done .done-note { font-size: 14px; margin-top: 16px; }
.form.sent .form-body { display: none; }
.form.sent .form-done { display: block; animation: settle 300ms var(--ease-out) both; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }

/* Footer */
.foot { padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); overflow: hidden; }
.foot-word { font-size: clamp(44px, 12.4vw, 192px); font-weight: 500; letter-spacing: -0.06em; line-height: 0.85; white-space: nowrap; padding: 30px 0 34px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; font-size: 14px; color: var(--muted); }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-row a { text-decoration: none; padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .foot-row a:hover { color: var(--text); } }
.foot-legal { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 60em; }
.form .form-privacy { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 34em; }
.form .form-privacy a { color: var(--text); text-underline-offset: 3px; }

/* ---------- Depth and motion across the page ----------
   Things arrive by tipping up out of the page (a short 3D rise), headings flip up word by word,
   cards lean towards the mouse, and the big pieces settle flat as you scroll to them.
   Everything is decorative, so hover effects only run on real mouse devices, and reduced motion keeps fades only. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--core); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.js [data-reveal] {
  opacity: 0; transform: perspective(1200px) translateY(48px) rotateX(18deg) scale(0.97); transform-origin: 50% 0%;
  transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.js .split .w > span {
  display: inline-block; transform: perspective(700px) translateY(100%) rotateX(-70deg); transform-origin: 50% 100%;
  transition: transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms);
}
.js .split.in .w > span { transform: none; }
/* Footer wordmark: letters rise one after another */
.js .foot-word .ch { display: inline-block; opacity: 0; transform: perspective(600px) translateY(60%) rotateX(-80deg); transform-origin: 50% 100%; transition: opacity 600ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 35ms); }
.js .foot-word.in .ch { opacity: 1; transform: none; }
/* Work tabs: one dark pill that slides to the chosen tab */
.work-tabs { position: relative; display: inline-flex; padding: 4px; gap: 4px; border-radius: 26px; background: #E2E1DC; }
.work-tabs button { position: relative; z-index: 1; background: transparent; }
.work-tabs button[aria-selected="true"] { background: transparent; }
.js .work-tabs button[aria-selected="true"] { color: #fff; }
.tab-pill { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 999px; background: var(--ink); transition: transform 340ms var(--ease-in-out), width 340ms var(--ease-in-out); pointer-events: none; }
html:not(.js) .tab-pill { display: none; }
html:not(.js) .work-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .work-tabs button[aria-selected="false"]:hover { background: rgba(17, 18, 20, 0.06); } }
/* Price cards lean towards the mouse, with light catching the glossy panel */
.plans { perspective: 1400px; }
.plan { position: relative; transform-style: preserve-3d; }
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 220ms ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.09), transparent 60%); }
.plan-main::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 140, 90, 0.16), transparent 60%); }
/* Process steps: a soft orange light follows the mouse across them */
.step { position: relative; }
.step::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 220ms ease; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 106, 43, 0.12), transparent 65%); }
.step > * { position: relative; }
.step .n { display: inline-block; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .plan:hover::after, .step:hover::before { opacity: 1; }
  .step:hover .n { transform: translateX(4px); }
}
.light { transform-origin: 50% 0; }
.xray { transform-origin: 50% 100%; }
.faq details p { overflow: hidden; }

/* ---------- Shared across the pages ---------- */

/* Current page in the nav */
.navlink[aria-current="page"] { color: var(--text); }

/* Phone menu: a round button that opens a sheet under the header */
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; touch-action: manipulation; transition: transform 140ms var(--ease-out); }
.menu-btn:active { transform: scale(0.94); }
.menu-btn i { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; grid-area: 1 / 1; transition: transform 240ms var(--ease-out); }
.menu-btn i:first-child { transform: translateY(-3.5px); }
.menu-btn i:last-child { transform: translateY(3.5px); }
.top.menu-open .menu-btn i:first-child { transform: rotate(45deg); }
.top.menu-open .menu-btn i:last-child { transform: rotate(-45deg); }
.menu { display: none; }
.top.menu-open { background: rgba(11, 12, 14, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.top.menu-open .menu { display: block; }
.top .menu .wrap { display: block; padding-top: 0; padding-bottom: 0; }
.menu nav { display: grid; padding: 6px 0 26px; max-height: calc(100svh - 80px); overflow-y: auto; }
.menu a { display: flex; justify-content: space-between; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 28px; font-weight: 500; letter-spacing: -0.03em; }
.menu a[aria-current="page"] { color: var(--core); }
.menu a svg { width: 20px; height: 20px; color: var(--muted); }
.menu a { opacity: 0; transform: translateY(10px); animation: menu-in 300ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes menu-in { to { opacity: 1; transform: none; } }
@media (min-width: 980px) { .menu-btn, .top.menu-open .menu { display: none; } }
@media (max-width: 400px) { .top .right > .btn { display: none; } }

/* Page heroes on the inner pages: big statement, left aligned */
.page-hero { position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; padding-top: calc(150px + env(safe-area-inset-top)); padding-bottom: 72px; }
@media (min-width: 900px) { .page-hero .wrap { padding-top: 200px; padding-bottom: 110px; } }
.page-hero h1 { font-size: clamp(44px, 8.4vw, 124px); max-width: 11em; }
.page-hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.page-hero h1 .line > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); }
.page-hero.ready h1 .line > span { transform: none; }
.page-hero.ready h1 .line:nth-child(2) > span { transition-delay: 110ms; }
.page-hero.ready h1 .line:nth-child(3) > span { transition-delay: 220ms; }
.page-hero .lede { margin-top: 28px; max-width: 34em; font-size: clamp(17px, 1.9vw, 21px); color: #B9BEC6; }
.page-hero .lede b { color: var(--text); font-weight: 500; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero .fade-in { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease-out) 320ms, transform 700ms var(--ease-out) 320ms; }
.page-hero.ready .fade-in { opacity: 1; transform: none; }
/* A faint glow of the core behind each inner-page hero */
.page-hero::before { content: ""; position: absolute; right: -20vw; top: -30vw; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 106, 43, 0.16), rgba(255, 106, 43, 0.04) 55%, transparent); pointer-events: none; }

/* Closing call to action on the inner pages */
.cta-band { position: relative; overflow: hidden; border-radius: 36px; margin: 0 8px; padding: 72px 0; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 106, 43, 0.28), transparent 60%), linear-gradient(180deg, #1E1A19, var(--panel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 106, 43, 0.3); }
@media (min-width: 900px) { .cta-band { border-radius: 48px; margin: 0 16px; padding: 110px 0; } }
.cta-band .wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1.4fr 1fr; align-items: end; } .cta-band .go { justify-self: end; } }
.cta-band p { color: #C8CCD2; margin-top: 18px; font-size: 18px; max-width: 30em; }
.cta-band .go { display: flex; flex-wrap: wrap; gap: 12px; }

/* A screenshot that scrolls inside a browser-style frame (Work page) */
.browser { background: #17191D; border-radius: 18px; padding: 0 8px 8px; box-shadow: inset 0 0 0 1px #2E3137, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 50px 90px -50px rgba(0, 0, 0, 0.9); transform-origin: 50% 100%; }
.browser .chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; }
.browser .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #34373D; }
.browser .chrome span { margin-left: 10px; font-size: 12px; color: var(--muted); }
.browser .viewport { border-radius: 10px; }
@media (max-width: 639px) { .browser { max-width: 320px; margin: 0 auto; border-radius: 30px; padding: 8px; } .browser .chrome { display: none; } .browser .viewport { aspect-ratio: 390 / 740; border-radius: 24px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .split .w > span, .js .foot-word .ch { transform: none !important; transition: opacity 300ms ease; transition-delay: 0ms; }
  .tab-pill { transition: none; }
  .hero h1 .line > span, .fade-in { transform: none; opacity: 1; transition: none; }
  .scroller img, .screen-hint { transition: none; }
  .screen-hint .wheel { animation: none; }
  .work-tabs button:active { transition: none; transform: none; }
  .handle, .xr-surface { transition: none !important; }
  .seg button:active { transform: none; }
  .btn:active, .chips label:active span, .switch button:active { transform: none; }
  .btn .badge { transition: none; }
  .layer { filter: none !important; }
  .form.sent .form-done { animation: none; }
  .page-hero h1 .line > span, .page-hero .fade-in { transform: none; opacity: 1; transition: none; }
  .menu a { animation: none; opacity: 1; transform: none; }
  .menu-btn i { transition: none; }
}