/* Geologica (SIL OFL, assets/fonts/OFL.txt), self-hosted: one variable file per script covers weights 400-800 */
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/geologica-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/geologica-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/geologica-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --paper: #f2f3f6;
  --white: #ffffff;
  --ink: #14161b;
  --slate: #5d616b;
  --line: #dfe2e8;
  --signal: #2447f5;
  --signal-soft: #e5e9ff;
  --night: #0e1016;
  --night-2: #171a22;
  --night-line: #262a35;
  --night-text: #eef0f5;
  --night-muted: #8d92a2;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  font-family: "Geologica", system-ui, sans-serif;
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--signal); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* One check mark for every list: an SVG mask painted in the list's own colour */
.work li::before, .plan li::before, .vs-row:not(:first-child) .vs-site::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
section, footer { scroll-margin-top: 70px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; }
.sub { font-size: 18px; line-height: 1.6; color: var(--slate); margin-top: 18px; max-width: 560px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-signal { background: var(--signal); color: #fff; }
.btn-signal:hover { background: #1b3ae0; }
.btn-line { background: var(--white); border-color: #d3d7df; }
.btn-line:hover { border-color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* Glowing contour on the one main button: a rotating gradient clipped to a thin ring.
   Only transform is animated, so it stays on the compositor */
.glow {
  position: relative; display: inline-flex; padding: 2px; border-radius: 999px;
  overflow: hidden; isolation: isolate; background: var(--signal);
  transition: transform .35s var(--ease);
}
.glow::before {
  content: ""; position: absolute; inset: -200%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 65%, #b9c6ff 80%, #ffffff 85%, transparent 92%);
  animation: spin 3.2s linear infinite;
}
.glow .btn { position: relative; }
.glow:hover { transform: translateY(-2px); }
.glow:hover .btn { transform: none; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Header ---------- */
/* Fixed: full height at the top of the page, a slim bar once the visitor scrolls.
   The page keeps a constant 84px gap for it, so slimming never shifts the content */
body { padding-top: 84px; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease; }
.top.slim { background: rgba(242,243,246,.96); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(15,17,23,.35); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; transition: height .3s var(--ease); }
.slim .nav { height: 60px; }
.slim .logo-text span { display: none; }
.logo { display: flex; align-items: center; gap: 10px; }
/* The studio mark (assets/brand/tandemix-mark.svg, traced from the logo): wider than tall, so sized by height */
.logo-mark { display: block; width: auto; height: 32px; }
.logo-text { line-height: 1.05; }
.logo-text b { display: block; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.logo-text span { font-size: 12px; color: var(--slate); }
.nav-links { display: flex; gap: 30px; font-size: 15px; color: var(--slate); }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.lang { font-size: 14px; color: var(--slate); }
.lang b { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding-top: 24px; padding-bottom: 56px;
  min-height: min(820px, calc(100svh - 80px));
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 48px; align-items: center;
}
.hero::before {
  /* soft static light behind the devices, a picture, not a computation */
  content: ""; position: absolute; right: 0; top: -6%; width: 62%; height: 112%; z-index: -1;
  background: radial-gradient(closest-side, rgba(36,71,245,.14), transparent);
}
h1 { font-size: clamp(38px, 5vw, 70px); line-height: 1.04; letter-spacing: -0.045em; margin-bottom: 26px; }
/* "pentru restaurante" and "We build websites" are longer than the Russian lines: smaller so the column keeps its width */
:lang(ro) h1, :lang(en) h1 { font-size: clamp(34px, 4.3vw, 60px); }
.nowrap { white-space: nowrap; }
/* Rotating niche word: a column of words slides up inside a window one line tall.
   The window reaches 0.25em below the line so the Romanian comma under ț is not cut;
   the extra margin keeps the word on the same baseline. Each slot is still taller than the window,
   so deep letters like ф never peek into the neighbour's view */
.rotator {
  display: inline-block; vertical-align: bottom;
  height: 1.45em; line-height: 1.2em; overflow: hidden;
  margin-bottom: -0.35em; color: var(--signal);
}
.rotator span { display: block; height: 1.6em; animation: words 9s var(--ease) infinite; }
@keyframes words {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(-100%); }
  66%, 94%  { transform: translateY(-200%); }
  100%      { transform: translateY(-300%); }
}
.lead { font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 500px; margin-bottom: 34px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.checks { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 34px; font-size: 15px; }
.checks li { list-style: none; display: flex; align-items: center; gap: 8px; }
.checks li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--signal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%232447f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.checks b { font-weight: 600; }

/* ---------- Devices ---------- */
.devices { position: relative; padding-right: 9%; padding-bottom: 7%; }
.laptop { position: relative; }
.lid {
  background: #1d2029; border: 1px solid #2c303b; border-radius: 18px 18px 6px 6px;
  padding: 12px 12px 16px; box-shadow: 0 50px 90px -40px rgba(15,17,23,.7);
}
.screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0f1117; }
.screen img, .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.deck {
  position: relative; height: 16px; margin: 0 -7%;
  background: linear-gradient(#cdd0d8, #9ea1ab 70%, #73767f);
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
  border-radius: 0 0 10px 10px;
}
.deck::after { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #8c8f99; }
.phone {
  position: absolute; right: 0; bottom: 0; width: 28%;
  background: #15171d; border-radius: 26px; padding: 7px;
  box-shadow: 0 30px 60px -20px rgba(15,17,23,.6), 0 0 0 1px #2c303b;
}
.phone-screen { position: relative; aspect-ratio: 390 / 844; border-radius: 20px; overflow: hidden; background: #0f1117; }
/* Narrow island at the very top edge, in % of the screen: it stays above the first line of every site header (text starts at 2% of the height) */
.phone-screen::before { content: ""; position: absolute; z-index: 2; top: 0.45%; left: 50%; width: 16%; height: 1.5%; transform: translateX(-50%); border-radius: 99px; background: #15171d; }

/* Hero screens change in step with the niche word.
   The first shot never animates, so a screen is never empty; the middle shot stays fully
   visible until the last one has completely covered it, so the first never flashes between them */
.shot-b, .shot-c { position: absolute; inset: 0; opacity: 0; }
.hero .shot-b { animation: shot-b 9s ease infinite; }
.hero .shot-c { animation: shot-c 9s ease infinite; }
@keyframes shot-b { 0%, 30% { opacity: 0; } 34%, 67% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes shot-c { 0%, 62% { opacity: 0; } 66%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---------- Customer path: search, site, call ---------- */
.path { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 110px; padding-bottom: 110px; }
.path-head { max-width: 660px; margin-bottom: 64px; }
.path-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.path-steps::before { content: ""; position: absolute; left: 17%; right: 17%; top: 250px; border-top: 2px dashed #c3c8d2; }
.path-step { position: relative; }
.pfr {
  width: 250px; max-width: 100%; margin: 0 auto 30px; background: #15171d; border-radius: 34px; padding: 8px;
  box-shadow: 0 40px 70px -30px rgba(15,17,23,.45), 0 0 0 1px #2c303b;
}
.pfr-screen { position: relative; aspect-ratio: 390 / 780; border-radius: 27px; overflow: hidden; background: #e9ecf2; font-size: 12px; }
.pfr-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.path-cap { display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; max-width: 320px; margin: 0 auto; }
.path-cap i { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--signal); color: #fff; font-style: normal; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.path-cap b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.path-cap span { color: var(--slate); line-height: 1.55; }

/* Drawn search screen: a map with a pin and the business card under it */
.srch { background: #e9ecf2; height: 100%; padding: 30px 12px 12px; display: flex; flex-direction: column; gap: 9px; }
.srch-bar { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 10px 14px; font-size: 13px; box-shadow: 0 2px 10px rgba(20,22,27,.08); }
.srch-bar svg { width: 14px; height: 14px; color: var(--slate); flex: none; }
.srch-map {
  position: relative; height: 128px; border-radius: 14px; background-color: #dfe7d8;
  background-image: linear-gradient(90deg, transparent var(--r1), #fff var(--r1) calc(var(--r1) + 4%), transparent calc(var(--r1) + 4%)), linear-gradient(transparent var(--r2), #fff var(--r2) calc(var(--r2) + 4%), transparent calc(var(--r2) + 4%)), linear-gradient(var(--a), transparent 70%, #c9d8ec 70% 82%, transparent 82%);
}
.srch-map::after { content: ""; position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--signal); box-shadow: 0 0 0 4px rgba(36,71,245,.2); }
.srch-hit { background: #fff; border-radius: 14px; padding: 12px; border: 2px solid var(--signal); box-shadow: 0 12px 24px -14px rgba(36,71,245,.6); }
.srch-hit b { display: block; font-size: 14px; }
.srch-hit small { display: block; color: var(--slate); margin: 3px 0 10px; font-size: 11px; }
.srch-acts { display: flex; gap: 6px; }
.srch-acts span { flex: 1; text-align: center; padding: 5px 0; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.srch-acts span:first-child { background: var(--signal); border-color: var(--signal); color: #fff; }
.srch-ghost { background: #fff; border-radius: 14px; padding: 12px; display: grid; gap: 7px; }
.srch-ghost i { display: block; height: 8px; border-radius: 4px; background: #e3e6ec; }

/* Four niches play in step on all three phones: every layer shows for a quarter of the cycle */
.cy > * { position: absolute; inset: 0; animation: cyc 12s linear infinite; }
/* All three phones run this same keyframe, so they always switch at the same instant:
   the current layer is gone before the next appears, like a page loading */
.cy > *:nth-child(2) { animation-delay: -9s; }
.cy > *:nth-child(3) { animation-delay: -6s; }
.cy > *:nth-child(4) { animation-delay: -3s; }
.cy > *:not(:first-child) { opacity: 0; visibility: hidden; }
@keyframes cyc { 0% { opacity: 0; visibility: visible; } 2%, 23% { opacity: 1; } 25% { opacity: 0; visibility: visible; } 25.01%, 100% { opacity: 0; visibility: hidden; } }
.pfr-screen.dark { background: #0f1117; }
.lay img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Drawn auto-service site for the second phone */
.mk { height: 100%; background: #f4f4f2; color: #16181d; display: flex; flex-direction: column; }
.mk-top { display: flex; justify-content: space-between; align-items: center; padding: 26px 14px 10px; background: #16181d; color: #fff; }
.mk-top b { font-size: 12px; letter-spacing: .08em; }
.mk-top i { width: 16px; height: 2px; background: #f5a524; box-shadow: 0 5px 0 #f5a524, 0 -5px 0 #f5a524; }
.mk-hero { padding: 22px 14px; background: linear-gradient(135deg, #23262e, #3a3f4b); color: #fff; }
.mk-hero b { display: block; font-size: 19px; line-height: 1.15; margin-bottom: 6px; }
.mk-hero span { font-size: 11px; color: #c9ccd4; }
.mk-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mk-body > b { font-size: 13px; }
.mk-slots { display: flex; gap: 6px; }
.mk-slots span { flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; background: #fff; border: 1px solid #e1e2e6; font-weight: 600; }
.mk-slots .on { background: #f5a524; border-color: #f5a524; }
.mk-list { list-style: none; background: #fff; border-radius: 10px; padding: 2px 10px; }
.mk-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.mk-list li:last-child { border-bottom: 0; }
.mk-list em { font-style: normal; font-weight: 700; }
.mk-btn { margin-top: auto; text-align: center; padding: 11px; border-radius: 10px; background: #f5a524; font-weight: 700; font-size: 13px; }

/* Drawn call screen; the green button rings with a transform/opacity pulse */
.call { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 16px 36px; color: #fff; background: linear-gradient(#1c2647, #0e1016); }
.who { position: relative; width: 100%; height: 150px; }
.who::before { content: ""; position: absolute; top: 0; left: 50%; width: 78px; height: 78px; margin-left: -39px; border-radius: 50%; background: var(--signal); }
.who > div { display: flex; flex-direction: column; align-items: center; }
.call-av { width: 78px; height: 78px; display: grid; place-items: center; font-size: 30px; font-weight: 800; margin-bottom: 16px; }
.call b { font-size: 20px; letter-spacing: -0.01em; }
.call small { color: #9aa3c0; margin-top: 6px; font-size: 13px; }
.call-btns { margin-top: auto; display: flex; gap: 48px; }
.call-btns span { position: relative; isolation: isolate; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #e5484d; }
.call-btns span:first-child svg { transform: rotate(135deg); }
.call-btns span + span { background: #1fbf6a; }
.call-btns span + span::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1fbf6a; z-index: -1; animation: ring 1.6s ease-out infinite; }
.call-btns svg { width: 24px; height: 24px; color: #fff; }
@keyframes ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.8); opacity: 0; } }

.path-more { list-style: none; margin-top: 76px; padding-top: 36px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.path-more svg { width: 26px; height: 26px; color: var(--signal); }
.path-more b { display: block; font-size: 17px; margin: 12px 0 6px; }
.path-more span { color: var(--slate); line-height: 1.5; font-size: 15px; }

/* ---------- Works (dark) ---------- */
.works { background: var(--night); color: var(--night-text); padding-top: 120px; padding-bottom: 140px; position: relative; overflow: hidden; isolation: isolate; }
.works::before {
  content: ""; position: absolute; left: 50%; top: 6%; width: 1100px; height: 900px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(36,71,245,.24), transparent);
}
.works .sub { color: var(--night-muted); }
.works-head { margin-bottom: 96px; }
.work { display: grid; grid-template-columns: 1.45fr 1fr; gap: 72px; align-items: center; margin-bottom: 140px; }
.work:last-child { margin-bottom: 0; }
.work.flip { grid-template-columns: 1fr 1.45fr; }
.work.flip .devices { order: 2; }
.works .deck { background: linear-gradient(#3b3f4b, #2a2d36 70%, #1c1e25); }
.works .deck::after { background: #15171d; }
.works .phone { box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px #2c303b; }
.work h3 { font-size: 34px; line-height: 1.1; margin-bottom: 8px; }
.niche { display: block; font-size: 15px; font-weight: 500; color: #93a5ff; margin-bottom: 18px; }
.work p { color: var(--night-muted); line-height: 1.6; font-size: 17px; margin-bottom: 22px; }
.work ul { list-style: none; margin-bottom: 28px; border-top: 1px solid var(--night-line); }
.work li { padding: 12px 0; border-bottom: 1px solid var(--night-line); display: flex; gap: 12px; }
.work li::before { color: #93a5ff; }
.work .btn-line { background: transparent; border-color: #3a3f4c; color: var(--night-text); }
.work .btn-line:hover { border-color: var(--night-text); }

/* Scroll-driven entrance: transform only, so a half-played animation never leaves anything faded */
@supports (animation-timeline: view()) {
  .works .laptop { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .works .phone { animation: lift-more linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}
@keyframes lift { from { transform: translateY(100px) scale(.95); } to { transform: none; } }
@keyframes lift-more { from { transform: translateY(180px); } to { transform: none; } }

/* ---------- Demo sites by niche ---------- */
.demos { position: relative; isolation: isolate; overflow-x: clip; padding-top: 10px; padding-bottom: 10px; color: var(--night-text); background: var(--night); }
/* The light half starts exactly where the coloured picture of the first card row ends (230px, the card has no border),
   so the background seam and the seam inside the cards form one straight line */
.demo-grid { position: relative; }
.demo-grid::before { content: ""; position: absolute; z-index: -1; top: 230px; bottom: -10px; left: 50%; width: 100vw; margin-left: -50vw; background: var(--paper); }
.demos .sub { color: var(--night-muted); }
.demos-head { max-width: 680px; margin-bottom: 48px; }
.demo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.demo {
  /* No white fill or light border behind the picture: either one shows as a white arc in the rounded top corners.
     Only the text half is white; a soft shadow separates the card on the light background */
  display: flex; flex-direction: column; color: var(--ink); border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 40px -30px rgba(15,17,23,.4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s ease;
}
.demo:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 30px 50px -28px rgba(15,17,23,.45); }
/* each niche paints its own backdrop; the phone with a real screenshot of the demo rises a little on hover */
.demo-pic { position: relative; height: 230px; background: var(--tint); overflow: hidden; }
.demo-pic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 85%, rgba(255,255,255,.18), transparent); }
.demo-phone {
  position: absolute; left: 50%; top: 34px; width: 128px; margin-left: -64px; padding: 5px; border-radius: 22px; background: #111318;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.6); transition: transform .45s var(--ease);
}
.demo:hover .demo-phone { transform: translateY(-10px); }
.demo-screen { height: 250px; border-radius: 17px; overflow: hidden; background: #15171c; }
.demo-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo-text { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; background: var(--white); }
.demo-text h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; }
.demo-text p { color: var(--slate); font-size: 15px; line-height: 1.45; margin-bottom: 18px; }
.demo-link { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--signal); }
@media (max-width: 1180px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Instagram vs site ---------- */
.versus { padding-top: 120px; padding-bottom: 10px; }
.versus-head { max-width: 680px; margin-bottom: 48px; }
.vs { background: var(--white); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
.vs-row > * { padding: 20px 28px; border-top: 1px solid var(--line); display: flex; gap: 10px; line-height: 1.45; }
.vs-row:first-child > * { border-top: 0; font-weight: 700; font-size: 17px; padding-top: 26px; }
.vs-q { font-weight: 600; }
.vs-ig { color: var(--slate); }
.vs-site { background: #f6f7ff; font-weight: 600; }
.vs-row:first-child .vs-site { color: var(--signal); }
.vs-row:not(:first-child) .vs-ig::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: #a3a8b4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vs-row:not(:first-child) .vs-site::before { color: var(--signal); }
.vs-l { display: none; font-style: normal; font-weight: 700; }

/* ---------- Prices ---------- */
.prices { padding-top: 130px; padding-bottom: 60px; }
.prices-head { margin-bottom: 56px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.plan { padding: 38px 34px 34px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan.main { background: var(--ink); color: #fff; border-left-color: var(--ink); }
.plan-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.plan-for { color: var(--slate); margin-top: 8px; line-height: 1.5; min-height: 48px; }
.plan.main .plan-for { color: #a9adb8; }
.price { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; margin: 26px 0 4px; }
.price small { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--slate); margin-right: 4px; }
.plan.main .price small { color: #a9adb8; }
.term { font-size: 14px; color: var(--slate); margin-bottom: 26px; }
.plan.main .term { color: #a9adb8; }
.plan ul { list-style: none; margin-bottom: 32px; flex: 1; }
.plan li { padding: 9px 0; display: flex; gap: 10px; line-height: 1.45; }
.plan li::before { color: var(--signal); }
.plan.main li::before { color: #93a5ff; }
.plan .btn { width: 100%; }
.plan.main .btn-signal { background: #fff; color: var(--ink); }
.plans-note { margin-top: 18px; color: var(--slate); font-size: 15px; }
.addons {
  margin-top: 20px; border: 1px dashed #c3c8d2; border-radius: 24px; padding: 28px 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: center;
}
.addons b { display: block; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 6px; }
.addons p { color: var(--slate); line-height: 1.55; }
.addon-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.addon-tags li { font-size: 14px; background: var(--white); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; }

/* ---------- Process ---------- */
.process { padding-top: 120px; padding-bottom: 130px; background: var(--night); color: var(--night-text); }
.process .sub { color: var(--night-muted); }
.process-head { margin-bottom: 56px; }
/* A week laid out on a day axis: each stage spans the days it takes */
.week { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 10px; }
.week-day { font-size: 13px; font-weight: 600; color: var(--night-muted); padding-bottom: 12px; border-bottom: 2px solid var(--night-text); }
.seg { margin-top: 14px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 20px; padding: 22px 20px; min-height: 190px; display: flex; flex-direction: column; }
.seg b { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.seg > span { color: var(--night-muted); line-height: 1.5; font-size: 15px; }
.seg small { margin-top: auto; padding-top: 16px; font-size: 14px; line-height: 1.4; color: var(--night-text); }
.seg small em { font-style: normal; color: #93a5ff; font-weight: 600; }
.seg.launch { background: var(--signal); border-color: var(--signal); color: #fff; }
.seg.launch > span { color: #dbe2ff; }
.seg.launch small, .seg.launch small em { color: #fff; }
.s1 { grid-column: 1 / 2; } .s2 { grid-column: 2 / 4; } .s3 { grid-column: 4 / 7; } .s4 { grid-column: 7 / 8; }
.s1, .s4 { padding-left: 16px; padding-right: 16px; }
.week-note { margin-top: 18px; color: var(--night-muted); font-size: 15px; }
.promise {
  margin-top: 48px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 24px; padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.promise b { font-size: 21px; letter-spacing: -0.02em; }
.promise span { color: var(--night-muted); display: block; margin-top: 6px; }

/* ---------- About ---------- */
.about { padding-top: 120px; padding-bottom: 120px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.about-card { position: relative; display: grid; place-items: center; min-height: 380px; }
.about-card::before { content: ""; position: absolute; inset: 8% 4%; z-index: -1; background: radial-gradient(closest-side, rgba(36,71,245,.16), transparent); }
.bcard {
  position: relative; grid-area: 1 / 1; width: min(380px, 100%); aspect-ratio: 1.7; padding: 28px; border-radius: 22px; background: var(--white);
  display: flex; flex-direction: column; transform: rotate(-4deg);
  box-shadow: 0 40px 70px -30px rgba(15,17,23,.35), 0 0 0 1px var(--line);
}
/* The blue card behind is a sibling in the same grid cell: a pseudo-element would paint over the rotated card */
.bcard-back { grid-area: 1 / 1; width: min(380px, 100%); aspect-ratio: 1.7; border-radius: 22px; background: var(--signal); transform: rotate(3deg) translate(12px, 10px); }
.bcard p { margin-top: 8px; color: var(--slate); font-size: 14px; }
.bcard ul { list-style: none; margin-top: auto; display: grid; gap: 7px; font-size: 14px; font-weight: 500; }
.bcard li { display: flex; align-items: center; gap: 10px; }
.bcard svg { width: 16px; height: 16px; color: var(--signal); flex: none; }
.about .sub + .sub { margin-top: 14px; }
.about-btn { margin-top: 30px; }

/* ---------- FAQ ---------- */
.faq { padding-top: 40px; padding-bottom: 130px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
/* sticks just below the fixed header: 60px slim bar + 12px, the heading letters start ~7px under it */
.faq .head { position: sticky; top: 72px; }
.qa { border-top: 2px solid var(--ink); }
details { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -9px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
details p { color: var(--slate); line-height: 1.65; padding-bottom: 24px; max-width: 600px; }

/* ---------- Final CTA ---------- */
.final { background: var(--night); color: var(--night-text); padding-top: 120px; padding-bottom: 50px; position: relative; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 1000px; height: 640px; transform: translateX(-50%); z-index: -1; background: radial-gradient(closest-side, rgba(36,71,245,.32), transparent); }
.final-main { text-align: center; }
.final h2 { font-size: clamp(36px, 5vw, 64px); }
.final .sub { color: var(--night-muted); margin: 18px auto 38px; }
.final .ctas { justify-content: center; margin-bottom: 110px; }
.final .btn-line { background: transparent; border-color: #3a3f4c; color: var(--night-text); }
.final .btn-line:hover { border-color: var(--night-text); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; border-top: 1px solid var(--night-line); padding-top: 36px; font-size: 15px; color: var(--night-muted); }
.foot b { display: block; color: var(--night-text); font-weight: 600; margin-bottom: 12px; }
.foot a { display: block; padding: 3px 0; transition: color .2s ease; }
.foot a:hover { color: var(--night-text); }
.copy { margin-top: 40px; font-size: 13px; color: var(--night-muted); }
.trust { list-style: none; margin-top: 18px; display: grid; gap: 8px; }
.trust li { display: flex; gap: 10px; line-height: 1.45; }
.trust li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #93a5ff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1000px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-links { display: none; }
  h2 br { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 12px; gap: 32px; min-height: 0; }
  .hero::before { width: 100%; top: 45%; height: 55%; }
  .faq { grid-template-columns: 1fr; gap: 36px; padding-top: 90px; padding-bottom: 90px; }
  .faq .head { position: static; }
  .path { padding-top: 80px; padding-bottom: 80px; }
  .path-head { margin-bottom: 44px; }
  .path-steps { grid-template-columns: 1fr; gap: 56px; }
  .path-steps::before { display: none; }
  .path-more { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .versus { padding-top: 90px; }
  .demos { padding-top: 0; }
  .demo-grid { grid-template-columns: repeat(3, 1fr); }
  .vs-row { grid-template-columns: 1fr; }
  .vs-row:first-child { display: none; }
  .vs-row > * { padding: 10px 20px; font-size: 15px; border-top: 0; }
  .vs-row .vs-q { padding-top: 18px; padding-bottom: 6px; border-top: 1px solid var(--line); }
  .vs-row:nth-child(2) .vs-q { border-top: 0; }
  .vs-site { padding-bottom: 14px; }
  .vs-l { display: inline; }
  .week { grid-template-columns: 1fr; }
  .week-day { display: none; }
  .s1, .s2, .s3, .s4 { grid-column: auto; }
  .seg { min-height: 0; }
  .seg::before { content: attr(data-days); font-size: 13px; font-weight: 600; color: var(--signal); margin-bottom: 6px; }
  .seg.launch::before { color: #dbe2ff; }
  .works { padding-top: 90px; padding-bottom: 100px; }
  .works-head { margin-bottom: 60px; }
  .work, .work.flip { grid-template-columns: 1fr; gap: 36px; margin-bottom: 90px; }
  .work.flip .devices { order: 0; }
  .prices { padding-top: 90px; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan-for { min-height: 0; }
  .addons { grid-template-columns: 1fr; }
  .process { padding-top: 80px; padding-bottom: 90px; }
  .faq { padding-top: 0; }
  .about { grid-template-columns: 1fr; gap: 32px; padding-top: 80px; padding-bottom: 90px; }
  .about-card { min-height: 0; padding: 30px 10px; }
  .bcard { padding: 22px; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .nav .lang, .logo-text span { display: none; }
  h1 { margin-bottom: 18px; }
  .lead { font-size: 17px; margin-bottom: 24px; }
  .path-more { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .demo:first-child { grid-column: 1 / -1; }
  .demo-text { padding: 16px; }
  .demo-text h3 { font-size: 17px; }
  .checks { margin-top: 24px; gap: 10px 18px; font-size: 14px; }
  .foot { grid-template-columns: 1fr; }
  .phone { border-radius: 18px; padding: 5px; }
  .phone-screen { border-radius: 14px; }
}

/* ---------- Language switch ---------- */
.lang a { transition: color .2s ease; }
.lang a:hover { color: var(--ink); }