/* ==========================================================================
   Studio Art App — Indigo Tech-SaaS design system
   White surfaces · indigo/violet accent · Plus Jakarta Sans + Inter
   Conversion-focused landing: gradient hero, stats, comparison, testimonials.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-tint: #f6f5fc;
  --surface: #ffffff;
  --surface-2: #f3f1fb;

  --ink: #17151f;
  --ink-soft: #5c5870;
  --ink-faint: #908ca3;

  --accent: #6d5ef0;
  --accent-deep: #5747e4;
  --accent-soft: #eeebfe;
  --violet: #9b6cf2;

  --line: #ececf3;
  --line-strong: #ddd9ea;

  --green: #1f9d6b;
  --green-soft: #e6f6ee;
  --coral: #ef5a5a;
  --coral-soft: #fdecec;
  --amber: #f5b301;
  --danger: #d8362f;
  --danger-soft: #fdecec;
  --info: #2b5d8a;

  --grad: linear-gradient(135deg, #6d5ef0 0%, #9b6cf2 100%);
  --grad-soft: linear-gradient(180deg, #f1eefe 0%, #ffffff 70%);

  --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23,21,31,.04), 0 1px 3px rgba(23,21,31,.06);
  --shadow: 0 10px 30px rgba(67,56,160,.10), 0 2px 8px rgba(23,21,31,.05);
  --shadow-lg: 0 30px 70px rgba(67,56,160,.18), 0 12px 28px rgba(23,21,31,.07);
  --glow: 0 12px 34px rgba(109,94,240,.40);
  --ring: 0 0 0 4px rgba(109,94,240,.18);

  --sidebar-width: 248px;
  --max-width: 1160px;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-deep); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--accent); }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; }
::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* ---- Typography ---- */
h1,h2,h3,h4,.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 1.16rem; color: var(--ink-soft); line-height: 1.65; }
.text-secondary { color: var(--ink-soft); }
.muted { color: var(--ink-faint); font-size: .85rem; }
.text-center { text-align: center; }
.accent { color: var(--accent); }
.italic-accent { color: var(--accent); font-weight: 800; }
.serif { font-family: var(--font-display); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Layout helpers ---- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.flex-center { display: flex; align-items: center; } .wrap { flex-wrap: wrap; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.w-full{width:100%}

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; background: none;
  transition: transform .16s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--glow); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; transform: translateY(-2px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-white { background: #fff; color: var(--accent-deep); }
.btn-white:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost { color: var(--ink-soft); padding-left: 12px; padding-right: 12px; }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-block { width: 100%; } .btn-lg { padding: 16px 28px; font-size: 15px; } .btn-sm { padding: 9px 15px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Pills / chips ---- */
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); border: 1px solid #ded7fb; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card-pad-sm { padding: 20px; }
.panel { background: var(--surface-2); border-radius: var(--r-lg); padding: 28px; }

/* ---- Feature icon chip ---- */
.ico { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 16px; }
.ico svg { width: 24px; height: 24px; }
.ico-coral { background: var(--coral-soft); color: var(--coral); }
.ico-green { background: var(--green-soft); color: var(--green); }

/* ---- Stat ---- */
.stat-value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; }
.stat-label { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }

/* ---- Forms ---- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],select,textarea {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 12px 14px; outline: none; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
input:not([type]):focus,input:focus,select:focus,textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
textarea { resize: vertical; }
.field { margin-bottom: 18px; }
.field .error { color: var(--danger); font-size: 12.5px; margin-top: 6px; }
.checkbox-row { display: flex; align-items: center; gap: 9px; }
.checkbox-row label { margin: 0; font-weight: 400; color: var(--ink-soft); }
input[type=checkbox],input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-soft); }
.badge-free { background: var(--surface-2); color: var(--ink-soft); }
.badge-starter { background: var(--accent-soft); color: var(--accent-deep); border-color: #ded7fb; }
.badge-pro { background: var(--accent); color: #fff; border-color: var(--accent); }
.badge-business { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge-agency { background: var(--amber); color: #3a2e05; border-color: var(--amber); }
.badge-pending { background: var(--surface-2); color: var(--ink-soft); }
.badge-processing { background: #e9f0f6; color: var(--info); }
.badge-done { background: var(--green-soft); color: var(--green); }
.badge-failed { background: var(--danger-soft); color: var(--danger); }

/* ---- Progress ---- */
.progress-bar { width: 100%; height: 9px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad); }

/* ---- Flash ---- */
.flash { border-radius: var(--r-sm); padding: 13px 16px; font-size: 14px; margin-bottom: 18px; border: 1px solid; }
.flash-success { background: var(--green-soft); border-color: #c9ead9; color: var(--green); }
.flash-error { background: var(--danger-soft); border-color: #f3cdcb; color: var(--danger); }

/* ---- Tables (generic) ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; border-bottom: 1px solid var(--line); }
td { padding: 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-width); flex-shrink: 0; position: fixed; inset: 0 auto 0 0;
  background: var(--bg-tint); border-right: 1px solid var(--line); padding: 26px 18px; display: flex; flex-direction: column; }
.brand { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.brand span { color: var(--accent); }
.sidebar .brand { padding: 0 10px 28px; }
.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: 14px; font-weight: 500; transition: all .16s var(--ease); }
.sidebar nav a:hover { background: var(--surface); color: var(--ink); }
.sidebar nav a.active { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.sidebar nav a.active svg { color: var(--accent); }
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-faint); }
.sidebar-footer { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.content { flex: 1; margin-left: var(--sidebar-width); padding: 40px 48px; min-width: 0; }
.page-header { margin-bottom: 32px; }
.page-header h1 { font-size: 2.1rem; }
.preview-tile { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; aspect-ratio: 3/4;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 13px; }
.preview-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Art preview strokes ---- */
.art-stroke { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-stroke-accent { stroke: var(--accent); }
.art-stroke-violet { stroke: var(--violet); }
.art-serif { font-family: var(--font-display); fill: var(--ink); font-weight: 700; }
.art-fill-ink { fill: var(--ink); } .art-fill-accent { fill: var(--accent); } .art-fill-violet { fill: var(--violet); }
.art-label { fill: var(--ink-faint); font-family: var(--font-sans); font-weight: 600; }

/* ==========================================================================
   MARKETING / LANDING
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 28px; max-width: var(--max-width); margin: 0 auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 80px 0 72px;
  background: radial-gradient(1100px 460px at 75% -8%, rgba(109,94,240,.20), transparent 62%), var(--grad-soft); }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; }
.hero h1 { margin: 18px 0 18px; }
.hero .lead { max-width: 32em; }
.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-rating { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 14px; color: var(--ink-soft); }
.stars { color: var(--amber); letter-spacing: 2px; }
.avatars { display: flex; }
.avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: var(--accent-soft); color: var(--accent-deep); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* App mockup (the "screenshot") */
.mock { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(.4deg); }
.mock-bar { height: 40px; background: var(--surface-2); display: flex; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.mock-dot { width: 11px; height: 11px; border-radius: 50%; background: #d8d4e6; }
.mock-url { margin-left: 12px; font-size: 12px; color: var(--ink-faint); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; }
.mock-body { display: grid; grid-template-columns: 1fr 1.05fr; }
.mock-controls { padding: 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.mock-styles { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mock-style { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.mock-style.sel { border-color: var(--accent); box-shadow: var(--ring); }
.mock-line { height: 10px; border-radius: 6px; background: var(--surface-2); }
.mock-input { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mock-btn { height: 38px; border-radius: var(--r-pill); background: var(--accent); }
.mock-preview { padding: 18px; display: flex; align-items: center; justify-content: center; background: var(--bg-tint); }
.mock-preview .frame { width: 80%; aspect-ratio: 3/4; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 18px; }

/* Logo strip */
.logos { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; opacity: .8; }
.logos span { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-faint); letter-spacing: -.01em; }

/* Sections */
.section { padding: 86px 0; }
.section-tint { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 54px; }
.section-head h2 { margin: 12px 0 14px; }

/* Pain points */
.pain { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: #fff; }

/* Steps */
.step { text-align: center; }
.step .num { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: #fff; background: var(--accent); box-shadow: var(--glow); }
.step:nth-child(2) .num { background: var(--violet); }
.step:nth-child(3) .num { background: var(--ink); box-shadow: var(--shadow); }

/* Style showcase */
.style-card { text-align: center; }
.style-thumb { aspect-ratio: 1; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: 24px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.style-card:hover .style-thumb { transform: translateY(-4px); box-shadow: var(--shadow); }
.style-thumb svg { width: 100%; height: 100%; }
.style-card .label { font-weight: 600; font-size: 14px; }

/* Feature alternating rows */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.frow + .frow { margin-top: 64px; }
.frow.rev .fvisual { order: -1; }
.fvisual { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.fvisual svg { max-width: 220px; }

/* Stats band */
.stats-band { background: var(--grad); border-radius: var(--r-xl); padding: 52px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.stats-band::after { content:""; position:absolute; width:360px;height:360px;border-radius:50%;filter:blur(60px);background:rgba(255,255,255,.18);top:-140px;right:-80px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; position: relative; z-index: 1; text-align: center; }
.stat-big { font-family: var(--font-display); font-size: 2.9rem; font-weight: 800; }
.stats-band .s-label { color: rgba(255,255,255,.82); font-size: 14px; }

/* Comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.compare { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14px; }
.compare th, .compare td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--ink-soft); font-weight: 500; }
.compare tr:last-child td { border-bottom: none; }
.compare .col-us { background: var(--accent-soft); }
.compare thead .col-us { background: var(--accent); color: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.compare .ck { color: var(--green); display: inline-flex; } .compare .ck svg { width: 20px; height: 20px; }
.compare .no { color: var(--ink-faint); }

/* Testimonials */
.tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); height: 100%; }
.tcard p { color: var(--ink-soft); }
.tperson { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.tperson .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tperson .name { font-weight: 700; font-size: 14px; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; align-items: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-lg); position: relative; transform: translateY(-8px); }
.price-card.featured::before { content: "Most popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-pill); box-shadow: var(--glow); }
.price-card .plan-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.price-card .price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; margin: 8px 0 2px; }
.price-card .price small { font-family: var(--font-sans); font-size: .9rem; font-weight: 500; color: var(--ink-faint); }
.feature-list { margin: 22px 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.feature-list svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.feature-list li.off { color: var(--ink-faint); opacity: .7; }
.feature-list li.off svg { color: var(--ink-faint); }

/* Guarantee */
.guarantee { display: flex; gap: 22px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 34px; }
.guarantee .seal { width: 66px; height: 66px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--glow); }
.guarantee .seal svg { width: 32px; height: 32px; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--ink); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .chev { transition: transform .2s var(--ease); color: var(--ink-faint); flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); color: var(--ink-soft); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { padding-bottom: 22px; }

/* CTA band */
.cta-band { background: var(--grad); border-radius: var(--r-xl); padding: 66px; text-align: center; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-band::after { content:""; position:absolute; width:420px;height:420px;border-radius:50%;filter:blur(70px);background:rgba(255,255,255,.20);top:-160px;left:-90px; }
.cta-band h2, .cta-band p { color: #fff; position: relative; z-index: 1; }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band .btn { position: relative; z-index: 1; }

/* Footer */
.site-footer { background: var(--bg-tint); border-top: 1px solid var(--line); padding: 56px 0 40px; color: var(--ink-soft); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.footer-grid h4 { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 14px; font-weight: 700; }
.footer-grid a { display: block; color: var(--ink-soft); padding: 5px 0; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   GENERATOR (/generate)
   ========================================================================== */
.gen-layout { display: grid; grid-template-columns: 420px 1fr; gap: 28px; align-items: start; }
.gen-left { display: flex; flex-direction: column; gap: 18px; }
.gen-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.gen-card h3 { font-size: 1rem; margin-bottom: 4px; }
.gen-card .hint { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 14px; }
.gen-right { position: sticky; top: 24px; }

.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.style-pick { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; cursor: pointer; background: var(--surface); transition: all .15s var(--ease); display: flex; align-items: center; }
.style-pick:hover { border-color: var(--line-strong); }
.style-pick.sel { border-color: var(--accent); border-left-width: 3px; background: var(--accent-soft); }
.style-pick .nm { font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }
.style-pick.sel .nm { color: var(--accent-deep); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip { font-size: 12px; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: all .15s var(--ease); }
.chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px; gap: 2px; background: var(--surface-2); }
.seg label { margin: 0; cursor: pointer; }
.seg label span { display: block; padding: 7px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + span { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }

.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.opt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; font-size: 13px; transition: all .15s var(--ease); }
.opt:hover { border-color: var(--line-strong); }
.opt.checked { border-color: var(--accent); background: var(--accent-soft); }
.opt input { margin: 0; }
.opt.disabled { opacity: .5; cursor: not-allowed; }
.opt .lock { margin-left: auto; font-size: 10px; color: var(--ink-faint); }

.model-badge { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; }
.model-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.model-badge .mtxt { font-size: 13px; font-weight: 600; }
.model-badge .msub { font-size: 11px; color: var(--ink-faint); }

.advanced summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: "▸ "; color: var(--ink-faint); }
.advanced[open] summary::before { content: "▾ "; }

.gen-submit { position: sticky; bottom: 0; }

/* Preview panel */
.preview-panel { border: 2px dashed var(--line-strong); border-radius: var(--r-lg); min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; background: var(--bg-tint); }
.preview-panel.has-art { border-style: solid; border-color: var(--line); background: var(--surface); }
.preview-panel img { max-height: 540px; width: auto; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.preview-empty svg { width: 64px; height: 64px; color: var(--ink-faint); opacity: .5; margin: 0 auto 12px; }
.preview-status { width: 100%; max-width: 360px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gen-error { color: var(--danger); background: var(--danger-soft); border: 1px solid #f3cdcb; border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; }

@media (max-width: 980px) {
  .gen-layout { grid-template-columns: 1fr; }
  .gen-right { position: static; }
}

/* ==========================================================================
   GUEST / AUTH (split)
   ========================================================================== */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { background: var(--grad); color: #fff; padding: 48px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-aside::after { content:""; position:absolute; width:420px;height:420px;border-radius:50%;filter:blur(70px);background:rgba(255,255,255,.16);bottom:-160px;left:-120px; }
.auth-aside .brand, .auth-aside .brand span { color: #fff; }
.auth-aside .brand { font-size: 24px; position: relative; z-index: 1; }
.auth-aside .eyebrow { color: rgba(255,255,255,.85); }
.auth-aside .lead { color: rgba(255,255,255,.85); }
.auth-aside .aside-body { margin: auto 0; position: relative; z-index: 1; }
.auth-aside h2 { color: #fff; font-size: 2.2rem; margin-bottom: 16px; }
.auth-aside .italic-accent { color: #fff; opacity: .9; }
.auth-aside .art-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; max-width: 360px; }
.auth-aside .art-tile { background: rgba(255,255,255,.96); border-radius: var(--r); padding: 20px; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h2 { font-size: 1.9rem; }
.auth-form .brand-sm { display: none; }

/* ---- Responsive ---- */
.mobile-topbar, .mobile-nav { display: none; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .frow { grid-template-columns: 1fr; gap: 28px; } .frow.rev .fvisual { order: 0; }
  .pricing-grid { grid-template-columns: repeat(2,1fr); } .price-card.featured { transform: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .auth-split { grid-template-columns: 1fr; } .auth-aside { display: none; }
  .auth-form .brand-sm { display: block; text-align: center; margin-bottom: 24px; }
}
@media (max-width: 768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; } .sidebar { display: none; }
  .content { margin-left: 0; padding: 20px; }
  .section { padding: 56px 0; } .hero { padding: 52px 0 48px; }
  .cta-band, .stats-band { padding: 40px 24px; }
  .mobile-topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 20; }
  .mobile-nav { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); }
  .mobile-nav a { font-size: 13px; padding: 7px 12px; border-radius: var(--r-sm); color: var(--ink-soft); }
  .mobile-nav a.active { background: var(--surface); color: var(--accent-deep); }
}

/* ==========================================================================
   Homepage: hero carousel · create marquee · scroll-reveal · steps
   ========================================================================== */

/* Hero carousel (half-screen slider) */
.home-carousel { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-2); }
.home-carousel .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  display: flex; align-items: flex-end; }
.home-carousel .slide.active { opacity: 1; }
.home-carousel .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-carousel .slide .cap { position: relative; z-index: 2; width: 100%; padding: 22px 24px;
  color: #fff; background: linear-gradient(180deg, rgba(20,18,30,0) 0%, rgba(20,18,30,.72) 100%); }
.home-carousel .slide .cap strong { display: block; font-family: var(--font-display, var(--font-sans)); font-size: 1.25rem; }
.home-carousel .slide .cap span { font-size: .9rem; opacity: .85; }
.home-carousel .dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 12px;
  display: flex; gap: 7px; justify-content: center; }
.home-carousel .dots b { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.home-carousel .dots b.on { background: #fff; width: 22px; border-radius: 5px; }

/* "What you can create" running marquee */
.marquee { position: relative; overflow: hidden; padding: 18px 0;
  border-top: 9px solid var(--accent); border-bottom: 9px solid var(--accent); background: var(--bg-tint); }
.marquee .track { display: flex; gap: 28px; width: max-content; animation: marquee-scroll 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .chip { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; flex: 0 0 auto; }
.marquee .chip img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); background: #fff; }
.marquee .chip span { font-size: .9rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.marquee .chip.text { width: auto; justify-content: center; }
.marquee .chip.text span { font-family: var(--font-display, var(--font-sans)); font-size: 1.4rem; font-weight: 700; color: var(--ink); padding: 0 6px; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Steps: idea -> listing */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px; position: relative; }
.step-card .n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: var(--grad); margin-bottom: 14px; }
.step-card h3 { font-size: 1.1rem; }
.step-card p { color: var(--ink-soft); margin-top: 8px; font-size: .95rem; }
@media (max-width: 880px){ .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .steps { grid-template-columns: 1fr; } }

/* Outcome create-list */
.create-cols { columns: 2; column-gap: 36px; max-width: 620px; margin: 0 auto; }
.create-cols li { break-inside: avoid; padding: 7px 0; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 10px; }
.create-cols li svg { color: var(--accent); flex: 0 0 auto; }
@media (max-width: 520px){ .create-cols { columns: 1; } }

/* Trust line (replaces fabricated social proof) */
.trust-line { text-align: center; color: var(--ink-soft); font-weight: 500;
  letter-spacing: .01em; max-width: 56ch; margin: 0 auto; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } .marquee .track, .home-carousel .slide { animation: none; transition: none; } }

/* ==========================================================================
   Legal pages (terms / privacy / license / refund)
   ========================================================================== */
.legal-hero { text-align: center; padding: 66px 0 26px; background: var(--grad-soft); }
.legal-hero .eyebrow { justify-content: center; }
.legal-hero .ico-xl { width: 74px; height: 74px; border-radius: 20px; background: var(--grad); color: #fff;
  display: grid; place-items: center; margin: 0 auto 20px; box-shadow: var(--glow); }
.legal-hero .ico-xl svg { width: 34px; height: 34px; }
.legal-hero h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.legal-hero p.sub { color: var(--ink-soft); max-width: 56ch; margin: 12px auto 0; }
.legal-updated { color: var(--ink-faint); font-size: .88rem; margin-top: 14px; }
.legal-nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 26px 0 6px; }
.legal-nav a { padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: all .15s; }
.legal-nav a:hover { border-color: var(--accent); color: var(--accent-deep); }
.legal-nav a.on { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.legal-body { max-width: 768px; margin: 0 auto; }
.legal-body h3 { margin-top: 36px; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.legal-body h3 .hn { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center; font-size: .85rem; font-weight: 800; flex: 0 0 auto; }
.legal-body h3:first-of-type { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-soft); line-height: 1.72; }
.legal-body p { margin-top: 10px; }
.legal-body ul { margin: 10px 0 10px 1.1em; }
.legal-body li { margin: 7px 0; }
.legal-callout { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-sm); padding: 16px 18px; margin: 22px 0; }
.legal-callout strong { color: var(--ink); }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.legal-grid .lc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
.legal-grid .lc h4 { font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.legal-grid .lc h4 svg { width: 18px; height: 18px; }
.legal-grid .lc.yes h4 { color: var(--green); } .legal-grid .lc.no h4 { color: var(--coral); }
.legal-grid .lc p { margin-top: 8px; font-size: .92rem; }
@media (max-width: 620px){ .legal-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   "Build an entire shop" — style wheel rotator (one at a time, 3s)
   ========================================================================== */
.style-wheel { max-width: 540px; margin: 8px auto 0; text-align: center; }
.sw-stage { position: relative; height: 340px; }
.sw-item { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; opacity: 0; transform: scale(.86) rotate(-7deg); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none; }
.sw-item.active { opacity: 1; transform: none; pointer-events: auto; }
.sw-art { width: 240px; height: 240px; border-radius: var(--r-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; place-items: center; position: relative; }
.sw-art::before { content: ""; position: absolute; inset: -40%; background: var(--grad-soft); z-index: 0; }
.sw-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.sw-art svg { position: relative; z-index: 1; width: 72%; height: 72%; }
.sw-name { font-family: var(--font-display, var(--font-sans)); font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.sw-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.sw-dots b { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: all .2s; }
.sw-dots b.on { background: var(--accent); width: 22px; border-radius: 5px; }
@media (max-width: 520px){ .sw-stage { height: 300px; } .sw-art { width: 200px; height: 200px; } .sw-name { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce){ .sw-item { transition: opacity .3s; transform: none; } }

/* Purple half-wheel backdrop for the style rotator */
.style-wheel { position: relative; isolation: isolate; overflow: hidden; padding-top: 12px; }
.style-wheel .sw-stage, .style-wheel .sw-dots { position: relative; z-index: 2; }
.style-wheel::before {  /* spinning spoked wheel + rings */
  content: ""; position: absolute; z-index: 0; left: 50%; top: -34px; width: 430px; height: 430px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none; opacity: .8;
  background:
    repeating-conic-gradient(from 0deg, rgba(109,94,240,.30) 0 3.2deg, transparent 3.2deg 30deg),
    radial-gradient(circle at center,
      transparent 0 44%,
      rgba(155,108,242,.28) 45% 47%, transparent 48% 62%,
      rgba(109,94,240,.30) 63% 65%, transparent 66% 80%,
      rgba(155,108,242,.22) 81% 83%, transparent 84%);
  -webkit-mask: radial-gradient(circle at center, #000 40%, rgba(0,0,0,.85) 66%, transparent 84%);
          mask: radial-gradient(circle at center, #000 40%, rgba(0,0,0,.85) 66%, transparent 84%);
  animation: sw-spin 26s linear infinite;
}
.style-wheel::after {  /* static fade hides the lower half -> "half" wheel */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(180deg, transparent 0, var(--bg) 72%); pointer-events: none;
}
@keyframes sw-spin { to { transform: translateX(-50%) rotate(360deg); } }
@media (max-width: 520px){ .style-wheel::before { width: 320px; height: 320px; top: -10px; } }
@media (prefers-reduced-motion: reduce){ .style-wheel::before { animation: none; } }

/* Yearly "Save X%" shining badge on pricing cards */
.price-card { position: relative; }
.save-badge { position: absolute; top: -12px; right: 16px; z-index: 4;
  background: linear-gradient(135deg, #16b87f 0%, #1f9d6b 100%); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 6px 13px;
  border-radius: 999px; box-shadow: 0 8px 20px rgba(31,157,107,.45); overflow: hidden; white-space: nowrap; }
.save-badge::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent 0, rgba(255,255,255,.9) 50%, transparent 100%);
  transform: skewX(-20deg); animation: badge-shine 2.4s ease-in-out infinite; }
.save-badge[hidden] { display: none; }
@keyframes badge-shine { 0% { left: -70%; } 55%, 100% { left: 150%; } }
@media (prefers-reduced-motion: reduce){ .save-badge::after { animation: none; } }

/* Studio Art App logo — gradient app-tile mark + wordmark */
.brand { display: inline-flex; align-items: center; gap: .5em; }
.brand .bmark { display: inline-flex; align-items: center; }
.brand .bmark svg { width: 1.42em; height: 1.42em; border-radius: .38em; box-shadow: 0 3px 10px rgba(109,94,240,.32); }
.brand .bword { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.brand .bword em { color: var(--accent); font-style: normal; }
.brand .bapp { align-self: flex-start; margin-left: .12em; margin-top: .1em; font-family: var(--font-sans);
  font-size: .5em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft); border: 1px solid #ded7fb;
  padding: .18em .5em; border-radius: var(--r-pill); line-height: 1; }
/* on the gradient auth aside, invert for contrast */
.auth-aside .brand .bword, .auth-aside .brand .bword em { color: #fff; }
.auth-aside .brand .bapp { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }

/* admin sidebar header — logo + "Admin" tag, aligned cleanly */
.sidebar-brand { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 0 10px 28px; }
.sidebar-brand .brand { padding: 0; }
.admin-tag { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid #ded7fb; padding: 3px 9px; border-radius: var(--r-pill); line-height: 1.4; }

/* Hero headline — animated underline on "Wall Art" + blinking end dot */
.ul-art { position: relative; white-space: nowrap; }
.ul-art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .11em;
  background: var(--grad); border-radius: 6px; transform: scaleX(0); transform-origin: left;
  animation: ul-draw .85s .35s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes ul-draw { to { transform: scaleX(1); } }
.blink-dot { color: var(--accent); animation: blink-dot 1.05s steps(1) infinite; }
@keyframes blink-dot { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .ul-art::after { transform: scaleX(1); animation: none; }
  .blink-dot { animation: none; }
}

/* ==========================================================================
   Signature animated brand piece — "the studio drawing your art, live"
   Pure-CSS. Line-art draws itself on a loop inside a floating gallery.
   ========================================================================== */
.sa-studio { position: relative; width: 100%; max-width: 460px; margin: 0 auto;
  aspect-ratio: 5 / 4.4; display: flex; align-items: center; justify-content: center; }

/* soft brand glow behind everything */
.sa-glow { position: absolute; inset: 8% 6%; z-index: 0; border-radius: 42% 46% 44% 48%;
  background: radial-gradient(closest-side, rgba(155,108,242,.48), rgba(109,94,240,.26), transparent 72%);
  filter: blur(16px); animation: sa-glow 9s ease-in-out infinite; }
@keyframes sa-glow {
  0%,100% { transform: scale(1) rotate(0deg); opacity: .82; }
  50%     { transform: scale(1.09) rotate(9deg); opacity: 1; }
}

/* main framed canvas */
.sa-canvas { position: relative; z-index: 2; width: 58%; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 15px 15px 13px; transform: rotate(-1.4deg); animation: sa-float-main 7s ease-in-out infinite; }
.sa-mat { border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  background: linear-gradient(180deg, #faf9ff, #ffffff); aspect-ratio: 5 / 6; display: flex; }
.sa-mat svg { width: 100%; height: 100%; }

/* floating satellite frames */
.sa-frame { position: absolute; z-index: 1; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 9px; width: 27%; aspect-ratio: 100 / 130; }
.sa-frame svg { width: 100%; height: 100%; }
.sa-frame-a { top: 2%; right: 1%; animation: sa-float-a 6.5s ease-in-out infinite; }
.sa-frame-b { bottom: 1%; left: 0; animation: sa-float-b 7.8s ease-in-out infinite; }

@keyframes sa-float-main { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-10px) rotate(-1.4deg); } }
@keyframes sa-float-a { 0%,100% { transform: translateY(0) rotate(4.5deg); } 50% { transform: translateY(-15px) rotate(4.5deg); } }
@keyframes sa-float-b { 0%,100% { transform: translateY(0) rotate(-5.5deg); } 50% { transform: translateY(13px) rotate(-5.5deg); } }

/* the self-drawing line art (stagger via per-path --o delay, which persists every loop) */
.sa-draw { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: sa-draw 7s ease-in-out infinite; animation-delay: var(--o, 0s); }
.sa-canvas .sa-draw { stroke-width: 3; }
.sa-canvas .sa-sun { stroke: var(--violet); }
.sa-frame .sa-draw { stroke: var(--violet); stroke-width: 3; }
@keyframes sa-draw {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  6%   { opacity: 1; }
  46%  { stroke-dashoffset: 0; opacity: 1; }
  84%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* "generating…" caption + synced progress bar under the canvas */
.sa-caption { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.sa-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid #ded7fb; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.sa-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: sa-pulse 1.4s ease-in-out infinite; }
@keyframes sa-pulse { 0%,100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.sa-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.sa-bar i { display: block; height: 100%; width: 8%; border-radius: 6px; background: var(--grad); animation: sa-load 7s ease-in-out infinite; }
@keyframes sa-load { 0% { width: 8%; } 46% { width: 100%; } 84% { width: 100%; } 100% { width: 8%; } }

/* twinkling sparkles */
.sa-spark { position: absolute; z-index: 3; width: 16px; height: 16px; opacity: 0; background: var(--violet);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: sa-tw 4s ease-in-out infinite; }
.sa-spark.s1 { top: 10%; left: 12%; animation-delay: 0s; }
.sa-spark.s2 { top: 20%; right: 8%; animation-delay: 1.1s; width: 12px; height: 12px; }
.sa-spark.s3 { bottom: 16%; right: 20%; animation-delay: 2.2s; }
.sa-spark.s4 { bottom: 24%; left: 6%; animation-delay: 3s; width: 11px; height: 11px; }
@keyframes sa-tw { 0%,100% { opacity: 0; transform: scale(.35) rotate(0deg); } 50% { opacity: .9; transform: scale(1) rotate(90deg); } }

@media (max-width: 900px){ .sa-studio { max-width: 400px; } }
@media (prefers-reduced-motion: reduce){
  .sa-glow, .sa-canvas, .sa-frame, .sa-spark, .sa-chip i, .sa-bar i { animation: none !important; }
  .sa-draw { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
  .sa-spark { opacity: .65; }
  .sa-bar i { width: 100%; }
}