@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,.063);
  --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,.056);
  --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; }
main { display: flex; flex-direction: column; }
.hero { order: 1; }.steps { order: 2; }.showcase-section { order: 3; }.comparison-section { order: 4; }.pricing-section { order: 5; }.welcome-section { order: 6; }.feature-row#tools { order: 7; }.feature-row.feature-reverse { order: 8; }.testimonial-section { order: 9; }.faq-section { order: 10; }.final-cta { order: 11; }
.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; }
.site-header>.logo { font-size: 24px; font-weight: 800; letter-spacing: -.065em; }
.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%; } }
 .footer-main { grid-template-columns: 220px auto auto minmax(150px,1fr); }
 .footer-main .footer-column:last-child { justify-self: start; }
 .testimonial-track blockquote { border: 2px solid transparent; background: linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--rainbow) border-box; box-shadow: 0 14px 30px rgba(20,24,45,.08); }
 .footer-main { grid-template-columns: 220px auto auto minmax(150px,1fr); }
 .footer-main .footer-column { justify-self: start; }
 [data-theme="light"] .welcome-card { color: #252a31; background: rgba(40,42,52,.07); }
 [data-theme="light"] .welcome-card h2 { color: #252a31; }
 [data-theme="light"] .welcome-card p { color: #4b5563; }
.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; height: 18px; align-items: center; gap: 0; padding-right: 11px; border-right: 1px solid var(--line); }
.header-preferences .theme-toggle, .header-preferences .language-toggle { width: 28px; padding: 0; }
.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-menu:after { position: absolute; top: 100%; right: -8px; width: 142px; height: 9px; content: ""; }.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: color-mix(in srgb,var(--surface-solid) 52%,transparent); box-shadow: 0 16px 34px rgba(91,103,190,.13),inset 0 1px 0 rgba(255,255,255,.46); color: var(--text); transform: translateY(-2px); backdrop-filter: blur(12px) saturate(125%); }
.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; }
.button-chevron { display: inline-block; font-size: 25px; font-weight: 800; line-height: .7; transform: translateY(-1px); transition: transform .35s cubic-bezier(.2,.75,.25,1); }.button:hover .button-chevron { transform: translate(4px,-1px); }
.hero-cta { isolation: isolate; }.hero-cta:after { z-index: -3; inset: -14px -24px; border-radius: 28px; background: var(--rainbow-soft); filter: blur(14px); opacity: .45; animation: hero-cta-wave 4.8s ease-in-out infinite; }.hero-cta:before { z-index: -2; }.hero-cta:hover:after { opacity: .58; }
@keyframes hero-cta-wave { 0%,100% { transform: scale(.84); opacity: .26; } 45% { transform: scale(1.08); opacity: .52; } 70% { transform: scale(1.2); opacity: .04; } }
.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: 14px auto 15px; font-size: clamp(44px,5.8vw,72px); 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: 620px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.55; transform: translateY(-3px); }
.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: 7px; padding: 0 28px; white-space: nowrap; }.benefit-track i { color: var(--primary); font-size: 18px; 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: 28px; font-weight: 700; letter-spacing: -.035em; 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(-50%); } }
.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; padding-bottom: 0; }.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-three { position: relative; display: inline-block; padding-right: .06em; background: var(--text); background-clip: text; -webkit-background-clip: text; color: transparent; transform-origin: 50% 70%; }.step-three:before { position: absolute; z-index: -1; inset: -.3em -.45em; border-radius: 50%; background: var(--rainbow); content: ""; filter: blur(15px); opacity: 0; }
.step-three.reveal { animation: step-three-shake .55s linear forwards,step-three-color .75s ease-out .48s forwards; }.step-three.reveal:before { animation: step-three-glow 1.15s ease-out .42s forwards; }.step-three.ready { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; background-size: 220% 220%; animation: logo-shimmer 7s ease-in-out infinite alternate; }
@keyframes step-three-shake { 0%,100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(-1.2px) rotate(-.35deg); } 20% { transform: translateX(1.4px) rotate(.35deg); } 30% { transform: translateX(-1.7px) rotate(-.45deg); } 40% { transform: translateX(1.7px) rotate(.45deg); } 50% { transform: translateX(-2px) rotate(-.55deg); } 60% { transform: translateX(2px) rotate(.55deg); } 70% { transform: translateX(-1.7px) rotate(-.4deg); } 80% { transform: translateX(1.4px) rotate(.3deg); } 90% { transform: translateX(-.8px) rotate(-.15deg); } }
@keyframes step-three-color { from { background: var(--text); background-clip: text; -webkit-background-clip: text; } to { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; background-size: 220% 220%; } }
@keyframes step-three-glow { 0% { opacity: 0; transform: scale(.65); } 38% { opacity: .55; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.35); } }
.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: flex; overflow: visible; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.workflow-card .workflow-copy { position: relative; order: 1; min-height: 88px; padding: 0 3px 8px 55px; }.workflow-card .workflow-copy .step-number { position: absolute; top: 0; left: 0; z-index: 1; display: grid; width: 47px; height: 47px; margin: 0; place-items: center; color: var(--text); font-size: 15px; font-weight: 800; }.workflow-card .workflow-copy .step-number:before { position: absolute; z-index: -1; inset: -4px; color: color-mix(in srgb,var(--primary) 23%,transparent); content: "✦"; font-size: 61px; line-height: 1; }.workflow-card .workflow-copy h3 { min-height: 22px; margin-bottom: 4px; font-size: 18px; }.workflow-card .workflow-copy>p { min-height: 25px; }.workflow-demo { order: 2; display: grid; height: 340px; grid-template-columns: 66px 210px; justify-content: center; gap: 9px; padding: 0; background: transparent; }.workflow-demo .workflow-thumbs { gap: 7px; margin: 0; }.workflow-demo .workflow-thumb { display: grid; width: 66px; min-height: 0; height: calc((340px - 14px)/3); grid-template-columns: 1fr; place-items: center; padding: 0; border: 0; border-radius: 11px; background: transparent; box-shadow: none; }.workflow-demo .workflow-thumb:hover { background: transparent; transform: translateX(2px); }.workflow-demo .workflow-thumb.active { border: 0; background: transparent; box-shadow: 0 0 0 2px var(--primary); }.workflow-demo .workflow-thumb i { width: 100%; height: 100%; border-radius: 11px; }.workflow-demo .workflow-preview { width: 210px; height: 340px; min-height: 0; overflow: hidden; border: 0; border-radius: 17px; background: linear-gradient(145deg,var(--surface-solid),var(--surface-soft)); }.workflow-card:nth-child(1) .workflow-preview { background: linear-gradient(150deg,#ede9f7,#d9ddf0); }.workflow-card:nth-child(2) .workflow-preview { background: linear-gradient(150deg,#e3e9f5,#f0e4ec); }.workflow-card:nth-child(3) .workflow-preview { background: linear-gradient(150deg,#e6ebf8,#e9e0ef); }.workflow-demo .workflow-preview:before { display: none; }.workflow-demo .preview-object { width: 100%; height: 100%; border-radius: 17px; box-shadow: none; }.workflow-demo .object-dress,.workflow-demo .object-chair { width: 80%; height: 92%; }.workflow-demo .object-gel { width: 44%; height: 88%; }
.workflow-demo .workflow-thumb i { display: grid; place-items: center; background: var(--surface-soft)!important; color: var(--muted); font-size: 14px; font-style: normal; font-weight: 700; }.workflow-demo .workflow-preview,.workflow-card:nth-child(1) .workflow-preview,.workflow-card:nth-child(2) .workflow-preview,.workflow-card:nth-child(3) .workflow-preview { background: var(--surface-soft); }.preview-number { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 28px; font-weight: 700; letter-spacing: -.05em; }.preview-number span:last-child { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }.preview-number i { color: var(--muted); font-size: 15px; font-style: normal; font-weight: 400; opacity: .55; }
.workflow-demo .workflow-thumb.active { padding: 2px; border: 0; background: var(--rainbow); box-shadow: none; }.workflow-demo .workflow-thumb.active i { border-radius: 9px; }

.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: 10px; 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); }
.tryon-heading { font-size: 45px !important; }
.tryon-heading + p { font-size: 12px; line-height: 1.7; }
[data-i18n="videoTitle"],[data-i18n="visualStyle"],[data-i18n="proVisual"],[data-i18n="payResult"],[data-i18n="usersSay"],[data-i18n="questionsTitle"],[data-i18n="readyTitle"] { font-size: 45px !important; }

.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 { margin-top: -115px; 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%); }
.comparison-section .section-heading { margin-bottom: 28px; }.comparison-section .section-heading>p { max-width: 590px; margin: 8px auto 0; font-size: 12px; }.comparison-section .comparison-grid { width: min(900px,100%); margin-right: auto; margin-left: auto; }.comparison-grid article { position: relative; min-height: 0; padding: 27px 30px; }.compare-top { display: flex; align-items: center; flex-direction: column; gap: 13px; text-align: center; }.compare-top>span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.comparison-grid .compare-top strong { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 0; line-height: 1; white-space: nowrap; }.comparison-grid .compare-top strong b { font-size: 58px; font-weight: 800; letter-spacing: -.07em; }.comparison-grid .compare-top strong small { font-size: 15px; }.comparison-grid ul { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 0; padding: 17px 0 0; border-top: 1px solid var(--line); list-style: none; }.comparison-grid li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }.comparison-grid li i { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: var(--surface-soft); font-size: 11px; font-style: normal; }.traditional-compare li i { color: #d56f7c; }.comparison-grid .ai-compare { z-index: 1; overflow: visible; background: linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,var(--rainbow) border-box; }.ai-compare:before { position: absolute; z-index: -1; inset: 12px 20px -15px; border-radius: 28px; background: var(--rainbow); content: ""; filter: blur(25px); opacity: .2; animation: ai-card-glow 5s ease-in-out infinite; }.ai-compare li i { background: var(--rainbow-soft); color: var(--primary); }.compare-button { min-height: 42px; margin-top: 20px; padding: 0 18px; font-size: 11px; }.versus { display: none; }@keyframes ai-card-glow { 0%,100% { opacity: .12; transform: scale(.94); } 50% { opacity: .34; transform: scale(1.03); } }

.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: 12px; }.price-card { position: relative; display: flex; min-height: 405px; flex-direction: column; padding: 25px 21px 21px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); isolation: isolate; transition: transform .35s ease,box-shadow .35s ease,border-color .35s ease; }.price-card:before { position: absolute; z-index: -1; inset: -2px; border-radius: inherit; padding: 2px; background: var(--rainbow); background-size: 220% 220%; content: ""; opacity: 0; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .35s ease; animation: pricing-shimmer 7s ease-in-out infinite alternate; }.price-card:hover { border-color: transparent; box-shadow: 0 22px 55px rgba(95,100,190,.2),0 0 30px rgba(161,121,218,.16); transform: translateY(-5px); }.price-card:hover:before { opacity: 1; }.price-card.popular { border-color: var(--primary); box-shadow: 0 24px 50px rgba(71,86,190,.12); }.price-card.popular:hover { border-color: transparent; box-shadow: 0 24px 58px rgba(71,86,190,.23),0 0 34px rgba(161,121,218,.2); }.popular-badge { position: absolute; top: 13px; right: 13px; padding: 7px 10px; border-radius: 20px; background: rgba(85,104,240,.12); color: var(--primary); font-size: 10px; font-weight: 800; }.plan { font-size: 13px; font-weight: 800; }.price { display: flex; align-items: baseline; gap: 6px; margin-top: 25px; }.price strong { font-size: 29px; letter-spacing: -.04em; }.price-card>p { min-height: 34px; margin: 11px 0 16px; color: var(--muted); font-size: 11px; }.price-card ul { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 17px 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; }
@keyframes pricing-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 20% 50%; } }
.welcome-section { position: relative; z-index: 1; padding-top: 30px; transform: translateY(-80px); margin-bottom: -80px; }.welcome-card { display: grid; width: min(100%, 1180px); min-height: 125px; margin: 0 auto; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 20px 30px; border: 0; border-radius: 22px; background: rgba(40,42,52,.07); box-shadow: 0 14px 36px rgba(10,12,20,.07),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(4px) saturate(102%); -webkit-backdrop-filter: blur(4px) saturate(102%); color: #fff; }.welcome-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: var(--rainbow); color: #fff; font-size: 20px; }.welcome-symbol { display: grid; width: 1em; height: 1em; place-items: center; line-height: 1; transform-origin: 50% 50%; transform-box: fill-box; }.welcome-card:hover .welcome-symbol { animation: welcome-symbol-pop 2.1s cubic-bezier(.25,.7,.3,1); }.welcome-card h2 { margin: 6px 0 5px; font-size: 23px; letter-spacing: -.04em; }.welcome-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 11px; }@keyframes welcome-symbol-pop { 0% { transform: rotate(0deg) scale(1); } 35% { transform: rotate(270deg) scale(1.3); } 70% { transform: rotate(540deg) scale(1.3); } 100% { transform: rotate(720deg) scale(1); } }
.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; transform: translateY(-130px); margin-bottom: -130px; }.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: 0; }.accordion summary { display: flex; min-height: 56px; 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 .35s ease; }.accordion details[open] summary span { transform: rotate(45deg); }.accordion details p { overflow: hidden; margin: 0 40px 14px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.final-cta { padding-bottom: 80px; transform: translateY(-120px); margin-bottom: -120px; }.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 8px; font-size: clamp(37px,5vw,65px); line-height: 1; letter-spacing: -.055em; }.cta-panel p { position: relative; margin: 0; color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.75; }.cta-panel .button { position: relative; margin-top: 22px; }.cta-panel .button-light:hover { background: rgba(14,17,25,.9); color: #fff; box-shadow: 0 16px 38px rgba(13,16,29,.28); backdrop-filter: blur(14px); }.cta-panel .button-light:hover:before,.cta-panel .button-light:hover:after { opacity: 1; }.cta-panel .button-light:hover:after { background: rgba(14,17,25,.94); }.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%); }.cta-panel:hover .cta-orb { animation: cta-ripple 2.8s cubic-bezier(.22,.55,.22,1) 1; }@keyframes cta-ripple { 0% { border-color: rgba(255,255,255,.1); box-shadow: 0 0 0 0 rgba(255,255,255,.2),0 0 0 0 rgba(255,255,255,.12),inset 0 0 80px rgba(255,255,255,.05); transform: translateX(-50%) scale(.68); opacity: .45; } 28% { border-color: rgba(255,255,255,.24); box-shadow: 0 0 0 30px rgba(255,255,255,.12),0 0 0 70px rgba(255,255,255,.06),inset 0 0 105px rgba(255,255,255,.08); opacity: .9; } 64% { border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 100px rgba(255,255,255,.07),0 0 0 210px rgba(255,255,255,.025),inset 0 0 130px rgba(255,255,255,.06); opacity: .72; } 100% { border-color: rgba(255,255,255,0); box-shadow: 0 0 0 260px rgba(255,255,255,0),0 0 0 520px rgba(255,255,255,0),inset 0 0 150px rgba(255,255,255,0); transform: translateX(-50%) scale(1.85); opacity: 0; } }
.site-footer { width: min(1180px,calc(100% - 40px)); margin: 60px auto 28px; padding: 30px 34px 18px; border: 1px solid color-mix(in srgb,var(--line) 58%,transparent); border-radius: 28px; background: color-mix(in srgb,var(--surface-solid) 35%,transparent); box-shadow: 0 14px 42px rgba(32,35,56,.055); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); }.footer-main { display: grid; grid-template-columns: minmax(260px,1.2fr) auto auto minmax(150px,1fr); align-items: start; column-gap: 34px; }.footer-main .footer-column:last-child { justify-self: end; min-width: 190px; }.footer-brand p { max-width: 300px; color: var(--muted); font-size: 12px; line-height: 1.6; }.footer-column { display: flex; flex-direction: column; gap: 11px; }.footer-column strong { margin-bottom: 5px; font-size: 14px; }.footer-column a { color: var(--muted); font-size: 11px; transition: color .35s ease; }.footer-column a:hover { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.footer-preferences { display: flex; align-items: center; gap: 6px; }.footer-language-menu .language-options { top: auto; right: 0; bottom: calc(100% + 9px); }.footer-language-menu:after { top: auto; right: -8px; bottom: 100%; }.footer-theme-toggle,.footer-language-toggle { background: color-mix(in srgb,var(--surface-solid) 52%,transparent); }

@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; gap: 42px; }.workflow-card,.workflow-card.reverse { display: flex; }.workflow-card .workflow-copy { min-height: 0; padding: 0 2px 9px; }.workflow-demo { height: 420px; grid-template-columns: 82px 260px; }.workflow-demo .workflow-thumb { width: 82px; height: calc((420px - 14px)/3); }.workflow-demo .workflow-thumb i { width: 100%; height: 100%; }.workflow-demo .workflow-preview { width: 260px; height: 420px; min-height: 0; }.preview-object { transform: none; }
}

@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: 325px; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1/-1; }.footer-bottom { gap: 12px; flex-direction: column; }
}

@media (max-width: 600px) {
  [data-i18n="videoTitle"],[data-i18n="visualStyle"],[data-i18n="proVisual"],[data-i18n="payResult"],[data-i18n="usersSay"],[data-i18n="questionsTitle"],[data-i18n="readyTitle"],.tryon-heading { font-size: 36px !important; }
}

[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: rgba(32,34,42,.08); }

.comparison-section { margin-top: -135px; }
.pricing-section { margin-top: -90px; }
.price-card .popular-badge { white-space: nowrap; }.business-price { border-color: color-mix(in srgb,var(--violet) 48%,var(--line)); }

.comparison-grid .compare-top { flex-direction: row; gap: 20px; text-align: left; }.comparison-grid .compare-top strong { justify-content: flex-end; }.comparison-grid .compare-top strong b { font-size: 42px; }.comparison-grid .compare-top strong small { font-size: 13px; }.comparison-grid ul { margin-top: 18px; padding-top: 16px; }
.comparison-grid article { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.72fr); column-gap: 24px; align-items: stretch; }.comparison-grid .compare-top { display: contents; }.comparison-grid .compare-top>span { grid-column: 1; align-self: start; }.comparison-grid .compare-top strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-content: center; flex-direction: column; gap: 2px; text-align: center; }.comparison-grid .compare-top strong b { font-size: clamp(58px,6vw,82px); letter-spacing: -.08em; }.comparison-grid .compare-top strong small { font-size: 15px; }.comparison-grid ul { grid-column: 1; margin-top: 22px; padding-top: 16px; }.comparison-grid .compare-button { grid-column: 1 / -1; justify-self: start; }
.comparison-grid article { grid-template-columns: minmax(0,1fr) 115px; column-gap: 16px; padding: 20px 18px; }.compare-content>span { display: block; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.comparison-grid .compare-content ul { margin-top: 14px; padding-top: 12px; }.comparison-grid .compare-content li { font-size: 12px; line-height: 1.35; }.compare-time { display: flex; min-height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 3px; text-align: center; }.compare-time b { display: block; padding: 0 .04em .12em; font-size: 82px; line-height: 1; letter-spacing: -.08em; }.traditional-compare .compare-time { opacity: .55; }.compare-time small { font-size: 13px; }.ai-compare .compare-time b { font-size: 123px; background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; }.compare-content .compare-button { margin-top: 17px; }
.comparison-grid li i { width: 30px; height: 30px; flex-basis: 30px; font-size: 16px; }.compare-time { position: relative; align-items: center; justify-content: center; padding-top: 0; }.compare-time b { font-size: 75px; line-height: .92; }.compare-time small { position: absolute; right: 20px; bottom: 18px; font-size: 13px; }.ai-compare .compare-time b { font-size: 123px; }.ai-compare .compare-time small { right: 9px; bottom: 17px; }.compare-button { position: absolute; right: -38px; bottom: -25px; z-index: 3; min-height: 65px; padding: 0 31px; font-size: 12px; }
@media (max-width: 700px) { .comparison-grid article { display: block; }.compare-time { min-height: 0; margin-top: 18px; padding-top: 16px; flex-direction: row; gap: 7px; border-top: 1px solid var(--line); }.compare-time b { font-size: 64px; }.ai-compare .compare-time b { font-size: 88px; }.comparison-grid .compare-content li { font-size: 11px; }.comparison-grid .compare-button { margin-top: 18px; } }
@media (max-width: 700px) { .comparison-grid li i { width: 24px; height: 24px; flex-basis: 24px; font-size: 13px; }.compare-time { position: relative; padding-top: 16px; }.compare-time small { position: static; }.compare-button { position: static; min-height: 46px; margin-top: 18px; } }
.comparison-section .comparison-grid { width: min(760px,100%); gap: 12px; }.comparison-grid article { grid-template-columns: minmax(0,1fr) minmax(125px,.65fr); column-gap: 14px; padding: 16px 18px; border-radius: 20px; }.comparison-grid .compare-top>span { font-size: 10px; }.comparison-grid .compare-top strong b { font-size: clamp(88px,8vw,104px); line-height: .78; }.comparison-grid .compare-top strong small { margin-top: 8px; font-size: 12px; }.comparison-grid ul { gap: 6px; margin-top: 11px; padding-top: 10px; }.comparison-grid li { gap: 7px; font-size: 9px; line-height: 1.25; }.comparison-grid li i { width: 16px; height: 16px; flex-basis: 16px; font-size: 9px; }.compare-button { min-height: 36px; margin-top: 12px; padding: 0 14px; font-size: 10px; }.ai-compare:before { inset: 8px 14px -10px; border-radius: 20px; filter: blur(20px); }
@media (max-width: 700px) { .comparison-section .comparison-grid { width: 100%; }.comparison-grid article { padding: 20px; }.comparison-grid .compare-top strong b { font-size: 64px; }.comparison-grid li { font-size: 10px; } }

.showcase-section { margin-top: 90px; padding-top: 0; }
.showcase-section .showcase-heading { display: block; max-width: 680px; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; }.showcase-section .showcase-heading>p { max-width: 560px; margin: 8px auto 0; padding-bottom: 0; font-size: 12px; }.showcase-section .showcase-heading h2 { margin: 5px 0 0; }.showcase-section .marquee { margin-top: 14px; padding-top: 10px; }

.workflow-card .workflow-copy { padding: 14px 3px 8px 26px; }
.workflow-card .workflow-copy .step-number { top: -13px; left: -14px; }

@media (min-width: 901px) {
  .workflow-list { width: 960px; max-width: 100%; margin-right: auto; margin-left: auto; gap: 15px; }
  .workflow-demo { grid-template-columns: 66px 230px; gap: 9px; }
  .workflow-demo .workflow-preview { width: 230px; }
}

@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-section { transform: translateY(-50px); margin-bottom: -50px; }.welcome-card { display: flex; align-items: flex-start; flex-direction: column; padding: 24px 22px; }.welcome-card .button { width: 100%; }.showcase-section { padding-top: 30px; }
  .tryon-placeholder { gap: 5px; }.tryon-mini-stack { width: 66px; height: 280px; }.tryon-mini-stack span { width: 66px; height: 87px; border-radius: 6px; }.tryon-main-block { width: 168px; height: 280px; border-radius: 8px; }
  .workflow-card .workflow-copy { padding: 0 2px 8px; }.workflow-card .workflow-copy h3 { min-height: 0; font-size: 21px; }.workflow-card .workflow-copy>p { min-height: 0; }.workflow-demo { height: 310px; grid-template-columns: 61px 190px; gap: 8px; }.workflow-demo .workflow-thumb { width: 61px; height: calc((310px - 14px)/3); }.workflow-demo .workflow-thumb i { width: 100%; height: 100%; }.workflow-demo .workflow-preview { width: 190px; height: 310px; min-height: 0; }.preview-object { transform: none; }
}

.category-meta { position: absolute; z-index: 2; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }.category-meta>div { display: flex; flex-direction: column; align-items: flex-end; }.category-meta small { color: color-mix(in srgb,var(--muted) 58%,transparent); font-size: 7px; font-weight: 700; letter-spacing: .12em; backdrop-filter: blur(4px); }.category-meta strong { margin-top: 3px; font-size: 22px; line-height: 1; letter-spacing: -.04em; }.category-star { order: 2; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--rainbow-soft); color: var(--primary); font-size: 18px; }
.category-action { display: grid; width: min(960px,calc(100% - 40px)); grid-template-columns: auto minmax(280px,470px); align-items: center; justify-content: start; gap: 10px; margin: 12px auto 0; }.category-action p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: left; }
.showcase-section .marquee { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }.showcase-section .marquee.dragging { cursor: grabbing; }.showcase-section .marquee-track { padding: 40px 18px; will-change: transform; }.showcase-section .gallery-card { position: relative; z-index: 1; transition: transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease; }.showcase-section .gallery-card:hover { z-index: 4; box-shadow: 0 24px 60px rgba(60,64,67,.15); transform: scale(1.1); }

@media (max-width: 600px) { .category-action { display: flex; width: calc(100% - 28px); align-items: stretch; flex-direction: column; gap: 18px; }.category-action .button { align-self: flex-start; }.category-action p { text-align: left; } }

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

/* Final pricing overrides: visible star markers and compact cards. */
.price-card { min-height: 325px; }
.price-card li:before { margin-right: 8px; color: var(--primary); content: "✦"; font-size: 16px; font-weight: 800; line-height: 0; vertical-align: -1px; }
.price-card li.credit-feature { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; background-size: 240% 240%; color: transparent; font-size: 16.8px; font-weight: 800; animation: logo-shimmer 7s ease-in-out infinite alternate; }
.welcome-card > .button { width: 244px; justify-content: center; }
.tryon-placeholder { gap: 8px; background: transparent; box-shadow: none; }
.tryon-mini-stack { width: 104px; height: 360px; }
.tryon-mini-stack span { width: 104px; height: 112px; border-radius: 8px; background: #a9adb5; box-shadow: none; }
.tryon-mini-stack span:nth-child(1),.tryon-mini-stack span:nth-child(2),.tryon-mini-stack span:nth-child(3) { background: #a9adb5; }
.tryon-main-block { width: 235px; height: 360px; border-radius: 10px; background: #c3c6cc; box-shadow: none; }
.tryon-placeholder { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 500px !important; background: transparent !important; box-shadow: none !important; }
.tryon-placeholder { border: 0 !important; }
.tryon-placeholder .tryon-mini-stack { display: flex !important; width: 94px !important; height: 360px !important; flex-direction: column !important; justify-content: space-between !important; gap: 0 !important; transform: translateX(-5px); }
.tryon-placeholder .tryon-mini-stack span { display: block !important; width: 94px !important; height: 112px !important; flex: 0 0 112px !important; border: 0 !important; border-radius: 8px !important; background: #737780 !important; box-shadow: none !important; }
.tryon-placeholder .tryon-mini-stack span { background: var(--surface) !important; }
.tryon-placeholder .tryon-main-block { display: block !important; width: 235px !important; height: 360px !important; flex: 0 0 235px !important; border: 0 !important; border-radius: 10px !important; background: var(--surface) !important; box-shadow: none !important; }
.tryon-placeholder .tryon-mini-stack { width: 89px !important; transform: translateX(-5px); }
.tryon-placeholder .tryon-mini-stack span { width: 89px !important; }
.tryon-placeholder .tryon-main-block:before,.tryon-placeholder .tryon-main-block:after { display: none !important; content: none !important; }
.tryon-placeholder .tryon-main-block { margin-right: 0; }
.tryon-placeholder { justify-content: stretch !important; }
.tryon-placeholder .tryon-mini-stack { flex: 0 0 89px !important; }
.tryon-placeholder .tryon-main-block { width: auto !important; flex: 1 1 auto !important; }
.video-placeholder { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.tryon-placeholder .tryon-video-stack { width: min(calc(100% - 97px), 310px); height: 330px; flex: 1 1 auto; }
.tryon-main-stack { position: relative; width: min(100%, 310px); height: 330px; flex: 0 0 310px; }
.tryon-stack-card { position: absolute; inset: 0; overflow: hidden; border: 0; border-radius: 10px; background: var(--surface); cursor: pointer; transition: transform .55s cubic-bezier(.2,.75,.25,1); }.tryon-stack-card span { position: absolute; top: 18%; right: 16%; left: 16%; height: 42%; border-radius: 8px; background: #9297a1; }.tryon-stack-card i { position: absolute; right: 16%; bottom: 12%; left: 16%; height: 16%; border-radius: 6px; background: #d8dade; }.tryon-card-front { z-index: 3; transform: translateY(-14px); }.tryon-card-two { z-index: 2; transform: translate(10px,-2px) rotate(3deg); }.tryon-card-three { z-index: 1; transform: translate(20px,10px) rotate(6deg); }
@media (max-width: 600px) {
  .tryon-placeholder .tryon-mini-stack { flex-basis: 89px !important; width: 89px !important; }
  .tryon-placeholder .tryon-mini-stack span { width: 89px !important; }
  .tryon-placeholder .tryon-main-block { width: auto !important; flex: 1 1 auto !important; }
}
.feature-row#tools { transform: translateY(-110px); margin-bottom: -110px; }
.feature-row.feature-reverse { transform: translateY(-190px); margin-bottom: -190px; }
.testimonial-section { width: 100%; max-width: none; overflow: hidden; transform: translateY(-130px); margin-bottom: -130px; }.testimonial-section .section-heading { width: min(1180px,calc(100% - 40px)); }.testimonial-marquee { overflow: visible; padding: 10px 0; cursor: grab; touch-action: pan-y; user-select: none; }.testimonial-marquee.dragging { cursor: grabbing; }.testimonial-track { display: flex; width: max-content; gap: 16px; padding-left: 16px; animation: testimonial-left 144s linear infinite; will-change: transform,translate; }.testimonial-backward .testimonial-track { animation-name: testimonial-right; }.testimonial-track blockquote { position: relative; display: flex; width: 340px; min-height: 133px; flex-direction: column; justify-content: space-between; margin: 0; padding: 19px 25px; border: 1px solid rgba(255,255,255,.06); border-radius: 22px; background: color-mix(in srgb,var(--surface) 25%,transparent); box-shadow: 0 14px 30px rgba(20,24,45,.035); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .35s ease,box-shadow .35s ease,border-color .35s ease; }.testimonial-track blockquote:before { position: absolute; z-index: -1; inset: -2px; border-radius: inherit; padding: 2px; background: var(--rainbow); background-size: 220% 220%; content: ""; opacity: 0; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pricing-shimmer 6s ease-in-out infinite alternate; transition: opacity .35s ease; }.testimonial-track blockquote:hover { z-index: 5; border-color: transparent; box-shadow: 0 22px 48px rgba(95,100,190,.17); transform: scale(1.08); }.testimonial-track blockquote:hover:before { opacity: 1; }.testimonial-track blockquote>p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }.testimonial-track footer { display: flex; align-items: center; gap: 7px; margin-top: 14px; }.review-star { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 30px; line-height: 1; }.testimonial-track footer strong { font-size: 11px; }@keyframes testimonial-left { from { transform: translateX(-50%); } to { transform: translateX(0); } }@keyframes testimonial-right { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tryon-placeholder { overflow: visible; gap: 20px; background: transparent; box-shadow: none; }
.tryon-mini-stack { display: flex; width: 92px; height: 290px; flex-direction: column; justify-content: space-between; }
.tryon-mini-stack span { display: block; width: 92px; height: 76px; border-radius: 14px; background: var(--surface-soft); box-shadow: 0 12px 26px rgba(48,53,88,.1); }
.tryon-mini-stack span:nth-child(1) { background: linear-gradient(145deg,#dce7ff,#b2c0ee); }.tryon-mini-stack span:nth-child(2) { background: linear-gradient(145deg,#e9dff4,#d3b9e4); }.tryon-mini-stack span:nth-child(3) { background: linear-gradient(145deg,#dbeee4,#a8d2c0); }
.tryon-main-block { position: relative; display: block; width: 235px; height: 360px; border-radius: 20px; background: linear-gradient(145deg,#eef1f8,#c7d0e9); box-shadow: 0 22px 48px rgba(48,53,88,.14); }.tryon-main-block:before { position: absolute; top: 16%; right: 16%; left: 16%; height: 42%; border-radius: 18px; background: linear-gradient(145deg,#8d9bd0,#6573b0); content: ""; }.tryon-main-block:after { position: absolute; right: 16%; bottom: 12%; left: 16%; height: 16%; border-radius: 12px; background: rgba(255,255,255,.72); content: ""; }
.video-placeholder { overflow: visible; background: transparent; box-shadow: none; }
.video-card-stack { position: relative; width: min(78%, 390px); height: 390px; perspective: 900px; }
.video-stack-card { position: absolute; inset: 0; display: flex; overflow: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 30px; border: 0; border-radius: 24px; background: linear-gradient(145deg,#262b3c,#0c0f19 72%); box-shadow: 0 22px 55px rgba(18,21,42,.2); color: #fff; cursor: pointer; text-align: left; transition: transform .55s cubic-bezier(.2,.75,.25,1),opacity .45s ease,filter .45s ease; }.video-stack-card:after { position: absolute; top: -25%; right: -20%; width: 75%; height: 75%; border-radius: 50%; background: var(--rainbow); content: ""; filter: blur(38px); opacity: .38; }.video-stack-card strong,.video-stack-card small,.video-brand { position: relative; z-index: 1; }.video-stack-card strong { font-size: clamp(28px,3.2vw,42px); line-height: .95; letter-spacing: -.06em; }.video-stack-card small { margin-top: 16px; color: rgba(255,255,255,.52); font-size: 8px; font-weight: 800; letter-spacing: .16em; }.video-brand { position: absolute; top: 22px; left: 22px; display: grid; width: 58px; height: 31px; place-items: center; border-radius: 8px; background: #050608; color: transparent; font-size: 17px; font-weight: 900; letter-spacing: -.08em; background-image: var(--rainbow); -webkit-background-clip: text; background-clip: text; }.card-front { z-index: 4; transform: translateY(-18px); }.card-two { z-index: 3; transform: translate(12px,-5px) rotate(3deg); }.card-three { z-index: 2; transform: translate(24px,8px) rotate(6deg); }.card-four { z-index: 1; transform: translate(36px,21px) rotate(9deg); }
.testimonial-track blockquote { border: 1px solid rgba(255,255,255,.06) !important; background: color-mix(in srgb,var(--surface) 25%,transparent) !important; box-shadow: 0 14px 30px rgba(20,24,45,.035) !important; }
.footer-main { grid-template-columns: 220px 120px 120px minmax(0,1fr) !important; }
.footer-main .footer-column { justify-self: start !important; }
.footer-main .footer-column:last-child { justify-self: end !important; }
[data-theme="light"] .testimonial-track blockquote { border: 2px solid transparent !important; background: linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--rainbow) border-box !important; box-shadow: 0 14px 30px rgba(20,24,45,.08) !important; }
.footer-main { grid-template-columns: 220px auto auto minmax(150px,1fr) !important; }
.footer-main .footer-column { justify-self: start !important; }
.footer-main .footer-column:last-child { justify-self: end !important; }
[data-theme="light"] .testimonial-track blockquote { border: 2px solid transparent !important; background: linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--rainbow) border-box !important; box-shadow: 0 14px 30px rgba(20,24,45,.08) !important; }