/* ═══════════════════════════════════════
   ATWIL v9 — DESIGN SYSTEM
   ═══════════════════════════════════════ */
:root {
  --bg: #f5f6fa;
  --bg2: #eceef8;
  --bg3: #e4e8f4;
  --surface:  rgba(255,255,255,0.92);
  --violet:   #6366f1;
  --violet-lt:#6366f1;
  --pink:     #0891b2;
  --cyan:     #6366f1;
  --gold:     #0891b2;
  --green:    #10b981;
  --red:      #f87171;
  --white:    #1e293b;
  --muted:    #374151;
  --muted2:   #dde3f0;
  --border:   rgba(99,102,241,0.18);
  --glow:     rgba(99,102,241,0.15);
  --r-sm:     10px;
  --r-md:     16px;
  --r-lg:     24px;
  --r-xl:     32px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* ── Accessibility: Global focus-visible ring ── */
:focus-visible { outline:3px solid rgba(99,102,241,.55); outline-offset:2px; border-radius:6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(99,102,241,.55); outline-offset:0; }
/* ── Accessibility: Skip navigation (visually hidden) ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sr-only:focus { position:fixed; top:8px; left:8px; width:auto; height:auto; padding:12px 20px; margin:0; overflow:visible; clip:auto; white-space:normal; background:#6366f1; color:#fff; font-size:.95rem; font-weight:700; border-radius:10px; z-index:100000; box-shadow:0 4px 20px rgba(0,0,0,.2); }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:'Space Grotesk', -apple-system, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--muted2); border-radius:99px; }

/* ── Selection ── */
::selection { background:rgba(99,102,241,0.3); }

/* ── Noise texture overlay ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:256px 256px;
  opacity:0.18;
}

/* ═══ TYPOGRAPHY ═══ */
.t-display { font-family:'Space Grotesk', sans-serif; font-weight:800; line-height:1.0; letter-spacing:-0.03em; }
.t-serif { font-family:'Instrument Serif', serif; font-style:italic; }
.t-ui { font-family:'Space Grotesk', sans-serif; }

h1,h2,h3 { font-family:'Space Grotesk', sans-serif; }

/* ── Gradient text ── */
.grad {
  background: linear-gradient(135deg, #6366f1 0%, #0891b2 45%, #6366f1 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.grad-gold {
  background: linear-gradient(135deg, #0891b2, #0891b2);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ═══ LAYOUT ═══ */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 2.5rem; }
section { padding:9rem 0; }
@media(max-width:768px) {
  section { padding:4.5rem 0; }
  .container { padding:0 1.25rem; }
}

/* ═══ KICKER ═══ */
.kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Grotesk', sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--violet-lt);
  padding:5px 14px 5px 10px;
  border:1px solid rgba(99,102,241,0.2);
  border-radius:99px;
  margin-bottom:1.5rem;
}
.kicker::before {
  content:''; display:block; width:6px; height:6px;
  border-radius:50%; background:var(--violet-lt);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.7); }
}

/* ═══ SECTION HEADER ═══ */
.s-head { margin-bottom:4rem; }
.s-head h2 {
  font-family:'Space Grotesk', sans-serif; font-size:clamp(36px,5vw,58px);
  font-weight:800; line-height:1.05; letter-spacing:-0.03em;
  margin-bottom:1rem;
}
.s-head p {
  font-size:17px; color:var(--muted); line-height:1.7;
  max-width:600px;
}

/* ═══════════════════════════════════════
   NAV
   ═══════════════════════════════════════ */
#nav {
  position:fixed; top:1.25rem; left:50%; transform:translateX(-50%);
  z-index:1000; width:calc(100% - 3rem); max-width:550px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:var(--r-xl);
  box-shadow:0 4px 24px rgba(99,102,241,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease, transform 0.35s ease;
}
#nav.nav-hidden {
  transform: translateX(-50%) translateY(-120%);
}
#nav.scrolled {
  background:rgba(255,255,255,0.7);
  border-color:rgba(99,102,241,0.15);
  box-shadow:0 8px 40px rgba(99,102,241,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
}
.nav-logo {
  font-family:'Space Grotesk', sans-serif; font-weight:800; font-size:18px;
  letter-spacing:-0.04em; cursor:pointer;
  background:linear-gradient(135deg, #6366f1, #0891b2);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-links {
  display:flex; align-items:center; gap:1.75rem;
  list-style:none;
}
.nav-links a {
  font-size:13px; font-weight:500; color:rgba(0,0,0,0.7);
  text-decoration:none; transition:color 0.2s;
  cursor:pointer; position:relative;
  white-space:nowrap;
}
.nav-links a:hover { color:var(--white); }
.nav-links a.active { color:var(--white); }
.nav-links a.active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; border-radius:99px;
  background:linear-gradient(90deg, #6366f1, #0891b2);
}
.nav-divider {
  width:1px; height:16px; background:rgba(0,0,0,0.12);
  flex-shrink:0;
}
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-btn-ghost {
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:500;
  color:var(--muted); background:none; border:none; cursor:pointer;
  padding:8px 14px; border-radius:var(--r-md);
  transition:color 0.2s;
}
.nav-btn-ghost:hover { color:var(--white); }
.nav-btn-primary {
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
  color:#fff; cursor:pointer;
  padding:9px 20px; border:none; border-radius:var(--r-md);
  background:linear-gradient(135deg, #6366f1, #6366f1);
  box-shadow:0 4px 16px rgba(99,102,241,0.3);
  transition:all 0.25s;
  white-space:nowrap;
}
.nav-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(99,102,241,0.45); }
@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-btn-ghost { display:none; }
}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
#hero {
  min-height:100vh; position:relative; overflow:hidden;
  display:flex; align-items:center; padding-top:6rem;
}
@media(max-width:600px){#hero{padding-top:11rem;}}

/* Aurora */
.aurora {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.aurora-orb {
  position:absolute; border-radius:50%; filter:blur(90px);
}
.aurora-orb-1 {
  width:800px; height:800px; top:-250px; left:-150px;
  background:radial-gradient(circle, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0.06) 45%, transparent 70%);
  animation:orb-drift-1 5s ease-in-out infinite;
}
.aurora-orb-2 {
  width:700px; height:700px; top:-150px; right:-200px;
  background:radial-gradient(circle, rgba(8,145,178,0.04) 0%, rgba(8,145,178,0.04) 45%, transparent 70%);
  animation:orb-drift-2 7s ease-in-out infinite;
}
.aurora-orb-3 {
  width:600px; height:600px; bottom:-50px; left:25%;
  background:radial-gradient(circle, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.03) 45%, transparent 70%);
  animation:orb-drift-3 9s ease-in-out infinite;
}
@keyframes orb-drift-1 {
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(120px,-80px) scale(1.15); }
  50%  { transform:translate(60px,100px) scale(0.9); }
  75%  { transform:translate(-80px,40px) scale(1.1); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes orb-drift-2 {
  0%   { transform:translate(0,0) scale(1); }
  30%  { transform:translate(-100px,60px) scale(1.2); }
  60%  { transform:translate(-50px,-90px) scale(0.88); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes orb-drift-3 {
  0%   { transform:translate(0,0) scale(1); }
  40%  { transform:translate(80px,-60px) scale(1.18); }
  70%  { transform:translate(-60px,80px) scale(0.92); }
  100% { transform:translate(0,0) scale(1); }
}

/* Grid */
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}
.hero-aurora {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.hero-aurora::before {
  content:''; position:absolute;
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,0.22) 0%, rgba(99,102,241,0.06) 50%, transparent 70%);
  top:-300px; left:-250px; filter:blur(80px);
  animation:orb-drift-1 5s ease-in-out infinite;
}
.hero-aurora::after {
  content:''; position:absolute;
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle, rgba(8,145,178,0.09) 0%, rgba(8,145,178,0.05) 50%, transparent 70%);
  bottom:-250px; right:-200px; filter:blur(80px);
  animation:orb-drift-2 7s ease-in-out infinite;
}
.ha-orb-3 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,0.11) 0%, transparent 70%);
  top:30%; left:40%; transform:translate(-50%,-50%); filter:blur(80px);
  animation:orb-drift-3 9s ease-in-out infinite;
}

.hero-inner {
  position:relative; z-index:2;
  width:100%; max-width:1200px; margin:0 auto; padding:0 2.5rem;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem;
}
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:3rem; text-align:center; }
  .hero-stats { justify-content:center; }
  .hero-btns { justify-content:center; }
  .hero-right { display:none; }
  .hero-eyebrow { font-size:9px; letter-spacing:0.09em; padding:4px 12px 4px 8px; }
}

/* TEMP: demo cards hidden — center hero content on all sizes
   #hero prefix bumps specificity above the originals further down the file. */
#hero               { min-height:auto; padding-bottom:1rem; }
#hero .hero-inner   { grid-template-columns:1fr; max-width:1180px; text-align:center; gap:2rem; }
#hero .hero-right   { display:none; }
#hero .hero-left    { padding:2rem 0; }
#hero .hero-btns    { justify-content:center; }
#hero .hero-stats   { justify-content:center; }
#hero .hero-sub     { margin-left:auto; margin-right:auto; }
#hero .hero-h1      { font-size:clamp(48px, 7vw, 80px); line-height:1.05; letter-spacing:-0.04em; }
@media(max-width:760px) {
  #hero .hero-h1    { white-space:normal; font-size:clamp(48px, 12vw, 67px); letter-spacing:-0.035em; }
  #hero .hero-h1 .hero-h1-line { display:block; }
  #hero .hero-sub   { font-size:15px; line-height:1.6; max-width:420px; }
}
/* /TEMP */

.hero-left { padding:2rem 0; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:#4f46e5; margin-bottom:1.5rem;
  padding:5px 14px 5px 10px; border:1px solid rgba(79,70,229,0.25);
  border-radius:99px;
}
.hero-eyebrow::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#4f46e5;
  animation:pulse-dot 2s ease-in-out infinite;
}
.hero-h1 {
  font-family:'Space Grotesk', sans-serif; font-weight:800;
  font-size:clamp(48px,6.5vw,82px);
  line-height:1.08; letter-spacing:-0.04em;
  margin-bottom:1.5rem;
}
.hero-h1 em {
  font-style:normal;
  background:linear-gradient(135deg, #6366f1 0%, #0891b2 45%, #6366f1 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  font-size:17px; color:var(--muted); line-height:1.7;
  max-width:480px; margin-bottom:2.5rem;
}
.hero-btns {
  display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem;
}

/* Magnetic button */
.btn-magnetic {
  position:relative; overflow:hidden;
  font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600;
  color:#fff; cursor:pointer;
  padding:14px 32px; border:none; border-radius:var(--r-md);
  background:linear-gradient(135deg, #6366f1, #6366f1, #0891b2);
  background-size:200% 200%;
  box-shadow:0 8px 32px rgba(99,102,241,0.45), 0 0 0 1px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  transition:box-shadow 0.3s, transform 0.15s;
  animation:gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.btn-magnetic:hover {
  box-shadow:0 14px 48px rgba(99,102,241,0.6), 0 0 0 1px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-1px);
}
.btn-magnetic .btn-inner { position:relative; z-index:1; display:flex; align-items:center; gap:8px; }

.btn-ghost-border {
  font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600;
  color:#6366f1; cursor:pointer;
  padding:13px 28px; border-radius:var(--r-md);
  background:transparent;
  border:none;
  position:relative; overflow:hidden;
  transition:color 0.3s, transform 0.15s;
}
/* animated gradient border — always on */
.btn-ghost-border::before {
  content:''; position:absolute; inset:-1.5px;
  background:linear-gradient(135deg, #6366f1, #0891b2, #6366f1, #6366f1);
  background-size:300% 300%;
  border-radius:inherit; z-index:-1; opacity:0.85;
  animation:gradient-border 3s ease infinite;
  transition:opacity 0.3s;
}
@keyframes gradient-border {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
/* light fill inside */
.btn-ghost-border::after {
  content:''; position:absolute; inset:1.5px;
  background:#ffffff; border-radius:calc(var(--r-md) - 1px); z-index:-1;
  transition:background 0.3s;
}
.btn-ghost-border:hover { color:#ffffff; transform:translateY(-1px); }
.btn-ghost-border:hover::before { opacity:1; }
.btn-ghost-border:hover::after { background:linear-gradient(135deg, #6366f1, #0891b2); }

/* Hero stats */
.hero-stats {
  display:flex; gap:2.5rem; flex-wrap:wrap;
}
@media(max-width:600px){ .hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 2rem; } }
.hero-stat-val {
  font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:800;
  letter-spacing:-0.03em; color:var(--white); line-height:1;
}
.hero-stat-val span { font-size:14px; color:var(--violet-lt); }
.hero-stat-label { font-size:12px; color:var(--muted); margin-top:3px; }

/* 3D Card stack */
.hero-right {
  perspective:1200px;
  display:flex; justify-content:center; align-items:center;
  height:520px; position:relative;
}
.card-3d-stack {
  position:relative; width:320px; height:420px;
  transform-style:preserve-3d;
  animation:stack-float 6s ease-in-out infinite;
}
@keyframes stack-float {
  0%,100% { transform:rotateX(4deg) rotateY(-8deg); }
  50% { transform:rotateX(-2deg) rotateY(6deg); }
}
.hero-card-3d {
  position:absolute; width:280px; border-radius:var(--r-xl);
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 32px 80px rgba(99,102,241,0.14), 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,1);
  overflow:hidden;
  transform-style:preserve-3d;
  color:#1e293b;
}
.hero-card-3d::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, #6366f1 30%, #0891b2 70%, transparent);
}

/* Card 1 — main model card */
.hc-1 {
  top:0; left:0; padding:20px;
  transform:translateZ(60px);
  display:none; /* TEMP: demo personality card hidden — markup retained */
}
.hc-1 .card-model-avatar {
  width:100%; height:210px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, #eaecfb 0%, #d4d8f5 30%, #c8d8f2 65%, #e0e8fa 100%);
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:16px; position:relative; overflow:hidden;
  box-shadow:inset 0 -20px 40px rgba(99,102,241,0.1);
}
.hc-1 .card-model-avatar::before {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.45) 0%, transparent 70%);
  pointer-events:none;
}
.hc-1 .card-model-avatar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 60%, rgba(200,215,235,0.4));
}
.hc-model-name {
  font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:700;
  letter-spacing:-0.02em; margin-bottom:4px;
}
.hc-model-meta { font-size:12px; color:var(--muted); margin-bottom:12px; }
.hc-model-tags { display:flex; gap:6px; flex-wrap:wrap; }
.hc-tag {
  font-size:10px; font-weight:600; padding:3px 8px; border-radius:99px;
  background:rgba(99,102,241,0.12); color:var(--violet-lt);
  border:1px solid rgba(99,102,241,0.2);
}
.hc-price {
  position:absolute; top:16px; right:16px;
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:800;
  color:var(--violet-lt); background:rgba(99,102,241,0.15);
  padding:4px 10px; border-radius:99px;
  border:1px solid rgba(99,102,241,0.3);
}
.hc-verified {
  position:absolute; bottom:16px; right:16px;
  font-size:10px; font-weight:700; letter-spacing:0.05em;
  color:#fff; background:linear-gradient(135deg, #6366f1, #4f46e5); padding:4px 11px; border-radius:99px;
  display:flex; align-items:center; gap:4px;
  box-shadow:0 4px 12px rgba(99,102,241,0.4);
}
.hc-verified::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:#fff; animation:pulse-dot 1.5s infinite;
}

/* Card 2 — earnings */
.hc-2 {
  top:40px; right:-20px; width:240px; padding:18px;
  transform:translateZ(30px) rotateY(-8deg);
  display:none; /* TEMP: demo earnings card hidden — markup retained */
}
.hc-earn-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px; }
.hc-earn-val {
  font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:800;
  letter-spacing:-0.04em; color:var(--white); margin-bottom:4px;
}
.hc-earn-badge {
  font-size:11px; font-weight:600; color:var(--green);
  background:rgba(16,185,129,0.1); padding:2px 8px; border-radius:99px;
  display:inline-flex; align-items:center; gap:4px; margin-bottom:14px;
}
.hc-mini-bars {
  display:flex; align-items:flex-end; gap:4px; height:40px;
}
.hc-bar {
  flex:1; border-radius:3px 3px 0 0;
  background:rgba(99,102,241,0.25);
  transition:height 0.4s;
}
.hc-bar.hi { background:linear-gradient(to top, #6366f1, #6366f1); }

/* Card 3 — generation */
.hc-3 {
  bottom:-20px; left:20px; width:240px; padding:16px;
  transform:translateZ(10px) rotateX(6deg);
  display:none; /* TEMP: demo generation card hidden — markup retained */
}
.hc-gen-header { font-size:10px; color:var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.1em; }
.hc-gen-results { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.hc-gen-thumb {
  aspect-ratio:1; border-radius:var(--r-sm);
  background:linear-gradient(135deg, #ede9fe, #dbeafe);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  border:1px solid rgba(99,102,241,0.12);
}
.hc-gen-status {
  font-size:10px; color:var(--green); display:flex; align-items:center; gap:5px;
}
.hc-gen-status::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--green); animation:pulse-dot 1.5s infinite;
}

/* ═══════════════════════════════════════
   MARQUEE — BRAND LOGOS
   ═══════════════════════════════════════ */
#marquee-section {
  padding:2.5rem 0; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.marquee-label {
  text-align:center; font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.5rem;
}
.marquee-track { position:relative; overflow:hidden; }
.marquee-track::before, .marquee-track::after {
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.marquee-track::before { left:0; background:linear-gradient(to right, var(--bg2), transparent); }
.marquee-track::after  { right:0; background:linear-gradient(to left, var(--bg2), transparent); }
.marquee-inner {
  display:flex; gap:1.5rem; width:max-content;
  animation:marquee-scroll 22s linear infinite;
}
.marquee-track:hover .marquee-inner { animation-play-state:paused; }
@keyframes marquee-scroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.marquee-tile {
  padding:10px 22px; border-radius:var(--r-md);
  background:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700;
  color:var(--muted); letter-spacing:-0.02em; white-space:nowrap;
  transition:all 0.25s;
}
.marquee-tile:hover { color:var(--white); border-color:rgba(99,102,241,0.3); }


/* ── Differentiator Strip ── */
.diff-strip { padding:28px 0; background:rgba(99,102,241,.03); border-top:1px solid rgba(99,102,241,.08); border-bottom:1px solid rgba(99,102,241,.08); }
.diff-item { display:inline-flex; align-items:center; gap:10px; font-size:.88rem; color:#334155; }
.diff-item strong { color:#1e293b; }
.diff-item svg { flex-shrink:0; }
@media(max-width:600px) { .diff-item { font-size:.8rem; } .diff-strip .container { gap:18px!important; } }

/* ═══════════════════════════════════════
   SPOT THE AI — interactive quiz
   ═══════════════════════════════════════ */
#spot-ai { padding:80px 0 60px; }
.spot-ai-cards { display:flex; gap:24px; justify-content:center; align-items:stretch; max-width:740px; margin:0 auto; }
.spot-ai-card { position:relative; flex:1; max-width:340px; border-radius:20px; overflow:hidden; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 4px 24px rgba(0,0,0,.08); }
.spot-ai-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.15); }
.spot-ai-card img { width:100%; height:420px; object-fit:cover; display:block; }
.spot-ai-card .spot-label { position:absolute; bottom:0; left:0; right:0; padding:14px; text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:rgba(15,23,42,.75); background:rgba(255,255,255,.85); backdrop-filter:blur(6px); }
.spot-ai-card.spot-disabled { pointer-events:none; }
.spot-ai-card .spot-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s ease; pointer-events:none; border-radius:20px; }
.spot-ai-card .spot-overlay.show { opacity:1; }
.spot-ai-card .spot-overlay.correct { background:rgba(34,197,94,.35); }
.spot-ai-card .spot-overlay.wrong { background:rgba(239,68,68,.3); }
.spot-ai-card .spot-overlay svg { width:72px; height:72px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
.spot-ai-result { text-align:center; margin-top:24px; font-size:1.05rem; font-weight:600; color:var(--slate-800); opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.spot-ai-result.show { opacity:1; transform:translateY(0); }
.spot-ai-result .spot-try-again { display:inline-block; margin-top:12px; padding:8px 20px; font-size:.85rem; font-weight:600; color:var(--violet); border:1.5px solid var(--violet); border-radius:10px; cursor:pointer; background:transparent; transition:background .2s, color .2s; }
.spot-ai-result .spot-try-again:hover { background:var(--violet); color:#fff; }
@media(max-width:600px) {
  .spot-ai-cards { gap:12px; padding:0 12px; }
  .spot-ai-card img { height:280px; }
  .spot-ai-card { border-radius:14px; }
  .spot-ai-card .spot-overlay svg { width:52px; height:52px; }
}

/* ═══════════════════════════════════════
   HOW IT WORKS — TIMELINE
   ═══════════════════════════════════════ */
/* (#how-it-works styles live in the SEE IT IN ACTION block lower down,
   since the demo video took over that section) */

/* ══════════════════════════════════════════
   HOW IT WORKS — CARD + ARROW LAYOUT (legacy, no longer rendered)
══════════════════════════════════════════ */
.hiw-panel { display:none; }
.hiw-panel.hiw-panel-active { display:block; }
.hiw-steps {
  display:flex; flex-direction:column; gap:12px;
  max-width:560px; margin:0 auto;
}
.hiw-card {
  position:relative; padding:20px 20px 18px;
  border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, var(--hiw-card-bg, rgba(99,102,241,.06)) 0%, rgba(248,250,254,.97) 65%);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hiw-card-border, rgba(99,102,241,.15));
  box-shadow:0 4px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s;
  display:flex; gap:16px; align-items:flex-start;
}
.hiw-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--hiw-line,rgba(99,102,241,.6)), transparent);
}
.hiw-card::after {
  content:''; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, var(--hiw-glow, rgba(99,102,241,.12)) 0%, transparent 70%);
  pointer-events:none;
}
.hiw-card:hover { transform:translateY(-4px); border-color:var(--hiw-card-border-hover, rgba(99,102,241,.3)); box-shadow:0 12px 36px rgba(99,102,241,.1), inset 0 1px 0 rgba(255,255,255,.9); }
.hiw-brand .hiw-card  { --hiw-card-bg:rgba(96,165,250,.1); --hiw-card-border:rgba(96,165,250,.18); --hiw-card-border-hover:rgba(96,165,250,.35); --hiw-glow:rgba(96,165,250,.15); --hiw-line:rgba(96,165,250,.6); --hiw-icon-bg:rgba(96,165,250,.1); --hiw-icon-border:rgba(96,165,250,.2); }
.hiw-talent .hiw-card { --hiw-card-bg:rgba(99,102,241,.1); --hiw-card-border:rgba(99,102,241,.18); --hiw-card-border-hover:rgba(99,102,241,.35); --hiw-glow:rgba(99,102,241,.15); --hiw-line:rgba(99,102,241,.6); --hiw-icon-bg:rgba(99,102,241,.1); --hiw-icon-border:rgba(99,102,241,.2); }
.hiw-personal .hiw-card { --hiw-card-bg:rgba(34,211,238,.05); --hiw-card-border:rgba(34,211,238,.1); --hiw-card-border-hover:rgba(34,211,238,.15); --hiw-glow:rgba(34,211,238,.1); --hiw-line:rgba(34,211,238,.25); --hiw-icon-bg:rgba(34,211,238,.05); --hiw-icon-border:rgba(34,211,238,.2); }
.hiw-icon-box {
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--hiw-icon-bg, rgba(99,102,241,0.1));
  border:1px solid var(--hiw-icon-border, rgba(99,102,241,0.18));
}
.hiw-card-body { flex:1; min-width:0; }
.hiw-step-num {
  font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:800;
  letter-spacing:.1em; color:rgba(0,0,0,.55); margin-bottom:4px;
}
.hiw-title {
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700;
  color:#1e293b; margin-bottom:4px; letter-spacing:-.01em;
}
.hiw-desc { font-size:12.5px; color:#475569; line-height:1.55; }
.hiw-arrow {
  text-align:center; font-size:18px;
  color:rgba(0,0,0,0.2); line-height:1;
  margin:-2px 0; user-select:none;
}
.hiw-cta {
  margin-top:20px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  color:#fff; background:linear-gradient(135deg,var(--violet),var(--pink));
  border:none; border-radius:10px; padding:11px 20px; cursor:pointer;
  transition:filter .2s, transform .2s;
}
.hiw-cta:hover { filter:brightness(1.12); transform:translateY(-1px); }

/* HIW tab switcher */
.hiw-tabs-wrap {
  display:inline-flex; gap:4px;
  padding:0; border-radius:0;
  margin-bottom:2.5rem;
  background:transparent;
  position:relative;
}
.hiw-tab-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:50px;
  border:1px solid transparent;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:0.02em;
  cursor:pointer; background:transparent;
  color:rgba(0,0,0,0.6);
  transition:all .3s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;
}
.hiw-tab-btn svg { flex-shrink:0; transition:all .3s; opacity:0.35; }
.hiw-tab-btn:hover {
  color:rgba(0,0,0,0.65);
  border-color:rgba(0,0,0,0.1);
}
.hiw-tab-btn:hover svg { opacity:0.65; }

/* ═══════════════════════════════════════
   MODEL SHOWCASE — BENTO GRID
   ═══════════════════════════════════════ */
#marketplace { background:var(--bg2); }
.models-bento {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media(max-width:900px) { .models-bento { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px) { .models-bento { grid-template-columns:repeat(1,1fr); } }
@media(max-width:540px) { .models-bento .mc-card:nth-child(n+4) { display:none; } }

/* ── Model Card ── */
.mc-card {
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:24px; overflow:hidden; cursor:pointer;
  transition:transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, border-color 0.3s;
  display:flex; flex-direction:column;
  position:relative;
  backdrop-filter:blur(12px);
}
.mc-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(99,102,241,0.12), 0 0 0 1px rgba(99,102,241,0.2); border-color:rgba(99,102,241,0.2); }
.mc-photo {
  position:relative; height:280px;
  background:linear-gradient(135deg,#e8edf8,#dde4f0);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin:10px 10px 0;
  border-radius:16px;
}
.mc-photo img { width:100%; height:100%; object-fit:cover; object-position:top; position:absolute; inset:0; z-index:1; transition:transform 0.4s ease; }
.mc-card:hover .mc-photo img { transform:scale(1.04); }
.mc-photo-placeholder {
  font-family:'Space Grotesk',sans-serif; font-size:6rem; font-weight:800;
  color:rgba(0,0,0,0.1); user-select:none; position:relative; z-index:1;
  letter-spacing:-0.04em;
}
.mc-badge {
  position:absolute; top:10px; right:10px;
  font-size:10px; font-weight:700; padding:5px 12px;
  border-radius:99px; letter-spacing:0.04em; z-index:3;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.mc-badge-popular { background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.45); color:#22d3ee; }
.mc-badge-new     { background:rgba(99,102,241,0.2);  border:1px solid rgba(99,102,241,0.5);  color:#67e8f9; }
.mc-info { padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }
.mc-name {
  font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
  color:#1e293b; margin-bottom:3px; letter-spacing:-0.02em;
}
.mc-location { font-size:12px; color:#475569; margin-bottom:14px; }
.mc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.mc-tag {
  font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:99px;
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.1);
  color:#475569; transition:all 0.2s;
}
.mc-card:hover .mc-tag { border-color:rgba(99,102,241,0.3); color:rgba(99,102,241,0.8); }
.mc-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.mc-price-val {
  font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:800;
  color:#1e293b; line-height:1; letter-spacing:-0.02em;
}
.mc-price-val span { font-size:12px; font-weight:500; color:#64748b; letter-spacing:0; }
.mc-gens { font-size:10px; color:#64748b; margin-top:3px; }
.mc-gen-btn {
  font-size:13px; font-weight:600; letter-spacing:0;
  padding:10px 20px; border-radius:99px;
  border:none; background:linear-gradient(135deg,var(--violet),var(--violet-lt));
  color:#fff; cursor:pointer; transition:all 0.2s;
  box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
.mc-gen-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(99,102,241,0.5);
}

/* ═══════════════════════════════════════
   FOR BRANDS + FOR MODELS — SPLIT
   ═══════════════════════════════════════ */
.split-section {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.split-section.rev { direction:rtl; }
.split-section.rev > * { direction:ltr; }
@media(max-width:900px) {
  .split-section { grid-template-columns:1fr; gap:3rem; }
  .split-section.rev { direction:ltr; }
}
.split-text h2 {
  font-family:'Space Grotesk', sans-serif; font-size:clamp(32px,4.5vw,52px);
  font-weight:800; line-height:1.05; letter-spacing:-0.03em; margin-bottom:1rem;
}
.split-text p {
  font-size:16px; color:var(--muted); line-height:1.7; margin-bottom:2rem;
}
.split-features { display:flex; flex-direction:column; gap:1rem; margin-bottom:2.5rem; }
.split-feat {
  display:flex; gap:16px; align-items:center;
  padding:18px 20px; border-radius:14px;
  border:1px solid rgba(0,0,0,0.07);
  background:rgba(255,255,255,0.7);
  transition:border-color 0.25s, background 0.25s, transform 0.2s;
}
.split-feat:hover {
  border-color:rgba(99,102,241,0.3);
  background:rgba(99,102,241,0.06);
  transform:translateX(4px);
}
.sf-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(99,102,241,0.15);
  border:1px solid rgba(99,102,241,0.2);
}
.sf-icon svg { width:18px; height:18px; }
.sf-title {
  font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700;
  margin-bottom:2px; color:#1e293b;
}
.sf-desc { font-size:11.5px; color:var(--muted); line-height:1.5; }
.split-btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* Brand 3-Step Process */
.brand-step {
  display:flex; align-items:flex-start; gap:1.25rem; padding:1.25rem 0; position:relative; z-index:1;
}
.brand-step-num {
  width:54px; height:54px; min-width:54px; border-radius:16px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(99,102,241,.3);
}
.brand-step-content { flex:1; }
.brand-step-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:#6366f1; margin-bottom:4px;
}
.brand-step-title {
  font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:800;
  color:var(--fg); margin-bottom:4px;
}
.brand-step-desc {
  font-size:.85rem; color:rgba(15,23,42,.6); line-height:1.6;
}

/* AI Outfit Suggestion Cards */
.outfit-cards-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px;
}
@media(max-width:900px){ .outfit-cards-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:500px){ .outfit-cards-grid { grid-template-columns:1fr; } }
.outfit-card {
  background:rgba(255,255,255,.6); border:1.5px solid rgba(0,0,0,.06); border-radius:10px;
  padding:8px 10px; cursor:pointer; transition:all .2s;
}
.outfit-card:hover { border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.04); }
.outfit-card.selected {
  border-color:#6366f1; background:rgba(99,102,241,.08);
  box-shadow:0 0 0 2px rgba(99,102,241,.15);
}
.outfit-card-name {
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700;
  color:#1e293b; margin-bottom:1px;
}
.outfit-card-vibe {
  font-size:.6rem; color:#6366f1; font-style:italic; margin-bottom:2px;
}
.outfit-card-pieces {
  font-size:.62rem; color:rgba(15,23,42,.5); line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.outfit-card-loading {
  grid-column:1 / -1; text-align:center; padding:16px;
  color:rgba(15,23,42,.45); font-size:.8rem;
}

/* Brand Flowchart Card */
.brand-flow-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:2rem; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.08);
}
.brand-flow-title {
  font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:700;
  color:rgba(15,23,42,.5); text-align:center; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:1.75rem;
}
.brand-flow-steps {
  display:flex; align-items:flex-start; justify-content:center; gap:.75rem;
}
.brand-flow-item {
  display:flex; flex-direction:column; align-items:center; text-align:center; flex:1;
}
.brand-flow-icon {
  width:64px; height:64px; border-radius:16px; display:flex;
  align-items:center; justify-content:center; margin-bottom:.75rem;
}
.brand-flow-label {
  font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:700;
  color:var(--fg); margin-bottom:2px;
}
.brand-flow-sub {
  font-size:.7rem; color:rgba(15,23,42,.45); line-height:1.4;
}
.brand-flow-arrow {
  display:flex; align-items:center; padding-top:20px;
}
.brand-flow-stats {
  display:flex; justify-content:center; gap:2rem; margin-top:1.75rem;
  padding-top:1.25rem; border-top:1px solid var(--border);
}
.brand-flow-stat {
  display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.75rem;
  color:rgba(15,23,42,.5);
}
@media(max-width:600px){
  .brand-flow-steps { flex-direction:column; align-items:center; gap:1rem; }
  .brand-flow-arrow { transform:rotate(90deg); padding-top:0; }
  .brand-flow-stats { gap:1rem; }
}

/* Mockup window */
.mockup-win {
  border-radius:var(--r-xl);
  background:var(--bg3);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,0.6);
}
.mockup-bar {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.dot { width:10px; height:10px; border-radius:50%; }
.dot-r { background:#f87171; }
.dot-y { background:#22d3ee; }
.dot-g { background:#34d399; }
.mockup-url {
  flex:1; text-align:center; font-size:11px; color:var(--muted);
  background:rgba(255,255,255,0.04); padding:4px 12px; border-radius:99px;
}
.mockup-body { padding:0; }
.earn-body { padding:18px 20px; }

/* Studio mockup */
.studio-grid {
  display:grid; grid-template-columns:44% 56%;
}
.studio-left {
  padding:16px 14px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}
.studio-right {
  padding:16px 14px;
  display:flex; flex-direction:column;
}
.studio-section-title {
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; margin-top:14px;
}
.studio-section-title:first-child { margin-top:0; }
.upload-zone {
  border:1.5px dashed rgba(99,102,241,0.3); border-radius:var(--r-md);
  padding:14px 10px; text-align:center;
  font-size:10px; color:var(--muted); line-height:1.6;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(99,102,241,0.03);
}
.upload-zone em { color:var(--green); font-style:normal; font-size:9px; }
.pose-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.pose-btn {
  font-size:9px; font-weight:600; padding:5px 4px; text-align:center;
  border-radius:99px; cursor:pointer; border:1px solid var(--border);
  background:none; color:var(--muted); transition:all 0.2s; white-space:nowrap;
}
.pose-btn.active { background:rgba(99,102,241,0.15); border-color:rgba(99,102,241,0.5); color:var(--violet-lt); }
.generate-btn {
  width:100%; padding:10px; border-radius:99px; border:none; cursor:pointer;
  background:linear-gradient(135deg, #6366f1, #6366f1);
  color:#fff; font-family:'Space Grotesk', sans-serif; font-size:11px; font-weight:700;
  box-shadow:0 4px 18px rgba(99,102,241,0.4); margin-top:auto; padding-top:10px;
}
.results-title {
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.mockup-result-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; flex:1; }
.result-img {
  border-radius:var(--r-md);
  background:linear-gradient(135deg, #ddeef4, #cce4ef);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; min-height:110px;
}
.result-label {
  position:absolute; bottom:6px; right:7px;
  font-size:8px; color:rgba(0,0,0,0.35);
  font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:0.04em;
}
.result-status {
  margin-top:10px; font-size:10px; color:var(--green);
  display:flex; align-items:center; gap:5px;
}
.live-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:pulse-dot 1.5s infinite; flex-shrink:0;
}

/* Earnings mockup */
.earn-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:12px;
}
.earn-title {
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700;
}
.earn-period { font-size:11px; color:var(--muted); margin-top:2px; }
.earn-big {
  font-family:'Space Grotesk', sans-serif; font-size:36px; font-weight:800;
  letter-spacing:-0.04em; color:var(--white); margin-bottom:4px;
}
.earn-up { font-size:12px; color:var(--green); margin-bottom:16px; }
.earn-chart {
  display:flex; align-items:flex-end; gap:4px; height:70px;
  border-bottom:1px solid var(--border); margin-bottom:16px; padding-bottom:4px;
}
@keyframes barPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50% { transform: scaleY(1.18); opacity: 1; }
}
.bar {
  flex:1; border-radius:3px 3px 0 0;
  background:rgba(99,102,241,0.25); min-height:6px;
  transform-origin: bottom;
  animation: barPulse 2.4s ease-in-out infinite;
}
.bar:nth-child(1)  { animation-delay: 0s; }
.bar:nth-child(2)  { animation-delay: 0.2s; }
.bar:nth-child(3)  { animation-delay: 0.4s; }
.bar:nth-child(4)  { animation-delay: 0.6s; }
.bar:nth-child(5)  { animation-delay: 0.8s; }
.bar:nth-child(6)  { animation-delay: 1.0s; }
.bar:nth-child(7)  { animation-delay: 1.2s; }
.bar:nth-child(8)  { animation-delay: 1.4s; }
.bar:nth-child(9)  { animation-delay: 1.6s; }
.bar:nth-child(10) { animation-delay: 1.8s; }
.bar:nth-child(11) { animation-delay: 2.0s; }
.bar.hi { background:linear-gradient(to top, #6366f1, #6366f1); }
.usage-rows { display:flex; flex-direction:column; gap:8px; }
.usage-row {
  display:flex; align-items:center; gap:10px; font-size:12px;
}
.usage-dot { width:6px; height:6px; border-radius:50%; background:var(--violet-lt); flex-shrink:0; }
.usage-brand { flex:1; color:var(--muted); font-size:11px; }
.usage-count { font-size:11px; color:var(--muted); width:70px; text-align:right; }
.usage-earn { font-weight:700; color:var(--white); font-size:12px; min-width:60px; text-align:right; }

/* Stats grid */
.stats-grid-2x2 {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border-radius:var(--r-md); overflow:hidden;
  margin-bottom:1.5rem;
}
.stat-cell {
  padding:1.5rem; background:var(--bg2);
}
.stat-cell-val {
  font-family:'Space Grotesk', sans-serif; font-size:30px; font-weight:800;
  letter-spacing:-0.04em; color:var(--violet-lt); line-height:1;
  margin-bottom:4px;
}
.stat-cell-label { font-size:11px; color:var(--muted); }

/* ═══════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════ */
#testimonials { background:var(--bg2); overflow:hidden; }
.test-track {
  display:flex; gap:1.25rem; width:max-content;
  animation:marquee-scroll 30s linear infinite;
}
.test-track:hover { animation-play-state:paused; }
.test-card {
  width:320px; flex-shrink:0; padding:24px;
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.test-stars { color:var(--gold); font-size:12px; margin-bottom:12px; letter-spacing:2px; }
.test-quote {
  font-size:14px; color:var(--muted); line-height:1.65; margin-bottom:16px;
}
.test-quote em { color:var(--white); font-style:normal; font-weight:500; }
.test-author { display:flex; align-items:center; gap:10px; }
.test-av {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700;
  color:#fff; flex-shrink:0;
  background:linear-gradient(135deg, #6366f1, #0891b2);
}
.test-name { font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; }
.test-role { font-size:11px; color:var(--muted); }

/* ═══════════════════════════════════════
   FEATURES — BENTO GRID
   ═══════════════════════════════════════ */
#features { background:var(--bg); }
/* ═══ ORBIT FEATURES ═══ */
.orbit-wrap {
  position:relative;
  width:100%; max-width:700px; margin:0 auto;
  aspect-ratio:1/1;
}
.orbit-ring {
  position:absolute; inset:0; width:100%; height:100%;
  animation:orbitSpin 30s linear infinite;
}
.orbit-loop-mobile { display:none; }
@keyframes orbitSpin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.orbit-dot {
  animation:orbitDotPulse 2s ease-in-out infinite;
}
.orbit-dot-2 { animation-delay:.5s; }
.orbit-dot-3 { animation-delay:1s; }
.orbit-dot-4 { animation-delay:1.5s; }
@keyframes orbitDotPulse {
  0%,100% { r:4; opacity:.6; }
  50% { r:6; opacity:1; }
}

/* Phone mockup */
.orbit-phone {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:140px; height:280px;
  background:#0f172a;
  border-radius:28px;
  border:3px solid rgba(99,102,241,.3);
  box-shadow:0 0 60px rgba(99,102,241,.15), 0 20px 60px rgba(0,0,0,.2);
  overflow:hidden;
  z-index:2;
}
.orbit-phone-notch {
  width:50px; height:6px;
  background:rgba(255,255,255,.15);
  border-radius:4px;
  margin:10px auto 0;
}
.orbit-phone-screen {
  padding:16px 12px;
  display:flex; flex-direction:column;
  align-items:center; gap:12px;
  height:calc(100% - 20px);
}
.orbit-phone-brand {
  font-family:'Space Grotesk',sans-serif;
  font-size:16px; font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,#6366f1,#a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.orbit-phone-preview {
  width:100%; flex:1;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(167,139,250,.1));
  border-radius:12px;
  position:relative; overflow:hidden;
}
.orbit-phone-shimmer {
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  animation:phoneShimmer 2.5s ease-in-out infinite;
}
@keyframes phoneShimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.orbit-phone-btn {
  padding:8px 20px;
  background:linear-gradient(135deg,#6366f1,#818cf8);
  border-radius:10px;
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:.02em;
}

/* Orbiting points */
.orbit-point {
  position:absolute;
  display:flex; align-items:center; gap:10px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  z-index:3;
  transition:transform .3s, box-shadow .3s;
  animation:orbitFloat 4s ease-in-out infinite;
}
.orbit-point:hover {
  transform:scale(1.05);
  box-shadow:0 8px 32px rgba(99,102,241,.15);
}
.op-icon {
  font-size:22px; flex-shrink:0;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(99,102,241,.07);
  border-radius:12px;
}
.op-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:13px; font-weight:700; color:#1e293b;
  margin-bottom:2px;
}
.op-desc {
  font-size:11.5px; color:#64748b; line-height:1.4;
}

/* Position each point around the phone */
.op-1 { top:4%;  left:50%; transform:translateX(-50%); animation-delay:0s; }
.op-2 { top:20%; right:0;  animation-delay:.7s; }
.op-3 { top:55%; right:0;  animation-delay:1.4s; }
.op-4 { bottom:4%; left:50%; transform:translateX(-50%); animation-delay:2.1s; }
.op-5 { top:55%; left:0;   animation-delay:2.8s; }
.op-6 { top:20%; left:0;   animation-delay:3.5s; }

@keyframes orbitFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
/* Keep centered ones from losing their centering during float */
.op-1, .op-4 {
  animation-name:orbitFloatCenter;
}
@keyframes orbitFloatCenter {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-8px); }
}

/* Mobile responsive */
@media(max-width:700px) {
  .orbit-wrap {
    max-width:100%;
    aspect-ratio:auto;
    min-height:580px;
    height:580px;
    overflow:hidden;
    position:relative;
    display:block;
    padding:0;
  }
  .orbit-ring { display:none; }
  .orbit-loop-mobile {
    display:block;
    position:absolute;
    inset:0; width:100%; height:100%;
    z-index:1;
    pointer-events:none;
  }
  .orbit-phone {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:100px; height:200px;
    border-radius:20px;
  }
  .orbit-phone-brand { font-size:12px; }
  .orbit-phone-btn { padding:5px 12px; font-size:8px; }
  .orbit-phone-screen { padding:10px 8px; gap:6px; }
  .orbit-phone-notch { width:30px; height:4px; margin-top:7px; }
  .orbit-point {
    padding:6px 8px;
    border-radius:10px;
    max-width:105px;
    animation:orbitFloat 4s ease-in-out infinite !important;
  }
  .op-icon {
    font-size:13px;
    width:24px; height:24px;
    border-radius:6px;
    flex-shrink:0;
  }
  .op-icon svg { width:12px; height:12px; }
  .op-title { font-size:9.5px; font-weight:700; }
  .op-desc { display:none; }
  .op-text { max-width:none; }

  /* Scattered around the phone */
  .op-6 { top:60px;   left:12px;   right:auto; bottom:auto; animation-delay:0s !important; }
  .op-1 { top:30px;   right:20px;  left:auto;  bottom:auto; animation-delay:1.2s !important; }
  .op-5 { top:210px;  left:6px;    right:auto; bottom:auto; animation-delay:.5s !important; }
  .op-2 { top:180px;  right:6px;   left:auto;  bottom:auto; animation-delay:1.8s !important; }
  .op-4 { top:auto;   bottom:80px; left:20px;  right:auto; animation-delay:2.5s !important; }
  .op-3 { top:auto;   bottom:40px; right:12px; left:auto;  animation-delay:3.2s !important; }
}

/* ═══════════════════════════════════════
   PRICING
   ═══════════════════════════════════════ */
#pricing { background:var(--bg2); }
.pricing-toggle {
  display:flex; align-items:center; gap:1rem; margin-bottom:3rem;
}
.toggle-track {
  width:48px; height:26px; border-radius:99px; cursor:pointer;
  background:rgba(99,102,241,0.2); border:1px solid var(--border);
  position:relative; transition:background 0.3s;
}
.toggle-track.on { background:var(--violet); border-color:var(--violet); }
.toggle-thumb {
  width:20px; height:20px; border-radius:50%; background:#fff;
  position:absolute; top:2px; left:2px;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.toggle-track.on .toggle-thumb { transform:translateX(22px); }
.toggle-label { font-size:13px; font-weight:500; color:var(--muted); }
.toggle-label.active { color:var(--white); }
.toggle-save {
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:99px;
  background:rgba(16,185,129,0.12); color:var(--green);
  border:1px solid rgba(16,185,129,0.2);
}
.pricing-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
  align-items:start;
}
@media(max-width:1000px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px)  { .pricing-grid { grid-template-columns:1fr; } }
.price-card {
  padding:28px 24px; border-radius:var(--r-xl);
  background:#ffffff;
  
  border:1px solid rgba(0,0,0,0.08);
  position:relative; overflow:hidden;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s;
  transform-style:preserve-3d;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}
.price-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(99,102,241,0.2), transparent);
  pointer-events:none;
}
.price-card:hover {
  border-color:rgba(99,102,241,0.25);
  box-shadow:0 12px 36px rgba(99,102,241,0.12);
}
.price-card.featured {
  transform:translateY(-10px);
  border-color:rgba(99,102,241,0.5);
  background:linear-gradient(160deg, rgba(99,102,241,0.06), #ffffff);
  box-shadow:0 0 0 1px rgba(99,102,241,0.3), 0 32px 80px rgba(99,102,241,0.2), 0 0 60px rgba(99,102,241,0.1);
  animation:featuredPulse 3s ease-in-out infinite;
}
.price-card.featured::before {
  background:linear-gradient(90deg, transparent, rgba(99,102,241,0.5), rgba(8,145,178,0.15), transparent);
}
.price-card.featured:hover { transform:translateY(-16px); }
@keyframes featuredPulse {
  0%,100% { box-shadow:0 0 0 1px rgba(99,102,241,0.3), 0 32px 80px rgba(99,102,241,0.2), 0 0 60px rgba(99,102,241,0.1); }
  50%      { box-shadow:0 0 0 1px rgba(99,102,241,0.5), 0 32px 80px rgba(99,102,241,0.3), 0 0 100px rgba(99,102,241,0.2); }
}
.featured-badge {
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg, #6366f1, #6366f1);
  padding:4px 16px; border-radius:0 0 var(--r-md) var(--r-md);
}
.price-tier {
  font-family:'Space Grotesk', sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.price-amount {
  display:flex; align-items:flex-start; gap:4px; margin-bottom:4px;
  font-family:'Space Grotesk', sans-serif; font-weight:800; letter-spacing:-0.04em;
}
.price-curr { font-size:20px; margin-top:8px; color:var(--muted); }
.price-num { font-size:44px; line-height:1; color:var(--white); }
.price-period { font-size:12px; color:var(--muted); margin-bottom:6px; }
.price-includes {
  font-size:12px; font-weight:600; color:var(--violet-lt);
  margin-bottom:20px;
}
.price-features {
  list-style:none; display:flex; flex-direction:column; gap:10px;
  margin-bottom:24px;
}
.price-features li {
  font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px;
}
.price-features li::before {
  content:'✓'; font-size:11px; font-weight:800;
  width:18px; height:18px; border-radius:50%;
  background:rgba(16,185,129,0.12); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.price-features li.off { opacity:0.35; }
.price-features li.off::before {
  content:'–'; background:rgba(107,106,138,0.1); color:var(--muted);
}
.price-btn {
  width:100%; padding:12px; border-radius:var(--r-md); border:none; cursor:pointer;
  font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600;
  border:1px solid var(--border); background:none; color:var(--muted);
  transition:all 0.25s;
}
.price-btn:hover { border-color:rgba(99,102,241,0.4); color:var(--white); background:rgba(99,102,241,0.06); }
.price-btn.featured-btn {
  background:linear-gradient(135deg, #6366f1, #6366f1);
  color:#fff; border:none;
  box-shadow:0 6px 20px rgba(99,102,241,0.35);
}
.price-btn.featured-btn:hover { box-shadow:0 10px 32px rgba(99,102,241,0.5); transform:translateY(-1px); }

/* ═══════════════════════════════════════
   FAQ
   ═══════════════════════════════════════ */
#faq { background:var(--bg); }
.faq-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border-radius:var(--r-xl); overflow:hidden;
}
@media(max-width:768px) { .faq-grid { grid-template-columns:1fr; } }
.faq-item {
  background:var(--bg); padding:0;
  border-bottom:1px solid var(--border);
  transition:background 0.2s;
}
.faq-item:hover { background:rgba(99,102,241,0.02); }
.faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700;
  color:var(--white);
}
.faq-icon {
  font-size:20px; color:var(--violet-lt); transition:transform 0.25s;
  flex-shrink:0; line-height:1; font-weight:300;
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a {
  font-size:13.5px; color:var(--muted); line-height:1.7;
  padding:0 24px 22px; display:none;
}
.faq-item.open .faq-a { display:block; }

/* ═══════════════════════════════════════
   CTA
   ═══════════════════════════════════════ */
#cta {
  background:var(--bg2); position:relative; overflow:hidden;
  text-align:center;
}
#cta::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(99,102,241,0.1), transparent),
    radial-gradient(ellipse 50% 70% at 70% 40%, rgba(8,145,178,0.04), transparent),
    radial-gradient(ellipse 40% 60% at 50% 80%, rgba(99,102,241,0.06), transparent);
  animation:cta-aurora 10s ease-in-out infinite alternate;
}
@keyframes cta-aurora {
  0% { opacity:0.8; }
  100% { opacity:1.2; }
}
#cta .container { position:relative; z-index:1; }
.cta-h2 {
  font-family:'Space Grotesk', sans-serif; font-size:clamp(36px,5.5vw,70px);
  font-weight:800; line-height:1; letter-spacing:-0.04em;
  margin-bottom:1.25rem;
}
.cta-sub {
  font-size:17px; color:var(--muted); max-width:500px;
  margin:0 auto 2.5rem; line-height:1.65;
}
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; }
.waitlist-wrap {
  display:flex; gap:0; max-width:420px; margin:0 auto;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color 0.3s;
}
.waitlist-wrap:focus-within { border-color:rgba(99,102,241,0.4); }
.waitlist-input {
  flex:1; background:none; border:none; outline:none;
  font-family:'Space Grotesk', sans-serif; font-size:14px; color:var(--white);
  padding:12px 18px;
}
.waitlist-input::placeholder { color:var(--muted); }
.waitlist-btn {
  padding:11px 22px; border:none; cursor:pointer; border-radius:0;
  background:linear-gradient(135deg, #6366f1, #6366f1);
  color:#fff; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
  white-space:nowrap; transition:opacity 0.2s;
}
.waitlist-btn:hover { opacity:0.9; }

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
#footer { background:var(--bg); border-top:1px solid var(--border); padding:4rem 0 2rem; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  margin-bottom:3rem;
}
@media(max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:480px) { .footer-grid { grid-template-columns:1fr; } }
.footer-logo {
  font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.04em;
  background:linear-gradient(135deg, #6366f1, #0891b2);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:10px;
}
.footer-tagline { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:1.5rem; max-width:240px; }
.footer-socials { display:flex; gap:10px; }
.footer-social {
  width:44px; height:44px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--muted);
  transition:all 0.2s;
}
.footer-social:hover { border-color:rgba(99,102,241,0.4); color:var(--white); background:rgba(99,102,241,0.08); box-shadow:0 0 12px rgba(99,102,241,0.2); }
.footer-col-title {
  font-family:'Space Grotesk', sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--white); margin-bottom:1.25rem;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a {
  font-size:13px; color:var(--muted); text-decoration:none; cursor:pointer;
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--white); }
.footer-bottom {
  padding-top:1.5rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-copy { font-size:12px; color:var(--muted); }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:12px; color:var(--muted); cursor:pointer; text-decoration:none; transition:color 0.2s; }
.footer-legal a:hover { color:var(--white); }

/* ═══════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-d1 { transition-delay:0.1s; }
.reveal-d2 { transition-delay:0.2s; }
.reveal-d3 { transition-delay:0.3s; }
.reveal-d4 { transition-delay:0.4s; }

/* ═══ COUNTERS ═══ */
.count-up { font-variant-numeric:tabular-nums; }

/* ═══ Btn base ═══ */
button, a { cursor:pointer; }



/* ══════════════════════════════════════════
   ATWIL v10 — INJECTED STYLES
   ══════════════════════════════════════════ */

/* ── Overlay ── */
#mm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1200;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px;}
#mm-overlay.open{display:flex;}
.mm-modal{max-height:none;}

/* ── Modal ── */
.mm-modal{background:#ffffff;border:1px solid rgba(99,102,241,.12);border-radius:20px;width:min(460px,94vw);padding:40px;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.12);transition:width .3s ease;}
.mm-modal.wide{width:min(820px,94vw);}
.mm-modal h2{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:800;margin:0 0 6px;}
.mm-modal p.sub{color:rgba(0,0,0,.55);font-size:.9rem;font-weight:500;margin:0 0 24px;}
.mm-close{position:absolute;top:12px;right:12px;width:44px;height:44px;background:rgba(0,0,0,.06);border:none;color:rgba(0,0,0,.5);font-size:1.2rem;cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;line-height:1;}
.mm-close:hover{background:rgba(0,0,0,.1);}

/* ── Auth tabs ── */
.mm-tabs{display:flex;gap:4px;background:rgba(0,0,0,.05);border-radius:10px;padding:4px;margin-bottom:24px;}
.mm-tab{flex:1;padding:9px;border:none;background:transparent;color:rgba(0,0,0,.55);font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;border-radius:8px;transition:.2s;}
.mm-tab.active{background:var(--violet);color:#fff;font-weight:800;}

/* ── Form fields ── */
.mm-field{margin-bottom:14px;}
.mm-field label{display:block;font-size:.75rem;font-weight:700;color:rgba(0,0,0,.6);margin-bottom:6px;text-transform:uppercase;letter-spacing:.07em;}
.mm-field input,.mm-field select{width:100%;padding:12px 14px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.12);border-radius:10px;color:#1e293b;font-family:inherit;font-size:.95rem;outline:none;transition:.2s;box-sizing:border-box;}
.mm-field input:focus,.mm-field select:focus{border-color:var(--violet);background:rgba(99,102,241,.06);}
.mm-field select option{background:#ffffff;color:#1e293b;}
.mm-btn-full{width:100%;padding:14px;background:linear-gradient(135deg,var(--violet),var(--pink));border:none;border-radius:12px;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;margin-top:8px;transition:.2s;letter-spacing:.01em;}
.mm-btn-full:hover{filter:brightness(1.12);}
.mm-btn-full:disabled{opacity:.45;cursor:default;}
/* Instagram verify row */
.su-ig-row{display:flex;align-items:center;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.12);border-radius:10px;overflow:hidden;transition:border-color .2s;}
.su-ig-row:focus-within{border-color:var(--violet);}
.su-at{padding:0 4px 0 12px;color:rgba(0,0,0,.4);font-size:.95rem;user-select:none;}
.su-ig-row input{flex:1;background:none;border:none;outline:none;color:#1e293b;font-size:.9rem;padding:12px 8px;font-family:inherit;}
.su-verify-btn{background:var(--violet);color:#fff;border:none;padding:12px 18px;font-weight:700;font-size:.8rem;cursor:pointer;font-family:inherit;transition:opacity .2s;white-space:nowrap;}
.su-verify-btn:hover{opacity:.85;}
.su-verify-btn:disabled{opacity:.45;cursor:default;}
.su-insta-ok{background:rgba(0,184,148,.12);border:1px solid rgba(0,184,148,.35);color:#00b894;}
.su-insta-fail{background:rgba(231,76,111,.12);border:1px solid rgba(231,76,111,.35);color:#e74c6f;}
.mm-error{background:rgba(255,60,60,.12);border:1px solid rgba(255,60,60,.3);color:#ff9090;border-radius:8px;padding:10px 14px;font-size:.83rem;margin-bottom:14px;display:none;}
.mm-error.show{display:block;}

/* ── Role picker cards ── */
.role-picker-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;max-width:420px;margin-left:auto;margin-right:auto;}
@media(max-width:600px){
  .role-picker-row{grid-template-columns:repeat(2,1fr);gap:8px;}
  .rpc-desc{display:none;}
  .role-pick-card{padding:14px 10px;}
  .rpc-icon-wrap{width:40px;height:40px;border-radius:10px;margin:0 auto 8px;}
  .rpc-title{font-size:.78rem;}
  .rpc-tag{font-size:.6rem;padding:2px 6px;}
}
.role-pick-card{
  position:relative;border-radius:20px;padding:24px 16px 20px;cursor:pointer;
  background:#ffffff;
  border:1.5px solid rgba(0,0,0,.07);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
  overflow:hidden;
  text-align:center;
}
.role-pick-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(145deg,var(--card-tint,rgba(99,102,241,.04)) 0%,transparent 60%);
  pointer-events:none;
}
.role-pick-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent-color,rgba(99,102,241,.7)),transparent);
  opacity:0;transition:opacity .25s;border-radius:20px 20px 0 0;
}
.role-pick-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(99,102,241,.12),0 2px 8px rgba(0,0,0,.06);}
.role-pick-card:hover::after{opacity:1;}
.role-pick-card.selected{
  border-color:var(--accent-color,var(--violet));
  background:linear-gradient(145deg,var(--card-tint-strong,rgba(99,102,241,.06)) 0%,#ffffff 70%);
  box-shadow:0 0 0 1px var(--accent-color,var(--violet)),0 8px 28px rgba(99,102,241,.15);
}
.role-pick-card.selected::after{opacity:1;}
.role-pick-card.selected .rpc-check{opacity:1;transform:scale(1);}
.rpc-icon-wrap{
  width:56px;height:56px;border-radius:16px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(135deg,var(--icon-bg1,rgba(99,102,241,.12)),var(--icon-bg2,rgba(99,102,241,.06)));
  border:1px solid var(--accent-color,rgba(99,102,241,.2));
  box-shadow:0 2px 8px rgba(99,102,241,.1);
}
.rpc-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;margin-bottom:6px;color:#0f172a;letter-spacing:-.01em;}
.rpc-desc{font-size:.72rem;color:#64748b;line-height:1.55;margin-bottom:12px;}
.rpc-tag{
  display:inline-block;font-size:.63rem;font-weight:600;
  padding:3px 10px;border-radius:99px;
  background:linear-gradient(135deg,var(--card-tint-strong,rgba(99,102,241,.1)),var(--card-tint,rgba(99,102,241,.06)));
  color:var(--accent-color,#6366f1);
  border:1px solid var(--accent-color,rgba(99,102,241,.2));
  letter-spacing:.02em;text-transform:uppercase;
}
.rpc-check{
  position:absolute;top:10px;right:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent-color,var(--violet));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;font-weight:700;
  opacity:0;transform:scale(.6);
  transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 8px rgba(99,102,241,.4);
}
/* card accent colours */
.rpc-brand{--accent-color:#6366f1;--card-tint:rgba(99,102,241,.04);--card-tint-strong:rgba(99,102,241,.09);--icon-bg1:rgba(99,102,241,.15);--icon-bg2:rgba(99,102,241,.06);}
.rpc-creator{--accent-color:#0891b2;--card-tint:rgba(8,145,178,.04);--card-tint-strong:rgba(8,145,178,.09);--icon-bg1:rgba(8,145,178,.15);--icon-bg2:rgba(8,145,178,.06);}
.rpc-personal{--accent-color:#7c3aed;--card-tint:rgba(124,58,237,.04);--card-tint-strong:rgba(124,58,237,.09);--icon-bg1:rgba(124,58,237,.15);--icon-bg2:rgba(124,58,237,.06);}

/* ── Toast (Sonner-style) ── */
#toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:380px;width:calc(100% - 48px);}
.toast{position:relative;background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 14px;color:#0f172a;font-size:.88rem;min-width:260px;display:flex;align-items:flex-start;gap:10px;pointer-events:auto;box-shadow:0 4px 12px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.06);transform:translateX(calc(100% + 32px));opacity:0;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .28s ease-out,box-shadow .2s ease;will-change:transform,opacity;}
.toast.is-visible{transform:translateX(0);opacity:1;}
.toast.is-leaving{transform:translateX(calc(100% + 32px));opacity:0;transition:transform .26s cubic-bezier(.4,.0,.68,.06),opacity .2s ease-in;}
.toast:hover{box-shadow:0 6px 16px rgba(0,0,0,.08),0 14px 36px rgba(0,0,0,.08);}
.toast-icon{flex-shrink:0;width:18px;height:18px;margin-top:1px;display:flex;align-items:center;justify-content:center;}
.toast-icon svg{width:18px;height:18px;stroke-width:2.25;}
.toast-content{flex:1;min-width:0;padding-right:14px;}
.toast-title{font-size:.88rem;font-weight:600;line-height:1.4;color:#0f172a;word-wrap:break-word;}
.toast-desc{font-size:.78rem;color:#64748b;line-height:1.45;margin-top:3px;word-wrap:break-word;}
.toast-action{flex-shrink:0;align-self:center;font-size:.78rem;font-weight:600;padding:6px 11px;border-radius:7px;background:rgba(99,102,241,.1);color:#4f46e5;border:1px solid rgba(99,102,241,.2);cursor:pointer;font-family:inherit;transition:background .15s ease,border-color .15s ease;}
.toast-action:hover{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.35);}
.toast-close{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:5px;background:#ffffff;border:1px solid rgba(0,0,0,.08);color:#94a3b8;cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;}
.toast-close svg{width:11px;height:11px;stroke-width:2.5;}
.toast:hover .toast-close{display:flex;}
.toast-close:hover{background:#f1f5f9;color:#475569;border-color:rgba(0,0,0,.12);}
.toast.success .toast-icon{color:#16a34a;}
.toast.error .toast-icon{color:#dc2626;}
.toast.warning .toast-icon{color:#d97706;}
.toast.info .toast-icon{color:#6366f1;}
.toast.loading .toast-icon{color:#6366f1;}
.toast.loading .toast-icon svg{animation:atwilToastSpin 1s linear infinite;}
@keyframes atwilToastSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* ── Dashboard base ── */
#brand-dash,#model-dash{display:none;min-height:100vh;padding:140px 24px 80px;max-width:1160px;margin:0 auto;}
#brand-dash.active,#model-dash.active{display:block;}
/* Safety: prevent both dashboards from showing simultaneously */
body.atwil-role-model #brand-dash{display:none!important;}
body.atwil-role-brand #model-dash{display:none!important;}
.dash-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:40px;}
.dash-title{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,rgba(255,255,255,.6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.dash-balance-wrap{display:flex;align-items:center;gap:12px;}
.dash-balance{background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);border-radius:12px;padding:10px 18px;font-size:.92rem;}
.dash-balance span{color:var(--violet);font-weight:700;}
.topup-btn{padding:9px 18px;background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.35);border-radius:10px;color:var(--violet);font-size:.85rem;font-family:inherit;cursor:pointer;transition:.2s;}
.topup-btn:hover{background:rgba(99,102,241,.3);}

/* ── Brand dashboard grid ── */
.dash-grid{display:grid;grid-template-columns:360px 1fr;gap:24px;}
@media(max-width:800px){.dash-grid{grid-template-columns:1fr;}}
.dash-panel{background:rgba(255,255,255,.025);border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:24px;margin-bottom:0;}
.dash-panel h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 18px;color:rgba(15,23,42,.9);}

/* ── Upload zone ── */
.upload-zone{border:2px dashed rgba(255,255,255,.12);border-radius:12px;padding:36px 20px;text-align:center;cursor:pointer;transition:.25s;position:relative;overflow:hidden;}
.upload-zone:hover{border-color:var(--violet);background:rgba(99,102,241,.04);}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-zone p{color:rgba(15,23,42,.6);font-size:.82rem;margin:6px 0 0;}
.analysis-out{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.18);border-radius:10px;padding:12px 14px;font-size:.8rem;color:rgba(15,23,42,.65);line-height:1.65;margin-top:12px;display:none;}

/* ── Model picker ── */
.model-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;max-height:280px;overflow-y:auto;padding-right:4px;}
.model-picker::-webkit-scrollbar{width:4px;}
.model-picker::-webkit-scrollbar-track{background:transparent;}
.model-picker::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}
.mpick-card{background:rgba(255,255,255,.035);border:1px solid rgba(0,0,0,.07);border-radius:10px;padding:10px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:10px;}
.mpick-card:hover{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.07);}
.mpick-card.selected{border-color:var(--violet);background:rgba(99,102,241,.12);}
.mpick-photo{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#1a1230;flex-shrink:0;}
.mpick-initials{display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--violet-lt);background:rgba(99,102,241,.15);letter-spacing:.02em;}
.mpick-name{font-size:.82rem;font-weight:600;line-height:1.2;}
.mpick-city{font-size:.72rem;color:rgba(15,23,42,.6);margin-top:2px;}

/* ── Pose/setting buttons ── */
.pose-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.pose-btn{padding:7px 13px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:8px;color:#475569;font-size:.78rem;font-family:inherit;cursor:pointer;transition:.2s;}
.pose-btn:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.4);color:#4f46e5;}
.pose-btn.selected{background:rgba(99,102,241,.18);border-color:#6366f1;color:#4f46e5;font-weight:600;}

/* ── Pose thumbnail picker ── */
.pose-thumb-btn{width:60px;flex-shrink:0;cursor:pointer;border:2px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:rgba(0,0,0,.04);padding:0;transition:.2s;font-family:inherit;}
.pose-thumb-btn img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}
.pose-thumb-btn span{display:block;font-size:.6rem;text-align:center;padding:4px 2px;color:rgba(15,23,42,.7);}
.pose-thumb-btn:hover{border-color:rgba(99,102,241,.5);}
.pose-thumb-btn.selected{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet);}
.pose-thumb-btn.selected span{color:#fff;}

/* ── Generate button ── */
.gen-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--violet),var(--pink));border:none;border-radius:14px;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1rem;cursor:pointer;margin-top:20px;transition:.25s;letter-spacing:.02em;}
.gen-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.gen-btn:disabled{opacity:.4;cursor:default;transform:none;}

/* ── Results ── */
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:16px;}
.result-img-wrap{position:relative;border-radius:12px;overflow:hidden;}
.result-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid rgba(0,0,0,.07);cursor:pointer;transition:.2s;display:block;}
.result-img:hover{transform:scale(1.02);border-color:rgba(99,102,241,.4);}
.result-img-wrap .result-btns{position:absolute;bottom:10px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity .2s;}
.result-img-wrap:hover .result-btns{opacity:1;}
.result-download-btn{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.12);color:#1e293b;font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:6px 14px;border-radius:20px;cursor:pointer;white-space:nowrap;}
.result-download-all-btn{display:block;width:100%;margin-bottom:12px;padding:10px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:12px;color:var(--violet-lt);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;}
.result-download-all-btn:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.5);}
/* Shoot Style Presets */
.shoot-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;}
@media(max-width:600px){.shoot-style-grid{grid-template-columns:repeat(2,1fr);}}
.shoot-style-btn{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:10px 8px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;}
.shoot-style-btn:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3);}
.shoot-style-btn.active{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.5);}
.ss-icon{font-size:1.1rem;line-height:1;}
.ss-name{font-size:.78rem;font-weight:700;color:rgba(15,23,42,.85);}
.ss-desc{font-size:.62rem;color:rgba(15,23,42,.55);line-height:1.3;}
.result-animate-btn{background:linear-gradient(135deg,rgba(99,102,241,.92),rgba(8,145,178,.65));backdrop-filter:blur(8px);border:none;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.08em;padding:6px 14px;border-radius:20px;cursor:pointer;white-space:nowrap;}
.result-video-wrap{position:relative;border-radius:12px;overflow:hidden;background:#000;}
.result-video-wrap video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:12px;}
.result-video-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:3px 8px;border-radius:10px;}
.result-video-btns{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;opacity:0;transition:opacity .2s;}
.result-video-wrap:hover .result-video-btns{opacity:1;}
.result-video-btn{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.12);color:#1e293b;font-size:.7rem;font-weight:600;padding:5px 13px;border-radius:20px;cursor:pointer;white-space:nowrap;}
.result-anim-progress{padding:20px;text-align:center;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:12px;}
.anim-style-btn{padding:7px 16px;border-radius:20px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.04);color:rgba(15,23,42,.75);font-size:.78rem;font-family:var(--font);cursor:pointer;transition:.2s;}
.anim-style-btn:hover{border-color:var(--violet);color:#4f46e5;}
.anim-style-btn.active{background:rgba(99,102,241,.15);border-color:#6366f1;color:#4f46e5;font-weight:600;}
/* ── Director Mode ── */
#director-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;}
#director-overlay.open{display:flex;}
#director-modal{background:#fff;border-radius:20px;width:92%;max-width:600px;max-height:88vh;overflow-y:auto;padding:32px 28px;box-shadow:0 24px 80px rgba(0,0,0,.25);position:relative;}
.dir-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.4rem;color:rgba(15,23,42,.4);cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s;}
.dir-close:hover{background:rgba(0,0,0,.06);color:#1e293b;}
.dir-title{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:800;color:#1e293b;margin-bottom:4px;}
.dir-sub{font-size:.82rem;color:rgba(15,23,42,.5);margin-bottom:20px;line-height:1.5;}
.dir-dropzone{border:2px dashed rgba(234,88,12,.25);border-radius:14px;padding:36px 20px;text-align:center;cursor:pointer;transition:.3s;background:rgba(234,88,12,.03);}
.dir-dropzone:hover{border-color:rgba(234,88,12,.5);background:rgba(234,88,12,.06);}
.dir-dropzone-label{font-size:.85rem;font-weight:600;color:#1e293b;margin-top:8px;}
.dir-dropzone-hint{font-size:.75rem;color:rgba(15,23,42,.4);margin-top:4px;}
.dir-preview{margin:16px 0;border-radius:12px;overflow:hidden;display:none;}
.dir-preview img{width:100%;max-height:280px;object-fit:contain;background:#0a0a18;border-radius:12px;}
.dir-spinner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 0;}
.dir-spinner-ring{width:42px;height:42px;border:3px solid rgba(234,88,12,.15);border-top-color:#ea580c;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.dir-spinner-text{font-size:.82rem;color:rgba(15,23,42,.55);letter-spacing:.04em;}
.dir-cards{display:flex;flex-direction:column;gap:12px;margin:16px 0;}
.dir-card{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px 20px;cursor:pointer;transition:.3s;position:relative;overflow:hidden;}
.dir-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(234,88,12,.04),rgba(99,102,241,.04));opacity:0;transition:.3s;}
.dir-card:hover{border-color:rgba(234,88,12,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.dir-card:hover::before{opacity:1;}
.dir-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;position:relative;z-index:1;}
.dir-card-name{font-weight:700;font-size:.95rem;color:#1e293b;}
.dir-card-vibe{font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(234,88,12,.1);color:#ea580c;text-transform:uppercase;letter-spacing:.06em;}
.dir-card-desc{font-size:.8rem;color:rgba(15,23,42,.55);line-height:1.5;position:relative;z-index:1;}
.dir-card-api{font-size:.65rem;color:rgba(15,23,42,.35);margin-top:8px;position:relative;z-index:1;}
.dir-result{text-align:center;padding:20px 0;}
.dir-result video{width:100%;max-height:400px;border-radius:14px;background:#000;}
.dir-result-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;}
.dir-result-btn{padding:10px 22px;border-radius:12px;font-size:.82rem;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:.2s;}
.dir-btn-download{background:linear-gradient(135deg,#ea580c,#f97316);color:#fff;}
.dir-btn-download:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(234,88,12,.3);}
.dir-btn-retry{background:rgba(0,0,0,.06);color:#1e293b;border:1px solid rgba(0,0,0,.1);}
.dir-btn-retry:hover{background:rgba(0,0,0,.1);}
.result-anim-progress .spinner{margin:0 auto 10px;}
.result-anim-progress p{font-size:.78rem;color:rgba(15,23,42,.75);letter-spacing:.06em;margin:0;}
.bd-hist-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.bd-hist-img-wrap{position:relative;border-radius:8px;overflow:hidden;}
.bd-hist-img-wrap img{width:64px;height:80px;object-fit:cover;border-radius:8px;display:block;border:1px solid rgba(0,0,0,.07);}
.bd-hist-dl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s;border-radius:8px;cursor:pointer;font-size:.7rem;color:#fff;font-weight:700;}
.bd-hist-img-wrap:hover .bd-hist-dl{opacity:1;}
.gen-progress{text-align:center;padding:60px 20px;color:rgba(15,23,42,.6);}
.gen-progress .spinner{width:44px;height:44px;border:3px solid rgba(99,102,241,.18);border-top-color:var(--violet);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px;}
@keyframes spin{to{transform:rotate(360deg);}}
.gen-progress .prog-text{font-size:.9rem;margin-bottom:6px;color:rgba(15,23,42,.55);}
.gen-progress .prog-sub{font-size:.78rem;color:rgba(15,23,42,.75);}

/* ── Model dashboard ── */
.model-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
@media(max-width:600px){.model-stats{grid-template-columns:1fr 1fr;}}
.stat-card{background:rgba(255,255,255,.025);border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:20px;text-align:center;}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:1.9rem;font-weight:800;background:linear-gradient(135deg,var(--violet),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-label{font-size:.75rem;color:rgba(15,23,42,.6);margin-top:5px;text-transform:uppercase;letter-spacing:.06em;}
.training-zone{border:2px dashed rgba(255,255,255,.1);border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer;transition:.25s;position:relative;overflow:hidden;}
.training-zone:hover{border-color:var(--cyan);background:rgba(99,102,241,.04);}
.training-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.model-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:700px){.model-dash-grid{grid-template-columns:1fr;}}

/* ── Hero stat fix: count-up span is the NUMBER, must match parent size ──
   v9 rule targets all spans in stat-val at 14px (designed for suffix spans),
   but the HTML puts the number inside the span and the suffix as bare text.
   Override so numbers render at full 28px white bold. ── */
.hero-stat-val .count-up{font-size:inherit!important;color:inherit!important;font-weight:inherit!important;}
/* Style bare suffix text (+, s, %) and prefix (₹) — wrap with stat-sfx via build */
.hero-stat-val .stat-sfx{font-size:.6em;color:var(--violet-lt);vertical-align:.12em;font-weight:700;}
.hero-stat-val .stat-pfx{font-size:.6em;color:var(--violet-lt);vertical-align:.12em;font-weight:700;margin-right:1px;}

/* ── Studio Home Cards ── */
/* Studio Home — Hero */
.studio-hero { margin-bottom:28px; }
.studio-hero-title {
  font-family:'Space Grotesk',sans-serif; font-size:clamp(1.3rem,2.5vw,1.7rem);
  font-weight:800; color:var(--fg); letter-spacing:-0.02em; margin:0 0 6px;
}
.studio-hero-sub { font-size:.88rem; color:rgba(15,23,42,.55); line-height:1.6; margin:0; }

/* Studio Home — Quick Stats */
.studio-stats-row {
  display:flex; gap:10px; margin-bottom:14px;
}
.studio-stat {
  flex:1; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;
  transition:all .25s; position:relative; overflow:hidden;
}
.studio-stat::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  border-radius:14px 0 0 14px; opacity:0; transition:opacity .25s;
}
.studio-stat:hover { border-color:rgba(0,0,0,.1); box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-1px); }
.studio-stat:hover::before { opacity:1; }
.studio-stat-val {
  font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:700; color:var(--fg); line-height:1.2;
}
.studio-stat-label { font-size:.65rem; color:rgba(15,23,42,.45); text-transform:uppercase; letter-spacing:.06em; font-weight:500; }

/* Color variants */
.studio-stat--indigo::before { background:#6366f1; }
.studio-stat--indigo:hover { border-color:rgba(99,102,241,.2); }
.studio-stat--emerald::before { background:#10b981; }
.studio-stat--emerald:hover { border-color:rgba(16,185,129,.2); }
.studio-stat--amber::before { background:#f59e0b; }
.studio-stat--amber:hover { border-color:rgba(245,158,11,.2); }

@media(max-width:500px){ .studio-stats-row { flex-direction:row; } }

/* Studio Home — Workflow Cards */
.studio-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:600px){ .studio-cards-grid { grid-template-columns:1fr; } }
.studio-wf-card {
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px;
  padding:24px; cursor:pointer; transition:all .25s; overflow:hidden;
}
.studio-wf-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.08); }
.studio-wf-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transition:.25s;
}
.studio-wf-card:hover::after { opacity:1; }
.studio-wf-dressup::after { background:linear-gradient(90deg,#6366f1,#8b5cf6); }
.studio-wf-shoot::after { background:linear-gradient(90deg,#0891b2,#06b6d4); }
.studio-wf-cine::after { background:linear-gradient(90deg,#7c3aed,#6366f1); }
.studio-wf-dir::after { background:linear-gradient(90deg,#ea580c,#f97316); }
.studio-wf-badge {
  position:absolute; top:14px; right:14px; font-size:.65rem; font-weight:700;
  padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(99,102,241,.1); color:#6366f1;
}
.studio-wf-icon {
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; background:rgba(99,102,241,.06); color:#6366f1;
}
.studio-wf-shoot .studio-wf-icon { background:rgba(8,145,178,.06); color:#0891b2; }
.studio-wf-cine .studio-wf-icon { background:rgba(124,58,237,.06); color:#7c3aed; }
.studio-wf-dir .studio-wf-icon { background:rgba(234,88,12,.06); color:#ea580c; }
.studio-wf-name {
  font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:800;
  color:var(--fg); margin-bottom:6px; letter-spacing:-0.01em;
}
.studio-wf-desc { font-size:.8rem; color:rgba(15,23,42,.55); line-height:1.6; margin-bottom:12px; }
.studio-wf-meta {
  display:flex; gap:10px; font-size:.72rem; color:rgba(15,23,42,.45);
}
.studio-wf-meta span { display:flex; align-items:center; gap:3px; }

/* ═══ UNIFIED STUDIO — FASHN-style ═══ */

/* Upload Area — large centered canvas */
.us-upload-zone {
  border:2px dashed rgba(99,102,241,.15); border-radius:16px;
  background:linear-gradient(135deg, rgba(99,102,241,.02) 0%, rgba(124,58,237,.02) 100%);
  padding:44px 32px 36px; text-align:center; cursor:pointer; transition:all .3s;
  position:relative; overflow:hidden; min-height:200px; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.us-upload-zone::before {
  content:''; position:absolute; inset:0; border-radius:14px;
  background:radial-gradient(circle at 50% 0%, rgba(99,102,241,.06) 0%, transparent 70%);
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.us-upload-zone:hover { border-color:rgba(99,102,241,.35); background:linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(124,58,237,.03) 100%); }
.us-upload-zone:hover::before { opacity:1; }
.us-upload-zone.dragging { border-color:#6366f1; border-style:solid; background:rgba(99,102,241,.05); box-shadow:0 0 0 4px rgba(99,102,241,.1); }
.us-upload-icon {
  width:52px; height:52px; border-radius:14px; background:rgba(99,102,241,.08);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  box-shadow:0 4px 12px rgba(99,102,241,.1);
}
.us-upload-title { font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:700; color:var(--fg); margin-bottom:4px; }
.us-upload-sub { font-size:.78rem; color:rgba(15,23,42,.35); margin-bottom:2px; }
.us-upload-hint { font-size:.7rem; color:rgba(15,23,42,.2); }
.us-upload-actions {
  display:flex; gap:10px; margin-top:16px; align-items:center;
}
.us-upload-action-btn {
  display:flex; align-items:center; gap:6px; padding:9px 20px; border-radius:10px;
  border:1px solid rgba(99,102,241,.15); background:#fff; cursor:pointer; font-size:.82rem;
  font-weight:600; color:#6366f1; transition:all .2s; font-family:inherit;
  box-shadow:0 2px 8px rgba(99,102,241,.08);
}
.us-upload-action-btn:hover { border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.04); box-shadow:0 4px 12px rgba(99,102,241,.12); transform:translateY(-1px); }
.us-upload-action-btn svg { width:16px; height:16px; }

/* Garment Preview — replaces upload zone */
.us-garment-preview {
  display:none; background:linear-gradient(135deg, #fafafa, #f5f3ff); border:1px solid rgba(99,102,241,.1); border-radius:14px;
  padding:12px 18px; position:relative;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.us-garment-preview.active { display:flex; }
.us-garment-thumb {
  width:auto; height:80px; border-radius:8px; object-fit:contain; flex-shrink:0;
}
.us-garment-info { display:none; }
.us-garment-name { display:none; }
.us-garment-detail { display:none; }
.us-garment-clear {
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:8px;
  border:1px solid rgba(0,0,0,.08); background:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:.9rem; color:#64748b; transition:.2s;
}
.us-garment-clear:hover { background:#fee2e2; color:#dc2626; border-color:#fecaca; }

/* Mode Selector — single pill with dropdown */
.us-mode-bar {
  display:flex; margin-top:0; margin-bottom:12px; padding:0;
  justify-content:center;
}
.us-mode-dropdown {
  position:relative; display:inline-flex;
}
.us-mode-pill {
  display:flex; align-items:center; gap:8px; padding:10px 20px;
  border-radius:50px; border:1px solid rgba(99,102,241,.15);
  background:rgba(99,102,241,.04); cursor:pointer; transition:all .2s;
  font-family:'Space Grotesk',sans-serif; font-size:.88rem; font-weight:600; color:#4f46e5;
  box-shadow:0 2px 12px rgba(99,102,241,.08);
}
.us-mode-pill:hover { border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.07); box-shadow:0 4px 16px rgba(99,102,241,.12); }
.us-mode-pill.us-mode-nudge { animation:usNudgePulse .6s ease 2; border-color:rgba(239,68,68,.5); box-shadow:0 0 16px rgba(239,68,68,.25); }
@keyframes usNudgePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.us-mode-pill-icon { width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:#6366f1; }
.us-mode-pill-icon:empty { display:none; }
.us-mode-pill-arrow { opacity:.5; transition:transform .2s; }
.us-mode-dropdown.open .us-mode-pill-arrow { transform:rotate(180deg); }
.us-mode-dropdown.open .us-mode-pill { border-color:rgba(99,102,241,.35); background:rgba(99,102,241,.08); box-shadow:0 4px 20px rgba(99,102,241,.15); }

/* Dropdown menu */
.us-mode-menu {
  display:none; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:210px; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:6px; z-index:200;
  box-shadow:0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.04);
  animation:usModeMenuIn .18s ease;
}
@keyframes usModeMenuIn { from { opacity:0; transform:translateX(-50%) translateY(-4px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.us-mode-dropdown.open .us-mode-menu { display:block; }

.us-mode-option {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
  cursor:pointer; transition:background .15s;
  font-family:'Space Grotesk',sans-serif; font-size:.84rem; font-weight:500; color:#475569;
  white-space:nowrap;
}
.us-mode-option:hover { background:rgba(99,102,241,.06); color:#1e293b; }
.us-mode-option.active { background:rgba(99,102,241,.1); color:#6366f1; font-weight:600; }
.us-mode-option-icon { width:16px; height:16px; display:flex; align-items:center; justify-content:center; opacity:.6; }
.us-mode-option-icon svg { width:16px; height:16px; }
.us-mode-pill-arrow { width:12px; height:12px; }
.us-mode-option.active .us-mode-option-icon { opacity:1; color:#6366f1; }
.us-mode-chip-tag {
  font-size:.55rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 4px; border-radius:3px; background:rgba(234,88,12,.1); color:#ea580c;
}

/* Prompt/Description input area */
/* Old .us-prompt-area removed — prompt now lives inside .us-bottom-bar */

/* ═══ Content Stage ═══ */
.us-content-stage { margin-top:8px; }
.us-stage-view { display:none; }
.us-stage-view.active { display:block; animation:usStageIn .2s ease; }
@keyframes usStageIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.us-analysis-box {
  padding:10px 16px; background:rgba(99,102,241,.04); border:1px solid rgba(99,102,241,.1);
  border-radius:10px; font-size:.78rem; color:#475569; margin-top:10px;
}
.us-stage-heading {
  font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#94a3b8; margin-bottom:6px;
}
.us-stage-heading.us-stage-heading-row {
  display:flex; align-items:center; gap:8px;
}
.us-regen-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border-radius:6px;
  border:1px solid transparent; background:transparent; color:#94a3b8;
  cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease;
  font-family:inherit;
}
.us-regen-btn:hover:not(:disabled) {
  color:#6366f1; background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.2);
}
.us-regen-btn:disabled { cursor:default; opacity:.6; }
.us-regen-btn svg { display:block; }
.us-regen-btn.spinning svg { animation:usRegenSpin 0.9s linear infinite; }
@keyframes usRegenSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Hide the free-text prompt row for Director mode — specificity bumped
   with an ID so we beat the mobile rule #us-mobile-prompt-wrap{display:flex!important}. */
.us-hidden-director { display:none !important; }

/* Hide the Duration / Run / Credits bottom bar while the Director result
   hero card is on screen. ID-level specificity so it beats the mobile
   .us-bottom-bar{display:flex!important} rule. */
.us-bar-hidden,
#us-bottom-bar.us-bar-hidden { display:none !important; }
.us-generating-wrap { text-align:center; padding:24px 16px; }
.us-generating-text { font-size:.78rem; color:#64748b; font-weight:500; margin-top:14px; letter-spacing:.01em; }

/* ── Skeleton (shadcn-inspired) — shimmering loading placeholder ──
   Use .atwil-skel as the base. Variants control shape and aspect ratio.
   Keep colors subtle so generated content can replace it without flash. */
.atwil-skel {
  background:linear-gradient(90deg, #eef2f7 0%, #e2e8f0 50%, #eef2f7 100%);
  background-size:200% 100%;
  animation:atwilSkelShimmer 1.4s ease-in-out infinite;
  border-radius:10px;
  display:block;
}
@keyframes atwilSkelShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.atwil-skel--text     { height:11px; border-radius:6px; }
.atwil-skel--text-sm  { height:9px; border-radius:5px; }

/* Image-generation skeleton grid — mirrors .us-results-grid layout
   so the loading state occupies the same space as the final result. */
.atwil-skel-image-grid {
  display:grid; gap:8px; grid-template-columns:repeat(2,1fr); max-width:420px; margin:0 auto;
}
.atwil-skel-image-grid[data-count="1"] { grid-template-columns:1fr; max-width:200px; }
.atwil-skel-image-grid[data-count="3"] { grid-template-columns:repeat(3,1fr); max-width:420px; }
.atwil-skel-image-grid[data-count="4"] { grid-template-columns:repeat(2,1fr); max-width:360px; }
.atwil-skel-image-grid[data-count="5"],
.atwil-skel-image-grid[data-count="6"] { grid-template-columns:repeat(3,1fr); max-width:420px; }
.atwil-skel-image { width:100%; border-radius:10px; }
.atwil-skel-image[data-ratio="9:16"]  { aspect-ratio:9/16; }
.atwil-skel-image[data-ratio="4:5"]   { aspect-ratio:4/5; }
.atwil-skel-image[data-ratio="3:4"]   { aspect-ratio:3/4; }
.atwil-skel-image[data-ratio="1:1"]   { aspect-ratio:1/1; }
.atwil-skel-image[data-ratio="16:9"]  { aspect-ratio:16/9; }

/* Personality picker skeleton — matches .us-personality-card 72px width */
.atwil-skel-personality-card {
  flex-shrink:0; width:72px; padding:6px 4px; display:flex; flex-direction:column;
  align-items:center; gap:6px;
}
.atwil-skel-personality-avatar { width:48px; height:48px; border-radius:50%; }
.atwil-skel-personality-name   { width:54px; height:9px; border-radius:5px; }

/* Results Grid — adaptive columns by data-count */
.us-results-grid { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); max-width:420px; margin:0 auto; }
.us-results-grid[data-count="1"] { grid-template-columns:1fr; max-width:200px; }
.us-results-grid[data-count="3"] { grid-template-columns:repeat(3,1fr); max-width:420px; }
.us-results-grid[data-count="4"] { grid-template-columns:repeat(2,1fr); max-width:360px; }
.us-results-grid[data-count="5"],
.us-results-grid[data-count="6"] { grid-template-columns:repeat(3,1fr); max-width:420px; }
.us-result-card {
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;
  overflow:hidden; position:relative;
}
.us-result-card img {
  width:100%; display:block; object-fit:contain; max-height:280px;
}
.us-result-download-all {
  grid-column:1/-1; display:flex; justify-content:center; padding:8px 0;
}
.us-result-actions {
  display:flex; justify-content:center; gap:6px; padding:6px 8px;
}
.us-result-dl {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:6px; border:1px solid rgba(99,102,241,.2);
  background:rgba(99,102,241,.04); color:#6366f1; font-size:.68rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.us-result-dl:hover { background:rgba(99,102,241,.12); }
.us-result-dl svg { width:14px; height:14px; }
.us-back-btn {
  display:inline-flex; align-items:center; gap:4px; margin-bottom:10px;
  padding:6px 12px; border-radius:8px; border:1px solid rgba(99,102,241,.2);
  background:rgba(99,102,241,.04); color:#6366f1; font-weight:600; font-size:.78rem;
  cursor:pointer; font-family:inherit; transition:all .2s;
}
.us-back-btn:hover { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.3); }
@media(max-width:600px){
  .us-results-grid { max-width:100%; }
  .us-results-grid[data-count="1"] { max-width:180px; }
  .us-results-grid[data-count="3"],
  .us-results-grid[data-count="5"],
  .us-results-grid[data-count="6"] { grid-template-columns:repeat(2,1fr); }
  .us-result-card img { max-height:180px; }
  #us-stage-results { max-height:60vh; max-height:60dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:4px; }
}

/* Director mode — inline hero video card on the dashboard */
.us-director-hero {
  grid-column:1/-1;
  display:flex; flex-direction:column; gap:14px;
  max-width:300px; margin:0 auto; width:100%;
  animation:usStageIn .25s ease;
}
.us-director-hero-head { text-align:center; }
.us-director-hero-title {
  font-size:1.05rem; font-weight:700; color:#0f172a; letter-spacing:-.01em;
}
.us-director-hero-subtitle {
  font-size:.72rem; font-weight:600; color:#6366f1; letter-spacing:.04em;
  text-transform:uppercase; margin-top:3px;
}
.us-director-hero-player {
  position:relative; width:100%; aspect-ratio:9/16;
  max-height:calc(100vh - 260px);
  max-height:calc(100dvh - 260px); /* iOS Safari — excludes collapsing address bar */
  margin:0 auto;
  background:#0f172a; border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 48px rgba(15,23,42,.18), 0 4px 14px rgba(15,23,42,.08);
}
.us-director-hero-player video {
  width:100%; height:100%; display:block; object-fit:cover;
}
.us-director-hero-actions {
  display:flex; gap:8px; justify-content:center; flex-wrap:nowrap;
}
.us-director-hero-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border-radius:10px; flex:1 1 0; min-width:0;
  font-size:.78rem; font-weight:600; font-family:inherit; cursor:pointer;
  border:1px solid rgba(99,102,241,.2); background:rgba(99,102,241,.04); color:#6366f1;
  transition:all .18s ease; white-space:nowrap;
}
.us-director-hero-btn:hover { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.35); }
.us-director-hero-btn.primary {
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(99,102,241,.3);
}
.us-director-hero-btn.primary:hover {
  filter:brightness(1.05);
  box-shadow:0 6px 18px rgba(99,102,241,.4);
}
.us-director-hero-btn svg { flex-shrink:0; opacity:.95; }
@media(max-width:600px){
  .us-director-hero { max-width:100%; gap:12px; }
  .us-director-hero-player { max-width:260px; align-self:center; width:100%; max-height:calc(100vh - 280px); max-height:calc(100dvh - 280px); }
  /* Hit Apple HIG 44pt touch target on iOS — padding drives the height */
  .us-director-hero-btn { padding:12px 12px; font-size:.78rem; min-height:44px; }
  .us-regen-btn { width:32px; height:32px; }
}

/* Bottom Settings Bar — FASHN-style compact row */
.us-bottom-bar {
  display:flex; padding:5px 10px;
  align-items:center; gap:6px; flex-wrap:wrap;
  /* Pin to the viewport bottom on desktop regardless of content height.
     Width/position match the .bd-content-area (flex:1 after the 60px
     sidebar, with 28px horizontal padding). :has() bumps the left offset
     when the sidebar is expanded to 190px.
     Mobile overrides to position:fixed with bottom:56px further below. */
  position:fixed; bottom:16px;
  left:calc(60px + 28px); right:28px;
  width:auto; max-width:none; margin:0;
  transform:none;
  z-index:30;
  background:rgba(248,250,252,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);
}
/* Shift bar right when the sidebar is expanded */
body:has(.bd-sidebar.expanded) .us-bottom-bar { left:calc(190px + 28px); }

/* Row 2: prompt + credits + run — full-width second line.
   White inset card (Subframe-style), sitting inside the bar so the
   pills row above keeps its neutral-50 background for contrast.
   NOTE: no overflow:hidden on the bar so pill dropdowns can escape. */
.us-bar-row2 {
  /* Borderless: optional prompt + credits + run sit directly under the
     pills row with just a subtle top divider for separation. */
  width:100%; display:flex; align-items:center; gap:8px;
  margin-top:2px;
  padding:4px 2px 0;
  background:transparent;
  border:none;
  border-top:1px solid rgba(0,0,0,.04);
  border-radius:0;
}
.us-bar-prompt-wrap { flex:1; min-width:0; }
.us-bar-prompt-input {
  width:100%; box-sizing:border-box;
  padding:6px 0; border:none; border-radius:0;
  background:transparent;
  font-size:.72rem; font-family:inherit; color:#1e293b;
  outline:none;
}
.us-bar-prompt-input:focus { outline:none!important; border:none!important; box-shadow:none!important; }
.us-bar-prompt-input::placeholder { color:#94a3b8; }
/* Hide prompt in Director mode */
.us-bar-prompt-wrap.us-hidden-director { display:none !important; }

@keyframes usSlideUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Personality chip in bottom bar */
.us-bar-personality {
  display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:8px;
  border:1px solid rgba(0,0,0,.08); background:#fafafa; cursor:pointer; font-size:.72rem;
  font-weight:600; color:#475569; transition:all .2s; font-family:inherit;
}
.us-bar-personality:hover { border-color:rgba(99,102,241,.3); color:#6366f1; background:rgba(99,102,241,.03); }
.us-bar-personality.has-value { border-color:rgba(99,102,241,.2); color:#6366f1; background:rgba(99,102,241,.04); }
.us-bar-personality-avatar {
  width:18px; height:18px; border-radius:50%; object-fit:cover; border:1px solid rgba(0,0,0,.06);
}
.us-bar-personality svg { width:12px; height:12px; opacity:1; color:#6366f1; stroke-width:2.25; }

/* Dropdown-style setting buttons */
.us-bar-dropdown {
  display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px;
  border:1px solid rgba(0,0,0,.08); background:#fafafa; cursor:pointer; font-size:.72rem;
  font-weight:500; color:#475569; transition:all .2s; font-family:inherit; position:relative;
  white-space:nowrap;
}
.us-bar-dropdown:hover { border-color:rgba(99,102,241,.25); color:#4f46e5; background:rgba(99,102,241,.03); }
.us-bar-dropdown.is-touched { font-weight:600; color:#1e293b; border-color:rgba(99,102,241,.25); background:rgba(99,102,241,.05); }
.us-bar-dropdown-icon { width:13px; height:13px; color:#6366f1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.us-bar-dropdown-icon svg { width:13px; height:13px; stroke-width:2.25; opacity:1; }
.us-bar-dropdown-chevron { width:10px; height:10px; opacity:.55; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.us-bar-dropdown-chevron svg { width:10px; height:10px; }
.us-mobile-setting-pill svg { width:13px; height:13px; opacity:1; color:#6366f1; stroke-width:2.25; vertical-align:-2px; margin-right:4px; }

/* Dropdown popup */
.us-dropdown-popup {
  position:absolute; bottom:calc(100% + 8px); left:0; min-width:140px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.04); padding:6px; z-index:100;
  display:none; animation:usPopUp .22s cubic-bezier(.2,.8,.2,1);
}
.us-dropdown-popup.active { display:block; }
/* Blur-focus entrance: popup starts slightly blurred + offset, resolves
   crisply as it settles. Applied to all desktop/mobile popups. */
@keyframes usPopUp {
  from { opacity:0; transform:translateY(6px) scale(.98); filter:blur(8px); }
  60%  { opacity:1; filter:blur(1.5px); }
  to   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.us-dropdown-option {
  padding:8px 12px; border-radius:8px; font-size:.78rem; font-weight:500; color:#475569;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.us-dropdown-option:hover { background:rgba(99,102,241,.06); color:#1e293b; }
.us-dropdown-option.active { background:rgba(99,102,241,.08); color:#6366f1; font-weight:600; }

/* Spacer — no longer needed on desktop (row2 handles layout), kept for structure */
.us-bar-spacer { display:none; }

/* Cost badge + breakdown tooltip */
.us-bar-cost-wrap { position:relative; }
.us-bar-cost {
  font-size:.68rem; font-weight:600; color:#475569; padding:5px 10px;
  background:linear-gradient(135deg, rgba(99,102,241,.05), rgba(124,58,237,.04));
  border:1px solid rgba(99,102,241,.1); border-radius:8px; white-space:nowrap;
  line-height:1.3; cursor:pointer;
}
.us-cost-breakdown {
  display:none; position:absolute; bottom:calc(100% + 10px); right:0;
  width:280px; padding:14px 16px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.04);
  font-size:.72rem; font-weight:400; color:#475569; line-height:1.6;
  z-index:200; animation:usPopUp .22s cubic-bezier(.2,.8,.2,1);
}
.us-bar-cost-wrap:hover .us-cost-breakdown { display:block; }

/* Mobile credits breakdown — tap to toggle */
.us-mobile-credits-wrap { position:relative; flex-shrink:0; }
.us-cost-breakdown--mobile {
  bottom:calc(100% + 10px); right:0; left:auto;
  width:260px;
}
.us-mobile-credits { cursor:pointer; }

/* Run button — inline in bottom bar */
.us-run-btn {
  display:flex; align-items:center; gap:5px; font-family:'Space Grotesk',sans-serif;
  font-size:.78rem; font-weight:700; padding:7px 20px; border-radius:10px; border:none;
  cursor:pointer; background:linear-gradient(135deg,#6366f1 0%,#7c3aed 50%,#6366f1 100%);
  background-size:200% 200%; color:#fff;
  box-shadow:0 4px 14px rgba(99,102,241,.3); transition:all .25s; letter-spacing:-.01em;
}
.us-run-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(99,102,241,.4); background-position:100% 0; }
.us-run-btn:active { transform:translateY(0); box-shadow:0 2px 8px rgba(99,102,241,.25); }
.us-run-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.us-run-btn svg { width:12px; height:12px; }

/* Mobile-only elements hidden on desktop */
.us-mobile-settings, .us-mobile-prompt-wrap, .us-mobile-run-wrap { display:none; }
.us-mobile-credits { display:none; }

/* Personality picker panel (slides up from bottom bar) */
.us-personality-panel {
  display:none; position:absolute; bottom:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.12); padding:16px; z-index:100;
  animation:usPopUp .24s cubic-bezier(.2,.8,.2,1);
}
.us-personality-panel.active { display:block; }
.us-personality-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.us-personality-title {
  font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:700; color:var(--fg);
}
.us-browse-btn {
  font-size:.72rem; font-weight:600; color:#6366f1; background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.15); border-radius:8px; padding:5px 12px;
  cursor:pointer; transition:all .2s;
}
.us-browse-btn:hover { background:rgba(99,102,241,.12); }
.us-personality-grid {
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.08) transparent;
}
.us-personality-card {
  flex-shrink:0; width:72px; text-align:center; cursor:pointer; border-radius:10px;
  padding:6px 4px; border:2px solid transparent; transition:all .2s;
}
.us-personality-card:hover { background:rgba(99,102,241,.04); }
.us-personality-card.active { border-color:#6366f1; background:rgba(99,102,241,.05); }
.us-personality-avatar {
  width:46px; height:46px; border-radius:50%; object-fit:cover; margin:0 auto 4px;
  border:2px solid rgba(0,0,0,.06);
}
.us-personality-card.active .us-personality-avatar { border-color:#6366f1; }
.us-personality-name { font-size:.62rem; font-weight:600; color:var(--fg); line-height:1.2; }
.us-personality-rate { font-size:.55rem; font-weight:600; color:#6366f1; opacity:.7; margin-top:1px; }

/* Hide old generate row + settings bar + personality row (replaced by bottom bar) */
.us-generate-row, .us-settings-bar, .us-personality-row { display:none !important; }

/* Responsive — upload-zone / garment-thumb rules live in the broader
   mobile block further down (@media max-width:768px). Keeping only the
   things that aren't defined there. */
@media(max-width:600px){
  .us-garment-preview.active { padding:24px 16px; }
  .us-bottom-bar { flex-wrap:wrap; padding:10px 12px; }
  .us-bar-spacer { display:none; }
}

.bd-studio-home-header { margin-bottom:36px; display:flex; align-items:center; gap:14px; }
.bd-studio-home-header::before {
  content:''; display:block; width:4px; height:42px; border-radius:4px; flex-shrink:0;
  background:linear-gradient(180deg, #6366f1, #0891b2);
}
.bd-studio-home-title {
  font-family:'Syne',sans-serif; font-size:1.7rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:2px;
  background:linear-gradient(135deg, #1e293b 0%, #6366f1 60%, #0891b2 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.bd-studio-home-sub { font-size:.82rem; color:#94a3b8; letter-spacing:.02em; }
.bd-studio-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:600px){ .bd-studio-cards-grid { grid-template-columns:1fr; } }
.bd-studio-card {
  position:relative; overflow:hidden;
  border-radius:22px; padding:26px; cursor:pointer;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  display:flex; flex-direction:column; gap:14px;
  border:1px solid rgba(0,0,0,.07);
  background:#ffffff;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.bd-studio-card::before {
  content:''; position:absolute; inset:0; opacity:0;
  transition:opacity .3s; pointer-events:none;
  border-radius:22px;
}
.bd-studio-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.1); border-color:transparent; }
.bd-studio-card:hover::before { opacity:1; }

/* Card 1 — Starter — indigo/violet */
.bd-studio-card:nth-child(1) {
  background:linear-gradient(145deg, rgba(99,102,241,.15) 0%, rgba(139,92,246,.08) 40%, #ffffff 100%);
  border-color:rgba(99,102,241,.12);
}
.bd-studio-card:nth-child(1)::before {
  background:linear-gradient(145deg, rgba(99,102,241,.22), rgba(139,92,246,.1) 50%, rgba(255,255,255,.95));
}
/* Card 2 — Studio Shoot — teal/cyan */
.bd-studio-card:nth-child(2) {
  background:linear-gradient(145deg, rgba(8,145,178,.14) 0%, rgba(6,182,212,.07) 40%, #ffffff 100%);
  border-color:rgba(8,145,178,.12);
}
.bd-studio-card:nth-child(2)::before {
  background:linear-gradient(145deg, rgba(8,145,178,.2), rgba(6,182,212,.1) 50%, rgba(255,255,255,.95));
}
/* Card 3 — Cinematic — deep indigo/purple */
.bd-studio-card:nth-child(3) {
  background:linear-gradient(145deg, rgba(79,70,229,.16) 0%, rgba(124,58,237,.08) 40%, #ffffff 100%);
  border-color:rgba(79,70,229,.12);
}
.bd-studio-card:nth-child(3)::before {
  background:linear-gradient(145deg, rgba(79,70,229,.24), rgba(124,58,237,.12) 50%, rgba(255,255,255,.95));
}
/* Card 4 — Animate — teal/emerald */
.bd-studio-card:nth-child(4) {
  background:linear-gradient(145deg, rgba(8,145,178,.14) 0%, rgba(20,184,166,.07) 40%, #ffffff 100%);
  border-color:rgba(8,145,178,.12);
}
.bd-studio-card:nth-child(4)::before {
  background:linear-gradient(145deg, rgba(8,145,178,.2), rgba(20,184,166,.1) 50%, rgba(255,255,255,.95));
}

.bd-sc-icon {
  width:54px; height:54px; border-radius:16px;
  background:rgba(99,102,241,.15); color:#6366f1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position:relative; z-index:1;
  box-shadow:0 4px 20px rgba(99,102,241,.2);
}
.bd-sc-name { font-size:1.1rem; font-weight:800; color:#1e293b; letter-spacing:-0.02em; position:relative; z-index:1; }
.bd-sc-desc { font-size:.82rem; color:#475569; line-height:1.65; position:relative; z-index:1; }
.bd-sc-tags { display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
.bd-sc-tags span {
  font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.09);
  color:#475569;
}
.bd-sc-cta {
  font-size:.82rem; font-weight:700; color:#6366f1;
  margin-top:auto; position:relative; z-index:1;
  display:flex; align-items:center; gap:4px; transition:gap .2s;
}
.bd-studio-card:hover .bd-sc-cta { gap:8px; }
/* Back button */
.bd-back-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:600; color:rgba(15,23,42,.65);
  background:none; border:none; cursor:pointer; padding:0; margin-bottom:20px;
  font-family:'Space Grotesk',sans-serif; transition:color .2s;
}
.bd-back-btn:hover { color:#6366f1; }
/* ── Studio horizontal tabs ── */
.bd-studio-tabs {
  display:flex; gap:6px; margin-bottom:22px;
  background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.07);
  border-radius:14px; padding:5px;
}
.bd-studio-tab {
  display:flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:10px; border:none;
  background:none; color:rgba(15,23,42,.65);
  font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap; flex:1; justify-content:center;
}
.bd-studio-tab:hover { color:rgba(15,23,42,.75); background:rgba(0,0,0,.04); }
.bd-studio-tab.active {
  background:rgba(99,102,241,.15); color:#67e8f9;
  border:1px solid rgba(99,102,241,.25);
}
@media(max-width:768px){
  .bd-studio-tabs { gap:4px; padding:4px; overflow-x:auto; scrollbar-width:none; }
  .bd-studio-tabs::-webkit-scrollbar { display:none; }
  .bd-studio-tab { padding:8px 12px; font-size:.75rem; flex:0 0 auto; }
}
/* ── Studio Shoot & Cinematic ── */
.ss-type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.ss-type-btn {
  padding:10px 8px; border-radius:12px; border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.03); color:rgba(15,23,42,.75);
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:all .2s; text-align:center; line-height:1.4;
}
.ss-type-btn:hover { border-color:rgba(99,102,241,.3); color:rgba(15,23,42,.8); }
.ss-type-btn.active { border-color:var(--violet); background:rgba(99,102,241,.12); color:#67e8f9; }
.ss-type-icon { display:block; font-size:1.3rem; margin-bottom:4px; }
.ss-results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
@media(max-width:900px){ .ss-results-grid { grid-template-columns:repeat(2,1fr); } }
.ss-result-slot {
  aspect-ratio:3/4; border-radius:12px; overflow:hidden; position:relative;
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.07);
  display:flex; align-items:center; justify-content:center;
}
.ss-result-slot img { width:100%; height:100%; object-fit:cover; }
.ss-slot-label {
  position:absolute; bottom:0; left:0; right:0; padding:6px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
  font-size:.65rem; font-weight:600; color:rgba(15,23,42,.7);
  letter-spacing:.04em; text-transform:uppercase;
}
.ss-slot-loading {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(15,23,42,.55); font-size:.72rem;
}
.ss-slot-spinner {
  width:24px; height:24px; border:2px solid rgba(99,102,241,.2);
  border-top-color:var(--violet); border-radius:50%;
  animation:spin .8s linear infinite;
}
.ss-download-all-btn {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:11px 18px; border-radius:12px; border:1px solid rgba(99,102,241,.3);
  background:rgba(99,102,241,.08); color:#6366f1;
  font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all .2s; margin-top:14px; justify-content:center;
}
.ss-download-all-btn:hover { background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.5); }
/* Cinematic */
.cin-style-btn {
  padding:12px 10px; border:1px solid rgba(0,0,0,.08); border-radius:10px;
  background:#fff; color:rgba(15,23,42,.7); font-family:'Space Grotesk',sans-serif;
  font-size:.8rem; font-weight:600; cursor:pointer; transition:.2s; display:flex;
  align-items:center; gap:6px; justify-content:center;
}
.cin-style-btn:hover { border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.04); }
.cin-style-btn.active { background:rgba(99,102,241,.1); border-color:#6366f1; color:#6366f1; font-weight:700; }

/* Full Stack (legacy) */
.fs-garment-list { display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.fs-garment-slot {
  border:1px solid rgba(0,0,0,.08); border-radius:14px;
  padding:14px; background:rgba(255,255,255,.02); position:relative;
}
.fs-slot-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fs-slot-num { font-size:.72rem; font-weight:700; color:var(--violet-lt); letter-spacing:.06em; text-transform:uppercase; }
.fs-slot-remove { background:none; border:none; color:rgba(15,23,42,.75); cursor:pointer; font-size:1rem; line-height:1; padding:2px 6px; border-radius:6px; transition:.2s; }
.fs-slot-remove:hover { color:var(--red); background:rgba(248,113,113,.08); }
.fs-slot-thumb { width:60px; height:60px; border-radius:8px; object-fit:cover; background:rgba(0,0,0,.04); flex-shrink:0; }
.fs-slot-row { display:flex; align-items:center; gap:12px; }
.fs-slot-info { flex:1; }
.fs-slot-name { font-size:.8rem; font-weight:600; color:rgba(15,23,42,.7); margin-bottom:6px; }
.fs-add-btn {
  width:100%; padding:10px; border-radius:12px; border:1px dashed rgba(255,255,255,.12);
  background:none; color:rgba(15,23,42,.55); font-family:'Space Grotesk',sans-serif;
  font-size:.82rem; cursor:pointer; transition:.2s; margin-top:8px;
}
.fs-add-btn:hover { border-color:rgba(99,102,241,.3); color:#6366f1; }
.fs-results-wrap { margin-top:20px; }
.fs-garment-result { margin-bottom:24px; }
.fs-garment-result-title { font-size:.8rem; font-weight:700; color:rgba(15,23,42,.75); letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }

/* ── Nav user state ── */
.nav-user-wrap{display:flex;align-items:center;gap:8px;cursor:pointer;}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;flex-shrink:0;color:#fff;}


/* ── Mobile nav ── */
@media(max-width:640px){
  .nav-chip-name{display:none!important;}
  .nav-user-chip{padding:5px 8px!important;gap:5px!important;}
  .nav-btn-primary{padding:8px 14px!important;font-size:.8rem!important;white-space:nowrap;}
  #nav{padding:10px 1rem!important;}
}

/* ── HIW tabs mobile: scrollable strip ── */
@media(max-width:680px){
  .hiw-tabs-wrap{
    width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; justify-content:flex-start;
    border-radius:14px;
  }
  .hiw-tabs-wrap::-webkit-scrollbar{display:none;}
  .hiw-tab-btn{padding:9px 16px;font-size:12px;flex-shrink:0;gap:6px;}
  .hiw-tab-btn svg{width:13px;height:13px;}
}

/* ── Compact model picker cards ── */
.model-picker{grid-template-columns:1fr 1fr;}
.mpick-card{flex-direction:column;align-items:flex-start;padding:10px 10px 12px;}
.mpick-photo{width:100%;height:88px;border-radius:8px;margin-bottom:8px;object-fit:cover;flex-shrink:0;background:#1a1230;}
.mpick-info{width:100%;}
.mpick-name{font-size:.83rem;font-weight:700;line-height:1.2;}
.mpick-city{font-size:.72rem;color:rgba(15,23,42,.6);margin-top:2px;}
.mpick-rate{font-size:.76rem;color:var(--violet-lt);margin-top:5px;font-weight:700;}
.mpick-rate span{color:rgba(15,23,42,.55);font-weight:400;}

/* ── Model pricing panel ── */
.md-rate-panel{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);border-radius:16px;padding:22px 24px;margin-bottom:24px;}
.md-rate-panel h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 6px;color:#1e293b;}
.md-rate-panel p{color:rgba(15,23,42,.6);font-size:.83rem;margin:0 0 16px;line-height:1.5;}
.md-rate-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.md-rate-currency{font-size:1.4rem;font-weight:700;color:var(--violet-lt);}
.md-rate-input{width:80px;padding:11px 12px;background:rgba(0,0,0,.04);border:1px solid rgba(99,102,241,.3);border-radius:10px;color:#1e293b;font-family:inherit;font-size:1.1rem;font-weight:700;outline:none;text-align:center;}
.md-rate-input:focus{border-color:var(--violet);background:rgba(99,102,241,.1);}
.md-rate-label{font-size:.82rem;color:rgba(0,0,0,.45);}
.md-rate-save{padding:11px 22px;background:linear-gradient(135deg,var(--violet),var(--pink));border:none;border-radius:10px;color:#fff;font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:.2s;}
.md-rate-save:hover{filter:brightness(1.1);}
.md-rate-preview{margin-top:12px;font-size:.78rem;color:rgba(0,0,0,.4);line-height:1.7;}

/* ── Mobile marketplace: cap at 4 model cards ── */
@media(max-width:540px){
  .models-bento .mc-card:nth-child(n+4){display:none;}
}

/* ══════════════════════════════════════════════
   v10 DESIGN POLISH
   ══════════════════════════════════════════════ */

/* ── Panel sub-label ── */
.panel-sub{font-size:.78rem;color:rgba(15,23,42,.55);margin:-2px 0 14px;line-height:1.55;}

/* ── Step headers (replaces ①②③) ── */
.step-header{display:flex;align-items:center;gap:10px;margin:0 0 18px;}
.step-num{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Space Grotesk',sans-serif;letter-spacing:0;}
.step-label{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;color:rgba(15,23,42,.9);}

/* ── Upload zone polish ── */
.upload-zone{border:1.5px dashed rgba(99,102,241,.3)!important;background:rgba(99,102,241,.02);}
.upload-zone:hover{border-color:var(--violet)!important;background:rgba(99,102,241,.05)!important;}
.upload-icon-wrap{width:54px;height:54px;border-radius:14px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:.2s;}
.upload-zone:hover .upload-icon-wrap{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.4);}
.upload-browse{color:var(--violet);font-size:.8rem;margin-top:4px;margin-bottom:2px;cursor:pointer;}

/* ── Model picker — taller photo + lift hover + ring on selected ── */
.mpick-photo{height:112px!important;}
.mpick-card{border-radius:12px!important;transition:transform .18s ease,border-color .18s,box-shadow .18s!important;}
.mpick-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25)!important;}
.mpick-card.selected{border-color:var(--violet)!important;background:rgba(99,102,241,.1)!important;box-shadow:0 0 0 2px rgba(99,102,241,.35),0 8px 24px rgba(99,102,241,.15)!important;}

/* ── Control sections ── */
.ctrl-section{margin-bottom:0;padding:13px 0;border-bottom:1px solid rgba(0,0,0,.06);}
.ctrl-section:first-of-type{padding-top:0;}
.ctrl-section:last-of-type{border-bottom:none;padding-bottom:4px;}
.ctrl-label{font-size:.67rem;color:rgba(15,23,42,.55);text-transform:uppercase;letter-spacing:.11em;margin-bottom:9px;font-weight:700;}
.ctrl-btn-row{display:flex;gap:7px;flex-wrap:wrap;}

/* ── Accessorize toggle + chips ── */
.acc-toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1.5px solid rgba(0,0,0,.08);background:#fff;cursor:pointer;font-size:.8rem;font-weight:600;color:#475569;transition:border-color .2s,background .2s;}
.acc-toggle:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.04);}
.acc-toggle.active{border-color:var(--violet);background:rgba(99,102,241,.08);color:var(--violet);}
.acc-toggle svg{flex-shrink:0;}
.acc-chips-wrap{display:none;margin-top:10px;}
.acc-chips-wrap.open{display:block;}
.acc-chips{display:flex;gap:6px;flex-wrap:wrap;}
.acc-chip{padding:6px 12px;border-radius:20px;border:1.5px solid rgba(0,0,0,.1);background:#fff;font-size:.75rem;font-weight:600;color:#475569;cursor:pointer;transition:all .2s;user-select:none;}
.acc-chip:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.06);}
.acc-chip.selected{border-color:var(--violet);background:rgba(99,102,241,.12);color:var(--violet);}

/* ── Control pill buttons — refined ── */
.pose-btn{padding:8px 14px!important;border-radius:9px!important;font-size:.79rem!important;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s!important;}
.pose-btn:hover:not(.selected){transform:translateY(-1px);background:rgba(99,102,241,.12)!important;border-color:rgba(99,102,241,.3)!important;}
.pose-btn.selected{background:rgba(99,102,241,.18)!important;border-color:#6366f1!important;color:#4f46e5!important;font-weight:600!important;box-shadow:0 2px 10px rgba(99,102,241,.15)!important;}

/* ── Generate button — stronger presence ── */
.gen-btn{border-radius:13px!important;font-size:1.01rem!important;letter-spacing:.03em!important;box-shadow:0 4px 22px rgba(99,102,241,.3);margin-top:20px!important;}
.gen-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)!important;box-shadow:0 8px 32px rgba(180,80,200,.4)!important;}
.gen-btn:disabled{box-shadow:none!important;}

/* ── Dash panels — slightly rounder + hover border ── */
.dash-panel{border-radius:18px!important;transition:border-color .25s;}
.dash-panel:hover{border-color:rgba(99,102,241,.2)!important;}

/* ── Cost estimate box ── */
#bd-cost-estimate{padding:14px 18px!important;line-height:1.9!important;border-radius:12px!important;}

/* ── Generated images empty state ── */
.bd-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;gap:16px;text-align:center;}
.bd-empty-icon{width:52px;height:52px;border-radius:14px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;color:rgba(15,23,42,.2);}
.bd-empty-state p{font-size:.86rem;color:rgba(15,23,42,.22);line-height:1.65;max-width:200px;margin:0;}

/* ══════════════════════════════════════════════
   INFO PAGES (About, Guidelines, Consent, etc.)
   ══════════════════════════════════════════════ */
.info-page{display:none;min-height:100vh;padding:0 24px 80px;max-width:820px;margin:0 auto;}
@media(max-width:600px){.info-page{padding:0 24px 80px 44px;}}
.info-page.active{display:block;}
.info-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  color:#475569;
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;font-weight:600;
  cursor:pointer;
  margin-top:80px;
  margin-bottom:32px;
  transition:.2s;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.info-back:hover{color:#6366f1;border-color:rgba(99,102,241,.4);box-shadow:0 4px 20px rgba(99,102,241,.15);}
.info-hero{margin-bottom:48px;}
.info-kicker{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-lt);margin-bottom:14px;}
.info-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:18px;color:#0f172a;}
.info-lead{font-size:1.05rem;color:rgba(15,23,42,.75);line-height:1.75;max-width:640px;}
.info-section{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid rgba(0,0,0,.07);}
.info-section:last-child{border-bottom:none;}
.info-section h2{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:700;margin:0 0 14px;color:#1e293b;}
.info-section h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;margin:20px 0 8px;color:rgba(15,23,42,.8);}
.info-section p{font-size:.93rem;color:rgba(15,23,42,.7);line-height:1.8;margin:0 0 12px;}
.info-section ul,.info-section ol{padding-left:20px;margin:0 0 14px;}
.info-section li{font-size:.93rem;color:rgba(15,23,42,.7);line-height:1.8;margin-bottom:6px;}
.info-highlight{background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.18);border-radius:12px;padding:18px 20px;margin:20px 0;}
.info-highlight p{color:#475569;margin:0;}
.info-badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.info-badge{padding:6px 14px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);border-radius:50px;font-size:.78rem;color:var(--cyan);font-weight:600;}
.info-table{width:100%;border-collapse:collapse;margin-top:12px;}
.info-table th{text-align:left;padding:10px 14px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,23,42,.6);border-bottom:1px solid rgba(0,0,0,.08);}
.info-table td{padding:12px 14px;font-size:.88rem;color:rgba(15,23,42,.75);border-bottom:1px solid rgba(0,0,0,.05);}
.info-table tr:last-child td{border-bottom:none;}
.info-contact-box{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:24px;margin-top:24px;text-align:center;}
.info-contact-box p{color:rgba(15,23,42,.65);font-size:.88rem;margin:0 0 14px;}
.info-contact-box a{color:var(--violet-lt);text-decoration:none;font-weight:600;}
.info-contact-box a:hover{text-decoration:underline;}

/* ── Spacing reduction (landing sections only — dashboards + hero + browse exempt) ── */
section:not(#brand-dash):not(#model-dash):not(#bd-home):not(#hero):not(#browse-page):not(#creator-profile){padding:4.5rem 0!important;}
@media(max-width:768px){section:not(#brand-dash):not(#model-dash):not(#bd-home):not(#hero):not(#browse-page):not(#creator-profile){padding:3rem 0!important;}}
#for-brands,#for-models{padding:4rem 0!important;}
/* Restore dashboard padding clobbered by the section override above */
#brand-dash,#model-dash{padding:110px 24px 80px!important;}
/* Hero mobile — eyebrow clears fixed nav */
@media(max-width:768px){#hero{padding-top:4.5rem!important;}}
@media(max-width:600px){#hero{padding-top:4rem!important;}}
/* Browse page mobile — title clears fixed nav */
@media(max-width:768px){#browse-page{padding-top:150px!important;}}
@media(max-width:600px){#browse-page{padding-top:160px!important;}}

/* ── Compact dashboard model picker ── */
.mpick-photo{height:72px!important;}
.model-picker{max-height:240px!important;}
.mpick-card{padding:8px 10px 10px!important;}
.mpick-name{font-size:.8rem!important;}
.mpick-rate{font-size:.74rem!important;margin-top:3px!important;}

/* ── Earnings Calculator overlay ── */
#calc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;}
#calc-overlay.open{display:flex;}
.calc-modal{background:#ffffff;border:1px solid rgba(99,102,241,.12);border-radius:24px;width:min(520px,96vw);padding:36px 36px 32px;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.12);max-height:92vh;overflow-y:auto;}
.calc-close{position:absolute;top:16px;right:18px;background:none;border:none;color:rgba(0,0,0,.4);font-size:1.2rem;cursor:pointer;line-height:1;padding:6px 10px;border-radius:8px;transition:.15s;}
.calc-close:hover{color:#1e293b;background:rgba(0,0,0,.06);}
.calc-kicker{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-lt);margin-bottom:8px;}
.calc-title{font-size:1.6rem;font-weight:800;color:#1e293b;margin-bottom:4px;line-height:1.2;}
.calc-sub{font-size:.84rem;color:rgba(0,0,0,.45);margin-bottom:28px;line-height:1.6;}
/* slider rows */
.calc-slider-row{margin-bottom:22px;}
.calc-slider-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.calc-slider-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(0,0,0,.4);}
.calc-slider-val{font-size:1.15rem;font-weight:800;color:#1e293b;}
.calc-slider-bounds{display:flex;justify-content:space-between;font-size:.65rem;color:rgba(0,0,0,.3);margin-top:4px;}
.calc-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:rgba(0,0,0,.1);outline:none;cursor:pointer;}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));cursor:pointer;box-shadow:0 2px 10px rgba(99,102,241,.5);}
.calc-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));cursor:pointer;border:none;}
/* stats grid */
.calc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 20px;}
.calc-stat{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.12);border-radius:14px;padding:18px 20px;}
.calc-stat-val{font-size:1.65rem;font-weight:800;color:#1e293b;line-height:1;margin-bottom:6px;}
.calc-stat-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(0,0,0,.4);}
/* cut bar */
.calc-cut-row{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(0,0,0,.4);margin-bottom:6px;}
.calc-cut-bar{height:5px;border-radius:4px;background:rgba(0,0,0,.08);overflow:hidden;margin-bottom:24px;}
.calc-cut-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--cyan));width:70%;transition:width .4s;}
.calc-cta{width:100%;padding:14px;background:linear-gradient(135deg,var(--violet),var(--pink));border:none;border-radius:13px;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;letter-spacing:.02em;box-shadow:0 4px 22px rgba(99,102,241,.3);transition:.2s;}
.calc-cta:hover{filter:brightness(1.1);transform:translateY(-2px);}

/* ════════════════════════════════════════
   BRAND ONBOARDING QUIZ
   ════════════════════════════════════════ */
/* ═══ Credit Shop Overlay ═══ */
#credit-shop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:1300;display:none;align-items:center;justify-content:center;padding:20px;}
#credit-shop-overlay.open{display:flex;}
.credit-shop-modal{background:#fff;border-radius:20px;width:min(520px,94vw);padding:32px;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.12);}
.credit-shop-modal h2{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;margin:0 0 4px;}
.credit-shop-modal .cs-sub{color:rgba(0,0,0,.55);font-size:.85rem;margin:0 0 20px;}
.cs-packs{display:flex;flex-direction:column;gap:10px;}
.cs-pack{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-radius:14px;border:1.5px solid rgba(99,102,241,.15);background:rgba(99,102,241,.04);cursor:pointer;transition:.2s;}
.cs-pack:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.08);}
.cs-pack-name{font-weight:700;font-size:1rem;}
.cs-pack-detail{color:rgba(0,0,0,.55);font-size:.82rem;margin-top:2px;}
.cs-pack-price{font-weight:800;font-size:1.1rem;color:#6366f1;white-space:nowrap;}
.cs-pack-best{position:absolute;top:-8px;right:12px;background:#6366f1;color:#fff;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;}
.cs-divider{border:none;border-top:1px solid rgba(0,0,0,.06);margin:16px 0;}
.cs-topup-row{display:flex;gap:8px;align-items:center;}
.cs-topup-row input{flex:1;padding:10px 14px;border:1.5px solid rgba(0,0,0,.1);border-radius:10px;font-size:.95rem;font-family:inherit;}
.cs-topup-row button{padding:10px 18px;border:none;border-radius:10px;background:#6366f1;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap;}
.cs-topup-row button:hover{background:#4f46e5;}
.cs-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:rgba(0,0,0,.4);line-height:1;}
.cs-balance-bar{display:flex;gap:16px;padding:12px 16px;border-radius:12px;background:rgba(99,102,241,.06);margin-bottom:16px;font-size:.9rem;}
.cs-balance-bar strong{color:#6366f1;}

#bob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;}
#bob-overlay.open{display:flex;}
.bob-pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(max-width:500px){.bob-pick-grid{grid-template-columns:1fr;}}
.bob-pick-card{
  padding:16px;border-radius:14px;border:1.5px solid rgba(0,0,0,.08);
  background:#fff;cursor:pointer;transition:.2s;text-align:center;
}
.bob-pick-card:hover{border-color:rgba(99,102,241,.25);transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.08);}
.bob-pick-card.selected{border-color:#6366f1;background:rgba(99,102,241,.06);box-shadow:0 0 0 2px rgba(99,102,241,.2);}
.bob-pick-icon{color:#6366f1;margin-bottom:8px;}
.bob-pick-name{font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:700;color:#1e293b;margin-bottom:3px;}
.bob-pick-desc{font-size:.7rem;color:#64748b;line-height:1.4;}

/* Nature cards with color swatch */
.bob-nature-grid{grid-template-columns:1fr !important;}
.bob-nature-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;border:1.5px solid rgba(0,0,0,.08);
  background:#fff;cursor:pointer;transition:.2s;
}
.bob-nature-card:hover{border-color:rgba(99,102,241,.25);box-shadow:0 4px 16px rgba(99,102,241,.08);}
.bob-nature-card.selected{border-color:#6366f1;background:rgba(99,102,241,.06);box-shadow:0 0 0 2px rgba(99,102,241,.2);}
.bob-nature-swatch{width:44px;height:44px;border-radius:10px;flex-shrink:0;}

/* Chip selectors */
.bob-chip-grid{display:flex;flex-wrap:wrap;gap:8px;}
.bob-chip{
  padding:8px 16px;border-radius:20px;border:1.5px solid rgba(0,0,0,.1);
  background:#fff;cursor:pointer;font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;font-weight:600;color:#475569;transition:.2s;
}
.bob-chip:hover{border-color:rgba(99,102,241,.3);color:#6366f1;}
.bob-chip.selected{border-color:#6366f1;background:rgba(99,102,241,.08);color:#6366f1;}

/* ════════════════════════════════════════
   MODEL ONBOARDING WIZARD
   ════════════════════════════════════════ */
#ob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;}
#ob-overlay.open{display:flex;}
.ob-modal{background:#ffffff;border:1px solid rgba(99,102,241,.12);border-radius:24px;width:min(500px,100%);max-height:90vh;overflow-y:auto;padding:36px 38px 30px;position:relative;box-shadow:0 48px 120px rgba(0,0,0,.12);}
.ob-modal::-webkit-scrollbar{width:4px;}
.ob-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}
.ob-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.ob-brand{font-size:.88rem;font-weight:800;background:linear-gradient(135deg,var(--violet),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.01em;}
.ob-step-counter{font-size:.73rem;color:rgba(15,23,42,.55);font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
.ob-progress{display:flex;align-items:center;gap:0;margin-bottom:32px;}
.ob-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);transition:.25s;flex-shrink:0;}
.ob-dot.active{background:var(--violet);box-shadow:0 0 10px rgba(99,102,241,.5);}
.ob-dot.done{background:var(--cyan);}
.ob-line{flex:1;height:2px;background:rgba(0,0,0,.1);margin:0 6px;}
.ob-err{background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.2);border-radius:10px;padding:10px 14px;font-size:.82rem;color:rgba(255,130,130,.9);margin-bottom:16px;}
.ob-title{font-size:1.5rem;font-weight:800;color:#1e293b;margin:0 0 8px;line-height:1.2;}
.ob-sub{font-size:.88rem;color:rgba(0,0,0,.45);line-height:1.7;margin:0 0 24px;}
.ob-field{margin-bottom:18px;}
.ob-label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(0,0,0,.4);margin-bottom:8px;}
.ob-label-hint{font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:rgba(0,0,0,.3);}
.ob-input{width:100%;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.12);border-radius:11px;padding:12px 14px;color:#1e293b;font-size:.92rem;font-family:inherit;outline:none;transition:.2s;box-sizing:border-box;}
.ob-input:focus{border-color:var(--violet);background:rgba(99,102,241,.05);}
.ob-textarea{width:100%;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.12);border-radius:11px;padding:12px 14px;color:#1e293b;font-size:.92rem;font-family:inherit;outline:none;transition:.2s;resize:none;box-sizing:border-box;}
.ob-textarea:focus{border-color:var(--violet);background:rgba(99,102,241,.05);}
.ob-char-hint{font-size:.7rem;color:rgba(0,0,0,.3);text-align:right;margin-top:5px;}
.ob-tag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;}
.ob-tag-pill{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1);border-radius:11px;cursor:pointer;transition:.2s;user-select:none;}
.ob-tag-pill:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.05);}
.ob-tag-pill input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(0,0,0,.2);background:transparent;cursor:pointer;flex-shrink:0;transition:.18s;position:relative;}
.ob-tag-pill input:checked{background:var(--violet);border-color:var(--violet);}
.ob-tag-pill input:checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem;font-weight:800;}
.ob-tag-pill:has(input:checked){border-color:var(--violet);background:rgba(99,102,241,.08);}
.ob-tag-pill span{font-size:.88rem;color:rgba(0,0,0,.65);font-weight:500;}
.ob-photo-row{display:flex;gap:20px;align-items:flex-start;margin-bottom:20px;}
.ob-photo-circle{width:100px;height:100px;border-radius:50%;background:rgba(0,0,0,.04);border:2px dashed rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transition:.3s;}
.ob-photo-circle.has-photo{border-style:solid;border-color:var(--violet);background-size:cover;background-position:center;}
.ob-photo-circle.has-photo svg{display:none;}
.ob-photo-upload-col{flex:1;}
.ob-photo-btn{display:inline-block;padding:10px 20px;background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.3);border-radius:10px;color:var(--violet-lt);font-size:.84rem;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit;}
.ob-photo-btn:hover{background:rgba(99,102,241,.25);border-color:var(--violet);}
.ob-photo-label{font-size:.75rem;color:rgba(15,23,42,.55);margin:8px 0 12px;}
.ob-photo-tips{display:flex;flex-direction:column;gap:5px;}
.ob-tip{font-size:.78rem;color:rgba(15,23,42,.65);line-height:1.4;}
.ob-rate-hero{display:flex;align-items:baseline;gap:4px;margin:4px 0 16px;}
.ob-rate-curr{font-size:2rem;font-weight:800;color:rgba(15,23,42,.65);}
.ob-rate-num{font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,var(--violet),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.ob-rate-per{font-size:1rem;color:rgba(15,23,42,.55);margin-left:4px;}
.ob-rate-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:4px;background:rgba(255,255,255,.1);outline:none;cursor:pointer;margin-bottom:6px;}
.ob-rate-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));cursor:pointer;box-shadow:0 2px 10px rgba(99,102,241,.4);}
.ob-rate-range{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(15,23,42,.75);margin-bottom:18px;}
.ob-rate-preview{font-size:.83rem;color:rgba(15,23,42,.65);padding:12px 14px;background:rgba(0,0,0,.04);border-radius:10px;margin-bottom:22px;}
.ob-consent-row{display:flex;gap:12px;align-items:flex-start;padding:14px;background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.15);border-radius:11px;}
.ob-consent-check{flex-shrink:0;margin-top:2px;width:16px;height:16px;cursor:pointer;accent-color:var(--violet);}
.ob-consent-label{font-size:.8rem;color:rgba(15,23,42,.7);line-height:1.6;cursor:pointer;}
.ob-nav{display:flex;align-items:center;justify-content:space-between;margin-top:28px;gap:12px;}
.ob-btn-back{background:none;border:1px solid rgba(0,0,0,.15);border-radius:11px;padding:12px 20px;color:#475569;font-size:.88rem;cursor:pointer;font-family:inherit;transition:.2s;}
.ob-btn-back:hover{border-color:rgba(15,23,42,.75);color:rgba(15,23,42,.7);}
.ob-btn-back[disabled]{opacity:.3;cursor:default;}
.ob-btn-next{flex:1;padding:14px;background:linear-gradient(135deg,var(--violet),var(--pink));border:none;border-radius:13px;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.02em;box-shadow:0 4px 22px rgba(99,102,241,.3);transition:.2s;}
.ob-btn-next:hover{filter:brightness(1.1);transform:translateY(-1px);}
.ob-btn-next:disabled{opacity:.5;cursor:default;transform:none;}

/* ── Better marketplace card bio line ── */
.mc-bio{font-size:.77rem;color:rgba(15,23,42,.55);line-height:1.5;margin:-2px 0 10px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ── LoRA pipeline badge on results ── */
.result-pipeline-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);color:var(--violet-lt);margin-bottom:12px;}

/* ── Brand Studio Home ── */
#bd-home{display:none;min-height:100vh;padding:110px 32px 120px;max-width:1160px;margin:0 auto;}
#bd-home.active{display:block;}
.bd-home-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px;}
.bd-home-greeting{font-size:1.9rem;font-weight:800;color:#1e293b;margin-bottom:6px;line-height:1.2;}
.bd-home-sub{font-size:.95rem;color:#475569;}
.bd-home-welcome{margin-bottom:36px;}

/* Mode cards grid */
.bd-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:48px;}
@media(max-width:800px){.bd-mode-grid{grid-template-columns:1fr;}}

.bd-mode-card{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.bd-mode-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.35);box-shadow:0 16px 48px rgba(0,0,0,.1);}
.bd-mode-featured{border-color:rgba(99,102,241,.25);background:linear-gradient(135deg,rgba(99,102,241,.06),#ffffff);}
.bd-mode-featured:hover{border-color:rgba(99,102,241,.6);box-shadow:0 16px 48px rgba(99,102,241,.15);}

/* Preview area */
.bd-mode-preview{position:relative;height:170px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.bm-prev-single{background:linear-gradient(135deg,#ddeef8 0%,#c8e4f4 100%);}
.bm-prev-lookbook{background:linear-gradient(135deg,#ede8f8 0%,#d8ccf0 50%,#c8bce8 100%);}
.bm-prev-bulk{background:linear-gradient(135deg,#d8eef8 0%,#c0e0f4 100%);}
.bm-prev-badge{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.1);border-radius:50px;padding:4px 10px;font-size:.7rem;font-weight:700;color:rgba(15,23,42,.7);letter-spacing:.05em;}
.bm-prev-popular{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--violet),var(--pink));border-radius:50px;padding:4px 10px;font-size:.68rem;font-weight:800;color:#fff;letter-spacing:.04em;}
.bm-prev-icon{opacity:.7;}

/* Card body */
.bd-mode-body{padding:20px 22px 22px;}
.bd-mode-name{font-size:1.1rem;font-weight:800;color:#1e293b;margin-bottom:6px;}
.bd-mode-desc{font-size:.83rem;color:#475569;line-height:1.6;margin-bottom:14px;}
.bd-mode-for{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.bd-for-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#64748b;}
.bd-for-tag{font-size:.68rem;font-weight:600;color:#475569;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:50px;padding:2px 8px;}
.bd-mode-cost{font-size:.8rem;color:#475569;margin-bottom:16px;}
.bd-mode-cost strong{color:#6366f1;font-weight:700;}
.bd-mode-cta{width:100%;padding:11px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.09);border-radius:10px;color:#475569;font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:.18s;}
.bd-mode-cta:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.4);color:#6366f1;}
.bd-mode-cta-featured{background:linear-gradient(135deg,var(--violet),var(--pink));border-color:transparent;color:#fff;box-shadow:0 4px 18px rgba(99,102,241,.3);}
.bd-mode-cta-featured:hover{filter:brightness(1.1);box-shadow:0 6px 24px rgba(99,102,241,.45);}

/* Quick tools */
.bd-util-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin-bottom:14px;}
.bd-util-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:600px){.bd-util-row{grid-template-columns:1fr;}}
.bd-util-card{display:flex;align-items:center;gap:14px;background:#ffffff;border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.18s;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.bd-util-card:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.04);}
.bd-util-icon{font-size:1.4rem;flex-shrink:0;}
.bd-util-name{font-size:.88rem;font-weight:700;color:#1e293b;margin-bottom:2px;}
.bd-util-desc{font-size:.75rem;color:#475569;}

/* Fix: override the general section padding for dashboards.
   Bottom padding bumped from 80 -> 120 so content clears the fixed
   us-bottom-bar (60px bar + 16px offset + breathing room). */
#bd-home,#model-dash{padding:110px 32px 120px!important;}
@media(max-width:600px){#bd-home,#model-dash{padding:130px 18px 60px!important;}}

/* Definitive dashboard padding override — beats section !important */
section#bd-home,section#model-dash{padding:110px 32px 120px!important;}
@media(max-width:700px){section#bd-home,section#model-dash{padding:130px 18px 60px!important;}}

/* Brand dashboard — full viewport, no scroll, FASHN-style */
section#brand-dash{
  padding:0!important; margin:0!important;
  max-width:none!important; width:100%!important;
}
section#brand-dash.active{
  height:100vh; overflow:hidden;
  display:flex!important; flex-direction:column;
}
#brand-dash .dash-header{
  flex-shrink:0; margin:8px 10px 0;
  padding:8px 20px; border:1px solid rgba(255,255,255,.45);
  border-radius:14px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 16px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:space-between;
}
#brand-dash .dash-header .dash-balance-wrap{gap:8px;}
#brand-dash .dash-header .dash-balance{padding:6px 14px;font-size:.82rem;border-radius:20px;}
#brand-dash .dash-header .topup-btn{padding:6px 14px;font-size:.78rem;border-radius:20px;}
/* Brand logo in top bar */
.bd-topbar-brand{
  display:flex;align-items:center;gap:8px;
}
.bd-topbar-logo{
  font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:800;
  letter-spacing:-.04em;
  background:linear-gradient(135deg,#6366f1,#0891b2);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Brand Studio Sidebar Layout — Collapsible FASHN-style ── */
.bd-studio-layout{display:flex;gap:0;flex:1;min-height:0;overflow:visible;margin-top:8px;}
.bd-sidebar{
  width:60px; flex-shrink:0; background:#fafafa;
  border:1px solid rgba(0,0,0,.06); border-radius:14px;
  margin:0 0 0 8px;
  padding:10px 0 14px; display:flex; flex-direction:column;
  align-self:stretch;
  transition:width .25s ease; overflow-x:hidden; overflow-y:auto; z-index:20;
}
.bd-sidebar.expanded{
  width:190px;
  box-shadow:4px 0 20px rgba(0,0,0,.06);
}
/* Toggle button */
.bd-sidebar-toggle{
  width:28px; height:28px; border-radius:6px; border:1px solid rgba(0,0,0,.06);
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
  margin:0 auto 8px; transition:all .2s; color:#94a3b8; flex-shrink:0;
}
.bd-sidebar-toggle:hover{background:rgba(99,102,241,.06);color:#6366f1;border-color:rgba(99,102,241,.2);}
.bd-sidebar-toggle svg{width:16px;height:16px;transition:transform .25s;}
.bd-sidebar.expanded .bd-sidebar-toggle svg{transform:rotate(180deg);}

.bd-nav-section{padding:0 8px;}
.bd-nav-section-account{margin-top:auto;padding-top:10px;padding-bottom:12px;border-top:1px solid rgba(0,0,0,.07);}
.bd-nav-section-label{
  font-size:.6rem; font-weight:700; letter-spacing:.1em; color:#94a3b8;
  text-transform:uppercase; padding:6px 6px 6px; display:block;
  white-space:nowrap; overflow:hidden;
  opacity:0; height:0; margin:0; padding:0; transition:all .2s;
}
.bd-sidebar.expanded .bd-nav-section-label{opacity:1;height:auto;padding:6px 6px 6px;margin-bottom:2px;}
.bd-nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 0; background:none; border:none; border-left:2px solid transparent;
  color:#64748b; font-size:.82rem; font-family:inherit; cursor:pointer;
  transition:all .2s; text-align:left; border-radius:0 8px 8px 0; line-height:1;
  white-space:nowrap; overflow:hidden; justify-content:center;
}
.bd-sidebar.expanded .bd-nav-item{padding:9px 12px;justify-content:flex-start;}
.bd-nav-item:hover{color:#1e293b;background:rgba(0,0,0,.04);}
.bd-nav-item.active{color:#6366f1;border-left-color:var(--violet);background:rgba(99,102,241,.08);font-weight:600;}
.bd-nav-item-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.65;transition:.2s;}
.bd-nav-item.active .bd-nav-item-icon,.bd-nav-item:hover .bd-nav-item-icon{opacity:1;}
.bd-nav-item-icon svg{width:18px;height:18px;}
/* Text labels — hidden when collapsed, shown when expanded */
.bd-nav-item-text{display:none;transition:opacity .2s;}
.bd-sidebar.expanded .bd-nav-item-text{display:inline;font-size:.82rem;font-weight:500;opacity:1;}
/* Tooltip on hover when collapsed */
.bd-nav-item[title]{position:relative;}
@media(max-width:768px){.bd-sidebar{display:none;}}
.bd-content-area{flex:1;min-width:0;overflow-y:auto;padding:20px 28px 100px;background:#f8f9fb;}
/* Shrink bottom padding when the fixed bottom bar is hidden (Director result) */
body:has(#us-bottom-bar.us-bar-hidden) .bd-content-area{padding-bottom:24px;}

/* ── Mobile Bottom Tab Bar ── */
.bd-mobile-tabs{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(0,0,0,.06);
  padding:6px 0 env(safe-area-inset-bottom, 8px);
  justify-content:space-around; align-items:center;
}
.bd-mobile-tab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; cursor:pointer; padding:4px 12px;
  color:#94a3b8; font-size:.6rem; font-weight:600; font-family:inherit;
  transition:color .2s;
}
.bd-mobile-tab.active{color:#6366f1;}
.bd-mobile-tab svg{width:22px;height:22px;}
@media(max-width:768px){.bd-mobile-tabs{display:flex;}}
.bd-panel{display:none;}
.bd-panel.active{display:block;}
.bd-panel-header{margin-bottom:24px;}
.bd-panel-title{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;letter-spacing:-.03em;color:#1e293b;margin:0 0 6px;}
.bd-panel-sub{color:#475569;font-size:.88rem;margin:0;}
.bd-panel-section-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:12px;}
.bd-settings-card{background:#ffffff;border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:24px;max-width:480px;display:flex;flex-direction:column;gap:14px;}
.bd-billing-balance-card{background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.2);border-radius:16px;padding:28px 24px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;max-width:320px;}
.bd-billing-label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,23,42,.65);}
.bd-billing-amount{font-family:'Syne',sans-serif;font-size:3rem;font-weight:800;letter-spacing:-.04em;color:#6366f1;line-height:1;}
.bd-billing-history-wrap{background:#ffffff;border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:20px 22px;}
.bd-hist-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06);}
.bd-hist-item:last-child{border-bottom:none;}
.bd-hist-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgba(0,0,0,.04);}
.bd-hist-thumb-empty{width:48px;height:48px;border-radius:8px;background:rgba(0,0,0,.04);flex-shrink:0;}
.bd-hist-info{flex:1;min-width:0;}
.bd-hist-date{font-size:.8rem;color:rgba(15,23,42,.75);margin-bottom:3px;}
.bd-hist-count{font-size:.86rem;font-weight:600;color:#1e293b;}
.bd-hist-cost{font-size:.88rem;font-weight:700;color:var(--cyan);flex-shrink:0;}
@media(max-width:768px){
  /* ── MOBILE: Simple stacked layout ── */
  /* Section fills viewport, flex column */
  section#brand-dash.active{
    height:100vh!important;height:100dvh!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;
  }
  /* Header: fixed at top, glass, logo left / balance right */
  #brand-dash .dash-header{
    flex-shrink:0!important;
    margin:8px 10px 0;border-radius:14px;border:1px solid rgba(255,255,255,.45);
    padding:12px 18px;flex-direction:row;gap:8px;align-items:center;justify-content:space-between;
    background:rgba(255,255,255,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 2px 16px rgba(0,0,0,.04);
  }
  #brand-dash .dash-header .dash-balance-wrap{gap:4px;flex-wrap:nowrap;}
  #brand-dash .dash-header .dash-balance{padding:4px 10px;font-size:.7rem;}
  .bd-topbar-logo{font-size:1.05rem;}
  /* Studio layout: takes remaining space, hides overflow */
  .bd-studio-layout{
    flex:1 1 0!important;min-height:0!important;
    flex-direction:column!important;overflow:hidden!important;
  }
  .bd-sidebar{display:none!important;}
  /* Content area: scrollable, takes all space */
  .bd-content-area{
    flex:1 1 0!important;min-height:0!important;
    overflow-y:scroll!important;-webkit-overflow-scrolling:touch;
    padding:10px 16px 130px!important;background:#f8f9fb;
  }
  /* Panels */
  .bd-panel{width:100%;box-sizing:border-box;}
  #bd-studio-home{flex-direction:column;align-items:stretch;width:100%;max-width:100%;}
  #bd-studio-home.active{display:flex!important;}
  #bd-studio-home:not(.active){display:none!important;}
  #bd-studio-home > *{width:100%;box-sizing:border-box;max-width:100%;}
  /* Stats — compact row */
  .studio-stats-row{display:flex!important;gap:6px;margin-bottom:10px;width:100%;}
  .studio-stat{padding:10px;border-radius:12px;text-align:center;align-items:center;}
  .studio-stat-val{font-size:.95rem;}
  .studio-stat-label{font-size:.55rem;letter-spacing:.04em;}
  /* Mode dropdown — mobile tweaks */
  .us-mode-pill{padding:8px 14px;font-size:.82rem;}
  .us-mode-menu{min-width:180px;}
  /* Upload zone */
  .us-upload-zone{padding:28px 16px 24px;min-height:140px;border-radius:12px;width:100%;box-sizing:border-box;text-align:center;}
  .us-upload-zone svg{width:32px;height:32px;}
  .us-upload-btn{padding:7px 18px;font-size:.78rem;}
  .us-upload-hint{font-size:.7rem;}
  /* Garment preview */
  .us-garment-preview{padding:8px 12px;border-radius:10px;width:100%;box-sizing:border-box;justify-content:center;}
  .us-garment-thumb{height:60px;}
  /* Outfit cards */
  .outfit-cards-grid{grid-template-columns:1fr 1fr;gap:6px;width:100%;}
  .outfit-card{padding:7px 8px;}
  .outfit-card-name{font-size:.72rem;}
  .outfit-card-vibe{font-size:.58rem;}
  .outfit-card-pieces{font-size:.58rem;}
  /* Prompt — now inside bottom bar, mobile overrides below */
  /* Bottom bar — fixed above mobile tab bar, FASHN-style stacked layout */
  .us-bottom-bar{
    position:fixed!important;bottom:56px!important;left:0!important;right:0!important;
    margin:0!important;padding:0!important;border-radius:16px 16px 0 0!important;
    display:flex!important;flex-direction:column!important;gap:0!important;
    width:100%!important;box-sizing:border-box!important;
    background:#fff!important;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -4px 24px rgba(0,0,0,.08);
    z-index:99;overflow:visible!important;
  }
  /* Hide desktop-only elements in mobile bottom bar */
  .us-bar-spacer{display:none!important;}
  .us-bar-cost{display:none!important;}
  .us-bar-personality{display:none!important;}
  #us-bar-settings-area{display:none!important;}
  .us-desktop-run{display:none!important;}
  .us-bar-row2{display:none!important;}
  /* Show mobile-only elements */
  #us-mobile-settings{display:flex!important;}
  #us-mobile-run-wrap{display:flex!important;}

  /* Row 1: Settings pills — horizontal scroll */
  .us-mobile-settings{
    display:flex!important;flex-direction:row!important;gap:8px!important;
    padding:12px 16px 8px!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-shrink:0;
    width:100%!important;box-sizing:border-box!important;
  }
  .us-mobile-settings::-webkit-scrollbar{display:none;}
  .us-mobile-setting-pill{
    flex-shrink:0!important;display:inline-flex!important;align-items:center;gap:5px;
    padding:8px 16px;border-radius:20px;
    border:1px solid rgba(0,0,0,.12);background:#fff;
    font-size:.76rem;font-weight:600;color:#64748b;
    cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap;
  }
  .us-mobile-setting-pill.is-touched{
    background:rgba(99,102,241,.07);color:#6366f1;border-color:rgba(99,102,241,.25);
  }
  .us-mobile-setting-pill svg{width:14px;height:14px;flex-shrink:0;}
  .us-mobile-setting-popup{
    position:fixed!important;left:16px!important;right:16px!important;
    bottom:calc(56px + 160px)!important;top:auto!important;
    min-width:auto!important;width:auto!important;
    background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);padding:8px;z-index:400;
    display:none;max-height:220px;overflow-y:auto;
    animation:usPopUp .22s cubic-bezier(.2,.8,.2,1);
  }
  .us-mobile-setting-popup.active{display:block;}
  .us-mobile-setting-opt{
    padding:10px 14px;border-radius:8px;font-size:.8rem;font-weight:500;color:#475569;
    cursor:pointer;transition:all .15s;
  }
  .us-mobile-setting-opt:hover{background:rgba(99,102,241,.06);}
  .us-mobile-setting-opt.active{background:rgba(99,102,241,.1);color:#6366f1;font-weight:600;}

  /* Row 2: Optional prompt */
  .us-bar-prompt-wrap{
    order:98!important;
    padding:0 16px 8px!important;width:100%!important;box-sizing:border-box!important;margin-top:0!important;
  }

  /* Row 3: Run button full width + credits badge — below prompt on mobile */
  .us-mobile-run-wrap{
    order:99!important;
    display:flex!important;padding:0 16px 14px!important;gap:10px;align-items:center;
    width:100%!important;box-sizing:border-box!important;
  }
  .us-mobile-run-wrap .us-run-btn{
    flex:1!important;width:0!important;padding:14px 20px!important;font-size:.9rem!important;
    border-radius:12px!important;justify-content:center!important;
  }
  .us-mobile-credits{
    display:block!important;
    flex-shrink:0;font-size:.73rem;font-weight:700;color:#6366f1;
    background:rgba(99,102,241,.07);padding:8px 14px;border-radius:10px;white-space:nowrap;
  }
  .us-cost-tag{font-size:.72rem;}
  .us-bar-prompt-input{
    font-size:16px!important; /* prevent iOS zoom */
    padding:11px 14px!important;border-radius:0!important;border:none!important;background:transparent!important;outline:none!important;
  }

  /* Dropdowns open upward */
  .us-dropdown-popup{bottom:calc(100% + 6px)!important;top:auto!important;z-index:200;min-width:140px;}
  /* Other panels */
  .bd-billing-balance-card{max-width:100%;}
  .bd-settings-card{max-width:100%;}
  .bd-panel-title{font-size:1.1rem;}
  .bd-panel-sub{font-size:.8rem;}
  .bd-hist-item{padding:10px 0;gap:10px;}
  .bd-hist-thumb,.bd-hist-thumb-empty{width:40px;height:40px;border-radius:6px;}
}

/* ── Model Hologram Panel ── */
.md-hologram-panel{background:rgba(0,255,200,.03);border:1px solid rgba(0,255,200,.12);border-radius:16px;padding:28px;margin-top:28px;}
.md-hologram-panel h3{color:var(--cyan);font-size:.9rem;letter-spacing:3px;margin:0 0 18px;font-weight:700;}
.md-holo-dropzone{border:1px dashed rgba(0,255,200,.3);border-radius:10px;padding:32px 20px;text-align:center;cursor:pointer;color:rgba(15,23,42,.75);font-size:.85rem;transition:background .2s;}
.md-holo-dropzone:hover{background:rgba(0,255,200,.05);}
#md-holo-canvas{width:100%;height:400px;border-radius:12px;display:block;background:#080812;}
.md-holo-status{text-align:center;padding:48px 20px;color:var(--cyan);font-size:.82rem;letter-spacing:3px;}
.md-holo-pulse{animation:holo-pulse 1.5s ease-in-out infinite;}
@keyframes holo-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.md-holo-submit{margin-top:16px;width:100%;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#080812;border:none;border-radius:8px;font-family:var(--font);font-size:.83rem;font-weight:700;letter-spacing:2px;cursor:pointer;}
.md-holo-submit:disabled{opacity:.4;cursor:not-allowed;}

/* ════ MODEL DASHBOARD REDESIGN ════ */
.md-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:32px;}
.md-back-btn{justify-self:start;width:fit-content;}
.md-header>:last-child{justify-self:end;}
.md-header-title{justify-self:center;}
.md-back-btn{background:none;border:1px solid rgba(0,0,0,.1);color:rgba(15,23,42,.7);border-radius:8px;padding:8px 16px;font-size:.82rem;cursor:pointer;transition:.2s;font-family:inherit;}
.md-back-btn:hover{border-color:rgba(99,102,241,.4);color:#6366f1;}
.md-header-title{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:-.01em;background:linear-gradient(135deg,#6366f1,#0891b2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:8px 20px 8px 14px;border:1px solid rgba(99,102,241,.18);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 50px rgba(99,102,241,.04);display:inline-flex;align-items:center;gap:8px;}
.md-header-title::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#0891b2);flex-shrink:0;box-shadow:0 0 6px rgba(99,102,241,.4);}
.md-header-glow{animation:none;filter:none;}
.bd-header-glow{}
.bd-studio-title{font-family:'Syne',sans-serif!important;font-size:2.1rem!important;font-weight:800!important;letter-spacing:-.03em!important;background:linear-gradient(120deg,#6366f1 0%,#6366f1 55%,#4f46e5 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;}
@media(max-width:768px){.dash-header{flex-direction:column;align-items:center;gap:12px;text-align:center;}.bd-studio-title{font-size:1.7rem;}}
.md-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:start;}
@media(max-width:860px){.md-main-grid{grid-template-columns:1fr;}}
.md-left-col,.md-right-col{display:flex;flex-direction:column;gap:16px;}
.md-profile-card{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:24px;display:flex;gap:20px;align-items:flex-start;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.md-avatar-wrap{flex-shrink:0;}
.md-avatar-wrap{position:relative;cursor:pointer;flex-shrink:0;}
.md-avatar-wrap:hover .md-avatar-change-badge{opacity:1;}
.md-avatar-wrap:hover .md-avatar{filter:brightness(.7);}
.md-avatar{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:800;color:#fff;overflow:hidden;transition:filter .2s;}
.md-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.md-avatar-change-badge{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff;opacity:0;transition:opacity .2s;pointer-events:none;border:2px solid var(--bg);}
.md-profile-fields{flex:1;display:flex;flex-direction:column;gap:11px;}
.md-field-group{display:flex;flex-direction:column;gap:4px;}
.md-field-label{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(15,23,42,.55);}
.md-field-input{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.09);border-radius:9px;padding:9px 12px;color:#1e293b;font-family:inherit;font-size:.87rem;outline:none;transition:.2s;width:100%;box-sizing:border-box;}
.md-field-input:focus{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.06);}
.md-field-input[readonly]{opacity:.55;cursor:default;}
.md-field-link{background:none;border:none;color:var(--violet-lt);font-size:.77rem;cursor:pointer;text-align:left;padding:2px 0 0;font-family:inherit;transition:color .2s;opacity:.8;}
.md-field-link:hover{color:#4f46e5;opacity:1;}
.md-save-profile-btn{align-self:flex-start;padding:9px 20px;background:linear-gradient(135deg,var(--violet),var(--pink));border:none;border-radius:10px;color:#fff;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:.2s;margin-top:2px;}
.md-save-profile-btn:hover{filter:brightness(1.12);}
.md-earnings-meter-card{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.18);border-radius:18px;padding:22px 24px;}
.md-meter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.md-meter-title{font-size:.95rem;font-weight:700;color:rgba(15,23,42,.9);}
.md-meter-bar-wrap{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.md-meter-min,.md-meter-max{font-size:.78rem;color:rgba(15,23,42,.55);flex-shrink:0;font-weight:600;white-space:nowrap;}
.md-meter-range{flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:rgba(99,102,241,.25);outline:none;cursor:pointer;}
.md-meter-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));cursor:pointer;box-shadow:0 0 12px rgba(99,102,241,.6);}
.md-meter-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));cursor:pointer;border:none;}
.md-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:500px){.md-stats-row{grid-template-columns:1fr 1fr;}}
.md-stat-box{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.md-stat-num{font-size:1.55rem;font-weight:800;font-family:'Syne',sans-serif;letter-spacing:-.03em;color:#0f172a;}
.md-stat-lbl{font-size:.7rem;color:rgba(15,23,42,.55);letter-spacing:.05em;text-transform:uppercase;font-weight:500;}
.md-retrieve-btn{margin-top:10px;padding:7px 13px;background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.28);border-radius:8px;color:var(--violet-lt);font-family:inherit;font-size:.76rem;font-weight:600;cursor:pointer;transition:.2s;align-self:flex-start;}
.md-retrieve-btn:hover{background:rgba(99,102,241,.26);color:#fff;}
.md-hologram-card{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:24px;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.md-holo-card-title{color:var(--cyan);font-size:.85rem;letter-spacing:3px;margin:0 0 16px;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.md-panel{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:22px 24px;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.md-panel-title{font-size:.95rem;font-weight:700;color:#1e293b;margin:0 0 14px;letter-spacing:-.01em;}
.md-retrain-card{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:24px;box-shadow:0 4px 16px rgba(0,0,0,.06);}

/* ── Creator Type Selector ── */
.creator-type-selector{margin-top:20px;}
.ct-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,23,42,.65);margin-bottom:10px;}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ct-tile{background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px 12px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;text-align:center;}
.ct-tile:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.05);}
.ct-tile.active{border-color:var(--violet);background:rgba(99,102,241,.1);box-shadow:0 0 0 1px var(--violet),0 0 18px rgba(99,102,241,.18);}
.ct-icon{font-size:1.4rem;margin-bottom:4px;}
.ct-name{font-size:.85rem;font-weight:600;color:var(--white);margin-bottom:2px;}
.ct-desc{font-size:.68rem;color:var(--muted);letter-spacing:.02em;}

/* ── Gender Selector ── */
.gender-selector{margin-top:16px;}
.gender-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.gender-tile{background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:12px 8px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;text-align:center;}
.gender-tile:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.05);}
.gender-tile.active{border-color:var(--violet);background:rgba(99,102,241,.1);box-shadow:0 0 0 1px var(--violet),0 0 18px rgba(99,102,241,.18);}

/* ══ BROWSE ALL PERSONALITIES PAGE ══ */
#browse-page{display:none;min-height:100vh;padding:140px 2.5rem 6rem;background:var(--bg);overflow-x:hidden;box-sizing:border-box;width:100%;}
#browse-page.active{display:block;}
.browse-header{display:flex;flex-direction:column;gap:1rem;max-width:1200px;margin:0 auto 3rem;}
.browse-back-btn{align-self:flex-start;background:none;border:1px solid rgba(0,0,0,.1);color:rgba(15,23,42,.7);border-radius:8px;padding:7px 16px;font-size:.82rem;cursor:pointer;transition:all .2s;font-family:inherit;}
.browse-back-btn:hover{border-color:rgba(99,102,241,.5);color:#6366f1;}
.browse-title{font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.04em;background:linear-gradient(135deg,#6366f1,#0891b2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 .5rem;}
.browse-sub{color:rgba(15,23,42,.65);font-size:1rem;margin:0;line-height:1.6;}
.browse-filters{display:flex;flex-wrap:wrap;gap:1rem;max-width:1200px;margin:0 auto 2rem;align-items:center;}
.browse-search-wrap{position:relative;flex:1;min-width:220px;}
.browse-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.9rem;pointer-events:none;}
.browse-search-input{width:100%;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:12px 16px 12px 40px;color:#1e293b;font-size:.9rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s;}
.browse-search-input::placeholder{color:rgba(15,23,42,.55);}
.browse-search-input:focus{border-color:rgba(99,102,241,.5);}
.browse-select{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:12px 36px 12px 16px;color:#1e293b;font-size:.9rem;font-family:inherit;cursor:pointer;outline:none;transition:border-color .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(15,23,42,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.browse-select:focus{border-color:rgba(99,102,241,.5);}
.browse-select option{background:#ffffff;color:#1e293b;}
.browse-clear-btn{background:none;border:1px solid rgba(0,0,0,.1);color:rgba(15,23,42,.75);border-radius:12px;padding:12px 20px;font-size:.86rem;cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap;}
.browse-clear-btn:hover{border-color:rgba(8,145,178,.4);color:#0891b2;}
.browse-results-bar{max-width:1200px;margin:0 auto 1.25rem;color:rgba(15,23,42,.6);font-size:.84rem;letter-spacing:.01em;}
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem;max-width:1200px;width:100%;margin:0 auto;box-sizing:border-box;}
.browse-card{position:relative;background:rgba(14,14,30,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,0.15);border-radius:20px;overflow:hidden;transition:transform .4s cubic-bezier(.22,.68,0,1.2),box-shadow .4s,border-color .4s;transform-style:preserve-3d;will-change:transform;}
.browse-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--violet-lt),var(--pink),transparent);z-index:2;opacity:0;transition:opacity .4s;}
.browse-card::after{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(99,102,241,0.08) 0%,transparent 60%);pointer-events:none;opacity:0;transition:opacity .3s;z-index:1;}
.browse-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-1deg);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 30px rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3);}
.browse-card:hover::before{opacity:1;}
.browse-card:hover::after{opacity:1;}
.browse-card-img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;}
.browse-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.68,0,1.2);}
.browse-card:hover .browse-card-img{transform:scale(1.06);}
.browse-card-img-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(14,14,30,0.95),transparent);pointer-events:none;}
.browse-card-type-badge{position:absolute;top:12px;left:12px;font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);letter-spacing:.04em;text-transform:uppercase;z-index:2;border:1px solid rgba(255,255,255,0.08);}
.browse-card-gender-badge{position:absolute;top:12px;right:12px;font-size:.7rem;font-weight:600;padding:5px 11px;border-radius:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:rgba(15,23,42,.8);z-index:2;border:1px solid rgba(255,255,255,0.06);}
.browse-card-body{padding:20px 18px;position:relative;z-index:2;}
.browse-card-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.08rem;color:#fff;margin-bottom:4px;letter-spacing:-.01em;}
.browse-card-city{font-size:.8rem;color:rgba(15,23,42,.65);margin-bottom:12px;}
.browse-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.browse-card-tag{font-size:.7rem;padding:4px 10px;border-radius:20px;background:rgba(99,102,241,.12);color:rgba(99,102,241,.9);border:1px solid rgba(99,102,241,.2);transition:background .2s,border-color .2s;}
.browse-card:hover .browse-card-tag{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.35);}
.browse-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.browse-card-price{font-family:'Space Grotesk',sans-serif;font-size:.88rem;font-weight:700;color:rgba(15,23,42,.75);letter-spacing:-.01em;}
.browse-card-btn{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;border:none;border-radius:10px;padding:9px 18px;font-size:.8rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s,box-shadow .2s;font-family:inherit;}
.browse-card-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,0.3);}
@media(max-width:600px){#browse-page{padding:160px 1.25rem 4rem!important;}.browse-grid{grid-template-columns:1fr 1fr;gap:.75rem;}.browse-filters{gap:.75rem;}.browse-header{margin-bottom:2rem;}}
.browse-empty{flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;max-width:1200px;margin:0 auto;}
.browse-empty-icon{font-size:3rem;margin-bottom:1rem;}
.browse-empty p{color:rgba(15,23,42,.65);font-size:1rem;margin-bottom:1.5rem;}
.browse-loading{flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;max-width:1200px;margin:0 auto;gap:1rem;}
.browse-loading p{color:rgba(15,23,42,.65);font-size:.9rem;}

/* ══ CREATOR PROFILE PAGE ══ */
#creator-profile{display:none;min-height:100vh;padding:120px 2.5rem 6rem;background:var(--bg);overflow-x:hidden;box-sizing:border-box;width:100%;}
#creator-profile.active{display:block;}
.cp-inner{max-width:1100px;margin:0 auto;}
.cp-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:start;margin-top:2rem;}
.cp-photo{width:100%;border-radius:20px;object-fit:cover;aspect-ratio:3/4;display:block;}
.cp-holo-wrap{width:100%;border-radius:20px;overflow:hidden;background:#0d0d1a;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;}
#cp-holo-canvas{width:100%!important;height:100%!important;display:block;}
.cp-type-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;}
.cp-name{font-family:'Syne',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#1e293b;margin:0 0 .5rem;letter-spacing:-.03em;}
.cp-meta{color:rgba(15,23,42,.7);font-size:.95rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;}
.cp-meta-item{display:flex;align-items:center;gap:.35rem;}
.cp-price-row{margin-bottom:1.75rem;}
.cp-price-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(15,23,42,.55);margin-bottom:.25rem;}
.cp-price-val{font-size:1.75rem;font-weight:800;color:#6366f1;}
.cp-price-unit{font-size:.85rem;font-weight:400;color:rgba(15,23,42,.6);margin-left:.3rem;}
.cp-bio{color:rgba(15,23,42,.65);line-height:1.8;font-size:.97rem;margin-bottom:1.75rem;}
.cp-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;}
.cp-cta{width:100%;padding:16px;font-size:1rem;font-weight:700;border-radius:14px;background:linear-gradient(135deg,#6366f1,#0891b2);color:#fff;border:none;cursor:pointer;transition:opacity .2s,transform .15s;font-family:inherit;}
.cp-cta:hover{opacity:.88;transform:translateY(-1px);}
@media(max-width:768px){
  #creator-profile{padding:120px 1.25rem 4rem!important;}
  .cp-layout{grid-template-columns:1fr;gap:2rem;}
  .cp-name{font-size:1.8rem;}
}
.browse-spinner{width:36px;height:36px;border:3px solid rgba(99,102,241,.2);border-top-color:var(--violet);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media(max-width:600px){
  .browse-filters{gap:.5rem;}
  .browse-search-wrap{min-width:100%;flex:none;}
  .browse-select,.browse-clear-btn{flex:1;min-width:calc(50% - .25rem);}
  .browse-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;}
  .browse-title{font-size:1.8rem;}
}


/* ══════════════════════════════════════════
   CONSENT GATE
   ══════════════════════════════════════════ */
#mm-consent-overlay {
  display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(5,5,18,0.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  overflow-y:auto; padding:40px 16px;
  animation:fadeIn 0.3s ease;
}
#mm-consent-overlay.active { display:flex; align-items:flex-start; justify-content:center; }

.mm-consent-wrap {
  width:100%; max-width:560px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(99,102,241,0.08);
  margin:auto;
}
.mm-consent-header {
  padding:28px 28px 20px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(135deg, rgba(99,102,241,0.04), rgba(192,132,252,0.02));
}
.mm-consent-logo {
  font-family:'Syne',sans-serif; font-size:18px; font-weight:800;
  background:linear-gradient(135deg,#6366f1,#c084fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:14px;
}
.mm-consent-role-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 12px; border-radius:99px;
  border:1px solid rgba(99,102,241,0.3);
  color:#6366f1; background:rgba(99,102,241,0.08);
  margin-bottom:12px;
}
.mm-consent-title {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:700;
  color:#0f172a; letter-spacing:-0.03em; margin-bottom:6px;
}
.mm-consent-subtitle {
  font-size:13px; color:rgba(15,23,42,0.55); line-height:1.6;
}

.mm-consent-body { padding:24px 28px; }

.mm-consent-terms {
  display:flex; flex-direction:column; gap:10px; margin-bottom:24px;
}
.mm-consent-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:10px;
  background:rgba(0,0,0,0.02);
  border:1px solid rgba(0,0,0,0.07);
  cursor:pointer; transition:background 0.2s, border-color 0.2s;
}
.mm-consent-item:hover { background:rgba(99,102,241,0.04); border-color:rgba(99,102,241,0.2); }
.mm-consent-item.checked { background:rgba(99,102,241,0.06); border-color:rgba(99,102,241,0.25); }
.mm-consent-checkbox {
  width:18px; height:18px; min-width:18px; border-radius:5px;
  border:1.5px solid rgba(0,0,0,0.2);
  background:transparent; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; pointer-events:none;
}
.mm-consent-item.checked .mm-consent-checkbox {
  background:var(--violet); border-color:var(--violet);
}
.mm-consent-item.checked .mm-consent-checkbox::after {
  content:''; display:block; width:5px; height:9px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:rotate(45deg) translateY(-1px);
}
.mm-consent-item-text {
  font-size:13px; color:rgba(15,23,42,0.7); line-height:1.5;
}
.mm-consent-item-text strong { color:#0f172a; font-weight:600; }

.mm-consent-divider {
  height:1px; background:rgba(0,0,0,0.06); margin-bottom:20px;
}

.mm-consent-sig-label {
  font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(15,23,42,0.45); margin-bottom:8px;
}
.mm-consent-sig-wrap {
  position:relative; margin-bottom:8px;
}
.mm-consent-sig-input {
  width:100%; padding:13px 16px;
  background:#f8f9fc;
  border:1.5px solid rgba(0,0,0,0.1);
  border-radius:10px; color:#0f172a;
  font-family:'Syne',sans-serif; font-size:16px; font-style:italic;
  outline:none; transition:border-color 0.2s;
  box-sizing:border-box;
}
.mm-consent-sig-input::placeholder { color:rgba(15,23,42,0.3); font-style:italic; }
.mm-consent-sig-input:focus { border-color:rgba(99,102,241,0.45); }
.mm-consent-sig-hint {
  font-size:11px; color:rgba(15,23,42,0.35); margin-bottom:20px;
}
.mm-consent-date {
  font-size:11px; color:rgba(15,23,42,0.4); margin-bottom:20px;
  font-family:'Inter',sans-serif;
}

.mm-consent-cta {
  width:100%; padding:14px;
  background:linear-gradient(135deg,#6366f1,#c084fc);
  border:none; border-radius:10px; cursor:pointer;
  font-family:'Syne',sans-serif; font-size:14px; font-weight:700;
  color:#fff; letter-spacing:0.02em;
  transition:opacity 0.2s, transform 0.2s;
  box-shadow:0 8px 24px rgba(99,102,241,0.3);
}
.mm-consent-cta:disabled {
  opacity:0.3; cursor:not-allowed; transform:none !important;
}
.mm-consent-cta:not(:disabled):hover { opacity:0.88; transform:translateY(-1px); }
.mm-consent-footer-note {
  text-align:center; font-size:11px; color:rgba(15,23,42,0.35);
  margin-top:14px; line-height:1.6; padding:0 28px 20px;
}

/* ══════════════════════════════════════════
   ONBOARDING TOUR
   ══════════════════════════════════════════ */
#mm-tour-backdrop {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.72); pointer-events:all;
  animation:fadeIn 0.25s ease;
}
#mm-tour-backdrop.active { display:block; }

.mm-tour-spotlight {
  position:fixed; z-index:9001; pointer-events:none;
  border-radius:12px;
  box-shadow:0 0 0 3px rgba(99,102,241,0.9),
             0 0 0 6px rgba(99,102,241,0.25),
             0 0 30px rgba(99,102,241,0.4);
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  animation:tour-pulse 2s infinite;
}
@keyframes tour-pulse {
  0%,100%{ box-shadow:0 0 0 3px rgba(99,102,241,0.9),0 0 0 6px rgba(99,102,241,0.2),0 0 30px rgba(99,102,241,0.35); }
  50%    { box-shadow:0 0 0 3px rgba(99,102,241,1),  0 0 0 8px rgba(99,102,241,0.3),0 0 45px rgba(99,102,241,0.5); }
}

.mm-tour-card {
  position:fixed; z-index:9002; pointer-events:all;
  width:270px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:20px 20px 16px;
  box-shadow:0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(99,102,241,0.08);
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  animation:tour-card-in 0.3s ease;
}
@keyframes tour-card-in {
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.mm-tour-step-count {
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(99,102,241,0.8); margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.mm-tour-step-dots { display:flex; gap:4px; }
.mm-tour-dot {
  width:5px; height:5px; border-radius:50%;
  background:rgba(15,23,42,0.15); transition:background 0.2s;
}
.mm-tour-dot.active { background:var(--violet); }
.mm-tour-dot.done   { background:rgba(99,102,241,0.45); }

.mm-tour-icon {
  font-size:22px; margin-bottom:8px; line-height:1;
}
.mm-tour-title {
  font-family:'Syne',sans-serif; font-size:15px; font-weight:700;
  color:#0f172a; margin-bottom:6px; letter-spacing:-0.02em;
}
.mm-tour-desc {
  font-size:12px; color:rgba(15,23,42,0.55); line-height:1.6;
  margin-bottom:16px;
}
.mm-tour-actions {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.mm-tour-skip {
  font-size:11px; color:rgba(15,23,42,0.4); background:none;
  border:none; cursor:pointer; padding:0; font-family:'Inter',sans-serif;
  transition:color 0.2s;
}
.mm-tour-skip:hover { color:rgba(15,23,42,0.7); }
.mm-tour-next {
  font-size:12px; font-weight:600; font-family:'Inter',sans-serif;
  padding:8px 18px; border-radius:8px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#c084fc);
  color:#fff; transition:opacity 0.2s, transform 0.2s;
  display:flex; align-items:center; gap:5px;
}
.mm-tour-next:hover { opacity:0.88; transform:translateY(-1px); }

/* arrow pointer on card */
.mm-tour-card::before {
  content:''; position:absolute;
  width:10px; height:10px;
  background:#ffffff; border:1px solid rgba(0,0,0,0.08);
  transform:rotate(45deg);
}
.mm-tour-card.arrow-top::before    { top:-6px; left:50%; margin-left:-5px; border-bottom:none; border-right:none; }
.mm-tour-card.arrow-bottom::before { bottom:-6px; left:50%; margin-left:-5px; border-top:none; border-left:none; }
.mm-tour-card.arrow-left::before   { left:-6px; top:20px; border-right:none; border-bottom:none; }
.mm-tour-card.arrow-right::before  { right:-6px; top:20px; border-left:none; border-top:none; }

@media(max-width:600px) {
  .mm-tour-card {
    width:calc(100vw - 32px);
    max-width:300px;
    left:50% !important;
    transform:translateX(-50%);
  }
  .mm-tour-card::before { display:none; }
  .mm-tour-spotlight { border-radius:8px; }
}

/* ── ATWIL Logo Loader ── */
@keyframes atwilLoaderPulse {
  0%, 100% { transform:scale(1); opacity:.65; filter:drop-shadow(0 0 12px rgba(99,102,241,.2)); }
  50% { transform:scale(1.12); opacity:1; filter:drop-shadow(0 0 32px rgba(99,102,241,.5)) drop-shadow(0 0 60px rgba(8,145,178,.2)); }
}
@keyframes atwilLoaderSweep {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}
@keyframes atwilLoaderRotateGlow {
  0% { box-shadow:0 -4px 20px rgba(99,102,241,.4), 4px 0 20px transparent, 0 4px 20px transparent, -4px 0 20px transparent; }
  25% { box-shadow:0 -4px 20px transparent, 4px 0 20px rgba(8,145,178,.4), 0 4px 20px transparent, -4px 0 20px transparent; }
  50% { box-shadow:0 -4px 20px transparent, 4px 0 20px transparent, 0 4px 20px rgba(99,102,241,.4), -4px 0 20px transparent; }
  75% { box-shadow:0 -4px 20px transparent, 4px 0 20px transparent, 0 4px 20px transparent, -4px 0 20px rgba(8,145,178,.4); }
  100% { box-shadow:0 -4px 20px rgba(99,102,241,.4), 4px 0 20px transparent, 0 4px 20px transparent, -4px 0 20px transparent; }
}
.atwil-loader-text {
  font-family:'Space Grotesk', sans-serif; font-weight:800; font-size:2.4rem;
  letter-spacing:-.04em;
  background:linear-gradient(135deg, #1e3a5f 0%, #6366f1 40%, #0891b2 70%, #6366f1 100%);
  background-size:200% 200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: atwilLoaderPulse 1.4s ease-in-out infinite, atwilLoaderGradient 2s ease infinite;
}
@keyframes atwilLoaderGradient {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.atwil-loader-ring {
  width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  animation: atwilLoaderRotateGlow 1.6s linear infinite;
  background:rgba(255,255,255,.6);
}
.atwil-loader-bar {
  width:140px; height:3px; border-radius:3px; background:rgba(99,102,241,.1); overflow:hidden; position:relative;
}
.atwil-loader-bar-fill {
  position:absolute; inset:0; width:50%; border-radius:3px;
  background:linear-gradient(90deg, transparent, #6366f1, #0891b2, transparent);
  animation: atwilLoaderSweep .9s ease-in-out infinite;
}

/* ── Page transition fade ── */
.atwil-page-fade { animation: atwilFadeIn .3s ease both; }
@keyframes atwilFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
    .blog-card { background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:28px; margin-bottom:24px; box-shadow:0 2px 12px rgba(0,0,0,.05); transition:border-color .2s, box-shadow .2s; cursor:default; }
    .blog-card:hover { border-color:rgba(99,102,241,0.25); box-shadow:0 8px 32px rgba(99,102,241,0.08); }
    .blog-meta { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
    .blog-tag { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:99px; background:rgba(99,102,241,0.1); color:#6366f1; }
    .blog-date { font-size:.78rem; color:rgba(15,23,42,.5); }
    .blog-title { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:#0f172a; margin-bottom:10px; }
    .blog-excerpt { font-size:.88rem; color:rgba(15,23,42,.7); line-height:1.75; margin-bottom:16px; }
    .blog-read { font-size:.8rem; font-weight:600; color:#6366f1; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
    .blog-divider { height:1px; background:rgba(0,0,0,.04); margin:32px 0; }
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
    @media(max-width:600px){ .contact-grid { grid-template-columns:1fr; } }
    .contact-card { background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:22px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
    .contact-card-icon { font-size:1.5rem; margin-bottom:10px; }
    .contact-card-title { font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:700; color:#1e293b; margin-bottom:6px; }
    .contact-card-desc { font-size:.82rem; color:rgba(15,23,42,.6); line-height:1.6; margin-bottom:10px; }
    .contact-card a { font-size:.85rem; font-weight:600; color:#6366f1; text-decoration:none; }
    .contact-form-wrap { background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:28px; margin-bottom:32px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
    .contact-form-title { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; color:#1e293b; margin-bottom:20px; }
    .cf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    @media(max-width:600px){ .cf-row { grid-template-columns:1fr; } }
    .cf-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
    .cf-field label { font-size:.78rem; font-weight:600; color:rgba(15,23,42,.7); letter-spacing:.05em; text-transform:uppercase; }
    .cf-field input, .cf-field select, .cf-field textarea { background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.1); border-radius:10px; padding:11px 14px; color:#1e293b; font-family:'Space Grotesk',sans-serif; font-size:.9rem; outline:none; transition:border-color .2s; }
    .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { border-color:var(--violet); background:rgba(99,102,241,.06); }
    .cf-field select option { background:#ffffff; color:#1e293b; }
    .cf-field textarea { resize:vertical; min-height:110px; }
    .cf-submit { width:100%; padding:13px; background:linear-gradient(135deg,var(--violet),var(--pink)); border:none; border-radius:12px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:700; cursor:pointer; transition:opacity .2s, transform .2s; }
    .cf-submit:hover { opacity:.9; transform:translateY(-1px); }
    .cf-success { display:none; text-align:center; padding:24px; }
    .cf-success-icon { font-size:2.5rem; margin-bottom:12px; }
    .cf-success p { color:#475569; font-size:.9rem; }

/* ═══════════════════════════════════════
   SEE IT IN ACTION (revamped)
   55/45 split: Remotion hero video (left) + descriptive copy (right)
   ═══════════════════════════════════════ */
#how-it-works {
  padding: 80px 0;
  background: var(--bg2);
}
.demo-header {
  text-align: left;
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.demo-h2 {
  font-size: clamp(35px, 5vw, 56px);
  font-weight: 800;
  color: #1e293b;
  margin-top: 12px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── H2 + audience toggle side-by-side ──────────────── */
.demo-h2-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.demo-h2-row .demo-h2 { margin-top: 0; }

/* Stack both H2 variants in the same grid cell so the row width
   stays constant when toggling (prevents the pill from jumping). */
.demo-h2-stack { display: grid; }
.demo-h2-stack > .demo-h2 {
  grid-column: 1;
  grid-row: 1;
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.demo-h2-stack > .demo-h2.demo-view--active {
  visibility: visible;
  pointer-events: auto;
}

/* ── Audience toggle (Brand / Personality) ──────────── */
.demo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(99,102,241,0.14);
  border-radius: 99px;
  box-shadow: 0 6px 18px rgba(99,102,241,0.06);
  flex-shrink: 0;
  margin-bottom: 8px;
}
.demo-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: none;
  border-radius: 99px;
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.55);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.demo-toggle-btn:hover { color: #1e293b; }
.demo-toggle-btn--active {
  background: linear-gradient(135deg, #6366f1 0%, #0891b2 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.26);
}
.demo-toggle-btn--active:hover { color: #ffffff; }
.demo-toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #0891b2);
  opacity: 0.85;
}
.demo-toggle-btn--active .demo-toggle-dot {
  background: #ffffff;
  opacity: 1;
}

/* ── View switching (brand / personality copy + H2) ──── */
.demo-view { display: none; }
.demo-view.demo-view--active { display: block; }
.demo-copy > .demo-view.demo-view--active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-cta-row {
  margin-top: 8px;
}
.demo-browse-btn {
  margin: 0;
}
.demo-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.demo-video-col { width: 100%; }
.demo-video-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(99,102,241,0.16), 0 10px 28px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.85);
  /* Transparent so the (recolored) video bg dissolves into the section bg */
  background: transparent;
}
.demo-video-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, #6366f1 30%, #0891b2 70%, transparent);
  pointer-events: none;
}
.demo-video {
  display: block;
  width: 100%;
  height: auto;
}
.demo-video-mobile { display: none; }

/* Brand / personality video swap driven by data-demo-view on #how-it-works.
   Specificity (1,2,0) beats the desktop/mobile visibility rules so the
   inactive flow is always hidden regardless of viewport. */
#how-it-works[data-demo-view="brand"] .demo-video--personality { display: none; }
#how-it-works[data-demo-view="personality"] .demo-video--brand { display: none; }

.demo-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.demo-lead {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.demo-lead strong {
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #0891b2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demo-body {
  font-size: clamp(17px, 1.35vw, 20px);
  color: #475569;
  line-height: 1.6;
}
.demo-modes {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: 99px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(99,102,241,0.18);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1e293b;
  box-shadow: 0 6px 16px rgba(99,102,241,0.08);
}
.mode-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mode-chip-dot--studio { background: linear-gradient(135deg, #6366f1, #818cf8); }
.mode-chip-dot--cinematic { background: linear-gradient(135deg, #0891b2, #22d3ee); }

@media (max-width: 900px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Reverse stacking order on small screens: copy reads first, then video */
  .demo-copy      { order: 1; }
  .demo-video-col { order: 2; }
}
@media (max-width: 768px) {
  #how-it-works { padding: 56px 0; }
  .demo-header { text-align: left; margin-bottom: 32px; }
  /* Hide the big H2 on mobile — kicker + toggle alone carry the section */
  #how-it-works .demo-h2 { display: none; }
  /* Center the audience toggle on mobile */
  .demo-h2-row { justify-content: center; margin-top: 14px; }
  .demo-video-desktop { display: none; }
  .demo-video-mobile { display: block; max-width: 360px; margin: 0 auto; }
  .demo-copy { text-align: center; align-items: center; }
  .demo-modes { justify-content: center; }
  /* Lead: gradient headline on its own line (sized to fit single-line),
     supporting copy drops below at a smaller body size */
  .demo-lead { font-size: 17px; line-height: 1.5; }
  .demo-lead strong {
    display: block;
    font-size: clamp(21px, 6.2vw, 26px);
    white-space: nowrap;
    margin-bottom: 8px;
  }
}