:root {
  --ink: #0b0b0b;
  --paper: #f2efe6;
  --paper-2: #e9e4d8;
  --white: #fffdf7;
  --acid: #c9ff4a;
  --orange: #ff5b35;
  --blue: #4964ff;
  --muted: #78756f;
  --line: rgba(11, 11, 11, .18);
  --line-dark: rgba(255, 255, 255, .18);
  --radius: 22px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .12);
}

/* V31 — MotionChi workspace system: customer + admin */
.studio-mode,.admin-mode { background:#0d0d11; overflow-x:hidden; }
.workspace { --ws-red:#f12543; --ws-ink:#111116; --ws-soft:#f3f2f0; min-height:100vh; color:var(--ws-ink); background:#0d0d11; position:relative; isolation:isolate; font-family:Vazirmatn,Estedad,Tahoma,sans-serif; }
.workspace-admin { --ws-red:#ff3855; --ws-ink:#111116; }
.workspace-ambient { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(circle at 18% 20%,rgba(241,37,67,.16),transparent 27%),radial-gradient(circle at 88% 80%,rgba(255,255,255,.07),transparent 30%),#0d0d11; }
.workspace-ambient i { position:absolute; border:1px solid rgba(255,255,255,.06); border-radius:50%; animation:workspaceFloat 12s ease-in-out infinite; }
.workspace-ambient i:nth-child(1){width:320px;height:320px;right:-120px;top:12%}.workspace-ambient i:nth-child(2){width:180px;height:180px;left:8%;bottom:8%;animation-delay:-4s}.workspace-ambient i:nth-child(3){width:70px;height:70px;left:38%;top:8%;background:rgba(241,37,67,.1);border:0;filter:blur(1px);animation-delay:-8s}
.workspace-icon { width:21px;height:21px;display:block;flex:0 0 auto; }
.workspace-header { height:84px; margin:0 18px; padding:0 18px 0 10px; display:grid; grid-template-columns:220px 1fr 220px; align-items:center; gap:24px; color:white; border-bottom:1px solid rgba(255,255,255,.11); position:sticky; top:0; z-index:80; background:rgba(13,13,17,.72); backdrop-filter:blur(30px) saturate(145%); }
.workspace-header .motionchi-brand { justify-self:start; }
.workspace-tabs { justify-self:center; display:flex; align-items:center; gap:7px; padding:7px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(255,255,255,.05); }
.workspace-tabs button { min-height:42px; padding:0 15px; display:flex; align-items:center; gap:8px; border:0; border-radius:14px; color:rgba(255,255,255,.5); background:transparent; cursor:pointer; transition:.25s ease; }
.workspace-tabs button .workspace-icon { width:18px;height:18px; }
.workspace-tabs button span { font-size:12px;font-weight:700;white-space:nowrap; }
.workspace-tabs button:hover { color:white;background:rgba(255,255,255,.06); }
.workspace-tabs button.active { color:#111116;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25); }
.workspace-head-actions { justify-self:end;display:flex;align-items:center;gap:9px; }
.workspace-alert { width:43px;height:43px;display:grid;place-items:center;position:relative;border:1px solid rgba(255,255,255,.12);border-radius:15px;color:white;background:rgba(255,255,255,.06);cursor:pointer; }
.workspace-alert i { width:6px;height:6px;border-radius:50%;background:var(--ws-red);position:absolute;top:8px;right:8px;box-shadow:0 0 0 4px rgba(241,37,67,.14); }
.workspace-new { min-height:43px;padding:0 16px;display:flex;align-items:center;gap:8px;border:0;border-radius:15px;color:white;background:var(--ws-red);font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(241,37,67,.2); }
.workspace-new .workspace-icon { width:18px;height:18px; }
.admin-live { height:43px;padding:0 15px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.1);border-radius:15px;color:rgba(255,255,255,.72);font-size:11px;white-space:nowrap; }
.admin-live i,.workspace-date i { width:7px;height:7px;border-radius:50%;background:#4ee184;box-shadow:0 0 0 5px rgba(78,225,132,.12); }
.workspace-layout { width:min(1540px,calc(100% - 36px)); margin:18px auto 0; display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; align-items:start; }
.workspace-rail { min-height:calc(100vh - 120px);padding:18px;display:flex;flex-direction:column;position:sticky;top:102px;color:white;border:1px solid rgba(255,255,255,.1);border-radius:30px;background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.035));backdrop-filter:blur(28px);box-shadow:0 24px 80px rgba(0,0,0,.2);overflow:hidden; }
.workspace-rail::before { content:"";width:170px;height:170px;position:absolute;left:-70px;top:-80px;border-radius:50%;background:rgba(241,37,67,.2);filter:blur(35px); }
.rail-account { display:flex;align-items:center;gap:11px;position:relative;z-index:1;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1); }
.rail-avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:white;color:#111116;font-family:Arial,sans-serif;font-weight:900; }
.admin-account .rail-avatar { background:var(--ws-red);color:white; }
.rail-account strong,.rail-account small { display:block; }.rail-account strong { font-size:13px; }.rail-account small { margin-top:3px;color:rgba(255,255,255,.42);font-size:9px;direction:ltr;text-align:right; }
.rail-motion { min-height:245px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-radius:23px;background:radial-gradient(circle at 50% 30%,rgba(241,37,67,.28),transparent 53%),rgba(0,0,0,.2);overflow:hidden; }
.rail-motion>div { margin-top:18px;text-align:center; }.rail-motion small,.rail-motion strong { display:block; }.rail-motion small { color:rgba(255,255,255,.45);font-size:10px; }.rail-motion strong { margin-top:3px;font:900 38px/1 Arial,sans-serif; }
.rail-orbit { width:96px;height:96px;display:block;position:relative;border:1px solid rgba(255,255,255,.2);border-radius:50%;animation:workspaceSpin 11s linear infinite; }
.rail-orbit::before,.rail-orbit::after { content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.18);border-radius:50%; }.rail-orbit::after { inset:34px;background:var(--ws-red);border:0;box-shadow:0 0 35px rgba(241,37,67,.7); }
.rail-orbit i,.rail-orbit b,.rail-orbit em { width:11px;height:11px;position:absolute;border-radius:3px;background:white; }.rail-orbit i{right:4px;top:14px}.rail-orbit b{left:10px;bottom:7px;transform:rotate(40deg)}.rail-orbit em{right:26px;bottom:-5px;background:var(--ws-red)}
.admin-rail-motion .rail-orbit::after { border-radius:4px;transform:rotate(45deg); }
.rail-mini-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.rail-mini-stats span { padding:13px 8px;text-align:center;border:1px solid rgba(255,255,255,.09);border-radius:15px;color:rgba(255,255,255,.42);font-size:9px; }.rail-mini-stats b { display:block;margin-bottom:3px;color:white;font:700 18px Arial,sans-serif; }
.rail-footer { margin-top:auto;padding-top:18px;display:grid;gap:6px;border-top:1px solid rgba(255,255,255,.1); }.rail-footer button { min-height:44px;padding:0 11px;display:flex;align-items:center;gap:9px;border:0;border-radius:13px;color:rgba(255,255,255,.5);background:transparent;font-size:11px;cursor:pointer; }.rail-footer button:hover { color:white;background:rgba(255,255,255,.08); }
.rail-footer .workspace-icon { width:18px;height:18px; }
.workspace-main { min-width:0;min-height:calc(100vh - 120px);padding:30px;border-radius:32px 32px 0 0;background:linear-gradient(145deg,#f7f7f8,#ededef);box-shadow:0 25px 80px rgba(0,0,0,.18); }
.workspace-page-head { min-height:68px;margin-bottom:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px; }
.workspace-page-head span,.page-intro>div>span,.section-inline-head>div>span,.eyebrow,.admin-order-hero>div>span,.project-code { color:#8b8990;font:600 9px/1.2 Arial,sans-serif;letter-spacing:2px;direction:ltr; }
.workspace-page-head h1 { margin:7px 0 0;font-size:26px;line-height:1.2; }.workspace-date { display:flex;align-items:center;gap:9px;color:#77747b;font-size:11px; }
.customer-hero,.admin-hero { min-height:300px;padding:34px 40px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:30px;position:relative;border-radius:28px;background:#121217;color:white;overflow:hidden; }
.customer-hero::before,.admin-hero::before { content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 45%,rgba(241,37,67,.18)),radial-gradient(circle at 82% 30%,rgba(255,255,255,.11),transparent 35%);pointer-events:none; }
.customer-hero-copy,.admin-hero>div { position:relative;z-index:1; }.customer-hero h2,.admin-hero h2 { margin:12px 0 10px;font-size:clamp(34px,4vw,58px);line-height:1.25;letter-spacing:-1.8px; }.customer-hero h2 em,.admin-hero h2 em { color:var(--ws-red);font-style:normal; }.customer-hero p,.admin-hero p { max-width:500px;margin:0 0 20px;color:rgba(255,255,255,.55);font-size:12px;line-height:2; }
.soft-primary,.soft-ghost,.back-soft,.section-inline-head button,.client-card button { min-height:44px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:15px;font-weight:800;font-size:11px;cursor:pointer;transition:.2s ease; }
.soft-primary { color:white;background:var(--ws-red);box-shadow:0 10px 24px rgba(241,37,67,.18); }.soft-primary:hover { transform:translateY(-2px);box-shadow:0 14px 30px rgba(241,37,67,.25); }.soft-primary:disabled { opacity:.45;cursor:not-allowed;transform:none; }
.soft-primary .workspace-icon { width:18px;height:18px; }.soft-ghost,.back-soft,.section-inline-head button { color:#35333a;background:rgba(17,17,22,.06); }.soft-ghost:hover,.back-soft:hover,.section-inline-head button:hover { background:rgba(17,17,22,.1); }
.customer-hero-art,.pulse-visual { display:grid;place-items:center;position:relative;z-index:1; }
.hero-disc { width:210px;height:210px;display:grid;place-items:center;position:relative;border:1px solid rgba(255,255,255,.14);border-radius:50%;animation:workspaceSpin 18s linear infinite; }
.hero-disc::before,.hero-disc::after { content:"";position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.16); }.hero-disc::before{inset:24px}.hero-disc::after{inset:58px;border-style:solid;background:rgba(241,37,67,.1)}
.hero-disc i,.hero-disc b { position:absolute;background:var(--ws-red); }.hero-disc i{width:18px;height:18px;top:10px;right:42px;transform:rotate(45deg)}.hero-disc b{width:8px;height:8px;bottom:26px;left:20px;border-radius:50%}.hero-disc span{position:relative;z-index:1;text-align:center;color:white;font:700 18px/1.2 Arial,sans-serif;text-transform:uppercase;animation:workspaceSpin 18s linear infinite reverse}
.workspace-stats { margin:14px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }.workspace-stats article { min-height:104px;padding:18px;display:flex;align-items:center;gap:13px;position:relative;border:1px solid rgba(17,17,22,.07);border-radius:22px;background:rgba(255,255,255,.75);box-shadow:0 12px 34px rgba(17,17,22,.04); }.stat-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:16px; }.stat-icon.red { color:white;background:var(--ws-red); }.stat-icon.dark { color:white;background:#16161b; }.stat-icon.pale { color:var(--ws-red);background:#f8e5e9; }.stat-icon .workspace-icon { width:22px;height:22px; }.workspace-stats small,.workspace-stats strong { display:block; }.workspace-stats small { color:#88858d;font-size:10px; }.workspace-stats strong { margin-top:5px;font:800 26px Arial,Vazirmatn,sans-serif;direction:ltr;text-align:right; }.admin-stats article>em { margin-right:auto;padding:5px 9px;border-radius:999px;color:#168c4d;background:#e4f7eb;font-size:9px;font-style:normal; }
.focus-project,.recent-block,.detail-stage,.action-surface,.revision-card,.transaction-list,.admin-orders-panel,.pipeline-card,.admin-stage-control,.order-info-card,.order-action-card { padding:24px;border:1px solid rgba(17,17,22,.07);border-radius:26px;background:rgba(255,255,255,.78);box-shadow:0 12px 34px rgba(17,17,22,.035); }
.section-inline-head { margin-bottom:19px;display:flex;align-items:center;justify-content:space-between;gap:16px; }.section-inline-head h3 { margin:5px 0 0;font-size:19px; }.section-inline-head button { min-height:36px;padding-inline:13px;font-size:10px; }
.stage-track { display:grid;grid-template-columns:repeat(6,1fr);direction:rtl; }
.stage-track>div { position:relative;display:flex;flex-direction:column;gap:7px;color:#aaa8ae;font-size:9px; }
.stage-track>div::before { content:"";height:2px;position:absolute;top:16px;right:33px;left:0;background:#dddde0; }.stage-track>div:last-child::before { display:none; }
.stage-track i { width:34px;height:34px;display:grid;place-items:center;position:relative;z-index:1;border:1px solid #d2d1d5;border-radius:12px;background:#f4f4f5;color:#89878d;font:700 11px Arial,sans-serif;font-style:normal; }.stage-track .workspace-icon { width:16px;height:16px; }.stage-track .done i,.stage-track .current i { color:white;border-color:var(--ws-red);background:var(--ws-red); }.stage-track .done::before { background:var(--ws-red); }.stage-track .current i { box-shadow:0 0 0 6px rgba(241,37,67,.1); }.stage-track .done span,.stage-track .current span { color:#201f24;font-weight:800; }
.focus-meta { margin-top:20px;padding-top:16px;display:flex;align-items:center;gap:20px;border-top:1px solid rgba(17,17,22,.07);color:#77757b;font-size:10px; }.focus-meta span { display:flex;align-items:center;gap:6px; }.focus-meta .workspace-icon { width:16px;height:16px; }.focus-meta strong { margin-right:auto;padding:6px 10px;border-radius:999px;color:#a21d31;background:#fde7ea;font-size:9px; }
.recent-block { margin-top:14px; }.project-card-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.project-archive { grid-template-columns:repeat(3,minmax(0,1fr)); }
.customer-project-card { min-width:0;padding:12px;border:1px solid rgba(17,17,22,.08);border-radius:22px;background:#fff;cursor:pointer;transition:.25s ease; }.customer-project-card:hover { transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,17,22,.1); }.project-card-top,.project-card-foot { display:flex;align-items:center;justify-content:space-between;gap:8px; }.project-card-top { padding:3px 4px 10px; }.project-stage { color:#8b8990;font-size:9px; }.project-card-visual { height:126px;position:relative;border-radius:17px;background:#17171c;overflow:hidden; }.project-card-visual::before { content:"";width:72px;height:72px;position:absolute;right:50%;top:50%;transform:translate(50%,-50%);border:1px solid rgba(255,255,255,.22);border-radius:50%;animation:workspacePulse 3s ease-in-out infinite; }.project-card-visual i,.project-card-visual b,.project-card-visual em { position:absolute;background:var(--ws-red); }.project-card-visual i{width:24px;height:24px;right:30%;top:24%;transform:rotate(45deg)}.project-card-visual b{width:9px;height:9px;left:22%;bottom:20%;border-radius:50%}.project-card-visual em{width:46px;height:3px;right:22%;bottom:20%}.visual-4,.visual-6{background:#ef233c}.visual-4 i,.visual-4 b,.visual-4 em,.visual-6 i,.visual-6 b,.visual-6 em{background:white}.visual-5{background:#ede8de}.visual-5::before{border-color:#111}.visual-5 i,.visual-5 b,.visual-5 em{background:#111}
.customer-project-card h4 { margin:14px 4px 3px;font-size:14px; }.customer-project-card p { margin:0 4px 13px;color:#8a878e;font-size:9px; }.project-card-foot { padding:10px 4px 3px;border-top:1px solid #eeeeef;color:#55535a;font-size:9px;font-weight:700; }.project-card-foot .workspace-icon { width:16px;height:16px;transform:rotate(180deg); }
.page-intro { min-height:120px;margin-bottom:16px;padding:12px 3px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(17,17,22,.08); }.page-intro h2 { margin:8px 0 6px;font-size:clamp(32px,4vw,50px);line-height:1.2; }.page-intro p { margin:0;color:#7b7880;font-size:12px; }.project-filter { margin:14px 0 18px;display:flex;gap:7px;overflow:auto;scrollbar-width:none; }.project-filter::-webkit-scrollbar{display:none}.project-filter button { min-height:38px;padding:0 14px;border:1px solid rgba(17,17,22,.09);border-radius:13px;background:rgba(255,255,255,.7);color:#77747c;font-size:10px;white-space:nowrap;cursor:pointer; }.project-filter button.active { color:white;border-color:#17171c;background:#17171c; }.project-filter b { margin-right:5px;font-family:Arial,sans-serif; }
.empty-state-v2 { grid-column:1/-1;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(17,17,22,.15);border-radius:26px;background:rgba(255,255,255,.5); }.empty-state-v2>span { width:62px;height:62px;display:grid;place-items:center;border-radius:20px;color:white;background:#17171c; }.empty-state-v2 h3 { margin:17px 0 5px;font-size:20px; }.empty-state-v2 p { margin:0 0 18px;color:#88858c;font-size:11px; }.empty-mini { padding:35px;text-align:center;color:#88858c;font-size:11px; }
.finance-overview { display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:14px; }.balance-card,.invoice-card,.finance-chart { min-height:220px;padding:26px;position:relative;border-radius:27px;overflow:hidden; }.balance-card { color:white;background:#15151a; }.balance-card>span,.balance-card>strong,.balance-card>small { display:block;position:relative;z-index:1; }.balance-card>span { color:rgba(255,255,255,.46);font-size:10px; }.balance-card>strong { margin-top:15px;font:800 clamp(29px,4vw,48px) Arial,Vazirmatn,sans-serif;direction:ltr;text-align:right; }.balance-card>small { position:absolute;right:26px;bottom:24px;color:rgba(255,255,255,.5);font-size:9px; }.balance-motion { width:180px;height:180px;position:absolute;left:-30px;bottom:-60px;border:1px solid rgba(255,255,255,.12);border-radius:50%; }.balance-motion::before,.balance-motion::after { content:"";position:absolute;border-radius:50%; }.balance-motion::before{inset:25px;border:1px dashed rgba(255,255,255,.14)}.balance-motion::after{inset:64px;background:var(--ws-red);box-shadow:0 0 35px rgba(241,37,67,.45)}.balance-motion i,.balance-motion b{width:13px;height:13px;position:absolute;background:white;transform:rotate(45deg)}.balance-motion i{right:22px;top:22px}.balance-motion b{left:20px;bottom:45px;background:var(--ws-red)}
.invoice-card { display:flex;align-items:flex-start;gap:16px;border:1px solid rgba(17,17,22,.07);background:rgba(255,255,255,.78); }.invoice-card small,.invoice-card strong { display:block; }.invoice-card small{color:#88858d;font-size:10px}.invoice-card strong{margin:8px 0;font-size:26px}.invoice-card p{max-width:240px;color:#89868d;font-size:10px;line-height:1.8}
.transaction-list { padding:0;overflow:hidden; }.transaction-list>.section-inline-head{padding:23px 24px 4px}.transaction-row { min-height:74px;padding:12px 24px;display:grid;grid-template-columns:42px 1fr auto 52px;align-items:center;gap:13px;border-top:1px solid rgba(17,17,22,.07); }.transaction-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:#248c50;background:#e4f7eb; }.transaction-icon .workspace-icon{width:18px;height:18px}.transaction-row strong,.transaction-row small{display:block}.transaction-row strong{font-size:12px}.transaction-row small{margin-top:3px;color:#908d94;font-size:9px}.transaction-row>b{font:700 13px Arial,Vazirmatn,sans-serif;direction:ltr}.transaction-row em{padding:5px 8px;border-radius:999px;color:#248c50;background:#e4f7eb;font-size:8px;font-style:normal;text-align:center}
.notification-list { display:grid;gap:9px; }.notification-card { min-height:100px;padding:18px;display:grid;grid-template-columns:48px 1fr 8px;align-items:center;gap:14px;border:1px solid rgba(17,17,22,.07);border-radius:21px;background:rgba(255,255,255,.74); }.notification-card.unread { border-color:rgba(241,37,67,.2);background:#fff7f8; }.notification-icon { width:46px;height:46px;display:grid;place-items:center;border-radius:15px;color:#77747b;background:#efeff1; }.notification-card.unread .notification-icon{color:white;background:var(--ws-red)}.notification-icon .workspace-icon{width:20px;height:20px}.notification-card strong,.notification-card small{display:block}.notification-card strong{font-size:13px}.notification-card p{margin:5px 0;color:#747179;font-size:10px;line-height:1.8}.notification-card small{color:#9b989f;font-size:8px}.notification-card>i{width:7px;height:7px;border-radius:50%;background:transparent}.notification-card.unread>i{background:var(--ws-red);box-shadow:0 0 0 5px rgba(241,37,67,.1)}
.back-soft { margin-bottom:14px; }.back-soft .workspace-icon { width:17px;height:17px;transform:rotate(180deg); }
.project-detail-hero,.admin-order-hero { min-height:220px;padding:30px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;border-radius:28px;color:white;background:#15151a;overflow:hidden; }.project-detail-hero h2,.admin-order-hero h2 { margin:11px 0 5px;font-size:clamp(28px,4vw,44px); }.project-detail-hero p,.admin-order-hero p { margin:0;color:rgba(255,255,255,.5);font-size:11px; }.project-price,.admin-order-hero>div:last-child { position:relative;z-index:1;text-align:left; }.project-price small,.project-price strong,.admin-order-hero>div:last-child small,.admin-order-hero>div:last-child strong{display:block}.project-price small,.admin-order-hero>div:last-child small{color:rgba(255,255,255,.45);font-size:9px}.project-price strong,.admin-order-hero>div:last-child strong{margin-top:7px;font:800 20px Arial,Vazirmatn,sans-serif;direction:ltr}.detail-motion{width:230px;height:230px;position:absolute;left:30%;top:-95px;border:1px solid rgba(255,255,255,.1);border-radius:50%;animation:workspaceSpin 16s linear infinite}.detail-motion::before,.detail-motion::after{content:"";position:absolute;inset:35px;border:1px dashed rgba(255,255,255,.14);border-radius:50%}.detail-motion::after{inset:86px;border:0;background:var(--ws-red)}.detail-motion i,.detail-motion b,.detail-motion em{position:absolute;width:15px;height:15px;background:white}.detail-motion i{right:30px;top:25px;transform:rotate(45deg)}.detail-motion b{left:33px;bottom:18px;border-radius:50%;background:var(--ws-red)}.detail-motion em{right:72px;bottom:-5px;width:7px;height:7px}
.detail-stage { margin:14px 0; }.detail-stage .section-inline-head>strong { padding:7px 11px;border-radius:999px;color:#9c2134;background:#fee6ea;font-size:9px; }.detail-grid,.admin-order-grid { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:14px; }.soft-status { width:fit-content;padding:6px 10px;border-radius:999px;color:#a42136;background:#fde5e9;font-size:9px;font-weight:800; }
.project-preview-v2 { min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:21px;background:#17171c;color:white;text-align:center; }.project-preview-v2 p { max-width:420px;margin:20px 20px 0;color:rgba(255,255,255,.47);font-size:10px;line-height:1.8; }.preview-orbit { width:110px;height:110px;display:grid;place-items:center;position:relative;border:1px solid rgba(255,255,255,.15);border-radius:50%;animation:workspaceSpin 9s linear infinite; }.preview-orbit::before{content:"";position:absolute;inset:17px;border:1px dashed rgba(255,255,255,.18);border-radius:50%}.preview-orbit i,.preview-orbit b,.preview-orbit em{position:absolute;background:var(--ws-red)}.preview-orbit i{width:15px;height:15px;right:10px;top:8px;transform:rotate(45deg)}.preview-orbit b{width:8px;height:8px;left:8px;bottom:17px;border-radius:50%}.preview-orbit em{inset:41px;border-radius:50%}.preview-orbit span{position:relative;z-index:1;font:700 8px Arial,sans-serif;letter-spacing:1px;animation:workspaceSpin 9s linear infinite reverse}.detail-actions{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}.revision-card>span,.order-info-card>span,.order-action-card>span{color:#96939a;font:600 9px Arial,sans-serif;letter-spacing:1.5px}.revision-card h3,.order-info-card h3,.order-action-card h3{margin:7px 0 20px;font-size:20px}.revision-item{padding:16px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(17,17,22,.07)}.revision-item strong,.revision-item small{display:block}.revision-item strong{font-size:12px}.revision-item small{margin-top:3px;color:#918e95;font-size:9px}.revision-dots{display:flex;gap:5px}.revision-dots i{width:9px;height:9px;border:1px solid var(--ws-red);border-radius:50%}.expert-chip{margin-top:16px;padding:13px;display:flex;align-items:center;gap:10px;border-radius:16px;color:white;background:#17171c}.expert-chip>span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--ws-red)}.expert-chip .workspace-icon{width:18px;height:18px}.expert-chip strong,.expert-chip small{display:block}.expert-chip strong{font-size:11px}.expert-chip small{margin-top:2px;color:rgba(255,255,255,.45);font-size:8px}
.workspace-mobile-nav { display:none; }

/* Admin */
.admin-hero { min-height:270px; }.pulse-visual { width:210px;height:210px;justify-self:center;border:1px solid rgba(255,255,255,.12);border-radius:50%; }.pulse-visual::before,.pulse-visual::after{content:"";position:absolute;border-radius:50%}.pulse-visual::before{inset:25px;border:1px dashed rgba(255,255,255,.17);animation:workspaceSpin 12s linear infinite}.pulse-visual::after{inset:69px;background:var(--ws-red);box-shadow:0 0 45px rgba(241,37,67,.45)}.pulse-visual i,.pulse-visual b,.pulse-visual em{position:absolute;width:13px;height:13px;background:white}.pulse-visual i{right:17px;top:40px;transform:rotate(45deg)}.pulse-visual b{left:22px;bottom:31px;border-radius:50%;background:var(--ws-red)}.pulse-visual em{right:78px;bottom:-5px;width:8px;height:8px}.pulse-visual span{position:relative;z-index:1;color:white;font:800 20px Arial,sans-serif}
.admin-dashboard-grid { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:14px; }.admin-orders-panel { padding:0;overflow:hidden; }.admin-orders-panel>.section-inline-head{padding:23px 23px 4px}.admin-order-row { min-height:82px;padding:12px 20px;display:grid;grid-template-columns:43px minmax(150px,1.1fr) minmax(120px,.8fr) auto auto 20px;align-items:center;gap:12px;border-top:1px solid rgba(17,17,22,.07);cursor:pointer;transition:.2s ease; }.admin-order-row:hover{background:#f8f7f8}.order-avatar{width:41px;height:41px;display:grid;place-items:center;border-radius:14px;color:white;background:#17171c;font-weight:900}.order-main strong,.order-main small{display:block}.order-main strong{font-size:12px}.order-main small{margin-top:3px;color:#929097;font-size:8px}.order-progress i{height:4px;display:block;border-radius:999px;background:#e4e3e6;overflow:hidden}.order-progress i b{height:100%;display:block;border-radius:999px;background:var(--ws-red)}.order-progress span{display:block;margin-top:6px;color:#908d94;font-size:8px}.order-price{font:700 11px Arial,Vazirmatn,sans-serif;direction:ltr}.admin-order-row>.workspace-icon{width:16px;height:16px;transform:rotate(180deg);color:#a3a0a6}.pipeline-card>span{color:#99969d;font:600 9px Arial,sans-serif;letter-spacing:2px}.pipeline-card h3{margin:7px 0 22px}.pipeline-line{margin-bottom:18px}.pipeline-line>div{display:flex;justify-content:space-between;margin-bottom:7px;font-size:10px}.pipeline-line>div b{font-family:Arial,sans-serif}.pipeline-line>i{height:6px;display:block;border-radius:999px;background:#e6e5e8;overflow:hidden}.pipeline-line>i em{height:100%;display:block;border-radius:999px;background:var(--ws-red)}.pipeline-card .soft-primary{width:100%;margin-top:6px}.orders-page{border-radius:27px}.admin-filter button.active{background:var(--ws-red);border-color:var(--ws-red)}
.client-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px; }.client-card { padding:22px;border:1px solid rgba(17,17,22,.07);border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 12px 32px rgba(17,17,22,.035); }.client-top{display:flex;align-items:flex-start;justify-content:space-between}.client-top>span{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;color:white;background:#17171c;font-size:18px;font-weight:900}.client-top>i{width:8px;height:8px;border-radius:50%;background:#d1d0d4}.client-top>i.online{background:#43d479;box-shadow:0 0 0 5px rgba(67,212,121,.12)}.client-card h3{margin:17px 0 2px;font-size:17px}.client-card>p{margin:0;color:#908e94;font:10px Arial,sans-serif;direction:ltr;text-align:right}.client-card>div:nth-of-type(2){margin:19px 0;padding:14px 0;display:grid;grid-template-columns:1fr 1fr;border-block:1px solid rgba(17,17,22,.07)}.client-card>div:nth-of-type(2) span{color:#918e95;font-size:9px}.client-card>div:nth-of-type(2) b{display:block;margin-bottom:4px;color:#17171c;font:700 13px Arial,Vazirmatn,sans-serif;direction:ltr;text-align:right}.client-card button{width:100%;background:#efeff1}.finance-chart{border:1px solid rgba(17,17,22,.07);background:rgba(255,255,255,.78)}.bar-chart{height:125px;display:flex;align-items:flex-end;gap:9px}.bar-chart i{height:var(--h);flex:1;position:relative;border-radius:7px 7px 3px 3px;background:linear-gradient(to top,var(--ws-red),#ff8ca0)}.bar-chart i b{position:absolute;right:50%;bottom:-20px;transform:translateX(50%);color:#8f8c93;font:8px Vazirmatn,sans-serif;font-style:normal}.admin-order-hero{min-height:190px;background:linear-gradient(120deg,#17171c 0 65%,#25242b 65%)}.admin-stage-control{margin:14px 0}.admin-stage-control>.section-inline-head>b{font:700 10px Arial,Vazirmatn,sans-serif}.admin-stage-wheel{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.admin-stage-wheel button{min-height:92px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(17,17,22,.08);border-radius:17px;background:#f5f4f6;color:#98959c;font-size:9px;cursor:pointer}.admin-stage-wheel button i{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:white;font:700 10px Arial,sans-serif;font-style:normal}.admin-stage-wheel button .workspace-icon{width:15px;height:15px}.admin-stage-wheel button.done{color:#3d3a41}.admin-stage-wheel button.done i{color:white;background:#17171c}.admin-stage-wheel button.active{color:white;border-color:var(--ws-red);background:var(--ws-red);box-shadow:0 10px 24px rgba(241,37,67,.18)}.admin-stage-wheel button.active i{color:var(--ws-red);background:white}.admin-stage-control>p{margin:13px 0 0;color:#96939a;font-size:9px}.order-info-card,.order-action-card{min-height:230px}.order-info-card dl{margin:0}.order-info-card dl>div{padding:12px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(17,17,22,.07)}.order-info-card dt{color:#8d8a91;font-size:10px}.order-info-card dd{margin:0;font-size:11px;font-weight:800}.order-action-card{color:white;background:#17171c}.order-action-card>span{color:rgba(255,255,255,.4)}.order-action-card p{max-width:420px;color:rgba(255,255,255,.5);font-size:10px;line-height:1.9}.order-action-card .soft-primary{margin-top:20px}

@keyframes workspaceSpin { to { transform:rotate(360deg); } }
@keyframes workspaceFloat { 50% { transform:translateY(-22px) scale(1.04); } }
@keyframes workspacePulse { 50% { transform:translate(50%,-50%) scale(.74);opacity:.45; } }

@media (max-width:1180px){
  .workspace-header{grid-template-columns:180px 1fr 170px}.workspace-tabs button{padding-inline:11px}.workspace-layout{grid-template-columns:190px minmax(0,1fr)}.workspace-rail{padding:13px}.workspace-main{padding:24px}.admin-order-row{grid-template-columns:40px 1fr minmax(110px,.7fr) auto 18px}.admin-order-row>.soft-status{display:none}.project-card-grid,.project-archive{grid-template-columns:repeat(2,minmax(0,1fr))}.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .workspace-header{grid-template-columns:1fr auto;margin:0 12px}.workspace-header .motionchi-brand{justify-self:start}.workspace-tabs{display:none}.workspace-head-actions{grid-column:2}.workspace-layout{width:calc(100% - 24px);grid-template-columns:1fr}.workspace-rail{display:none}.workspace-main{min-height:calc(100vh - 102px);padding:20px;border-radius:27px 27px 0 0}.workspace-page-head{min-height:54px}.workspace-page-head h1{font-size:23px}.workspace-date{display:none}.workspace-mobile-nav{height:70px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);position:fixed;right:10px;left:10px;bottom:8px;z-index:100;border:1px solid rgba(255,255,255,.13);border-radius:22px;color:white;background:rgba(17,17,22,.9);backdrop-filter:blur(28px);box-shadow:0 18px 50px rgba(0,0,0,.3)}.workspace-mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:14px;color:rgba(255,255,255,.42);background:transparent;font-size:8px}.workspace-mobile-nav .workspace-icon{width:18px;height:18px}.workspace-mobile-nav button.active{color:white;background:rgba(255,255,255,.1)}.workspace-mobile-nav .mobile-new{color:white;background:var(--ws-red)}.admin-mobile-nav{grid-template-columns:repeat(4,1fr)}.customer-hero,.admin-hero{grid-template-columns:1fr .7fr}.customer-hero h2,.admin-hero h2{font-size:40px}.admin-dashboard-grid,.detail-grid,.admin-order-grid{grid-template-columns:1fr}.pipeline-card,.revision-card{min-height:0}.admin-order-row{grid-template-columns:40px 1fr auto 18px}.admin-order-row .order-progress,.admin-order-row .order-price{display:none}.admin-stage-wheel{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:620px){
  .workspace-header{height:70px;padding:0 4px 0 0}.workspace-header .motionchi-word{font-size:17px}.workspace-head-actions .workspace-alert,.admin-live{display:none}.workspace-new{min-height:39px;padding-inline:12px;border-radius:13px}.workspace-new span{font-size:10px}.workspace-layout{width:calc(100% - 16px);margin-top:8px}.workspace-main{padding:15px 12px 95px;border-radius:23px 23px 0 0}.workspace-page-head{margin-bottom:13px}.workspace-page-head>div>span{font-size:7px}.workspace-page-head h1{font-size:20px}.customer-hero,.admin-hero{min-height:350px;padding:26px 22px;grid-template-columns:1fr}.customer-hero-art,.pulse-visual{position:absolute;left:-44px;bottom:-64px;opacity:.72}.hero-disc,.pulse-visual{width:180px;height:180px}.customer-hero h2,.admin-hero h2{font-size:38px}.customer-hero p,.admin-hero p{max-width:270px;font-size:11px}.workspace-stats{grid-template-columns:1fr 1fr}.workspace-stats article{min-height:90px;padding:13px}.workspace-stats article:nth-child(3){grid-column:1/-1}.stat-icon{width:42px;height:42px;border-radius:14px}.workspace-stats strong{font-size:22px}.focus-project,.recent-block,.detail-stage,.action-surface,.revision-card,.transaction-list,.admin-orders-panel,.pipeline-card,.admin-stage-control,.order-info-card,.order-action-card{padding:17px;border-radius:21px}.stage-track{overflow-x:auto;grid-template-columns:repeat(6,78px);padding:7px 0 5px;scrollbar-width:none}.stage-track::-webkit-scrollbar{display:none}.focus-meta{align-items:flex-start;flex-direction:column;gap:8px}.focus-meta strong{margin-right:0}.project-card-grid,.project-archive{grid-template-columns:1fr}.page-intro{min-height:110px;align-items:flex-start;flex-direction:column}.page-intro h2{font-size:35px}.finance-overview,.admin-finance-overview{grid-template-columns:1fr}.balance-card,.invoice-card,.finance-chart{min-height:200px;padding:21px}.transaction-row{padding:11px 13px;grid-template-columns:40px 1fr auto}.transaction-row em{display:none}.transaction-row>b{font-size:10px}.notification-card{padding:13px;grid-template-columns:42px 1fr 6px}.notification-icon{width:40px;height:40px}.project-detail-hero,.admin-order-hero{min-height:270px;padding:22px;align-items:flex-start;flex-direction:column;justify-content:flex-end}.project-price,.admin-order-hero>div:last-child{text-align:right}.detail-motion{left:-40px;top:-60px}.project-preview-v2{min-height:230px}.detail-actions{justify-content:stretch}.detail-actions button{flex:1}.admin-order-row{min-height:74px;padding:10px 12px;grid-template-columns:38px 1fr 16px}.order-avatar{width:37px;height:37px;border-radius:12px}.client-grid{grid-template-columns:1fr}.admin-stage-wheel{grid-template-columns:repeat(2,1fr)}.admin-stage-wheel button{min-height:82px}.admin-orders-panel>.section-inline-head{padding:17px 17px 2px}.orders-page{padding:0}.workspace-mobile-nav{right:7px;left:7px;bottom:6px;height:64px;border-radius:19px}.workspace-mobile-nav button{border-radius:12px}.toast{right:12px;left:12px;bottom:82px;text-align:center}
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; }

.container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.ltr { direction: ltr; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(242, 239, 230, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 850; letter-spacing: -.5px; font-size: 20px; }
.brand-mark { width: 34px; height: 34px; position: relative; display: grid; place-items: center; background: var(--ink); border-radius: 50%; overflow: hidden; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--acid); }
.brand-mark::before { transform: translate(-7px, -3px); }
.brand-mark::after { transform: translate(7px, 3px); background: var(--orange); mix-blend-mode: screen; }
.header-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.header-nav a { position: relative; }
.header-nav a::after { content: ""; position: absolute; right: 0; left: 100%; bottom: -7px; height: 2px; background: var(--ink); transition: .25s ease; }
.header-nav a:hover::after { left: 0; }
.header-actions { display: flex; align-items: center; gap: 9px; }

.btn { border: 1px solid var(--ink); background: transparent; padding: 11px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: var(--white); box-shadow: 0 8px 0 rgba(11,11,11,.14); }
.btn-dark:hover { background: #222; }
.btn-light { border-color: rgba(255,255,255,.72); color: var(--white); }
.btn-acid { background: var(--acid); color: var(--ink); border-color: var(--acid); box-shadow: 0 8px 0 rgba(201,255,74,.18); }
.btn-orange { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-ghost { border-color: var(--line); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 24px; font-size: 15px; }
.btn-sm { padding: 8px 13px; font-size: 12px; }
.arrow { font-size: 19px; line-height: 1; transform: translateY(-1px); }

.hero { min-height: calc(100vh - 78px); display: grid; align-items: center; padding: 68px 0 54px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 54px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 750; margin-bottom: 24px; background: rgba(255,255,255,.34); }
.eyebrow-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,91,53,.12); animation: pulse 2s infinite; }
.hero h1 { margin: 0; font-size: clamp(52px, 7.2vw, 105px); line-height: .96; letter-spacing: -5px; font-weight: 900; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero-copy { font-size: 18px; line-height: 2; max-width: 620px; margin: 27px 0; color: #4d4b47; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; display: flex; gap: 18px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.hero-note span::before { content: "✓"; color: #14803b; margin-left: 6px; font-weight: 900; }

.motion-stage { aspect-ratio: 1/1; background: var(--ink); color: white; border-radius: 34px 34px 140px 34px; position: relative; overflow: hidden; box-shadow: var(--shadow); isolation: isolate; }
.stage-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 64px 64px; opacity: .36; }
.stage-orbit { position: absolute; width: 63%; height: 63%; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; top: 15%; right: 18%; animation: spin 16s linear infinite; }
.stage-orbit::before, .stage-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.stage-orbit::before { width: 64px; height: 64px; background: var(--acid); right: 16%; top: -31px; }
.stage-orbit::after { width: 34px; height: 34px; background: var(--orange); left: -16px; bottom: 20%; }
.stage-copy { position: absolute; z-index: 2; right: 10%; top: 33%; }
.stage-copy small { display: block; direction: ltr; text-align: right; font-size: 12px; letter-spacing: 3px; opacity: .62; }
.stage-word { font-weight: 900; font-size: clamp(56px, 7vw, 100px); letter-spacing: -6px; line-height: .9; animation: wordShift 4s cubic-bezier(.76,0,.24,1) infinite; }
.stage-caption { position: absolute; right: 10%; bottom: 12%; left: 10%; display: flex; justify-content: space-between; align-items: end; border-top: 1px solid rgba(255,255,255,.35); padding-top: 12px; font-size: 12px; }
.stage-wave { display: flex; align-items: center; gap: 4px; height: 25px; }
.stage-wave i { display: block; width: 3px; background: var(--acid); border-radius: 5px; animation: wave 1.1s ease-in-out infinite; }
.stage-wave i:nth-child(2) { animation-delay: .12s; }.stage-wave i:nth-child(3) { animation-delay: .25s; }.stage-wave i:nth-child(4) { animation-delay: .38s; }.stage-wave i:nth-child(5) { animation-delay: .51s; }

.ticker { border-block: 1px solid var(--line); overflow: hidden; background: var(--acid); }
.ticker-track { display: flex; width: max-content; gap: 34px; padding: 14px 0; font-weight: 900; animation: marquee 22s linear infinite; direction: ltr; }
.ticker-track span { direction: rtl; display: inline-flex; align-items: center; gap: 34px; }
.ticker-track span::after { content: "✦"; font-size: 13px; }

.section { padding: 118px 0; }
.section-dark { background: var(--ink); color: var(--white); }
.section-orange { background: var(--orange); color: var(--white); }
.section-head { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 40px; margin-bottom: 48px; }
.section-kicker { font-size: 12px; font-weight: 800; letter-spacing: 1px; margin-bottom: 16px; display: flex; gap: 9px; align-items: center; }
.section-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.section-title { font-size: clamp(38px, 5.6vw, 78px); line-height: 1.05; letter-spacing: -3px; margin: 0; font-weight: 900; }
.section-desc { margin: 0; line-height: 2; color: var(--muted); font-size: 16px; }
.section-dark .section-desc { color: rgba(255,255,255,.62); }

.samples-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.filter { white-space: nowrap; border: 1px solid var(--line-dark); color: rgba(255,255,255,.7); background: transparent; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.filter.active { background: var(--white); color: var(--ink); }
.sample-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.sample-card { grid-column: span 4; min-height: 390px; border: 1px solid var(--line-dark); border-radius: 20px; overflow: hidden; position: relative; background: #161616; cursor: pointer; transition: transform .3s ease; }
.sample-card:hover { transform: translateY(-8px); }
.sample-card.wide { grid-column: span 8; }
.sample-visual { height: 285px; position: relative; overflow: hidden; display: grid; place-items: center; }
.sample-info { padding: 17px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sample-info h3 { margin: 0 0 3px; font-size: 16px; }
.sample-info p { margin: 0; font-size: 12px; color: rgba(255,255,255,.5); }
.sample-play { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; transition: .2s; }
.sample-card:hover .sample-play { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.visual-type { background: var(--blue); }
.visual-type .kinetic { font-size: clamp(48px, 7vw, 96px); font-weight: 950; letter-spacing: -7px; transform: rotate(-6deg); animation: kinetic 3s ease-in-out infinite; }
.visual-ui { background: #efece2; color: var(--ink); }
.ui-window { width: 72%; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 12px 12px 0 var(--orange); animation: float 3.3s ease-in-out infinite; }
.ui-top { height: 34px; border-bottom: 2px solid var(--ink); display: flex; gap: 5px; align-items: center; padding: 0 10px; }
.ui-top i { width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.ui-body { padding: 18px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.ui-box { height: 76px; border: 2px solid var(--ink); background: var(--acid); }
.ui-lines { display: grid; gap: 8px; align-content: center; }.ui-lines i { height: 7px; background: var(--ink); display: block; }.ui-lines i:nth-child(2) { width: 70%; }
.visual-data { background: var(--acid); color: var(--ink); }
.data-bars { width: 70%; height: 62%; display: flex; align-items: end; gap: 9px; border-bottom: 3px solid var(--ink); padding-inline: 10px; }
.data-bars i { flex: 1; background: var(--ink); animation: bars 2.6s ease-in-out infinite alternate; }.data-bars i:nth-child(1) { height: 28%; }.data-bars i:nth-child(2) { height: 62%; animation-delay: .2s; }.data-bars i:nth-child(3) { height: 45%; animation-delay: .4s; }.data-bars i:nth-child(4) { height: 86%; animation-delay: .6s; }.data-bars i:nth-child(5) { height: 70%; animation-delay: .8s; }
.visual-paper { background: #e6d3b6; }
.paper-shape { position: absolute; border: 2px solid var(--ink); }
.paper-shape.one { width: 42%; height: 58%; background: var(--orange); transform: rotate(9deg); animation: paperOne 4s ease-in-out infinite; }
.paper-shape.two { width: 38%; height: 38%; background: var(--blue); border-radius: 50%; transform: translate(-50px, 40px); animation: paperTwo 4s ease-in-out infinite; }
.paper-label { z-index: 3; background: var(--white); color: var(--ink); padding: 8px 16px; transform: rotate(-7deg); font-weight: 900; font-size: 28px; border: 2px solid var(--ink); }
.visual-orbit { background: #151515; }
.orb { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 2%, var(--orange) 10%, #3b0d05 70%); box-shadow: 0 0 50px rgba(255,91,53,.45); animation: orb 4s ease-in-out infinite; }
.orb-ring { position: absolute; width: 210px; height: 80px; border: 3px solid var(--acid); border-radius: 50%; transform: rotate(-18deg); animation: spin 8s linear infinite; }
.visual-logo { background: var(--orange); }
.logo-morph { width: 116px; height: 116px; background: var(--ink); border-radius: 50% 50% 8% 50%; animation: morph 4s ease-in-out infinite; }

.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step { min-height: 280px; padding: 26px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; transition: background .25s, color .25s; }
.process-step:last-child { border-left: 0; }
.process-step:hover { background: var(--ink); color: white; }
.process-num { font-size: 12px; font-weight: 850; }
.process-icon { font-size: 50px; font-weight: 200; line-height: 1; }
.process-step h3 { font-size: 20px; margin: 0 0 8px; }
.process-step p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.process-step:hover p { color: rgba(255,255,255,.6); }

.calc-shell { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--white); color: var(--ink); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.calc-form { padding: 46px; }
.calc-form h3, .calc-result h3 { font-size: 30px; margin: 0 0 10px; }
.field { margin-top: 22px; }
.field label, .field-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; margin-bottom: 9px; }
.field textarea, .field input[type="text"], .field input[type="email"], .field select { width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; padding: 14px; color: var(--ink); outline: none; transition: border .2s, box-shadow .2s; }
.field textarea:focus, .field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(73,100,255,.12); }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.9; }
.range { width: 100%; accent-color: var(--orange); }
.switch-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 16px 0; }
.switch { width: 48px; height: 27px; background: #c8c5bd; border-radius: 999px; position: relative; cursor: pointer; flex: none; transition: .2s; }
.switch::after { content: ""; position: absolute; width: 21px; height: 21px; top: 3px; right: 3px; border-radius: 50%; background: white; transition: .2s; }
.switch.on { background: var(--blue); }.switch.on::after { right: 24px; }
.calc-result { padding: 46px; background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; }
.metric-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); margin: 28px 0; }
.metric { background: var(--ink); padding: 20px; }.metric small { color: rgba(255,255,255,.48); display: block; margin-bottom: 8px; }.metric strong { font-size: 26px; }
.price-big { font-size: clamp(38px, 5vw, 66px); font-weight: 950; letter-spacing: -3px; line-height: 1; margin-bottom: 8px; }
.price-note { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.8; }

.revision-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.revision-card { border: 1px solid var(--line-dark); border-radius: 18px; padding: 22px; }
.revision-card strong { display: block; font-size: 44px; line-height: 1; color: var(--acid); margin-bottom: 8px; }

.testimonial-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.testimonial-intro { background: var(--blue); color: white; border-radius: 22px; padding: 34px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; }
.testimonial-intro h3 { font-size: 38px; line-height: 1.2; margin: 0; }
.demo-badge { border: 1px solid rgba(255,255,255,.5); padding: 5px 10px; border-radius: 999px; width: fit-content; font-size: 11px; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote { border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; min-height: 172px; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.22); }
.quote p { margin: 0; font-size: 16px; line-height: 1.9; }
.quote small { color: var(--muted); }

.faq-list { border-top: 1px solid var(--line-dark); }
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-q { width: 100%; background: transparent; color: white; border: 0; padding: 24px 0; text-align: right; display: flex; justify-content: space-between; cursor: pointer; font-size: 18px; font-weight: 800; }
.faq-a { max-height: 0; overflow: hidden; color: rgba(255,255,255,.6); line-height: 2; transition: .35s ease; width: min(720px, 100%); }
.faq-item.open .faq-a { max-height: 180px; padding-bottom: 24px; }
.faq-plus { transition: transform .25s; }.faq-item.open .faq-plus { transform: rotate(45deg); }

.footer { background: var(--ink); color: var(--white); border-top: 1px solid var(--line-dark); padding: 50px 0 24px; }
.footer-top { display: grid; grid-template-columns: 1.4fr .6fr .6fr; gap: 40px; }
.footer-title { font-size: clamp(42px, 7vw, 96px); font-weight: 950; letter-spacing: -5px; line-height: 1; margin: 16px 0 32px; }
.footer-col h4 { margin: 0 0 15px; font-size: 12px; color: rgba(255,255,255,.45); }.footer-col a { display: block; margin: 10px 0; font-size: 14px; }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 45px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.4); font-size: 11px; }

/* Studio */
.studio { min-height: 100vh; background: #f4f2ec; display: grid; grid-template-columns: 260px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--ink); color: white; padding: 26px 18px; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 8px 25px; border-bottom: 1px solid var(--line-dark); }
.side-nav { margin-top: 24px; display: grid; gap: 5px; }
.side-link { width: 100%; background: transparent; color: rgba(255,255,255,.62); border: 0; border-radius: 11px; padding: 12px 13px; text-align: right; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.side-link:hover, .side-link.active { background: rgba(255,255,255,.1); color: white; }
.side-icon { width: 26px; text-align: center; font-size: 17px; }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line-dark); padding-top: 18px; }
.user-mini { display: flex; gap: 10px; align-items: center; padding: 8px; }
.avatar { width: 38px; height: 38px; background: var(--acid); color: var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 900; }
.user-mini strong { display: block; font-size: 13px; }.user-mini small { color: rgba(255,255,255,.45); font-size: 10px; }
.studio-main { min-width: 0; }
.studio-top { height: 82px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 34px; background: rgba(244,242,236,.9); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.studio-top h1 { font-size: 20px; margin: 0; }.top-left, .top-right { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.studio-content { padding: 34px; max-width: 1400px; margin: 0 auto; }
.welcome { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 26px; }
.welcome h2 { font-size: 36px; margin: 0 0 6px; letter-spacing: -1px; }.welcome p { margin: 0; color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.stat-card { padding: 21px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.stat-card small { color: var(--muted); }.stat-value { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 10px; }.stat-value strong { font-size: 34px; line-height: 1; }.stat-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 18px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.panel-head { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.panel-head h3 { margin: 0; font-size: 16px; }
.project-row { display: grid; grid-template-columns: 1.2fr .8fr .8fr auto; gap: 15px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }.project-row:last-child { border-bottom: 0; }.project-row:hover { background: var(--paper); }
.project-name { display: flex; gap: 12px; align-items: center; }.project-thumb { width: 48px; height: 48px; border-radius: 12px; background: var(--blue); position: relative; overflow: hidden; }.project-thumb::after { content: ""; width: 27px; height: 27px; border: 3px solid var(--acid); border-radius: 50%; position: absolute; right: 10px; top: 10px; }.project-name strong { display: block; font-size: 14px; }.project-name small { color: var(--muted); font-size: 10px; }
.status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-radius: 999px; padding: 6px 10px; font-size: 10px; background: #fff2d8; color: #8f5e00; }.status::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }.status.green { background: #e7f8e8; color: #287d34; }.status.blue { background: #eaedff; color: #3950d5; }
.activity { padding: 18px 20px; display: grid; gap: 20px; }.activity-item { display: grid; grid-template-columns: 10px 1fr; gap: 12px; font-size: 12px; line-height: 1.7; }.activity-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; margin-top: 6px; box-shadow: 0 0 0 5px rgba(255,91,53,.1); }.activity-item small { color: var(--muted); display: block; }
.empty { padding: 50px 20px; text-align: center; color: var(--muted); }

/* Wizard */
.wizard-shell { max-width: 1040px; margin: 0 auto; }
.wizard-head { margin-bottom: 28px; }.wizard-head h2 { font-size: 34px; margin: 0 0 7px; }.wizard-head p { color: var(--muted); margin: 0; }
.stepper { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: white; }
.stepper-item { padding: 14px; font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }.stepper-item:last-child { border-left: 0; }.stepper-item.active { background: var(--ink); color: white; }.step-no { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.wizard-card { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 30px; }
.wizard-card h3 { font-size: 24px; margin: 0 0 8px; }.wizard-card > p { margin: 0 0 22px; color: var(--muted); line-height: 1.8; }
.script-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }.script-metric { background: var(--paper); padding: 14px; border-radius: 12px; }.script-metric small { color: var(--muted); display: block; font-size: 10px; }.script-metric strong { font-size: 20px; }
.help-box { background: #eef0ff; border-right: 4px solid var(--blue); padding: 16px; margin-top: 18px; font-size: 12px; line-height: 1.8; border-radius: 10px 0 0 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.choice { border: 1px solid var(--line); border-radius: 14px; padding: 15px; cursor: pointer; background: white; text-align: right; min-height: 86px; transition: .2s; }.choice:hover { border-color: #777; }.choice.selected { border: 2px solid var(--ink); background: var(--paper); padding: 14px; }.choice strong { display: block; font-size: 13px; }.choice small { color: var(--muted); font-size: 10px; line-height: 1.6; display: block; margin-top: 4px; }
.format-preview { width: 34px; height: 28px; border: 2px solid currentColor; margin-bottom: 10px; }.format-preview.vertical { width: 20px; height: 30px; }.format-preview.square { width: 28px; height: 28px; }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.style-choice { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; background: white; }.style-choice.selected { outline: 3px solid var(--blue); }.style-mini { height: 110px; display: grid; place-items: center; overflow: hidden; position: relative; }.style-mini span { font-weight: 900; font-size: 25px; animation: float 2.5s ease-in-out infinite; }.style-choice footer { padding: 11px 12px; }.style-choice footer strong { font-size: 12px; display: block; }.style-choice footer small { color: var(--muted); font-size: 9px; }
.upload-zone { border: 1px dashed #999; background: var(--paper); border-radius: 14px; padding: 26px; text-align: center; cursor: pointer; margin-top: 12px; }.upload-zone strong { display: block; margin-bottom: 5px; }.upload-zone small { color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.option-pills { display: flex; flex-wrap: wrap; gap: 7px; }.pill { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 8px 13px; cursor: pointer; font-size: 11px; }.pill.selected { background: var(--ink); color: white; border-color: var(--ink); }
.voice-sample { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 16px; }.voice-play { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--orange); color: white; cursor: pointer; }.voice-wave { flex: 1; display: flex; height: 25px; align-items: center; gap: 3px; }.voice-wave i { flex: 1; max-width: 4px; background: #bbb; height: 20%; border-radius: 2px; }.voice-wave i:nth-child(3n) { height: 80%; }.voice-wave i:nth-child(4n) { height: 55%; }
.wizard-actions { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; }
.summary-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }.summary-block { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 12px; }.summary-block h4 { margin: 0 0 13px; }.summary-line { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }.summary-line:last-child { border: 0; }.price-box { background: var(--ink); color: white; border-radius: 16px; padding: 23px; position: sticky; top: 110px; }.price-box .price-big { font-size: 40px; }.price-break { border-top: 1px solid var(--line-dark); margin-top: 18px; padding-top: 13px; }.price-break div { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.6); margin: 8px 0; }

/* Project detail */
.project-hero { background: var(--ink); color: white; border-radius: 20px; padding: 30px; display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 18px; }.project-hero h2 { margin: 0 0 8px; font-size: 32px; }.project-hero p { margin: 0; color: rgba(255,255,255,.5); }
.timeline { display: grid; grid-template-columns: repeat(5,1fr); background: white; border: 1px solid var(--line); border-radius: 16px; padding: 23px; margin-bottom: 18px; }.timeline-step { position: relative; padding-top: 24px; font-size: 11px; color: var(--muted); }.timeline-step::before { content: ""; position: absolute; top: 5px; right: 0; left: 0; height: 2px; background: #ddd; }.timeline-step::after { content: ""; width: 12px; height: 12px; background: #ddd; border: 3px solid white; box-shadow: 0 0 0 1px #bbb; border-radius: 50%; position: absolute; top: 0; right: 0; }.timeline-step.done::before, .timeline-step.done::after { background: var(--blue); }.timeline-step.current::after { background: var(--orange); box-shadow: 0 0 0 5px rgba(255,91,53,.18); }.approval-card { padding: 24px; }.approval-preview { height: 250px; background: var(--paper); border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; }.approval-preview .voice-wave { max-width: 70%; }.revision-count { display: inline-flex; gap: 5px; }.revision-count i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ink); }.revision-count i.used { background: var(--orange); border-color: var(--orange); }

.toast { position: fixed; left: 24px; bottom: 24px; z-index: 100; background: var(--ink); color: white; border-radius: 12px; padding: 13px 17px; box-shadow: var(--shadow); transform: translateY(80px); opacity: 0; transition: .3s; }.toast.show { transform: translateY(0); opacity: 1; }
.mobile-menu { display: none; }

@keyframes pulse { 50% { transform: scale(.72); opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wave { 0%,100% { height: 5px; } 50% { height: 24px; } }
@keyframes wordShift { 0%,18%,100% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-20px); opacity: .25; } 65% { transform: translateY(10px); opacity: .65; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes kinetic { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(3deg) scale(1.12); letter-spacing: -2px; } }
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes bars { to { height: 95%; } }
@keyframes paperOne { 50% { transform: rotate(-12deg) translate(20px,-10px); } }
@keyframes paperTwo { 50% { transform: translate(45px,-20px) scale(.8); } }
@keyframes orb { 50% { transform: scale(1.12) translateY(-8px); filter: hue-rotate(25deg); } }
@keyframes morph { 0%,100% { border-radius: 50% 50% 8% 50%; transform: rotate(0); } 50% { border-radius: 10% 50% 50% 50%; transform: rotate(180deg) scale(.78); } }

@media (max-width: 1050px) {
  .header-nav { display: none; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero h1 { letter-spacing: -3px; }
  .sample-card { grid-column: span 6; }.sample-card.wide { grid-column: span 6; }
  .process-grid { grid-template-columns: repeat(3,1fr); }.process-step { border-bottom: 1px solid var(--line); }
  .studio { grid-template-columns: 84px 1fr; }.sidebar { padding-inline: 10px; }.sidebar .brand span:last-child, .side-link span:last-child, .user-mini div:last-child { display: none; }.sidebar .brand { justify-content: center; }.side-link { justify-content: center; }.user-mini { justify-content: center; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }.dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1240px); }
  .site-header .btn-ghost { display: none; }.header-inner { height: 68px; }
  .hero { padding-top: 38px; }.hero-grid { grid-template-columns: 1fr; }.hero h1 { font-size: 57px; }.hero-copy { font-size: 15px; }.motion-stage { aspect-ratio: 4/3; border-radius: 24px 24px 80px 24px; }.stage-copy { top: 29%; }.stage-word { font-size: 66px; }
  .section { padding: 78px 0; }.section-head { grid-template-columns: 1fr; gap: 18px; }.section-title { letter-spacing: -2px; }.section-desc { font-size: 14px; }
  .sample-card, .sample-card.wide { grid-column: span 12; min-height: 350px; }.sample-visual { height: 250px; }
  .process-grid { grid-template-columns: 1fr; }.process-step { min-height: 205px; border-left: 0; }
  .calc-shell { grid-template-columns: 1fr; }.calc-form,.calc-result { padding: 28px 20px; }.metric strong { font-size: 21px; }
  .testimonial-wrap { grid-template-columns: 1fr; }.quote-grid { grid-template-columns: 1fr; }.testimonial-intro { min-height: 270px; }
  .footer-top { grid-template-columns: 1fr 1fr; }.footer-main { grid-column: 1/-1; }.footer-bottom { flex-direction: column; }
  .studio { grid-template-columns: 1fr; }.sidebar { display: none; }.studio-top { padding: 0 14px; height: 70px; }.mobile-menu { display: block; }.studio-content { padding: 20px 14px; }.welcome { align-items: start; flex-direction: column; }.welcome h2 { font-size: 28px; }.stats-grid { grid-template-columns: 1fr 1fr; }.stat-card { padding: 16px; }.stat-value strong { font-size: 27px; }
  .project-row { grid-template-columns: 1fr auto; }.project-row > :nth-child(2), .project-row > :nth-child(3) { display: none; }
  .stepper-item { justify-content: center; }.stepper-item span:last-child { display: none; }.wizard-card { padding: 20px 14px; }.choice-grid,.style-grid { grid-template-columns: 1fr 1fr; }.two-col,.summary-grid { grid-template-columns: 1fr; }.script-meta { grid-template-columns: 1fr 1fr 1fr; }.summary-grid .price-box { position: static; }
  .project-hero { align-items: start; flex-direction: column; }.timeline { overflow-x: auto; grid-template-columns: repeat(5,130px); }.revision-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ─────────────────────────────────────────────
   REDESIGN V2 — strict monochrome + signal red
   ───────────────────────────────────────────── */
:root {
  --ink: #050505;
  --paper: #f2f0ea;
  --paper-2: #deddd8;
  --white: #fff;
  --acid: #ef233c;
  --orange: #ef233c;
  --blue: #ef233c;
  --muted: #777672;
  --line: rgba(5,5,5,.2);
  --line-dark: rgba(255,255,255,.23);
  --radius: 3px;
}

body { background: var(--paper); }
.container { width: min(1280px, calc(100% - 80px)); }
.btn { border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: 0; }
.btn:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 currentColor; }
.btn-dark { background: var(--ink); color: white; }
.btn-accent { background: var(--orange); color: white; border: 1px solid var(--orange); }
.btn-accent:hover { color: white; box-shadow: 5px 5px 0 white; }
.btn-on-dark { border-color: rgba(255,255,255,.6); color: white; }

.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 60;
  color: white; background: linear-gradient(to bottom, rgba(0,0,0,.76), transparent);
  border: 0; backdrop-filter: none;
}
.header-inner { height: 92px; }
.brand { font-size: 18px; color: white; }
.brand-mark { width: 30px; height: 30px; border-radius: 0; background: var(--orange); }
.brand-mark::before { width: 3px; height: 22px; border-radius: 0; background: white; transform: rotate(45deg); }
.brand-mark::after { width: 3px; height: 22px; border-radius: 0; background: white; transform: rotate(-45deg); mix-blend-mode: normal; }
.header-nav { color: white; font-size: 13px; }
.header-nav a::after { background: var(--orange); }

.hero {
  min-height: 100svh; padding: 100px 0 50px; background: var(--ink); color: white;
  position: relative; isolation: isolate; overflow: hidden;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.055) 50%, transparent 50.1%); pointer-events: none; }
.hero-scene { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.hero-label { direction: ltr; letter-spacing: 5px; font-size: 10px; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.hero-lockup { width: 100%; position: relative; min-height: 390px; display: grid; place-items: center; }
.hero-lockup h1 { margin: 0; position: relative; z-index: 2; font-size: clamp(86px, 13vw, 180px); line-height: .78; letter-spacing: -10px; font-weight: 900; }
.hero-lockup h1 span, .hero-lockup h1 em { display: block; font-style: normal; }
.hero-lockup h1 em { color: var(--orange); transform: translateX(-6%); }
.hero-copy { max-width: 720px; margin: 16px auto 24px; font-size: 16px; line-height: 2; color: rgba(255,255,255,.66); }
.hero-actions { justify-content: center; align-items: center; gap: 28px; }
.text-link { color: white; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 6px; }
.hero-progress { position: absolute; top: 34px; left: 40px; width: 300px; z-index: 3; direction: ltr; font-size: 9px; letter-spacing: 4px; }
.hero-progress i { display: block; height: 8px; background: #202020; margin: 10px 0; position: relative; }
.hero-progress b { display: block; height: 100%; width: 20%; background: var(--orange); animation: progressPulse 4s ease-in-out infinite; }
.hero-progress small { display: block; font-size: 8px; letter-spacing: 2px; color: rgba(255,255,255,.5); }
.hero-index { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); display: grid; gap: 16px; z-index: 3; direction: ltr; font-size: 12px; }
.hero-index b { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.hero-index span { text-align: center; color: rgba(255,255,255,.48); }

.motion-stage { position: absolute; z-index: 1; width: min(34vw, 390px); aspect-ratio: 1; background: transparent; box-shadow: none; border-radius: 50%; overflow: visible; left: 10%; top: 50%; transform: translateY(-50%); }
.stage-ring { position: absolute; inset: 6%; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; }
.ring-one { animation: spin 14s linear infinite; border-top-color: var(--orange); border-bottom-color: var(--orange); }
.ring-one::before { content: ""; position: absolute; width: 18px; height: 18px; background: var(--orange); border-radius: 50%; top: 9%; right: 8%; }
.ring-two { inset: 20%; border-style: dashed; animation: spin 10s linear infinite reverse; }
.stage-monogram { position: absolute; inset: 31%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transform: rotate(12deg); background: var(--ink); }
.stage-monogram span { font-size: 58px; font-weight: 200; direction: ltr; }
.stage-monogram i { position: absolute; width: 130%; height: 5px; background: var(--orange); transform: rotate(-45deg); }
.motion-stage .stage-caption { bottom: -10px; right: 0; left: 0; border: 0; justify-content: center; gap: 16px; color: rgba(255,255,255,.48); direction: ltr; }

.manifesto { min-height: 92svh; display: grid; align-items: center; background: var(--paper); color: var(--ink); padding: 100px 0; }
.scene-no { font-size: 11px; letter-spacing: 2px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; width: fit-content; }
.manifesto p { font-size: clamp(42px, 6.4vw, 92px); line-height: 1.22; letter-spacing: -4px; font-weight: 300; max-width: 1160px; margin: 70px 0; }
.manifesto p strong { color: var(--orange); font-weight: 900; }
.manifesto-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: 1px; }
.manifesto-foot i { height: 1px; background: var(--ink); flex: 1; margin: 0 24px; }

.section { padding: 140px 0; }
.section-dark { background: var(--ink); color: white; }
.section-head { grid-template-columns: 1.15fr .55fr; gap: 90px; margin-bottom: 70px; }
.section-kicker { font-size: 10px; letter-spacing: 3px; }
.section-title { font-size: clamp(62px, 8vw, 112px); line-height: .92; letter-spacing: -7px; }
.section-desc { font-size: 15px; line-height: 2.1; }

.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 62px 18px; }
.video-card.feature { grid-column: 1 / -1; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #121212; border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-no { position: absolute; top: 0; right: 0; z-index: 2; background: var(--orange); color: white; width: 54px; height: 54px; display: grid; place-items: center; font-size: 12px; pointer-events: none; }
.video-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.24); margin-top: 13px; }
.video-meta h3 { margin: 0 0 4px; font-size: 18px; }.video-meta p { margin: 0; font-size: 11px; color: rgba(255,255,255,.5); }
.video-meta a { font-size: 11px; color: rgba(255,255,255,.58); }

.process-section { background: var(--paper); }
.process-grid { grid-template-columns: 1fr; border-top: 1px solid var(--ink); border-bottom: 0; }
.process-step { min-height: auto; padding: 27px 0; border-left: 0; border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 90px 50px 1fr; align-items: center; gap: 22px; }
.process-step:hover { background: transparent; color: var(--ink); }
.process-step .process-num { font-size: 13px; }.process-step .process-icon { font-size: 32px; color: var(--orange); }
.process-step div { display: grid; grid-template-columns: .5fr 1fr; align-items: center; gap: 40px; }
.process-step h3 { font-size: 30px; margin: 0; }.process-step p { font-size: 13px; max-width: 620px; margin: 0; }.process-step:hover p { color: var(--muted); }

.pricing-section { background: var(--orange); color: white; }
.pricing-section .section-desc { color: rgba(255,255,255,.72); }
.pricing-section .section-kicker::before { background: white; }
.calc-shell { border-radius: 0; box-shadow: 18px 18px 0 rgba(0,0,0,.16); border: 1px solid var(--ink); }
.calc-form, .calc-result { padding: 52px; }
.calc-index { direction: ltr; font-size: 9px; letter-spacing: 3px; margin-bottom: 38px; opacity: .55; }
.calc-form .field textarea, .calc-form .field input, .calc-form .field select { border-radius: 0; }
.switch { border-radius: 0; height: 26px; }.switch::after { border-radius: 0; }
.metric-row { border-color: rgba(255,255,255,.3); }.metric { background: var(--ink); }

.faq-q { font-size: 21px; padding: 28px 0; }
.footer { background: var(--ink); }
.footer-title em { color: var(--orange); font-style: normal; }

/* Make the product UI use the same visual system */
.studio { background: var(--paper); }
.sidebar { background: var(--ink); }
.avatar { background: var(--orange); color: white; border-radius: 0; }
.studio-top { background: rgba(242,240,234,.92); }
.panel, .stat-card, .wizard-card, .stepper, .project-hero, .timeline, .price-box, .choice, .style-choice, .upload-zone, .voice-sample, .summary-block, .script-metric, .help-box, .project-thumb { border-radius: 3px; }
.stat-mark, .icon-btn, .status, .step-no, .voice-play, .revision-count i { border-radius: 0; }
.side-link { border-radius: 0; }.side-link:hover, .side-link.active { background: var(--orange); color: white; }
.project-thumb { background: var(--ink); }.project-thumb::after { border-color: var(--orange); border-radius: 0; }
.style-choice.selected { outline-color: var(--orange); }
.choice.selected { border-color: var(--orange); box-shadow: inset 4px 0 0 var(--orange); }
.pill { border-radius: 0; }.pill.selected { background: var(--orange); border-color: var(--orange); }
.help-box { background: #eee6e4; border-color: var(--orange); }
.range { accent-color: var(--orange); }

@keyframes progressPulse { 50% { width: 36%; } }

@media (max-width: 1050px) {
  .hero-progress { width: 230px; }
  .hero-lockup h1 { font-size: clamp(80px, 14vw, 140px); }
  .motion-stage { left: 2%; width: 38vw; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 36px); }
  .header-inner { height: 72px; }.header-actions .btn-on-dark { display: none; }
  .hero { padding-top: 88px; min-height: 100svh; }
  .hero-progress { top: 82px; left: 18px; width: 150px; }.hero-progress span { display: none; }
  .hero-index { display: none; }
  .hero-scene { min-height: calc(100svh - 120px); }
  .hero-lockup { min-height: 310px; }.hero-lockup h1 { font-size: clamp(68px, 23vw, 100px); line-height: .82; letter-spacing: -6px; }
  .hero-lockup h1 em { transform: none; }.motion-stage { width: 240px; left: 50%; transform: translate(-50%,-50%); opacity: .55; }
  .hero-copy { font-size: 14px; max-width: 90%; }.hero-actions { flex-direction: column; gap: 18px; }
  .manifesto { min-height: auto; padding: 90px 0; }.manifesto p { font-size: 39px; letter-spacing: -2px; margin: 50px 0; }.manifesto-foot i { margin: 0 10px; }
  .section { padding: 90px 0; }.section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }.section-title { font-size: 58px; letter-spacing: -4px; }
  .video-grid { grid-template-columns: 1fr; gap: 48px; }.video-card.feature { grid-column: auto; }.video-meta { flex-direction: column; gap: 8px; }
  .process-step { grid-template-columns: 50px 30px 1fr; gap: 10px; }.process-step div { grid-template-columns: 1fr; gap: 8px; }.process-step h3 { font-size: 22px; }
  .calc-form, .calc-result { padding: 30px 20px; }.calc-index { margin-bottom: 24px; }
}

/* ─────────────────────────────────────────────
   V3 — magnetic full-page rhythm + stronger UI
   ───────────────────────────────────────────── */
html, body { height: 100%; }
body { font-family: 'Estedad Variable', Estedad, Vazirmatn, Tahoma, sans-serif; }
body.landing-mode { overflow: hidden; }
.landing-mode #app { height: 100%; overflow: hidden; }
.snap-shell { height: 100svh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior-y: contain; }
.snap-section { position: relative; min-height: 100svh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }

.top-progress { position: fixed; z-index: 69; top: 108px; left: 34px; width: min(38vw,520px); direction: ltr; transition: color .35s ease; }
.progress-title { display: block; margin-bottom: 11px; font-family: Arial,sans-serif; font-size: 11px; letter-spacing: 5px; font-weight: 500; }
.progress-track { height: 11px; position: relative; transition: background .35s ease; }
.progress-track i { display: block; width: 0; height: 100%; transition: width .45s cubic-bezier(.76,0,.24,1), background .35s ease; }
.progress-scale { display: flex; justify-content: space-between; margin-top: 11px; font-family: Arial,sans-serif; font-size: 9px; }
.progress-scale b { font-weight: 500; }
.top-progress.on-dark { color: white; }.top-progress.on-dark .progress-track { background: #222; }.top-progress.on-dark .progress-track i { background: white; }
.top-progress.on-light { color: var(--ink); }.top-progress.on-light .progress-track { background: #d4d3ce; }.top-progress.on-light .progress-track i { background: var(--orange); }

.snap-nav { position: fixed; z-index: 70; right: 0; left: auto; top: 0; bottom: 0; width: 72px; transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; direction: ltr; background: var(--orange); overflow: hidden; }
.snap-nav::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 145px; background: rgba(153,0,23,.22); clip-path: polygon(0 0,100% 0,0 100%); }
.snap-dot { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); background: transparent; border: 0; font-size: 16px; font-weight: 750; transition: .18s ease; }
.snap-dot.active { color: var(--orange); background: white; border-radius: 50%; transform: none; }
.landing-mode .site-header .header-inner { padding-right: 76px; }
.section-next { position: absolute; z-index: 12; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .4px; color: currentColor; }
.section-next b { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid currentColor; font-size: 16px; animation: nextBounce 1.8s ease-in-out infinite; }
.section-dark .section-next { color: white; }
@keyframes nextBounce { 50% { transform: translateY(5px); } }

.hero { height: 100svh; min-height: 100svh; }
.hero-lockup h1 { font-family: 'Estedad Variable', Vazirmatn, sans-serif; font-weight: 880; font-variation-settings: 'wght' 880; text-wrap: balance; }
.hero-copy { font-size: clamp(16px, 1.3vw, 20px); font-weight: 420; }

.manifesto { height: 100svh; min-height: 100svh; padding: 10vh 0; }
.manifesto .container { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.manifesto p { font-family: 'Estedad Variable', Vazirmatn, sans-serif; font-size: clamp(54px, 7vw, 104px); line-height: 1.35; letter-spacing: -4.8px; font-weight: 410; margin: 7vh 0; text-wrap: pretty; }
.manifesto p strong { font-weight: 880; }

.showcase-section { padding: 94px 0 50px; height: 100svh; }
.showcase-layout { height: 100%; display: grid; grid-template-rows: auto 1fr; align-items: center; }
.showcase-section .section-head { grid-template-columns: .72fr 1.28fr; margin: 0 0 16px; align-items: center; }
.showcase-section .section-title { font-size: clamp(58px, 6.4vw, 94px); }
.showcase-section .section-desc { font-size: clamp(15px, 1.2vw, 18px); max-width: 530px; }
.laptop-grid { display: block; align-self: center; }
.video-card.feature { max-width: min(1040px, 79vw); margin: 0 auto; }
.video-card.feature .video-frame { aspect-ratio: 16/10; padding: 14px 14px 46px; background: #151515; border: 1px solid #4b4b4b; border-radius: 16px 16px 5px 5px; box-shadow: 0 32px 70px rgba(0,0,0,.55); overflow: visible; }
.video-card.feature .video-frame iframe { position: absolute; top: 14px; right: 14px; left: 14px; width: calc(100% - 28px); height: calc(100% - 60px); border-radius: 6px; background: black; }
.video-card.feature .video-frame::before { content: ""; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border: 1px solid #666; border-radius: 50%; }
.video-card.feature .video-frame::after { content: ""; position: absolute; z-index: -1; bottom: -17px; left: 50%; transform: translateX(-50%); width: 110%; height: 18px; background: linear-gradient(#d8d8d8,#8b8b8b); clip-path: polygon(2% 0,98% 0,100% 70%,63% 100%,37% 100%,0 70%); border-radius: 0 0 16px 16px; }
.video-card.feature .video-no { top: 14px; right: 14px; }
.video-card.feature .video-meta { max-width: 100%; margin-top: 28px; }

.motion-library { background: var(--ink); color: white; padding: 105px 0 64px; display: flex; flex-direction: column; justify-content: center; }
.library-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; }
.library-head h2 { font-size: clamp(56px, 6.4vw, 92px); line-height: .98; letter-spacing: -5px; margin: 0; font-weight: 850; }
.rail-controls { display: flex; direction: ltr; }
.rail-controls button { width: 58px; height: 58px; background: transparent; color: white; border: 1px solid rgba(255,255,255,.45); cursor: pointer; font-size: 22px; }
.rail-controls button:hover { background: var(--orange); border-color: var(--orange); }
.motion-rail { direction: rtl; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(40px, calc((100vw - 1280px)/2)) 22px; }
.motion-rail::-webkit-scrollbar { display: none; }
.rail-card { flex: 0 0 min(430px, 72vw); scroll-snap-align: start; }
.rail-video { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #181818; border: 1px solid rgba(255,255,255,.22); }
.rail-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform: scale(1.02); }
.rail-video > span { position: absolute; top: 0; right: 0; width: 45px; height: 45px; background: var(--orange); display: grid; place-items: center; font-size: 11px; }
.rail-card > div:last-child { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.rail-card strong { font-size: 17px; }.rail-card small { font-size: 11px; color: rgba(255,255,255,.48); }

.process-section { height: 100svh; padding: 92px 0 42px; }
.process-section .container { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.process-section .section-head { margin-bottom: 18px; align-items: center; }
.process-section .section-title { font-size: clamp(57px, 6.2vw, 88px); }
.process-section .section-desc { font-size: clamp(15px,1.15vw,18px); color: #4e4d49; font-weight: 500; }
.process-grid { align-self: stretch; display: grid; grid-template-rows: repeat(5,1fr); }
.process-step { padding: 12px 0; grid-template-columns: 75px 36px 1fr; }
.process-step div { grid-template-columns: .48fr 1fr; gap: 30px; }
.process-step h3 { font-size: clamp(25px,2.2vw,34px); font-weight: 850; }
.process-step p { font-size: clamp(14px,1.18vw,18px); line-height: 1.9; color: #4f4e4a; font-weight: 490; max-width: 690px; }
.process-step:hover h3 { color: var(--orange); transform: translateX(-8px); transition: .25s; }

.pricing-section { height: 100svh; padding: 92px 0 40px; }
.pricing-section .container { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.pricing-section .section-head { margin-bottom: 18px; align-items: center; }
.pricing-section .section-title { font-size: clamp(57px,6vw,88px); }
.pricing-section .section-desc { font-size: clamp(15px,1.18vw,18px); font-weight: 520; }
.pricing-section .calc-shell { align-self: stretch; min-height: 0; }
.pricing-section .calc-form, .pricing-section .calc-result { padding: clamp(28px,3vw,48px); }
.calc-form h3, .calc-result h3 { font-size: clamp(28px,2.6vw,40px); font-weight: 850; }
.calc-form > p { font-size: 17px; }
.calc-form .field label, .calc-form .field-label { font-size: 16px; }
.calc-form .switch-line { padding: 19px 0; min-height: 78px; }
.calc-form .switch-line strong { font-size: 18px; }.calc-form .switch-line .tiny { font-size: 13px; margin-top: 4px; }
.calc-form .switch { width: 64px; height: 36px; border: 2px solid var(--ink); background: transparent; }
.calc-form .switch::after { width: 26px; height: 26px; top: 3px; right: 3px; background: var(--ink); }
.calc-form .switch.on { background: var(--orange); border-color: var(--orange); }
.calc-form .switch.on::after { right: 31px; background: white; }
.calc-form .status { padding: 9px 13px; font-size: 13px; border: 1px solid #1c7931; background: transparent; }
.metric strong { font-size: clamp(24px,2vw,31px); }.price-big { font-size: clamp(45px,4.7vw,70px); }
.price-note { font-size: 14px; }

.faq-section { height: 100svh; padding: 88px 0 0; display: grid; grid-template-rows: 1fr auto; }
.faq-section > .container { overflow-y: auto; padding-bottom: 22px; }
.faq-section .section-head { margin-bottom: 26px; }.faq-section .section-title { font-size: clamp(55px,6vw,88px); }
.faq-section .footer { padding: 24px 0 14px; }
.faq-section .footer-top { display: flex; justify-content: space-between; align-items: center; }
.faq-section .footer-title { font-size: 35px; margin: 0; letter-spacing: -2px; }
.faq-section .footer-col { display: none; }.faq-section .footer-bottom { margin-top: 16px; }
.faq-q { font-size: clamp(17px,1.4vw,22px); }

/* Larger and unmistakably clickable project controls */
.wizard-card { padding: 36px; }
.wizard-card h3 { font-size: 31px; font-weight: 850; }
.wizard-card > p { font-size: 16px; color: #55534e; }
.stepper-item { min-height: 64px; font-size: 14px; font-weight: 650; }
.choice-grid { gap: 14px; }
.choice { min-height: 132px; padding: 20px; position: relative; border: 2px solid #c8c6c0; font-size: 15px; }
.choice strong { font-size: 17px; margin-top: 5px; }.choice small { font-size: 13px; margin-top: 8px; }
.choice.selected { border: 3px solid var(--orange); padding: 19px; background: #fff4f2; box-shadow: none; }
.choice.selected::after { content: "✓"; position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; background: var(--orange); color: white; display: grid; place-items: center; font-weight: 900; }
.style-grid { gap: 14px; }.style-choice { border: 2px solid #c8c6c0; }.style-choice.selected { outline: 3px solid var(--orange); outline-offset: 2px; }
.style-mini { height: 145px; }.style-choice footer { padding: 15px; }.style-choice footer strong { font-size: 16px; }.style-choice footer small { font-size: 12px; margin-top: 4px; display: block; }
.option-pills { gap: 10px; }.pill { min-height: 48px; padding: 12px 18px; font-size: 14px; border: 2px solid #c8c6c0; }.pill.selected { border-color: var(--orange); box-shadow: inset 0 -4px 0 rgba(0,0,0,.16); }
.field label, .field-label { font-size: 15px; }.field textarea, .field input[type="text"], .field input[type="email"], .field select { font-size: 15px; min-height: 52px; }
.format-preview { width: 48px; height: 32px; }.format-preview.vertical { width: 24px; height: 42px; }.format-preview.square { width: 38px; height: 38px; }
.wizard-actions .btn { min-height: 52px; padding-inline: 24px; font-size: 15px; }

@media (max-height: 760px) and (min-width: 761px) {
  .showcase-section, .process-section, .pricing-section { padding-top: 78px; }
  .showcase-section .section-head, .process-section .section-head, .pricing-section .section-head { margin-bottom: 10px; }
  .video-card.feature { max-width: 760px; }
  .library-head h2 { font-size: 58px; }.motion-library { padding-top: 80px; }
  .rail-card { flex-basis: 360px; }
  .process-step { padding: 7px 0; }.process-step h3 { font-size: 25px; }.process-step p { font-size: 14px; }
  .pricing-section .calc-form, .pricing-section .calc-result { padding: 25px; }.calc-index { margin-bottom: 12px; }
}

@media (max-width: 760px) {
  body.landing-mode { overflow: hidden; }
  .snap-shell { scroll-snap-type: y proximity; }
  .snap-section { height: auto; min-height: 100svh; overflow: visible; scroll-snap-stop: normal; }
  .top-progress { top: 78px; left: 14px; width: calc(100% - 76px); }
  .progress-title { margin-bottom: 7px; font-size: 8px; letter-spacing: 2.5px; }.progress-track { height: 7px; }.progress-scale { margin-top: 6px; font-size: 7px; }
  .snap-nav { right: 0; left: auto; width: 48px; gap: 2px; }.snap-nav::before { height: 95px; }.snap-dot { width: 30px; height: 30px; font-size: 12px; }
  .landing-mode .site-header .header-inner { padding-right: 48px; }
  .section-next { bottom: 12px; }
  .manifesto { min-height: 100svh; height: auto; }
  .manifesto p { font-size: 42px; line-height: 1.5; letter-spacing: -2.5px; }
  .showcase-section { min-height: 100svh; height: auto; padding-bottom: 90px; }
  .showcase-layout { display: block; }.showcase-section .section-head { grid-template-columns: 1fr; }.video-card.feature { max-width: 100%; }
  .video-card.feature .video-frame { padding: 8px 8px 30px; border-radius: 8px 8px 3px 3px; }.video-card.feature .video-frame iframe { top: 8px; right: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 38px); }
  .motion-library { min-height: 100svh; height: auto; padding-bottom: 90px; }.library-head { align-items: start; flex-direction: column; gap: 20px; }.library-head h2 { font-size: 50px; }.rail-card { flex-basis: 82vw; }.rail-controls button { width: 48px; height: 48px; }
  .process-section, .pricing-section { height: auto; min-height: 100svh; padding-bottom: 90px; }.process-section .container, .pricing-section .container { height: auto; display: block; }
  .process-grid { display: block; }.process-step { min-height: 115px; }
  .pricing-section .calc-shell { display: block; }
  .faq-section { height: auto; min-height: 100svh; display: block; padding-bottom: 0; }.faq-section > .container { overflow: visible; }.faq-section .footer-top { align-items: start; flex-direction: column; gap: 18px; }
  .choice { min-height: 120px; }.wizard-card { padding: 24px 16px; }.wizard-card h3 { font-size: 26px; }
}

/* V5 — balanced manifesto scene */
.manifesto .manifesto-grid { height: 100%; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(46px,7vw,110px); align-items: center; }
.manifesto-copy { align-self: center; }
.manifesto-copy .scene-no { margin-bottom: clamp(38px,6vh,70px); }
.manifesto-copy h2 { margin: 0; font-size: clamp(58px,6vw,88px); line-height: 1.15; letter-spacing: -4px; font-weight: 470; }
.manifesto-copy h2 strong { display: inline-block; color: var(--orange); font-weight: 880; }
.manifesto-copy > p { margin: 30px 0 36px; max-width: 610px; font-size: clamp(17px,1.45vw,22px); line-height: 2; letter-spacing: -.4px; color: #55534e; font-weight: 470; }
.manifesto-tags { direction: ltr; display: flex; flex-wrap: wrap; gap: 8px; }
.manifesto-tags span { border: 1px solid var(--ink); padding: 10px 14px; font-size: 10px; letter-spacing: 1px; background: transparent; }

.manifesto-art { position: relative; width: min(38vw,530px); aspect-ratio: 1; justify-self: center; direction: ltr; }
.art-orbit { position: absolute; inset: 7%; border: 1px solid rgba(5,5,5,.28); border-radius: 50%; animation: spin 22s linear infinite; }
.art-orbit::before { content: ""; position: absolute; inset: 19%; border: 1px dashed rgba(5,5,5,.25); border-radius: 50%; }
.art-orbit i { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--orange); left: 8%; top: 18%; box-shadow: 0 0 0 9px rgba(239,35,60,.12); }
.art-orbit b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); right: 7%; bottom: 23%; }
.art-card { position: absolute; width: 42%; aspect-ratio: 1.3/1; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid var(--ink); box-shadow: 10px 10px 0 rgba(5,5,5,.12); }
.art-card small { font-size: 9px; letter-spacing: 1.5px; }.art-card strong { font-family: 'Estedad Variable',Vazirmatn,sans-serif; font-size: clamp(25px,2.5vw,37px); line-height: 1.15; white-space: nowrap; }
.card-one { top: 7%; right: 8%; background: var(--paper); transform: rotate(5deg); animation: cardOne 4.8s ease-in-out infinite; }
.card-two { top: 37%; left: 5%; background: var(--ink); color: white; transform: rotate(-7deg); animation: cardTwo 5.2s ease-in-out infinite; }
.card-three { right: 8%; bottom: 5%; background: var(--orange); color: white; border-color: var(--orange); transform: rotate(3deg); animation: cardThree 5.6s ease-in-out infinite; }
.art-cursor { position: absolute; z-index: 4; width: 52px; height: 52px; display: grid; place-items: center; background: white; border: 2px solid var(--ink); font-size: 24px; left: 43%; top: 30%; animation: cursorPath 5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cardOne { 50% { transform: rotate(1deg) translateY(-12px); } }
@keyframes cardTwo { 50% { transform: rotate(-3deg) translate(8px,8px); } }
@keyframes cardThree { 50% { transform: rotate(7deg) translateY(-8px); } }
@keyframes cursorPath { 0%,100% { transform: translate(0,0); } 35% { transform: translate(78px,72px) rotate(12deg); } 70% { transform: translate(-18px,142px) rotate(-8deg); } }

@media (max-width: 900px) {
  .manifesto .manifesto-grid { grid-template-columns: 1fr .8fr; gap: 26px; }
  .manifesto-copy h2 { font-size: clamp(48px,7vw,68px); }
  .manifesto-art { width: min(42vw,430px); }
}

@media (max-width: 760px) {
  .manifesto .manifesto-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 22px; padding-top: 86px; padding-bottom: 36px; }
  .manifesto-copy .scene-no { margin-bottom: 25px; }
  .manifesto-copy h2 { font-size: 48px; letter-spacing: -2.5px; }
  .manifesto-copy > p { margin: 18px 0 20px; font-size: 16px; line-height: 1.85; }
  .manifesto-tags span { padding: 7px 9px; font-size: 8px; }
  .manifesto-art { width: min(72vw,350px); align-self: end; }
  .art-card { padding: 11px; box-shadow: 6px 6px 0 rgba(5,5,5,.12); }.art-cursor { width: 38px; height: 38px; font-size: 18px; }
}

/* V8 — minimal showcase introduction */
.showcase-section .showcase-layout { height: 100%; display: grid; grid-template-columns: .72fr 1.28fr; grid-template-rows: 1fr; gap: clamp(50px,7vw,110px); align-items: center; }
.showcase-copy { max-width: 470px; }
.showcase-copy .section-kicker { margin-bottom: 34px; }
.showcase-copy h2 { margin: 0; font-size: clamp(44px,4.5vw,66px); line-height: 1.18; letter-spacing: -3px; font-weight: 580; }
.showcase-copy h2 em { display: inline-block; margin-top: 4px; color: var(--orange); font-style: normal; font-weight: 850; }
.showcase-copy > p { margin: 28px 0 34px; max-width: 440px; font-size: clamp(16px,1.25vw,19px); line-height: 2; color: rgba(255,255,255,.62); }
.showcase-steps { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.72); font-size: 11px; }
.showcase-steps i { width: 35px; height: 1px; background: rgba(255,255,255,.35); }
.minimal-video { display: block; }
.minimal-video .video-card.feature { max-width: 720px; margin: 0; }
.minimal-video .video-card.feature .video-frame { aspect-ratio: 16/9; padding: 0; background: #111; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; box-shadow: none; overflow: hidden; }
.minimal-video .video-card.feature .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.minimal-video .video-card.feature .video-frame::before,.minimal-video .video-card.feature .video-frame::after { display: none; }
.minimal-video .video-card.feature .video-no { top: 0; right: 0; width: 40px; height: 40px; }
.minimal-video .video-card.feature .video-meta { margin-top: 12px; padding-top: 11px; font-size: 10px; }
.minimal-video .video-meta h3 { font-size: 14px; }.minimal-video .video-meta p,.minimal-video .video-meta a { font-size: 9px; }

@media (max-width: 900px) {
  .showcase-section .showcase-layout { grid-template-columns: .8fr 1.2fr; gap: 30px; }
  .showcase-copy h2 { font-size: 43px; }
}

@media (max-width: 760px) {
  .showcase-section .showcase-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 26px; padding-top: 105px; padding-bottom: 35px; }
  .showcase-copy { max-width: none; }.showcase-copy .section-kicker { margin-bottom: 18px; }.showcase-copy h2 { font-size: 38px; letter-spacing: -2px; }.showcase-copy > p { margin: 15px 0 18px; font-size: 15px; }
  .minimal-video .video-card.feature { max-width: 100%; }
}

/* V9 — quieter motion library */
.motion-library { padding: 112px 0 58px; justify-content: center; }
.library-head { display: block; margin-bottom: 34px; }
.library-title .section-kicker { margin-bottom: 16px; }
.library-head h2 { font-size: clamp(38px,4.2vw,58px); line-height: 1.08; letter-spacing: -2.5px; font-weight: 690; white-space: nowrap; }
.rail-controls { gap: 7px; padding-top: 18px; }
.rail-controls button { width: 34px; height: 34px; border-color: rgba(255,255,255,.28); border-radius: 50%; font-size: 14px; transition: background .2s ease,border-color .2s ease,transform .2s ease; }
.rail-controls button:hover { transform: translateY(-2px); }
.motion-rail { gap: 22px; padding-bottom: 14px; cursor: grab; user-select: none; touch-action: pan-y; }
.motion-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.motion-rail.is-dragging .rail-card { pointer-events: none; }
.rail-card { flex-basis: min(390px,68vw); }
.rail-video { border-color: rgba(255,255,255,.15); }
.rail-video > span { width: 32px; height: 32px; font-size: 9px; }
.rail-card > div:last-child { padding: 12px 0 10px; border-bottom-color: rgba(255,255,255,.14); }
.rail-card strong { font-size: 14px; font-weight: 650; }
.rail-card small { font-size: 9px; color: rgba(255,255,255,.42); }

@media (max-width: 760px) {
  .motion-library { padding-top: 96px; }
  .library-head { margin-bottom: 24px; }
  .library-head h2 { font-size: 34px; letter-spacing: -1.6px; white-space: normal; }
  .library-title .section-kicker { margin-bottom: 10px; }
  .rail-controls { padding-top: 13px; }
  .rail-controls button { width: 30px; height: 30px; }
  .motion-rail { gap: 14px; }
  .rail-card { flex-basis: 78vw; }
}

/* V10 — process as a quiet motion scene */
.process-section { padding: 0; }
.process-section .process-scene { height: 100%; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(55px,8vw,130px); padding-top: 122px; padding-bottom: 54px; }
.process-copy { align-self: center; max-width: 500px; }
.process-copy .section-kicker { margin-bottom: 28px; }
.process-copy h2 { margin: 0; font-size: clamp(52px,5.8vw,82px); line-height: 1.05; letter-spacing: -4px; font-weight: 470; }
.process-copy h2 strong { color: var(--orange); font-weight: 860; }
.process-copy > p { margin: 25px 0 30px; font-size: clamp(16px,1.2vw,19px); color: #66635e; }
.process-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.process-tags span { padding: 8px 11px; border: 1px solid rgba(5,5,5,.25); font-family: Arial,sans-serif; font-size: 9px; letter-spacing: .2px; }
.process-art { width: min(39vw,510px); justify-self: start; }
.process-art .card-one { animation-duration: 5.2s; }
.process-art .card-two { animation-duration: 5.8s; }
.process-art .card-three { animation-duration: 6.3s; }
.process-art .art-cursor { animation-duration: 6s; }

@media (max-width: 900px) {
  .process-section .process-scene { grid-template-columns: 1fr .9fr; gap: 32px; }
  .process-copy h2 { font-size: 58px; }
  .process-art { width: min(43vw,430px); }
}

@media (max-width: 760px) {
  .process-section .process-scene { height: auto; min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 26px; padding-top: 130px; padding-bottom: 45px; }
  .process-copy .section-kicker { margin-bottom: 18px; }
  .process-copy h2 { font-size: 48px; letter-spacing: -2.6px; }
  .process-copy > p { margin: 16px 0 18px; font-size: 15px; }
  .process-tags span { padding: 7px 9px; font-size: 8px; }
  .process-art { width: min(76vw,360px); justify-self: center; align-self: end; }
}

/* V11 — independent production journey */
.process-section .production-scene { height: 100%; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: clamp(52px,7vw,112px); padding-top: 128px; padding-bottom: 48px; }
.production-copy { max-width: 610px; }
.production-copy .section-kicker { margin-bottom: 25px; }
.production-copy h2 { margin: 0; font-size: clamp(49px,5.15vw,74px); line-height: 1.08; letter-spacing: -3.8px; font-weight: 480; }
.production-copy h2 strong { color: var(--orange); font-weight: 850; }
.production-copy > p { max-width: 520px; margin: 22px 0 27px; color: #5f5d58; font-size: clamp(15px,1.12vw,18px); line-height: 1.9; }
.production-route { direction: rtl; display: flex; align-items: center; gap: 10px; margin-bottom: 22px; white-space: nowrap; }
.production-route span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.production-route span b { font-family: Arial,sans-serif; color: var(--orange); font-size: 8px; letter-spacing: .4px; }
.production-route i { flex: 0 1 26px; height: 1px; background: #aaa7a0; }
.production-benefits { display: flex; gap: 8px; }
.production-benefits > div { min-width: 112px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(5,5,5,.24); }
.production-benefits strong { font-family: Arial,sans-serif; font-size: 17px; }
.production-benefits span { font-size: 10px; color: #55534f; }
.production-benefits .benefit-consultant { border-color: var(--orange); }
.production-benefits .benefit-consultant strong { color: var(--orange); }

.production-motion { width: min(42vw,560px); justify-self: start; margin-top: 62px; }
.production-board { position: relative; aspect-ratio: 1.2/1; border: 1px solid rgba(5,5,5,.2); background-color: rgba(255,255,255,.26); background-image: linear-gradient(rgba(5,5,5,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(5,5,5,.055) 1px,transparent 1px); background-size: 38px 38px; overflow: hidden; }
.content-ticket { position: absolute; z-index: 2; top: 13%; right: 8%; width: 31%; aspect-ratio: 1/1.2; padding: 15px; border: 1px solid var(--ink); background: var(--paper); transform: rotate(3deg); box-shadow: 7px 7px 0 rgba(5,5,5,.08); animation: ticketFloat 4.8s ease-in-out infinite; }
.content-ticket small { display: block; margin-bottom: 34%; font-family: Arial,sans-serif; font-size: 7px; letter-spacing: 1.4px; }
.content-ticket strong { display: block; margin-bottom: 15px; font-size: clamp(22px,2.2vw,34px); }
.content-ticket span { display: block; width: 100%; height: 2px; margin-top: 7px; background: #cbc8c1; }.content-ticket span:nth-last-child(1) { width: 62%; }
.production-line { position: absolute; z-index: 1; right: 27%; left: 21%; top: 52%; height: 2px; background: var(--ink); transform: rotate(-17deg); transform-origin: center; }
.production-line::before,.production-line::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translateY(-50%); }.production-line::before { right: -4px; }.production-line::after { left: -4px; background: var(--orange); }
.production-line i { position: absolute; top: -5px; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(242,31,58,.13); animation: productionTravel 4.6s cubic-bezier(.68,0,.32,1) infinite; }
.production-line b { position: absolute; left: 30%; top: -2px; width: 20%; height: 6px; background: var(--paper); }
.stage-node { position: absolute; z-index: 3; padding: 7px 9px; border: 1px solid var(--ink); background: var(--paper); font-size: 9px; font-weight: 750; animation: nodePulse 4.6s ease-in-out infinite; }
.node-script { top: 36%; right: 34%; animation-delay: -.8s; }.node-audio { top: 52%; right: 45%; animation-delay: -2s; }.node-motion { top: 66%; right: 57%; animation-delay: -3.2s; }
.video-output { position: absolute; z-index: 2; bottom: 9%; left: 7%; width: 40%; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); box-shadow: 8px 8px 0 var(--orange); }
.video-output small { position: absolute; bottom: 8px; left: 9px; color: white; font-family: Arial,sans-serif; font-size: 6px; letter-spacing: 1.4px; }
.video-output > strong { position: absolute; z-index: 2; right: 11px; bottom: 9px; color: white; font-size: 11px; font-weight: 700; }
.output-shape { position: absolute; border-radius: 50%; filter: none; }.shape-a { width: 54%; aspect-ratio: 1; top: -16%; right: -9%; background: var(--orange); animation: outputA 5s ease-in-out infinite; }.shape-b { width: 42%; aspect-ratio: 1; bottom: -22%; left: 9%; border: 10px solid white; animation: outputB 6s ease-in-out infinite; }
.output-play { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 20px; animation: playPulse 2.6s ease-in-out infinite; }
.consultant-photo { position: absolute; z-index: 4; top: 8%; left: 7%; width: 76px; text-align: center; }
.consultant-photo svg { display: block; width: 64px; height: 64px; margin: 0 auto 7px; padding: 8px; border-radius: 50%; background: var(--orange); fill: none; stroke: white; stroke-width: 2; }
.consultant-photo span { padding: 4px 7px; background: var(--ink); color: white; font-size: 7px; white-space: nowrap; }
@keyframes ticketFloat { 50% { transform: rotate(-1deg) translateY(-8px); } }
@keyframes productionTravel { 0% { right: 0; } 46%,55% { right: calc(100% - 12px); } 100% { right: 0; } }
@keyframes nodePulse { 0%,62%,100% { background: var(--paper); color: var(--ink); } 45% { background: var(--orange); border-color: var(--orange); color: white; transform: translateY(-3px); } }
@keyframes outputA { 50% { transform: translate(-14px,10px) scale(.82); } }
@keyframes outputB { 50% { transform: translate(16px,-9px) rotate(25deg); } }
@keyframes playPulse { 50% { transform: scale(1.22); opacity: .65; } }

@media (max-width: 1000px) {
  .process-section .production-scene { grid-template-columns: 1fr .9fr; gap: 35px; }
  .production-route { gap: 7px; }.production-route span { font-size: 10px; }.production-route i { flex-basis: 12px; }
  .production-motion { width: min(43vw,470px); }
}
@media (max-width: 760px) {
  .process-section .production-scene { height: auto; min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 24px; padding-top: 128px; padding-bottom: 45px; }
  .production-copy h2 { font-size: 45px; letter-spacing: -2.4px; }.production-copy > p { margin: 15px 0 18px; font-size: 14px; }
  .production-route { overflow-x: auto; padding-bottom: 4px; }.production-route span { font-size: 9px; }.production-route i { min-width: 12px; }
  .production-benefits { gap: 5px; }.production-benefits > div { min-width: 0; flex: 1; padding: 8px; }.production-benefits strong { font-size: 14px; }.production-benefits span { font-size: 8px; }
  .production-motion { width: min(88vw,410px); margin-top: 0; justify-self: center; }
}

/* V12 — clean scroll, home return, step estimator */
.snap-shell { scrollbar-width: none; -ms-overflow-style: none; }
.snap-shell::-webkit-scrollbar { width: 0; height: 0; display: none; }
.home-return { position: fixed; z-index: 71; left: 26px; bottom: 26px; width: 58px; height: 58px; display: grid; place-items: center; gap: 1px; border: 1px solid rgba(5,5,5,.28); border-radius: 50%; background: var(--paper); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(15px) scale(.9); transition: .25s ease; cursor: pointer; }
.home-return.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.home-return svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.home-return span { font-family: Arial,sans-serif; font-size: 6px; letter-spacing: 1.2px; }
.home-return:hover { color: white; background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }

.production-route span { font-size: 13px; color: #252422; }
.production-benefits { gap: 10px; }
.production-benefits > div { min-width: 132px; padding: 13px 16px; border-color: rgba(5,5,5,.5); background: rgba(255,255,255,.5); }
.production-benefits strong { color: var(--ink); font-size: 22px; font-weight: 800; }
.production-benefits span { color: #282725; font-size: 12px; font-weight: 650; }

.pricing-section { padding: 0; background: var(--paper); color: var(--ink); }
.pricing-section .section-kicker::before { background: var(--orange); }
.pricing-section .pricing-journey { height: 100%; display: grid; grid-template-rows: auto 1fr; padding-top: 108px; padding-bottom: 38px; }
.pricing-intro { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; gap: 35px; margin-bottom: 22px; }
.pricing-intro > div { grid-column: 2; }.pricing-intro h2 { grid-column: 2; margin: 0; font-size: clamp(38px,3.7vw,56px); line-height: 1.05; letter-spacing: -2.8px; font-weight: 480; }.pricing-intro h2 strong { color: var(--orange); font-weight: 850; }
.pricing-intro p { grid-column: 1; grid-row: 1 / span 2; margin: 0; max-width: 440px; color: #65625c; font-size: 14px; line-height: 1.8; }
.step-estimator { min-height: 0; display: grid; grid-template-columns: 1.12fr 118px .78fr; direction: rtl; border: 1px solid var(--ink); background: white; box-shadow: 12px 12px 0 rgba(5,5,5,.1); overflow: hidden; }
.estimate-question { min-width: 0; padding: clamp(28px,3vw,45px); display: flex; flex-direction: column; }
.estimate-count { margin-bottom: 13px; font-family: Arial,sans-serif; font-size: 8px; letter-spacing: 2px; color: var(--orange); direction: ltr; text-align: right; }
.estimate-question h3 { margin: 0; font-size: clamp(27px,2.5vw,38px); letter-spacing: -1.4px; }
.estimate-question > p { margin: 10px 0 23px; color: #73706a; font-size: 13px; line-height: 1.8; }
.estimate-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.estimate-choice { position: relative; min-height: 108px; padding: 17px; text-align: right; border: 1px solid #bcb9b2; background: transparent; color: var(--ink); cursor: pointer; }
.estimate-choice i { position: absolute; top: 14px; left: 14px; width: 15px; height: 15px; border: 1px solid #99958d; border-radius: 50%; }
.estimate-choice strong,.estimate-choice small { display: block; }.estimate-choice strong { margin-top: 25px; font-size: 16px; }.estimate-choice small { margin-top: 7px; color: #77736c; font-size: 10px; }
.estimate-choice.selected { border-color: var(--orange); background: #fff3f4; }.estimate-choice.selected i { border: 5px solid var(--orange); }
.estimate-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 22px; }
.estimate-actions button { min-height: 42px; padding: 0 17px; border: 1px solid #aaa69e; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }.estimate-actions button.primary { border-color: var(--ink); background: var(--ink); color: white; }.estimate-actions button:disabled { opacity: .3; cursor: default; }
.size-tabs { display: flex; gap: 6px; margin-bottom: 16px; }.size-tabs button { padding: 8px 13px; border: 1px solid #aaa69e; background: transparent; font: inherit; font-size: 10px; cursor: pointer; }.size-tabs button.active { background: var(--ink); color: white; border-color: var(--ink); }
.number-stepper { direction: ltr; min-height: 115px; display: flex; align-items: center; justify-content: center; gap: 15px; border: 1px solid #bcb9b2; }.number-stepper button { width: 34px; height: 34px; border: 1px solid #aaa69e; background: transparent; font-size: 17px; cursor: pointer; }.number-stepper strong { min-width: 70px; text-align: center; font-family: Arial,sans-serif; font-size: 43px; }.number-stepper span { font-size: 11px; color: #74716b; }
.size-empty { min-height: 115px; display: grid; place-items: center; border: 1px dashed #bcb9b2; color: #817d75; font-size: 11px; }
.estimate-dial { direction: ltr; display: grid; grid-template-rows: 48px 1fr 48px; align-items: center; justify-items: center; background: var(--orange); color: white; overflow: hidden; }
.estimate-dial > button { width: 100%; height: 100%; border: 0; background: transparent; color: white; font-size: 18px; cursor: pointer; }.estimate-dial > button:hover { background: rgba(0,0,0,.12); }
.dial-window { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-family: Arial,sans-serif; }
.dial-window span { font-size: 18px; opacity: .36; transform: scale(.75); }.dial-window strong { position: relative; font-size: 45px; line-height: 1; animation: dialTurn .32s cubic-bezier(.2,.8,.2,1); }.dial-window strong::before,.dial-window strong::after { content: ""; position: absolute; top: 50%; width: 18px; height: 1px; background: white; }.dial-window strong::before { right: calc(100% + 9px); }.dial-window strong::after { left: calc(100% + 9px); }
@keyframes dialTurn { from { opacity: 0; transform: rotateX(70deg) translateY(15px); } to { opacity: 1; transform: none; } }
.estimate-summary { direction: rtl; padding: clamp(27px,2.6vw,40px); display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: white; }
.estimate-summary small { font-family: Arial,sans-serif; font-size: 7px; letter-spacing: 2px; color: rgba(255,255,255,.45); }
.estimate-price { margin-top: 17px; font-family: 'Estedad Variable',sans-serif; font-size: clamp(31px,2.8vw,43px); font-weight: 820; line-height: 1.15; }
.estimate-days { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; }.estimate-days strong { font-family: Arial,sans-serif; color: var(--orange); font-size: 30px; }.estimate-days span { font-size: 11px; color: rgba(255,255,255,.65); }
.estimate-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 22px 0; }.estimate-checks span { padding: 8px; border: 1px solid rgba(255,255,255,.2); font-size: 9px; color: rgba(255,255,255,.75); }
.estimate-summary > p { margin: 0; color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.8; }.estimate-summary > p b { color: white; font-family: Arial,sans-serif; font-weight: 600; }
.estimate-empty { justify-content: space-between; }
.estimate-empty > div:nth-child(2) strong { display: block; margin-bottom: 13px; font-size: clamp(30px,2.8vw,43px); font-weight: 780; }
.estimate-empty > div:nth-child(2) p { max-width: 300px; margin: 0; color: rgba(255,255,255,.56); font-size: 11px; line-height: 1.9; }
.completion > div { direction: ltr; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 11px; }
.completion i { display: block; height: 4px; background: rgba(255,255,255,.16); }.completion i.done { background: var(--orange); }
.completion span { font-family: Arial,sans-serif; font-size: 9px; color: rgba(255,255,255,.46); }

@media (max-width: 900px) {
  .step-estimator { grid-template-columns: 1fr 86px .72fr; }.estimate-question { padding: 25px; }.estimate-summary { padding: 25px 18px; }
  .production-benefits > div { min-width: 110px; padding: 11px; }.production-benefits span { font-size: 10px; }
}
@media (max-width: 760px) {
  .home-return { left: 14px; bottom: 14px; width: 48px; height: 48px; }
  .pricing-section .pricing-journey { display: block; padding-top: 115px; padding-bottom: 55px; }.pricing-intro { display: block; margin-bottom: 18px; }.pricing-intro h2 { font-size: 39px; }.pricing-intro p { margin-top: 8px; font-size: 12px; }
  .step-estimator { display: grid; grid-template-columns: 1fr 64px; grid-template-rows: auto auto; }.estimate-question { min-height: 390px; }.estimate-dial { grid-column: 2; grid-row: 1; }.estimate-summary { grid-column: 1 / -1; grid-row: 2; min-height: 220px; }.estimate-summary-top { display: grid; grid-template-columns: 1fr auto; }.estimate-price { font-size: 30px; }.estimate-checks { margin: 14px 0; }
  .production-benefits > div { min-width: 0; padding: 9px; }.production-benefits strong { font-size: 17px; }.production-benefits span { font-size: 9px; }
}

/* V13 — animated estimator icons and odometer */
.estimate-choice { overflow: hidden; }
.choice-icon { position: absolute; top: 15px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #f0efeb; transition: .3s cubic-bezier(.2,.8,.2,1); }
.choice-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.choice-icon svg path,.choice-icon svg rect,.choice-icon svg circle { stroke-dasharray: 70; stroke-dashoffset: 0; }
.estimate-choice strong { margin-top: 43px; font-size: 17px; }
.estimate-choice small { font-size: 11px; }
.estimate-choice.selected .choice-icon { color: white; background: var(--orange); transform: rotate(-8deg) scale(1.12); animation: choiceFloat 2.3s ease-in-out infinite; }
.estimate-choice.selected .choice-icon svg { stroke: white; }
.estimate-choice.selected .choice-icon svg path,.estimate-choice.selected .choice-icon svg rect,.estimate-choice.selected .choice-icon svg circle { animation: iconDraw .65s ease both; }
@keyframes choiceFloat { 50% { transform: rotate(5deg) scale(1.05) translateY(-3px); } }
@keyframes iconDraw { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }

.estimate-summary small { font-size: 9px; letter-spacing: 2.4px; color: rgba(255,255,255,.58); }
.estimate-price { display: flex; align-items: baseline; gap: 9px; direction: ltr; font-family: Arial,sans-serif; font-size: clamp(31px,2.7vw,43px); white-space: nowrap; }
.estimate-price > em { color: white; font-family: 'Estedad Variable',sans-serif; font-size: .46em; font-style: normal; font-weight: 720; }
.odometer { display: inline-flex; height: 1em; align-items: flex-start; overflow: hidden; font-weight: 850; line-height: 1; }
.odometer-digit { --digit: 0; --delay: 0ms; display: block; width: .65em; height: 1em; overflow: hidden; font-weight: 850; }
.odometer-digit i { display: flex; flex-direction: column; width: 100%; transform: translateY(0); transition: transform 1.25s cubic-bezier(.14,.78,.18,1); transition-delay: var(--delay); font-style: normal; }
.odometer-digit.rolling i { transform: translateY(calc(var(--digit) * -1em)); }
.odometer-digit i span { display: block; flex: 0 0 1em; width: 100%; height: 1em; line-height: 1em; text-align: center; }
.odometer-comma { align-self: flex-end; width: .27em; height: 1em; line-height: 1.12em; font-weight: 850; }
.estimate-days strong { font-size: 34px; }.estimate-days span { font-size: 13px; color: rgba(255,255,255,.78); }
.estimate-checks { gap: 9px; }
.estimate-checks span { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 10px 11px; font-size: 11px; color: rgba(255,255,255,.88); }
.estimate-checks span svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: summaryIcon 2.8s ease-in-out infinite; }
.estimate-checks span:nth-child(2) svg { animation-delay: -.7s; }.estimate-checks span:nth-child(3) svg { animation-delay: -1.4s; }.estimate-checks span:nth-child(4) svg { animation-delay: -2.1s; }
.estimate-checks span b { font-weight: 620; }
.estimate-summary > p { font-size: 11px; color: rgba(255,255,255,.62); }
@keyframes summaryIcon { 50% { transform: translateY(-3px) rotate(5deg); stroke: white; } }

@media (max-width: 900px) {
  .estimate-price { font-size: 30px; }.estimate-checks span { padding: 8px; font-size: 9px; }.estimate-checks span svg { width: 17px; height: 17px; }
}

/* V14 — responsive landing pass + progressive estimate */
.pricing-intro h2 { line-height: 1.22; }
.pricing-intro h2 strong { display: inline-block; margin-top: 7px; }
.estimate-summary-foot { margin-top: auto; }
.estimate-summary-foot > p { margin: 13px 0 0; color: rgba(255,255,255,.64); font-size: 11px; line-height: 1.8; }
.estimate-summary-foot > p b { color: white; font-family: Arial,sans-serif; font-weight: 650; }
.estimate-submit { width: 100%; min-height: 48px; border: 1px solid var(--orange); background: var(--orange); color: white; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: .2s ease; }
.estimate-submit:hover { background: white; border-color: white; color: var(--ink); transform: translateY(-2px); }
.completion { margin-top: 12px; }
.estimate-support { margin: 13px 0; padding: 13px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.045); }
.support-expert { display: flex; align-items: center; gap: 11px; }
.support-expert > span { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); }
.support-expert svg { width: 23px; height: 23px; fill: none; stroke: white; stroke-width: 1.6; stroke-linecap: round; }
.support-expert p { margin: 0; }.support-expert strong,.support-expert small { display: block; }.support-expert strong { font-size: 12px; }.support-expert small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.6; }
.support-revisions { display: flex; gap: 7px; margin-top: 11px; }
.support-revisions span { flex: 1; padding: 8px 9px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.76); font-size: 9px; }
.support-revisions b { margin-left: 5px; color: var(--orange); font-family: Arial,sans-serif; font-size: 14px; }

.faq-section .section-head { grid-template-columns: 1fr auto; align-items: center; gap: 42px; }
.faq-section .section-title { font-size: clamp(48px,5vw,72px); line-height: 1.14; letter-spacing: -4px; }
.faq-section .faq-list { margin-top: 4px; }
.faq-section .faq-q { padding: 20px 0; font-size: clamp(16px,1.35vw,20px); line-height: 1.6; }
.faq-section .faq-a { font-size: 13px; }
.faq-section .footer-main { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.faq-section .footer-title { flex: 1; font-size: clamp(28px,3vw,40px); line-height: 1.15; letter-spacing: -2px; }

@media (max-width: 1500px) and (min-width: 961px) {
  .landing-mode .snap-section > .container,.landing-mode .snap-footer .container { width: calc(100% - 176px); max-width: 1280px; margin-right: 96px; margin-left: 80px; }
  .pricing-section .pricing-journey { padding-top: 100px; padding-bottom: 26px; }
  .pricing-intro { margin-bottom: 14px; }.pricing-intro h2 { font-size: clamp(38px,3.45vw,50px); }.pricing-intro p { font-size: 13px; }
  .step-estimator { grid-template-columns: minmax(0,1fr) 96px minmax(280px,.72fr); }
  .estimate-question { padding: 28px; }.estimate-question h3 { font-size: clamp(27px,2.4vw,35px); }.estimate-question > p { margin-bottom: 17px; }
  .estimate-choice { min-height: 101px; }.estimate-summary { padding: 28px 24px; }.estimate-checks { margin: 15px 0; }
  .faq-section { padding-top: 102px; }.faq-section .section-head { margin-bottom: 18px; }.faq-section .footer { padding-top: 20px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .landing-mode .snap-section > .container,.landing-mode .snap-footer .container { width: calc(100% - 132px); margin-right: 78px; margin-left: 54px; }
  .header-inner { height: 78px; }.landing-mode .site-header .header-inner { padding-right: 62px; }
  .snap-nav { width: 60px; }.snap-dot { width: 34px; height: 34px; font-size: 14px; }
  .top-progress { top: 90px; left: 22px; width: min(38vw,370px); }
  .pricing-section,.faq-section { height: auto; min-height: 100svh; overflow: visible; }
  .pricing-section .pricing-journey { height: auto; min-height: 100svh; display: block; padding-top: 112px; padding-bottom: 45px; }
  .pricing-intro { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; }.pricing-intro h2 { font-size: 43px; }.pricing-intro p { font-size: 12px; }
  .step-estimator { grid-template-columns: minmax(0,1fr) 78px; grid-template-rows: minmax(390px,auto) auto; }
  .estimate-question { grid-column: 1; grid-row: 1; min-height: 390px; }.estimate-dial { grid-column: 2; grid-row: 1; }.estimate-summary { grid-column: 1 / -1; grid-row: 2; min-height: 250px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .estimate-summary-top { align-self: start; }.estimate-checks { margin: 0; align-self: center; }.estimate-summary-foot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 18px; }
  .estimate-support { grid-column: 1 / -1; margin: 0; }
  .faq-section { padding-top: 108px; }.faq-section > .container { overflow: visible; }.faq-section .section-title { font-size: 54px; }.faq-section .section-head { grid-template-columns: 1fr auto; }
}

@media (max-width: 760px) {
  .container,.landing-mode .snap-section > .container,.landing-mode .snap-footer .container { width: calc(100% - 28px); margin-inline: auto; }
  .site-header { background: linear-gradient(to bottom,rgba(0,0,0,.86),transparent); }.header-inner { height: 66px; padding-inline: 0 !important; }.brand { font-size: 15px; }.brand-mark { width: 26px; height: 26px; }
  .header-actions .btn-on-dark { display: none; }.header-actions .btn-accent { padding: 9px 11px; font-size: 11px; }.header-actions .arrow { display: none; }
  .snap-nav { top: auto; right: 0; bottom: 0; width: 100%; height: 52px; flex-direction: row; gap: 5px; }.snap-nav::before { display: none; }.snap-dot { width: 32px; height: 32px; font-size: 11px; }.snap-dot.active { color: var(--orange); }
  .home-return { left: 8px; bottom: 4px; width: 44px; height: 44px; z-index: 73; border-color: rgba(5,5,5,.4); }
  .top-progress { top: 72px; left: 14px; width: calc(100% - 28px); }.progress-title { font-size: 7px; }
  .snap-shell { padding-bottom: 52px; }
  .pricing-section .pricing-journey { padding-top: 112px; padding-bottom: 36px; }
  .pricing-intro h2 { font-size: 36px; line-height: 1.3; letter-spacing: -2px; }.pricing-intro h2 strong { margin-top: 5px; }.pricing-intro p { line-height: 1.7; }
  .step-estimator { grid-template-columns: minmax(0,1fr) 54px; }.estimate-question { min-height: 370px; padding: 22px 16px; }.estimate-question h3 { font-size: 27px; }.estimate-question > p { font-size: 12px; }
  .estimate-options { grid-template-columns: 1fr; }.estimate-choice { min-height: 90px; }.estimate-choice strong { margin-top: 38px; }.choice-icon { width: 30px; height: 30px; }.choice-icon svg { width: 18px; height: 18px; }
  .estimate-dial { grid-template-rows: 42px 1fr 42px; }.dial-window strong { font-size: 36px; }.dial-window span { font-size: 14px; }
  .estimate-summary { min-height: 270px; padding: 24px 18px; }.estimate-price { font-size: 28px; }.estimate-checks { grid-template-columns: 1fr 1fr; }.estimate-checks span { font-size: 9px; min-height: 42px; }
  .number-stepper { min-height: 95px; }.size-empty { min-height: 95px; }
  .faq-section { padding: 104px 0 52px; }.faq-section .section-head { display: block; margin-bottom: 24px; }.faq-section .section-title { font-size: 41px; line-height: 1.22; letter-spacing: -2.5px; }
  .faq-section .faq-q { padding: 17px 0; gap: 14px; font-size: 15px; }.faq-section .faq-plus { flex: 0 0 auto; }.faq-section .faq-a { font-size: 12px; }
  .faq-section .footer { padding: 24px 0 68px; }.faq-section .footer-main { display: grid; gap: 16px; }.faq-section .footer-title { font-size: 29px; margin: 0; }.faq-section .footer-main .btn { width: 100%; }.faq-section .footer-bottom { font-size: 9px; }
}

/* V15 — compact tablet landscape / narrow desktop */
@media (max-width: 960px) and (min-width: 761px) {
  .container,.landing-mode .snap-section > .container,.landing-mode .snap-footer .container { width: calc(100% - 40px); margin-inline: auto; }
  .header-inner,.landing-mode .site-header .header-inner { height: 70px; padding-inline: 0; }
  .header-actions .btn { padding: 10px 13px; font-size: 12px; }
  .snap-nav { top: auto; right: 0; bottom: 0; width: 100%; height: 48px; flex-direction: row; gap: 10px; }
  .snap-nav::before { display: none; }.snap-dot { width: 30px; height: 30px; font-size: 11px; }.snap-dot.active { color: var(--orange); }
  .snap-shell { padding-bottom: 48px; }.home-return { left: 9px; bottom: 3px; width: 42px; height: 42px; z-index: 73; }
  .top-progress { top: 78px; left: 16px; width: min(38vw,330px); }
  .pricing-section { min-height: 100svh; height: auto; overflow: visible; }
  .pricing-section .pricing-journey { min-height: calc(100svh - 48px); height: auto; display: grid; grid-template-rows: auto 1fr; padding: 92px 0 24px; }
  .pricing-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 12px; }.pricing-intro h2 { font-size: 37px; line-height: 1.22; }.pricing-intro p { font-size: 11px; }
  .step-estimator { min-height: 500px; grid-template-columns: minmax(0,1fr) 64px minmax(245px,.7fr); grid-template-rows: 1fr; }
  .estimate-question { grid-column: 1; grid-row: 1; min-height: 0; padding: 23px; }.estimate-question h3 { font-size: 28px; }.estimate-question > p { font-size: 11px; margin-bottom: 14px; }
  .estimate-dial { grid-column: 2; grid-row: 1; }
  .estimate-summary { grid-column: 3; grid-row: 1; min-height: 0; display: flex; padding: 22px 18px; gap: 0; }
  .estimate-summary-top { display: block; }.estimate-price { font-size: 26px; }.estimate-days { margin-top: 8px; }.estimate-days strong { font-size: 28px; }
  .estimate-checks { margin: 12px 0; grid-template-columns: 1fr; gap: 5px; }.estimate-checks span { min-height: 34px; padding: 6px 8px; font-size: 8px; }.estimate-checks span svg { width: 15px; height: 15px; }
  .estimate-support { margin: 8px 0; padding: 9px; }.support-expert > span { width: 32px; height: 32px; flex-basis: 32px; }.support-expert strong { font-size: 10px; }.support-expert small { font-size: 8px; }.support-revisions { margin-top: 7px; }.support-revisions span { padding: 6px; font-size: 8px; }.support-revisions b { font-size: 12px; }
  .estimate-summary-foot { display: block; margin-top: auto; }.estimate-summary-foot > p { font-size: 8px; }.estimate-submit { min-height: 42px; font-size: 11px; }
  .estimate-options { gap: 8px; }.estimate-choice { min-height: 108px; padding: 14px; }.estimate-choice strong { font-size: 15px; }.estimate-choice small { font-size: 9px; }
  .faq-section { padding-bottom: 48px; }.faq-section .footer { padding-bottom: 58px; }
}

/* V16 — MotionChi custom wordmark */
.motionchi-brand { direction: ltr; gap: 0; }
.motionchi-word { position: relative; display: inline-flex; align-items: baseline; direction: ltr; padding: 3px 0 7px; font-family: Arial,"Helvetica Neue",sans-serif; font-size: 25px; font-weight: 900; line-height: 1; letter-spacing: -1.7px; }
.motionchi-word b,.motionchi-word em { font: inherit; font-style: normal; }
.motionchi-word b { color: var(--ink); }.motionchi-word em { margin-left: 1px; color: var(--orange); }
.motionchi-brand.is-light .motionchi-word b { color: white; }
.motionchi-word::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46%; height: 2px; background: var(--orange); }
.motionchi-word i { position: absolute; right: 46%; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(239,35,60,.18); animation: motionchiSignal 2.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes motionchiSignal { 0%,100% { transform: translateX(0); } 50% { transform: translateX(46px); } }
.sidebar .motionchi-word { font-size: 23px; }.footer .motionchi-word { font-size: 24px; }
@media (max-width: 760px) { .motionchi-word { font-size: 20px; letter-spacing: -1.2px; }.motionchi-word i { animation-name: motionchiSignalMobile; } @keyframes motionchiSignalMobile { 0%,100% { transform: translateX(0); } 50% { transform: translateX(34px); } } }

/* V17 — estimator completion scene */
.estimate-actions { width: 100%; direction: ltr; justify-content: space-between; }
.estimate-actions button { direction: rtl; }
.estimate-finale { min-height: 150px; margin-top: 20px; padding: 15px 18px; display: flex; align-items: center; justify-content: center; gap: 22px; border: 1px dashed #c4c1ba; background: #faf9f5; color: #8a867f; transition: .35s ease; }
.estimate-finale > div:last-child strong,.estimate-finale > div:last-child span { display: block; }.estimate-finale > div:last-child strong { font-size: 17px; color: #77736c; }.estimate-finale > div:last-child span { margin-top: 6px; font-size: 10px; }
.finale-motion { position: relative; flex: 0 0 94px; width: 94px; height: 94px; display: grid; place-items: center; }
.finale-ring { position: absolute; border: 1px solid #bcb8b0; border-radius: 50%; }.finale-ring.ring-a { inset: 5px; animation: finaleSpin 7s linear infinite; }.finale-ring.ring-b { inset: 18px; border-style: dashed; animation: finaleSpin 5s linear infinite reverse; }
.finale-motion svg { position: relative; z-index: 2; width: 42px; height: 42px; fill: none; stroke: #aaa69e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.finale-motion i,.finale-motion b,.finale-motion em { position: absolute; width: 7px; height: 7px; background: #bdb9b1; }.finale-motion i { top: 4px; right: 23px; border-radius: 50%; }.finale-motion b { bottom: 9px; left: 16px; transform: rotate(20deg); }.finale-motion em { top: 23px; left: 2px; transform: rotate(45deg); }
.estimate-finale.complete { border-style: solid; border-color: var(--orange); background: #fff3f4; color: var(--ink); }
.estimate-finale.complete > div:last-child strong { color: var(--ink); }
.estimate-finale.complete .finale-ring { border-color: var(--orange); }.estimate-finale.complete .finale-motion svg { stroke: var(--orange); stroke-dasharray: 90; animation: finaleCheck .8s ease both; }
.estimate-finale.complete .finale-motion i,.estimate-finale.complete .finale-motion b,.estimate-finale.complete .finale-motion em { background: var(--orange); animation: finaleConfetti 1.5s ease-in-out infinite; }.estimate-finale.complete .finale-motion b { animation-delay: -.5s; }.estimate-finale.complete .finale-motion em { animation-delay: -1s; }
@keyframes finaleSpin { to { transform: rotate(360deg); } }
@keyframes finaleCheck { from { stroke-dashoffset: 90; transform: scale(.6); } to { stroke-dashoffset: 0; transform: scale(1); } }
@keyframes finaleConfetti { 50% { transform: translateY(-7px) rotate(65deg) scale(1.3); } }
@media (max-width: 960px) { .estimate-finale { min-height: 112px; margin-top: 12px; padding: 10px; gap: 12px; }.finale-motion { flex-basis: 72px; width: 72px; height: 72px; }.finale-motion svg { width: 34px; height: 34px; }.estimate-finale > div:last-child strong { font-size: 14px; } }
@media (max-width: 760px) { .estimate-finale { min-height: 100px; }.finale-motion { flex-basis: 64px; width: 64px; height: 64px; }.estimate-finale > div:last-child span { font-size: 9px; } }

/* V18 — unmistakable estimator finish */
.estimate-last-hint { margin-top: 18px; padding: 11px 14px; display: flex; align-items: center; gap: 9px; border: 1px dashed #cbc7c0; color: #77736c; font-size: 10px; }
.estimate-last-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(239,35,60,.1); animation: lastHintPulse 1.8s ease-in-out infinite; }
.estimate-ready-note { display: flex; align-items: center; gap: 9px; padding: 10px 0; color: rgba(255,255,255,.72); font-size: 10px; }
.estimate-ready-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(239,35,60,.18); }
.estimate-question:has(.estimate-result) { padding-top: 24px; padding-bottom: 20px; }
.estimate-question:has(.estimate-result) > .estimate-count { margin-bottom: 9px; }
.estimate-question:has(.estimate-result) .estimate-actions { padding-top: 10px; }
.estimate-result { position: relative; min-height: 0; padding: 20px 22px; border: 1px solid var(--orange); background: linear-gradient(135deg,#fff7f8 0%,#fff 64%); overflow: hidden; animation: resultReveal .55s cubic-bezier(.18,.88,.25,1) both; }
.estimate-result::before { content: ""; position: absolute; top: -115px; left: -95px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle,rgba(239,35,60,.12),rgba(239,35,60,0) 68%); }
.result-heading { min-height: 88px; padding-left: 112px; }
.result-heading small { display: block; color: var(--orange); font-family: 'Estedad Variable',sans-serif; font-size: 10px; font-weight: 730; letter-spacing: 0; }
.result-heading h3 { margin: 2px 0 0; font-size: clamp(31px,3vw,43px); font-weight: 850; letter-spacing: -2px; }
.result-heading p { margin: 4px 0 0; color: #6d6962; font-size: 11px; line-height: 1.7; }
.result-celebration { position: absolute; z-index: 2; top: 17px; left: 25px; width: 82px; height: 82px; display: grid; place-items: center; animation: celebrationPop .8s .12s cubic-bezier(.14,.9,.2,1.25) both; }
.result-celebration svg { position: relative; z-index: 3; width: 36px; height: 36px; fill: none; stroke: white; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; animation: resultCheck .65s .62s ease both; }
.result-celebration::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 8px 22px rgba(239,35,60,.28); }
.result-orbit { position: absolute; border: 1px solid var(--orange); border-radius: 50%; }
.result-orbit.orbit-one { inset: 3px; border-style: dashed; animation: finaleSpin 7s linear infinite; }
.result-orbit.orbit-two { inset: 9px; opacity: .42; animation: finaleSpin 4s linear infinite reverse; }
.result-celebration > i,.result-celebration > b,.result-celebration > em { position: absolute; z-index: 4; width: 7px; height: 7px; background: var(--orange); animation: resultConfetti 1.7s ease-in-out infinite; }
.result-celebration > i { top: -1px; right: 12px; border-radius: 50%; }.result-celebration > b { bottom: 4px; left: 3px; animation-delay: -.55s; }.result-celebration > em { top: 20px; left: -4px; transform: rotate(45deg); animation-delay: -1.05s; }
.result-price { position: relative; min-height: 86px; padding: 13px 18px 16px; display: flex; flex-direction: column; justify-content: center; background: var(--ink); color: white; overflow: hidden; animation: resultRise .55s .25s ease both; }
.result-price::after { content: ""; position: absolute; top: -48px; left: -20px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.result-price > span { color: rgba(255,255,255,.58); font-size: 9px; }
.result-price > strong { position: relative; z-index: 2; margin-top: 3px; display: flex; align-items: baseline; gap: 8px; direction: ltr; font-family: Arial,sans-serif; font-size: clamp(29px,3.1vw,43px); line-height: 1; }
.result-price > strong em { font-family: 'Estedad Variable',sans-serif; font-size: .42em; font-style: normal; }
.result-price > i { position: absolute; right: 0; bottom: 0; width: 100%; height: 4px; background: var(--orange); transform-origin: right; animation: resultFill 1.2s .35s cubic-bezier(.2,.75,.15,1) both; }
.result-items { margin-top: 10px; display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid #d5d1c9; background: white; animation: resultRise .55s .42s ease both; }
.result-items > span { min-width: 0; padding: 9px 7px; display: flex; align-items: center; justify-content: center; gap: 5px; border-left: 1px solid #e0ddd6; color: #4f4c47; font-size: 9px; text-align: center; }
.result-items > span:last-child { border-left: 0; }.result-items i { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #fff0f2; color: var(--orange); font-family: Arial,sans-serif; font-size: 10px; font-style: normal; font-weight: 800; }
.result-actions { margin-top: 11px; display: flex; align-items: center; gap: 10px; animation: resultRise .55s .58s ease both; }
.result-submit { flex: 1; min-height: 46px; padding: 0 18px; border: 1px solid var(--orange); background: var(--orange); color: white; font: inherit; font-size: 12px; font-weight: 780; cursor: pointer; transition: .22s ease; }
.result-submit:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.result-edit { min-height: 46px; padding: 0 12px; border: 0; background: transparent; color: #6f6b64; font: inherit; font-size: 9px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@keyframes resultReveal { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes celebrationPop { from { opacity: 0; transform: scale(.25) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes resultCheck { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes resultFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes resultRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes resultConfetti { 50% { transform: translateY(-6px) rotate(70deg) scale(1.25); } }
@keyframes lastHintPulse { 50% { box-shadow: 0 0 0 9px rgba(239,35,60,0); } }
@media (max-width: 1100px) and (min-width: 761px) {
  .estimate-result { padding: 16px; }.result-heading { min-height: 76px; padding-left: 88px; }.result-celebration { top: 13px; left: 17px; width: 67px; height: 67px; }.result-celebration svg { width: 29px; height: 29px; }
  .result-price { min-height: 74px; }.result-items { grid-template-columns: repeat(3,1fr); }.result-items > span:nth-child(3) { border-left: 0; }.result-items > span:nth-child(n+4) { border-top: 1px solid #e0ddd6; }
}
@media (max-width: 760px) {
  .estimate-question:has(.estimate-result) { min-height: 560px; padding: 18px 14px; }.estimate-result { padding: 15px; }
  .result-heading { min-height: 78px; padding-left: 78px; }.result-heading h3 { font-size: 32px; }.result-heading p { font-size: 9px; }
  .result-celebration { top: 13px; left: 14px; width: 64px; height: 64px; }.result-celebration svg { width: 28px; height: 28px; }
  .result-price { min-height: 78px; padding-inline: 13px; }.result-price > strong { font-size: clamp(25px,7.2vw,34px); }
  .result-items { grid-template-columns: 1fr 1fr; }.result-items > span { justify-content: flex-start; min-height: 39px; padding: 8px; border-top: 1px solid #e0ddd6; }.result-items > span:nth-child(-n+2) { border-top: 0; }.result-items > span:nth-child(even) { border-left: 0; }
  .result-actions { align-items: stretch; flex-direction: column; gap: 3px; }.result-submit { flex: none; width: 100%; }.result-edit { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .estimate-result,.result-celebration,.result-price,.result-items,.result-actions,.result-price > i,.result-celebration svg { animation: none; } }

/* V19 — account-first project intake and customer workspace */
.field input[type="tel"],.field input[type="url"],.field input[type="number"] { width: 100%; min-height: 52px; border: 1px solid var(--line); background: var(--paper); padding: 14px; color: var(--ink); outline: none; font: inherit; }
.field input[type="tel"]:focus,.field input[type="url"]:focus,.field input[type="number"]:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(239,35,60,.1); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.wizard-shell { max-width: 1160px; }
.stepper { grid-template-columns: repeat(5,1fr); }
.stepper-item.active { background: var(--orange); }
.wizard-section-tag { margin-bottom: 10px; color: var(--orange); font-family: Arial,sans-serif; font-size: 9px; letter-spacing: 2.2px; direction: ltr; text-align: right; }
.mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 5px; }
.mode-selector .choice { min-height: 96px; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.script-metric.accent { background: var(--ink); color: white; }.script-metric.accent small { color: rgba(255,255,255,.55); }.script-metric.accent strong { color: white; }
.asset-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.real-upload { position: relative; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #b3afa7; transition: .2s ease; }
.real-upload:hover { border-color: var(--orange); background: #fff5f6; transform: translateY(-2px); }
.real-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-icon { width: 38px; height: 38px; margin-bottom: 10px; display: grid; place-items: center; background: var(--ink); color: white; font-family: Arial,sans-serif; font-size: 19px; }
.upload-files { max-width: 90%; margin-top: 9px; padding: 5px 8px; background: #e9e7e1; color: #44413c; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-upload { min-height: 145px; }
.edit-notice { margin-top: 12px; padding: 15px 17px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--orange); background: #fff4f5; }
.edit-notice > span { flex: 0 0 35px; width: 35px; height: 35px; display: grid; place-items: center; background: var(--orange); color: white; animation: choiceFloat 2.3s ease-in-out infinite; }
.edit-notice strong,.edit-notice p { display: block; margin: 0; }.edit-notice p { margin-top: 3px; color: #68645d; font-size: 11px; line-height: 1.7; }
.voice-price-strip { margin-top: 18px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ink); }.voice-price-strip span { color: #6d6962; font-size: 11px; }.voice-price-strip strong { font-size: 22px; }
.account-step { min-height: 550px; }
.send-otp { width: 100%; margin-top: 22px; min-height: 82px; padding: 13px 17px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--ink); background: white; color: var(--ink); text-align: right; font: inherit; cursor: pointer; transition: .2s ease; }
.send-otp:hover { background: var(--ink); color: white; }.send-otp > span { width: 48px; height: 48px; display: grid; place-items: center; background: var(--orange); color: white; font-family: Arial,sans-serif; font-size: 10px; letter-spacing: 1px; }.send-otp strong,.send-otp small { display: block; }.send-otp small { margin-top: 4px; color: #77736c; font-size: 10px; }.send-otp:hover small { color: rgba(255,255,255,.58); }.send-otp > b { font-size: 21px; }
.account-match { margin-top: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #bdb9b1; }.account-match i { flex: 0 0 35px; width: 35px; height: 35px; display: grid; place-items: center; background: var(--ink); color: white; font-style: normal; }.account-match.found { border-color: #2e8b48; background: #f0faf3; }.account-match.found i { background: #2e8b48; }.account-match strong,.account-match span { display: block; }.account-match span { margin-top: 3px; color: #68645d; font-size: 10px; }
.otp-panel { margin-top: 10px; padding: 17px; display: grid; grid-template-columns: 1fr 170px 140px; align-items: center; gap: 12px; background: var(--ink); color: white; }.otp-panel span,.otp-panel small { display: block; }.otp-panel small { margin-top: 4px; color: rgba(255,255,255,.56); font-size: 9px; }.otp-input { width: 100%; height: 52px; border: 1px solid rgba(255,255,255,.45); background: #171717; color: white; text-align: center; direction: ltr; font-family: Arial,sans-serif; font-size: 25px; letter-spacing: 8px; outline: none; }.otp-input:focus { border-color: var(--orange); }.btn-verified { background: #2e8b48; color: white; border: 1px solid #2e8b48; }
.account-security { margin-top: 18px; display: flex; gap: 10px; align-items: center; color: #68645d; }.account-security > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #aaa69e; }.account-security p { margin: 0; }.account-security strong,.account-security small { display: block; }.account-security strong { color: var(--ink); font-size: 11px; }.account-security small { margin-top: 2px; font-size: 9px; }
.contact-confirm { padding: 15px 17px; border: 1px solid var(--line); background: var(--paper); }.contact-confirm span,.contact-confirm strong,.contact-confirm small { display: block; }.contact-confirm span { color: #77736c; font-size: 9px; }.contact-confirm strong { margin-top: 4px; font-family: Arial,sans-serif; direction: ltr; text-align: right; }.contact-confirm small { margin-top: 4px; color: #77736c; }
.gateway-card { margin-top: 16px; padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; border: 1px solid rgba(255,255,255,.2); }.gateway-card span { font-size: 11px; }.gateway-card b { grid-row: 1 / span 2; grid-column: 2; color: var(--orange); font-family: Arial,sans-serif; font-size: 22px; }.gateway-card small { color: rgba(255,255,255,.45); font-size: 8px; }
.success-scene { min-height: calc(100vh - 150px); display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 50px; padding: 30px; border: 1px solid var(--ink); background: white; overflow: hidden; }
.success-motion { position: relative; width: min(280px,26vw); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; border: 1px solid var(--orange); border-radius: 50%; animation: celebrationPop .8s ease both; }.success-motion::before,.success-motion::after { content: ""; position: absolute; border: 1px dashed var(--orange); border-radius: 50%; animation: finaleSpin 9s linear infinite; }.success-motion::before { inset: 16px; }.success-motion::after { inset: 38px; animation-direction: reverse; animation-duration: 6s; }.success-motion svg { position: relative; z-index: 2; width: 42%; height: 42%; padding: 18px; border-radius: 50%; background: var(--orange); fill: none; stroke: white; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; animation: resultCheck .7s .5s ease both; }.success-motion span,.success-motion i,.success-motion b { position: absolute; z-index: 3; width: 13px; height: 13px; background: var(--orange); }.success-motion span { top: 4%; right: 24%; border-radius: 50%; animation: resultConfetti 1.5s infinite; }.success-motion i { left: 2%; bottom: 30%; transform: rotate(45deg); animation: resultConfetti 1.8s -.4s infinite; }.success-motion b { right: 7%; bottom: 13%; animation: resultConfetti 1.6s -.8s infinite; }
.success-copy h2 { margin: 0; font-size: clamp(48px,6vw,82px); letter-spacing: -4px; }.success-copy > p { max-width: 600px; color: #66625b; font-size: 16px; line-height: 2; }.success-code { width: fit-content; margin: 24px 0; padding: 12px 16px; border: 1px solid var(--ink); }.success-code span { display: block; color: #77736c; font-size: 8px; }.success-code strong { font-family: Arial,sans-serif; font-size: 18px; letter-spacing: 2px; }
.success-path { display: flex; gap: 0; margin: 22px 0; overflow-x: auto; }.success-path span { min-width: 110px; padding: 10px 13px; border: 1px solid #cbc8c0; border-left: 0; color: #77736c; font-size: 9px; white-space: nowrap; }.success-path span:last-child { border-left: 1px solid #cbc8c0; }.success-path .done { background: var(--ink); color: white; }.success-path .current { background: var(--orange); border-color: var(--orange); color: white; }.success-actions { display: flex; gap: 10px; }
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: .8fr 1.2fr; background: var(--paper); }.auth-brand { padding: 42px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: white; }.auth-brand > span { font-size: clamp(36px,5vw,70px); font-weight: 850; line-height: 1.2; }.auth-card { width: min(520px,calc(100% - 50px)); margin: auto; padding: 38px; border: 1px solid var(--ink); background: white; }.auth-card h1 { margin: 10px 0 5px; font-size: 43px; }.auth-card > p { color: #68645d; line-height: 1.9; }.auth-index { color: var(--orange); font-family: Arial,sans-serif; font-size: 9px; letter-spacing: 2px; }.auth-actions { margin-top: 24px; display: flex; justify-content: space-between; gap: 10px; }.auth-otp { margin-top: 18px; }.auth-otp label,.auth-otp small { display: block; }.auth-otp small { margin-top: 7px; color: #77736c; font-size: 9px; }.auth-otp .otp-input { margin-top: 7px; background: var(--ink); }.hidden { display: none !important; }
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }.wallet-balance { min-height: 210px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: white; }.wallet-balance small { color: rgba(255,255,255,.5); }.wallet-balance strong { font-size: 42px; }.wallet-balance span { max-width: 340px; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.8; }.wallet-stats { padding: 22px; display: grid; gap: 18px; }.wallet-stats div { padding-bottom: 16px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.wallet-stats span { color: #77736c; }.payment-row { padding: 17px 22px; display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }.payment-row small { color: #2e8b48; }.notice-item { padding: 22px; display: grid; grid-template-columns: 10px 1fr; gap: 13px; border-bottom: 1px solid var(--line); }.notice-item > i { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(239,35,60,.1); }.notice-item strong { font-size: 14px; }.notice-item p { margin: 5px 0; color: #68645d; font-size: 11px; }.notice-item small { color: #77736c; font-size: 9px; }
.studio-mobile-nav { display: none; }
.timeline { grid-template-columns: repeat(6,1fr); }
.waiting-motion { height: 55px; display: flex; align-items: center; justify-content: center; gap: 6px; }.waiting-motion i { width: 8px; height: 8px; background: var(--orange); animation: waitingDot 1s ease-in-out infinite; }.waiting-motion i:nth-child(2) { animation-delay: -.66s; }.waiting-motion i:nth-child(3) { animation-delay: -.33s; } @keyframes waitingDot { 50% { transform: translateY(-11px); } }

@media (max-width: 900px) {
  .otp-panel { grid-template-columns: 1fr 145px; }.otp-panel button { grid-column: 1 / -1; }.success-scene { grid-template-columns: .55fr 1.45fr; gap: 25px; }.success-motion { width: min(230px,27vw); }
}
@media (max-width: 760px) {
  .studio-content { padding: 20px 14px 95px; }.studio-top { height: 68px; }.studio-top .top-left .btn { display: none; }
  .wizard-head { margin-bottom: 17px; }.wizard-head h2 { font-size: 28px; }.wizard-head p { font-size: 11px; }
  .stepper { grid-template-columns: repeat(5,1fr); margin-bottom: 13px; }.stepper-item { min-height: 48px; justify-content: center; padding: 7px; }.step-no { width: 25px; height: 25px; }
  .wizard-card { padding: 19px 14px; }.wizard-card h3 { font-size: 25px; }.wizard-card > p { font-size: 13px; }
  .mode-selector,.brief-grid,.asset-upload-grid,.wallet-grid { grid-template-columns: 1fr; }.mode-selector .choice { min-height: 84px; }.script-meta { grid-template-columns: 1fr; }.script-metric { display: flex; align-items: center; justify-content: space-between; }.script-metric strong { font-size: 17px; }
  .real-upload { min-height: 128px; }.otp-panel { grid-template-columns: 1fr; }.otp-panel button { grid-column: auto; }.otp-input { font-size: 21px; }.account-step { min-height: 0; }
  .summary-grid { grid-template-columns: 1fr; }.checkout-box { position: static; }.success-scene { min-height: auto; grid-template-columns: 1fr; gap: 25px; padding: 24px 17px; }.success-motion { width: 170px; }.success-copy h2 { font-size: 52px; }.success-copy > p { font-size: 13px; }.success-actions { flex-direction: column; }.success-actions .btn { width: 100%; }
  .auth-screen { grid-template-columns: 1fr; }.auth-brand { min-height: 140px; padding: 25px 20px; }.auth-brand > span { font-size: 25px; }.auth-card { width: calc(100% - 28px); margin: -25px auto 30px; padding: 25px 17px; z-index: 2; }.auth-card h1 { font-size: 35px; }
  .studio-mobile-nav { position: fixed; z-index: 80; right: 0; left: 0; bottom: 0; height: 70px; padding: 7px 6px max(7px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); background: var(--ink); border-top: 1px solid rgba(255,255,255,.2); }.studio-mobile-nav button { border: 0; background: transparent; color: rgba(255,255,255,.55); font: inherit; font-size: 8px; }.studio-mobile-nav button i,.studio-mobile-nav button span { display: block; font-style: normal; }.studio-mobile-nav button i { margin-bottom: 2px; font-size: 17px; }.studio-mobile-nav button.active { color: white; }.studio-mobile-nav .nav-new i { width: 35px; height: 35px; margin: -19px auto 2px; display: grid; place-items: center; background: var(--orange); color: white; border: 4px solid var(--ink); font-size: 21px; }
  .payment-row { grid-template-columns: 1fr auto; }.payment-row small { grid-column: 1 / -1; }.timeline { grid-template-columns: repeat(6,120px); }
}

/* V20 — standalone cinematic glass project flow */
body.project-flow-mode { min-height: 100%; overflow-x: hidden; background: #08080a; color: white; }
.project-flow { position: relative; min-height: 100vh; padding-bottom: 45px; overflow: hidden; background: radial-gradient(circle at 18% 18%,rgba(239,35,60,.18),transparent 30%),radial-gradient(circle at 84% 68%,rgba(255,255,255,.07),transparent 28%),linear-gradient(135deg,#070709,#111116 56%,#070709); }
.project-flow::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom,black,transparent 88%); }
.flow-ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }.flow-ambient > i { position: absolute; border-radius: 50%; filter: blur(3px); opacity: .65; animation: flowOrb 11s ease-in-out infinite alternate; }.flow-ambient > i:nth-child(1) { top: 12%; right: 8%; width: 190px; height: 190px; border: 1px solid rgba(239,35,60,.65); }.flow-ambient > i:nth-child(2) { bottom: 5%; left: 8%; width: 290px; height: 290px; background: rgba(239,35,60,.08); animation-delay: -4s; }.flow-ambient > i:nth-child(3) { top: 44%; left: 38%; width: 70px; height: 70px; background: rgba(255,255,255,.08); animation-delay: -7s; }.flow-ambient > span { position: absolute; top: 0; left: 12%; width: 1px; height: 100%; background: linear-gradient(transparent,rgba(239,35,60,.5),transparent); animation: flowScan 7s linear infinite; }
.flow-header { position: relative; z-index: 5; height: 84px; padding: 0 clamp(24px,4vw,70px); display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(9,9,11,.58); backdrop-filter: blur(20px); }
.flow-header .motionchi-brand { flex: 0 0 auto; }.flow-header-center { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.5); }.flow-header-center span { font-family: Arial,sans-serif; font-size: 8px; letter-spacing: 2.5px; }.flow-header-center b { color: white; font-size: 11px; }.flow-header-actions { display: flex; gap: 8px; }.flow-header-actions button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.04); color: white; font: inherit; font-size: 10px; cursor: pointer; backdrop-filter: blur(12px); transition: .2s ease; }.flow-header-actions button:hover { border-color: var(--orange); background: rgba(239,35,60,.14); }.flow-header-actions .panel-link { border-color: var(--orange); background: var(--orange); }
.flow-progress { position: relative; z-index: 4; width: min(1280px,calc(100% - 80px)); margin: 25px auto 0; display: grid; grid-template-columns: repeat(5,1fr); direction: rtl; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.045); backdrop-filter: blur(18px); overflow: hidden; }
.flow-step { position: relative; min-height: 68px; padding: 13px 17px; display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 9px; border-left: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.36); transition: .4s ease; overflow: hidden; }.flow-step:last-child { border-left: 0; }.flow-step::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); opacity: 0; transition: .35s; }.flow-step span { position: relative; z-index: 2; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid currentColor; font-family: Arial,sans-serif; font-size: 9px; }.flow-step b { position: relative; z-index: 2; font-size: 11px; }.flow-step i { position: absolute; right: 0; bottom: 0; width: 0; height: 3px; background: var(--orange); transition: width .6s cubic-bezier(.2,.85,.2,1); }.flow-step.active { color: white; background: rgba(239,35,60,.12); }.flow-step.active::before { opacity: 1; }.flow-step.active span { border-color: var(--orange); background: var(--orange); }.flow-step.active i,.flow-step.done i { width: 100%; }.flow-step.done { color: rgba(255,255,255,.72); }.flow-step.done span { border-color: var(--orange); color: var(--orange); }.flow-step.done span::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; background: #151519; color: var(--orange); font-size: 12px; }
.flow-layout { position: relative; z-index: 3; width: min(1280px,calc(100% - 80px)); margin: 18px auto 0; display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 18px; direction: rtl; align-items: start; }
.flow-live { grid-column: 2; grid-row: 1; }
.flow-content { grid-column: 1; grid-row: 1; }
.flow-live { position: sticky; top: 18px; min-height: 510px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; color: white; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); backdrop-filter: blur(26px); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }.flow-live::after { content: ""; position: absolute; right: -75px; bottom: -90px; width: 230px; height: 230px; border-radius: 50%; background: rgba(239,35,60,.22); filter: blur(45px); }.flow-live-index { position: relative; z-index: 2; font-family: Arial,sans-serif; font-size: 76px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.42); }.flow-live small,.flow-live strong,.flow-live span { position: relative; z-index: 2; display: block; }.flow-live small { font-family: Arial,sans-serif; font-size: 8px; letter-spacing: 2px; color: rgba(255,255,255,.42); }.flow-live strong { margin-top: 8px; font-size: 24px; line-height: 1.5; }.flow-live > div:nth-child(2) > span { margin-top: 7px; color: rgba(255,255,255,.46); font-size: 10px; }.flow-live-orbit { position: absolute !important; top: 90px; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); }.flow-live-orbit i,.flow-live-orbit b,.flow-live-orbit em { position: absolute; inset: 0; border: 1px solid rgba(239,35,60,.75); border-radius: 50%; animation: finaleSpin 10s linear infinite; }.flow-live-orbit b { inset: 19px; border-style: dashed; animation-duration: 7s; animation-direction: reverse; }.flow-live-orbit em { inset: 48px; background: rgba(239,35,60,.18); border: 0; box-shadow: 0 0 55px rgba(239,35,60,.34); animation: flowPulse 2.7s ease-in-out infinite; }
.flow-content { min-width: 0; direction: rtl; }.flow-card { animation: flowCardIn .55s cubic-bezier(.18,.88,.25,1) both; transform-origin: 50% 20%; }.flow-card.is-leaving { animation: flowCardOut .23s ease both; pointer-events: none; }
.project-flow .wizard-card { position: relative; min-height: 510px; padding: clamp(24px,3vw,42px); border: 1px solid rgba(255,255,255,.42); background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.72)); backdrop-filter: blur(28px) saturate(125%); box-shadow: 0 30px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.9); color: var(--ink); overflow: hidden; }.project-flow .wizard-card::before { content: ""; position: absolute; top: -140px; left: -120px; width: 310px; height: 310px; border-radius: 50%; background: rgba(239,35,60,.08); filter: blur(3px); pointer-events: none; }.project-flow .wizard-card > * { position: relative; z-index: 2; }
.project-flow .wizard-card h3 { font-size: clamp(28px,3vw,42px); letter-spacing: -2px; }.project-flow .wizard-card > p { max-width: 760px; margin-bottom: 20px; font-size: 13px; }.project-flow .wizard-section-tag { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(239,35,60,.25); background: rgba(239,35,60,.08); }
.project-flow .choice,.project-flow .style-choice,.project-flow .upload-zone,.project-flow .script-metric,.project-flow .summary-block,.project-flow .contact-confirm { background: rgba(255,255,255,.46); border-color: rgba(5,5,5,.2); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transition: transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease; }.project-flow .choice:hover,.project-flow .style-choice:hover,.project-flow .upload-zone:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 14px 28px rgba(12,12,15,.1),inset 0 1px 0 white; }.project-flow .choice.selected { background: rgba(255,240,242,.78); box-shadow: 0 0 0 1px var(--orange),0 14px 30px rgba(239,35,60,.1); }
.project-flow .field input,.project-flow .field textarea,.project-flow .field select { border-color: rgba(5,5,5,.2); background: rgba(255,255,255,.42); backdrop-filter: blur(10px); }.project-flow .field input:focus,.project-flow .field textarea:focus,.project-flow .field select:focus { border-color: var(--orange); background: rgba(255,255,255,.76); box-shadow: 0 0 0 4px rgba(239,35,60,.09); }
.project-flow .wizard-actions { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(5,5,5,.13); }.project-flow .wizard-actions .btn-dark { position: relative; min-width: 190px; overflow: hidden; }.project-flow .wizard-actions .btn-dark:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; transform: skewX(-20deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation: flowButtonShine 2.7s ease-in-out infinite; }
.project-flow .price-box { background: rgba(5,5,7,.92); backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.15); }.project-flow .otp-panel { background: rgba(5,5,7,.9); backdrop-filter: blur(16px); }.project-flow .help-box { background: rgba(239,35,60,.07); }.project-flow .success-scene { min-height: 510px; border-color: rgba(255,255,255,.35); background: linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.74)); backdrop-filter: blur(28px); box-shadow: 0 30px 80px rgba(0,0,0,.32); color: var(--ink); }
.success-layout { grid-template-columns: minmax(0,1fr) 250px; }.success-layout .flow-live { min-height: 510px; }
@keyframes flowOrb { to { transform: translate(55px,35px) scale(1.16); } }
@keyframes flowScan { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }
@keyframes flowPulse { 50% { transform: scale(.74); opacity: .5; } }
@keyframes flowCardIn { from { opacity: 0; transform: translateY(28px) rotateX(4deg) scale(.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes flowCardOut { to { opacity: 0; transform: translateY(-18px) scale(.985); filter: blur(6px); } }
@keyframes flowButtonShine { 0%,35% { left: -45%; } 70%,100% { left: 115%; } }

@media (max-width: 1000px) {
  .flow-progress,.flow-layout { width: calc(100% - 40px); }.flow-layout { grid-template-columns: minmax(0,1fr) 190px; }.flow-live { min-height: 470px; padding: 19px; }.flow-live-index { font-size: 60px; }.flow-live-orbit { width: 120px; height: 120px; }.flow-step { padding: 10px; grid-template-columns: 27px 1fr; }.flow-step b { font-size: 9px; }
}
@media (max-width: 760px) {
  body.project-flow-mode { overflow-y: auto; }.project-flow { padding-bottom: 24px; }.project-flow::before { background-size: 36px 36px; }
  .flow-header { height: 68px; padding: 0 14px; }.flow-header-center { display: none; }.flow-header-actions button:first-child { display: none; }.flow-header-actions button { min-height: 34px; padding: 0 10px; font-size: 8px; }
  .flow-progress { width: calc(100% - 28px); margin-top: 12px; }.flow-step { min-height: 48px; padding: 8px 4px; display: grid; place-items: center; border-left-color: rgba(255,255,255,.09); }.flow-step span { width: 25px; height: 25px; }.flow-step b { display: none; }
  .flow-layout,.success-layout { width: calc(100% - 28px); margin-top: 12px; display: block; }.flow-live { position: relative; top: auto; min-height: 80px; margin-bottom: 10px; padding: 12px 14px; display: grid; grid-template-columns: 50px 1fr; align-items: center; }.flow-live-index { grid-row: 1; font-size: 38px; }.flow-live > div:nth-child(2) { grid-column: 2; }.flow-live strong { margin-top: 2px; font-size: 17px; }.flow-live-orbit { display: none; }
  .project-flow .wizard-card { min-height: 0; padding: 21px 14px; }.project-flow .wizard-card h3 { font-size: 27px; letter-spacing: -1px; }.project-flow .wizard-card > p { font-size: 11px; }.project-flow .wizard-actions { position: sticky; bottom: 0; z-index: 8; margin: 24px -14px -21px; padding: 12px 14px; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); }.project-flow .wizard-actions .btn { min-width: 0; flex: 1; padding-inline: 10px; font-size: 11px; }
  .project-flow .success-scene { min-height: 0; padding: 24px 16px; }.success-layout .flow-live { min-height: 80px; }
}

/* V21 — softer iPhone-like glass scenes */
.project-flow { background: radial-gradient(circle at 78% 12%,rgba(255,255,255,.08),transparent 25%),radial-gradient(circle at 8% 88%,rgba(239,35,60,.09),transparent 28%),linear-gradient(145deg,#070708,#131316 58%,#09090b); }
.flow-ambient > i:nth-child(1) { border-color: rgba(255,255,255,.15); }.flow-ambient > i:nth-child(2) { background: rgba(239,35,60,.06); }.flow-ambient > span { opacity: .35; }
.flow-header { background: rgba(14,14,17,.68); backdrop-filter: blur(30px) saturate(150%); }.flow-header-actions button { border-radius: 16px; }.flow-header-actions .panel-link { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.12); }
.flow-progress { padding: 6px; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 18px 45px rgba(0,0,0,.16); }
.flow-step { min-height: 57px; padding: 10px 13px; border: 1px solid transparent; border-radius: 18px; }.flow-step:last-child { border-left: 1px solid transparent; }.flow-step i { right: 18px; left: 18px; bottom: 5px; height: 2px; border-radius: 999px; }.flow-step.active { border-color: rgba(255,255,255,.13); background: linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }.flow-step.active span { border-radius: 10px; background: var(--orange); }.flow-step.done span { border-radius: 10px; }.flow-step.done span::after { border-radius: 9px; background: rgba(255,255,255,.1); }
.flow-layout { gap: 16px; }
.flow-live { min-height: 560px; padding: 22px; border-color: rgba(255,255,255,.11); border-radius: 34px; background: linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.045)); backdrop-filter: blur(36px) saturate(145%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 28px 70px rgba(0,0,0,.25); }
.flow-live-index { font-size: 58px; }
.flow-live-orbit { top: 88px; width: 110px; height: 110px; }.flow-live-orbit em { inset: 34px; }
.flow-live-analysis { position: relative; z-index: 3; margin-top: 180px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.07); backdrop-filter: blur(16px); }.analysis-wave { height: 54px; display: flex; align-items: center; gap: 3px; direction: ltr; }.analysis-wave i { flex: 1; height: var(--h); max-width: 5px; border-radius: 999px; background: linear-gradient(to top,var(--orange),#ff8292); transform-origin: center; animation: analysisWave 1.6s ease-in-out infinite alternate; }.analysis-wave i:nth-child(3n) { animation-delay: -.7s; }.analysis-wave i:nth-child(4n) { animation-delay: -1.1s; }.analysis-stats { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.analysis-stats span { padding: 8px; border-radius: 12px; background: rgba(0,0,0,.25); color: rgba(255,255,255,.52); font-size: 8px; }.analysis-stats b { margin-left: 3px; color: white; font-family: Arial,sans-serif; font-size: 13px; }.analysis-mode { margin-top: 6px; padding: 8px; border-radius: 12px; background: rgba(239,35,60,.12); color: #ff9eaa; font-size: 9px; text-align: center; }.flow-live-total small,.flow-live-total strong,.flow-live-total span { display: block; }.flow-live-total strong { margin-top: 6px; font-size: 21px; }.flow-live-total span { margin-top: 5px; color: rgba(255,255,255,.42); font-size: 8px; }
.project-flow .wizard-card { min-height: 560px; border-color: rgba(255,255,255,.64); border-radius: 34px; background: linear-gradient(145deg,rgba(250,250,252,.88),rgba(231,231,235,.76)); backdrop-filter: blur(38px) saturate(135%); box-shadow: 0 36px 90px rgba(0,0,0,.34),inset 0 1px 0 white; }
.project-flow .wizard-card::before { opacity: .35; background: rgba(255,255,255,.7); }.project-flow .wizard-section-tag { border-radius: 999px; background: rgba(239,35,60,.08); }
.project-flow .choice,.project-flow .style-choice,.project-flow .upload-zone,.project-flow .script-metric,.project-flow .summary-block,.project-flow .contact-confirm { border-radius: 24px; background: rgba(255,255,255,.5); border-color: rgba(5,5,5,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px rgba(26,26,31,.06); }.project-flow .choice.selected { color: white; border-color: transparent; background: linear-gradient(135deg,#111116,#2b1117 65%,#ef233c); box-shadow: 0 18px 36px rgba(8,8,10,.2); }.project-flow .choice.selected small { color: rgba(255,255,255,.62); }.project-flow .choice.selected::after { border-radius: 50%; background: white; color: var(--orange); }
.project-flow .field input,.project-flow .field textarea,.project-flow .field select { border-radius: 18px; background: rgba(255,255,255,.62); border-color: rgba(5,5,5,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }.project-flow .field input:focus,.project-flow .field textarea:focus,.project-flow .field select:focus { background: rgba(255,255,255,.9); }
.project-flow .price-box,.project-flow .otp-panel { border-radius: 28px; }.project-flow .help-box,.project-flow .edit-notice,.project-flow .voice-price-strip,.project-flow .send-otp,.project-flow .account-match { border-radius: 20px; }.project-flow .pill { border-radius: 999px; }.project-flow .pill.selected { color: white; background: linear-gradient(135deg,#111116,#ef233c); box-shadow: 0 8px 18px rgba(239,35,60,.16); }
.content-scene { display: flex; flex-direction: column; justify-content: center; }.content-scene-head { position: absolute !important; top: 28px; right: 34px; left: 34px; display: flex; align-items: center; justify-content: space-between; }.scene-dots { direction: ltr; display: flex; gap: 5px; }.scene-dots i { width: 24px; height: 5px; border-radius: 999px; background: rgba(5,5,5,.12); transition: .35s; }.scene-dots i.active { width: 38px; background: var(--orange); }.scene-number { position: absolute !important; top: 56px; left: 28px; color: rgba(5,5,5,.055); font-family: Arial,sans-serif; font-size: 150px; font-weight: 900; line-height: 1; pointer-events: none; }.content-scene > h3 { max-width: 760px; margin-top: 55px; font-size: clamp(37px,4.4vw,65px) !important; line-height: 1.15; letter-spacing: -3px !important; }.content-scene > p { font-size: 14px !important; }
.scenario-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }.scenario-gate { min-height: 180px; padding: 24px; display: grid; grid-template-columns: 45px 1fr 30px; align-items: center; gap: 15px; border: 1px solid rgba(5,5,5,.1); border-radius: 30px; background: rgba(255,255,255,.55); color: var(--ink); text-align: right; font: inherit; cursor: pointer; box-shadow: inset 0 1px 0 white,0 16px 38px rgba(16,16,20,.07); transition: .28s cubic-bezier(.2,.8,.2,1); }.scenario-gate:hover { transform: translateY(-7px) scale(1.01); border-color: rgba(239,35,60,.35); box-shadow: 0 24px 46px rgba(17,17,21,.12); }.scenario-gate > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 15px; background: rgba(5,5,5,.06); font-family: Arial,sans-serif; font-size: 10px; }.scenario-gate strong,.scenario-gate small { display: block; }.scenario-gate strong { font-size: 20px; }.scenario-gate small { margin-top: 7px; color: #6e6a64; font-size: 11px; }.scenario-gate > i { font-style: normal; font-size: 20px; }.scenario-gate.selected { color: white; border-color: transparent; background: linear-gradient(135deg,#0d0d10,#242429 63%,#ef233c); box-shadow: 0 24px 52px rgba(9,9,12,.24); }.scenario-gate.selected > span { background: var(--orange); }.scenario-gate.selected small { color: rgba(255,255,255,.58); }.scene-footnote { margin-top: 15px; color: #74716b; font-size: 9px; text-align: center; }
.giant-field { margin: 34px 0 15px; padding: 13px 18px 17px; border: 1px solid rgba(5,5,5,.11); border-radius: 27px; background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 white,0 18px 40px rgba(12,12,15,.06); }.giant-field > span { display: block; color: #817d76; font-family: Arial,sans-serif; font-size: 8px; letter-spacing: 2px; }.giant-field input { width: 100%; margin-top: 4px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: clamp(25px,3vw,42px); font-weight: 750; }.giant-field input::placeholder { color: #b4b0aa; }
.giant-script { margin-top: 22px; border: 1px solid rgba(5,5,5,.1); border-radius: 28px; background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 white,0 18px 40px rgba(12,12,15,.06); overflow: hidden; }.giant-script textarea { width: 100%; min-height: 205px; padding: 22px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 2; }.giant-script.compact textarea { min-height: 150px; }.script-live { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(5,5,5,.09); }.script-live > span { padding: 12px 15px; border-left: 1px solid rgba(5,5,5,.09); color: #77736c; font-size: 9px; }.script-live > span:last-child { border-left: 0; }.script-live b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 15px; }.script-live .price { background: rgba(5,5,7,.93); color: rgba(255,255,255,.48); }.script-live .price b { color: white; }
.soft-field { padding: 13px 17px 17px; border: 1px solid rgba(5,5,5,.1); border-radius: 24px; background: rgba(255,255,255,.5); }.soft-field label small { color: #8b877f; font-size: 9px; }.soft-field input { background: rgba(255,255,255,.7) !important; }
.scene-actions { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.scene-actions button { min-height: 52px; padding: 0 19px; border: 1px solid rgba(5,5,5,.15); border-radius: 18px; background: rgba(255,255,255,.45); color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; transition: .22s; }.scene-actions .scene-next { min-width: 210px; border-color: transparent; background: var(--ink); color: white; box-shadow: 0 15px 30px rgba(5,5,5,.16); }.scene-actions .scene-next:hover { transform: translateY(-3px); background: var(--orange); }
@keyframes analysisWave { to { transform: scaleY(.55); opacity: .55; } }

@media (max-width: 760px) {
  .flow-progress { border-radius: 20px; }.flow-step { border-radius: 14px; }.flow-live { border-radius: 24px; }.flow-live-analysis { display: none; }.flow-live-total { grid-column: 2; }.project-flow .wizard-card { border-radius: 26px; }
  .content-scene-head { top: 18px; right: 16px; left: 16px; }.scene-number { top: 50px; left: 12px; font-size: 90px; }.content-scene > h3 { margin-top: 55px; font-size: 34px !important; }.content-scene > p { font-size: 11px !important; }
  .scenario-gates { grid-template-columns: 1fr; }.scenario-gate { min-height: 115px; padding: 15px; border-radius: 22px; }.scenario-gate strong { font-size: 16px; }
  .giant-field { margin-top: 22px; border-radius: 21px; }.giant-field input { font-size: 25px; }.giant-script { border-radius: 21px; }.giant-script textarea { min-height: 190px; padding: 16px; font-size: 14px; }.script-live { grid-template-columns: 1fr; }.script-live > span { border-left: 0; border-top: 1px solid rgba(5,5,5,.08); }.scene-actions { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(transparent,rgba(239,239,242,.96) 28%); }.scene-actions button { flex: 1; padding: 0 8px; }.scene-actions .scene-next { min-width: 0; }
}

/* V22 — readable icon navigation + quieter selections */
.flow-icon { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.flow-step { grid-template-columns: 42px minmax(0,1fr); gap: 12px; color: rgba(255,255,255,.62); }
.flow-step b { font-size: 13px; font-weight: 700; line-height: 1.45; }
.flow-step .flow-step-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.72); }
.flow-step.active { color: white; background: rgba(255,255,255,.1); }
.flow-step.active .flow-step-icon { border-color: rgba(239,35,60,.7); background: var(--orange); color: white; box-shadow: 0 8px 22px rgba(239,35,60,.22); }
.flow-step.done .flow-icon { opacity: 0; }
.flow-step.done .flow-step-icon::after { border-radius: 13px; background: rgba(255,255,255,.08); }
.flow-live-index { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.07); -webkit-text-stroke: 0; }
.flow-live-index .current-step-icon { width: 28px; height: 28px; color: white; }
.flow-live small { font-size: 10px; letter-spacing: 1.7px; color: rgba(255,255,255,.62); }
.analysis-stats span { font-size: 11px; color: rgba(255,255,255,.7); }
.analysis-stats b { font-size: 15px; }
.analysis-mode { padding: 10px; font-size: 11px; color: #ffc3ca; }
.flow-live-total strong { font-size: 24px; }
.flow-live-total span { margin-top: 7px; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.8; }
.project-flow .wizard-card > p,.content-scene > p { color: #5d5b58; font-size: 15px !important; line-height: 1.9; }
.project-flow .field-label,.project-flow .field > label { font-size: 14px; font-weight: 700; }
.project-flow .choice strong { font-size: 16px; }.project-flow .choice small { font-size: 12px; line-height: 1.75; }
.scenario-gate { grid-template-columns: 54px 1fr 24px; background: rgba(255,255,255,.62); }
.scenario-gate > .gate-icon { width: 52px; height: 52px; border: 1px solid rgba(5,5,5,.08); border-radius: 17px; background: rgba(5,5,5,.045); color: #242428; }
.scenario-gate .gate-icon .flow-icon { width: 25px; height: 25px; }
.scenario-gate strong { font-size: 21px; }.scenario-gate small { font-size: 13px; line-height: 1.7; }
.scenario-gate.selected { color: var(--ink); border-color: rgba(239,35,60,.72); background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(239,35,60,.18),0 18px 42px rgba(20,20,24,.1); }
.scenario-gate.selected > .gate-icon { border-color: transparent; background: var(--orange); color: white; box-shadow: 0 8px 20px rgba(239,35,60,.2); }
.scenario-gate.selected small { color: #67635e; }
.scene-footnote { font-size: 11px; color: #66625d; }
.project-flow .choice.selected { color: var(--ink); border-color: rgba(239,35,60,.72); background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(239,35,60,.15),0 12px 28px rgba(16,16,20,.08); }
.project-flow .choice.selected small { color: #6d6963; }
.project-flow .choice.selected::after { background: var(--orange); color: white; }
.project-flow .pill { min-height: 46px; padding-inline: 20px; border-color: rgba(5,5,5,.13); background: rgba(255,255,255,.76); font-size: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.project-flow .pill.selected { color: white; border-color: #151518; background: #151518; box-shadow: 0 7px 18px rgba(10,10,12,.14); }
.project-flow .pill.selected::before { content: ""; width: 6px; height: 6px; margin-left: 7px; display: inline-block; border-radius: 50%; background: var(--orange); }
.voice-price-strip,.help-box,.edit-notice { font-size: 13px; line-height: 1.85; }
.scene-actions button,.project-flow .wizard-actions .btn { font-size: 13px; font-weight: 700; }

@media (max-width: 1000px) {
  .flow-step { grid-template-columns: 36px minmax(0,1fr); gap: 8px; }
  .flow-step .flow-step-icon { width: 36px; height: 36px; border-radius: 12px; }
  .flow-step .flow-icon { width: 19px; height: 19px; }
  .flow-step b { font-size: 11px; }
}

@media (max-width: 760px) {
  .flow-header .motionchi-word { font-size: 18px; }
  .flow-progress { padding: 5px; gap: 4px; }
  .flow-step { min-height: 50px; padding: 5px; display: grid; grid-template-columns: 1fr; place-items: center; }
  .flow-step .flow-step-icon { width: 38px; height: 38px; border-radius: 12px; }
  .flow-step .flow-icon { width: 20px; height: 20px; }
  .flow-step i { right: 9px; left: 9px; bottom: 2px; }
  .flow-live { min-height: 88px; grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
  .flow-live-index { width: 46px; height: 46px; border-radius: 15px; }
  .flow-live-index .current-step-icon { width: 24px; height: 24px; }
  .flow-live-total { min-width: 0; }
  .flow-live-total small { font-size: 9px; }
  .flow-live-total strong { overflow: hidden; font-size: 19px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
  .flow-live-total span { display: none; }
  .project-flow .wizard-card { padding: 24px 17px; }
  .content-scene > h3 { margin-top: 62px; font-size: 32px !important; line-height: 1.25; letter-spacing: -1.4px !important; }
  .project-flow .wizard-card > p,.content-scene > p { font-size: 13px !important; line-height: 1.85; }
  .scene-number { opacity: .55; font-size: 76px; }
  .scenario-gate { min-height: 116px; padding: 16px; grid-template-columns: 48px 1fr 20px; gap: 12px; }
  .scenario-gate > .gate-icon { width: 46px; height: 46px; border-radius: 15px; }
  .scenario-gate strong { font-size: 17px; }.scenario-gate small { margin-top: 5px; font-size: 12px; }
  .scene-footnote { font-size: 11px; line-height: 1.8; }
  .project-flow .choice strong { font-size: 15px; }.project-flow .choice small { font-size: 11px; }
  .project-flow .field-label,.project-flow .field > label { font-size: 13px; }
  .project-flow .pill { min-height: 43px; padding-inline: 16px; font-size: 12px; }
  .scene-actions button,.project-flow .wizard-actions .btn { min-height: 48px; font-size: 12px; }
}

@media (max-width: 420px) {
  .flow-progress,.flow-layout,.success-layout { width: calc(100% - 20px); }
  .flow-progress { border-radius: 18px; }
  .flow-step { border-radius: 12px; }
  .flow-step .flow-step-icon { width: 34px; height: 34px; }
  .flow-step .flow-icon { width: 18px; height: 18px; }
  .flow-header-actions button { padding-inline: 8px; font-size: 9px; }
  .project-flow .wizard-card { padding-inline: 15px; border-radius: 23px; }
  .content-scene-head { right: 15px; left: 15px; }
  .wizard-section-tag { font-size: 8px; }
  .content-scene > h3 { font-size: 29px !important; }
  .scenario-gate { padding: 14px; }
}

/* V23 — quieter controls, animated visual references and stage-specific motion */
.flow-stage-motion { position: absolute; z-index: 2; top: 95px; left: 50%; width: 132px; height: 132px; transform: translateX(-50%); }
.flow-stage-motion > * { position: absolute; display: block; }
.motion-stage-1 .ring-a,.motion-stage-1 .ring-b { inset: 0; border: 1px solid rgba(239,35,60,.8); border-radius: 50%; animation: finaleSpin 9s linear infinite; }
.motion-stage-1 .ring-b { inset: 24px; border-style: dashed; animation-duration: 6s; animation-direction: reverse; }
.motion-stage-1 .core { inset: 49px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 42px rgba(239,35,60,.48); animation: flowPulse 2.4s ease-in-out infinite; }
.motion-stage-2 { display: grid; place-items: center; }
.motion-bars { inset: 22px 7px; display: flex !important; align-items: center; justify-content: center; gap: 5px; }
.motion-bars i { position: static; width: 7px; height: 55%; border-radius: 99px; background: linear-gradient(to top,var(--orange),#ff9aa6); animation: stageBar 1.15s ease-in-out infinite alternate; }
.motion-bars i:nth-child(2n) { animation-delay: -.45s; }.motion-bars i:nth-child(3n) { animation-delay: -.8s; }
.motion-stage-2 .voice-dot { width: 10px; height: 10px; right: 8px; top: 61px; border-radius: 50%; background: white; box-shadow: 0 0 18px white; animation: stageTravel 2.8s ease-in-out infinite; }
.motion-stage-3 .frame-a,.motion-stage-3 .frame-b { width: 76px; height: 76px; top: 28px; left: 28px; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; animation: stageFrame 6s ease-in-out infinite; }
.motion-stage-3 .frame-b { border-color: var(--orange); animation-delay: -3s; animation-direction: reverse; }
.motion-stage-3 .visual-dot { width: 19px; height: 19px; left: 57px; top: 57px; border-radius: 7px; background: var(--orange); box-shadow: 0 0 30px rgba(239,35,60,.5); animation: flowPulse 2s infinite; }
.motion-stage-4 .account-ring { inset: 12px; border: 1px dashed rgba(239,35,60,.75); border-radius: 50%; animation: finaleSpin 10s linear infinite; }
.motion-stage-4 .account-head { width: 38px; height: 38px; top: 27px; left: 47px; border: 2px solid white; border-radius: 50%; }
.motion-stage-4 .account-body { width: 72px; height: 38px; left: 30px; bottom: 25px; border: 2px solid white; border-radius: 50px 50px 18px 18px; animation: stageBreathe 2.5s ease-in-out infinite; }
.motion-stage-5 .pay-card { width: 96px; height: 66px; top: 33px; left: 18px; border: 1px solid rgba(255,255,255,.65); border-radius: 20px; background: rgba(255,255,255,.07); animation: stageCard 3s ease-in-out infinite; }
.motion-stage-5 .pay-line { width: 52px; height: 4px; top: 59px; left: 40px; border-radius: 99px; background: var(--orange); }
.motion-stage-5 .pay-pulse { width: 12px; height: 12px; top: 74px; left: 60px; border-radius: 50%; background: white; box-shadow: 0 0 24px white; animation: flowPulse 1.8s infinite; }
.flow-live-analysis { margin-top: 178px; }
.flow-live-total { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }

.voice-options { margin: 24px 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voice-options .field { margin: 0; padding: 17px; border: 1px solid rgba(5,5,5,.08); border-radius: 23px; background: rgba(255,255,255,.44); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.voice-options .field:nth-child(4) { grid-row: span 2; }
.voice-options .field-label { margin-bottom: 12px; }
.pronunciation-field { margin-top: 12px; padding: 16px; border: 1px solid rgba(5,5,5,.08); border-radius: 22px; background: rgba(255,255,255,.42); }
.pronunciation-field label { display: flex; align-items: center; gap: 6px; }.pronunciation-field label small { color: #8b877f; font-size: 10px; font-weight: 500; }

.motion-style-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.motion-style-choice { position: relative; padding: 7px; border: 1px solid rgba(5,5,5,.09) !important; border-radius: 25px !important; background: rgba(255,255,255,.58) !important; outline: 0 !important; box-shadow: inset 0 1px 0 white,0 10px 28px rgba(14,14,18,.07); transition: .25s ease; }
.motion-style-choice:hover { transform: translateY(-4px); }
.motion-style-choice.selected { border-color: var(--orange) !important; box-shadow: inset 0 0 0 1px rgba(239,35,60,.2),0 16px 34px rgba(20,20,24,.11); }
.style-motion { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 19px; background: #121216; }
.style-motion > span { position: absolute; right: 9px; bottom: 9px; padding: 5px 8px; border-radius: 999px; background: rgba(5,5,7,.62); backdrop-filter: blur(8px); color: white; font-size: 8px; }
.style-loop,.style-loop > * { position: absolute; display: block; }
.style-loop { inset: 0; overflow: hidden; }
.loop-1 { background: #efece5; }.loop-1 i,.loop-1 b,.loop-1 em { top: 50%; font-style: normal; font-size: clamp(26px,3vw,44px); font-weight: 950; line-height: 1; transform: translateY(-50%); }.loop-1 i { right: 16%; width: 42%; height: 24%; background: #111; animation: loopTypeA 2.8s ease-in-out infinite; }.loop-1 b { left: 12%; width: 27%; height: 24%; background: var(--orange); animation: loopTypeB 2.8s ease-in-out infinite; }.loop-1 em { right: 44%; width: 10px; height: 56%; background: var(--orange); animation: loopBlink 1s steps(1) infinite; }
.loop-2 { background: linear-gradient(135deg,#dfe9ff,#f8f9ff); }.loop-2 i { inset: 17% 9%; border: 2px solid #121216; border-radius: 12px; background: white; animation: loopUI 3.4s ease-in-out infinite; }.loop-2 b { width: 42%; height: 12%; right: 18%; top: 30%; border-radius: 99px; background: #4964ff; animation: loopUISlide 3.4s ease-in-out infinite; }.loop-2 em { width: 27%; height: 26%; left: 17%; bottom: 26%; border-radius: 9px; background: var(--orange); animation: loopUIPulse 1.8s ease-in-out infinite; }
.loop-3 { background: #ead8b9; }.loop-3 i,.loop-3 b,.loop-3 em { border-radius: 45% 55% 52% 48%; mix-blend-mode: multiply; }.loop-3 i { width: 62%; height: 76%; right: -8%; top: 6%; background: #ef233c; animation: loopCollage 4s ease-in-out infinite; }.loop-3 b { width: 54%; height: 60%; left: -4%; bottom: -5%; background: #4964ff; animation: loopCollage 4.6s ease-in-out infinite reverse; }.loop-3 em { width: 28%; height: 38%; left: 36%; top: 18%; background: #ffdf4d; animation: finaleSpin 7s linear infinite; }
.loop-4 { background: #101013; }.loop-4 i,.loop-4 b,.loop-4 em { bottom: 18%; width: 18%; border-radius: 8px 8px 3px 3px; transform-origin: bottom; }.loop-4 i { height: 64%; right: 17%; background: var(--orange); animation: loopData 1.7s ease-in-out infinite alternate; }.loop-4 b { height: 38%; right: 41%; background: #c9ff4a; animation: loopData 1.7s -.55s ease-in-out infinite alternate; }.loop-4 em { height: 78%; left: 17%; background: #4964ff; animation: loopData 1.7s -1s ease-in-out infinite alternate; }
.loop-5 { background: radial-gradient(circle at 38% 30%,#4e5368,#111117 58%); perspective: 300px; }.loop-5 i { width: 64px; height: 64px; left: calc(50% - 32px); top: calc(50% - 32px); border-radius: 18px; background: linear-gradient(135deg,#ff9ca8,#ef233c 48%,#4964ff); box-shadow: 18px 22px 40px rgba(0,0,0,.36); animation: loop3D 4s ease-in-out infinite; }.loop-5 b { inset: 16%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; animation: finaleSpin 8s linear infinite; }.loop-5 em { width: 8px; height: 8px; left: 18%; top: 22%; border-radius: 50%; background: white; box-shadow: 0 0 18px white; animation: loopOrbit 4s ease-in-out infinite; }
.loop-6 { background: #f3f0e8; }.loop-6 i { width: 68px; height: 68px; left: calc(50% - 34px); top: calc(50% - 34px); border: 12px solid #111; border-radius: 50%; animation: loopBrand 3.2s cubic-bezier(.2,.8,.2,1) infinite; }.loop-6 b { width: 21px; height: 21px; left: calc(50% - 10px); top: calc(50% - 10px); background: var(--orange); border-radius: 6px; animation: finaleSpin 3s linear infinite; }.loop-6 em { width: 78%; height: 2px; left: 11%; top: 50%; background: #111; animation: loopBrandLine 3.2s ease-in-out infinite; }
.motion-style-choice footer { padding: 12px 9px 8px; text-align: right; }.motion-style-choice footer strong { font-size: 14px; }.motion-style-choice footer small { margin-top: 3px; font-size: 10px; }

.visual-options { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cover-option,.format-option { min-height: 88px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(5,5,5,.09); border-radius: 25px; background: rgba(255,255,255,.52); box-shadow: inset 0 1px 0 white; }
.option-copy { min-width: 0; display: flex; align-items: center; gap: 12px; }.option-copy > div { min-width: 0; }.option-copy strong,.option-copy small { display: block; }.option-copy strong { font-size: 15px; }.option-copy small { margin-top: 5px; color: #77736d; font-size: 11px; line-height: 1.65; }
.option-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: rgba(5,5,5,.06); font-size: 19px; }
.project-flow .switch { width: 50px; min-width: 50px; height: 30px; border: 0; border-radius: 999px; background: #d1cfc9; box-shadow: inset 0 0 0 1px rgba(5,5,5,.08); }
.project-flow .switch::after { width: 24px; height: 24px; top: 3px; right: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(0,0,0,.18); }
.project-flow .switch.on { background: var(--orange); }.project-flow .switch.on::after { right: 23px; }
.cover-brief { margin-top: 12px; padding: 18px; border: 1px solid rgba(239,35,60,.2); border-radius: 27px; background: rgba(255,255,255,.57); animation: flowCardIn .45s cubic-bezier(.2,.8,.2,1) both; }
.cover-brief-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.cover-brief-head span { font-size: 15px; font-weight: 800; }.cover-brief-head small { color: #716d67; font-size: 11px; }
.cover-brief-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; align-items: stretch; }
.cover-upload { min-height: 76px; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px dashed rgba(5,5,5,.2); border-radius: 20px; cursor: pointer; }.cover-upload input { display: none; }.cover-upload > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--ink); color: white; font-size: 20px; }.cover-upload strong,.cover-upload small { display: block; }.cover-upload strong { font-size: 12px; }.cover-upload small { margin-top: 4px; color: #77736d; font-size: 9px; }
.cover-brief .field { margin: 0; }.cover-brief .field input { min-height: 47px; }
.project-flow .wizard-actions { display: flex; gap: 10px; }.project-flow .wizard-actions .btn,.scene-actions button { min-height: 50px; padding-inline: 24px; border-radius: 999px; }

@keyframes stageBar { from { transform: scaleY(.28); opacity: .45; } to { transform: scaleY(1); opacity: 1; } }
@keyframes stageTravel { 50% { transform: translateX(-112px); opacity: .35; } }
@keyframes stageFrame { 50% { transform: rotate(45deg) scale(.72); border-radius: 50%; } }
@keyframes stageBreathe { 50% { transform: translateY(5px) scaleX(.9); opacity: .6; } }
@keyframes stageCard { 50% { transform: translateY(-7px) rotate(-3deg); box-shadow: 0 16px 30px rgba(239,35,60,.18); } }
@keyframes loopTypeA { 0%,100% { transform: translate(0,-50%) scaleX(1); } 50% { transform: translate(-25%,-50%) scaleX(.55); } }
@keyframes loopTypeB { 0%,100% { transform: translate(0,-50%) rotate(0); } 50% { transform: translate(32%,-50%) rotate(8deg); } }
@keyframes loopBlink { 50% { opacity: 0; } }
@keyframes loopUI { 50% { transform: translateY(-5px) scale(.96); box-shadow: 0 18px 28px rgba(73,100,255,.18); } }
@keyframes loopUISlide { 50% { width: 29%; transform: translateX(-65%); } }
@keyframes loopUIPulse { 50% { transform: scale(.72); border-radius: 50%; } }
@keyframes loopCollage { 50% { transform: translate(12px,-8px) rotate(20deg) scale(.82); border-radius: 50%; } }
@keyframes loopData { to { transform: scaleY(.35); opacity: .55; } }
@keyframes loop3D { 50% { transform: rotateX(48deg) rotateY(42deg) rotateZ(25deg) scale(.8); border-radius: 50%; } }
@keyframes loopOrbit { 50% { transform: translate(125px,68px) scale(1.5); opacity: .35; } }
@keyframes loopBrand { 50% { transform: rotate(135deg) scale(.72); border-radius: 18px; } }
@keyframes loopBrandLine { 50% { transform: rotate(90deg) scaleX(.45); background: var(--orange); } }

@media (max-width: 760px) {
  .flow-stage-motion { display: none; }
  .voice-options { grid-template-columns: 1fr; }.voice-options .field:nth-child(4) { grid-row: auto; }
  .motion-style-grid { grid-template-columns: repeat(6,minmax(220px,76vw)); overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .motion-style-grid::-webkit-scrollbar { display: none; }.motion-style-choice { scroll-snap-align: start; }
  .visual-options,.cover-brief-grid { grid-template-columns: 1fr; }
  .cover-option,.format-option { min-height: 82px; padding: 13px; }
  .cover-brief-head { align-items: flex-start; flex-direction: column; }
  .project-flow .wizard-actions .btn,.scene-actions button { padding-inline: 16px; }
}

/* V24 — unified product UI audit */
.project-flow button,.project-flow input,.project-flow textarea,.project-flow select,.studio button,.studio input,.studio textarea,.studio select,.auth-screen button,.auth-screen input { font-family: Vazirmatn,Tahoma,Arial,sans-serif; }
.project-flow .wizard-card h3 { margin-bottom: 10px; font-weight: 900; line-height: 1.3; }
.project-flow .wizard-card > p { max-width: 780px; margin-top: 0; color: #615e59; font-size: 15px !important; line-height: 1.95; }
.project-flow .field { min-width: 0; }.project-flow .field label,.project-flow .field-label { margin-bottom: 9px; color: #262527; font-size: 13px; font-weight: 800; line-height: 1.6; }
.project-flow .field input,.project-flow .field textarea,.project-flow .field select { width: 100%; min-height: 54px; padding: 13px 16px; border: 1px solid rgba(14,14,17,.1); border-radius: 18px; background: rgba(255,255,255,.68); color: #17171a; font-size: 14px; line-height: 1.8; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.project-flow .field input::placeholder,.project-flow .field textarea::placeholder { color: #aaa69f; font-size: 13px; }
.project-flow .choice-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin: 18px 0 22px; }
.project-flow .choice { min-height: 112px; padding: 20px; border: 1px solid rgba(12,12,15,.09); border-radius: 25px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px 0 white,0 12px 30px rgba(15,15,19,.06); }
.project-flow .choice:hover { transform: translateY(-3px); border-color: rgba(239,35,60,.35); }
.project-flow .choice strong { margin-top: 0; font-size: 17px; font-weight: 850; line-height: 1.55; }.project-flow .choice small { margin-top: 6px; color: #6f6b65; font-size: 12px; line-height: 1.75; }
.project-flow .choice.selected { padding: 20px; border: 1px solid rgba(239,35,60,.72); background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(239,35,60,.12),0 14px 32px rgba(16,16,20,.08); }
.project-flow .choice.selected::after { top: 14px; left: 14px; width: 28px; height: 28px; border-radius: 50%; }
.project-flow .real-upload { border-width: 1px; border-color: rgba(14,14,17,.18); border-radius: 26px; background: rgba(255,255,255,.52); }.project-flow .real-upload strong { font-size: 15px; }.project-flow .real-upload small { font-size: 11px; line-height: 1.7; }
.project-flow .help-box,.project-flow .edit-notice { padding: 16px 18px; border: 1px solid rgba(239,35,60,.13); border-right: 3px solid var(--orange); border-radius: 20px; background: rgba(239,35,60,.055); color: #3f3c39; font-size: 13px; line-height: 1.95; }
.project-flow .voice-price-strip { min-height: 74px; padding: 15px 18px; border: 1px solid rgba(14,14,17,.1); border-radius: 22px; background: rgba(255,255,255,.5); }.project-flow .voice-price-strip span { color: #6f6b65; font-size: 12px; }.project-flow .voice-price-strip strong { font-size: 22px; }
.project-flow .summary-block { padding: 20px; border: 1px solid rgba(14,14,17,.09); border-radius: 24px; background: rgba(255,255,255,.55); }.project-flow .summary-block h4 { margin-bottom: 14px; font-size: 18px; }.project-flow .summary-line { padding: 10px 0; font-size: 13px; line-height: 1.7; }.project-flow .summary-line span { color: #716d66; }.project-flow .summary-line strong { font-weight: 800; }
.project-flow .contact-confirm { padding: 18px; border-radius: 22px; }.project-flow .contact-confirm span { font-size: 11px; }.project-flow .contact-confirm strong { font-size: 16px; }.project-flow .contact-confirm small { font-size: 12px; }
.project-flow .price-box { padding: 24px; border-radius: 28px; }.project-flow .price-box .price-big { margin-top: 5px; font-size: clamp(31px,3.5vw,43px); font-weight: 900; }.project-flow .price-break div { margin: 11px 0; font-size: 12px; }.project-flow .gateway-card { padding: 15px; border-radius: 19px; }.project-flow .checkout-box .btn { border-radius: 999px; }

.account-contact-fields { margin: 24px 0 14px; }.account-contact-fields .field { padding: 0; }.account-contact-fields input { direction: ltr; text-align: left; font-family: Arial,Vazirmatn,sans-serif !important; font-size: 15px !important; }
.account-state-card { margin-top: 14px; padding: 15px 16px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(14,14,17,.09); border-radius: 22px; background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.account-state-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: #17171a; color: white; }.account-state-icon .flow-icon { width: 22px; height: 22px; }
.account-state-card strong,.account-state-card small { display: block; }.account-state-card strong { font-size: 14px; }.account-state-card small { margin-top: 4px; color: #716d66; font-size: 11px; line-height: 1.7; }.account-state-card em { padding: 7px 10px; border-radius: 999px; background: rgba(23,23,26,.06); color: #55514c; font-size: 10px; font-style: normal; white-space: nowrap; }.account-state-card.found .account-state-icon { background: #257a43; }.account-state-card.found em { background: #e9f6ed; color: #257a43; }
.verification-card { margin-top: 12px; padding: 20px; border: 1px solid rgba(14,14,17,.09); border-radius: 28px; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 white,0 18px 42px rgba(15,15,19,.07); }
.verification-copy { display: flex; align-items: center; gap: 12px; }.verification-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 16px; background: rgba(239,35,60,.1); color: var(--orange); }.verification-icon .flow-icon { width: 22px; height: 22px; }.verification-copy strong,.verification-copy small { display: block; }.verification-copy strong { font-size: 16px; }.verification-copy small { margin-top: 4px; color: #716d66; font-size: 11px; }
.verification-controls { margin-top: 17px; display: grid; grid-template-columns: minmax(220px,1fr) 160px; gap: 10px; align-items: end; }.otp-field > span { display: block; margin-bottom: 7px; color: #5d5953; font-size: 11px; font-weight: 750; }
.project-flow .otp-input,.auth-screen .otp-input { width: 100%; height: 58px; padding: 0 14px; border: 1px solid rgba(14,14,17,.13); border-radius: 18px; outline: 0; background: rgba(247,247,248,.9); color: #151518; text-align: center; direction: ltr; font-family: Arial,sans-serif !important; font-size: 25px; font-weight: 700; letter-spacing: 9px; box-shadow: inset 0 1px 0 white; transition: .2s; }.project-flow .otp-input:focus,.auth-screen .otp-input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(239,35,60,.09); }
.verify-code { min-height: 58px; padding: 0 18px; border: 0; border-radius: 18px; background: #151518; color: white; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }.verify-code:hover { background: var(--orange); }.verify-code.verified,.verify-code:disabled { background: #257a43; opacity: 1; }
.otp-demo { margin-top: 12px; color: #8b8780; font-size: 10px; text-align: left; direction: rtl; }.otp-demo b { color: #28262a; font-family: Arial,sans-serif; font-size: 11px; letter-spacing: 1px; }
.send-otp-modern { margin-top: 18px; min-height: 90px; padding: 15px 16px; grid-template-columns: 48px minmax(0,1fr) auto; border: 1px solid rgba(14,14,17,.1); border-radius: 25px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px 0 white,0 14px 34px rgba(16,16,20,.06); }
.send-otp-modern:hover { border-color: rgba(239,35,60,.5); background: rgba(255,255,255,.88); color: var(--ink); transform: translateY(-2px); }.send-otp-modern .send-icon { width: 48px; height: 48px; border-radius: 16px; background: #151518; }.send-otp-modern .send-icon .flow-icon { width: 23px; height: 23px; }.send-otp-modern strong { font-size: 15px; }.send-otp-modern small,.send-otp-modern:hover small { margin-top: 5px; color: #716d66; font-size: 11px; }.send-otp-modern > b { padding: 9px 12px; border-radius: 999px; background: rgba(239,35,60,.1); color: var(--orange); font-size: 11px; white-space: nowrap; }
.security-note { margin-top: 14px; display: flex; align-items: center; gap: 9px; color: #716d66; }.security-note > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: rgba(23,23,26,.05); }.security-note .flow-icon { width: 17px; height: 17px; }.security-note p { margin: 0; }.security-note strong,.security-note small { display: block; }.security-note strong { color: #383539; font-size: 11px; }.security-note small { margin-top: 2px; font-size: 10px; }

/* Customer workspace consistency */
.studio { background: #f4f3ef; }.studio .btn,.auth-screen .btn { border-radius: 999px; }.studio .sidebar { background: #0d0d10; }.studio .side-link { min-height: 46px; padding: 11px 13px; border-radius: 15px; font-size: 13px; }.studio .side-link.active { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }.studio .studio-top { background: rgba(244,243,239,.82); backdrop-filter: blur(22px) saturate(130%); }.studio .studio-content { max-width: 1320px; }
.studio .icon-btn,.studio .mobile-menu { border-radius: 14px; background: rgba(255,255,255,.65); box-shadow: inset 0 1px 0 white; }
.studio .panel,.studio .stat-card,.studio .project-hero,.studio .timeline,.studio .wallet-balance { border-radius: 25px; box-shadow: 0 12px 34px rgba(17,17,20,.045); }.studio .panel,.studio .stat-card { border-color: rgba(14,14,17,.09); }.studio .stat-card { padding: 23px; }.studio .stat-card small { font-size: 11px; }.studio .stat-value strong { font-size: 35px; }.studio .panel-head { padding: 21px 23px; border-bottom-color: rgba(14,14,17,.08); }.studio .panel-head h3 { font-size: 17px; }.studio .project-row { padding: 19px 22px; border-bottom-color: rgba(14,14,17,.07); }.studio .project-name strong { font-size: 14px; }.studio .project-name small { margin-top: 3px; font-size: 11px; }.studio .status { font-size: 10px; }.studio .welcome h2 { font-size: clamp(30px,3vw,39px); font-weight: 900; line-height: 1.35; }.studio .welcome p { font-size: 13px; line-height: 1.8; }.studio .wallet-balance { padding: 28px; }.studio .payment-row,.studio .notice-item { padding: 19px 22px; }.studio .notice-item strong { font-size: 14px; }.studio .notice-item p { font-size: 12px; line-height: 1.8; }.studio .notice-item small { font-size: 10px; }
.auth-screen { background: radial-gradient(circle at 75% 15%,rgba(239,35,60,.07),transparent 30%),#f3f1eb; }.auth-card { border: 1px solid rgba(14,14,17,.1); border-radius: 30px; box-shadow: 0 28px 80px rgba(14,14,17,.11); }.auth-card h1 { font-weight: 900; }.auth-card > p { font-size: 13px; }.auth-card .field input { border-radius: 18px; background: #f7f6f2; }.auth-otp { padding: 16px; border-radius: 22px; background: rgba(23,23,26,.04); }.auth-otp .otp-input { margin-top: 8px; background: white; }.auth-otp small { font-size: 10px; }
.studio .timeline { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }.studio .timeline::-webkit-scrollbar { display: none; }.studio .timeline-step { scroll-snap-align: start; }

@media (max-width: 760px) {
  .project-flow .wizard-card > p { font-size: 13px !important; }
  .project-flow .choice-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.project-flow .choice { min-height: 108px; padding: 16px; }.project-flow .choice.selected { padding: 16px; }.project-flow .choice strong { font-size: 15px; }.project-flow .choice small { font-size: 11px; }
  .account-contact-fields { grid-template-columns: 1fr; }.account-state-card { grid-template-columns: 40px minmax(0,1fr); }.account-state-card em { grid-column: 2; width: fit-content; }
  .verification-card { padding: 17px; border-radius: 24px; }.verification-controls { grid-template-columns: 1fr; }.verify-code { width: 100%; }.project-flow .otp-input { font-size: 23px; letter-spacing: 7px; }
  .send-otp-modern { grid-template-columns: 44px minmax(0,1fr); }.send-otp-modern .send-icon { width: 44px; height: 44px; }.send-otp-modern > b { grid-column: 1 / -1; width: 100%; text-align: center; }
  .project-flow .summary-line { font-size: 12px; }.project-flow .price-box { border-radius: 24px; }
  .studio .panel,.studio .stat-card,.studio .project-hero,.studio .timeline,.studio .wallet-balance { border-radius: 21px; }.studio .welcome h2 { font-size: 29px; }.studio .stats-grid { gap: 9px; }.studio .stat-card { padding: 16px; }.studio .stat-value strong { font-size: 27px; }
  .auth-card { border-radius: 25px; }
}

@media (max-width: 420px) {
  .project-flow .choice-grid { grid-template-columns: 1fr; }.project-flow .choice { min-height: 94px; }
  .verification-copy { align-items: flex-start; }.verification-copy small { line-height: 1.7; }.project-flow .otp-input { letter-spacing: 5px; }
  .studio .stats-grid { grid-template-columns: 1fr; }
}

/* V33 — project exchange and typography safeguards */
.workspace,.workspace button,.workspace input,.workspace textarea,.workspace select { font-family:Vazirmatn,Tahoma,sans-serif; }
.workspace .revision-card>h3 { margin:7px 0 20px;font-size:20px;line-height:1.55;color:#17171c; }
.workspace .revision-card .revision-item strong { display:block;margin:0!important;color:#17171c!important;font-size:14px!important;font-weight:850;line-height:1.55!important; }
.workspace .revision-card .revision-item small { display:block;margin-top:4px;color:#918e95;font-size:10px;line-height:1.5; }
.workspace .revision-card .revision-dots { display:flex;gap:5px; }
.workspace .revision-card .revision-dots i { width:9px;height:9px;border:1px solid var(--ws-red);border-radius:50%; }
.workspace .revision-card .expert-chip strong { display:block;margin:0!important;color:#fff!important;font-size:12px!important;line-height:1.55!important; }
.workspace .revision-card .expert-chip small { display:block;margin-top:3px;color:rgba(255,255,255,.52);font-size:9px;line-height:1.5; }

.stage-collab { margin-top:16px;padding:25px;border:1px solid rgba(17,17,22,.07);border-radius:28px;background:rgba(255,255,255,.78);box-shadow:0 14px 38px rgba(17,17,22,.04); }
.stage-collab .section-inline-head { margin-bottom:8px; }
.stage-collab .section-inline-head h3 { margin-top:5px;font-size:21px; }
.collab-badge { padding:8px 12px;border-radius:999px;color:#8b2634;background:rgba(239,35,60,.09);font-size:10px;font-weight:800; }
.collab-intro { margin:0 0 18px;color:#77737b;font-size:11px;line-height:1.9; }
.thread-tabs { display:flex;gap:7px;overflow-x:auto;padding:3px 0 8px;scrollbar-width:none; }
.thread-tabs::-webkit-scrollbar { display:none; }
.thread-tabs button { min-width:128px;min-height:48px;padding:8px 11px;display:flex;align-items:center;gap:9px;border:1px solid rgba(17,17,22,.08);border-radius:16px;color:#77737b;background:rgba(247,247,248,.8);font:inherit;font-size:10px;font-weight:750;cursor:pointer;transition:.22s ease; }
.thread-tabs button i { width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:white;color:#77737b;font:700 9px Arial,sans-serif;box-shadow:0 3px 10px rgba(17,17,22,.05); }
.thread-tabs button.active { border-color:#17171c;color:white;background:#17171c;box-shadow:0 10px 24px rgba(17,17,22,.13);transform:translateY(-1px); }
.thread-tabs button.active i { color:#fff;background:var(--ws-red); }
.stage-composer { margin-top:12px;padding:17px;border:1px solid rgba(17,17,22,.08);border-radius:22px;background:linear-gradient(145deg,rgba(248,248,249,.94),rgba(255,255,255,.76)); }
.composer-title { display:flex;align-items:center;gap:11px; }
.composer-title>span { width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;color:white;background:var(--ws-red); }
.composer-title .workspace-icon { width:19px;height:19px; }
.composer-title strong,.composer-title small { display:block; }
.composer-title strong { font-size:13px;line-height:1.55; }
.composer-title small { margin-top:2px;color:#8d8990;font-size:9px;line-height:1.6; }
.stage-composer textarea { width:100%;min-height:92px;margin-top:13px;padding:14px 15px;resize:vertical;border:1px solid rgba(17,17,22,.08);border-radius:16px;outline:0;color:#17171c;background:white;font-size:12px;line-height:1.9;transition:.2s; }
.stage-composer textarea:focus { border-color:rgba(239,35,60,.6);box-shadow:0 0 0 4px rgba(239,35,60,.07); }
.composer-actions { margin-top:10px;display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:stretch;gap:9px; }
.attach-button { min-height:54px;padding:8px 12px;display:flex;align-items:center;gap:10px;border:1px dashed rgba(17,17,22,.17);border-radius:16px;background:rgba(255,255,255,.7);cursor:pointer;transition:.2s; }
.attach-button:hover { border-color:var(--ws-red);background:white; }
.attach-button input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.attach-button>span { width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;color:var(--ws-red);background:rgba(239,35,60,.09); }
.attach-button .workspace-icon { width:17px;height:17px; }
.attach-button strong,.attach-button small { display:block; }
.attach-button strong { font-size:11px;line-height:1.55; }
.attach-button small { max-width:400px;margin-top:2px;overflow:hidden;color:#928e95;font-size:9px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap; }
.composer-actions>.soft-primary,.admin-send-actions button { min-height:54px;border-radius:16px; }
.admin-send-actions { display:flex;gap:8px; }

.message-feed { margin-top:14px;display:grid;gap:9px; }
.project-message { width:min(78%,760px);padding:14px 16px;border:1px solid rgba(17,17,22,.08);border-radius:18px 18px 5px 18px;background:white;box-shadow:0 8px 22px rgba(17,17,22,.035); }
.project-message.from-admin { margin-right:auto;border-radius:18px 18px 18px 5px;color:white;background:#17171c; }
.project-message.is-requirement { box-shadow:inset 3px 0 0 var(--ws-red),0 8px 22px rgba(17,17,22,.04); }
.message-head { display:flex;align-items:center;gap:8px; }
.message-head span { color:var(--ws-red);font-size:10px;font-weight:900; }
.message-head b { padding:4px 7px;border-radius:999px;color:#77737b;background:#f2f1f2;font-size:8px;font-weight:700; }
.message-head small { margin-right:auto;color:#aaa6ac;font-size:8px; }
.from-admin .message-head b { color:rgba(255,255,255,.68);background:rgba(255,255,255,.08); }
.project-message>p { margin:10px 0 0;font-size:11px;line-height:1.9;white-space:pre-wrap; }
.message-assets { margin-top:10px;display:flex;flex-wrap:wrap;gap:7px; }
.message-asset { min-width:150px;max-width:230px;padding:8px;display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center;border:1px solid rgba(17,17,22,.08);border-radius:12px;background:rgba(247,247,248,.8); }
.from-admin .message-asset { border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.07); }
.message-asset>.workspace-icon { width:20px;height:20px;grid-row:1/3; }
.message-asset b,.message-asset small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.message-asset b { font-size:9px; }.message-asset small { color:#918e95;font-size:7px; }
.message-asset.has-preview { display:flex;flex-direction:column;align-items:stretch; }
.message-asset img { width:100%;height:110px;object-fit:cover;border-radius:8px; }
.message-empty { margin-top:14px;min-height:125px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed rgba(17,17,22,.12);border-radius:18px;color:#9a969d;text-align:center;background:rgba(247,247,248,.55); }
.message-empty .workspace-icon { width:24px;height:24px;margin-bottom:8px;color:var(--ws-red); }
.message-empty strong { color:#4c494f;font-size:11px; }.message-empty small { margin-top:4px;font-size:9px; }
.admin-collab { margin-top:18px; }.admin-collab .message-feed { margin-bottom:14px; }

@media (max-width:760px) {
  .stage-collab { padding:17px;border-radius:22px; }
  .stage-collab .section-inline-head { align-items:flex-start;gap:8px; }
  .stage-collab .section-inline-head h3 { font-size:18px; }
  .collab-badge { padding:6px 9px;font-size:8px; }
  .thread-tabs button { min-width:112px;min-height:44px; }
  .composer-actions { grid-template-columns:1fr; }
  .admin-send-actions { display:grid;grid-template-columns:1fr 1fr; }
  .project-message { width:92%; }
}
@media (max-width:420px) {
  .stage-collab { margin-right:-2px;margin-left:-2px;padding:14px; }
  .collab-intro { font-size:10px; }
  .stage-composer { padding:13px;border-radius:18px; }
  .composer-title strong { font-size:12px; }
  .attach-button small { max-width:230px; }
  .project-message { width:100%;padding:12px;border-radius:15px; }
  .message-head { flex-wrap:wrap; }.message-head small { width:100%;margin-right:0; }
  .admin-send-actions { grid-template-columns:1fr; }
}

/* V34 — fixed RTL action order, readable chronological replies */
.header-actions { direction:ltr; }
.header-actions .btn { direction:rtl; }
.scene-actions,.wizard-actions,.estimate-actions,.auth-actions { direction:ltr; }
.scene-actions button,.wizard-actions button,.estimate-actions button,.auth-actions button { direction:rtl; }
.flow-card input[type="url"],.flow-card input[data-model="referenceUrl"] { direction:ltr!important;text-align:left!important;font-family:Arial,Vazirmatn,sans-serif!important;unicode-bidi:plaintext; }
.flow-card input[type="url"]::placeholder,.flow-card input[data-model="referenceUrl"]::placeholder { direction:ltr;text-align:left; }

.message-feed { align-items:stretch; }
.project-message { width:min(92%,900px); }
.project-message.from-customer { margin-left:auto;margin-right:0; }
.project-message.from-admin { margin-right:auto;margin-left:0; }
.message-head span { font-size:12px; }
.message-head b { font-size:10px; }
.message-head small { font-size:10px; }
.project-message>p { margin-top:12px;font-size:14px;line-height:2; }
.message-asset b { font-size:11px; }.message-asset small { font-size:9px; }

@media (max-width:760px) {
  .project-message { width:96%; }
  .project-message>p { font-size:13px; }
}
@media (max-width:420px) {
  .project-message { width:100%; }
  .message-head span { font-size:11px; }.message-head b,.message-head small { font-size:9px; }
  .project-message>p { font-size:13px;line-height:1.9; }
}

/* V35 — clean start without seeded orders */
.empty-admin-state { min-height:180px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8f8b92;text-align:center;background:linear-gradient(145deg,rgba(247,247,248,.72),rgba(255,255,255,.42)); }
.empty-admin-state.large { min-height:320px;border:1px solid rgba(17,17,22,.07);border-radius:26px; }
.empty-admin-state>span { width:48px;height:48px;margin-bottom:13px;display:grid;place-items:center;border-radius:16px;color:var(--ws-red);background:rgba(239,35,60,.09); }
.empty-admin-state .workspace-icon { width:22px;height:22px; }
.empty-admin-state strong,.empty-admin-state small { display:block; }
.empty-admin-state strong { color:#343137;font-size:15px;line-height:1.7; }
.empty-admin-state small { margin-top:5px;font-size:10px;line-height:1.8; }
.empty-chart { min-height:170px;display:grid;place-items:center;color:#99959c;font-size:11px;text-align:center; }
@media (max-width:620px) { .empty-admin-state.large { min-height:240px;border-radius:21px; }.empty-admin-state { padding:20px; } }