:root {
  --ink: #121722;
  --ink-soft: #4d5566;
  --paper: #fffdfb;
  --paper-soft: #f6f3ef;
  --line: rgba(18, 23, 34, 0.11);
  --brand: #c41656;
  --brand-dark: #8d0f3f;
  --mint: #2ccf98;
  --peach: #ff9b6a;
  --violet: #6758ff;
  --navy: #111827;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --shadow: 0 24px 70px rgba(32, 28, 42, 0.14);
  --shadow-soft: 0 16px 44px rgba(32, 28, 42, 0.09);
  --topbar-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(18, 23, 34, .2); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  z-index: 80;
  padding: 0 clamp(22px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,253,251,.93), rgba(255,253,251,.72) 70%, transparent);
  backdrop-filter: blur(10px);
}
.topbar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 11px; background: var(--brand); color: #fff;
  font: 800 27px/1 Georgia, serif; box-shadow: 0 10px 24px rgba(196,22,86,.26);
}
.brand__text { font-weight: 750; letter-spacing: -.04em; font-size: 21px; }
.brand__text span { color: var(--brand); }
.topbar__meta { display: flex; align-items: center; gap: 18px; }
.topbar__hint { color: var(--ink-soft); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.topbar__count { min-width: 68px; text-align: right; color: #89909c; font-size: 13px; }
.topbar__count strong { color: var(--ink); font-size: 16px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(18,23,34,.05); }
.progress span { display: block; width: 11.111%; height: 100%; background: linear-gradient(90deg, var(--brand), var(--peach)); transition: width .45s ease; }

.side-nav {
  position: fixed;
  left: clamp(12px, 1.8vw, 30px);
  top: 50%; transform: translateY(-50%);
  z-index: 75;
  display: flex; flex-direction: column; gap: 8px;
}
.side-nav__item {
  border: 0; background: transparent; padding: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; min-width: 28px;
}
.side-nav__item span { width: 6px; height: 6px; background: #bfc4cc; border-radius: 50%; transition: .25s ease; }
.side-nav__item b {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateX(-4px); transition: .25s ease;
  background: rgba(255,255,255,.88); padding: 5px 8px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08);
}
.side-nav__item:hover b, .side-nav__item.is-active b { opacity: 1; transform: translateX(0); }
.side-nav__item.is-active span { height: 24px; border-radius: 999px; background: var(--brand); }

.page-controls {
  position: fixed; z-index: 75; right: clamp(16px, 2vw, 34px); bottom: 24px;
  display: grid; grid-template-columns: 42px 42px; gap: 8px;
}
.page-controls button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(18,23,34,.12);
  background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(0,0,0,.08); cursor: pointer;
  display: grid; place-items: center; transition: .25s ease;
}
.page-controls button:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--brand); }
.page-controls button:first-child svg { transform: rotate(-90deg); }
.page-controls button:last-child svg { transform: rotate(90deg); }

.catalog-page {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: calc(var(--topbar-h) + 26px) clamp(26px, 6vw, 92px) 48px;
}
.page-shell { width: min(1240px, 100%); margin: 0 auto; position: relative; z-index: 2; }
.page-shell--wide { width: min(1370px, 100%); }

.eyebrow {
  margin: 0 0 18px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow span { display: inline-block; padding: 8px 12px; border: 1px solid rgba(196,22,86,.2); border-radius: 999px; margin-right: 7px; background: rgba(255,255,255,.65); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.052em; line-height: .98; }
h1 { font-size: clamp(47px, 6.8vw, 96px); margin-bottom: 26px; max-width: 820px; }
h2 { font-size: clamp(38px, 4.9vw, 72px); margin-bottom: 24px; }
h1 em, h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 500; color: var(--brand); }
.section-heading { max-width: 690px; }
.section-heading > p:last-child { color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.75; }
.section-heading--compact { max-width: 790px; }
.section-heading--compact h2 { font-size: clamp(36px, 4vw, 62px); }
.section-heading--compact > p:last-child { font-size: 16px; line-height: 1.6; max-width: 700px; }

.btn {
  border: 0; cursor: pointer; text-decoration: none; border-radius: 999px;
  padding: 15px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 750; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-3px); }
.btn--primary { background: var(--brand); color: white; box-shadow: 0 14px 34px rgba(196,22,86,.28); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: rgba(255,255,255,.66); color: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal--delay { transition-delay: .14s; }
.catalog-page.is-active .reveal { opacity: 1; transform: translateY(0); }

/* Cover */
.page-cover { background: radial-gradient(circle at 75% 30%, #fff0e8 0, transparent 34%), linear-gradient(135deg, #fffdf9 0%, #f6f4ff 52%, #fff3ee 100%); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(30px, 5vw, 80px); }
.hero-copy__lead { max-width: 730px; color: var(--ink-soft); font-size: clamp(17px, 1.55vw, 21px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-stats { display: flex; gap: 32px; margin-top: 48px; }
.hero-stats div { display: grid; gap: 4px; }
.hero-stats strong { font-size: 30px; letter-spacing: -.04em; }
.hero-stats span { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.hero-visual { min-height: 620px; display: grid; place-items: center; position: relative; }
.hero-visual__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(196,22,86,.22), rgba(103,88,255,.08) 55%, transparent 70%); filter: blur(12px); }
.phone { border: 8px solid #191c25; border-radius: 40px; overflow: hidden; background: #111; box-shadow: 0 40px 90px rgba(22,21,33,.24); position: relative; }
.phone--main { width: min(315px, 65vw); height: 610px; z-index: 4; transform: rotate(-1.8deg); }
.phone__speaker { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 74px; height: 18px; border-radius: 999px; background: #171922; z-index: 4; }
.phone__screen { height: 100%; overflow: hidden; background: #fff; }
.phone__screen img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; transition: opacity .35s ease; }
.phone__screen img.is-changing { opacity: .15; }
.phone--back { width: 210px; height: 430px; position: absolute; border-width: 6px; border-radius: 30px; opacity: .9; }
.phone--back img { width: 100%; height: auto; }
.phone--back-left { left: 0; transform: rotate(-11deg) translateY(38px); }
.phone--back-right { right: 0; transform: rotate(10deg) translateY(22px); }
.floating-chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 14px 38px rgba(30,29,44,.15); font-size: 12px; font-weight: 750; animation: floaty 3.8s ease-in-out infinite; }
.floating-chip svg { color: var(--brand); width: 20px; height: 20px; }
.floating-chip--call { left: 4%; top: 34%; }
.floating-chip--qr { right: 1%; bottom: 25%; animation-delay: -1.4s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .7; }
.orb--one { width: 260px; height: 260px; background: rgba(44,207,152,.12); left: -80px; bottom: 0; }
.orb--two { width: 160px; height: 160px; background: rgba(103,88,255,.12); right: 16%; top: 7%; }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; gap: 7px; color: #747b89; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 27px; background: linear-gradient(var(--brand), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position: absolute; width: 100%; height: 9px; background: var(--brand); top: -9px; left: 0; animation: cue 1.7s infinite; }
@keyframes cue { to { transform: translateY(36px); } }

/* Overview */
.page-overview { background: #f7f6f2; }
.overview-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.overview-stage { position: relative; min-height: 560px; }
.overview-card { position: absolute; width: 56%; min-height: 300px; padding: 34px; border-radius: 30px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.8); }
.overview-card--personal { left: 0; top: 10px; background: linear-gradient(145deg,#fff,#fff3ec); transform: rotate(-3deg); }
.overview-card--business { right: 0; bottom: 4px; background: linear-gradient(145deg,#161a24,#2a2142); color: #fff; transform: rotate(3deg); }
.overview-card__icon { width: 54px; height: 54px; border-radius: 17px; display:grid; place-items:center; background: rgba(196,22,86,.1); color: var(--brand); margin-bottom: 25px; }
.overview-card--business .overview-card__icon { background: rgba(255,255,255,.1); color: #ffb2ce; }
.overview-card__icon svg { width: 26px; height: 26px; }
.overview-card > span { text-transform: uppercase; font-size: 10px; letter-spacing: .14em; font-weight: 800; opacity: .7; }
.overview-card h3 { font-size: clamp(23px,2.1vw,32px); line-height: 1.15; margin: 13px 0 15px; letter-spacing: -.04em; }
.overview-card p { color: var(--ink-soft); line-height: 1.65; font-size: 14px; }
.overview-card--business p { color: rgba(255,255,255,.68); }
.link-card { position: absolute; z-index: 6; width: 72%; left: 14%; top: 44%; background: rgba(255,255,255,.95); border-radius: 20px; box-shadow: 0 20px 60px rgba(20,24,35,.2); overflow: hidden; }
.link-card__top { background: #eef0f4; padding: 10px 14px; font-size: 11px; color: #697180; display:flex; align-items:center; gap:8px; }
.link-card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.link-card__body { display:grid; grid-template-columns: 44px 1fr auto; gap:12px; align-items:center; padding: 16px; }
.mini-avatar { width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--violet));color:#fff;display:grid;place-items:center;font-weight:800; }
.link-card__body strong { display:block; font-size:14px; }
.link-card__body small { color:#7a8190; font-size:11px; }
.link-card__body > svg { color:var(--brand); width:22px;height:22px; }

/* Feature slides */
.page-features--connect { background: linear-gradient(145deg, #151925 0%, #261b34 100%); color: #fff; }
.page-features--connect .section-heading > p:last-child { color: rgba(255,255,255,.6); }
.page-features--connect .eyebrow { color: #ff8ab5; }
.feature-grid { display: grid; margin-top: 34px; }
.feature-grid--7 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feature-card { min-height: 185px; border-radius: 23px; padding: 23px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); display: flex; gap: 17px; transition: .3s ease; }
.feature-card:hover { transform: translateY(-7px); background: rgba(255,255,255,.09); border-color: rgba(255,138,181,.35); }
.feature-card__icon { flex: 0 0 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; color:#ff8ab5; background:rgba(196,22,86,.17); }
.feature-card__icon svg { width:22px;height:22px; }
.feature-card h3 { font-size: 17px; margin: 2px 0 9px; }
.feature-card p { color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.55; margin:0; }

.page-features--showcase { background: linear-gradient(135deg,#fff8f2,#f4f6ff); }
.showcase-layout { display: grid; grid-template-columns: .66fr 1.34fr; gap: clamp(26px,5vw,70px); align-items: center; margin-top: 24px; }
.showcase-phone { width: min(330px, 100%); height: 510px; margin: auto; border-radius: 34px; border: 8px solid #182028; padding: 0; background:#fff; box-shadow:var(--shadow); position:relative; overflow: visible; }
.showcase-phone__screen { height:100%; overflow:hidden; border-radius:25px; }
.showcase-phone__screen img { width:100%;height:auto; }
.showcase-phone__badge { position:absolute; right:-35px; top:24%; width:100px; padding:15px; border-radius:18px; background:#fff; box-shadow:var(--shadow-soft); display:grid; }
.showcase-phone__badge strong { font-size:27px; color:var(--brand); }
.showcase-phone__badge span { color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.showcase-phone__badge--gallery { right:auto; left:-45px; top:auto; bottom:18%; background:var(--ink); color:#fff; }
.showcase-phone__badge--gallery strong { color:var(--mint); }
.showcase-phone__badge--gallery span { color:rgba(255,255,255,.6); }
.showcase-features { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.showcase-features article { min-height:130px; background:rgba(255,255,255,.84); border:1px solid rgba(18,23,34,.08); border-radius:20px; padding:18px; display:flex; gap:13px; transition:.25s ease; }
.showcase-features article:hover { transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.showcase-features article > svg { flex:0 0 24px; width:24px;height:24px;color:var(--brand);margin-top:2px; }
.showcase-features h3 { font-size:14px;margin:0 0 7px; }
.showcase-features p { margin:0;color:var(--ink-soft);font-size:12px;line-height:1.5; }

/* Process */
.page-process { background: #f2eee7; }
.process-grid { display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(38px,7vw,100px);align-items:center; }
.process-grid .btn { margin-top:18px; }
.process-list { list-style:none;margin:0;padding:0;display:grid;gap:10px; }
.process-list li { display:grid;grid-template-columns:42px 54px 1fr;gap:18px;align-items:center;padding:19px 22px;border-radius:22px;background:rgba(255,255,255,.72);border:1px solid rgba(18,23,34,.07);transition:.28s ease; }
.process-list li:hover { transform:translateX(8px);background:#fff;box-shadow:var(--shadow-soft); }
.process-list li > span { color:#a1a6b0;font:700 12px/1 ui-monospace,monospace; }
.process-list__icon { width:54px;height:54px;border-radius:17px;background:#fff0f4;color:var(--brand);display:grid;place-items:center; }
.process-list__icon svg { width:24px;height:24px; }
.process-list h3 { margin:0 0 6px;font-size:18px; }
.process-list p { margin:0;color:var(--ink-soft);font-size:13px;line-height:1.55; }

/* Template slider */
.page-templates { background: linear-gradient(135deg,#121620,#20172c); color:#fff; }
.page-templates .section-heading > p:last-child { color:rgba(255,255,255,.56); }
.page-templates .eyebrow { color:#ff8ab5; }
.templates-heading { display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:24px; }
.template-filters { display:flex;gap:7px;padding:5px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); }
.template-filters button { border:0;background:transparent;color:rgba(255,255,255,.6);padding:9px 15px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:750; }
.template-filters button.is-active { color:#111;background:#fff; }
.template-slider { display:grid;grid-template-columns:46px 1fr 46px;gap:14px;align-items:center; }
.template-viewport { overflow:hidden;padding:8px 4px 12px; }
.template-track { display:flex;gap:18px;transition:transform .55s cubic-bezier(.2,.75,.2,1);will-change:transform; }
.template-card { flex:0 0 calc((100% - 36px)/3); min-width:0; cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:25px;padding:12px;transition:.3s ease; }
.template-card:hover { transform:translateY(-7px);border-color:rgba(255,138,181,.48);background:rgba(255,255,255,.1); }
.template-card__window { height:430px;border-radius:17px;overflow:hidden;background:#fff;position:relative; }
.template-card__window img { width:100%;height:auto;min-height:100%;transition:transform 7s linear;will-change:transform; }
.template-card:hover .template-card__window img { transform:translateY(calc(-100% + 430px)); }
.template-card__window::after { content:"Click to open full preview";position:absolute;inset:auto 12px 12px;padding:10px 12px;border-radius:12px;background:rgba(16,19,26,.82);color:#fff;font-size:11px;text-align:center;opacity:0;transform:translateY(5px);transition:.25s ease;backdrop-filter:blur(8px); }
.template-card:hover .template-card__window::after { opacity:1;transform:none; }
.template-card__meta { display:flex;align-items:center;justify-content:space-between;padding:13px 5px 4px; }
.template-card__meta strong { font-size:14px; }
.template-card__meta span { font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.48); }
.slider-arrow { width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.25s ease; }
.slider-arrow:hover { background:#fff;color:#111;transform:scale(1.05); }
.slider-arrow--prev svg { transform:rotate(180deg); }
.slider-status { display:flex;align-items:center;gap:18px;margin-top:10px; }
.slider-status__line { flex:1;height:2px;background:rgba(255,255,255,.1); }
.slider-status__line span { display:block;width:10%;height:100%;background:linear-gradient(90deg,var(--brand),#ffb08a);transition:width .45s ease; }
.slider-status p { margin:0;font-size:12px;color:rgba(255,255,255,.45); }
.slider-status strong { color:#fff;font-size:14px; }

/* Pricing */
.page-pricing { background: #fbfaf8; }
.pricing-heading { display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:20px; }
.reference-link { border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 15px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-soft);font-size:12px;font-weight:700;box-shadow:var(--shadow-soft); }
.reference-link svg { color:var(--brand); }
.pricing-slider { display:grid;grid-template-columns:46px 1fr 46px;gap:14px;align-items:center; }
.pricing-slider .slider-arrow { color:var(--ink);background:#fff;border-color:var(--line);box-shadow:var(--shadow-soft); }
.pricing-slider .slider-arrow:hover { color:#fff;background:var(--brand); }
.pricing-viewport { overflow:hidden;padding:5px 4px 10px; }
.pricing-track { display:flex;gap:17px;transition:transform .55s cubic-bezier(.2,.75,.2,1);will-change:transform; }
.price-card { flex:0 0 calc((100% - 34px)/3); min-width:0; height:530px;background:#fff;border:1px solid var(--line);border-radius:25px;padding:22px;display:flex;flex-direction:column;box-shadow:0 16px 44px rgba(24,25,37,.06);position:relative;overflow:hidden; }
.price-card.is-featured { border:2px solid var(--brand);box-shadow:0 20px 55px rgba(196,22,86,.16); }
.price-card__ribbon { position:absolute;right:-40px;top:18px;transform:rotate(38deg);background:var(--brand);color:#fff;padding:6px 46px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.price-card__top { display:flex;justify-content:space-between;gap:15px;align-items:start;padding-bottom:16px;border-bottom:1px solid var(--line); }
.price-card__title small { display:block;color:#9b9faa;font-size:10px;text-transform:uppercase;letter-spacing:.11em;margin-bottom:5px; }
.price-card__title h3 { margin:0;font-size:23px;letter-spacing:-.04em; }
.price-card__price { text-align:right; }
.price-card__price strong { display:block;font-size:34px;letter-spacing:-.055em;line-height:1; }
.price-card__price strong sup { font-size:13px;vertical-align:top;margin-right:2px; }
.price-card__price span { color:var(--ink-soft);font-size:10px; }
.price-card__tax { margin:12px 0 0;color:#777e8b;font-size:10px;line-height:1.45;min-height:29px; }
.price-card__daily { margin:12px 0 0;display:inline-flex;align-self:flex-start;border-radius:999px;background:#edfff8;color:#167e5f;font-size:10px;font-weight:800;padding:7px 10px; }
.price-card__features { list-style:none;padding:0 6px 0 0;margin:14px 0;display:grid;gap:8px;overflow:auto;overscroll-behavior:contain; }
.price-card__features li { display:grid;grid-template-columns:17px 1fr;gap:8px;font-size:11px;line-height:1.35;color:#4e5562; }
.price-card__features svg { color:var(--mint);width:15px;height:15px;stroke-width:2.5; }
.price-card__features li strong { color:var(--ink); }
.price-card .btn { margin-top:auto;padding:11px 16px;font-size:12px; }
.pricing-note { display:flex;justify-content:center;gap:26px;margin-top:10px;color:#6d7480;font-size:11px; }
.pricing-note span { display:flex;align-items:center;gap:6px; }
.pricing-note svg { color:var(--mint);stroke-width:2.6; }

/* Use cases */
.page-usecases { background: linear-gradient(145deg,#f8f3ee,#fff); }
.usecase-grid { display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:210px 210px;gap:14px;margin-top:28px; }
.usecase-card { position:relative;overflow:hidden;border-radius:26px;padding:24px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;transition:.3s ease; }
.usecase-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-soft); }
.usecase-card--large { grid-row:span 2;grid-column:span 2;background:linear-gradient(145deg,#181b25,#30223e);color:#fff; }
.usecase-card--wide { grid-column:span 2;background:linear-gradient(135deg,#fff0e7,#ffecf2); }
.usecase-card > span { font:700 11px/1 ui-monospace,monospace;color:#a1a5ae; }
.usecase-card p { margin:0 0 8px;color:var(--brand);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800; }
.usecase-card h3 { margin:0;max-width:440px;font-size:clamp(17px,1.8vw,27px);line-height:1.18;letter-spacing:-.035em; }
.usecase-card > svg { position:absolute;right:20px;top:20px;width:42px;height:42px;color:rgba(196,22,86,.16); }
.usecase-card--large > svg { width:120px;height:120px;right:30px;top:auto;bottom:24px;color:rgba(255,255,255,.08); }
.usecase-card--large p { color:#ff9cbe; }
.usecase-card--large h3 { font-size:clamp(31px,3.4vw,54px);max-width:560px; }

/* Contact */
.page-contact { background: linear-gradient(135deg,#151925,#24172f);color:#fff; }
.contact-grid { display:grid;grid-template-columns:1fr .78fr;gap:clamp(40px,7vw,110px);align-items:center; }
.contact-copy h2 { font-size:clamp(45px,5.5vw,78px); }
.contact-copy p { color:rgba(255,255,255,.62);font-size:17px;line-height:1.7;max-width:680px; }
.contact-copy .eyebrow { color:#ff8ab5; }
.contact-points { display:flex;flex-wrap:wrap;gap:15px 22px;margin:30px 0; }
.contact-points span { display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.74);font-size:12px; }
.contact-points svg { color:var(--mint);stroke-width:2.6; }
.contact-form { background:#fff;color:var(--ink);padding:28px;border-radius:28px;box-shadow:0 28px 80px rgba(0,0,0,.28);display:grid;gap:16px; }
.contact-form__head { display:grid;gap:4px;margin-bottom:4px; }
.contact-form__head span { font-size:22px;font-weight:800;letter-spacing:-.035em; }
.contact-form__head small { color:#858b96;line-height:1.45; }
.contact-form label { display:grid;gap:7px; }
.contact-form label > span { font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:#676e7a; }
.contact-form input,.contact-form select { width:100%;border:1px solid #dde0e5;border-radius:13px;padding:13px 14px;outline:none;background:#fafafa;color:var(--ink);transition:.2s ease; }
.contact-form input:focus,.contact-form select:focus { border-color:var(--brand);box-shadow:0 0 0 4px rgba(196,22,86,.08);background:#fff; }
.form-message { min-height:16px;margin:0;font-size:12px;color:#167e5f; }
.catalog-footer { position:absolute;left:clamp(26px,6vw,92px);right:clamp(26px,6vw,92px);bottom:16px;display:flex;justify-content:space-between;color:rgba(255,255,255,.38);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.contact-orb { position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(196,22,86,.18),transparent 68%);left:-130px;bottom:-180px; }

/* Dialogs */
dialog { padding:0;border:0;background:transparent; }
dialog::backdrop { background:rgba(8,10,15,.78);backdrop-filter:blur(8px); }
.preview-modal { width:min(1180px,94vw);height:min(92vh,900px);border-radius:24px;background:#11151e;color:#fff;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55); }
.preview-modal[open],.price-reference-modal[open] { animation:modalIn .25s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:none} }
.preview-modal__header,.price-reference-modal__head { height:70px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1); }
.preview-modal__header > div:first-child,.price-reference-modal__head > div:first-child { display:grid;gap:3px; }
.preview-modal__header small,.price-reference-modal__head small { color:rgba(255,255,255,.45);font-size:9px;text-transform:uppercase;letter-spacing:.13em; }
.preview-modal__header strong,.price-reference-modal__head strong { font-size:16px; }
.preview-modal__actions { display:flex;gap:7px; }
.preview-modal__actions button,.price-reference-modal__head button { width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer; }
.preview-modal__actions button:first-child svg { transform:rotate(180deg); }
.preview-modal__body { height:calc(100% - 70px);overflow:auto;background:#e9e9e9;padding:20px; }
.preview-modal__body img { width:min(720px,100%);height:auto;margin:0 auto;box-shadow:0 16px 60px rgba(0,0,0,.24); }
.price-reference-modal { width:min(840px,94vw);height:min(92vh,920px);border-radius:22px;background:#11151e;color:#fff;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55); }
.price-reference-modal__body { height:calc(100% - 70px);overflow:auto;background:#f5f5f5;padding:16px; }
.price-reference-modal__body img { margin:0 auto;width:min(766px,100%); }

@media (max-width: 1100px) {
  .side-nav { display:none; }
  .hero-grid { grid-template-columns:1fr .78fr; }
  .phone--back { display:none; }
  .feature-grid--7 { grid-template-columns:repeat(3,1fr); }
  .showcase-features { grid-template-columns:repeat(2,1fr); }
  .template-card { flex-basis:calc((100% - 18px)/2); }
  .price-card { flex-basis:calc((100% - 17px)/2); }
  .usecase-grid { grid-template-columns:repeat(3,1fr); }
  .usecase-card--large { grid-column:span 1; }
  .usecase-card--wide { grid-column:span 2; }
}

@media (max-width: 820px) {
  :root { --topbar-h: 64px; }
  html { scroll-snap-type:y proximity; }
  .topbar { padding:0 18px; }
  .topbar__hint { display:none; }
  .page-controls { display:none; }
  .catalog-page { min-height:100svh;height:auto;padding:calc(var(--topbar-h) + 24px) 20px 42px;overflow:visible; }
  h1 { font-size:clamp(44px,13vw,72px); }
  h2 { font-size:clamp(37px,10vw,56px); }
  .hero-grid,.overview-grid,.process-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-copy { padding-top:20px; }
  .hero-visual { min-height:540px; }
  .phone--main { height:510px;width:265px; }
  .hero-stats { margin-top:32px;gap:20px; }
  .scroll-cue { display:none; }
  .overview-stage { min-height:580px; }
  .feature-grid--7 { grid-template-columns:repeat(2,1fr); }
  .feature-card { min-height:175px; }
  .showcase-layout { grid-template-columns:1fr; }
  .showcase-phone { display:none; }
  .showcase-features { grid-template-columns:repeat(2,1fr); }
  .process-grid { gap:28px; }
  .templates-heading,.pricing-heading { align-items:start;flex-direction:column;gap:12px; }
  .template-slider,.pricing-slider { grid-template-columns:38px 1fr 38px;gap:7px; }
  .slider-arrow { width:38px;height:38px; }
  .template-card { flex-basis:100%; }
  .template-card__window { height:470px; }
  .template-card:hover .template-card__window img { transform:none; }
  .price-card { flex-basis:100%;height:560px; }
  .pricing-note { flex-wrap:wrap;gap:9px 18px; }
  .usecase-grid { grid-template-columns:1fr 1fr;grid-template-rows:auto; }
  .usecase-card,.usecase-card--large,.usecase-card--wide { grid-column:span 1;grid-row:span 1;min-height:210px; }
  .usecase-card--large { grid-column:span 2;min-height:300px; }
  .contact-grid { padding-bottom:38px; }
  .catalog-footer { position:static;margin-top:20px; }
}

@media (max-width: 560px) {
  .brand__text { font-size:18px; }
  .brand__mark { width:32px;height:32px;font-size:23px; }
  .topbar__count { min-width:auto; }
  .eyebrow { margin-bottom:13px;font-size:10px; }
  h1 { font-size:48px; }
  h2,.section-heading--compact h2 { font-size:39px; }
  .hero-copy__lead { font-size:16px; }
  .hero-actions .btn { width:100%; }
  .hero-stats { justify-content:space-between;gap:10px; }
  .hero-stats strong { font-size:25px; }
  .hero-stats span { font-size:9px; }
  .hero-visual { min-height:460px; }
  .phone--main { height:440px;width:230px; }
  .floating-chip { font-size:10px;padding:9px 11px; }
  .floating-chip--call { left:-4px; }
  .floating-chip--qr { right:-3px; }
  .overview-stage { min-height:600px; }
  .overview-card { width:86%;padding:25px; }
  .overview-card--personal { left:0; }
  .overview-card--business { right:0; }
  .link-card { width:94%;left:3%;top:46%; }
  .feature-grid--7,.showcase-features { grid-template-columns:1fr; }
  .feature-card { min-height:0; }
  .process-list li { grid-template-columns:34px 48px 1fr;padding:15px;gap:11px; }
  .process-list__icon { width:48px;height:48px; }
  .template-filters { width:100%;justify-content:space-between; }
  .template-filters button { flex:1;padding:8px 9px; }
  .template-slider,.pricing-slider { grid-template-columns:1fr; }
  .template-slider > .slider-arrow,.pricing-slider > .slider-arrow { display:none; }
  .template-viewport,.pricing-viewport { overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:15px; }
  .template-track,.pricing-track { transform:none!important; }
  .template-card,.price-card { scroll-snap-align:center;flex-basis:88%; }
  .pricing-note { justify-content:flex-start; }
  .usecase-grid { grid-template-columns:1fr; }
  .usecase-card,.usecase-card--large,.usecase-card--wide { grid-column:span 1; }
  .usecase-card--large { min-height:320px; }
  .contact-form { padding:20px; }
  .catalog-footer { flex-direction:column;gap:5px; }
}

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