/* PayGate website. Plain CSS, no build step.
   Look: product-led and dark at the top (midnight, violet → cyan → mint gradient, soft glows), clean white
   sections below. Sora for headlines, Inter for text; both self-hosted in fonts/ (SIL Open Font License). */
@font-face { font-family: Sora; src: url("fonts/sora.woff2?v=fa26406e") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/inter.woff2?v=3100e775") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --night: #07070f;
  --night-2: #0e0f1e;
  --night-3: #16172b;
  --night-line: rgba(255, 255, 255, 0.09);
  --night-text: #c9cbe0;
  --night-muted: #8a8ca8;
  --bg: #ffffff;
  --soft: #f5f6fb;
  --soft-2: #eceef6;
  --line: #e5e7f0;
  --text: #0b0c1a;
  --text-2: #464962;
  --muted: #777a94;
  --brand: #7c5cff;
  --brand-ink: #5634f0;
  --brand-soft: #efebff;
  --cyan: #38bdf8;
  --mint: #2ee6a6;
  --mint-ink: #0b8a60;
  --mint-soft: #ddfaee;
  --red: #ef4360;
  --red-soft: #ffe9ec;
  --amber: #c27b06;
  --amber-soft: #fff3d9;
  --blue: #2f6bf0;
  --blue-soft: #e8f0ff;
  --grad: linear-gradient(115deg, #8b6bff 0%, #5aa8ff 48%, #2ee6a6 100%);
  --r: 16px;
  --r-lg: 24px;
  --shadow: 0 1px 2px rgba(11, 12, 26, 0.05), 0 10px 30px -10px rgba(11, 12, 26, 0.16);
  --shadow-lg: 0 2px 6px rgba(11, 12, 26, 0.05), 0 40px 80px -30px rgba(11, 12, 26, 0.35);
  --max: 1200px;
  --display: Sora, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }
p { margin: 0 0 16px; }
h1, h2, h3, h4 { margin: 0 0 14px; font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: 19px; letter-spacing: -0.015em; }
code { padding: 2px 6px; border-radius: 6px; background: var(--soft-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; }
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--text); color: #fff; }
.skip-link:focus { left: 8px; }
.center { text-align: center; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Labels and headings */
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13.5px; font-weight: 600; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.on-dark .kicker, .kicker.dark { background: rgba(255, 255, 255, 0.07); color: #e8e6ff; box-shadow: inset 0 0 0 1px var(--night-line); }
.title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; }
.head { max-width: 760px; margin: 0 0 52px; }
.head.mid { margin-inline: auto; text-align: center; }
.head > p { margin: 0; color: var(--text-2); font-size: 18.5px; }
.on-dark .head > p { color: var(--night-text); }
.on-dark h2, .on-dark h3 { color: #fff; }
.lede { font-size: clamp(18px, 1.8vw, 20.5px); line-height: 1.55; color: var(--text-2); }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px; font: inherit; font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-main { background: var(--grad); color: #07070f; box-shadow: 0 10px 30px -10px rgba(124, 92, 255, 0.8); }
.btn-main:hover { color: #07070f; box-shadow: 0 14px 36px -10px rgba(124, 92, 255, 0.95); }
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: #22243d; color: #fff; }
.btn-glass { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-line { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.btn-line:hover { color: var(--text); box-shadow: inset 0 0 0 1px #cfd2e0, var(--shadow); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--brand-ink); transition: gap 0.15s ease; }
.link:hover { gap: 9px; color: var(--brand-ink); }
.on-dark .link { color: #b9a9ff; }

/* Announcement + header (always dark) */
.announce { display: block; padding: 9px 16px; background: var(--grad); color: #07070f; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.announce:hover { color: #07070f; }
.announce span { text-decoration: underline; text-underline-offset: 3px; }
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(7, 7, 15, 0.84); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--night-line); }
.site-header .wrap { position: relative; display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; }
.brand:hover { color: #fff; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--night-text); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-cta .ghost { color: var(--night-text); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 10px; }
.nav-cta .ghost:hover { color: #fff; }
.menu-toggle { display: none; margin-left: auto; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.mobile-menu { display: none; }
@media (max-width: 1020px) {
  .menu-toggle { display: inline-flex; }
  .nav, .nav-cta { display: none; }
  .site-header.open .mobile-menu { display: grid; gap: 2px; padding: 8px 20px 20px; border-top: 1px solid var(--night-line); }
  .mobile-menu a:not(.btn) { padding: 12px; border-radius: 8px; color: var(--night-text); text-decoration: none; font-weight: 500; }
  .mobile-menu a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .mobile-menu .btn { margin-top: 10px; }
}

/* Sections */
.sec { padding: 120px 0; }
.sec-tight { padding: 80px 0; }
.soft { background: var(--soft); }
.on-dark { position: relative; overflow: hidden; background: var(--night); color: var(--night-text); }
@media (max-width: 720px) { .sec { padding: 84px 0; } .sec-tight { padding: 60px 0; } }

/* Hero */
.hero { padding: 88px 0 0; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); opacity: 0.55; }
.hero::before { width: 640px; height: 520px; left: -160px; top: -200px; background: #5b3cf5; }
.hero::after { width: 560px; height: 460px; right: -160px; top: 120px; background: #0e7c86; opacity: 0.45; }
.hero .dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(#000, transparent 75%); mask-image: linear-gradient(#000, transparent 75%); }
.hero-copy { max-width: 920px; margin: 0 auto; text-align: center; }
.hero h1 { color: #fff; font-size: clamp(40px, 6.2vw, 78px); line-height: 1.04; letter-spacing: -0.045em; margin-bottom: 24px; }
.rotator { position: relative; display: inline-grid; vertical-align: bottom; text-align: left; }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(0.3em); transition: opacity 0.45s ease, transform 0.45s ease; }
.rotator > span.on { opacity: 1; transform: none; }
.hero .lede { max-width: 660px; margin: 0 auto 36px; color: var(--night-text); }
.hero .btns { justify-content: center; }
.hero-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--night-muted); font-size: 14.5px; }
.hero-notes li { display: inline-flex; align-items: center; gap: 8px; }
.hero-notes svg { color: var(--mint); }

/* Hero product window */
.window { position: relative; max-width: 1080px; margin: 72px auto 0; border-radius: 20px 20px 0 0; background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)); padding: 1px 1px 0; }
.window-in { overflow: hidden; border-radius: 19px 19px 0 0; background: #f7f7fb; box-shadow: 0 -30px 80px -20px rgba(124, 92, 255, 0.45); }
.window-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e2e4ee; }
.window-bar b { margin-left: 12px; color: var(--muted); font-size: 13px; font-weight: 500; }
.window-body { display: grid; grid-template-columns: 1.1fr 0.9fr; }
.editor { padding: 28px; border-right: 1px solid var(--line); background: #fff; }
.editor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.editor-top h4 { margin: 0; font-size: 17px; }
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--mint-ink); font-size: 13px; font-weight: 600; }
.switch i { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--mint); }
.switch i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.block { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.block + .block { margin-top: 12px; }
.block small { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 9px; background: var(--soft); font-size: 13.5px; }
.cond + .cond { margin-top: 6px; }
.cond b { font-weight: 600; }
.cond em { font-style: normal; color: var(--muted); }
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; }
.and-or { margin: 6px 0 6px 6px; color: var(--brand-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.action { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.action + .action { margin-top: 8px; }
.summary { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); color: #2b1f73; font-size: 13.5px; }
.preview { padding: 28px; }
.preview h5 { margin: 0 0 10px; font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--text); }
.preview h5 + .opts { margin-bottom: 18px; }
.preview .meta { display: flex; justify-content: space-between; margin-bottom: 14px; color: var(--muted); font-size: 12.5px; }

/* Checkout option lists */
.opts { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 14px; transition: background 0.25s ease, opacity 0.25s ease; }
.opts > .opt + .opt { border-top: 1px solid var(--line); }
.opt .dot { flex: none; width: 16px; height: 16px; border: 1.5px solid #cdd0de; border-radius: 50%; background: #fff; }
.opt.sel { background: #f6f3ff; }
.opt.sel .dot { border: 5px solid var(--brand); }
.opt .name { flex: 1; min-width: 0; }
.opt .name small { display: block; color: var(--muted); font-size: 12px; }
.opt .price { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 500; }
.opt.off { color: var(--muted); background: repeating-linear-gradient(-45deg, #fbfbfd, #fbfbfd 6px, #f3f4f8 6px, #f3f4f8 12px); }
.opt.off .name > span:first-child { text-decoration: line-through; text-decoration-color: var(--red); }
.opt.off .dot { opacity: 0.4; }
button.opt { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
button.opt.sel { background: #f6f3ff; }
button.opt:hover:not(.sel) { background: var(--soft); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.b-hide { background: var(--red-soft); color: #c3223f; }
.b-rename { background: var(--blue-soft); color: var(--blue); }
.b-move { background: var(--brand-soft); color: var(--brand-ink); }
.b-show { background: var(--mint-soft); color: var(--mint-ink); }
.b-warn { background: var(--amber-soft); color: var(--amber); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Hero animation: Cash on Delivery hides itself, then comes back */
.anim-cod { animation: cod 7s ease-in-out infinite; }
.anim-cod .badge { animation: codbadge 7s ease-in-out infinite; }
.anim-cod .name > span:first-child { background: linear-gradient(var(--red), var(--red)) 0 55% / 0 1.5px no-repeat; animation: codline 7s ease-in-out infinite; }
@keyframes cod { 0%, 22% { background: #fff; color: var(--text); } 30%, 86% { color: var(--muted); background: #f6f7fa; } 96%, 100% { background: #fff; color: var(--text); } }
@keyframes codbadge { 0%, 24% { opacity: 0; transform: scale(0.85); } 32%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes codline { 0%, 24% { background-size: 0 1.5px; } 32%, 86% { background-size: 100% 1.5px; } 94%, 100% { background-size: 0 1.5px; } }
@media (max-width: 900px) { .window-body { grid-template-columns: 1fr; } .editor { border-right: 0; border-bottom: 1px solid var(--line); } .editor, .preview { padding: 20px; } }

/* Facts strip (under the hero) */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--night-line); }
.facts > div { padding: 34px 26px; }
.facts > div + div { border-left: 1px solid var(--night-line); }
.facts b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.04em; color: #fff; }
.facts span { color: var(--night-muted); font-size: 14.5px; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(3) { border-left: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--night-line); } .facts > div { padding: 24px 18px; } }

/* Problem → solution */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vs-card { padding: 34px; border-radius: var(--r-lg); }
.vs-card.before { background: var(--soft); }
.vs-card.after { background: var(--night); color: var(--night-text); box-shadow: var(--shadow-lg); }
.vs-card .label { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.vs-card.before .label { background: #fff; color: var(--muted); }
.vs-card.after .label { background: var(--grad); color: #07070f; }
.vs-card h3 { margin-bottom: 18px; font-size: 22px; }
.vs-card.after h3 { color: #fff; }
.vs-card ul { margin: 0; padding: 0; list-style: none; }
.vs-card li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line); font-size: 15.5px; }
.vs-card.after li { border-color: var(--night-line); color: #e3e4f2; }
.vs-card li::before { content: ""; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.vs-card.before li::before { background-color: var(--red-soft); background-image: 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' stroke='%23c3223f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vs-card.after li::before { background-color: rgba(46, 230, 166, 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232ee6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 860px) { .versus { grid-template-columns: 1fr; } .vs-card { padding: 26px 22px; } }

/* How it works: a timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.timeline::before { content: ""; position: absolute; left: 32px; right: 32px; top: 31px; height: 2px; background: linear-gradient(90deg, var(--brand), var(--cyan), var(--mint)); opacity: 0.4; }
.timeline li { position: relative; counter-increment: t; }
.timeline li::before { content: counter(t); position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--brand-ink); }
.timeline h3 { font-size: 21px; }
.timeline p { color: var(--text-2); margin: 0; }
.timeline .mini { margin-top: 18px; }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr; gap: 40px; } .timeline::before { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; background: linear-gradient(var(--brand), var(--cyan), var(--mint)); } }

/* Feature tabs */
.ftabs { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 36px; align-items: start; }
.ftab-list { display: grid; gap: 10px; }
.ftab { display: block; width: 100%; padding: 20px 22px; border: 0; border-radius: var(--r); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; }
.ftab:hover { background: var(--soft); }
.ftab[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.ftab b { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.ftab b i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--soft-2); color: var(--text-2); font-style: normal; }
.ftab[aria-selected="true"] b i { background: var(--grad); color: #07070f; }
.ftab span { display: block; margin: 8px 0 0 46px; color: var(--text-2); font-size: 15px; }
.ftab:not([aria-selected="true"]) span { display: none; }
.fpanel { padding: 36px; border-radius: var(--r-lg); background: var(--night); color: var(--night-text); min-height: 470px; box-shadow: var(--shadow-lg); }
.fpanel[hidden] { display: none; }
.fpanel h3 { color: #fff; font-size: 24px; }
.fpanel > p { color: var(--night-text); max-width: 600px; }
.fpanel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 24px; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 8px 0 8px 30px; font-size: 15px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: rgba(124, 92, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%237c5cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fpanel .ticks li, .on-dark .ticks li { color: #e3e4f2; }
.fpanel .ticks li::before, .on-dark .ticks li::before { background-color: rgba(46, 230, 166, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232ee6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.field { width: 100%; }
.field label { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--muted); }
.field .input { padding: 10px 12px; border: 1.5px solid var(--red); border-radius: 9px; background: #fff; color: var(--text); font-size: 14px; }
.field .err { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: #c3223f; font-size: 12.5px; font-weight: 500; }
.panel-card { padding: 18px; border-radius: 14px; background: #fff; color: var(--text); }
.panel-card + .panel-card { margin-top: 12px; }
@media (max-width: 1000px) { .ftabs { grid-template-columns: 1fr; } .ftab-list { grid-template-columns: repeat(3, 1fr); } .ftab span { display: none !important; } .ftab { padding: 14px; } .ftab b { font-size: 15px; } }
@media (max-width: 700px) { .ftab-list { grid-template-columns: 1fr; } .fpanel { padding: 24px 20px; } .fpanel-grid { grid-template-columns: 1fr; } }

/* Conditions marquee */
.marquee { display: grid; gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-row { display: flex; gap: 12px; width: max-content; animation: slide 45s linear infinite; }
.marquee-row.rev { animation-direction: reverse; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; white-space: nowrap; }
.marquee-row span i, .legend i { width: 9px; height: 9px; border-radius: 50%; }
.c-cart i { background: var(--brand); }
.c-cust i { background: var(--mint); }
.c-ship i { background: var(--cyan); }
@keyframes slide { to { transform: translateX(-50%); } }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 26px; color: var(--text-2); font-size: 14.5px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }

/* Live demo (scenario player) */
.demo-scen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.scen { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--night-text); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--night-line); transition: background 0.15s ease, color 0.15s ease; }
.scen i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 15px; }
.scen:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.scen[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: none; }
.scen[aria-pressed="true"] i { background: var(--grad); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.demo-shop { overflow: hidden; border-radius: 20px; background: #fff; color: var(--text); box-shadow: 0 40px 90px -40px rgba(124, 92, 255, 0.6); }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.shop-bar b { font-family: var(--display); font-size: 17px; letter-spacing: -0.02em; }
.shop-bar span { color: var(--muted); font-size: 13px; }
.shop-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; }
.shop-main { padding: 22px; }
.shop-main h4 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.shop-main h4 small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.shop-main .opts { margin-bottom: 22px; }
.shop-side { padding: 22px; background: var(--soft); border-left: 1px solid var(--line); font-size: 14px; }
.shop-side h4 { margin: 0 0 14px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.line-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; color: var(--text-2); }
.line-item b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.line-item.total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 16px; }
.addr { margin-bottom: 22px; }
.addr .line { padding: 11px 14px; border: 1px solid #d6d9e6; border-radius: 10px; font-size: 14px; }
.addr.invalid .line { border: 1.5px solid var(--red); }
.addr .err { margin-top: 6px; color: #c3223f; font-size: 13px; font-weight: 500; }
.pay-btn { width: 100%; min-height: 50px; margin-top: 14px; border: 0; border-radius: 10px; background: var(--text); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.pay-btn:hover { background: #26284a; }
.banner { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; }
.banner.err { background: var(--red-soft); color: #9c1830; box-shadow: inset 0 0 0 1px #f7c4cd; }
.banner.ok { background: var(--mint-soft); color: #0a6a49; box-shadow: inset 0 0 0 1px #b6eed6; }
.banner[hidden] { display: none; }
.rules-panel { padding: 22px; border-radius: 20px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); }
.rules-panel h3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 17px; }
.rules-panel h3 small { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--mint); letter-spacing: 0; }
.rules-panel > p { margin: 0 0 16px; color: var(--night-muted); font-size: 13.5px; }
.rule { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--night-line); transition: background 0.25s ease, box-shadow 0.25s ease; }
.rule + .rule { margin-top: 10px; }
.rule.on { background: rgba(124, 92, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(150, 125, 255, 0.55); }
.rule header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.rule header b { color: #fff; font-size: 14px; line-height: 1.35; }
.rule .kind { display: block; margin-bottom: 3px; color: var(--night-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.rule p { margin: 0; color: var(--night-text); font-size: 13px; line-height: 1.5; }
.rule .when { margin-top: 5px; color: var(--night-muted); }
.state { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--night-muted); font-size: 11.5px; font-weight: 700; }
.rule.on .state { background: var(--mint); color: #05281c; }
.tweak { margin-top: 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--night-line); }
.tweak summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; color: #fff; font-weight: 600; cursor: pointer; list-style: none; }
.tweak summary::-webkit-details-marker { display: none; }
.tweak summary::after { content: "+"; font-size: 20px; color: var(--night-muted); }
.tweak[open] summary::after { content: "–"; }
.tweak-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 4px 20px 20px; }
.ctl { display: grid; gap: 8px; align-content: start; }
.ctl > label, .ctl > span { color: var(--night-text); font-size: 13px; font-weight: 600; }
.ctl select, .ctl input[type="text"] { width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--night-3); color: #fff; box-shadow: inset 0 0 0 1px var(--night-line); font: inherit; font-size: 14px; }
.ctl input[type="range"] { width: 100%; accent-color: var(--brand); }
.range-row { display: flex; justify-content: space-between; align-items: baseline; }
.range-row label { color: var(--night-text); font-size: 13px; font-weight: 600; }
.range-row b { color: #fff; font-variant-numeric: tabular-nums; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: var(--night-3); }
.seg button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--night-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--text); }
.mini-btn { justify-self: start; padding: 0; border: 0; background: none; color: #b9a9ff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.demo-note { margin: 22px 0 0; color: var(--night-muted); font-size: 14px; text-align: center; }
@media (max-width: 1100px) { .demo-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .shop-body { grid-template-columns: 1fr; } .shop-side { border-left: 0; border-top: 1px solid var(--line); } .tweak-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tweak-grid { grid-template-columns: 1fr; } .shop-main, .shop-side { padding: 18px; } }

/* Who it's for */
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.persona { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.persona:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
.persona .ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: var(--grad); color: #07070f; }
.persona h3 { font-size: 19px; }
.persona > p { color: var(--text-2); font-size: 15px; }
.persona ul { margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.persona li { padding: 5px 0; color: var(--text); font-size: 14px; font-weight: 500; }
.persona li::before { content: "→ "; color: var(--brand); }
@media (max-width: 1040px) { .personas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .personas { grid-template-columns: 1fr; } }

/* Tool cards */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool { padding: 28px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tool .art { display: grid; align-content: center; min-height: 160px; margin-bottom: 22px; padding: 18px; border-radius: 14px; background: var(--soft); }
.tool h3 { font-size: 18.5px; }
.tool p { margin: 0; color: var(--text-2); font-size: 15px; }
.mini-list { display: grid; gap: 6px; font-size: 13px; }
.mini-list div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #fff; }
.ok { color: var(--mint-ink); font-weight: 700; font-size: 12px; }
.no { color: #c3223f; font-weight: 700; font-size: 12px; }
.meter { display: grid; gap: 8px; font-size: 13px; }
.meter .row-m { display: flex; justify-content: space-between; }
.meter .bar { height: 8px; border-radius: 99px; background: #fff; overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.warn { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--amber-soft); color: #6b4708; font-size: 13px; }
.warn svg { flex: none; margin-top: 1px; }
.sentence { padding: 14px; border-radius: 10px; background: #fff; font-size: 14px; line-height: 1.55; }
.sentence small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.tpl-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-mini div { padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.tpl-mini div small { display: block; margin-bottom: 3px; color: var(--brand-ink); font-size: 11px; font-weight: 700; }
@media (max-width: 960px) { .tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tools { grid-template-columns: 1fr; } }

/* Safety (dark) */
.safety { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.shield { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 400px; margin: 0 auto; }
.shield::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, 0.4), transparent 65%); }
.shield svg { position: relative; width: 64%; height: auto; }
.guard-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.guard-item { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--night-line); }
.guard-item b { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; }
.guard-item span { color: var(--night-muted); font-size: 14px; }
@media (max-width: 960px) { .safety { grid-template-columns: 1fr; gap: 24px; } .shield { max-width: 240px; } }
@media (max-width: 560px) { .guard-list { grid-template-columns: 1fr; } }

/* Comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cmp { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--display); font-size: 15px; font-weight: 600; }
.cmp thead th.us { color: var(--brand-ink); }
.cmp td:not(:first-child), .cmp th:not(:first-child) { width: 24%; text-align: center; }
.cmp .us { background: #faf8ff; }
.y { color: var(--mint-ink); font-weight: 700; }
.n { color: #b8bbcc; font-weight: 700; }

/* Pricing */
.billing { display: flex; justify-content: center; margin-bottom: 36px; }
.billing-toggle { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--soft-2); }
.billing-toggle button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.billing-toggle button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.save { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--mint-soft); color: var(--mint-ink); font-size: 12px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: 38px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.plan.pro { position: relative; background: var(--night); color: var(--night-text); box-shadow: var(--shadow-lg); }
.plan.pro::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan h3 { margin: 0; font-size: 24px; }
.plan.pro h3 { color: #fff; }
.plan .tag { padding: 4px 12px; border-radius: 999px; background: var(--grad); color: #07070f; font-size: 12.5px; font-weight: 700; }
.plan .for { margin: 8px 0 0; color: var(--text-2); }
.plan.pro .for { color: var(--night-text); }
.amount { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 4px; }
.amount b { font-family: var(--display); font-size: 60px; font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.plan.pro .amount b { color: #fff; }
.amount span { color: var(--muted); }
.plan.pro .amount span { color: var(--night-muted); }
.price-note { min-height: 24px; margin: 0 0 24px; color: var(--muted); font-size: 14.5px; }
.plan.pro .price-note { color: var(--night-muted); }
.plan .btn { width: 100%; }
.plan .fine { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.plan.pro .fine { color: var(--night-muted); }
.plan ul { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan.pro ul { border-color: var(--night-line); }
.plan li { position: relative; padding: 7px 0 7px 30px; font-size: 15px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 10px; width: 19px; height: 19px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235634f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan.pro li { color: #e3e4f2; }
.plan.pro li::before { background-color: rgba(46, 230, 166, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232ee6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 14.5px; }
.assure li { display: inline-flex; align-items: center; gap: 8px; }
.assure svg { color: var(--brand); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan { padding: 28px 24px; } }

/* FAQ: cards */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.faq.one { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
.faq details { border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s ease; }
.faq details[open] { box-shadow: inset 0 0 0 1px #d5cdfc, var(--shadow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; font-weight: 600; font-size: 16.5px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230b0c1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); background-color: var(--brand-soft); }
.faq .answer { padding: 0 22px 20px; color: var(--text-2); }
.faq .answer p:last-child, .faq .answer ul:last-child { margin-bottom: 0; }
.faq .answer ul { padding-left: 20px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* Final call to action */
.cta { position: relative; overflow: hidden; padding: 110px 0; background: var(--night); color: var(--night-text); text-align: center; isolation: isolate; }
.cta::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 1100px; height: 700px; transform: translate(-50%, -45%); border-radius: 50%; background: var(--grad); filter: blur(90px); opacity: 0.4; }
.cta h2 { color: #fff; font-size: clamp(36px, 5vw, 62px); letter-spacing: -0.045em; max-width: 820px; margin: 0 auto 18px; }
.cta p { max-width: 580px; margin: 0 auto 34px; font-size: 18.5px; }
.cta .btns { justify-content: center; }
.cta .fine { margin: 22px 0 0; color: var(--night-muted); font-size: 14px; }
.start-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 980px; margin: 52px auto 0; padding: 0; list-style: none; counter-reset: s; text-align: left; }
.start-steps li { counter-increment: s; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--night-text); font-size: 14.5px; }
.start-steps li::before { content: "Step " counter(s); display: block; margin-bottom: 6px; color: var(--mint); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.start-steps b { color: #fff; }
@media (max-width: 860px) { .start-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .start-steps { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { padding: 72px 0 36px; background: var(--night); color: var(--night-muted); font-size: 15px; border-top: 1px solid var(--night-line); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.foot-grid p { max-width: 300px; margin: 16px 0 20px; }
.foot-grid h4 { margin: 4px 0 14px; color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.foot-grid ul { margin: 0; padding: 0; list-style: none; }
.foot-grid li { margin: 9px 0; }
.site-footer a { color: var(--night-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.foot-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--night-text); font-size: 13.5px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: 14px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* Inner pages: dark banner + light content */
.page-hero { position: relative; overflow: hidden; padding: 72px 0 76px; background: var(--night); color: var(--night-text); isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: #5b3cf5; filter: blur(90px); opacity: 0.5; }
.page-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.04em; margin-bottom: 16px; max-width: 860px; }
.page-hero .lede { max-width: 680px; margin: 0; color: var(--night-text); }
.page-hero .lede p { margin: 0; }
.page-hero .lede a { color: #b9a9ff; }
.page-hero .btns { margin-top: 30px; }
.crumbs { margin: 0 0 22px; color: var(--night-muted); font-size: 14px; }
.crumbs a { color: var(--night-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.page-hero.mid { text-align: center; }
.page-hero.mid h1, .page-hero.mid .lede { margin-inline: auto; }
.page-hero.mid .btns { justify-content: center; }

/* Features page: alternating rows */
.rows { display: grid; gap: 28px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 48px; border-radius: 28px; background: var(--soft); scroll-margin-top: 96px; }
.row:nth-child(even) .row-art { order: -1; }
.row .num { display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 8px; background: #fff; color: var(--brand-ink); font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.row h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.035em; }
.row > div > p { color: var(--text-2); }
.row-art { display: grid; gap: 12px; padding: 28px; border-radius: 20px; background: var(--night); }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; } .row:nth-child(even) .row-art { order: 0; } .row-art { padding: 18px; } }
.cond-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cond-col { padding: 26px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cond-col h3 { display: flex; align-items: center; gap: 10px; }
.cond-col h3 i { width: 10px; height: 10px; border-radius: 50%; }
.cond-col ul { margin: 0; padding: 0; list-style: none; }
.cond-col li { padding: 8px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .cond-cols { grid-template-columns: 1fr; } }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.jump a { padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--night-text); font-size: 14px; font-weight: 500; text-decoration: none; }
.jump a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.page-hero.mid .jump { justify-content: center; }

/* Templates gallery */
.t-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 36px; }
.t-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: var(--text-2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.t-filters button i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.t-filters button[aria-pressed="true"] { background: var(--night); color: #fff; box-shadow: none; }
.t-filters button[aria-pressed="true"] i { color: var(--mint); }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.t-card { position: relative; padding: 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.t-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #d5cdfc, var(--shadow); }
.t-card[hidden] { display: none; }
.t-card h3 { margin: 14px 0 6px; font-size: 16.5px; }
.t-card p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.t-kind { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.k-payment { background: var(--brand-soft); color: var(--brand-ink); }
.k-shipping { background: var(--blue-soft); color: var(--blue); }
.k-validation { background: var(--amber-soft); color: var(--amber); }
.t-badge { display: inline-block; margin-left: 4px; padding: 3px 10px; border-radius: 8px; background: var(--mint-soft); color: var(--mint-ink); font-size: 12px; font-weight: 700; }
@media (max-width: 960px) { .t-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .t-grid { grid-template-columns: 1fr; } }

/* Docs and guides */
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding: 64px 0 120px; }
.docs-nav { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
.docs-nav p { margin: 22px 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.docs-nav p:first-child { margin-top: 0; }
.docs-nav ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.docs-nav a { display: block; margin-left: -2px; padding: 7px 14px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.docs-nav a:hover { color: var(--brand-ink); border-color: var(--brand); }
.doc { max-width: 780px; }
.doc article { padding: 40px 44px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 96px; }
.doc article + article { margin-top: 20px; }
.doc h2 { font-size: 27px; letter-spacing: -0.03em; }
.doc h3 { margin-top: 28px; font-size: 17px; }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc ol { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.doc ol > li { position: relative; counter-increment: s; margin: 14px 0; padding-left: 44px; }
.doc ol > li::before { content: counter(s); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); color: #07070f; font-size: 13px; font-weight: 700; }
.doc table { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: 14.5px; }
.doc th, .doc td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { background: var(--soft); font-weight: 600; }
.doc-note { margin: 24px 0 0; padding: 18px 22px; border-radius: 14px; background: var(--brand-soft); color: #2b1f73; }
@media (max-width: 960px) { .docs { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; } .docs-nav { position: static; max-height: none; } .doc article { padding: 28px 22px; } .doc table { display: block; overflow-x: auto; } }

/* Changelog */
.releases { max-width: 920px; padding: 64px 0 120px; }
.release { display: grid; grid-template-columns: 180px 1fr; gap: 36px; padding: 0 0 48px; }
.release time { padding-top: 6px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.release > div { padding: 36px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.release h2 { font-size: 30px; letter-spacing: -0.035em; }
.release ul { margin: 0; padding: 0; list-style: none; }
.release li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--line); color: var(--text-2); }
.release li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
@media (max-width: 760px) { .release { grid-template-columns: 1fr; gap: 10px; } .release > div { padding: 26px 22px; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; padding: 64px 0 120px; }
.contact-main { padding: 44px; border-radius: var(--r-lg); background: var(--night); color: var(--night-text); }
.contact-main h2 { color: #fff; font-size: 32px; }
.contact-main .mail { display: inline-block; margin: 6px 0 26px; font-family: var(--display); font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.contact-main ul { margin: 0; padding: 0; list-style: none; }
.contact-main li { padding: 11px 0; border-top: 1px solid var(--night-line); color: #e3e4f2; font-size: 15px; }
.contact-side { display: grid; gap: 16px; }
.link-card { display: block; padding: 26px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.link-card:hover { color: inherit; transform: translateY(-2px); box-shadow: inset 0 0 0 1px #d5cdfc, var(--shadow); }
.link-card h3 { margin-bottom: 6px; }
.link-card p { margin: 0; color: var(--text-2); font-size: 15px; }
.link-card .go { display: inline-block; margin-top: 10px; color: var(--brand-ink); font-weight: 600; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .contact-main { padding: 30px 22px; } }

/* Legal */
.legal-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding: 64px 0 120px; }
.legal-toc { position: sticky; top: 100px; align-self: start; }
.legal-toc p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.legal-toc a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.legal-toc a:hover { background: var(--soft); color: var(--text); }
.legal-toc a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.legal { max-width: 800px; padding: 52px 56px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.legal h1 { font-size: clamp(34px, 4.6vw, 48px); letter-spacing: -0.04em; margin-bottom: 8px; }
.legal > p:first-child em, .legal .updated { display: inline-block; margin-bottom: 30px; padding: 4px 10px; border-radius: 8px; background: var(--soft); color: var(--muted); font-style: normal; font-size: 13.5px; font-weight: 500; }
.legal h2 { margin-top: 40px; font-size: 21px; }
.legal p, .legal li { color: var(--text-2); }
@media (max-width: 900px) { .legal-wrap { grid-template-columns: 1fr; gap: 16px; padding-top: 32px; } .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 4px; } .legal-toc p { width: 100%; } .legal { padding: 30px 22px; } }

/* 404 */
.notfound { padding: 120px 0 140px; text-align: center; }
.notfound .code { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: clamp(110px, 20vw, 210px); line-height: 0.9; letter-spacing: -0.07em; }
.notfound h1 { color: #fff; }
.notfound .btns { justify-content: center; }

/* Small info grid */
.info-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info { padding: 24px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.info .ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.info b { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.info span { color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .info-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .info-list { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* White UI inside dark sections keeps dark text */
.window-in, .opts, .panel-card, .demo-shop, .plan:not(.pro) { color: var(--text); }
.rotator { justify-items: center; text-align: center; }

/* Cookie choice banner (analytics.js) */
.consent { position: fixed; z-index: 100; left: 16px; right: 16px; bottom: 16px; max-width: 580px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; border-radius: var(--r); background: var(--night-2); color: var(--night-text); box-shadow: inset 0 0 0 1px var(--night-line), var(--shadow-lg); font-size: 14.5px; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 260px; margin: 0; }
.consent p a { color: #b9a9ff; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }