/* webfaqe.pro — one stylesheet. Near-black, bone, one blue. One typeface. Flat. */

:root {
  --bg:      #0B0C0F;
  --bg-2:    #101217;
  --panel:   #15171C;
  --panel-2: #1B1E25;
  --line:    rgba(241,238,232,.08);
  --line-2:  rgba(241,238,232,.16);
  --ink:     #F1EEE8;
  --ink-2:   #A9A8AF;
  --ink-3:   #6F6F79;
  --accent:  #4C6FFF;
  --accent-2:#6B88FF;
  --accent-soft: rgba(76,111,255,.14);
  --bone:    #F1EEE8;
  --red:     #F06A5C;
  --ok:      #5BD39A;
  --radius:  18px;
  --wrap:    1180px;
  --sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow:  0 30px 80px -30px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; background: var(--bg); color-scheme: dark; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0 0 .45em; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
h1 { font-size: clamp(2.8rem, 7.2vw, 6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; font-weight: 700; }
h4 { margin: 0 0 .5em; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: inherit; }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }
button { font-family: inherit; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--bone); color: var(--bg); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }
.kicker { margin: 0 0 16px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.quiet { color: var(--ink-3); font-size: .92rem; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.volt { color: var(--accent-2); }

/* ---------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 12px; border: 1px solid transparent; font: 700 .98rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--bone); color: var(--bg); }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(241,238,232,.04); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); }
.btn-lg { padding: 18px 28px; font-size: 1.05rem; border-radius: 14px; }
.btn-sm { padding: 10px 16px; font-size: .9rem; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.signin { font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink-2); padding: 8px 10px; }
.signin:hover { color: var(--ink); }

/* ---------------------------------------------------------------- header */

.site-header { position: sticky; top: 0; z-index: 40; background: rgba(11,12,15,.94); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-header.is-stuck { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.brand-mark { width: 34px; height: 24px; display: grid; place-items: center; color: var(--ink); }
.brand-mark svg { width: 34px; height: 24px; display: block; }
.brand-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.brand-name small { font-size: 1.15rem; font-weight: 700; color: var(--ink-3); }
.nav { display: none; gap: 2px; margin-left: 6px; }
.nav a { padding: 8px 12px; border-radius: 10px; font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.nav a:hover, .nav a.is-active { color: var(--ink); background: rgba(241,238,232,.06); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-actions .signin, .header-actions .btn { display: none; }
.burger { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
.burger span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 10px 0 18px; }
.menu.is-open { display: block; }
.menu-link { display: block; padding: 13px 4px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-foot { display: flex; gap: 10px; padding-top: 16px; }
.menu-foot .btn { flex: 1; }
@media (min-width: 1000px) {
  .nav { display: flex; }
  .header-actions .signin, .header-actions .btn { display: inline-flex; }
  .burger, .menu { display: none !important; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 2; padding: 88px 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--accent-2); }
.hero .lead { margin: 20px auto 32px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 30px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: .92rem; color: var(--ink-2); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--accent-2); transform: rotate(45deg); }
.hero-stage { position: relative; height: 440px; margin-top: 8px; overflow: hidden; }
.hero-stage::before, .hero-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-stage::before { background: linear-gradient(to bottom, var(--bg), rgba(11,12,15,0) 22%, rgba(11,12,15,0) 78%, var(--bg)); }
.hero-stage::after { background: linear-gradient(90deg, var(--bg), rgba(11,12,15,0) 16%, rgba(11,12,15,0) 84%, var(--bg)); }
.hero-scene { position: absolute; inset: 0; }
.hero-scene canvas { display: block; width: 100%; height: 100%; }
.hero-static { position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); transform: translate(-50%, -50%) rotateX(62deg); color: var(--ink-3); opacity: .5; }
.hero-scene.is-live .hero-static { display: none; }
.hero-sub { position: relative; z-index: 2; border-top: 1px solid var(--line); background: var(--bg); }
.ticker { display: flex; padding: 14px 0; white-space: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker span { display: inline-flex; gap: 48px; padding-right: 48px; animation: ticker 32s linear infinite; font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: var(--ink-3); }
.ticker i { font-style: normal; color: var(--ink); }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (max-width: 899px) { .hero-inner { padding-top: 56px; } .hero-stage { height: 280px; } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none; } }

/* ---------------------------------------------------------------- sections */

.section { padding: 96px 0; position: relative; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.section-head { max-width: 780px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-bottom: 0; }
.section + .section { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .section { padding: 128px 0; } }

/* ----------------------------------------------------------------- steps */

.steps { display: grid; gap: 14px; perspective: 1400px; }
.step { position: relative; padding: 32px 28px 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transform-style: preserve-3d; transition: transform .25s ease, border-color .25s ease; }
.step:hover { border-color: var(--line-2); }
.step-no { font-weight: 800; font-size: 3.6rem; line-height: 1; color: var(--ink); letter-spacing: -.05em; }
.step-no::after { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-top: 10px; }
.step-time { position: absolute; top: 26px; right: 24px; padding: 6px 10px; border-radius: 999px; background: rgba(241,238,232,.06); color: var(--ink-2); font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.step h3 { margin: 22px 0 8px; }
.step p { margin: 0; color: var(--ink-2); }
.step ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .92rem; color: var(--ink-2); }
.step li::before { content: "— "; color: var(--accent-2); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* --------------------------------------------------------------- what you get */

.gets { display: grid; gap: 12px; }
.get { padding: 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; transition: transform .25s ease, border-color .25s ease, background .25s ease; text-decoration: none; }
.get:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--panel-2); }
.get h3 { font-size: 1.05rem; margin-bottom: 4px; }
.get p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.ico { width: 48px; height: 48px; border-radius: 12px; background: rgba(241,238,232,.05); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .25s ease, color .25s ease; flex: 0 0 auto; }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.get:hover .ico { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (min-width: 720px) { .gets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gets { grid-template-columns: repeat(4, 1fr); gap: 14px; } .get { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------------------------------------------------------- showcase */

.show { display: grid; gap: 40px; align-items: center; }
.stage { position: relative; height: 520px; perspective: 1600px; }
.device { position: absolute; border-radius: 22px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); overflow: hidden; transform-style: preserve-3d; animation: float 7s ease-in-out infinite; }
.device.phone { width: 230px; height: 460px; left: 6%; top: 20px; transform: rotateY(18deg) rotateX(6deg); animation-delay: -2s; }
.device.laptop { width: 62%; height: 340px; right: 0; top: 60px; transform: rotateY(-14deg) rotateX(8deg); border-radius: 16px; }
.device.card { width: 220px; height: 130px; left: 36%; bottom: 10px; transform: rotateY(10deg) rotateX(40deg) rotateZ(-6deg); animation-delay: -4s; border-radius: 14px; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.ui { position: absolute; inset: 0; padding: 16px; display: grid; gap: 10px; align-content: start; }
.ui-bar { height: 8px; border-radius: 6px; background: rgba(241,238,232,.14); }
.ui-bar.w2 { width: 55%; } .ui-bar.w3 { width: 35%; }
.ui-hero { height: 90px; border-radius: 12px; background: var(--bone); }
.ui-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-box { height: 56px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); }
.ui-btn { width: 44%; height: 30px; border-radius: 8px; background: var(--accent); }
.laptop .ui { grid-template-columns: 160px 1fr; }
.laptop .ui-side { display: grid; gap: 8px; align-content: start; }
.laptop .ui-main { display: grid; gap: 10px; align-content: start; }
.card .ui { padding: 14px; }
.show-copy ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; color: var(--ink-2); }
.show-copy li::before { content: "— "; color: var(--accent-2); font-weight: 700; }
@media (min-width: 960px) { .show { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
@media (max-width: 720px) { .stage { height: 420px; } .device.laptop { width: 70%; height: 260px; } .device.phone { width: 170px; height: 340px; } .device.card { width: 170px; height: 100px; left: 30%; } }
@media (prefers-reduced-motion: reduce) { .device { animation: none; } }

/* ---------------------------------------------------------------- pricing */

.plans { display: grid; gap: 14px; }
.plan { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; }
.plan.is-featured { border-color: var(--bone); background: var(--panel-2); }
.plan-flag { position: absolute; top: -12px; left: 24px; background: var(--bone); color: var(--bg); font-size: .68rem; font-weight: 800; letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; }
.plan-name { font-weight: 700; margin-bottom: 8px; font-size: 1.05rem; color: var(--ink-2); }
.plan-price { font-size: 2.7rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-bottom: 8px; }
.plan-price small { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.plan-note { color: var(--ink-2); font-size: .95rem; min-height: 2.6em; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.plan li { padding: 9px 0 9px 22px; border-top: 1px solid var(--line); font-size: .95rem; position: relative; color: var(--ink-2); }
.plan li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg) scale(.8); }
.plan .btn { width: 100%; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 720px) and (max-width: 899px) { .plans { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------- faq */

.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-weight: 600; position: relative; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 14px; font-size: 1.6rem; color: var(--accent-2); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.answer { padding: 0 0 20px; color: var(--ink-2); max-width: 66ch; }
.answer p:last-child { margin: 0; }

/* ------------------------------------------------------------------- cta */

.cta-band { position: relative; overflow: hidden; background: var(--bone); color: var(--bg); border-radius: 26px; padding: 76px 28px; text-align: center; }
.cta-band .kicker { color: var(--accent); }
.cta-band h2 { color: var(--bg); }
.cta-band .lead { color: rgba(11,12,15,.7); margin-inline: auto; }
.cta-band .btn-primary { background: var(--bg); color: var(--bone); }
.cta-band .btn-primary:hover { background: #000; }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border: 1px solid rgba(11,12,15,.12); border-radius: 50%; pointer-events: none; }
.cta-band::before { width: 520px; height: 520px; right: -200px; top: -260px; }
.cta-band::after { width: 300px; height: 300px; left: -120px; bottom: -180px; }

/* ----------------------------------------------------------------- pages */

.page-hero { padding: 72px 0 10px; }
.page-hero .lead { margin-top: 12px; }
section.prose { max-width: none; }
.wrap.prose > * { max-width: 780px; }
.prose { max-width: 780px; }
.prose h2 { font-weight: 700; font-size: 1.3rem; margin: 2em 0 .5em; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose a { color: var(--accent-2); }

/* contact */
.contact-grid { display: grid; gap: 24px; align-items: start; }
.contact-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.contact-card a { font-weight: 600; color: var(--accent-2); text-decoration: none; }
.contact-card + .contact-card { margin-top: 16px; }
.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.form-row { display: grid; gap: 14px; margin-bottom: 14px; }
.form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
input, textarea, select { font: 400 1rem/1.4 var(--sans); color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 13px; width: 100%; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.form textarea { min-height: 140px; resize: vertical; }
.form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-status { font-size: .92rem; color: var(--ink-2); }
.form-status.is-ok { color: var(--ok); font-weight: 600; }
.form-status.is-err { color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 7fr 5fr; gap: 40px; } }

/* ---------------------------------------------------------------- wizard */

.wiz { padding: 24px 0 110px; }
.wiz-top { display: grid; gap: 22px; margin-bottom: 26px; }
.wiz-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; position: relative; overflow-x: auto; scrollbar-width: none; }
.wiz-track::-webkit-scrollbar { display: none; }
.wiz-track li { flex: 1 0 auto; position: relative; min-width: 96px; }
@media (max-width: 719px) { .wiz-track li { min-width: 62px; } .wiz-track button { font-size: .72rem; } }
.wiz-track button { width: 100%; background: none; border: 0; padding: 0 0 12px; cursor: pointer; text-align: left; color: var(--ink-3); font: 600 .82rem/1.2 var(--sans); display: grid; gap: 10px; position: relative; z-index: 1; }
.wiz-track b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); font-weight: 800; font-size: .8rem; color: var(--ink-3); background: var(--bg); transition: all .25s ease; }
.wiz-track li::after { content: ""; position: absolute; left: 30px; right: 0; top: 15px; height: 1px; background: var(--line-2); }
.wiz-track li:last-child::after { display: none; }
.wiz-track li.is-done::after { background: var(--accent); }
.wiz-track .is-active { color: var(--ink); }
.wiz-track .is-active b { border-color: var(--bone); background: var(--bone); color: var(--bg); transform: scale(1.1); }
.wiz-track .is-done { color: var(--ink-2); }
.wiz-track .is-done b { border-color: var(--accent); background: var(--accent); color: #fff; font-size: 0; }
.wiz-track .is-done b::before { content: "✓"; font-size: .8rem; }
.wiz-meter { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.meter-ring { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.meter-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.meter-ring circle { fill: none; stroke-width: 5; }
.meter-ring .track { stroke: var(--line-2); }
.meter-ring .fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.meter-ring.is-full .fill { stroke: var(--ok); }
.meter-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.wiz-meter .meter-text { display: grid; gap: 2px; }
.wiz-meter .meter-text strong { font-size: 1rem; letter-spacing: -.01em; line-height: 1.2; }
.wiz-meter .meter-text span { color: var(--ink-3); font-size: .85rem; }
.meter-tag { font-size: .74rem; font-weight: 700; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); animation: pop .3s cubic-bezier(.2,.8,.2,1); }
.meter-tag.is-on { border-color: var(--accent); color: var(--accent-2); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1000px) { .wiz-top { grid-template-columns: 1fr 420px; align-items: end; } }

.wiz-grid { display: grid; gap: 28px; }
.wiz-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.wiz-panel h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 6px; }
.wiz-panel .lead { font-size: 1rem; margin-bottom: 22px; }
.wiz-pane { display: none; }
.wiz-pane.is-active { display: block; animation: pane .35s cubic-bezier(.2,.8,.2,1); }
@keyframes pane { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wiz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.wiz-foot .form-status { flex: 1 1 100%; }
.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; gap: 14px; }
.field-hint { display: block; margin-top: 7px; font-size: .82rem; color: var(--ink-3); min-height: 1.2em; }
.field-hint.is-ok { color: var(--ok); }
@media (min-width: 720px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* tiles: the big choices */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }
.tile span { display: grid; gap: 10px; padding: 16px 14px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); min-height: 120px; transition: border-color .2s ease, background .2s ease, transform .2s ease; align-content: start; position: relative; }
.tile .ico { width: 36px; height: 36px; border-radius: 10px; }
.tile .ico svg { width: 18px; height: 18px; }
.tile b { font-size: .95rem; letter-spacing: -.01em; }
.tile small { color: var(--ink-3); font-size: .78rem; line-height: 1.35; }
.tile span::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); transition: all .2s ease; }
.tile input:checked + span { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.tile input:checked + span .ico { background: var(--accent); color: #fff; border-color: var(--accent); }
.tile input:checked + span::after { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.tile input:focus-visible + span { outline: 2px solid var(--accent); }
.tile:hover span { border-color: var(--ink-3); }

/* chips: the small choices */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: .9rem; font-weight: 600; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.chip small { color: var(--ink-3); font-weight: 500; }
.chip input:checked + span { border-color: var(--bone); background: var(--bone); color: var(--bg); }
.chip input:checked + span small { color: rgba(11,12,15,.6); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.chip:hover span { border-color: var(--ink-3); }
.chip input:active + span { transform: scale(.96); }

/* palette and fonts */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.swatch { position: relative; }
.swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.swatch span { display: grid; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); transition: border-color .15s ease, transform .15s ease; }
.swatch i { display: block; height: 44px; border-radius: 8px; }
.swatch small { font-size: .76rem; font-weight: 600; color: var(--ink-2); text-align: center; }
.swatch input:checked + span { border-color: var(--bone); transform: translateY(-2px); }
.swatch input:checked + span small { color: var(--ink); }
.swatch-custom i { border: 1px dashed var(--line-2); display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--ink-3); font-size: .8rem; }
.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.fonts .tile span { min-height: 0; padding: 14px; }
.fonts .tile em { font-style: normal; font-size: 1.9rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 12px; padding: 4px; gap: 4px; background: var(--bg-2); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.seg span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; white-space: nowrap; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: background .15s ease, color .15s ease; }
.seg input:checked + span { background: var(--bone); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

/* the live preview */
.wiz-preview { position: sticky; top: 90px; }
.stage-wrap { position: relative; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg-2); perspective: 1400px; min-height: 480px; }
.pv { --p: #1F4FD8; --s: #111827; --r: 8px; position: relative; border-radius: 14px; overflow: hidden; background: #fff; color: #14151A; min-height: 440px; display: grid; grid-template-rows: auto auto 1fr auto; font-family: 'Inter', sans-serif; transform: rotateY(-7deg) rotateX(3deg); transition: transform .5s ease, background .4s ease, color .4s ease; box-shadow: var(--shadow); }
.stage-wrap:hover .pv { transform: none; }
.pv.is-dark { background: #101216; color: #F2F2F4; }
.pv.is-flash::before { content: ""; position: absolute; inset: 0; background: var(--p); opacity: .18; animation: flash .6s ease forwards; pointer-events: none; z-index: 5; }
@keyframes flash { to { opacity: 0; } }
.pv-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(0,0,0,.05); font-size: .66rem; color: rgba(0,0,0,.5); }
.pv.is-dark .pv-top { background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); }
.pv-dots { display: inline-flex; gap: 4px; }
.pv-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.pv-url { flex: 1; background: rgba(0,0,0,.05); border-radius: 5px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv.is-dark .pv-url { background: rgba(255,255,255,.08); }
.pv-nav { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.07); font-size: .78rem; font-weight: 700; }
.pv.is-dark .pv-nav { border-bottom-color: rgba(255,255,255,.1); }
.pv-logo { width: 22px; height: 22px; border-radius: var(--r); background: var(--p); color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 800; flex: 0 0 auto; transition: background .4s ease; }
.pv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.pv-tabs { margin-left: auto; display: inline-flex; gap: 8px; font-weight: 500; font-size: .66rem; opacity: .75; white-space: nowrap; overflow: hidden; }
.pv-tabs span { animation: pop .3s ease; }
.pv-login { font-size: .62rem; padding: 4px 8px; border-radius: var(--r); border: 1px solid currentColor; opacity: .8; }
.pv-body { padding: 16px 14px; display: grid; gap: 12px; align-content: start; }
.pv-h { font-weight: 800; font-size: 1.35rem; line-height: 1.12; letter-spacing: -.025em; min-height: 2.2em; }
.pv-p { font-size: .76rem; opacity: .7; line-height: 1.5; }
.pv-btn { display: inline-block; padding: 9px 14px; border-radius: var(--r); background: var(--p); color: #fff; font-weight: 700; font-size: .76rem; width: max-content; transition: background .4s ease; }
.pv-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-feats span { font-size: .62rem; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06); animation: pop .3s ease; }
.pv.is-dark .pv-feats span { background: rgba(255,255,255,.1); }
.pv-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-shop i { display: block; height: 58px; border-radius: var(--r); background: rgba(0,0,0,.06); position: relative; animation: pop .35s ease; }
.pv-shop i::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 40%; height: 5px; border-radius: 3px; background: var(--p); }
.pv.is-dark .pv-shop i { background: rgba(255,255,255,.08); }
.pv-events { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r); border: 1px solid rgba(0,0,0,.1); font-size: .7rem; animation: pop .35s ease; }
.pv.is-dark .pv-events { border-color: rgba(255,255,255,.12); }
.pv-events b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); background: var(--s); color: #fff; font-size: .8rem; }
.pv-events i { display: block; height: 6px; width: 70%; border-radius: 3px; background: currentColor; opacity: .2; margin-top: 5px; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-box { height: 44px; border-radius: var(--r); background: var(--s); opacity: .9; transition: background .4s ease; }
.pv-box + .pv-box { background: var(--p); opacity: .25; }
.pv-mail { font-size: .66rem; padding: 8px 10px; border-radius: var(--r); background: rgba(0,0,0,.05); display: flex; justify-content: space-between; animation: pop .35s ease; }
.pv.is-dark .pv-mail { background: rgba(255,255,255,.08); }
.pv-mail b { color: var(--p); }
.pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(0,0,0,.07); font-size: .62rem; opacity: .6; }
.pv.is-dark .pv-foot { border-top-color: rgba(255,255,255,.1); }
.pv [hidden] { display: none !important; }
.pv-phone { position: absolute; right: 2px; bottom: -6px; width: 108px; height: 210px; border-radius: 18px; background: #0E0F13; border: 3px solid #2A2D36; box-shadow: var(--shadow); transform: rotate(6deg); animation: pop .5s cubic-bezier(.2,.8,.2,1); z-index: 3; overflow: hidden; }
.pv-phone[hidden] { display: none; }
.pv-phone-screen { position: absolute; inset: 0; padding: 22px 10px 10px; display: grid; gap: 8px; align-content: start; font-family: 'Inter', sans-serif; color: #fff; }
.pv-phone-screen b { font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-phone-screen i { display: block; height: 34px; border-radius: 7px; background: var(--p, #1F4FD8); }
.pv-phone-screen i + i { background: rgba(255,255,255,.14); height: 22px; }
.pv-store { margin-top: 6px; display: grid; gap: 4px; font-size: .5rem; opacity: .85; }
.pv-store span { padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,.12); white-space: nowrap; animation: pop .3s ease; }
.wiz-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 10px); background: var(--bone); color: var(--bg); font-weight: 700; font-size: .82rem; padding: 8px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 6; white-space: nowrap; }
.wiz-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.wiz-unlocked { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-unlocked span { font-size: .76rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); animation: pop .3s ease; }
.wiz-unlocked span.is-new { border-color: var(--accent); color: var(--accent-2); }
.preview-note { margin-top: 12px; font-size: .85rem; color: var(--ink-3); }
.wiz-summary { display: grid; font-size: .92rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.wiz-summary div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.wiz-summary div:first-child { border-top: 0; }
.wiz-summary div span:first-child { color: var(--ink-3); }
.wiz-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11,12,15,.96); border-top: 1px solid var(--line); font-size: .85rem; }
.wiz-dock .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.wiz-dock .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s ease; }
.wiz-dock b { min-width: 3ch; text-align: right; }
.wiz-dock .btn { padding: 8px 12px; font-size: .8rem; }
.wiz-done { text-align: center; padding: 40px 10px; }
.wiz-done h2 { color: var(--ink); }
.wiz-done .lead { margin-inline: auto; }
@media (min-width: 1000px) { .wiz-grid { grid-template-columns: 1fr 400px; gap: 36px; align-items: start; } .wiz-dock { display: none; } .wiz { padding-bottom: 80px; } }
@media (max-width: 999px) { .wiz-preview { position: static; } }

/* ---------------------------------------------------------------- footer */

.site-footer { margin-top: 48px; border-top: 1px solid var(--line); padding: 56px 0 28px; background: var(--bg-2); }
.footer-inner { display: grid; gap: 32px; }
.footer-brand p { color: var(--ink-2); font-size: .95rem; max-width: 44ch; margin-top: 14px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer-cols a { display: block; font-size: .92rem; color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.footer-cols a:hover { color: var(--ink); }
.footer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1.2fr 2fr; } }

/* --------------------------------------------------------------- reveals */

.rise { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.rise.is-in { opacity: 1; transform: none; }
.rise:nth-child(2) { transition-delay: .07s; }
.rise:nth-child(3) { transition-delay: .14s; }
.rise:nth-child(4) { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .wiz-pane.is-active, .pv-phone, .pv-shop i { animation: none; } }

/* ---------------------------------------------------------- live preview */

.live { border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.live-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: .8rem; color: var(--ink-3); }
.live-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.live-bar span { margin-left: 8px; flex: 1; height: 20px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.live iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.live-build { position: absolute; inset: 38px 0 0; background: var(--bg); display: grid; place-items: center; text-align: center; transition: opacity .6s ease; }
.live-build.is-gone { opacity: 0; pointer-events: none; }
.live-build .bar { width: 220px; height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; margin: 16px auto 0; }
.live-build .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.live-build p { margin: 0; color: var(--ink); font-weight: 600; }
.live-build small { display: block; color: var(--ink-3); margin-top: 6px; min-height: 1.4em; }
.wiz-done .live { text-align: left; margin: 28px auto 0; max-width: 880px; }
@media (max-width: 720px) { .live iframe { height: 480px; } }