/* AI Photo Redesign - shared design system.
   Dark premium chassis. Brand gradient: pink #EC4899 -> purple #8B5CF6.
   System fonts only. Spacing scale 8/16/24/32/48/64/96. */

:root{
  --pink:#EC4899; --accent:#8B5CF6; --accent-press:#7C3AED; --accent-soft:#A78BFA;
  --grad:linear-gradient(94deg,#F472B6 0%,#EC4899 36%,#8B5CF6 100%);
  --ink:#F5F2FB; --on-dark:#F5F2FB; --muted:#ABA1C4; --muted-dark:#ABA1C4; --faint:#7E7599;
  --base:#0B0713; --raise:#120B20; --deep:#070410;
  --card:rgba(255,255,255,.04);
  --hairline:rgba(255,255,255,.09);
  --hairline-strong:rgba(255,255,255,.16);
  --gold:#FFC940;
  --prod-shadow:0 24px 70px rgba(109,40,217,.42), 0 0 0 1px rgba(255,255,255,.05);
  --card-shadow:0 12px 40px rgba(0,0,0,.35);
  --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px; --sp-sec:96px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:9999px;
  --maxw:980px; --gridw:1100px;
  --t-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --t-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--ink);
  font-family:var(--t-text);font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-0.2px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--gridw);margin:0 auto;padding:0 24px}

/* ---- Type scale (6 sizes: h1, h2, h3/lead, body 17, small 14, micro 13) ---- */
h1{font-family:var(--t-display);font-size:clamp(30px,6.2vw,64px);font-weight:700;line-height:1.05;letter-spacing:-0.025em;overflow-wrap:break-word}
h2{font-family:var(--t-display);font-size:clamp(26px,4.6vw,44px);font-weight:700;line-height:1.08;letter-spacing:-0.02em;overflow-wrap:break-word}
h3{font-family:var(--t-display);font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-0.01em}
.lead{font-size:clamp(18px,2.3vw,21px);font-weight:400;line-height:1.5;letter-spacing:-0.2px;color:var(--muted)}
.accent{color:var(--accent-soft)}
h1 .accent,h2 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Nav: glass sticky bar ---- */
.gnav{position:sticky;top:0;z-index:50;height:56px;display:flex;align-items:center;color:#fff;
  background:rgba(7,4,16,.6);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid var(--hairline)}
.gnav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.gnav .brand{display:flex;align-items:center;gap:10px;font-family:var(--t-display);font-size:15px;font-weight:600;letter-spacing:-0.01em}
.gnav .brand .dot{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;font-size:13px;box-shadow:0 2px 10px rgba(236,72,153,.35)}
.gnav a.cta{font-size:14px;font-weight:600;color:#fff;background:var(--grad);border-radius:var(--r-pill);
  padding:8px 16px;transition:transform .15s ease,box-shadow .2s ease}
.gnav a.cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,92,246,.4);opacity:1}

/* ---- Section tiles ---- */
.tile{padding:var(--sp-sec) 0;text-align:center;background:var(--base);position:relative}
.tile.parchment{background:var(--raise)}
.tile.dark{background:var(--deep)}
.tile .lead{margin:20px auto 0;max-width:640px}
.tile p.sub{color:var(--muted);font-size:17px;line-height:1.55;margin:16px auto 0;max-width:620px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--accent-soft);text-transform:uppercase;margin-bottom:16px}

/* ---- Prose (sub-page articles) ---- */
.prose{max-width:760px;margin:24px auto 0;text-align:left;color:var(--muted)}
.prose p{margin:16px 0;font-size:17px;line-height:1.6}
.prose h2{text-align:left;margin:48px 0 8px;font-size:clamp(26px,3.6vw,34px)}
.prose h3{margin:28px 0 6px;color:var(--ink)}
.prose ul{margin:14px 0 14px 20px}
.prose li{margin:8px 0}
.prose a{color:var(--accent-soft)}
.prose strong{color:var(--ink)}

/* ---- Buttons ---- */
.cta-row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
.btn{position:relative;overflow:hidden;font-family:var(--t-text);font-size:17px;font-weight:600;letter-spacing:-0.2px;
  background:var(--grad);color:#fff;border-radius:var(--r-pill);padding:14px 28px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 24px rgba(139,92,246,.32);transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(139,92,246,.45)}
.btn:active{transform:scale(.97);filter:brightness(.92);box-shadow:0 6px 18px rgba(139,92,246,.3)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-strong);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.06);box-shadow:none}
.link{color:var(--accent-soft);font-size:17px;font-weight:500;display:inline-flex;align-items:center;line-height:1;transition:opacity .2s ease}
.link:hover{opacity:.72}

/* Primary CTA light sweep */
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:shine 3.8s ease-in-out infinite}
.btn.ghost::after{content:none}
@keyframes shine{0%,58%{left:-60%}100%{left:135%}}

/* App Store badge button - the primary conversion element */
.appbtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:11px 22px 11px 18px;text-align:left;
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.appbtn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(139,92,246,.35);border-color:rgba(255,255,255,.3)}
.appbtn:active{transform:scale(.97)}
.appbtn svg{width:26px;height:32px;flex:none}
.appbtn .t{display:flex;flex-direction:column;line-height:1.15}
.appbtn .t small{font-size:12px;font-weight:400;color:rgba(255,255,255,.75);letter-spacing:.01em}
.appbtn .t b{font-family:var(--t-display);font-size:19px;font-weight:600;letter-spacing:-0.01em}
.appbtn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:shine 3.8s ease-in-out infinite}

/* Star rating + trust microcopy */
.stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.trust{display:flex;gap:12px 28px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:24px;
  font-size:14px;color:var(--muted);letter-spacing:-0.1px}
.trust b{color:var(--ink);font-weight:600}
.trust .tt{display:inline-flex;align-items:center;gap:8px}
.trust .tt .c{color:var(--accent-soft)}

/* Focus-visible - keyboard accessibility */
a:focus-visible,.btn:focus-visible,.appbtn:focus-visible,summary:focus-visible,.ba:focus-visible{
  outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:8px}
.crumb a:hover,.foot a:hover{opacity:.72}

/* ---- Product imagery ---- */
.shot{margin:48px auto 0;width:300px;height:auto;max-width:84vw;border-radius:42px;box-shadow:var(--prod-shadow);display:block}
/* Demo before/after photos are always 3:4 - lock ratio + cover so a stray
   inherited height can never stretch them (phone mockups exempt). */
.shot.flat{border-radius:var(--r-lg);aspect-ratio:3/4;height:auto;object-fit:cover}

/* ---- Two-up showcase ---- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xxl);align-items:center;text-align:left;max-width:var(--maxw);margin:0 auto}
.showcase h2,.showcase .lead{text-align:left}
.showcase .lead{margin-left:0;margin-right:0}
.showcase .shot{margin:0}
.check{display:flex;gap:12px;margin:14px 0;align-items:flex-start;font-size:17px;color:var(--muted);text-align:left}
.check .c{color:var(--accent-soft);font-weight:700;flex:none}

/* ---- Feature / use-case cards ---- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--maxw);margin:48px auto 0;text-align:left}
.feat .it{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px 24px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease}
.feat a.it{color:inherit;display:block}
.feat a.it:hover,.feat div.it:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.4);background:rgba(255,255,255,.055)}
.feat a.it h3{color:var(--accent-soft)}
.feat .it .ic{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;font-size:24px;
  background:linear-gradient(135deg,rgba(236,72,153,.16),rgba(139,92,246,.16));border:1px solid rgba(167,139,250,.22)}
.feat .it h3{margin:16px 0 8px}
.feat .it p{color:var(--muted);font-size:15px;line-height:1.55}
/* 4-card grids read better as 2x2 */
.feat.four{grid-template-columns:repeat(2,1fr);max-width:740px}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--maxw);margin:48px auto 0;text-align:left}
.step{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px 24px}
.step .n{font-family:var(--t-display);font-size:15px;font-weight:700;color:#fff;width:32px;height:32px;border-radius:50%;
  background:var(--grad);display:grid;place-items:center;box-shadow:0 4px 14px rgba(236,72,153,.3)}
.step h3{margin:16px 0 8px}
.step p{color:var(--muted);font-size:15px;line-height:1.55}

/* ---- Comparison table (sub-pages) ---- */
.cmp{max-width:760px;margin:40px auto 0;border-collapse:collapse;width:100%;text-align:left;font-size:16px}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--hairline)}
.cmp th{font-family:var(--t-display);font-weight:600;color:var(--ink)}
.cmp td{color:var(--muted)}
.cmp .yes{color:var(--accent-soft);font-weight:600}

/* ---- FAQ ---- */
.faq{max-width:760px;margin:40px auto 0;text-align:left}
details{border-top:1px solid var(--hairline);padding:22px 4px}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
summary{font-family:var(--t-display);font-weight:600;font-size:19px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;letter-spacing:-0.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent-soft);font-size:26px;font-weight:300;flex:none;transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:12px;font-size:17px;line-height:1.55}

/* ---- Breadcrumb (sub-pages) ---- */
.crumb{max-width:var(--gridw);margin:0 auto;padding:18px 24px 0;font-size:13px;color:var(--muted);text-align:left}
.crumb a{color:var(--accent-soft)}

/* ---- Footer ---- */
footer{background:var(--deep);color:var(--muted);padding:64px 0;font-size:13px;letter-spacing:-0.1px;border-top:1px solid var(--hairline)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center;max-width:var(--gridw);margin:0 auto;padding:0 24px}
.foot a{color:var(--muted);transition:color .2s ease}
.foot a:hover{color:var(--ink);opacity:1}
.foot .brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--t-display);font-weight:600;font-size:16px}
.foot .brand .dot{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;font-size:13px;color:#fff}

/* ---- Hero (index) ---- */
.hero{position:relative;overflow:hidden;padding-top:64px}
.hero .wrap{position:relative;z-index:1}
.aurora{position:absolute;inset:0;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(100px);opacity:.38}
.aurora i:first-child{width:600px;height:600px;background:#6D28D9;top:-240px;left:-160px;animation:drift 18s ease-in-out infinite alternate}
.aurora i:last-child{width:480px;height:480px;background:#DB2777;top:-120px;right:-180px;animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(46px,54px,0) scale(1.12)}}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;text-align:left}
.hero-grid h1{text-align:left}
.hero-grid .lead{text-align:left;margin:20px 0 0;max-width:520px}
.hero-grid .cta-row{justify-content:flex-start}
.hero-grid .trust{justify-content:flex-start}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--hairline-strong);border-radius:var(--r-pill);
  padding:7px 16px;margin-bottom:24px;letter-spacing:-0.1px}
.eyebrow .stars{font-size:13px}

/* Phone duo: real app screenshots as hero proof */
.phones{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
.phones::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent 70%);filter:blur(30px)}
.phones img{position:relative;width:250px;border-radius:36px;box-shadow:var(--prod-shadow)}
.phones .ph-back{transform:rotate(7deg) translateX(66px) scale(.92);opacity:.9;z-index:0}
.phones .ph-front{transform:rotate(-4deg) translateX(-48px);z-index:1}

/* Hero stats strip */
.stats{display:flex;gap:16px 48px;margin-top:40px;flex-wrap:wrap}
.stat b{font-family:var(--t-display);font-size:32px;font-weight:700;display:block;line-height:1;letter-spacing:-0.02em}
.stat span{color:var(--muted);font-size:14px;letter-spacing:-0.1px}

/* ---- Real-results marquee ---- */
.gallery{padding:0 0 var(--sp-sec);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mrow{margin-top:16px}
.marquee{display:flex;gap:16px;width:max-content;animation:slide 46s linear infinite}
.marquee.rev{animation-direction:reverse;animation-duration:58s}
.marquee:hover{animation-play-state:paused}
.marquee img{width:180px;height:222px;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--hairline)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Interactive before/after slider ---- */
.ba{position:relative;width:min(440px,100%);margin:48px auto 0;aspect-ratio:3/4;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--prod-shadow);user-select:none;-webkit-user-select:none;touch-action:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;max-width:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0);-webkit-clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--accent);display:grid;place-items:center;font-size:18px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ba-tag{position:absolute;top:14px;font-size:13px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:5px 12px;border-radius:var(--r-pill);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ba-tagL{left:14px}.ba-tagR{right:14px;background:var(--grad)}
.ba-cap{display:block;margin:16px auto 0;max-width:440px;text-align:center;font-size:13px;color:var(--muted);letter-spacing:-0.08px}
.ba-cap .c{color:var(--accent-soft);font-weight:600}
.showcase .ba{margin:0;max-width:440px}
.showcase .ba-cap{margin:16px 0 0;text-align:left}

/* ---- Final CTA panel ---- */
.cta-panel{max-width:var(--maxw);margin:0 auto;padding:64px 32px;border-radius:var(--r-xl);position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(236,72,153,.16),rgba(139,92,246,.14) 55%,rgba(109,40,217,.2)),var(--raise);
  border:1px solid rgba(167,139,250,.25)}
.cta-panel::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;top:-300px;left:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(236,72,153,.28),transparent 70%);pointer-events:none}
.cta-panel>*{position:relative}
.cta-panel .appicon{width:76px;height:76px;border-radius:18px;margin:0 auto 24px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* ---- Scroll reveal ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---- Motion safety ---- */
@media (prefers-reduced-motion: reduce){
  .btn::after,.appbtn::after,.aurora i,.marquee{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- Responsive ---- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-grid h1,.hero-grid .lead{text-align:center}
  .hero-grid .lead{margin:20px auto 0}
  .hero-grid .cta-row,.hero-grid .trust{justify-content:center}
  .stats{justify-content:center}
  .phones{min-height:480px}
  .phones img{width:216px}
  .phones .ph-back{transform:rotate(7deg) translateX(52px) scale(.92)}
  .phones .ph-front{transform:rotate(-4deg) translateX(-40px)}
}
@media(max-width:833px){
  :root{--sp-sec:64px}
  .hero{padding-top:48px}
  .showcase{grid-template-columns:1fr;text-align:center;gap:40px}
  .showcase h2,.showcase .lead{text-align:center}
  .showcase .lead{margin-left:auto;margin-right:auto}
  .showcase .shot{margin:0 auto}
  .showcase .ba{margin:0 auto}
  .showcase .ba-cap{margin:16px auto 0;text-align:center}
  .showcase .check{max-width:420px;margin-left:auto;margin-right:auto}
  .feat{grid-template-columns:repeat(2,1fr);gap:16px}
  .steps{grid-template-columns:1fr;gap:16px;max-width:480px}
  .cta-row{justify-content:center !important}
}
@media(max-width:600px){
  .feat,.feat.four{grid-template-columns:1fr;max-width:480px}
  .marquee img{width:140px;height:173px}
  .phones{min-height:420px}
  .phones img{width:184px}
  .phones .ph-back{transform:rotate(7deg) translateX(42px) scale(.92)}
  .phones .ph-front{transform:rotate(-4deg) translateX(-34px)}
  .cta-panel{padding:48px 20px;border-radius:var(--r-lg)}
}
@media(max-width:519px){
  .cmp{font-size:14px}
  .cmp th,.cmp td{padding:12px 10px}
}
@media(max-width:419px){
  .stats{gap:16px 28px}
  .stat b{font-size:26px}
}
/* Small phones: the big headline + rating pill were wider than the viewport and,
   because they can't shrink below their min-content, forced the whole hero past
   the edge (overflow-x:hidden then clipped everything). Shrink both so they fit. */
@media(max-width:480px){
  .hero-grid h1{font-size:clamp(26px,7.4vw,34px)}
  .hero-grid .lead{font-size:16px}
  .eyebrow{font-size:12px;gap:7px;padding:7px 12px;max-width:100%;
    flex-wrap:wrap;justify-content:center;text-align:center;line-height:1.35}
  .eyebrow .stars{font-size:11px}
}
.hero-grid > div{min-width:0}   /* let the text column shrink instead of overflowing */