:root {
  --ink: #0b1220;
  --navy: #101a2d;
  --blue: #3b6df6;
  --blue-dark: #2451d2;
  --sky: #eef4ff;
  --mint: #bdeedc;
  --lime: #d9f99d;
  --paper: #ffffff;
  --surface: #f5f7fb;
  --line: #dfe5ef;
  --muted: #667085;
  --shadow: 0 20px 60px rgba(16, 24, 40, 0.12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding: 112px 0; }
.site-shell { overflow: hidden; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(255,255,255,.84);
  border-bottom: 1px solid rgba(223,229,239,.75);
  backdrop-filter: blur(16px);
}
.nav-wrap { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.04em; }
.brand-mark { width: 34px; height: 34px; }
.brand-mark rect { fill: var(--blue); }
.brand-mark path { fill: none; stroke: white; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-links { display: flex; align-items: center; gap: 30px; font-weight: 600; font-size: 14px; color: #344054; }
.nav-links a:hover, .text-link:hover { color: var(--blue); }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; font-size: 14px; font-weight: 700; }
.nav-toggle { display: none; border: 0; background: none; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); margin: 4px 0; display: block; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--blue);
  color: white;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(59,109,246,.26);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); background: var(--blue-dark); box-shadow: 0 14px 30px rgba(59,109,246,.32); }
.button-small { min-height: 44px; padding: 0 18px; border-radius: 12px; }
.button-secondary { background: white; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.button-secondary:hover { background: var(--surface); box-shadow: none; }
.button-light { background: white; color: var(--navy); box-shadow: none; }
.button-light:hover { background: var(--sky); }
.full { width: 100%; }

.hero { padding-top: 170px; padding-bottom: 90px; background: radial-gradient(circle at 70% 20%, #edf3ff 0, rgba(237,243,255,0) 44%), linear-gradient(180deg,#fff 0%,#fbfcff 100%); }
.hero-grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: 70px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
.eyebrow span { width: 28px; height: 2px; background: currentColor; }
.eyebrow.light { color: #b9c7ff; }
.hero h1, .section-heading h2, .workflow-copy h2, .faq-heading h2, .final-card h2 {
  margin: 20px 0 22px;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.hero h1 { font-size: clamp(52px, 6vw, 78px); }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-lede { max-width: 640px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 15px; margin-top: 34px; color: var(--muted); font-size: 14px; }
.hero-trust p { margin: 0; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; background: var(--navy); color: white; display: grid; place-items: center; margin-left: -8px; font-size: 11px; font-weight: 800; }
.avatar-stack span:first-child { margin-left: 0; background: var(--blue); }
.avatar-stack span:nth-child(2) { background: #8b5cf6; }
.avatar-stack span:nth-child(3) { background: #06b6d4; }
.avatar-stack span:nth-child(4) { background: #111827; }

.product-stage { position: relative; min-width: 0; }
.stage-glow { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .7; }
.stage-glow-one { width: 260px; height: 260px; background: #bcd0ff; right: -60px; top: -60px; }
.stage-glow-two { width: 180px; height: 180px; background: #bcebdc; left: 20px; bottom: -30px; }
.browser-card { position: relative; background: white; border: 1px solid #dfe5ef; border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.browser-topbar { height: 46px; display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; padding: 0 14px; border-bottom: 1px solid #e9edf4; background: #fafbfc; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d0d5dd; }
.browser-url { justify-self: center; font-size: 11px; color: #98a2b3; background: white; border: 1px solid #eaecf0; padding: 5px 14px; border-radius: 999px; }
.browser-action { color: #98a2b3; }
.app-layout { display: grid; grid-template-columns: 56px 1fr; min-height: 480px; }
.app-sidebar { background: #111827; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mini-logo { width: 32px; height: 32px; display: grid; place-items: center; background: var(--blue); color: white; border-radius: 10px; font-weight: 900; margin-bottom: 12px; }
.mini-logo img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.app-sidebar button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #98a2b3; background: transparent; }
.app-sidebar .side-active { color: white; background: rgba(255,255,255,.1); }
.app-main { padding: 20px; background: #f7f9fc; min-width: 0; }
.app-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 16px; }
.small-label { display: block; color: #98a2b3; font-size: 8px; letter-spacing: .16em; font-weight: 800; }
.app-heading h3 { font-size: 15px; margin: 4px 0 0; }
.status-pill { font-size: 9px; color: #a15c00; background: #fff2d6; border-radius: 999px; padding: 6px 9px; font-weight: 700; }
.proof-workspace { display: grid; grid-template-columns: 1fr 150px; gap: 12px; }
.proof-canvas { border: 1px solid #e2e7ef; border-radius: 14px; background: #edf1f6; min-width: 0; }
.canvas-toolbar { height: 30px; display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding: 0 10px; color: #667085; font-size: 9px; background: white; border-bottom: 1px solid #e2e7ef; border-radius: 14px 14px 0 0; }
.proof-sheet { width: 78%; margin: 20px auto; padding: 14px; background: white; border-radius: 5px; position: relative; box-shadow: 0 8px 22px rgba(16,24,40,.1); overflow: hidden; }
.proof-header { display: flex; justify-content: space-between; font-size: 6px; letter-spacing: .08em; color: #98a2b3; }
.proof-brand { color: var(--blue); font-weight: 900; }
.patch-art { display: grid; place-items: center; padding: 18px 0; }
.patch-ring { width: 145px; height: 145px; border-radius: 50%; background: linear-gradient(145deg,#24415e,#10253a); padding: 8px; box-shadow: inset 0 0 0 2px #5f7892, 0 10px 20px rgba(16,24,40,.18); }
.patch-center { height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; border: 2px solid #d7e5ef; text-align: center; }
.patch-center strong { font-size: 23px; letter-spacing: .08em; }
.patch-top, .patch-bottom { font-size: 7px; letter-spacing: .15em; }
.proof-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; border-top: 1px solid #edf0f4; padding-top: 8px; }
.proof-specs span { font-size: 6px; color: #667085; }
.proof-specs b { display: block; color: #344054; }
.watermark { position: absolute; inset: auto -16px 26px auto; transform: rotate(-25deg); color: rgba(59,109,246,.14); font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.proof-panel { background: white; border: 1px solid #e2e7ef; border-radius: 14px; padding: 12px; }
.panel-tabs { display: flex; gap: 12px; font-size: 8px; font-weight: 700; color: #98a2b3; border-bottom: 1px solid #edf0f4; padding-bottom: 8px; margin-bottom: 8px; }
.panel-tabs .active { color: var(--blue); }
.proof-panel label { display: block; font-size: 7px; font-weight: 700; color: #667085; margin: 8px 0 4px; }
.field, .note { border: 1px solid #e2e7ef; border-radius: 7px; padding: 7px; font-size: 7px; color: #344054; }
.note { min-height: 48px; }
.approve-button { width: 100%; margin-top: 12px; border: 0; border-radius: 8px; padding: 9px 4px; background: var(--blue); color: white; font-size: 8px; font-weight: 800; }
.floating-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; background: white; border: 1px solid #e6eaf0; box-shadow: 0 16px 40px rgba(16,24,40,.14); padding: 12px 14px; border-radius: 14px; }
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { font-size: 11px; }
.floating-card small { color: #98a2b3; font-size: 9px; }
.float-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #dcfae6; color: #079455; font-weight: 900; }
.float-icon.comment { background: #eef4ff; color: var(--blue); }
.floating-one { left: -28px; bottom: 26px; }
.floating-two { right: -24px; top: 88px; }

.logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.logo-row { min-height: 92px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; gap: 20px; color: #98a2b3; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.section-heading { max-width: 760px; }
.section-heading.centered { text-align: center; margin: 0 auto 58px; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2, .workflow-copy h2, .faq-heading h2, .final-card h2 { font-size: clamp(40px, 5vw, 60px); }
.section-heading p, .workflow-copy > p, .faq-heading p { color: var(--muted); font-size: 18px; }

.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.feature-card { position: relative; min-height: 420px; border-radius: var(--radius); border: 1px solid var(--line); background: white; padding: 34px; overflow: hidden; }
.feature-large { grid-column: span 2; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; background: linear-gradient(135deg,#fff,#f6f9ff); }
.feature-number { display: inline-flex; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .16em; margin-bottom: 14px; }
.feature-card h3 { margin: 0 0 12px; font-family: Manrope, sans-serif; font-size: 30px; line-height: 1.1; letter-spacing: -.04em; }
.feature-card p { color: var(--muted); margin: 0; }
.check-list { list-style: none; padding: 0; margin: 24px 0 0; }
.check-list li { position: relative; padding-left: 28px; margin: 12px 0; color: #344054; font-weight: 600; font-size: 14px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: #e7f8ef; color: #079455; font-size: 11px; }
.composer-visual { border-radius: 18px; overflow: hidden; border: 1px solid #dce3ee; box-shadow: 0 16px 40px rgba(16,24,40,.1); background: white; }
.composer-toolbar { min-height: 44px; display: flex; gap: 18px; align-items: center; padding: 0 18px; font-size: 10px; color: #667085; border-bottom: 1px solid #e5eaf1; }
.composer-board { height: 330px; position: relative; background: #edf1f6; overflow: hidden; }
.grid-lines { position: absolute; inset: 0; background-image: linear-gradient(#dfe5ec 1px, transparent 1px), linear-gradient(90deg,#dfe5ec 1px, transparent 1px); background-size: 24px 24px; opacity: .55; }
.selected-art { position: absolute; width: 150px; height: 150px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 2px solid var(--blue); display: grid; place-items: center; }
.handle { position: absolute; width: 10px; height: 10px; border: 2px solid var(--blue); background: white; border-radius: 50%; }
.h1{left:-6px;top:-6px}.h2{right:-6px;top:-6px}.h3{left:-6px;bottom:-6px}.h4{right:-6px;bottom:-6px}
.simple-patch { width: 110px; height: 110px; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(145deg,#162a44,#0f172a); color: white; border: 6px solid #d7e3ec; font-size: 48px; font-weight: 900; box-shadow: 0 12px 24px rgba(15,23,42,.25); }
.integration-visual { height: 180px; display: flex; align-items: center; justify-content: center; }
.shopify-badge, .proofello-badge { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: white; box-shadow: 0 12px 26px rgba(16,24,40,.12); }
.shopify-badge { background: #95bf47; }.proofello-badge{background:var(--blue)}
.proofello-badge img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.connector-line { width: 110px; height: 2px; background: repeating-linear-gradient(90deg,#b7c2d0 0 8px,transparent 8px 15px); position: relative; }
.connector-line::after { content: "→"; position: absolute; right: -2px; top: -12px; color: #98a2b3; }
.approval-visual { height: 180px; display: grid; place-items: center; }
.approval-window { width: 88%; border: 1px solid #dce3ec; border-radius: 16px; padding: 12px; box-shadow: 0 12px 28px rgba(16,24,40,.08); }
.approval-art { height: 94px; border-radius: 10px; background: radial-gradient(circle at center,#294a68 0 30%,#dce5ec 31% 42%,#eef2f6 43%); }
.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-size: 9px; }
.approval-actions span,.approval-actions strong { display:grid;place-items:center;padding:8px;border-radius:8px; }
.approval-actions span{background:#f2f4f7;color:#667085}.approval-actions strong{background:var(--blue);color:white}
.history-visual { margin: 4px 0 28px; }
.history-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid #edf0f4; padding: 14px 0; }
.history-item span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eef4ff; color: var(--blue); font-size: 11px; font-weight: 800; }
.history-item strong { font-size: 12px; }.history-item small{font-size:10px;color:#98a2b3}
.feature-accent { background: var(--navy); color: white; border-color: transparent; }
.feature-accent p { color: #b7c0ce; }.feature-accent .feature-number{color:#9fb4ff}
.shield-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--mint); font-size: 34px; margin-bottom: 36px; }
.watermark-demo { position: absolute; left: -30px; right: -30px; bottom: 28px; transform: rotate(-7deg); white-space: nowrap; color: rgba(255,255,255,.08); font-size: 21px; font-weight: 900; letter-spacing: .12em; }
.mobile-visual { display: grid; place-items: center; height: 210px; }
.phone-frame { width: 120px; border: 6px solid var(--navy); border-radius: 26px; padding: 10px; background: white; box-shadow: 0 18px 34px rgba(16,24,40,.14); }
.phone-top { width: 34px; height: 5px; border-radius: 999px; background: #d0d5dd; margin: 0 auto 10px; }
.phone-art { height: 84px; border-radius: 10px; background: radial-gradient(circle,#284661 0 34%,#dbe6ef 35% 44%,#edf2f6 45%); }
.phone-status { font-size: 7px; padding: 8px 0; color: #667085; }
.phone-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 6px; }
.phone-buttons span,.phone-buttons strong{padding:6px 3px;text-align:center;border-radius:6px}.phone-buttons span{background:#f2f4f7}.phone-buttons strong{background:var(--blue);color:white}

.workflow { background: var(--navy); color: white; }
.workflow-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; }
.workflow-copy > p { color: #b7c0ce; margin-bottom: 34px; }
.workflow-steps { position: relative; }
.workflow-steps::before { content:""; position:absolute; left:25px; top:30px; bottom:30px; width:1px; background:#344054; }
.workflow-steps article { position:relative; display:grid;grid-template-columns:52px 1fr;gap:22px;padding:0 0 34px; }
.workflow-steps article:last-child { padding-bottom:0; }
.workflow-steps article > span { position:relative;z-index:1;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#1f2a3d;border:1px solid #3d4a5f;color:#9fb4ff;font-weight:900; }
.workflow-steps h3 { margin: 4px 0 6px; font-family:Manrope,sans-serif;font-size:22px; }
.workflow-steps p { margin:0;color:#aab4c2; }

.pricing { background: #f8faff; }
.billing-toggle { width:max-content; margin:34px auto 48px; display:flex; gap:4px; padding:5px; border-radius:999px; background:#eaf0fb; }
.billing-toggle button { appearance:none; border:0; border-radius:999px; padding:13px 20px; background:transparent; color:#667085; font:800 14px/1 Inter,sans-serif; cursor:pointer; }
.billing-toggle button span { margin-left:5px; color:#07884a; font-size:10px; }
.billing-toggle button.is-active { background:#fff; color:var(--navy); box-shadow:0 5px 16px rgba(16,24,40,.12); }
.pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.price-card { position: relative; display:flex; flex-direction:column; background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; }
.price-card.featured { border: 2px solid var(--blue); box-shadow: 0 18px 50px rgba(59,109,246,.14); transform: translateY(-12px); }
.plan-label { display:block;color:var(--blue);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.12em; }
.price-card h3 { font-family:Manrope,sans-serif;font-size:42px;letter-spacing:-.05em;margin:16px 0 10px; white-space:nowrap; }
.price-card h3 span { font-family:Inter,sans-serif;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0; }
.price-card > p { color:var(--muted);min-height:76px; }
.price-card .button { margin-top:auto; }
.price-card .check-list { margin-top:24px; }
.plan-limit { width:max-content; max-width:100%; margin:6px 0 2px; padding:7px 10px; border-radius:999px; background:#edf3ff; color:#2255c9; font-size:11px; font-weight:800; }
.annual-note { display:none; min-height:34px; margin-top:9px; color:#07884a; font-size:11px; font-weight:800; line-height:1.45; }
.pricing[data-billing="annual"] .annual-note { display:block; }
.pricing-footnote { margin:34px auto 0; color:#657187; text-align:center; font-size:13px; }
.pricing-footnote strong { color:var(--navy); }
.pro-card { background:#101c30; border-color:#101c30; color:#fff; }
.pro-card .plan-label,.pro-card .check-list li::before { color:#75a7ff; }
.pro-card h3 span,.pro-card > p { color:#bdc8d9; }
.pro-card .plan-limit { background:#243249; color:#d9e6ff; }
.pro-card .button-secondary { border-color:#fff; background:#fff; color:#101c30; }
.pro-card .check-list li { color:#edf4ff; }
.popular { position:absolute;right:20px;top:20px;background:#eef4ff;color:var(--blue);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;padding:7px 10px;border-radius:999px; }

/* Cinematic real-artwork showcase */
.artwork-showcase { position:relative; overflow:hidden; background:linear-gradient(145deg,#091426 0%,#10213a 52%,#0b1930 100%); color:#fff; }
.artwork-showcase::before { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent); }
.showcase-orbit { position:absolute; width:780px; height:780px; right:-300px; top:-250px; border:1px solid rgba(119,166,255,.18); border-radius:50%; box-shadow:0 0 0 90px rgba(99,139,255,.025),0 0 0 180px rgba(99,139,255,.018); animation:orbitPulse 9s ease-in-out infinite; }
.showcase-heading { position:relative; z-index:1; display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; margin-bottom:54px; }
.showcase-heading h2 { max-width:820px; margin:18px 0 0; font:800 clamp(38px,5vw,68px)/1.04 Manrope,Inter,sans-serif; letter-spacing:-.05em; }
.showcase-heading > p { margin:0; color:#b9c9dd; font-size:16px; line-height:1.75; }
.artwork-stage { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr .85fr; grid-template-rows:300px 245px; gap:18px; perspective:1200px; }
.artwork-feature { position:relative; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:26px; background:rgba(255,255,255,.075); box-shadow:0 26px 70px rgba(0,0,0,.25); transform-style:preserve-3d; transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.artwork-feature:hover { border-color:rgba(130,173,255,.55); box-shadow:0 32px 85px rgba(0,0,0,.38),0 0 45px rgba(59,109,246,.12); }
.artwork-feature-main { grid-row:1 / 3; }
.artwork-feature-tall { grid-row:1 / 3; }
.artwork-feature-wide { grid-column:3; grid-row:1; }
.artwork-feature-small { grid-row:2; }
.artwork-image-wrap { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.artwork-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,12,24,.96) 0%,rgba(5,12,24,.12) 55%,transparent 78%); }
.artwork-image-wrap img { width:100%; height:100%; object-fit:contain; padding:24px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.32)); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease; }
.artwork-feature:hover img { transform:scale(1.07) translateY(-5px); filter:drop-shadow(0 24px 38px rgba(0,0,0,.42)); }
.artwork-dark { background:radial-gradient(circle at 50% 30%,#2a3d55,#111b2b 70%); }
.artwork-space { background:radial-gradient(circle at 50% 25%,#253e68,#101b2e 70%); }
.artwork-surf { background:linear-gradient(145deg,#d9f4ef,#f9dfbc); }
.artwork-mission { background:radial-gradient(circle,#344a68,#152238 72%); }
.artwork-skate { background:linear-gradient(145deg,#cfe5dc,#78998b); }
.artwork-card-copy { position:absolute; z-index:2; left:24px; right:24px; bottom:22px; transform:translateZ(30px); }
.artwork-card-copy span { color:#84aaf8; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.artwork-card-copy h3 { margin:7px 0 6px; font:800 23px/1.08 Manrope,Inter,sans-serif; }
.artwork-card-copy p { margin:0; color:#c0ccdc; font-size:12px; line-height:1.5; }
.artwork-feature-small .artwork-card-copy p { display:none; }
.floating-status { position:absolute; z-index:4; top:20px; right:20px; display:grid; grid-template-columns:28px auto; gap:0 9px; align-items:center; padding:10px 13px; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(9,21,39,.72); backdrop-filter:blur(14px); animation:floatBadge 4s ease-in-out infinite; }
.floating-status > span { grid-row:1 / 3; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#22a06b; }
.floating-status strong { font-size:11px; }.floating-status small{color:#a9b8ca;font-size:8px}
.floating-palette { position:absolute; z-index:4; top:16px; right:16px; display:flex; align-items:center; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.86); box-shadow:0 10px 26px rgba(16,24,40,.18); backdrop-filter:blur(12px); }
.floating-palette i { width:18px; height:18px; margin-left:-3px; border:2px solid #fff; border-radius:50%; background:var(--c); }.floating-palette b{margin-left:5px;color:#344054;font-size:9px}
.orbit-ring { position:absolute; top:19%; left:12%; width:76%; aspect-ratio:1; border:1px solid rgba(126,168,255,.28); border-radius:50%; animation:spinSlow 16s linear infinite; }
.orbit-ring::before { content:""; position:absolute; width:8px; height:8px; top:10%; left:14%; border-radius:50%; background:#8ab2ff; box-shadow:0 0 18px #77a6ff; }
.showcase-flow { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:18px; margin-top:36px; color:#b7c7da; font-size:12px; font-weight:700; }
.showcase-flow span { display:flex; align-items:center; gap:8px; white-space:nowrap; }.showcase-flow b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(111,151,234,.15);color:#8fb2ff;font-size:9px}.showcase-flow i{width:45px;height:1px;background:linear-gradient(90deg,#4f6f9f,transparent);position:relative}.showcase-flow i::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:#77a6ff;animation:flowDot 2.2s ease-in-out infinite}
@keyframes orbitPulse{50%{transform:scale(1.05);opacity:.65}}@keyframes floatBadge{50%{transform:translateY(-7px)}}@keyframes spinSlow{to{transform:rotate(360deg)}}@keyframes flowDot{0%{transform:translateX(-38px);opacity:0}50%{opacity:1}100%{transform:translateX(0);opacity:0}}

@media (max-width:980px){.showcase-heading{grid-template-columns:1fr;gap:22px}.artwork-stage{grid-template-columns:1fr 1fr;grid-template-rows:420px 280px 280px}.artwork-feature-main{grid-row:1}.artwork-feature-tall{grid-row:1}.artwork-feature-wide{grid-column:1 / 3;grid-row:2}.artwork-feature-small{grid-row:3}.showcase-flow{flex-wrap:wrap}.showcase-flow i{width:24px}}
@media (max-width:650px){.artwork-stage{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,360px)}.artwork-feature,.artwork-feature-main,.artwork-feature-tall,.artwork-feature-wide,.artwork-feature-small{grid-column:1;grid-row:auto}.showcase-flow{display:grid;grid-template-columns:1fr 1fr}.showcase-flow i{display:none}.showcase-heading h2{font-size:38px}.artwork-image-wrap img{padding:32px}}
@media (prefers-reduced-motion:reduce){.showcase-orbit,.floating-status,.orbit-ring,.showcase-flow i::after{animation:none}.artwork-feature,.artwork-image-wrap img{transition:none}}

/* Lower-page conversion and motion system */
.feature-card { isolation:isolate; transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; }
.feature-card::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(59,109,246,.12),transparent 45%); transition:opacity .35s ease; pointer-events:none; }
.feature-card:hover { transform:translateY(-7px); border-color:#c5d5fa; box-shadow:0 24px 60px rgba(27,54,102,.13); }.feature-card:hover::after{opacity:1}
.feature-link { display:inline-flex; align-items:center; gap:8px; width:max-content; margin-top:18px; color:#2f63df; font-size:12px; font-weight:900; text-decoration:none; }.feature-link span{transition:transform .25s ease}.feature-link:hover span{transform:translateX(5px)}.feature-link-light{position:relative;z-index:2;color:#a9c4ff}
.action-bridge { padding:0 0 88px; background:#fff; }
.action-bridge-card { --spot-x:70%; --spot-y:30%; position:relative; min-height:470px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:48px; overflow:hidden; padding:52px 64px; border-radius:34px; color:#fff; background:radial-gradient(600px circle at var(--spot-x) var(--spot-y),rgba(91,132,255,.32),transparent 52%),linear-gradient(135deg,#0a1629,#142844 65%,#0d1d34); box-shadow:0 35px 90px rgba(15,34,63,.24); }
.action-bridge-card::before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
.action-beam{position:absolute;width:620px;height:190px;right:-120px;top:80px;background:linear-gradient(90deg,transparent,rgba(83,136,255,.18),transparent);filter:blur(18px);transform:rotate(-24deg);animation:beamSweep 7s ease-in-out infinite}
.action-proof-stack{position:relative;z-index:2;height:330px;perspective:1000px}.mini-proof{position:absolute;width:250px;height:300px;display:grid;place-items:center;padding:28px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:linear-gradient(145deg,#fff,#eaf0f8);box-shadow:0 28px 55px rgba(0,0,0,.34);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.mini-proof img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.22))}.mini-proof-back{left:6%;top:14px;transform:rotate(-12deg) translateZ(-50px);opacity:.72}.mini-proof-mid{left:25%;top:3px;transform:rotate(5deg) translateZ(-20px)}.mini-proof-front{left:43%;top:20px;transform:rotate(13deg) translateZ(20px)}.mini-proof-front span{position:absolute;right:14px;top:14px;padding:7px 10px;border-radius:999px;background:#daf7e9;color:#087c49;font-size:8px;font-weight:900}.action-bridge-card:hover .mini-proof-back{transform:rotate(-16deg) translate(-12px,-8px)}.action-bridge-card:hover .mini-proof-mid{transform:rotate(2deg) translateY(-12px)}.action-bridge-card:hover .mini-proof-front{transform:rotate(17deg) translate(12px,-4px)}
.action-bridge-copy{position:relative;z-index:3}.action-kicker{display:inline-flex;padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#91b3ff;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.action-bridge-copy h2{margin:20px 0 14px;font:800 clamp(36px,4.6vw,60px)/1 Manrope,Inter,sans-serif;letter-spacing:-.05em}.action-bridge-copy p{max-width:640px;color:#bdcadb;font-size:16px;line-height:1.7}.action-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}.action-buttons .button{position:relative;overflow:hidden}.action-primary{background:#fff;color:#13223a}.action-primary b{margin-left:10px}.action-secondary{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(10px)}.button-pulse{position:absolute;width:12px;height:12px;left:18px;border:2px solid #5689f4;border-radius:50%;opacity:0;animation:ctaPulse 2.4s ease-out infinite}.action-primary{padding-left:22px}.action-bridge-copy small{color:#8497b1}
.workflow-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.workflow-demo-link{color:#a8c1f4;font-size:12px;font-weight:900;text-underline-offset:4px}.workflow-steps article{transition:transform .3s ease,background .3s ease}.workflow-steps article:hover{transform:translateX(10px);background:rgba(255,255,255,.045);border-radius:18px}.workflow-steps article>span{transition:transform .35s ease,background .35s ease}.workflow-steps article:hover>span{transform:rotate(-8deg) scale(1.08);background:#315db3;color:#fff}
.plan-action{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:10px}.plan-action::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .65s ease}.plan-action:hover::before{left:130%}.plan-action span{transition:transform .25s ease}.plan-action:hover span{transform:translateX(5px)}
.final-card{position:relative;overflow:hidden}.final-card::before{content:"";position:absolute;width:420px;height:420px;right:-80px;top:-240px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018);animation:orbitPulse 8s ease-in-out infinite}.final-card>*{position:relative;z-index:1}.magnetic-cta span{display:inline-block;margin-left:8px;transition:transform .25s ease}.magnetic-cta:hover span{transform:translate(4px,-2px)}
@keyframes beamSweep{0%,100%{transform:translateX(-100px) rotate(-24deg);opacity:.35}50%{transform:translateX(120px) rotate(-24deg);opacity:1}}@keyframes ctaPulse{0%{transform:scale(.5);opacity:0}25%{opacity:.7}100%{transform:scale(3.8);opacity:0}}
@media(max-width:900px){.action-bridge-card{grid-template-columns:1fr;padding:42px}.action-proof-stack{order:2;height:300px}.action-bridge-copy{order:1}.mini-proof{width:220px;height:270px}.mini-proof-back{left:4%}.mini-proof-mid{left:24%}.mini-proof-front{left:45%}}
@media(max-width:600px){.action-bridge{padding-bottom:60px}.action-bridge-card{padding:32px 24px;border-radius:24px}.action-proof-stack{height:245px}.mini-proof{width:165px;height:215px;padding:20px}.mini-proof-back{left:0}.mini-proof-mid{left:18%}.mini-proof-front{left:36%}.action-buttons{display:grid}.action-buttons .button{width:100%}.feature-link{margin-bottom:6px}.workflow-steps article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.action-beam,.button-pulse,.final-card::before{animation:none}.feature-card,.mini-proof,.workflow-steps article,.plan-action::before{transition:none}}

.testimonial { padding-top: 30px; }
.testimonial-card { position: relative; background: linear-gradient(135deg,#eef4ff,#f7f9ff); border:1px solid #dbe5fb; border-radius:32px; padding:72px; text-align:center; }
.quote-mark { font-family:Georgia,serif;font-size:96px;line-height:.5;color:#9fb4ff; }
blockquote { max-width:900px;margin:20px auto 34px;font-family:Manrope,sans-serif;font-size:clamp(28px,4vw,46px);line-height:1.2;letter-spacing:-.04em;font-weight:700; }
.quote-author { display:flex;justify-content:center;align-items:center;gap:14px;text-align:left; }
.author-avatar { width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:white;font-weight:900; }
.quote-author strong,.quote-author span{display:block}.quote-author span{font-size:13px;color:var(--muted)}

.faq-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start; }
.faq-heading { position:sticky;top:120px; }
.faq-heading a { color:var(--blue);font-weight:700; }
.accordion details { border-bottom:1px solid var(--line); padding:0; }
.accordion summary { cursor:pointer;list-style:none;padding:24px 44px 24px 0;font-family:Manrope,sans-serif;font-size:20px;font-weight:700;position:relative; }
.accordion summary::-webkit-details-marker{display:none}.accordion summary::after{content:"+";position:absolute;right:4px;top:22px;color:var(--blue);font-size:24px}.accordion details[open] summary::after{content:"–"}
.accordion p { color:var(--muted);margin:0;padding:0 42px 24px 0; }

.final-cta { padding-top:40px; }
.final-card { background: linear-gradient(135deg,#3b6df6,#254ed1); color:white; border-radius:32px; padding:66px 72px; display:flex;justify-content:space-between;gap:40px;align-items:center;box-shadow:0 24px 70px rgba(59,109,246,.28); }
.final-card h2 { margin-bottom:14px; }.final-card p{margin:0;color:#dce5ff;font-size:18px}.final-actions{display:flex;flex-direction:column;gap:18px;align-items:center;min-width:190px}.light-link{color:white}

.site-footer { padding:80px 0 28px;background:#0d1525;color:#d5dbe4; }
.footer-grid { display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:48px; }
.footer-brand { color:white; }.site-footer p{color:#98a2b3;font-size:14px}.site-footer h4{color:white;margin:0 0 14px}.site-footer a:not(.button):not(.brand){display:block;color:#aab4c2;font-size:14px;margin:9px 0}.site-footer a:hover{color:white}
.footer-bottom { display:flex;justify-content:space-between;border-top:1px solid #263246;margin-top:54px;padding-top:22px;color:#7f8a9b;font-size:12px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1;transform:none; }
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}

@media (max-width: 980px) {
  .nav-wrap { grid-template-columns:1fr auto; }
  .nav-toggle { display:block; grid-column:2; grid-row:1; }
  .nav-links,.nav-actions { display:none; }
  .site-header.open .nav-links,.site-header.open .nav-actions { display:flex; grid-column:1 / -1; }
  .site-header.open .nav-wrap { padding:18px 0; }
  .site-header.open .nav-links { flex-direction:column;align-items:flex-start;padding-top:12px; }
  .site-header.open .nav-actions { justify-content:flex-start;padding-bottom:8px; }
  .hero-grid,.workflow-grid,.faq-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }.hero-copy .eyebrow,.hero-actions,.hero-trust{justify-content:center}.hero-lede{margin-left:auto;margin-right:auto}
  .product-stage{max-width:760px;margin:0 auto;width:100%}
  .feature-large{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto}.price-card.featured{transform:none}.faq-heading{position:static}.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 700px) {
  .container{width:min(100% - 28px,1180px)}.section-pad{padding:78px 0}.hero{padding-top:130px}.hero h1{font-size:48px}.hero-grid{gap:46px}.browser-card{transform:none}.app-layout{grid-template-columns:42px 1fr}.app-sidebar{padding:10px 5px}.app-sidebar button{width:30px;height:30px}.proof-workspace{grid-template-columns:1fr}.proof-panel{display:none}.floating-card{display:none}.proof-sheet{width:86%}.logo-row{grid-template-columns:repeat(2,1fr);padding:20px 0}.logo-row span:last-child{grid-column:1 / -1}.feature-grid{grid-template-columns:1fr}.feature-large{grid-column:auto}.feature-card{min-height:auto;padding:26px}.composer-board{height:260px}.workflow-grid{gap:50px}.testimonial-card{padding:52px 24px}.final-card{padding:48px 26px;display:block;text-align:center}.final-card .eyebrow{justify-content:center}.final-actions{margin-top:30px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:6px 0}.nav-actions{flex-wrap:wrap}.section-heading h2,.workflow-copy h2,.faq-heading h2,.final-card h2{font-size:40px}.hero-trust{align-items:flex-start}.hero-trust p{text-align:left}.proof-sheet{padding:10px}.patch-ring{width:120px;height:120px}.patch-center strong{font-size:18px}
}

/* Interactive demo and real-art product previews */
.real-art-preview{display:grid;place-items:center}.real-art-preview img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(10,20,34,.16))}.composer-demo-art{display:block;width:100%;height:100%;object-fit:contain}.approval-art,.phone-art{overflow:hidden}.approval-art img,.phone-art img{width:100%;height:100%;object-fit:contain}
.home-demo-showcase{overflow:hidden;background:linear-gradient(180deg,#f7fbff 0%,#fff 100%);border-top:1px solid #e8eef6;border-bottom:1px solid #e8eef6}.home-demo-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:clamp(40px,7vw,100px);align-items:center}.home-demo-copy h2{margin:12px 0 18px;font:800 clamp(36px,4.8vw,62px)/1.02 Manrope,Inter,sans-serif;letter-spacing:-.045em}.home-demo-copy p{max-width:650px;color:#5f6c80;font-size:18px;line-height:1.7}.home-demo-copy small{display:block;margin-top:18px;color:#758196;font-weight:700}.demo-art-stack{position:relative;min-height:540px}.demo-art-card{position:absolute;width:48%;margin:0;padding:14px;border:1px solid #dde6f0;border-radius:24px;background:#fff;box-shadow:0 28px 70px rgba(20,39,68,.16)}.demo-art-card img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:16px;background:#f8fafc}.demo-art-card figcaption{padding:10px 4px 2px;color:#526176;font-size:12px;font-weight:800;text-align:center}.demo-art-one{left:0;top:72px;transform:rotate(-7deg)}.demo-art-two{right:2%;top:0;z-index:2;transform:rotate(5deg)}.demo-art-three{left:29%;bottom:0;z-index:3;width:44%;transform:rotate(-1deg)}.button-outline-light{border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff}.button-outline-light:hover{background:rgba(255,255,255,.1)}

.auto-color-tour { background:#081524; color:#fff; }
.product-tour-slide { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); gap:clamp(42px,6vw,88px); align-items:center; padding:34px; border:1px solid #2b3a4d; border-radius:30px; background:linear-gradient(145deg,#172536,#111d2d); box-shadow:0 28px 80px rgba(0,0,0,.24); }
.auto-color-window { overflow:hidden; border-radius:24px; background:#fff; color:#111827; box-shadow:0 22px 60px rgba(0,0,0,.24); }
.tour-window-bar { display:flex; align-items:center; gap:7px; height:46px; padding:0 18px; border-bottom:1px solid #dde4ee; color:#718096; font-size:10px; }
.tour-window-bar > span { width:8px; height:8px; border-radius:50%; background:#cbd3df; }
.tour-window-bar strong { margin-left:12px; }
.auto-color-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 22px 14px; }
.auto-color-heading > span { padding:7px 10px; border-radius:999px; background:#eaf1ff; color:#2760da; font-size:10px; font-weight:900; }
.auto-color-workspace { display:grid; grid-template-columns:minmax(180px,.9fr) minmax(220px,1.1fr); gap:14px; padding:12px 22px 20px; }
.auto-color-art { min-height:360px; display:grid; place-items:center; padding:14px; border-radius:16px; background:#edf3fa; }
.auto-color-art img { width:100%; height:100%; max-height:340px; object-fit:contain; mix-blend-mode:multiply; }
.detected-color-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; }
.detected-color-list article { min-width:0; display:grid; grid-template-columns:31px minmax(0,1fr); gap:9px; align-items:center; padding:10px; border:1px solid #dce4ef; border-radius:12px; }
.detected-color-list article > span { width:31px; height:31px; border-radius:9px; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.detected-color-list strong,.detected-color-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detected-color-list strong { font-size:11px; }
.detected-color-list small { margin-top:3px; color:#718096; font-size:8px; }
.auto-color-result { display:flex; align-items:center; gap:9px; margin:0 22px 22px; padding:12px 14px; border-radius:12px; background:#e9fbf2; color:#087b45; font-size:12px; }
.auto-color-result span { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#c9f3dc; }
.tour-step { width:max-content; padding:7px 12px; border:1px solid #3a4c61; border-radius:999px; color:#86adff; font-size:11px; font-weight:900; letter-spacing:.1em; }
.product-tour-copy h2 { margin:20px 0 18px; font:800 clamp(36px,4.6vw,62px)/1.04 Manrope,Inter,sans-serif; letter-spacing:-.045em; }
.product-tour-copy > p { color:#bfd0e5; font-size:17px; line-height:1.72; }
.tour-checks { margin:26px 0 32px; }
.tour-checks li { color:#f3f7fc; }

@media(max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-card.featured{transform:none}}
@media(max-width:900px){.home-demo-grid,.product-tour-slide{grid-template-columns:1fr}.demo-art-stack{min-height:500px;max-width:650px;width:100%;margin:0 auto}.product-tour-copy{order:-1}.auto-color-workspace{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.pricing-grid{grid-template-columns:1fr}.billing-toggle{margin-bottom:34px}.price-card h3{font-size:44px}}
@media(max-width:620px){.product-tour-slide{padding:16px;border-radius:22px}.auto-color-workspace{grid-template-columns:1fr}.auto-color-art{min-height:260px}.detected-color-list{grid-template-columns:1fr}.detected-color-list article:nth-child(n+7){display:none}}
@media(max-width:560px){.nav-actions .button-secondary{display:none}.home-demo-copy h2{font-size:38px}.demo-art-stack{min-height:400px}.demo-art-card{width:52%;padding:9px;border-radius:18px}.demo-art-card figcaption{font-size:10px}.demo-art-three{width:48%;left:26%}.billing-toggle button{padding:12px 14px}.billing-toggle button span{display:block;margin:4px 0 0}}