:root {
  --bg: #f6f7fa;
  --bg-warm: #fafafb;
  --surface: #ffffff;
  --surface-high: #f1f2f5;
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(253,253,254,.92);
  --text: #171719;
  --text-2: #55575d;
  --text-3: #8a8d94;
  --border: rgba(10,10,10,.12);
  --border-strong: rgba(10,10,10,.20);
  --gold: #8c6b12;
  --gold-bright: #f1c95a;
  --gold-soft: #ead98b;
  --black: #0d0e10;
  --shadow-sm: 0 12px 30px rgba(28,30,35,.08);
  --shadow-md: 0 24px 60px rgba(24,25,30,.12);
  --shadow-lg: 0 42px 100px rgba(19,20,24,.18);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 46px;
  --max: 1240px;
  --spring: cubic-bezier(.16,1,.3,1);
  --spring-pop: cubic-bezier(.34,1.56,.64,1);
  --header-h: 76px;
}

html[data-theme="dark"] {
  --bg: #0d0e10;
  --bg-warm: #101114;
  --surface: #15161a;
  --surface-high: #202126;
  --glass: rgba(23,24,28,.76);
  --glass-strong: rgba(29,30,34,.92);
  --text: #ffffff;
  --text-2: #a7a8ac;
  --text-3: #777980;
  --border: rgba(255,255,255,.11);
  --border-strong: rgba(255,255,255,.18);
  --gold: #c79b25;
  --gold-bright: #f1c95a;
  --gold-soft: #8c6b12;
  --black: #060708;
  --shadow-sm: 0 14px 36px rgba(0,0,0,.24);
  --shadow-md: 0 28px 68px rgba(0,0,0,.36);
  --shadow-lg: 0 48px 110px rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(1000px 600px at 92% -10%, rgba(241,201,90,.12), transparent 58%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .45s ease, color .45s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
::selection { background: rgba(140,107,18,.22); }

.skip-link {
  position: fixed; left: 18px; top: 14px; z-index: 1000;
  transform: translateY(-150%); padding: 10px 14px; border-radius: 999px;
  background: var(--text); color: var(--surface); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.section { position: relative; padding: 112px 24px; }
.section-shell { width: min(var(--max), calc(100vw - 48px)); margin: 0 auto; position: relative; }
.glass-surface { background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); }
.card-surface { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

.site-header { position: fixed; z-index: 100; inset: 16px 20px auto; pointer-events: none; }
.nav-shell {
  height: var(--header-h); width: min(1180px, calc(100vw - 40px)); margin: auto;
  border-radius: 24px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 18px; pointer-events: auto; box-shadow: 0 12px 40px rgba(20,22,26,.08);
  transition: transform .35s var(--spring), background .35s, border-color .35s;
}
.site-header.is-scrolled .nav-shell { transform: translateY(-6px); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 39px; height: 39px; object-fit: contain; border-radius: 10px; }
.brand-word { font-weight: 850; letter-spacing: .16em; font-size: 14px; }
.desktop-nav { display: flex; align-items: center; gap: 7px; }
.desktop-nav a { padding: 11px 14px; color: var(--text-2); font-size: 13px; font-weight: 650; border-radius: 999px; transition: color .2s, background .2s; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--text); background: color-mix(in srgb, var(--surface-high) 80%, transparent); outline: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 46px; height: 46px; border-radius: 15px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); display: grid; place-items: center; cursor: pointer; position: relative; transition: transform .35s var(--spring-pop), background .25s; }
.icon-button:hover { transform: translateY(-2px); }
.icon-button svg, .button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon { position: absolute; display: grid; place-items: center; transition: transform .45s var(--spring-pop), opacity .25s; }
.theme-icon-sun { opacity: 1; transform: scale(1) rotate(0); }
.theme-icon-moon { opacity: 0; transform: scale(.5) rotate(-30deg); }
html[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: scale(.5) rotate(35deg); }
html[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0); }
.menu-toggle { display: none; }
.mobile-menu { pointer-events: auto; width: min(420px, calc(100vw - 40px)); margin: 8px auto 0; padding: 12px; border-radius: 22px; display: none; opacity: 0; transform: translateY(-12px) scale(.98); transition: .3s var(--spring); }
.mobile-menu.is-open { opacity: 1; transform: translateY(0) scale(1); }
.mobile-menu a { display: block; padding: 13px 14px; border-radius: 12px; color: var(--text-2); font-weight: 650; }
.mobile-menu a:hover { background: var(--surface-high); color: var(--text); }

.button { border: 0; border-radius: 999px; min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 760; font-size: 14px; position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--spring), box-shadow .25s, background .25s, color .25s, border-color .25s; cursor: pointer; }
.button::after { content: ""; position: absolute; inset: -150% -30%; z-index: -1; background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.30) 50%, transparent 64%); transform: translateX(-60%) rotate(8deg); transition: transform .7s var(--spring); }
.button:hover::after { transform: translateX(60%) rotate(8deg); }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 46px; padding: 0 18px; }
.button-large { min-height: 58px; padding: 0 24px; font-size: 15px; }
.button-primary { background: linear-gradient(135deg, #997717 0%, #6f4e18 100%); color: white; box-shadow: 0 14px 34px rgba(111,78,24,.25); }
html[data-theme="dark"] .button-primary { background: linear-gradient(135deg, #f1c95a, #b98718); color: #15110a; }
.button-dark { background: var(--text); color: var(--surface); }
.button-ghost { background: var(--glass); border: 1px solid var(--border); color: var(--text); }
.play-dot { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-high); font-size: 8px; padding-left: 1px; }

.hero { min-height: 940px; padding-top: 158px; padding-bottom: 54px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-warm) 98%, transparent), var(--bg)); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 0); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 65%); opacity: .2; }
.hero-canvas { position: absolute; inset: 40px 0 auto auto; width: 64%; height: 720px; pointer-events: none; opacity: .92; transition: opacity .4s; }
.no-webgl .hero-canvas { opacity: 0; }
.hero-aura { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; opacity: .6; }
.hero-aura-one { width: 680px; height: 680px; right: -110px; top: 30px; background: radial-gradient(circle, rgba(241,201,90,.22), rgba(140,107,18,.05) 48%, transparent 70%); }
.hero-aura-two { width: 440px; height: 440px; right: 34%; top: 270px; background: radial-gradient(circle, rgba(125,211,252,.09), transparent 68%); }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; min-height: 640px; gap: 24px; }
.hero-copy { max-width: 590px; z-index: 5; padding-top: 26px; }
.eyebrow-pill { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--glass); padding: 9px 13px; border-radius: 999px; color: var(--text-2); font-size: 12px; font-weight: 720; letter-spacing: .02em; backdrop-filter: blur(15px); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(140,107,18,.10); }
.hero h1 { font-size: clamp(54px, 6.1vw, 92px); line-height: .94; letter-spacing: -.058em; margin: 28px 0 24px; font-weight: 820; max-width: 760px; }
.gold-text { background: linear-gradient(115deg, #735309 0%, #a77e13 45%, #d3ad3f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .gold-text { background-image: linear-gradient(115deg, #f5d56d, #c99926 55%, #8c6b12); }
.hero-lead { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.62; color: var(--text-2); max-width: 560px; margin: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-proof { display: flex; gap: 0; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--border); }
.hero-proof > div { padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--border); display: grid; gap: 3px; }
.hero-proof > div:last-child { border: 0; margin-right: 0; padding-right: 0; }
.hero-proof strong { font-size: 13px; }
.hero-proof span { font-size: 11px; color: var(--text-3); }

.hero-stage { position: relative; min-height: 650px; z-index: 3; perspective: 1400px; }
.hero-stage-shadow { position: absolute; width: 430px; height: 80px; border-radius: 50%; background: rgba(10,10,10,.25); filter: blur(34px); bottom: 40px; left: 54%; transform: translateX(-50%) rotate(-4deg); opacity: .32; }
.phone-wrap { position: absolute; width: 345px; height: 682px; left: 51%; top: 50%; transform: translate(-50%,-50%) rotate(5deg); transform-style: preserve-3d; transition: transform .18s ease-out; }
.phone { position: absolute; inset: 0; border-radius: 54px; background: linear-gradient(145deg,#3b3c42,#0d0e10 44%,#2d2e33); padding: 10px; box-shadow: 0 50px 110px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.26), inset 0 0 0 3px rgba(0,0,0,.64); }
.phone::before { content:""; position:absolute; width: 105px; height: 28px; border-radius: 999px; background:#050506; top: 18px; left:50%; transform:translateX(-50%); z-index:7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.phone-side { position:absolute; background:#24252a; border-radius:5px; }
.phone-side-left { width:4px; height:68px; left:-3px; top:150px; box-shadow: 0 88px 0 #24252a; }
.phone-side-right { width:4px; height:96px; right:-3px; top:180px; }
.phone-screen { position: relative; height:100%; overflow:hidden; border-radius:46px; background:#0e0f11; color:white; display:flex; flex-direction:column; }
.phone-status { display:flex; justify-content:space-between; padding:14px 20px 4px; font-size:9px; font-weight:700; color:#e9e9ea; z-index:3; }
.status-icons { letter-spacing:2px; opacity:.8; }
.phone-toolbar { height:50px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; }
.phone-toolbar button { border:0; background:transparent; color:white; font-size:24px; cursor:default; }
.phone-toolbar strong { font-size:12px; letter-spacing:.02em; }
.phone-toolbar .save-pill { font-size:10px; padding:8px 13px; border-radius:999px; background:var(--gold-bright); color:#231b08; font-weight:800; }
.phone-photo-wrap { margin:0 10px; height:285px; overflow:hidden; border-radius:25px; position:relative; background:#1d1f24; }
.phone-photo { width:100%; height:100%; object-fit:cover; filter:saturate(1.03) contrast(1.02); }
.edit-scan { position:absolute; top:0; bottom:0; width:2px; left:57%; background:rgba(255,255,255,.82); box-shadow:0 0 20px white; opacity:.7; animation:scan 5.5s var(--spring) infinite; }
@keyframes scan { 0%,100%{left:28%;opacity:.3} 50%{left:73%;opacity:.9} }
.photo-badge { position:absolute; left:12px; bottom:12px; padding:7px 10px; border-radius:999px; background:rgba(10,10,10,.62); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); font-size:9px; display:flex; gap:6px; align-items:center; }
.photo-badge span { width:6px; height:6px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 10px var(--gold-bright); }
.tool-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:12px 12px 8px; }
.tool-tab { border:0; background:transparent; color:#777980; padding:9px 3px; border-radius:11px; font-size:9px; font-weight:700; cursor:pointer; transition:.25s; }
.tool-tab.is-active { background:#24251f; color:#f1c95a; }
.control-stack { padding:4px 16px 8px; display:grid; gap:15px; }
.control-row { display:grid; grid-template-columns:58px 1fr 26px; align-items:center; gap:9px; font-size:8px; color:#c5c5c7; }
.control-row em { font-style:normal; font-size:8px; text-align:right; color:#999a9f; }
.slider { height:3px; border-radius:999px; background:#34353a; position:relative; }
.slider i { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#8c6b12,#f1c95a); border-radius:inherit; }
.slider b { width:10px; height:10px; border-radius:50%; background:#fff; position:absolute; top:50%; transform:translate(-50%,-50%); box-shadow:0 2px 7px rgba(0,0,0,.4); }
.phone-bottom-nav { margin-top:auto; min-height:62px; border-top:1px solid #292a2f; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; padding:0 7px 9px; font-size:8px; color:#717278; text-align:center; }
.phone-bottom-nav .is-current { color:#f1c95a; font-weight:800; }
.floating-card { position:absolute; z-index:6; min-width:185px; border-radius:20px; padding:13px 14px; display:flex; align-items:center; gap:11px; box-shadow:var(--shadow-md); transition:transform .3s var(--spring); }
.floating-card:hover { transform:translateY(-6px) scale(1.02); }
.floating-card strong { display:block; font-size:11px; margin-bottom:2px; }
.floating-card small { display:block; color:var(--text-3); font-size:9px; }
.float-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(241,201,90,.20),rgba(140,107,18,.08)); color:var(--gold); font-size:18px; border:1px solid rgba(140,107,18,.14); }
.floating-card-ai { right:-10px; top:116px; animation:floaty 5.2s ease-in-out infinite; }
.floating-card-remove { left:-10px; top:318px; animation:floaty 6.1s ease-in-out infinite reverse; }
.floating-card-beauty { right:8px; bottom:84px; animation:floaty 5.7s ease-in-out infinite -.8s; }
.floating-card-beauty img { width:36px; height:36px; border-radius:11px; object-fit:cover; }
@keyframes floaty { 0%,100%{translate:0 0} 50%{translate:0 -11px} }

.hero-tool-rail { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:22px; border:1px solid var(--border); background:var(--glass); backdrop-filter:blur(20px); border-radius:28px; padding:10px; box-shadow:var(--shadow-sm); z-index:5; }
.rail-item { min-width:0; padding:18px 13px; display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:start; border-right:1px solid var(--border); border-radius:18px; transition:background .25s, transform .35s var(--spring); }
.rail-item:last-child { border-right:0; }
.rail-item:hover { background:var(--surface); transform:translateY(-4px); }
.rail-icon { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--surface-high); color:var(--gold); font-size:16px; }
.rail-item h3 { font-size:11px; margin:2px 0 5px; }
.rail-item p { margin:0; color:var(--text-3); font-size:9px; line-height:1.45; }

.section-heading { max-width:800px; margin-bottom:52px; }
.section-heading .kicker, .kicker, .mini-label { color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.13em; }
.section-heading h2, .compare-copy h2, .beauty-copy h2, .download-card h2 { font-size:clamp(38px,4.6vw,68px); letter-spacing:-.052em; line-height:1.02; margin:13px 0 18px; }
.section-heading p, .compare-copy > p, .beauty-copy > p { margin:0; color:var(--text-2); font-size:17px; line-height:1.68; max-width:660px; }

.story { background:var(--bg); }
.showcase-grid { display:grid; grid-template-columns:1.55fr .72fr; gap:18px; }
.showcase-main { border-radius:36px; padding:14px; overflow:hidden; display:grid; grid-template-columns:1.25fr .75fr; min-height:560px; }
.showcase-image-wrap { border-radius:27px; overflow:hidden; position:relative; min-height:420px; background:#222; }
.showcase-image-wrap img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.focus-ring { position:absolute; width:150px; height:150px; border:1px solid rgba(255,255,255,.75); border-radius:50%; left:48%; top:45%; transform:translate(-50%,-50%); box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 70px rgba(241,201,90,.18); }
.focus-ring::before,.focus-ring::after { content:""; position:absolute; background:rgba(255,255,255,.55); }
.focus-ring::before { width:1px; height:180%; left:50%; top:-40%; }
.focus-ring::after { height:1px; width:180%; top:50%; left:-40%; }
.showcase-copy { padding:36px 28px; align-self:end; }
.showcase-copy h3 { font-size:32px; line-height:1.05; letter-spacing:-.035em; margin:13px 0 14px; }
.showcase-copy p { color:var(--text-2); font-size:14px; line-height:1.6; margin:0; }
.showcase-side { display:grid; gap:18px; }
.mini-card { border-radius:30px; padding:26px; min-height:271px; overflow:hidden; position:relative; }
.mini-card-top { display:flex; align-items:center; justify-content:space-between; }
.mini-arrow { color:var(--text-3); }
.mini-card h3 { font-size:25px; letter-spacing:-.035em; margin:18px 0 9px; }
.mini-card p { color:var(--text-2); font-size:13px; line-height:1.55; margin:0; }
.eraser-demo { height:85px; position:relative; margin:17px 0 8px; border-radius:17px; background:linear-gradient(135deg,#e9ebf0,#f7f7f9); overflow:hidden; }
html[data-theme="dark"] .eraser-demo { background:linear-gradient(135deg,#202126,#2b2c31); }
.eraser-before { position:absolute; width:28px; height:28px; border-radius:50%; background:#62656b; left:26px; top:28px; box-shadow:55px 8px 0 #a6a8ad; }
.eraser-path { position:absolute; height:3px; width:90px; left:48px; top:42px; background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 14px); transform:rotate(-8deg); }
.eraser-after { position:absolute; right:23px; top:24px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:white; font-weight:900; }
.mini-card-gold { background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,#f3e7a7),var(--surface)); }
.privacy-orbit { height:82px; position:relative; margin:13px 0 4px; display:grid; place-items:center; }
.privacy-orbit::before { content:""; position:absolute; width:142px; height:55px; border:1px solid color-mix(in srgb,var(--gold) 52%,transparent); border-radius:50%; transform:rotate(-11deg); }
.privacy-orbit::after { content:""; position:absolute; width:112px; height:80px; border:1px solid color-mix(in srgb,var(--gold) 28%,transparent); border-radius:50%; transform:rotate(32deg); }
.privacy-orbit b { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:#101114; color:#f1c95a; font-size:22px; box-shadow:0 10px 28px rgba(0,0,0,.18); z-index:2; }
.privacy-orbit span,.privacy-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 14px rgba(241,201,90,.45); }
.privacy-orbit span { left:54px; top:21px; }.privacy-orbit i { right:49px; bottom:14px; }

.before-after-section { background:linear-gradient(180deg,var(--bg),var(--bg-warm)); }
.compare-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:54px; align-items:center; }
.compare-copy { padding-right:12px; }
.check-list { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:13px; }
.check-list li { display:flex; gap:11px; align-items:center; color:var(--text-2); font-size:14px; }
.check-list span { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:rgba(140,107,18,.10); color:var(--gold); font-size:11px; font-weight:900; }
.compare-card { border-radius:34px; padding:12px; overflow:hidden; }
.compare-media { position:relative; height:560px; border-radius:26px; overflow:hidden; background:#171719; touch-action:none; user-select:none; }
.compare-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-after { filter:saturate(1.11) contrast(1.08) brightness(1.05); }
.compare-before { position:absolute; inset:0; width:100%; overflow:hidden; z-index:2; clip-path:inset(0 48% 0 0); }
.compare-before img { width:100%; height:100%; max-width:none; filter:saturate(.62) contrast(.85) brightness(.76) blur(.25px); }
.compare-line { position:absolute; left:52%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.82); z-index:3; box-shadow:0 0 18px rgba(0,0,0,.2); }
.compare-handle { position:absolute; z-index:4; top:50%; left:52%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,.68); background:rgba(255,255,255,.92); color:#171719; box-shadow:0 15px 38px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; gap:5px; cursor:ew-resize; font-size:18px; }
.compare-handle:focus-visible { outline:3px solid var(--gold-bright); outline-offset:3px; }
.compare-label { position:absolute; z-index:5; top:18px; padding:8px 11px; border-radius:999px; background:rgba(10,10,10,.55); color:white; font-size:10px; font-weight:800; backdrop-filter:blur(10px); }
.compare-label-before { left:18px; }.compare-label-after { right:18px; }
.compare-footer { display:flex; align-items:center; gap:13px; padding:17px 8px 4px; color:var(--text-3); font-size:11px; }
.compare-footer strong { color:var(--text); font-size:12px; }.compare-footer .compare-value { margin-left:auto; }

.beauty { background:var(--bg-warm); }
.beauty-shell { display:grid; grid-template-columns:1.05fr .95fr; gap:68px; align-items:center; }
.beauty-photo { min-height:670px; border-radius:42px; padding:12px; overflow:hidden; position:relative; }
.beauty-photo > img { position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); object-fit:cover; border-radius:32px; }
.beauty-photo::after { content:""; position:absolute; inset:12px; border-radius:32px; background:linear-gradient(to top,rgba(0,0,0,.36),transparent 45%); pointer-events:none; }
.beauty-ui { position:absolute; z-index:3; border-radius:16px; padding:11px 13px; min-width:110px; display:flex; justify-content:space-between; align-items:center; gap:18px; color:var(--text); box-shadow:var(--shadow-sm); font-size:11px; }
.beauty-ui b { color:var(--gold); }.beauty-ui-one{left:35px;bottom:46px}.beauty-ui-two{right:36px;top:86px}.beauty-ui-three{right:31px;bottom:123px}
.face-guide { position:absolute; z-index:2; width:182px; height:252px; border:1px solid rgba(241,201,90,.50); border-radius:48% 48% 46% 46%; left:51%; top:38%; transform:translate(-50%,-50%) rotate(-2deg); box-shadow:0 0 45px rgba(241,201,90,.08); }
.face-guide::before,.face-guide::after { content:""; position:absolute; border:1px solid rgba(241,201,90,.38); border-radius:50%; width:42px; height:20px; top:96px; }.face-guide::before{left:31px}.face-guide::after{right:31px}
.beauty-copy { max-width:530px; }
.feature-pills { display:flex; flex-wrap:wrap; gap:9px; margin:27px 0; }
.feature-pills span { padding:9px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12px; color:var(--text-2); }
.text-link { font-weight:800; display:inline-flex; align-items:center; gap:10px; margin-top:9px; }.text-link span{transition:transform .25s}.text-link:hover span{transform:translateX(5px)}

.creative { background:var(--bg); }
.section-heading-row { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:50px; }
.section-heading-row > div { max-width:760px; }.section-heading-row p { max-width:390px; padding-bottom:6px; }
.creative-grid { display:grid; grid-template-columns:1.7fr .82fr; grid-template-rows:1fr 1fr; gap:18px; }
.creative-card { border-radius:32px; border:1px solid var(--border); position:relative; overflow:hidden; min-height:275px; box-shadow:var(--shadow-sm); }
.creative-card-wide { grid-row:1/3; min-height:570px; background:#151515; color:white; }
.creative-card-wide > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.08); transition:transform .8s var(--spring); }
.creative-card-wide:hover > img { transform:scale(1.035); }
.creative-card-wide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 26%,rgba(5,6,8,.76) 86%); }
.creative-overlay { position:absolute; z-index:2; left:34px; right:34px; bottom:74px; max-width:500px; }
.creative-overlay .mini-label { color:#f1c95a; }.creative-overlay h3{font-size:36px;letter-spacing:-.04em;margin:11px 0 9px}.creative-overlay p{font-size:13px;color:rgba(255,255,255,.73);line-height:1.55;margin:0}
.look-strip { position:absolute; z-index:3; left:28px; right:28px; bottom:20px; display:flex; gap:8px; }
.look-strip span { padding:7px 10px; font-size:8px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:rgba(255,255,255,.7); backdrop-filter:blur(8px); }.look-strip .is-active{background:#f1c95a;color:#1a1408;border-color:#f1c95a;font-weight:900}
.creative-card-dark { padding:28px; background:linear-gradient(145deg,#121316,#202126); color:white; }.creative-card-dark .mini-label{color:#f1c95a}.creative-card-dark h3{font-size:29px;line-height:1.05;letter-spacing:-.04em;max-width:330px;margin:17px 0 22px}.grain-field{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) .7px,transparent .7px);background-size:8px 8px;opacity:.08;mask-image:linear-gradient(120deg,transparent,black)}
.meter-stack { display:grid; gap:9px; }.meter-stack i{display:block;width:100%;height:5px;border-radius:999px;background:rgba(255,255,255,.09);position:relative}.meter-stack i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,#8c6b12,#f1c95a)}
.creative-card-light { padding:28px; background:var(--surface); }.creative-card-light h3{font-size:29px;line-height:1.05;letter-spacing:-.04em;max-width:330px;margin:17px 0 18px}.shape-stack{height:70px;position:relative}.shape-stack i{position:absolute;width:62px;height:62px;border-radius:18px;border:1px solid var(--border-strong);background:var(--surface-high);box-shadow:var(--shadow-sm);transform:rotate(-8deg)}.shape-stack i:nth-child(2){left:48px;transform:rotate(5deg);background:linear-gradient(135deg,rgba(241,201,90,.26),var(--surface))}.shape-stack i:nth-child(3){left:96px;transform:rotate(15deg);background:#171719}

.download { padding-top:86px; padding-bottom:80px; }
.download-card { min-height:440px; border-radius:42px; padding:58px 62px; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; isolation:isolate; }
.download-glow { position:absolute; width:650px; height:650px; right:-100px; top:-200px; background:radial-gradient(circle,rgba(241,201,90,.25),rgba(140,107,18,.06) 45%,transparent 68%); z-index:-1; }
.download-copy { max-width:650px; }.download-logo{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:.15em}.download-logo img{width:35px;height:35px;border-radius:9px}.download-card h2{max-width:650px}.download-card p{color:var(--text-2);font-size:17px;line-height:1.6;max-width:570px}.download-actions{display:flex;align-items:center;gap:15px;margin-top:28px;flex-wrap:wrap}.coming-note{font-size:12px;color:var(--text-3)}
.download-art { min-height:300px; position:relative; display:grid; place-items:center; }.download-v{width:170px;height:170px;border-radius:42px;background:#111214;color:#f1c95a;display:grid;place-items:center;font-size:84px;font-weight:900;box-shadow:0 35px 70px rgba(0,0,0,.24);transform:rotate(8deg);z-index:2}.download-disc{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}.disc-one{width:300px;height:110px;transform:rotate(-14deg)}.disc-two{width:210px;height:250px;transform:rotate(50deg)}

.site-footer { padding:0 24px 34px; background:var(--bg); }
.footer-grid { border-top:1px solid var(--border); padding-top:38px; display:grid; grid-template-columns:2fr .7fr .7fr 1fr; gap:36px; align-items:start; }
.footer-brand p { color:var(--text-3); font-size:12px; max-width:280px; line-height:1.6; margin-top:15px; }.footer-links{display:grid;gap:10px}.footer-links strong{font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}.footer-links a{font-size:12px;color:var(--text-2)}.footer-links a:hover{color:var(--gold)}.footer-meta{display:grid;gap:8px;color:var(--text-3);font-size:11px;text-align:right}
.noscript-banner { padding:12px 20px; background:#171719; color:white; text-align:center; font-size:12px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s var(--spring),transform .75s var(--spring); }
.reveal.is-visible { opacity:1; transform:none; }
[data-hover-glow] { --mx:50%; --my:50%; }
[data-hover-glow]::before { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(380px circle at var(--mx) var(--my),rgba(241,201,90,.12),transparent 50%); opacity:0; transition:opacity .35s; border-radius:inherit; }
[data-hover-glow]:hover::before { opacity:1; }
[data-tilt-mini] { transform-style:preserve-3d; transition:transform .2s ease-out, box-shadow .25s; }
[data-tilt-mini]:hover { box-shadow:var(--shadow-md); }
.magnetic { will-change:transform; }

@media (max-width: 1080px) {
  .desktop-nav { display:none; }.menu-toggle{display:grid}.hero-grid{grid-template-columns:.9fr 1.1fr}.hero h1{font-size:clamp(52px,7vw,76px)}.hero-stage{transform:scale(.91);transform-origin:center right}.hero-tool-rail{grid-template-columns:repeat(3,1fr)}.rail-item:nth-child(3){border-right:0}.rail-item:nth-child(-n+3){border-bottom:1px solid var(--border)}.showcase-main{grid-template-columns:1fr}.showcase-copy{align-self:auto}.showcase-grid{grid-template-columns:1.35fr .65fr}.compare-layout{grid-template-columns:.8fr 1.2fr}.beauty-shell{gap:42px}.creative-grid{grid-template-columns:1.5fr .85fr}.footer-grid{grid-template-columns:1.4fr .7fr .7fr}.footer-meta{grid-column:1/-1;text-align:left;border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between}
}

@media (max-width: 820px) {
  :root{--header-h:68px}.section{padding:82px 18px}.section-shell{width:min(var(--max),calc(100vw - 36px))}.site-header{inset:10px 10px auto}.nav-shell{width:calc(100vw - 20px);height:68px;border-radius:20px}.nav-actions .button{display:none}.brand-word{font-size:12px}.brand-mark{width:34px;height:34px}.mobile-menu{display:block;width:calc(100vw - 20px);visibility:hidden;pointer-events:none}.mobile-menu.is-open{visibility:visible;pointer-events:auto}.hero{padding-top:112px;min-height:auto}.hero-grid{display:flex;flex-direction:column;align-items:stretch}.hero-copy{max-width:700px}.hero h1{font-size:clamp(52px,13vw,78px);max-width:720px}.hero-lead{max-width:620px}.hero-stage{width:100%;min-height:700px;transform:scale(.94);transform-origin:center}.hero-canvas{width:100%;height:720px;top:350px;opacity:.7}.floating-card-ai{right:3%}.floating-card-remove{left:3%}.floating-card-beauty{right:4%}.hero-tool-rail{grid-template-columns:repeat(2,1fr);margin-top:0}.rail-item:nth-child(n){border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.rail-item:nth-child(even){border-right:0}.rail-item:nth-last-child(-n+2){border-bottom:0}.showcase-grid,.compare-layout,.beauty-shell{grid-template-columns:1fr}.showcase-side{grid-template-columns:1fr 1fr}.compare-copy{max-width:650px}.compare-media{height:500px}.beauty-photo{min-height:650px;order:2}.beauty-copy{order:1;max-width:650px}.section-heading-row{display:block}.section-heading-row p{max-width:650px}.creative-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.creative-card-wide{grid-column:1/-1;grid-row:auto;min-height:520px}.download-card{grid-template-columns:1fr;padding:42px}.download-art{min-height:260px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
}

@media (max-width: 560px) {
  .section{padding:68px 16px}.section-shell{width:calc(100vw - 32px)}.hero{padding-top:100px}.eyebrow-pill{font-size:10px}.hero h1{font-size:clamp(46px,14vw,64px);margin-top:22px}.hero-lead{font-size:16px}.hero-actions{display:grid}.button-large{width:100%}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.hero-proof>div{padding:0 10px;margin:0;border-right:1px solid var(--border)}.hero-proof>div:first-child{padding-left:0}.hero-proof strong{font-size:11px}.hero-proof span{font-size:9px;line-height:1.35}.hero-stage{min-height:610px;transform:scale(.82);margin:-40px 0}.phone-wrap{left:50%}.floating-card{min-width:165px}.floating-card-remove{left:-9%}.floating-card-ai{right:-9%}.floating-card-beauty{right:-5%}.hero-tool-rail{grid-template-columns:1fr;padding:8px;border-radius:24px}.rail-item:nth-child(n){border-right:0;border-bottom:1px solid var(--border);grid-template-columns:40px 1fr}.rail-item:last-child{border-bottom:0}.rail-item p{font-size:10px}.section-heading h2,.compare-copy h2,.beauty-copy h2,.download-card h2{font-size:40px}.section-heading p,.compare-copy>p,.beauty-copy>p{font-size:15px}.showcase-main{padding:9px;border-radius:28px}.showcase-image-wrap{min-height:390px;border-radius:22px}.showcase-copy{padding:26px 18px}.showcase-side{grid-template-columns:1fr}.mini-card{min-height:245px}.compare-media{height:440px}.beauty-photo{min-height:560px;border-radius:32px}.beauty-photo>img{border-radius:24px}.face-guide{top:39%;width:160px;height:225px}.beauty-ui{min-width:95px;font-size:10px}.beauty-ui-two{right:24px}.beauty-ui-one{left:24px}.beauty-ui-three{right:24px}.creative-grid{grid-template-columns:1fr}.creative-card-wide{grid-column:auto;min-height:500px}.creative-overlay{left:24px;right:24px}.creative-overlay h3{font-size:31px}.look-strip{left:20px;right:20px;overflow:auto;scrollbar-width:none}.download-card{padding:32px 24px;border-radius:32px}.download-art{min-height:220px}.download-v{width:132px;height:132px;font-size:64px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-meta{display:grid;grid-column:1/-1}.theme-toggle{width:42px;height:42px}.menu-toggle{width:42px;height:42px}.nav-shell{padding-left:13px}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.hero-canvas{display:none}.floating-card{animation:none}.reveal{opacity:1;transform:none}
}

/* Robust enhancement layer: content never disappears when JS/module loading fails. */
.reveal { opacity: 1; transform: none; }
.js-enhanced .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.js-enhanced .reveal.is-visible { opacity: 1; transform: none; }

/* Interactive hero preview */
.floating-card {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.floating-card > span:last-child { display: grid; }
.floating-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb,var(--gold-bright) 50%,transparent), var(--shadow-md); }
.floating-card.is-active { border-color: color-mix(in srgb,var(--gold-bright) 62%,var(--border)); box-shadow: 0 14px 42px rgba(140,107,18,.20); transform: translateY(-3px) scale(1.02); }
.phone-toolbar button { cursor: pointer; }
.phone-toolbar .save-pill { transition: background .2s, transform .2s; }
.phone-toolbar .save-pill:hover { transform: translateY(-1px); }
.phone-toolbar .save-pill.is-saved { background: #b9e8bd; color: #132517; }
.phone-photo { transition: filter .45s var(--spring), transform .45s var(--spring), opacity .25s; }
.phone-screen.mode-enhance .phone-photo { filter: saturate(1.22) contrast(1.09) brightness(1.08); transform: scale(1.015); }
.phone-screen.mode-beauty .phone-photo { filter: saturate(1.04) contrast(1.02) brightness(1.04); }
.phone-screen.mode-remove .phone-photo-wrap::after {
  content:"";
  position:absolute;
  left:var(--brush-x,62%);
  top:var(--brush-y,54%);
  width:56px;
  height:56px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 7px rgba(0,0,0,.12),0 0 24px rgba(255,255,255,.18);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.phone-screen.mode-remove .edit-scan { opacity: 0; }
.phone-bottom-nav { display:grid; grid-template-columns:repeat(5,1fr); margin-top:auto; padding:10px 10px 13px; border-top:1px solid rgba(255,255,255,.07); }
.phone-bottom-nav button { border:0; background:transparent; color:#6e7077; font-size:8px; font-weight:700; padding:7px 2px; border-radius:9px; cursor:pointer; transition:.2s; }
.phone-bottom-nav button:hover { color:#d8d8da; background:rgba(255,255,255,.04); }
.phone-bottom-nav button.is-current { color:#f1c95a; background:rgba(241,201,90,.07); }
.export-preview { margin:13px 14px 0; padding:18px 16px; border:1px solid rgba(255,255,255,.10); border-radius:17px; background:linear-gradient(145deg,rgba(241,201,90,.13),rgba(255,255,255,.03)); display:grid; gap:5px; }
.export-preview strong { font-size:11px; }
.export-preview span { color:#999ba2; font-size:9px; }

/* Legal pages */
.legal-page { padding-top:132px; min-height:70vh; }
.legal-hero { padding:58px 0 36px; border-bottom:1px solid var(--border); }
.legal-kicker { display:inline-flex; gap:8px; align-items:center; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.legal-hero h1 { font-size:clamp(46px,7vw,82px); line-height:.98; letter-spacing:-.055em; margin:16px 0 18px; }
.legal-hero > p { color:var(--text-2); font-size:17px; line-height:1.65; max-width:760px; }
.legal-badges { display:flex; gap:9px; flex-wrap:wrap; margin-top:22px; }
.legal-badge { border:1px solid var(--border); border-radius:999px; padding:8px 11px; font-size:10px; font-weight:800; letter-spacing:.06em; background:var(--surface); }
.legal-layout { display:grid; grid-template-columns:240px minmax(0,760px); justify-content:center; gap:64px; padding-top:54px; padding-bottom:100px; }
.legal-toc { position:sticky; top:116px; align-self:start; display:grid; gap:6px; padding:16px; border:1px solid var(--border); background:var(--glass); backdrop-filter:blur(18px); border-radius:20px; }
.legal-toc strong { padding:7px 9px; font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.legal-toc a { padding:8px 9px; border-radius:10px; color:var(--text-2); font-size:12px; }
.legal-toc a:hover { background:var(--surface-high); color:var(--text); }
.legal-content { min-width:0; }
.legal-content section { scroll-margin-top:120px; margin-bottom:52px; }
.legal-content h2 { font-size:27px; line-height:1.15; letter-spacing:-.035em; margin:0 0 18px; }
.legal-content h3 { font-size:18px; margin:28px 0 12px; letter-spacing:-.02em; }
.legal-content p, .legal-content li { color:var(--text-2); font-size:15px; line-height:1.78; }
.legal-content ul { padding-left:20px; }
.legal-content strong { color:var(--text); }
.legal-callout { margin:24px 0; padding:24px; border-radius:20px; border:1px solid color-mix(in srgb,var(--gold) 30%,var(--border)); background:linear-gradient(135deg,color-mix(in srgb,var(--gold-bright) 10%,var(--surface)),var(--surface)); }
.legal-callout h3 { margin:0 0 7px; }
.legal-callout p:last-child { margin-bottom:0; }
.legal-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:18px; margin:20px 0 28px; background:var(--surface); }
.legal-table { width:100%; border-collapse:collapse; min-width:580px; }
.legal-table th, .legal-table td { text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--border); font-size:13px; line-height:1.55; }
.legal-table th { background:var(--surface-high); color:var(--text); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.legal-table td { color:var(--text-2); }
.legal-table tr:last-child td { border-bottom:0; }
.legal-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0; }
.legal-note { font-size:12px !important; color:var(--text-3) !important; }
.legal-contact { display:grid; gap:6px; padding:24px; border-radius:20px; background:var(--surface); border:1px solid var(--border); }
.legal-contact a { color:var(--gold); font-weight:750; }
.legal-footer-links { display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; font-size:13px; }
.legal-footer-links a { color:var(--gold); font-weight:700; }

@media (max-width:820px) {
  .legal-page { padding-top:96px; }
  .legal-layout { grid-template-columns:1fr; gap:28px; padding-top:32px; }
  .legal-toc { position:relative; top:auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .legal-toc strong { grid-column:1/-1; }
}
@media (max-width:560px) {
  .legal-hero { padding-top:36px; }
  .legal-layout { padding-bottom:64px; }
  .legal-toc { grid-template-columns:1fr; }
  .legal-content h2 { font-size:24px; }
}