/* Layout: brand blue / charcoal / white, eye-chart typography, round "eye" forms; single light brand theme by choice. */
@font-face {
  font-family: "Optician Sans";
  src: url("data:font/woff;base64,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") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --blue: #3459ff;
  --blue-deep: #2443e0;
  --ink: #292929;
  --paper: #ffffff;
  --mist: #f0f2ff;
  --muted: #5a5d6e;
  --line: rgba(41, 41, 41, 0.14);
  --on-blue-muted: rgba(41, 41, 41, 0.78);
  --display: "Optician Sans", "Avenir Next", "Futura", "Century Gothic", Arial, sans-serif;
  --body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 22px;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  --step-4: clamp(2.8rem, 1.6rem + 5.2vw, 6rem);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html.intro { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.display { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: 0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--muted); }
.lede { font-size: var(--step-1); line-height: 1.55; max-width: 34ch; color: var(--muted); }

/* ---------- Eyes (logo mark) ---------- */
.eye { display: inline-block; width: 1em; height: 1em; overflow: visible; }
.eye .ring { fill: var(--ink); }
.eye .hole { fill: var(--paper); }
.eye .pupil { fill: var(--ink); }
.eye .lid { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease-in; }
.blinking .eye .lid { transform: scaleY(0.08); }
.on-blue .eye .hole, .tapcard .eye .hole { fill: var(--blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem;
  padding: 1em 1.6em; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-blue .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { display: inline-flex; align-items: baseline; font-family: var(--display); font-size: 30px; text-decoration: none; letter-spacing: 0.03em; line-height: 1; }
.brand .eye { width: 0.5em; height: 0.5em; margin-inline: 0.03em; }
.brand .eye + .eye { margin-left: 0.01em; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--blue); }
.nav-links .btn { padding: 0.75em 1.3em; font-size: 0.82rem; }
.menu-toggle { display: none; background: none; border: 2px solid var(--ink); border-radius: 999px; padding: 0.5em 1em; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .menu-toggle { display: inline-block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; }
  .nav-links.open { display: flex; }
  .nav-links li a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { padding-top: 16px; }
  .nav-links .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 8vw, 110px) clamp(56px, 8vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { font-size: var(--step-4); line-height: 0.95; margin-block: 18px 26px; }
.hero h1 .accent { color: var(--blue); }
.hero .lede { max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 0.95rem; color: var(--muted); }
.proof li { display: inline-flex; align-items: center; gap: 8px; }
.proof li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.stack-logo { justify-self: center; font-family: var(--display); font-size: clamp(96px, 15vw, 220px); line-height: 0.86; letter-spacing: 0.02em; display: grid; gap: 0.06em; user-select: none; }
.stack-logo .eyes { display: flex; gap: 0.02em; }
.stack-logo .eye { width: 0.64em; height: 0.64em; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stack-logo { order: -1; font-size: clamp(84px, 30vw, 160px); justify-self: start; }
}

/* ---------- What we do (eye chart) ---------- */
.on-blue { background: var(--blue); color: var(--ink); }
.what { padding-block: clamp(64px, 9vw, 130px); }
.what { position: relative; overflow: hidden; isolation: isolate; }
.what .eye-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.chart { background: var(--paper); border-radius: 6px; padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px); box-shadow: 0 30px 60px -30px rgba(20, 30, 90, 0.55); }
.chart-row { display: grid; grid-template-columns: 3.4em 1fr 3.4em; align-items: center; gap: 8px; }
.chart-row + .chart-row { margin-top: 0.35em; }
.chart-row .note { font-family: var(--display); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; }
.chart-row .note:last-child { text-align: right; }
.chart-row .line { font-family: var(--display); text-align: center; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.1; white-space: nowrap; min-width: 0; }
.chart-row:nth-child(1) .line { font-size: clamp(3.6rem, 9vw, 7.2rem); letter-spacing: 0.06em; }
.chart-row:nth-child(2) .line { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.chart-row:nth-child(3) .line { font-size: clamp(1.45rem, 3vw, 2.4rem); }
.chart-row:nth-child(4) .line { font-size: clamp(1.05rem, 2.1vw, 1.6rem); }
.chart-row:nth-child(5) .line { font-size: clamp(0.72rem, 1.3vw, 1rem); }
.chart-row:nth-child(6) .line { font-size: clamp(0.56rem, 0.9vw, 0.7rem); }
.chart-row.red { border-top: 2px solid #d9352b; padding-top: 0.5em; margin-top: 0.7em; }
.what h2 { font-size: var(--step-3); margin-block: 14px 24px; }
.what-grid > div:last-child { color: #fff; }
.what .eyebrow { color: rgba(255,255,255,.8); }
.what p.body { font-size: var(--step-1); line-height: 1.55; max-width: 40ch; }
.offer { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; border-top: 2px solid rgba(255,255,255,.85); }
.offer li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 2px solid rgba(255,255,255,.85); }
.offer strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; }
.offer span { font-size: 0.95rem; color: rgba(255,255,255,.85); text-align: right; }
.offer .tag { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; background: #fff; color: var(--blue); border-radius: 999px; padding: 0.35em 0.8em; }
@media (max-width: 560px) {
  .offer li { grid-template-columns: 1fr; gap: 4px; }
  .offer span { text-align: left; }
  .offer .tag { justify-self: start; }
}
@media (max-width: 860px) {
  .what-grid { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 2.6em 1fr 2.6em; }
}

/* ---------- Section heads ---------- */
.section { padding-block: clamp(72px, 9vw, 130px); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: var(--step-3); margin-top: 12px; }
.section-head p { max-width: 42ch; color: var(--muted); }

/* ---------- How it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); counter-reset: step; }
.step { border-top: 2px solid var(--ink); padding-top: 22px; display: grid; gap: 14px; align-content: start; }
.step .num { font-family: var(--display); font-size: 4.2rem; line-height: 0.8; color: var(--blue); }
.step h3 { font-size: 1.45rem; letter-spacing: 0.04em; }
.step p { color: var(--muted); max-width: 32ch; }
.step-art { height: 120px; display: flex; align-items: center; }
.step-art svg { height: 100%; width: auto; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Products ---------- */
.shop { background: var(--mist); }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.product { background: var(--paper); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-rows: auto auto 1fr auto; gap: 20px; min-width: 0; }
.product-visual { background: var(--mist); border-radius: 14px; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; position: relative; max-width: 100%; }
.product h3 { font-size: 1.7rem; letter-spacing: 0.03em; }
.product .sub { color: var(--muted); margin-top: 8px; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.includes li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 0.98rem; }
.includes li::before { content: ""; width: 10px; height: 10px; margin-top: 0.5em; border-radius: 50%; border: 3px solid var(--ink); }
.buy-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; }
.price { font-family: var(--display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { display: block; font-family: var(--body); font-size: 0.8rem; color: var(--muted); margin-top: 6px; letter-spacing: 0; }
@media (max-width: 760px) { .products { grid-template-columns: 1fr; } }

/* NFC card illustration */
.tapcard {
  width: 72%; aspect-ratio: 85.6 / 54; border-radius: 6% / 9.5%; background: var(--blue); color: var(--ink);
  padding: 6% 7%; display: grid; grid-template-rows: auto 1fr auto; position: relative;
  box-shadow: 0 22px 40px -18px rgba(20, 35, 120, 0.55); font-family: var(--display); container-type: inline-size;
}
.tapcard .tc-top { display: flex; justify-content: space-between; align-items: center; }
.tapcard .tc-brand { display: inline-flex; align-items: baseline; font-size: 7.5cqw; letter-spacing: 0.03em; line-height: 1; }
.tapcard .tc-brand .eye { width: 0.7em; height: 0.7em; margin-inline: 0.03em; }
.tapcard .tc-nfc { width: 12cqw; height: 12cqw; }
.tapcard .tc-msg { align-self: end; font-size: 6.4cqw; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.04em; }
.tapcard .tc-stars { display: flex; gap: 1.6cqw; margin-top: 3cqw; }
.tapcard .tc-stars svg { width: 6cqw; height: 6cqw; }
.tapcard.back { position: absolute; }
.pack .tapcard { width: 62%; }
.pack { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pack .tapcard:nth-of-type(1) { transform: translate(-9%, -9%) rotate(-7deg); opacity: 0.55; position: absolute; }
.pack .tapcard:nth-of-type(2) { transform: translate(-4%, -4%) rotate(-3deg); opacity: 0.8; position: absolute; }
.pack .tapcard:nth-of-type(3) { transform: translate(3%, 3%) rotate(2deg); }
.pack .qty { position: absolute; right: 6%; top: 8%; font-family: var(--display); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.4em 0.9em; font-size: 0.9rem; letter-spacing: 0.1em; z-index: 2; }

/* ---------- Who it's for ---------- */
.who { padding-block: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.who-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.who h2 { font-size: var(--step-2); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; border: 2px solid var(--ink); border-radius: 999px; padding: 0.6em 1.1em; }
.chips li:nth-child(4n+1), .chips li:nth-child(4n+2) { background: var(--blue); border-color: var(--blue); }
@media (max-width: 760px) { .who-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); }
.faq-grid h2 { font-size: var(--step-3); margin-top: 12px; }
.faq-grid > div > p { margin-top: 20px; color: var(--muted); max-width: 32ch; }
.faq details { border-top: 2px solid var(--ink); }
.faq details:last-child { border-bottom: 2px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; transition: transform 200ms, background 200ms; }
.faq summary .plus::before { content: "+"; font-family: var(--body); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); }
.faq .answer { padding: 0 0 24px; color: var(--muted); max-width: 60ch; }
.faq .answer p + p { margin-top: 10px; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact { background: var(--ink); color: var(--paper); }
.contact .eyebrow { color: rgba(255, 255, 255, 0.6); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); }
.contact h2 { font-size: var(--step-3); margin-block: 12px 22px; }
.contact .lede { color: rgba(255, 255, 255, 0.72); }
.contact-direct { margin-top: 34px; display: grid; gap: 6px; }
.contact-direct .label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.contact-direct .email { font-family: var(--display); font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: 0.02em; word-break: break-all; color: var(--paper); text-decoration-color: var(--blue); text-underline-offset: 6px; }
form.enquiry { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(20px, 3.4vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; }
.field label .opt { color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-family: var(--body); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: 12px; padding: 0.8em 0.9em; width: 100%;
  transition: border-color 150ms;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field .hint { font-size: 0.85rem; color: var(--muted); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.form-foot small { color: var(--muted); max-width: 36ch; }
.form-status { grid-column: 1 / -1; border-radius: 14px; padding: 16px 18px; background: var(--mist); }
.form-status strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 6px; }
.form-status pre { white-space: pre-wrap; font: inherit; font-size: 0.92rem; background: var(--paper); border-radius: 10px; padding: 12px; margin: 10px 0; max-height: 220px; overflow: auto; }
.form-status.error { background: #ffece9; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { form.enquiry { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(56px, 7vw, 96px) 28px; overflow: hidden; }
.footer-mark { display: flex; flex-wrap: wrap; align-items: baseline; font-family: var(--display); font-size: clamp(64px, 17.5vw, 250px); line-height: 0.9; letter-spacing: 0.02em; user-select: none; }
.footer-mark .eye { width: 0.7em; height: 0.7em; margin-inline: 0.03em; }
.footer-mark small { flex-basis: 100%; font-size: max(0.15em, 12px); letter-spacing: 0.32em; margin-top: 0.5em; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; margin-top: 48px; padding-top: 22px; border-top: 2px solid var(--ink); font-size: 0.95rem; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-row a { text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.footer-row a:hover { text-decoration: underline; }
.replay { background: none; border: 0; padding: 0; font: inherit; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Intro overlay ---------- */
#intro { display: none; position: fixed; inset: 0; z-index: 100; background: var(--blue); }
#intro.running { background: transparent; }
html.intro #intro { display: block; }
#intro svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#intro .skip {
  position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 0.7em 1.2em; cursor: pointer;
}
#intro.fading { transition: opacity 260ms ease; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eye .lid { transition: none; }
  .btn, .faq summary .plus { transition: none; }
}

/* ---------- Order confirmation banner ---------- */
.order-banner {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(640px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--blue); color: var(--ink); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: 0 24px 48px -20px rgba(20, 30, 90, 0.6);
}
.order-banner strong { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; margin-bottom: 4px; }
.order-banner span { font-size: 0.98rem; }
.order-banner > div { min-width: 0; flex: 1 1 260px; }

/* ---------- Order dialog ---------- */
.order-dialog {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  border: 0; border-radius: var(--radius); padding: 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(20, 30, 90, 0.6);
}
.order-dialog::backdrop { background: rgba(41, 41, 41, 0.55); }
.order-dialog form { padding: clamp(20px, 4vw, 32px); display: grid; gap: 18px; }
.od-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.od-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-top: 8px; }
.od-price { font-family: var(--display); font-size: 1.3rem; color: var(--blue); margin-top: 8px; }
.od-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.od-close:hover { background: var(--ink); color: var(--paper); }
.od-intro { color: var(--muted); }
.od-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.od-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.od-foot small { color: var(--muted); max-width: 30ch; }
.order-dialog .form-status { grid-column: auto; }
@media (max-width: 520px) { .od-fields { grid-template-columns: 1fr; } }
.order-dialog .field textarea { min-height: 72px; }

/* Platform picker on products */
.plat-pick { display: grid; gap: 6px; }
.plat-pick label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.plat-pick select, .order-dialog select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 0.7em 0.9em; width: 100%; }
.plat-pick select:focus, .order-dialog select:focus { outline: none; border-color: var(--blue); }
.tapcard .tc-stars[hidden] { display: none !important; }

/* ---------- Products: aligned rows (subgrid) ---------- */
.products { row-gap: clamp(16px, 3vw, 32px); }
.product { grid-template-rows: auto auto auto 1fr auto; }
@supports (grid-template-rows: subgrid) {
  .products { grid-auto-rows: auto; row-gap: 0; }
  .product { grid-row: span 7; grid-template-rows: subgrid; row-gap: 20px; margin-bottom: clamp(16px, 3vw, 32px); }
  .product .includes { grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; }
  .product .buy-row { align-self: end; }
}
.product-visual { position: relative; aspect-ratio: 16 / 11; background: none; overflow: visible; display: block; }
.product-visual .qty { position: absolute; right: 14px; top: 14px; z-index: 3; font-family: var(--display); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.4em 0.9em; font-size: 0.85rem; letter-spacing: 0.1em; }

/* Platform picker as a refined select */
.plat-pick { display: block; border-block: 1px solid var(--line); padding-block: 12px; }
.plat-row { display: flex; align-items: center; gap: 14px; }
.plat-pick label { flex: none; margin: 0; }
.plat-pick select {
  appearance: none; -webkit-appearance: none; flex: 1; min-width: 0;
  border: 0; border-radius: 999px; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23292929' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  padding: 0.7em 2.6em 0.7em 1.1em; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; cursor: pointer;
}
.plat-pick select:hover { background-color: #e4e8ff; }
.plat-pick select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- 3D card viewer ---------- */
.viewer { position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, var(--mist) 70%); perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; display: grid; place-items: center; overflow: hidden; }
.viewer:active { cursor: grabbing; }
.viewer:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.rig { position: relative; width: 62%; aspect-ratio: 85.6 / 54; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-24deg); will-change: transform; }
.c3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.c3d-2 { transform: translate3d(-7%, -9%, -22px) rotateZ(-5deg); }
.c3d-3 { transform: translate3d(-14%, -18%, -44px) rotateZ(-10deg); }
.c-face, .c-layer { position: absolute; inset: 0; border-radius: 4.6% / 7.3%; }
.c-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; container-type: inline-size; }
.c-layer { background: #2440d8; transform: translateZ(var(--z)); }
.c-front { background: #fff; transform: translateZ(2px); color: #1d1f27; font-family: Inter, var(--body); }
.c-back { background: #3459ff; transform: rotateY(180deg) translateZ(2px); color: #1d1f27; font-family: var(--display); }
.c-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 48%, transparent 62%); background-size: 300% 100%; background-position: var(--glare, 50%) 0; }
.f-bg { position: absolute; inset: 0; background: var(--fbg, #2f7cf6); }
.f-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% -20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.f-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-badge { position: absolute; left: 8.2cqw; top: 7cqw; width: 20.4cqw; height: 20.4cqw; background: #fff; border-radius: 5.4cqw; display: grid; place-items: center; box-shadow: 0 .7cqw 2.1cqw rgba(0,0,0,.18); }
.f-badge img { width: 14.2cqw; height: 14.2cqw; object-fit: contain; }
.f-head { position: absolute; left: 32.7cqw; right: 7cqw; top: 7cqw; height: 20.4cqw; display: flex; flex-direction: column; justify-content: center; color: var(--ftc, #fff); }
.f-small { font-size: 3.7cqw; font-weight: 600; opacity: .9; line-height: 1.1; }
.f-name { font-size: 10.7cqw; font-weight: 800; letter-spacing: -.025em; line-height: 1.04; white-space: nowrap; }
.f-stars { display: flex; gap: .7cqw; margin-top: 1.1cqw; }
.f-stars:empty { display: none; }
.f-stars svg { width: 4.1cqw; height: 4.1cqw; display: block; }
.f-logo { display: none; position: absolute; right: 7.7cqw; top: 6.8cqw; width: 31cqw; height: 19.9cqw; background: #fff; border-radius: 3.7cqw; box-shadow: 0 .7cqw 2.1cqw rgba(0,0,0,.18); place-items: center; }
.f-logo span { width: 26.3cqw; height: 15.2cqw; border: .35cqw dashed #b7bccb; border-radius: 1.9cqw; display: grid; place-items: center; text-align: center; font: 700 2.5cqw/1.25 Inter, var(--body); letter-spacing: .12em; text-transform: uppercase; color: #9aa0b2; }
.withlogo .f-logo { display: grid; }
.withlogo .f-badge { left: 7.7cqw; top: 8.2cqw; width: 17cqw; height: 17cqw; border-radius: 4.6cqw; }
.withlogo .f-badge img { width: 11.9cqw; height: 11.9cqw; }
.withlogo .f-head { left: 28.5cqw; right: 40.9cqw; top: 7.5cqw; height: 18.5cqw; }
.withlogo .f-small { font-size: 3.2cqw; }
.withlogo .f-name { font-size: 8.6cqw; }
.withlogo .f-stars svg { width: 3.5cqw; height: 3.5cqw; }
.f-bottom { position: absolute; left: 8.2cqw; right: 7.7cqw; top: 38.1cqw; height: 21cqw; display: flex; align-items: center; justify-content: space-between; }
.f-grp { display: flex; align-items: center; gap: 2.2cqw; }
.f-tapc { width: 17cqw; height: 10.3cqw; }
.f-tapc svg { width: 100%; height: 100%; display: block; }
.f-t1 { font-size: 4.9cqw; font-weight: 800; line-height: 1.05; white-space: nowrap; }
.f-t2 { font-size: 2.9cqw; font-weight: 500; color: #5a5d6e; margin-top: .6cqw; white-space: nowrap; }
.f-r { text-align: right; }
.f-or { display: flex; flex-direction: column; align-items: center; gap: 1cqw; height: 17.5cqw; }
.f-or i { flex: 1; border-left: .33cqw solid #dfe2ea; }
.f-or b { width: 6.5cqw; height: 6.5cqw; border-radius: 50%; border: .33cqw solid #dfe2ea; display: grid; place-items: center; font-size: 2.8cqw; font-weight: 700; color: #5a5d6e; }
.f-qrf { position: relative; width: 21.3cqw; height: 21.3cqw; display: grid; place-items: center; }
.f-qr { width: 17.5cqw; height: 17.5cqw; display: block; background: none; padding: 0; box-shadow: none; }
.f-qrf .k { position: absolute; width: 3.7cqw; height: 3.7cqw; border: 0 solid #1d1f27; }
.f-qrf .k1 { left: 0; top: 0; border-left-width: .6cqw; border-top-width: .6cqw; border-top-left-radius: 1.4cqw; }
.f-qrf .k2 { right: 0; top: 0; border-right-width: .6cqw; border-top-width: .6cqw; border-top-right-radius: 1.4cqw; }
.f-qrf .k3 { left: 0; bottom: 0; border-left-width: .6cqw; border-bottom-width: .6cqw; border-bottom-left-radius: 1.4cqw; }
.f-qrf .k4 { right: 0; bottom: 0; border-right-width: .6cqw; border-bottom-width: .6cqw; border-bottom-right-radius: 1.4cqw; }
.b-mark { position: absolute; right: -16%; bottom: -30%; width: 72%; }
.b-brand { position: absolute; left: 8.2cqw; top: 7.7cqw; font-size: 7.5cqw; letter-spacing: .03em; display: flex; align-items: baseline; line-height: 1; }
.b-brand .b-eye { width: .7em; height: .7em; margin-inline: .03em; }
.b-web { position: absolute; right: 8.2cqw; top: 8.5cqw; font-size: 2.8cqw; letter-spacing: .16em; text-transform: uppercase; }
.b-codes { position: absolute; left: 8.2cqw; top: 21.6cqw; display: flex; gap: 7cqw; }
.b-k { font-size: 2.6cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.b-v { display: inline-block; font-size: 5.3cqw; letter-spacing: .2em; line-height: 1; margin-top: 1.3cqw; background: #fff; padding: 1.8cqw 2.6cqw 1.4cqw; border-radius: 1.4cqw; }
.b-blue { color: #3459ff; }
.b-reg { position: absolute; left: 8.2cqw; bottom: 7.5cqw; font-size: 2.9cqw; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; }
.b-reg b { font-weight: 400; font-size: 4cqw; letter-spacing: .04em; }
.c-layer { background: #d9dce6; }
/* logo switch */
.opt-logo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--line); cursor: pointer; }
.opt-logo .ol-t { display: grid; gap: 2px; }
.opt-logo .ol-t b { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.opt-logo .ol-t span { font-family: var(--body); font-size: .85rem; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--muted); }
.switch { position: relative; flex: none; width: 46px; height: 26px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #d6d9e4; transition: background 160ms; pointer-events: none; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 160ms; }
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--blue); outline-offset: 2px; }
.v-shadow { position: absolute; left: 50%; bottom: 13%; width: 56%; height: 9%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(20,30,90,.32), transparent); filter: blur(4px); pointer-events: none; }
.v-hint { position: absolute; left: 14px; bottom: 12px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.v-hint::before { content: ""; width: 22px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 5h20M5 1L1 5l4 4M17 1l4 4-4 4' fill='none' stroke='%235a5d6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.v-flip { position: absolute; right: 12px; bottom: 10px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.6em 1em; cursor: pointer; }
.v-flip:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .rig { will-change: auto; } }

/* logo upload */
.logo-up { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.logo-up[hidden] { display: none; }
.logo-up .btn.small { padding: 0.6em 1.1em; font-size: 0.72rem; }
.logo-name { font-size: 0.85rem; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.logo-name.ok { color: var(--ink); }
.logo-name.err { color: #c62828; }
.logo-clear { border: 0; background: none; padding: 0; font: inherit; font-size: 0.85rem; color: var(--blue); text-decoration: underline; cursor: pointer; }
.f-logo.has { padding: 0; }
.f-logo img { max-width: 26.3cqw; max-height: 15.2cqw; object-fit: contain; display: block; }
.f-logo .pdf { font: 700 2.5cqw/1.3 Inter, var(--body); letter-spacing: .08em; text-transform: uppercase; color: #5a5d6e; text-align: center; }



/* ---------- Services: Froogle's own work ---------- */
.services { padding-block: clamp(80px, 10vw, 150px); }
.svc-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.svc-head h2 { font-size: var(--step-3); line-height: 1.02; }
.svc-intro p { color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(16px, 2vw, 28px); }
.sc { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.sc-web { grid-column: span 8; }
.sc-google, .sc-brand, .sc-social, .sc-print { grid-column: span 4; }

.stage { position: relative; overflow: hidden; border-radius: 28px; container-type: inline-size; display: grid; place-items: center; min-height: 0; }
.sc figcaption { padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.sc h3 { font-size: 1.35rem; letter-spacing: 0.04em; line-height: 1.1; }
.sc figcaption p { color: var(--muted); margin: 10px 0 18px; max-width: 48ch; line-height: 1.6; }
.sc-link { margin-top: auto; font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sc-link:hover { color: var(--blue); }
.sc-web figcaption .btn { margin-top: auto; }

/* Shared mock pieces */
.fs-logo { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; color: var(--ink); }
.fs-logo .eye, .ig-av .eye, .p1 .eye, .t1 .eye, .t9 .eye, .tp-av .eye, .fs-m-eyes .eye { width: 0.62em; height: 0.62em; margin: 0 0.02em; flex: none; }
.mk-light .fs-logo { color: #fff; }
.mk-light .eye .ring, .mk-light .eye .pupil { fill: #fff; }
.mk-light .eye .hole { fill: var(--blue); }
.phone { background: #fff; border: 1.1cqw solid #18191c; border-radius: 3.6cqw; aspect-ratio: 9 / 19; overflow: hidden; container-type: inline-size; box-shadow: 0 3cqw 5cqw -1cqw rgba(10, 20, 80, 0.5); }

/* Website */
.stage-web { background: var(--blue); aspect-ratio: 16 / 10.4; }
.laptop { width: 74cqw; margin: 2cqw 0 0 -10cqw; filter: drop-shadow(0 3cqw 4cqw rgba(10, 20, 80, 0.45)); }
.screen { background: #fff; border: 1.3cqw solid #18191c; border-bottom-width: 1.8cqw; border-radius: 2cqw 2cqw 0.4cqw 0.4cqw; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; }
.laptop-base { width: 116%; margin-left: -8%; height: 1.8cqw; background: linear-gradient(#e4e6ec, #a9adb8); border-radius: 0 0 3cqw 3cqw; }
.fs { height: 100%; display: grid; grid-template-rows: auto 1fr; color: var(--ink); }
.fs-nav { display: flex; align-items: center; gap: 3.4cqw; padding: 3cqw 5cqw; font-family: var(--display); font-size: 1.6cqw; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid #ececf2; }
.fs-nav .fs-logo { font-size: 3.4cqw; margin-right: auto; }
.fs-pill { background: var(--ink); color: #fff; padding: 1.3cqw 2.6cqw; border-radius: 99px; }
.fs-hero { display: grid; grid-template-columns: 1.3fr 0.7fr; align-items: center; padding: 0 5cqw; gap: 3cqw; }
.fs-eyebrow { font-family: var(--display); font-size: 1.4cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fs-h { font-family: var(--display); text-transform: uppercase; font-size: 6.2cqw; line-height: 0.95; letter-spacing: 0.02em; margin: 2cqw 0 3.4cqw; }
.fs-h span { color: var(--blue); }
.fs-btns { display: flex; gap: 1.4cqw; }
.fs-btn { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.4cqw; background: var(--ink); color: #fff; padding: 1.6cqw 3cqw; border-radius: 99px; border: 0.25cqw solid var(--ink); white-space: nowrap; }
.fs-btn.ghost { background: transparent; color: var(--ink); }
.fs-stack { font-family: var(--display); font-size: 11cqw; line-height: 0.86; display: grid; gap: 0.06em; justify-items: start; }
.fs-eyes { display: flex; }
.fs-eyes .eye { width: 0.64em; height: 0.64em; }
.stage-web .phone { position: absolute; right: 7cqw; bottom: 6cqw; width: 18cqw; }
.fs-m { padding: 12cqw 8cqw; display: grid; gap: 8cqw; justify-items: start; }
.fs-m .fs-logo { font-size: 9cqw; }
.fs-m-h { font-family: var(--display); text-transform: uppercase; font-size: 10.5cqw; line-height: 0.95; }
.fs-m-h span { color: var(--blue); }
.fs-m .fs-btn { font-size: 4.6cqw; padding: 4cqw 6cqw; border-width: 0.8cqw; }
.fs-m-eyes { display: flex; font-size: 34cqw; margin-top: 4cqw; }

/* Google profile */
.stage-google { background: #e9edf5; }
.gmap { width: 80cqw; background: #fff; border-radius: 5cqw; overflow: hidden; box-shadow: 0 4cqw 8cqw -3cqw rgba(30, 40, 80, 0.3); font-family: Arial, Helvetica, sans-serif; font-size: 3.6cqw; color: #202124; margin-block: 8cqw; }
.gmap-pics { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr; gap: 1cqw; height: 26cqw; }
.gmap-pics span { display: grid; place-items: center; }
.gmap-pics .p1 { background: var(--blue); font-size: 12cqw; }
.gmap-pics .p1 { display: flex; justify-content: center; align-items: center; }
.gmap-pics .p2 { background: #fff; box-shadow: inset 0 0 0 1px #eceef3; }
.gmap-pics .p2 .fs-logo { font-size: 3.4cqw; }
.gmap-pics .p3 { background: var(--ink); }
.gmap-body { padding: 4.5cqw 5.5cqw 5cqw; display: grid; gap: 1.4cqw; }
.gmap-name { font-size: 5.6cqw; font-weight: 400; }
.gmuted { color: #70757a; }
.gmap-acts { display: flex; justify-content: space-between; margin: 3cqw 0 1cqw; }
.gmap-acts span { display: grid; justify-items: center; gap: 1.4cqw; color: #1a73e8; font-size: 2.9cqw; }
.gmap-acts i { width: 10cqw; height: 10cqw; border-radius: 50%; border: 1px solid #dadce0; display: grid; place-items: center; font-style: normal; font-size: 4.2cqw; }
.gmap-about { border-top: 1px solid #ebebeb; padding-top: 3cqw; color: #3c4043; line-height: 1.4; font-size: 3.3cqw; }
.gmap-ask { margin-top: 2cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; background: #f1f4fb; border-radius: 3cqw; padding: 3.2cqw 3.6cqw; }
.gmap-ask div { display: grid; gap: 0.6cqw; }
.gmap-ask b { font-size: 3.5cqw; }
.gmap-ask div span { font-size: 2.9cqw; color: #5f6368; }
.gmap-share { background: #1a73e8; color: #fff; border-radius: 99px; padding: 1.8cqw 4cqw; font-size: 3.2cqw; }

/* Branding */
.stage-brand { background: var(--blue); aspect-ratio: 1 / 1; }
.board { position: absolute; inset: 0; padding: 12cqw 10cqw; }
.board-logo { font-size: 12.5cqw; color: #fff; }
.board-row { display: flex; align-items: center; gap: 8cqw; margin-top: 9cqw; }
.board-sw { display: flex; }
.board-sw span { width: 11cqw; height: 11cqw; border-radius: 50%; border: 0.7cqw solid var(--blue); }
.board-sw span + span { margin-left: -2.6cqw; }
.board-type { display: flex; align-items: center; gap: 3cqw; color: #fff; }
.board-type b { font-family: var(--display); font-weight: 400; font-size: 11cqw; line-height: 1; }
.board-type span { font-size: 2.8cqw; line-height: 1.4; opacity: 0.85; }
.bizcard { position: absolute; right: 8cqw; bottom: 8cqw; width: 54cqw; aspect-ratio: 85 / 55; background: #fff; border-radius: 2cqw; padding: 5cqw; display: grid; align-content: space-between; color: var(--muted); font-size: 2.8cqw; transform: rotate(-6deg); box-shadow: 0 4cqw 6cqw -2cqw rgba(10, 20, 80, 0.5); }
.bizcard .fs-logo { font-size: 5cqw; margin-bottom: auto; }
.bizcard span:first-of-type { color: var(--ink); font-weight: 600; margin-top: 6cqw; }

/* Social */
.stage-social { background: var(--ink); aspect-ratio: 1 / 1; place-items: start center; }
.phone-ig { width: 56cqw; margin-top: 11cqw; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, 0.5); }
.ig { padding: 12cqw 5cqw 0; color: #1d1d1f; font-family: Arial, Helvetica, sans-serif; }
.ig-top { display: flex; align-items: center; gap: 5cqw; }
.ig-av { width: 22cqw; height: 22cqw; flex: none; border-radius: 50%; background: var(--blue); display: flex; justify-content: center; align-items: center; font-size: 7.5cqw; box-shadow: 0 0 0 1.2cqw #fff, 0 0 0 2.2cqw #e1306c; }
.ig-name { display: block; font-size: 5cqw; }
.ig-follow { display: inline-block; margin-top: 2.4cqw; background: #0095f6; color: #fff; font-weight: 700; font-size: 4cqw; padding: 1.6cqw 7cqw; border-radius: 2cqw; }
.ig-bio { font-size: 4.2cqw; line-height: 1.35; margin: 4.5cqw 0 5cqw; }
.ig-bio b { display: block; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-inline: -5cqw; }
.ig-grid span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); text-transform: uppercase; font-size: 4.6cqw; line-height: 1; letter-spacing: 0.04em; }
.ig-grid .t1 { background: var(--blue); font-size: 9cqw; }
.ig-grid .t2 { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #ececf2; font-size: 6cqw; }
.ig-grid .t3 { background: var(--ink); }
.ig-grid .t3 i { font-style: normal; color: #ffc83d; font-size: 3.6cqw; letter-spacing: 0.1em; }
.ig-grid .t4 { background: var(--blue); color: #fff; }
.ig-grid .t5 { background: repeating-linear-gradient(#f0f2ff 0 2.4cqw, #fff 2.4cqw 4.8cqw); }
.ig-grid .t6 { background: var(--ink); }
.ig-grid .t6 .fs-logo { font-size: 3.2cqw; }
.ig-grid .t7 { background: linear-gradient(135deg, #3459ff, #8fa3ff); }
.ig-grid .t8 { background: var(--mist); color: var(--blue); }
.ig-grid .t9 { background: var(--ink); font-size: 9cqw; }
.ig-grid .t9 .eye .hole { fill: var(--ink); }

/* Print */
.stage-print { background: #e6e9f5; aspect-ratio: 1 / 1; }
.poster { position: relative; z-index: 1; width: 52cqw; aspect-ratio: 1 / 1.41; margin-right: 24cqw; background: #fff; padding: 8cqw 4cqw; transform: rotate(-3deg); box-shadow: 0 4cqw 7cqw -2cqw rgba(30, 40, 80, 0.4); display: grid; justify-items: center; align-content: center; gap: 2.4cqw; }
.pr { font-family: var(--display); text-transform: uppercase; line-height: 1; letter-spacing: 0.14em; white-space: nowrap; }
.pr.r1 { font-size: 13cqw; letter-spacing: 0.06em; }
.pr.r2 { font-size: 6.4cqw; }
.pr.r3 { font-size: 4.4cqw; }
.pr.r4 { font-size: 3.4cqw; }
.pr.r5 { font-size: 1.7cqw; border-top: 0.4cqw solid #d9352b; padding-top: 2cqw; margin-top: 2cqw; }
.leaflet { position: absolute; right: 7cqw; top: 15cqw; width: 38cqw; aspect-ratio: 1 / 1.41; background: var(--blue); color: #fff; padding: 5cqw 4.5cqw; padding-left: 9cqw; transform: rotate(6deg); display: grid; align-content: space-between; box-shadow: 0 4cqw 7cqw -2cqw rgba(30, 40, 80, 0.4); }
.leaflet .fs-logo { font-size: 4.2cqw; justify-self: end; }
.leaflet p { font-family: var(--display); text-transform: uppercase; font-size: 4.6cqw; line-height: 1.05; }
.leaflet span { font-size: 2.3cqw; opacity: 0.85; }

@media (max-width: 980px) {
  .svc-head { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-web { grid-column: 1 / -1; }
  .sc-google, .sc-brand, .sc-social, .sc-print { grid-column: span 1; }
}
@media (max-width: 640px) {
  .showcase { grid-template-columns: 1fr; }
  .sc-google, .sc-brand, .sc-social, .sc-print { grid-column: auto; }
  .stage { border-radius: 22px; }
  .stage-web { aspect-ratio: 4 / 3.2; }
  .laptop { width: 86cqw; margin-left: -8cqw; }
  .stage-web .phone { width: 22cqw; right: 4cqw; }
}

.sc-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.flatcard .c-face { position: absolute; inset: 0; border-radius: 4.6% / 7.3%; }
/* ---------- How we work ---------- */
.how { background: var(--ink); color: var(--paper); padding-block: clamp(80px, 10vw, 140px); }
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.how-head h2 { font-size: var(--step-3); }
.how-head p { color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; max-width: 44ch; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.how-steps li { border-top: 2px solid rgba(255, 255, 255, 0.2); padding-top: 26px; display: grid; align-content: start; gap: 12px; }
.how-num { font-family: var(--display); font-size: clamp(3.4rem, 2.4rem + 3vw, 5.6rem); line-height: 0.85; color: #5c78ff; margin-bottom: 14px; }
.how-steps h3 { font-size: 1.25rem; letter-spacing: 0.04em; }
.how-steps p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; }
.how-cta { margin-top: clamp(40px, 5vw, 64px); }
.how .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.how .btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
@media (max-width: 980px) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .how-head { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .how-steps { grid-template-columns: 1fr; } }
.f-logo .f-flogo { width: auto; height: auto; border: 0; border-radius: 0; display: inline-flex; align-items: center; font-family: var(--display); font-size: 4.6cqw; letter-spacing: 0.04em; text-transform: none; color: var(--ink); }
.f-logo .f-flogo .eye { width: 0.62em; height: 0.62em; margin: 0 0.02em; }
.stage-brand .bizcard .fs-logo { color: var(--ink); }

/* ---------- Review cards: scroll-driven tap demo ---------- */
.tapshow { position: relative; background: radial-gradient(120% 80% at 75% 40%, #3f63ff 0%, #3459ff 40%, #2240d8 100%); color: #fff; }
.tapshow-pin { padding-block: clamp(80px, 9vw, 120px); }
@media (min-width: 861px) {
  .tapshow.is-pinned { height: 300vh; }
  .tapshow.is-pinned .tapshow-pin { position: sticky; top: 0; min-height: 100vh; display: grid; align-items: center; padding-block: 72px 40px; }
}
.tapshow-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.tapshow h2 { font-size: var(--step-3); }
.tapshow .lede { color: rgba(255, 255, 255, 0.86); margin: 20px 0 30px; max-width: 38ch; }
.tap-steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 4px; }
.tap-steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding: 10px 0; opacity: 0.45; transition: opacity 300ms ease; counter-increment: ts; }
.tap-steps li::before { content: counter(ts); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-family: var(--display); font-size: 0.8rem; transition: background 300ms ease, color 300ms ease; }
.tap-steps li b { font-weight: 600; font-size: 1.05rem; }
.tap-steps li span { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.tap-steps li.on { opacity: 1; }
.tap-steps li.on::before { background: #fff; color: var(--blue); }
.tap-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.tp { font: inherit; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 0.7em 1.1em; cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms; }
.tp:hover { border-color: #fff; }
.tp.is-on { background: #fff; color: var(--blue); border-color: #fff; }
.tp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tapshow .sc-buy .btn { background: var(--ink); border-color: var(--ink); }
.tapshow .sc-buy .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.tapshow .sc-buy span { color: rgba(255, 255, 255, 0.86); font-weight: 600; }

.tapstage { position: relative; aspect-ratio: 1 / 0.86; container-type: inline-size; }
/* Card: lying on the counter, vivid */
.tap-card { position: absolute; left: 1cqw; top: 38cqw; width: 70cqw; transform: rotate(-5deg); filter: drop-shadow(0 3cqw 4cqw rgba(8, 16, 90, 0.45)) drop-shadow(0 0.6cqw 0.8cqw rgba(8, 16, 90, 0.3)); }
.tap-card .flatcard { position: relative; width: 100%; aspect-ratio: 85.6 / 54; }
.tap-card .c-front { filter: saturate(1.3) contrast(1.06) brightness(1.03); }
.tap-gloss { position: absolute; inset: 0; border-radius: 4.6% / 7.3%; pointer-events: none; overflow: hidden; }
.tap-gloss::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: var(--gloss, -50%); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.05) 60%, transparent); transform: skewX(-12deg); }
.f-flogo { font-family: var(--display); color: var(--ink); display: inline-flex; align-items: center; letter-spacing: 0.04em; }
.tap-ring { position: absolute; left: 55cqw; top: 55cqw; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; border-radius: 50%; border: 0.5cqw solid rgba(255, 255, 255, 0.9); opacity: 0; transform: scale(0.3); pointer-events: none; z-index: 1; }

/* Phone */
.tphone { position: absolute; left: 0; top: 0; width: 30cqw; aspect-ratio: 9 / 19.5; border-radius: 5.2cqw; background: linear-gradient(145deg, #3a3b40, #121214 40%, #1e1f23); padding: 0.9cqw; z-index: 2; will-change: transform;
  box-shadow: 0 0 0 0.25cqw #4a4b50 inset, 0 5cqw 8cqw -2cqw rgba(8, 16, 90, 0.55), 0 1.4cqw 2.4cqw rgba(8, 16, 90, 0.3); }
.tphone::before, .tphone::after { content: ""; position: absolute; right: -0.45cqw; width: 0.55cqw; border-radius: 0.4cqw; background: #2a2b30; }
.tphone::before { top: 22%; height: 9%; }
.tphone::after { left: -0.45cqw; right: auto; top: 18%; height: 6%; }
.tscreen { position: relative; width: 100%; height: 100%; border-radius: 4.4cqw; overflow: hidden; background: #000; container-type: inline-size; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.tisland { position: absolute; top: 3.4cqw; left: 50%; width: 30cqw; height: 8.6cqw; margin-left: -15cqw; border-radius: 99px; background: #000; z-index: 5; }
.s-status { position: absolute; top: 4.2cqw; left: 0; right: 0; padding: 0 9cqw; display: flex; justify-content: space-between; align-items: center; font-size: 4.4cqw; color: #111; z-index: 4; }
.s-status b { font-weight: 600; }
.s-status i { width: 17cqw; height: 3.6cqw; border-radius: 1cqw; background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 38%, currentColor 38% 62%, transparent 62% 70%, currentColor 70%); opacity: 0.85; }
.s-status.light { color: #fff; }
/* Lock screen */
.s-lock { position: absolute; inset: 0; background: radial-gradient(130% 70% at 50% 0%, #6b84ff 0%, #3459ff 45%, #1b2a8f 100%); color: #fff; text-align: center; }
.s-date { margin-top: 24cqw; font-size: 5cqw; font-weight: 500; opacity: 0.9; }
.s-time { font-size: 24cqw; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.s-banner { position: absolute; left: 4cqw; right: 4cqw; top: 70cqw; display: flex; align-items: center; gap: 3.4cqw; padding: 3.6cqw; border-radius: 6cqw; background: rgba(250, 250, 252, 0.92); color: #111; text-align: left; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(-6cqw) scale(0.96); }
.s-app { width: 11cqw; height: 11cqw; flex: none; border-radius: 2.8cqw; background: linear-gradient(160deg, #4f6bff, #2240d8); display: grid; place-items: center; }
.s-app svg { width: 7cqw; height: 7cqw; }
.s-btext { display: grid; gap: 0.4cqw; font-size: 3.8cqw; }
.s-btext b { font-size: 4.2cqw; }
.s-btext span { color: #555; }
/* Review page */
.s-page { position: absolute; inset: 0; background: #fff; color: #202124; display: flex; flex-direction: column; padding: 15cqw 6cqw 7cqw; transform: translateY(100%); }
.s-head { display: flex; align-items: center; gap: 3cqw; font-size: 4.6cqw; color: #3c4043; padding-bottom: 4cqw; border-bottom: 1px solid #eceff3; }
.s-x { font-size: 4.6cqw; color: #5f6368; margin-right: 1cqw; }
.s-ico { width: 6.4cqw; height: 6.4cqw; object-fit: contain; }
.s-review { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 9cqw; }
.s-biz { font-size: 6.6cqw; font-weight: 600; color: #202124; }
.s-sub { font-size: 4cqw; color: #5f6368; margin-top: 1.4cqw; }
.s-stars { display: flex; gap: 2cqw; margin-top: 8cqw; }
.s-stars i { font-style: normal; font-size: 12.5cqw; line-height: 1; color: #dadce0; transition: color 180ms ease, transform 180ms ease; }
.s-stars i.on { color: var(--sc, #fbbc04); transform: scale(1.1); }
.s-word { font-size: 4cqw; color: #5f6368; margin-top: 3cqw; min-height: 1.3em; }
.s-field { margin-top: 7cqw; align-self: stretch; text-align: left; border: 1px solid #dadce0; border-radius: 3.4cqw; padding: 4cqw; font-size: 3.8cqw; color: #80868b; height: 36cqw; }
.s-follow { display: none; flex-direction: column; align-items: center; text-align: center; gap: 2cqw; padding-top: 12cqw; }
.s-av { width: 34cqw; height: 34cqw; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 11cqw; margin-bottom: 4cqw; }
.s-av .eye { width: 0.62em; height: 0.62em; margin: 0 0.02em; }
.s-handle { font-size: 4.2cqw; color: #5f6368; }
.tphone.follow .s-review { display: none; }
.tphone.follow .s-follow { display: flex; }
.s-post { margin-top: auto; text-align: center; font-weight: 600; font-size: 4.6cqw; padding: 3.8cqw; border-radius: 99px; background: #e8eaed; color: #9aa0a6; transition: background 200ms ease, color 200ms ease; }
.s-post.ready { background: var(--pc, #1a73e8); color: #fff; }

@media (max-width: 860px) {
  .tapshow-grid { grid-template-columns: 1fr; }
  .tapstage { max-width: 560px; width: 100%; justify-self: center; }
}
.tap-card { width: 76cqw; top: 32cqw; left: 0; }
.tphone { width: 27cqw; }
.s-lock { background: radial-gradient(130% 75% at 50% 0%, #3d52c9 0%, #1a2470 45%, #0b0f2e 100%); }
.tap-ring { left: 60cqw; top: 58cqw; }


/* ---------- Logo lockups (vector, from the brand artwork) ---------- */
.lg { display: block; overflow: visible; }
.lg .eye .ring, .lg .eye .pupil { fill: currentColor; }
.lg .eye .hole { fill: var(--hole, #fff); }
.brand { align-items: center; }
.brand .lg-word { height: 22px; width: auto; }
.site-header .brand, header .brand { color: var(--ink); }
.stack-logo { font-size: inherit; display: block; line-height: 0; }
.stack-logo .lg-stack { width: clamp(220px, 32vw, 440px); height: auto; color: var(--ink); }
@media (max-width: 860px) { .stack-logo .lg-stack { width: clamp(180px, 52vw, 300px); } }
.footer-mark { display: block; font-size: inherit; line-height: 0; color: var(--ink); --hole: var(--blue); }
.footer-mark .lg-two { width: min(100%, 980px); height: auto; }
.fs-logo .lg-word { height: 0.72em; width: auto; }
.fs-stack { font-size: inherit; display: block; line-height: 0; }
.fs-stack .lg-stack { width: 22cqw; height: auto; }
.f-flogo .lg-word { height: 3.4cqw; width: auto; }
.mk-light { --hole: var(--blue); }
.mk-light .fs-logo, .mk-light .lg { color: #fff; }
.ig-grid .t6 { --hole: var(--ink); }
.leaflet { --hole: var(--blue); }

/* Brand board: light, logo in ink */
.stage-brand { background: #fff; box-shadow: inset 0 0 0 1px #e6e8ef; }
.board { position: absolute; inset: 0; padding: 10cqw; }
.board-logo { width: 36cqw; color: var(--ink); line-height: 0; }
.board-logo .lg-stack { width: 100%; height: auto; }
.board-row { display: flex; align-items: center; gap: 6cqw; margin-top: 8cqw; }
.board-sw span { border-color: #fff; box-shadow: 0 0 0 1px #e6e8ef; }
.board-sw span[style*="#ffffff"] { box-shadow: inset 0 0 0 1px #d9dce6; }
.board-type, .board-type b { color: var(--ink); }
.board-type span { color: var(--muted); opacity: 1; }
.bizcard { background: var(--ink); color: rgba(255, 255, 255, 0.7); --hole: var(--ink); right: 7cqw; bottom: 7cqw; }
.stage-brand .bizcard .fs-logo { color: #fff; }
.bizcard span:first-of-type { color: #fff; }

/* Services: equal-height stages per row without overlapping captions */
.stage-google { aspect-ratio: 1 / 1.29; }
.tapshow { overflow-x: clip; }
.fs-h { font-size: 9cqw; }
.fs-m-h { font-size: 15cqw; }
.bizcard { width: 50cqw; bottom: 6cqw; right: 6cqw; }
.board-row { margin-top: 6cqw; }
.bizcard { width: 46cqw; bottom: 5cqw; right: 5cqw; }

/* Service buttons (all the same) and centred footer logo */
.sc figcaption .svc-btn { margin-top: auto; }
.svc-dialog .field textarea { min-height: 110px; }
.footer-mark { display: flex; justify-content: center; }

/* Website mock: realistic phone */
.mphone { position: absolute; right: 6cqw; bottom: 5cqw; width: 19cqw; aspect-ratio: 9 / 19.5; border-radius: 3.6cqw; padding: 0.6cqw;
  background: linear-gradient(145deg, #3a3b40, #121214 40%, #1e1f23);
  box-shadow: 0 0 0 0.18cqw #4a4b50 inset, 0 3cqw 5cqw -1cqw rgba(10, 20, 80, 0.55), 0 0.8cqw 1.6cqw rgba(10, 20, 80, 0.3); }
.mphone::before { content: ""; position: absolute; right: -0.3cqw; top: 22%; width: 0.35cqw; height: 9%; border-radius: 0.3cqw; background: #2a2b30; }
.mscreen { position: relative; width: 100%; height: 100%; border-radius: 3.1cqw; overflow: hidden; background: #fff; container-type: inline-size; color: var(--ink); }
.m-island { position: absolute; top: 3cqw; left: 50%; width: 28cqw; height: 8cqw; margin-left: -14cqw; border-radius: 99px; background: #000; z-index: 3; }
.m-status { position: absolute; top: 3.6cqw; left: 0; right: 0; padding: 0 8cqw; display: flex; justify-content: space-between; align-items: center; font: 600 4.2cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.m-status i { width: 15cqw; height: 3.4cqw; border-radius: 1cqw; background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 38%, currentColor 38% 62%, transparent 62% 70%, currentColor 70%); opacity: 0.85; }
.m-nav { display: flex; align-items: center; justify-content: space-between; padding: 16cqw 7cqw 5cqw; border-bottom: 1px solid #ececf2; }
.m-nav .fs-logo .lg-word { height: 5cqw; }
.m-burger { display: grid; gap: 1.6cqw; }
.m-burger i { display: block; width: 7cqw; height: 0.9cqw; border-radius: 1cqw; background: var(--ink); }
.m-hero { padding: 9cqw 7cqw 8cqw; display: grid; gap: 4cqw; justify-items: start; }
.m-eyebrow { font-family: var(--display); font-size: 2.8cqw; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.m-h { font-family: var(--display); text-transform: uppercase; font-size: 14cqw; line-height: 0.95; letter-spacing: 0.02em; }
.m-p { font-size: 4.3cqw; line-height: 1.45; color: var(--muted); }
.m-btn { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 3.4cqw; background: var(--ink); color: #fff; padding: 3.4cqw 6cqw; border-radius: 99px; margin-top: 2cqw; }
.m-blue { background: var(--blue); margin: 0 4cqw; border-radius: 5cqw; padding: 9cqw 0; display: flex; justify-content: center; --hole: var(--blue); }
.m-blue .fs-logo { color: #fff; }
.m-blue .lg-stack { width: 46cqw; height: auto; }
.m-home { position: absolute; bottom: 2.4cqw; left: 50%; width: 34cqw; height: 1.2cqw; margin-left: -17cqw; border-radius: 99px; background: rgba(0, 0, 0, 0.75); }
@media (max-width: 640px) { .mphone { width: 23cqw; right: 3cqw; } }
.m-next { padding: 9cqw 7cqw; display: grid; gap: 3cqw; }
.m-h2 { font-family: var(--display); text-transform: uppercase; font-size: 6.4cqw; line-height: 1.05; }
.m-line { display: block; height: 2.4cqw; border-radius: 2cqw; background: #eceef4; }
.m-line.short { width: 70%; }

/* ---------- Eye chart: bigger, with a focus effect ---------- */
.what-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.chart { padding: clamp(36px, 5vw, 72px) clamp(20px, 3.4vw, 52px); border-radius: 10px; cursor: default; }
.chart-row + .chart-row { margin-top: 0.5em; }
.chart-row:nth-child(1) .line { font-size: clamp(4.4rem, 11vw, 9.4rem); }
.chart-row:nth-child(2) .line { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
.chart-row:nth-child(3) .line { font-size: clamp(1.75rem, 3.7vw, 3.1rem); }
.chart-row:nth-child(4) .line { font-size: clamp(1.25rem, 2.6vw, 2.1rem); }
.chart-row:nth-child(5) .line { font-size: clamp(0.9rem, 1.7vw, 1.4rem); }
.chart-row:nth-child(6) .line { font-size: clamp(0.62rem, 1.05vw, 0.85rem); }
.chart-row .line { display: block; transform-origin: center; transition: transform 260ms cubic-bezier(.2,.7,.2,1), opacity 260ms ease, color 260ms ease; will-change: transform; }
.chart-row .note { transition: color 260ms ease; }
.chart.focusing .chart-row .line { opacity: var(--o, 1); transform: scale(var(--s, 1)); }
.chart.focusing .chart-row.is-focus .line { color: var(--blue); }
.chart.focusing .chart-row.is-focus .note { color: var(--ink); }
@media (max-width: 860px) {
  .chart-row:nth-child(1) .line { font-size: clamp(4rem, 22vw, 7rem); }
  .chart-row:nth-child(2) .line { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .chart-row:nth-child(3) .line { font-size: clamp(1.5rem, 7.4vw, 2.4rem); }
  .chart-row:nth-child(4) .line { font-size: clamp(1.1rem, 5.2vw, 1.7rem); }
  .chart-row:nth-child(5) .line { font-size: clamp(0.85rem, 3.6vw, 1.2rem); }
}
@media (prefers-reduced-motion: reduce) { .chart-row .line { transition: none; } }

/* ---------- SEO showcase ---------- */
.sc-seo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sc-seo figcaption { padding-top: 0; }
.sc-seo h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.stage-seo { background: #e9edf5; aspect-ratio: 16 / 9.5; display: flex; align-items: center; justify-content: center; gap: 3cqw; padding: 0 5cqw; }
.serp { flex: 1.5; background: #fff; border-radius: 2.4cqw; padding: 3cqw 3.2cqw; box-shadow: 0 2.4cqw 4cqw -1.6cqw rgba(30, 40, 80, 0.3); font-family: Arial, Helvetica, sans-serif; color: #202124; display: grid; gap: 2.4cqw; align-self: center; }
.serp-bar { display: flex; align-items: center; gap: 1.6cqw; border: 1px solid #dfe1e5; border-radius: 99px; padding: 1.2cqw 2cqw; font-size: 1.6cqw; }
.serp-g { font-weight: 700; font-size: 1.9cqw; color: #4285f4; }
.serp-q { flex: 1; color: #202124; }
.serp-s { color: #5f6368; font-size: 2cqw; }
.serp-res { display: grid; gap: 0.8cqw; }
.serp-res.is-top { padding: 1.6cqw; margin: 0 -1.6cqw; border-radius: 1.6cqw; background: #f5f7ff; box-shadow: inset 0 0 0 1px #dfe5ff; }
.serp-site { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.25cqw; }
.serp-site div { display: grid; }
.serp-site b { font-weight: 400; font-size: 1.4cqw; }
.serp-site span { color: #4d5156; }
.serp-fav { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.1cqw; flex: none; }
.serp-fav .eye { width: 0.62em; height: 0.62em; margin: 0 0.02em; }
.serp-title { font-size: 2cqw; color: #1a0dab; }
.serp-desc { font-size: 1.35cqw; line-height: 1.5; color: #4d5156; }
.serp-links { display: flex; gap: 1.2cqw; }
.serp-links span { font-size: 1.2cqw; color: #1a0dab; border: 1px solid #dfe1e5; border-radius: 99px; padding: 0.5cqw 1.2cqw; background: #fff; }
.ph { display: block; height: 1.2cqw; border-radius: 1cqw; background: #eceef3; }
.ph.w50 { width: 50%; } .ph.w60 { width: 60%; } .ph.w75 { width: 75%; } .ph.w85 { width: 85%; } .ph.w90 { width: 90%; }
.audit { flex: 1; background: #fff; border-radius: 2.4cqw; padding: 3cqw; box-shadow: 0 2.4cqw 4cqw -1.6cqw rgba(30, 40, 80, 0.3); display: grid; gap: 2cqw; align-self: center; }
.audit-h { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.5cqw; }
.audit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3cqw; font-size: 1.45cqw; color: #3c4043; }
.audit li { display: flex; align-items: center; gap: 1.2cqw; }
.audit li i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #e6f4ea; flex: none; position: relative; }
.audit li i::after { content: ""; position: absolute; left: 0.8cqw; top: 0.55cqw; width: 0.6cqw; height: 1.1cqw; border-right: 0.3cqw solid #188038; border-bottom: 0.3cqw solid #188038; transform: rotate(45deg); }
.audit-graph { border-top: 1px solid #eceef3; padding-top: 1.6cqw; display: grid; gap: 0.6cqw; }
.audit-graph svg { width: 100%; height: 7cqw; display: block; }
.audit-graph span { font-size: 1.2cqw; color: #5f6368; }
@media (max-width: 980px) {
  .sc-seo { grid-template-columns: 1fr; }
  .sc-seo figcaption { padding-top: 24px; }
}
@media (max-width: 640px) {
  .stage-seo { aspect-ratio: auto; flex-direction: column; padding: 6cqw; gap: 4cqw; }
  .serp, .audit { width: 100%; }
  .serp-bar { font-size: 3.4cqw; padding: 2.4cqw 4cqw; } .serp-g { font-size: 3.8cqw; } .serp-s { font-size: 4cqw; }
  .serp { padding: 5cqw; gap: 4cqw; border-radius: 4cqw; } .serp-res { gap: 1.6cqw; } .serp-res.is-top { padding: 3cqw; margin: 0 -3cqw; border-radius: 3cqw; }
  .serp-site { font-size: 2.8cqw; gap: 2.4cqw; } .serp-site b { font-size: 3.2cqw; } .serp-fav { width: 7cqw; height: 7cqw; font-size: 2.4cqw; }
  .serp-title { font-size: 4.4cqw; } .serp-desc { font-size: 3.1cqw; } .serp-links span { font-size: 2.8cqw; padding: 1cqw 2.6cqw; } .serp-links { gap: 2cqw; }
  .ph { height: 2.6cqw; }
  .audit { padding: 5cqw; gap: 4cqw; border-radius: 4cqw; } .audit-h { font-size: 3.2cqw; } .audit ul { font-size: 3.4cqw; gap: 2.6cqw; }
  .audit li i { width: 5cqw; height: 5cqw; } .audit li i::after { left: 1.7cqw; top: 1.1cqw; width: 1.3cqw; height: 2.3cqw; border-width: 0 0.6cqw 0.6cqw 0; }
  .audit-graph svg { height: 14cqw; } .audit-graph span { font-size: 2.8cqw; }
}
@media (min-width: 641px) {
  .sc-seo { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .stage-seo { aspect-ratio: 16 / 8.4; padding: 0 4cqw; gap: 2.4cqw; }
  .serp { flex: 1.6; }
}


/* ---------- Who we work with: two slow-moving rows of business types ---------- */
.who { padding-block: clamp(72px, 9vw, 130px); border-bottom: 0; overflow: hidden; }
.who-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.who-head h2 { font-size: var(--step-3); }
.who-head p { color: var(--muted); font-size: 1.1rem; max-width: 40ch; }
.ticker { display: grid; gap: clamp(6px, 1vw, 14px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk-row { overflow: hidden; }
.tk-track { display: flex; width: max-content; align-items: center; animation: tk 55s linear infinite; }
.tk-dup { display: flex; align-items: center; }
.tk-rev .tk-track { animation-direction: reverse; animation-duration: 60s; }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-item { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: 1.1; letter-spacing: 0.02em; white-space: nowrap; color: var(--ink); padding-inline: 0.28em; transition: color 200ms ease; }
.tk-outline .tk-item { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.tk-item:hover { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.tk-outline .tk-item:hover { color: var(--blue); }
.tk-eyes { display: inline-flex; align-items: center; font-size: clamp(2.6rem, 7vw, 6.4rem); padding-inline: 0.12em; }
.tk-eyes .eye { width: 0.34em; height: 0.34em; margin: 0 0.015em; }
.tk-eyes .eye .ring, .tk-eyes .eye .pupil { fill: var(--blue); }
@keyframes tk { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .who-head { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .tk-dup { display: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- SEO: keyword kicker in the H1, linked service titles, footer services ---------- */
.h1-kicker { display: block; font-size: 0.8rem; line-height: 1.4; margin-bottom: 18px; font-weight: 400; }
.sc-title { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
.sc-title:hover, .sc-title:focus-visible { background-size: 100% 2px; }
.footer-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 26px 0 8px; }
.footer-services a { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.footer-services a:hover, .footer-services a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Whole service card links to its page */
.sc { position: relative; }
.sc .sc-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sc .svc-btn { position: relative; z-index: 2; }
.sc:hover .svc-btn { background: var(--blue); border-color: var(--blue); }
.sc .stage { transition: transform .35s ease; }
.sc:hover .stage { transform: translateY(-4px); }

/* Platform picker with logos */
.pp { position: relative; flex: 1; min-width: 0; }
.pp-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.pp-btn { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); background: var(--mist); border: 2px solid transparent; border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer; transition: background 150ms, border-color 150ms; }
.pp-btn:hover { background: #e4e8ff; }
.pp-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pp.open .pp-btn { border-color: var(--blue); background: var(--paper); }
.pp-val { flex: 1; min-width: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-chev { width: 12px; height: 8px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23292929' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 150ms; }
.pp.open .pp-chev { transform: rotate(180deg); }
.pp-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(41,41,41,.08); overflow: hidden; }
.pp-ico img { width: 24px; height: 24px; object-fit: contain; display: block; }
.pp-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: var(--paper); border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(20, 30, 90, 0.35), 0 0 0 1px rgba(41,41,41,.08); max-height: 320px; overflow-y: auto; outline: none; }
.pp-list li { display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border-radius: 12px; cursor: pointer; font-size: 0.98rem; color: var(--ink); }
.pp-list li .pp-ico { width: 30px; height: 30px; }
.pp-list li .pp-ico img { width: 21px; height: 21px; }
.pp-list li.is-active { background: var(--mist); }
.pp-list li[aria-selected="true"] { font-weight: 600; }
.pp-list li[aria-selected="true"]::after { content: ""; margin-left: auto; width: 14px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%233459ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.plat-ico { width: 18px; height: 18px; border-radius: 50%; background: #fff; vertical-align: -4px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(41,41,41,.08); object-fit: contain; padding: 2px; box-sizing: border-box; }


/* ---------- Service pages ---------- */
body.sp .site-header { position: sticky; }
.sp-hero { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 100px); }
.sp-crumbs { display: flex; gap: 10px; font-size: 0.9rem; color: var(--muted); margin-bottom: clamp(24px, 4vw, 48px); }
.sp-crumbs a { color: var(--muted); }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sp-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem); line-height: 0.98; margin: 14px 0 22px; }
.sp-intro { font-size: 1.15rem; line-height: 1.65; color: var(--muted); max-width: 56ch; }
.sp-intro + .sp-intro { margin-top: 14px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sp-visual .stage { width: 100%; }
.sp-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; max-width: 520px; }
.sp-price { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; }
.sp-price b { font-weight: 600; }
.sp-amt { font-family: var(--display); font-size: 1.8rem; color: var(--blue); }
.sp-price span:last-child { color: var(--muted); font-size: 0.92rem; }
.sp-card-stage { background: radial-gradient(120% 90% at 30% 20%, #4566ff, #3459ff 50%, #2c4ff0); aspect-ratio: 4 / 3; }
.sp-card { width: 70cqw; transform: rotate(-6deg); filter: drop-shadow(0 4cqw 5cqw rgba(10, 20, 90, 0.5)); }
.sp-card .flatcard { position: relative; width: 100%; aspect-ratio: 85.6 / 54; }
.sp-card .c-front { filter: saturate(1.2); }
.sp-about-stage { background: #fff; box-shadow: inset 0 0 0 1px #e6e8ef; aspect-ratio: 1 / 1; }
.sp-about-logo { width: 54cqw; color: var(--ink); line-height: 0; }
.sp-about-logo .lg-stack { width: 100%; height: auto; }
.sp-body { background: #f6f7fb; padding-block: clamp(64px, 8vw, 110px); }
.sp-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.sp-body h2, .sp-faq h2, .sp-cta h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.05; margin-bottom: 22px; }
.sp-h2-gap { margin-top: 44px; }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 1.05rem; }
.sp-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.sp-list li::before { content: ""; width: 12px; height: 7px; margin-top: 0.45em; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.sp-who { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.sp-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; color: var(--muted); }
.sp-steps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--display); }
.sp-steps b { color: var(--ink); font-weight: 600; }
.sp-faq { padding-block: clamp(64px, 8vw, 110px); }
.sp-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-svc li { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sp-svc a { font-weight: 600; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.sp-svc span { color: var(--muted); font-size: 0.95rem; }
.sp-cta { padding-block: clamp(64px, 8vw, 110px); text-align: center; color: #fff; }
.sp-cta h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.sp-cta p { color: rgba(255, 255, 255, 0.85); margin: 0 auto 28px; max-width: 46ch; font-size: 1.1rem; }
.sp-cta .btn { background: var(--ink); border-color: var(--ink); }
.sp-others { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; }
.sp-others span { width: 100%; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); margin-bottom: 4px; }
.sp-other { color: #fff; text-decoration: none; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 0.55em 1.1em; font-size: 0.95rem; }
.sp-other:hover { background: #fff; color: var(--blue); }
@media (max-width: 860px) { .sp-hero-grid, .sp-body-grid { grid-template-columns: 1fr; } .sp-visual { order: -1; } }

/* ---------- Service page quote form ---------- */
#quote { scroll-margin-top: 64px; }
.sp-quote { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; text-align: left; }
.sp-quote-copy h2 { margin-bottom: 18px; }
.sp-cta .sp-quote-copy p { margin: 0 0 14px; max-width: 40ch; }
.sp-quote-mail a { color: #fff; }
.sp-form { background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; box-shadow: 0 30px 60px -30px rgba(10, 20, 90, 0.55); }
.sp-form .full, .sp-form-foot, .sp-form .form-status { grid-column: 1 / -1; }
.sp-form-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.sp-form-foot small { color: var(--muted); }
.sp-cta .sp-form .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.sp-form .form-status.error { background: #fff1f0; }
.sp-form .form-status a { color: var(--blue); }
@media (max-width: 860px) { .sp-quote { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .sp-form { grid-template-columns: 1fr; } }

/* ---------- Quote form, refined ---------- */
.sp-cta { text-align: left; }
.sp-cta .sp-quote-copy .eyebrow { color: rgba(255, 255, 255, 0.75); margin-bottom: 14px; }
.sp-quote { align-items: center; }
.sp-quote-copy h2 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); margin-bottom: 16px; }
.sp-next { list-style: none; margin: 28px 0 30px; padding: 0; display: grid; gap: 0; counter-reset: n; max-width: 380px; }
.sp-next li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.sp-next li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.sp-next li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.sp-next b { font-weight: 600; color: #fff; }
.sp-next span { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.sp-cta .sp-quote-mail { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.sp-form { gap: 18px 16px; padding: clamp(24px, 3.2vw, 40px); border-radius: 28px; }
.sp-form-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sp-form-head h3 { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-form-head span { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.sp-form .field { gap: 8px; }
.sp-form .field label { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.sp-form .field label .opt { font-weight: 400; color: var(--muted); }
.sp-form .field input, .sp-form .field textarea { width: 100%; box-sizing: border-box; background: #f4f6fb; border: 1.5px solid transparent; border-radius: 12px; padding: 13px 15px; font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s; }
.sp-form .field input { height: 50px; }
.sp-form .field textarea { min-height: 130px; resize: vertical; }
.sp-form .field input:hover, .sp-form .field textarea:hover { background: #eef1f9; }
.sp-form .field input:focus, .sp-form .field textarea:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(52, 89, 255, 0.14); }
.sp-form .field textarea::placeholder { color: #8a8f9c; }
.sp-form-foot { padding-top: 6px; }
.sp-form-foot small { font-size: 0.85rem; }
.sp-form .btn { padding-inline: 1.8em; }
.sp-cta .sp-others { justify-content: center; text-align: center; margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 520px) { .sp-form-foot { flex-direction: column-reverse; align-items: stretch; text-align: center; } .sp-form .btn { width: 100%; justify-content: center; } .sp-form-head span { display: none; } }