@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: rgba(255,255,255,.88);
  --surface-solid: #fff;
  --surface-soft: #f4f7ff;
  --text: #1f1f1f;
  --muted: #5f6368;
  --line: rgba(60,64,67,.12);
  --grid-line: rgba(92,104,125,.09);
  --primary: #1a73e8;
  --primary-dark: #185abc;
  --violet: #9b72cb;
  --cyan: #4fc3f7;
  --rainbow: linear-gradient(105deg,#377bea 0%,#5188ed 16%,#747de3 32%,#9676d1 48%,#b975c2 63%,#d17cac 77%,#e28b96 89%,#eb9a78 100%);
  --rainbow-soft: linear-gradient(105deg,rgba(55,123,234,.12) 0%,rgba(81,136,237,.11) 16%,rgba(116,125,227,.105) 32%,rgba(150,118,209,.1) 48%,rgba(185,117,194,.095) 63%,rgba(209,124,172,.09) 77%,rgba(226,139,150,.085) 89%,rgba(235,154,120,.08) 100%);
  --shadow: 0 28px 80px rgba(60,64,67,.12);
  --radius: 28px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101218;
  --surface: rgba(28,31,39,.88);
  --surface-solid: #1c1f27;
  --surface-soft: #252a35;
  --text: #f1f3f4;
  --muted: #bdc1c6;
  --line: rgba(232,234,237,.12);
  --grid-line: rgba(196,205,224,.08);
  --primary: #8ab4f8;
  --primary-dark: #669df6;
  --shadow: 0 28px 80px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { position: relative; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: 'DM Sans',Manrope,Arial,sans-serif; transition: background-color .25s,color .25s; }
body:before { position: fixed; z-index: -2; inset: 0; background-color: var(--bg); background-image: linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px); background-position: left top; background-size: 36px 36px; content: ""; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.ambient { display: none; }
.section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 112px 0; }

.site-header { position: fixed; z-index: 50; top: 16px; left: 50%; display: flex; width: min(1180px, calc(100% - 32px)); height: 68px; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; border: 1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius: 22px; background: color-mix(in srgb,var(--surface-solid) 58%,transparent); box-shadow: 0 12px 40px rgba(32,35,56,.055); backdrop-filter: blur(18px) saturate(135%); transform: translateX(-50%); }
.logo { display: flex; align-items: center; font-size: 20px; font-weight: 700; letter-spacing: -.06em; }
.logo-word { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 240% 240%; animation: logo-shimmer 7s ease-in-out infinite alternate; transition: filter .45s ease; }.logo:hover .logo-word { filter: saturate(1.18) brightness(1.04); }
@keyframes logo-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 20% 50%; } }
.desktop-nav { display: flex; gap: 34px; color: var(--muted); font-size: 13px; font-weight: 600; }
.desktop-nav a { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: var(--muted); background-size: 180% 180%; transition: color .5s ease,background-position .7s ease; }.desktop-nav a:hover { background-position: 100% 50%; color: transparent; }
.header-actions { display: flex; align-items: center; gap: 11px; }.header-preferences { display: flex; align-items: center; gap: 2px; padding-right: 11px; border-right: 1px solid var(--line); }
.icon-button,.language-toggle,.menu-toggle { height: 40px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.icon-button { width: 40px; font-size: 20px; }
.language-menu { position: relative; }.language-toggle { display: flex; width: 48px; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }.language-toggle span { font-size: 12px; transition: transform .25s ease; }.language-menu:hover .language-toggle span,.language-menu:focus-within .language-toggle span { transform: rotate(180deg); }.language-options { position: absolute; top: calc(100% + 9px); right: -8px; display: flex; width: 142px; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--surface-solid) 94%,transparent); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity .2s ease,transform .25s ease; }.language-menu:hover .language-options,.language-menu:focus-within .language-options { opacity: 1; pointer-events: auto; transform: translateY(0); }.language-options button { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 700; text-align: left; }.language-options button:hover { background: var(--rainbow-soft); }.language-options button span { color: var(--muted); font-size: 9px; font-weight: 500; }
.login-link { padding: 10px 14px; font-size: 13px; font-weight: 600; transition: color .4s ease; }.login-link:hover { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }
.button { position: relative; isolation: isolate; display: inline-flex; overflow: hidden; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border: 0; border-radius: 15px; background: var(--rainbow); background-size: 140% 140%; color: #fff; box-shadow: 0 12px 28px rgba(91,103,190,.16); font-size: 14px; font-weight: 700; transition: transform .45s ease,box-shadow .45s ease,color .45s ease,background-position .7s ease; }
.button:before { position: absolute; z-index: -1; inset: 0; padding: 2px; border-radius: inherit; background: var(--rainbow); content: ""; opacity: 0; transition: opacity .5s cubic-bezier(.2,.75,.25,1); -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.button:after { position: absolute; z-index: -2; inset: 2px; border-radius: calc(15px - 2px); background: var(--surface-solid); content: ""; opacity: 0; transition: opacity .5s cubic-bezier(.2,.75,.25,1); }
.button:hover { background: transparent; box-shadow: 0 16px 34px rgba(91,103,190,.13); color: var(--text); transform: translateY(-2px); }
.button:hover:before,.button:hover:after { opacity: 1; }
.button-small { min-height: 40px; padding: 0 17px; border-radius: 12px; font-size: 12px; }
.button-large { min-height: 58px; padding: 0 28px; border-radius: 18px; }
.button-secondary { background: transparent; box-shadow: none; color: var(--text); backdrop-filter: blur(14px); }.button-secondary:before,.button-secondary:after { opacity: 1; }.button-secondary:hover { background: var(--rainbow); box-shadow: 0 14px 30px rgba(91,86,201,.18); color: #fff; }.button-secondary:hover:before,.button-secondary:hover:after { opacity: 0; }
.button-light { background: transparent; color: #252a48; box-shadow: none; }.button-light:before,.button-light:after { opacity: 1; }.button-light:after { background: #fff; }.button-light:hover { background: var(--rainbow); color: #fff; }.button-light:hover:before,.button-light:hover:after { opacity: 0; }
.menu-toggle,.mobile-nav { display: none; }
.moon { display: none; }
[data-theme="dark"] .sun { display: none; }
[data-theme="dark"] .moon { display: inline; }

.hero { position: relative; padding-top: 184px; text-align: center; }
.hero:before { display: none; }
.eyebrow,.section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow { padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.spark { font-size: 15px; }
.hero h1 { position: relative; max-width: 1000px; margin: 26px auto 24px; font-size: clamp(48px,6.6vw,82px); line-height: 1.02; letter-spacing: -.065em; }
.gradient-text { display: inline-block; margin-right: -.08em; padding-right: .12em; background: var(--rainbow); background-clip: text; -webkit-background-clip: text; background-size: 240% 240%; color: transparent; animation: hero-gradient-forward 7s ease-in-out infinite; transition: background-position 1.6s cubic-bezier(.2,.75,.25,1); }
.gradient-text.is-reversing { animation: none; background-position: 100% 50%; }
.gradient-text.is-returning { animation: none; background-position: 0% 50%; }
@keyframes hero-gradient-forward { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes hero-gradient-reverse { 0%,100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } }
.time-help { position: relative; top: -2.8em; display: inline-grid; width: 20px; height: 20px; margin-left: 5px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-solid); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0; cursor: help; vertical-align: middle; }
.time-tooltip { position: absolute; z-index: 5; top: 355px; left: 50%; width: min(300px,calc(100vw - 40px)); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); box-shadow: 0 14px 35px rgba(35,39,66,.14); color: var(--muted); font-size: 10px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translate(-4%,-8px); transition: opacity .18s,transform .18s; }
.hero h1:has(.time-help:hover) + .time-tooltip,.hero h1:has(.time-help:focus) + .time-tooltip { opacity: 1; transform: translate(-4%,0); }
.hero-copy { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; }
.microcopy { color: var(--muted); font-size: 12px; }
.benefit-marquee { position: relative; overflow: hidden; width: 100vw; margin-top: 64px; margin-left: calc(50% - 50vw); padding: 18px 0; }
.benefit-track { display: flex; width: max-content; animation: benefit-scroll 52s linear infinite; will-change: transform; }.benefit-track span { display: flex; align-items: center; gap: 9px; padding: 0 54px; white-space: nowrap; }.benefit-track i { color: var(--primary); font-size: 17px; font-style: normal; }.benefit-track b { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; background-size: 180% 180%; color: var(--text); font-size: 26px; font-weight: 650; letter-spacing: -.03em; transition: color .5s ease,background-position .7s ease; }.benefit-track span:hover b { background-position: 100% 50%; color: transparent; }
@keyframes benefit-scroll { to { transform: translateX(-25%); } }
.hero-stage { position: relative; margin-top: 54px; padding: 28px; border: 1px solid var(--line); border-radius: 36px; background: linear-gradient(135deg,rgba(138,180,248,.2),rgba(197,138,249,.14) 52%,rgba(242,139,130,.13)); }
.editor-window { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-solid); box-shadow: var(--shadow); text-align: left; }
.window-bar { display: flex; height: 52px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.window-dots { display: flex; gap: 6px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d9dbe4; }
.window-title,.status-dot { color: var(--muted); font-size: 10px; font-weight: 700; }.status-dot { display: flex; align-items: center; gap: 6px; }.status-dot i { width: 6px; height: 6px; border-radius: 50%; background: #45bd83; }
.editor-body { display: grid; min-height: 520px; grid-template-columns: 90px 1fr 250px; }
.editor-tools { display: flex; flex-direction: column; gap: 8px; padding: 17px 12px; border-right: 1px solid var(--line); }
.tool { display: flex; min-height: 62px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 15px; }.tool span { font-size: 8px; }.tool.active { background: rgba(87,103,239,.1); color: var(--primary); }
.canvas { display: grid; padding: 28px; place-items: center; background-image: radial-gradient(var(--line) .7px,transparent .7px); background-size: 14px 14px; }
.product-card { position: relative; overflow: hidden; width: min(390px,100%); aspect-ratio: 4/5; padding: 29px; border-radius: 7px; background: linear-gradient(155deg,#e9e4ff,#dfefff 52%,#f8e7ee); color: #22243c; box-shadow: 0 18px 55px rgba(55,57,104,.2); }
.product-kicker { font-size: 8px; font-weight: 800; letter-spacing: .18em; }.product-card>strong { display: block; margin-top: 12px; font-size: 39px; line-height: .94; letter-spacing: -.05em; }.product-sub { display: block; max-width: 150px; margin-top: 12px; color: #65677c; font-size: 9px; }
.product-scene { position: absolute; inset: 42% 0 15%; }.orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-a { width: 220px; height: 220px; right: -48px; background: rgba(102,137,232,.38); }.orb-b { width: 110px; height: 110px; bottom: -30px; left: 25px; background: rgba(218,136,183,.5); }.bottle { position: absolute; top: 15px; left: 50%; display: flex; width: 92px; height: 190px; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px 18px 24px 24px; background: linear-gradient(120deg,#202336,#424966); color: #fff; box-shadow: 0 25px 35px rgba(41,43,70,.35); transform: translateX(-50%) rotate(7deg); }.bottle:before { position: absolute; top: -23px; width: 53px; height: 30px; border-radius: 7px 7px 2px 2px; background: #25283b; content: ""; }.bottle span { font-size: 17px; font-weight: 800; letter-spacing: .18em; }.bottle small { margin-top: 5px; font-size: 6px; opacity: .65; }
.benefits { position: absolute; right: 22px; bottom: 20px; left: 22px; display: flex; justify-content: space-between; }.benefits span { padding: 6px 8px; border-radius: 20px; background: rgba(255,255,255,.58); font-size: 6px; font-weight: 700; backdrop-filter: blur(8px); }
.editor-panel { display: flex; flex-direction: column; gap: 10px; padding: 22px 16px; border-left: 1px solid var(--line); }.panel-label { margin-bottom: 6px; font-size: 11px; font-weight: 800; }.option { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; font-size: 9px; }.option.selected { border-color: var(--primary); }.option b { margin-left: auto; color: var(--primary); }.option-thumb { width: 37px; height: 37px; border-radius: 8px; }.option-thumb.purple { background: linear-gradient(135deg,#d5cbff,#7c8ee7); }.option-thumb.peach { background: linear-gradient(135deg,#ffd8c2,#df9e8d); }.generate-button { min-height: 42px; margin-top: auto; border: 1px solid transparent; border-radius: 11px; background: var(--rainbow) border-box; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; transition: color .2s,background .2s; }.generate-button:hover { background: linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,var(--rainbow) border-box; color: var(--text); }
.floating-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.6); border-radius: 15px; background: color-mix(in srgb,var(--surface-solid) 88%,transparent); box-shadow: 0 16px 40px rgba(37,44,81,.18); font-size: 10px; font-weight: 700; backdrop-filter: blur(16px); }.floating-chip span:first-child { color: var(--primary); }.chip-one { top: 23%; left: -25px; }.chip-two { right: -18px; bottom: 18%; }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 35px; color: var(--muted); font-size: 11px; }.trust-row b { color: var(--text); font-size: 13px; }

.steps { margin-top: -62px; padding-top: 28px; }.section-heading { max-width: 680px; margin: 0 auto 50px; text-align: center; }.section-heading h2,.showcase-heading h2,.result-copy h2,.faq-intro h2 { margin: 15px 0 16px; font-size: clamp(34px,4.4vw,58px); line-height: 1.05; letter-spacing: -.05em; }.section-heading p,.showcase-heading p,.result-copy>p,.faq-intro>p { color: var(--muted); line-height: 1.7; }
.steps .section-heading h2 { margin: 5px 0 4px; font-size: 45px; }.steps .section-heading p { margin: 0; font-size: 12px; }
.step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.step-card { position: relative; padding: 20px 20px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.step-card.featured { box-shadow: 0 24px 60px rgba(52,59,103,.1); }.step-number { position: absolute; z-index: 2; top: 32px; left: 33px; color: var(--primary); font-size: 10px; font-weight: 800; }.step-visual { display: grid; height: 245px; place-items: center; border-radius: 18px; background: var(--surface-soft); }.upload-box { display: flex; width: 145px; height: 130px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px dashed #8991b8; border-radius: 18px; color: var(--muted); }.upload-box span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; background: var(--surface-solid); color: var(--primary); }.upload-box small { font-size: 9px; }.concepts-visual { position: relative; overflow: hidden; }.concept-card { position: absolute; width: 125px; height: 160px; border: 5px solid var(--surface-solid); border-radius: 12px; box-shadow: 0 14px 30px rgba(36,40,70,.15); }.c-one { background: linear-gradient(145deg,#f1c9ba,#bb7e78); transform: translateX(-62px) rotate(-10deg); }.c-two { z-index: 2; background: linear-gradient(145deg,#becbfc,#7e82d7); }.c-three { background: linear-gradient(145deg,#bde2d3,#63a799); transform: translateX(62px) rotate(10deg); }.magic-visual { position: relative; }.mini-product { display: grid; width: 135px; height: 165px; place-items: center; border-radius: 14px; background: linear-gradient(160deg,#f9e0ac,#eaa583); box-shadow: 0 18px 35px rgba(114,77,52,.2); }.mini-product span { font-size: 28px; font-weight: 800; transform: rotate(-8deg); }.magic-visual i { position: absolute; top: 42px; right: 62px; color: var(--primary); font-size: 24px; font-style: normal; }.step-card h3 { margin: 24px 8px 10px; font-size: 19px; }.step-card p { margin: 0 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }.center-action { margin-top: 36px; text-align: center; }
.workflow-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.workflow-card,.workflow-card.reverse { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb,var(--surface-solid) 88%,transparent); box-shadow: 0 16px 42px rgba(60,64,67,.06); }.workflow-card.reverse .workflow-copy,.workflow-card.reverse .workflow-preview { order: initial; }.workflow-copy { display: flex; flex-direction: column; padding: 23px 23px 18px; }.workflow-copy .step-number { position: static; display: block; margin-bottom: 6px; color: var(--primary); font-size: 9px; font-weight: 800; }.workflow-copy h3 { min-height: 44px; margin: 0 0 6px; font-size: 19px; line-height: 1.15; letter-spacing: -.035em; }.workflow-copy>p { min-height: 38px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.workflow-thumbs { display: flex; flex-direction: column; gap: 6px; margin-top: 15px; }.workflow-thumb { display: grid; min-height: 43px; grid-template-columns: 33px 1fr; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; transition: border-color .25s ease,background .25s ease,color .25s ease,transform .25s ease; }.workflow-thumb:hover { background: var(--rainbow-soft); color: var(--text); transform: translateX(2px); }.workflow-thumb.active { border-color: var(--primary); background: var(--rainbow-soft); color: var(--text); }.workflow-thumb i { display: block; width: 33px; height: 33px; border-radius: 7px; background: var(--surface-soft); }.workflow-thumb span { overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.workflow-preview { position: relative; display: grid; height: 245px; min-height: 245px; place-items: center; background: linear-gradient(145deg,color-mix(in srgb,var(--surface-soft) 82%,transparent),color-mix(in srgb,var(--surface-solid) 88%,transparent)); }.workflow-preview:before { position: absolute; width: 62%; height: 62%; border-radius: 50%; background: var(--rainbow-soft); content: ""; filter: blur(34px); opacity: .55; }.preview-label { position: absolute; right: 13px; bottom: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb,var(--surface-solid) 88%,transparent); color: var(--muted); font-size: 6px; font-weight: 700; }.preview-object { position: relative; z-index: 1; width: 135px; height: 180px; border-radius: 15px; background: var(--surface-solid); box-shadow: 0 18px 38px rgba(35,40,70,.14); transition: background .4s ease,transform .4s ease,clip-path .4s ease; }.object-dress { width: 125px; height: 180px; background: linear-gradient(145deg,#987bd6,#d684ab); clip-path: polygon(33% 4%,67% 4%,73% 17%,91% 30%,79% 43%,70% 36%,78% 96%,22% 96%,30% 36%,21% 43%,9% 30%,27% 17%); }.object-gel { width: 85px; height: 180px; border-radius: 18px 18px 28px 28px; background: linear-gradient(120deg,#ecf3ff,#a7bceb); }.object-gel:after { position: absolute; top: 45%; right: 10px; left: 10px; height: 34px; border-radius: 6px; background: var(--rainbow-soft); content: "GEL"; color: var(--text); font-size: 11px; font-weight: 800; line-height: 34px; text-align: center; }.object-chair { width: 145px; height: 170px; border-radius: 50px 50px 20px 20px; background: linear-gradient(145deg,#bac7dc,#7587a7); clip-path: polygon(18% 3%,82% 3%,92% 56%,78% 64%,86% 100%,76% 100%,66% 67%,34% 67%,24% 100%,14% 100%,22% 64%,8% 56%); }.object-catalog { background: linear-gradient(145deg,#fff,#edf1f9); }.object-catalog:after { position: absolute; inset: 33px 40px; border-radius: 32px 32px 12px 12px; background: linear-gradient(145deg,#7f8fd0,#53679e); content: ""; }.object-composition { background: linear-gradient(145deg,#dce6ff,#ecdff0); transform: rotate(-2deg); }.object-composition:after { position: absolute; right: 30px; bottom: 22px; width: 65px; height: 125px; border-radius: 14px; background: linear-gradient(145deg,#6678b9,#a47ec0); content: ""; transform: rotate(9deg); }.object-use { background: linear-gradient(145deg,#d4cbc5,#8a746c); }.object-use:after { position: absolute; top: 25px; left: 50%; width: 55px; height: 67px; border-radius: 50%; background: #bd8f79; content: ""; transform: translateX(-50%); }.object-clean { background: linear-gradient(145deg,#f7f8fc,#e4e9f4); }.object-clean:after { position: absolute; right: 37px; bottom: 25px; width: 70px; height: 132px; border-radius: 15px; background: linear-gradient(145deg,#7688c7,#a478bd); content: ""; }.object-benefits { background: linear-gradient(145deg,#e1e8ff,#f2e5ed); }.object-benefits:after { position: absolute; top: 20px; right: 16px; left: 16px; height: 40px; border-radius: 8px; background: var(--surface-solid); box-shadow: 0 60px 0 var(--surface-solid),0 120px 0 var(--surface-solid); content: "100%"; color: var(--text); font-size: 8px; font-weight: 800; line-height: 40px; text-align: center; }.object-promo { background: var(--rainbow); }.object-promo:after { position: absolute; top: 50%; right: 14px; left: 14px; padding: 11px 3px; border-radius: 8px; background: rgba(255,255,255,.9); content: "NEW"; color: #28304b; font-size: 10px; font-weight: 800; text-align: center; transform: translateY(-50%); }.thumb-dress { background: linear-gradient(145deg,#967bd5,#d785aa)!important; }.thumb-gel { background: linear-gradient(145deg,#edf3ff,#9fb5e7)!important; }.thumb-chair { background: linear-gradient(145deg,#b7c5dc,#7083a5)!important; }.thumb-catalog,.thumb-clean { background: linear-gradient(145deg,#fff,#e5eaf5)!important; }.thumb-composition,.thumb-benefits { background: linear-gradient(145deg,#d9e4ff,#eadce9)!important; }.thumb-use { background: linear-gradient(145deg,#d0c3bb,#8e766d)!important; }.thumb-promo { background: var(--rainbow)!important; }

.bento-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }.bento-card { overflow: hidden; min-height: 370px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.bento-large { display: grid; min-height: 520px; grid-column: 1/-1; grid-template-columns: .82fr 1.18fr; }.card-copy { padding: 46px; }.feature-tag { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .14em; }.card-copy h3 { margin: 15px 0; font-size: 30px; letter-spacing: -.04em; }.card-copy p { color: var(--muted); font-size: 14px; line-height: 1.7; }.card-copy a { display: inline-block; margin-top: 22px; color: var(--primary); font-size: 12px; font-weight: 700; }.fashion-scene { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; background: linear-gradient(145deg,rgba(113,132,247,.12),rgba(217,126,191,.13)); }.fashion-frame { position: relative; overflow: hidden; width: 185px; height: 270px; border: 7px solid var(--surface-solid); border-radius: 20px; background: var(--surface-solid); box-shadow: 0 20px 45px rgba(46,49,84,.16); }.fashion-frame>span { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 8px; border-radius: 20px; background: rgba(255,255,255,.8); color: #55596c; font-size: 7px; }.shirt { display: grid; height: 100%; place-items: center; background: #ddd9d0; color: #27304e; font-size: 42px; font-weight: 800; clip-path: polygon(25% 19%,39% 10%,61% 10%,75% 19%,100% 33%,86% 51%,72% 43%,72% 100%,28% 100%,28% 43%,14% 51%,0 33%); }.transfer { z-index: 3; display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--surface-solid); color: var(--primary); box-shadow: 0 10px 25px rgba(51,54,91,.18); }.model { position: relative; height: 100%; background: linear-gradient(150deg,#bc9d8d,#695649); }.model i { position: absolute; top: 30px; left: 50%; width: 58px; height: 75px; border-radius: 48% 48% 40% 40%; background: #c89376; transform: translateX(-50%); }.model:after { position: absolute; bottom: -35px; left: 50%; width: 155px; height: 205px; border-radius: 60px 60px 0 0; background: #2f354b; content: ""; transform: translateX(-50%); }.model b { position: absolute; z-index: 2; right: 0; bottom: 70px; left: 0; color: #fff; font-size: 38px; text-align: center; }.video-card,.copy-card { position: relative; }.video-preview { position: absolute; right: 25px; bottom: -15px; left: 25px; height: 175px; border-radius: 18px 18px 0 0; background: linear-gradient(135deg,#392f68,#9878b9 55%,#dca195); }.play { position: absolute; top: 50%; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.88); color: #403c58; transform: translate(-50%,-50%); }.timeline { position: absolute; right: 15px; bottom: 14px; left: 15px; height: 3px; border-radius: 5px; background: rgba(255,255,255,.35); }.timeline i { display: block; width: 63%; height: 100%; background: #fff; }.typing-lines { position: absolute; right: 38px; bottom: 45px; left: 38px; display: flex; flex-direction: column; gap: 13px; }.typing-lines i { height: 12px; border-radius: 10px; background: var(--surface-soft); }.typing-lines i:nth-child(2) { width: 78%; }.typing-lines i:nth-child(3) { width: 58%; }.typing-lines span { position: absolute; right: 0; bottom: -12px; color: var(--primary); font-size: 24px; }

.workflow-card { display: block; }.workflow-demo { display: grid; height: 275px; grid-template-columns: 58px 1fr; gap: 8px; padding: 12px; background: color-mix(in srgb,var(--surface-soft) 75%,transparent); }.workflow-demo .workflow-thumbs { gap: 8px; margin: 0; }.workflow-demo .workflow-thumb { display: grid; width: 58px; min-height: 0; height: 58px; grid-template-columns: 1fr; place-items: center; padding: 4px; background: var(--surface-solid); }.workflow-demo .workflow-thumb i { width: 48px; height: 48px; }.workflow-demo .workflow-preview { height: auto; min-height: 0; overflow: hidden; border-radius: 17px; }.workflow-card .workflow-copy { padding: 20px 22px 22px; }.workflow-card .workflow-copy h3 { min-height: 22px; margin-bottom: 6px; font-size: 18px; }.workflow-card .workflow-copy>p { min-height: 31px; }.workflow-card .workflow-copy .step-number { margin-bottom: 6px; }

.feature-row { display: grid; min-height: 610px; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 82px; }.feature-reverse .feature-copy { order: 2; }.feature-reverse .blank-showcase { order: 1; }.feature-copy h2 { margin: 17px 0 20px; font-size: clamp(38px,4.4vw,61px); line-height: 1.04; letter-spacing: -.055em; }.feature-copy>p { color: var(--muted); font-size: 15px; line-height: 1.75; }.feature-list { display: flex; flex-direction: column; gap: 13px; margin: 27px 0 32px; padding: 0; list-style: none; }.feature-list li { color: var(--muted); font-size: 12px; }.feature-list li:before { display: inline-grid; width: 19px; height: 19px; margin-right: 10px; place-items: center; border-radius: 50%; background: var(--rainbow-soft); color: var(--primary); content: "✓"; font-size: 9px; font-weight: 800; }.blank-showcase { position: relative; display: flex; overflow: hidden; min-height: 500px; align-items: center; justify-content: center; gap: 22px; border: 1px solid var(--line); border-radius: 34px; background: rgba(255,255,255,.8); box-shadow: 0 24px 75px rgba(60,64,67,.08); }.blank-showcase:before { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: var(--rainbow-soft); content: ""; filter: blur(55px); opacity: .65; }.blank-card { position: relative; z-index: 1; width: 180px; height: 260px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(60,64,67,.1); }.blank-card.tall { height: 315px; }.blank-card>span { position: absolute; top: 16px; left: 17px; color: #9aa0a6; font-size: 9px; font-weight: 800; }.blank-card i { position: absolute; right: 22px; bottom: 24px; left: 22px; height: 48%; border: 1px dashed rgba(60,64,67,.17); border-radius: 14px; }.blank-arrow { position: relative; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); box-shadow: 0 10px 30px rgba(60,64,67,.1); }.video-blank { position: relative; z-index: 1; width: 78%; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 20px 55px rgba(60,64,67,.1); }.video-blank button { position: absolute; top: 50%; left: 50%; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); transform: translate(-50%,-50%); }.video-blank span { position: absolute; bottom: 22px; color: #9aa0a6; font-size: 8px; }.video-blank span:first-of-type { left: 24px; }.video-blank span:last-of-type { right: 24px; }.video-blank i { position: absolute; right: 60px; bottom: 25px; left: 60px; height: 2px; background: var(--rainbow); }

.showcase-section { padding: 60px 0 110px; overflow: hidden; }.showcase-heading { display: flex; align-items: end; justify-content: space-between; }.showcase-heading>p { max-width: 410px; padding-bottom: 8px; }.marquee { overflow-x: auto; padding: 15px max(20px,calc((100vw - 1180px)/2)); scrollbar-width: none; }.marquee-track { display: flex; width: max-content; gap: 18px; }.gallery-card { position: relative; overflow: hidden; width: 280px; height: 365px; padding: 25px; border-radius: 24px; color: #222436; }.gallery-card small { font-size: 8px; font-weight: 800; letter-spacing: .16em; }.gallery-card strong { display: block; margin-top: 15px; font-size: 32px; line-height: .95; letter-spacing: -.05em; }.gallery-beauty { background: #eadfd9; }.cream { position: absolute; right: 35px; bottom: 35px; display: grid; width: 90px; height: 170px; place-items: center; border-radius: 10px 10px 20px 20px; background: #f8f3ec; box-shadow: 0 20px 35px rgba(83,59,55,.18); font-size: 12px; }.gallery-tech { background: #c9cff1; }.headphones { position: absolute; right: 42px; bottom: 54px; display: grid; width: 145px; height: 145px; place-items: center; border: 19px solid #454b67; border-bottom-color: transparent; border-radius: 50%; font-size: 58px; }.gallery-food { background: #d9b89c; }.coffee { position: absolute; right: 38px; bottom: 34px; display: grid; width: 105px; height: 175px; place-items: center; background: #6f2f20; color: #f5dcae; box-shadow: 0 20px 35px rgba(75,36,23,.25); font-weight: 800; }.gallery-home { background: #c9d4c9; }.lamp { position: absolute; right: 38px; bottom: 35px; width: 125px; height: 170px; border-radius: 60% 60% 15px 15px; background: #f3e8cd; box-shadow: 0 0 60px #ffebb1; }.gallery-sport { background: #d2d8df; }.shoe { position: absolute; right: 20px; bottom: 65px; display: grid; width: 190px; height: 90px; place-items: center; border-radius: 65% 25% 25% 28%; background: #f7f7f4; box-shadow: 0 20px 35px rgba(42,48,60,.22); font-size: 28px; font-weight: 800; transform: rotate(-12deg); }
.blank-gallery { border: 1px solid var(--line); background: rgba(255,255,255,.86); color: var(--text); box-shadow: 0 18px 45px rgba(60,64,67,.07); }.blank-gallery:before { position: absolute; right: 22px; bottom: 22px; left: 22px; height: 64%; border: 1px dashed rgba(60,64,67,.15); border-radius: 17px; content: ""; }.blank-gallery strong { max-width: 180px; }.blank-gallery>span { position: absolute; right: 38px; bottom: 36px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--rainbow-soft); color: var(--primary); }

.comparison-section { padding-top: 80px; }.comparison-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.comparison-grid article { min-height: 310px; padding: 47px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.86); }.comparison-grid article>span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.comparison-grid strong { display: block; margin: 32px 0 18px; font-size: 55px; letter-spacing: -.06em; }.comparison-grid strong small { font-size: 17px; }.comparison-grid p { max-width: 360px; color: var(--muted); font-size: 13px; line-height: 1.7; }.comparison-grid .ai-compare { border-color: transparent; background: linear-gradient(#fff,#fff) padding-box,var(--rainbow) border-box; }.ai-compare strong { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }.versus { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 10px; font-weight: 800; transform: translate(-50%,-50%); }

.result-panel { display: grid; overflow: hidden; min-height: 550px; grid-template-columns: 1fr 1fr; border-radius: 36px; background: #141727; color: #fff; }.result-copy { align-self: center; padding: 65px; }.result-copy>p { color: #aaaebe; }.stat-row { display: flex; gap: 38px; margin-top: 42px; }.stat-row div { display: flex; flex-direction: column; gap: 5px; }.stat-row strong { font-size: 22px; }.stat-row small { color: #9095a8; font-size: 8px; }.result-stack { position: relative; min-height: 550px; background: radial-gradient(circle at 50% 45%,rgba(108,126,247,.35),transparent 58%); }.stack-card { position: absolute; top: 50%; left: 50%; width: 285px; height: 370px; border-radius: 19px; }.stack-back { background: #76a0b0; transform: translate(-30%,-53%) rotate(11deg); opacity: .55; }.stack-middle { background: #835fa0; transform: translate(-65%,-51%) rotate(-8deg); opacity: .7; }.stack-front { overflow: hidden; padding: 28px; background: linear-gradient(145deg,#dad6ff,#aeb8ee); color: #21243c; box-shadow: 0 30px 60px rgba(0,0,0,.3); transform: translate(-50%,-50%); }.stack-front>span { font-size: 8px; font-weight: 800; letter-spacing: .15em; }.stack-front>strong { display: block; margin-top: 10px; font-size: 40px; line-height: .9; letter-spacing: -.06em; }.glass-bottle { position: absolute; right: 45px; bottom: 35px; display: grid; width: 100px; height: 190px; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 20px 20px 30px 30px; background: linear-gradient(120deg,rgba(255,255,255,.55),rgba(100,114,195,.35)); box-shadow: inset 0 0 25px rgba(255,255,255,.4),0 22px 35px rgba(50,54,95,.25); font-size: 9px; font-weight: 800; writing-mode: vertical-rl; }

.pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.price-card { position: relative; display: flex; min-height: 470px; flex-direction: column; padding: 30px 25px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }.price-card.popular { border-color: var(--primary); box-shadow: 0 24px 50px rgba(71,86,190,.12); }.popular-badge { position: absolute; top: 15px; right: 15px; padding: 5px 8px; border-radius: 20px; background: rgba(85,104,240,.12); color: var(--primary); font-size: 8px; font-weight: 800; }.plan { font-size: 13px; font-weight: 800; }.price { display: flex; align-items: baseline; gap: 6px; margin-top: 28px; }.price strong { font-size: 29px; letter-spacing: -.04em; }.price small,.price-card>p { color: var(--muted); font-size: 9px; }.price-card>p { min-height: 38px; margin: 13px 0 20px; font-size: 11px; }.price-card ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px 0; border-top: 1px solid var(--line); list-style: none; }.price-card li { color: var(--muted); font-size: 10px; }.price-card li:before { margin-right: 8px; color: var(--primary); content: "✓"; font-weight: 800; }.price-card .button { width: 100%; margin-top: auto; font-size: 11px; }.pricing-note,.review-disclaimer { margin: 18px auto 0; color: var(--muted); font-size: 9px; text-align: center; }
.welcome-section { padding-top: 30px; }.welcome-card { display: grid; min-height: 220px; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 40px 48px; border: 1px solid transparent; border-radius: 28px; background: linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,var(--rainbow) border-box; box-shadow: 0 22px 60px rgba(60,64,67,.08); }.welcome-icon { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 23px; background: var(--rainbow); color: #fff; font-size: 26px; }.welcome-card h2 { margin: 10px 0 9px; font-size: 28px; letter-spacing: -.04em; }.welcome-card p { margin: 0; color: var(--muted); font-size: 12px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.testimonial-grid blockquote { margin: 0; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }.quote-mark { color: var(--primary); font-family: Georgia,serif; font-size: 40px; line-height: .8; }.testimonial-grid blockquote>p { min-height: 120px; color: var(--muted); font-size: 13px; line-height: 1.75; }.testimonial-grid footer { display: flex; align-items: center; gap: 11px; }.avatar { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; font-size: 9px; font-weight: 800; }.avatar-one { background: #e0d9ff; color: #6651a2; }.avatar-two { background: #cce4de; color: #366b5e; }.avatar-three { background: #f1d5cb; color: #8f5547; }.testimonial-grid footer div:last-child { display: flex; flex-direction: column; gap: 3px; }.testimonial-grid footer strong { font-size: 10px; }.testimonial-grid footer span { color: var(--muted); font-size: 8px; }

.faq-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }.faq-intro { position: sticky; top: 120px; align-self: start; }.text-link { display: inline-block; margin-top: 18px; color: var(--primary); font-size: 12px; font-weight: 700; }.accordion details { border-bottom: 1px solid var(--line); }.accordion summary { display: flex; min-height: 76px; align-items: center; justify-content: space-between; cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }.accordion summary::-webkit-details-marker { display: none; }.accordion summary span { color: var(--primary); font-size: 21px; font-weight: 400; transition: transform .2s; }.accordion details[open] summary span { transform: rotate(45deg); }.accordion details p { margin: -5px 40px 23px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.final-cta { padding-bottom: 80px; }.cta-panel { position: relative; overflow: hidden; padding: 90px 25px; border-radius: 36px; background: linear-gradient(112deg,#4b82e9 0%,#6388e5 15%,#7c85dc 30%,#9582d1 45%,#ad82c4 60%,#c687b4 74%,#d78fa3 87%,#df9b8e 100%); color: #fff; text-align: center; }.cta-panel:before { position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%,rgba(255,255,255,.18),transparent 36%),radial-gradient(circle at 82% 80%,rgba(255,255,255,.1),transparent 38%); content: ""; }.cta-panel .section-kicker { position: relative; color: rgba(255,255,255,.82); }.cta-panel h2 { position: relative; margin: 18px 0; font-size: clamp(37px,5vw,65px); line-height: 1; letter-spacing: -.055em; }.cta-panel p { position: relative; color: rgba(255,255,255,.82); }.cta-panel .button { position: relative; margin-top: 22px; }.cta-panel small { position: relative; display: block; margin-top: 17px; color: rgba(255,255,255,.68); font-size: 9px; }.cta-orb { position: absolute; top: -160px; left: 50%; width: 570px; height: 570px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 120px rgba(255,255,255,.09),inset 0 0 120px rgba(255,255,255,.07); transform: translateX(-50%); }
.site-footer { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 45px 0 30px; border-top: 1px solid var(--line); }.footer-main { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 40px; }.footer-brand p { max-width: 300px; color: var(--muted); font-size: 11px; line-height: 1.7; }.footer-column { display: flex; flex-direction: column; gap: 12px; }.footer-column strong { margin-bottom: 5px; font-size: 11px; }.footer-column a { color: var(--muted); font-size: 10px; transition: color .35s ease; }.footer-column a:hover { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }.footer-bottom { display: flex; justify-content: space-between; margin-top: 55px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }

@media (max-width: 900px) {
  .desktop-nav { display: none; }.menu-toggle { display: flex; width: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }.menu-toggle span { width: 17px; height: 1.5px; background: var(--text); }.mobile-nav { position: absolute; top: 76px; right: 0; left: 0; flex-direction: column; gap: 20px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-solid); box-shadow: var(--shadow); font-size: 13px; }.mobile-nav a { transition: color .35s ease; }.mobile-nav a:hover { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }.site-header.open .mobile-nav { display: flex; }
  .editor-body { grid-template-columns: 68px 1fr; }.editor-panel { display: none; }.trust-row { flex-wrap: wrap; }.step-grid { grid-template-columns: 1fr; }.step-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }.step-card h3,.step-card p { grid-column: 2; }.step-card h3 { align-self: end; }.step-card p { align-self: start; }.step-visual { grid-row: 1/3; }.feature-row { min-height: auto; grid-template-columns: 1fr; gap: 45px; }.feature-reverse .feature-copy,.feature-reverse .blank-showcase { order: initial; }.blank-showcase { min-height: 440px; }.showcase-heading { align-items: start; flex-direction: column; }.comparison-grid { grid-template-columns: 1fr; }.versus { top: 50%; }.pricing-grid { grid-template-columns: 1fr 1fr; }.welcome-card { grid-template-columns: auto 1fr; }.welcome-card .button { grid-column: 1/-1; justify-self: start; }.testimonial-grid { grid-template-columns: 1fr; }.testimonial-grid blockquote>p { min-height: 0; }.faq-section { grid-template-columns: 1fr; gap: 30px; }.faq-intro { position: static; }.footer-main { grid-template-columns: 2fr 1fr 1fr; }.footer-brand { grid-column: 1/-1; }
  .workflow-list { grid-template-columns: 1fr; }.workflow-card,.workflow-card.reverse { display: grid; grid-template-columns: .8fr 1.2fr; }.workflow-card.reverse .workflow-copy,.workflow-card.reverse .workflow-preview { order: initial; }.workflow-copy { padding: 28px; }.workflow-preview { height: auto; min-height: 340px; }.preview-object { transform: scale(.9); }
}

@media (max-width: 600px) {
  body:before { background-size: 30px 30px; }.section { width: min(100% - 28px,1180px); padding: 78px 0; }.site-header { top: 8px; width: calc(100% - 16px); }.header-actions { gap: 5px; }.header-preferences { gap: 0; padding-right: 5px; }.login-link { padding-right: 7px; padding-left: 7px; }.language-options { right: -4px; }.hero { padding-top: 145px; }.hero:before { height: 650px; }.hero h1 { font-size: 43px; }.time-help { top: -3.2em; width: 18px; height: 18px; }.time-tooltip { top: 315px; transform: translate(-50%,-8px); }.hero h1:has(.time-help:hover) + .time-tooltip,.hero h1:has(.time-help:focus) + .time-tooltip { transform: translate(-50%,0); }.hero-copy { font-size: 15px; }.hero-actions { flex-direction: column; }.benefit-marquee { margin-top: 45px; }.hero-stage { margin-top: 50px; padding: 9px; border-radius: 25px; }.window-bar { height: 42px; }.editor-body { min-height: 440px; grid-template-columns: 1fr; }.editor-tools { display: none; }.canvas { padding: 16px; }.product-card { width: 300px; }.chip-one { top: -22px; left: 10px; }.chip-two { right: 5px; bottom: -22px; }.trust-row { gap: 15px 22px; }.trust-row span { flex-basis: 100%; }.step-card { display: block; }.step-card h3,.step-card p { margin-right: 6px; margin-left: 6px; }.step-visual { height: 220px; }.bento-large { min-height: auto; }.card-copy { padding: 32px 28px; }.fashion-scene { min-height: 330px; gap: 8px; }.fashion-frame { width: 135px; height: 220px; }.transfer { width: 35px; height: 35px; }.result-copy { padding: 45px 28px; }.stat-row { gap: 19px; }.result-stack { min-height: 440px; transform: scale(.85); }.pricing-grid { grid-template-columns: 1fr; }.price-card { min-height: 420px; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1/-1; }.footer-bottom { gap: 12px; flex-direction: column; }
}

[data-theme="dark"] .blank-showcase,[data-theme="dark"] .blank-card,[data-theme="dark"] .video-blank,[data-theme="dark"] .video-blank button,[data-theme="dark"] .blank-gallery,[data-theme="dark"] .comparison-grid article,[data-theme="dark"] .versus { background-color: var(--surface-solid); color: var(--text); }
[data-theme="dark"] .comparison-grid .ai-compare { background: linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,var(--rainbow) border-box; }
[data-theme="dark"] .welcome-card { background: linear-gradient(color-mix(in srgb,var(--surface-solid) 92%,transparent),color-mix(in srgb,var(--surface-solid) 92%,transparent)) padding-box,var(--rainbow) border-box; }

@media (max-width: 600px) {
  .feature-row { padding-top: 65px; padding-bottom: 65px; }.feature-copy h2 { font-size: 39px; }.blank-showcase { min-height: 360px; gap: 8px; }.blank-card { width: 120px; height: 200px; }.blank-card.tall { height: 245px; }.blank-arrow { width: 38px; height: 38px; }.video-blank { width: 88%; }.comparison-grid article { min-height: 270px; padding: 34px 27px; }.comparison-grid strong { font-size: 45px; }.welcome-card { display: flex; align-items: flex-start; flex-direction: column; padding: 34px 27px; }.welcome-card .button { width: 100%; }.showcase-section { padding-top: 30px; }
  .workflow-card,.workflow-card.reverse { display: flex; }.workflow-copy { padding: 24px 20px; }.workflow-copy h3 { min-height: 0; font-size: 22px; }.workflow-copy>p { min-height: 0; }.workflow-thumb { min-height: 44px; }.workflow-preview { min-height: 270px; }.preview-object { transform: scale(.8); }
}

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