:root{
  --ink:#1f1a1c;--ink-2:#4a4246;--muted:#8d8689;
  --rose:#c45c7c;--rose-d:#a8496a;--blush:#fbeef0;--blush-2:#f5dde3;--cream:#fffaf8;--line:#eee3e6;
  --card:#fff;
  --shadow-sm:0 2px 10px rgba(70,30,45,.06);
  --shadow:0 12px 32px rgba(70,30,45,.09);
  --shadow-lg:0 24px 60px rgba(70,30,45,.16);
  --ease:cubic-bezier(.22,.8,.24,1);
  --font:'Pragati Narrow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,#fff 0,#fff 420px,var(--cream) 100%);font-size:18px;min-height:100vh;animation:pagein .6s var(--ease)}
body.leaving{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
::selection{background:var(--blush-2)}

/* header */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:28px 64px 20px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:padding .4s var(--ease),box-shadow .4s ease,background .4s ease}
.site-header.scrolled{padding-top:14px;padding-bottom:12px;box-shadow:0 1px 0 var(--line),0 8px 30px rgba(70,30,45,.06)}
.home-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:21px;line-height:1;transition:background .3s ease,border-color .3s ease,transform .3s var(--ease),box-shadow .3s ease}
.home-btn span{padding-top:3px}
.home-btn:hover{background:var(--blush);border-color:var(--blush-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center;gap:8px;font-size:24px;letter-spacing:-.3px;margin-left:6px}
.brand img{height:42px;width:auto;transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand span{padding-top:4px}
.nav{margin-left:auto;display:flex;gap:34px;font-size:24px;line-height:1;letter-spacing:-.2px}
.nav a{position:relative;padding:8px 0 6px;transition:color .3s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rose);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav a:hover,.nav a.active{color:var(--rose-d)}
.cart{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-left:14px;flex:none;transition:background .3s ease,transform .3s var(--ease)}
.cart:hover{background:var(--blush);transform:translateY(-2px)}
.cart-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rose);color:#fff;font-size:12px;line-height:19px;text-align:center;transform:scale(0);transition:transform .35s var(--ease)}
.cart-count.on{transform:scale(1)}
.cart-count.on.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn i{display:block;width:20px;height:1.6px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.site-header.open .menu-btn i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.site-header.open .menu-btn i:nth-child(2){opacity:0}
.site-header.open .menu-btn i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:4px 36px 0;border-radius:999px;background:var(--ink);color:#fff;font-size:23px;letter-spacing:.2px;box-shadow:0 6px 18px rgba(31,26,28,.18);transition:background .35s ease,transform .35s var(--ease),box-shadow .35s ease}
.btn:hover{background:var(--rose);transform:translateY(-3px);box-shadow:0 14px 28px rgba(196,92,124,.3)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:var(--blush);border-color:var(--blush-2);box-shadow:var(--shadow)}
.btn.sm{height:46px;font-size:20px;padding:3px 26px 0}
.link{font-size:18px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--blush-2);text-underline-offset:4px;text-decoration-thickness:2px;transition:color .3s,text-decoration-color .3s}
.link:hover{color:var(--rose-d);text-decoration-color:var(--rose)}
.eyebrow{font-size:16px;letter-spacing:2.5px;text-transform:uppercase;color:var(--rose)}

/* scroll reveal */
.js-reveal [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js-reveal [data-reveal].in{opacity:1;transform:none}

/* builder */
.builder{display:grid;grid-template-columns:minmax(300px,480px) minmax(380px,460px) minmax(260px,320px);gap:64px;justify-content:center;max-width:1512px;margin:0 auto;padding:24px 40px 90px;align-items:start}
.preview{position:sticky;top:110px;text-align:center}
.photo{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--blush);box-shadow:var(--shadow)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease,transform 1.2s var(--ease),filter .8s ease}
.photo img.out{opacity:0;transform:scale(1.04);filter:blur(6px)}
.photo .tag{position:absolute;left:14px;bottom:14px;padding:7px 14px 5px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);font-size:17px;box-shadow:var(--shadow-sm)}
.colors{margin-top:18px}
.colors h4{font-weight:400;font-size:20px;color:var(--ink-2)}
.swatches{display:flex;gap:12px;justify-content:center;margin-top:6px}
.swatches i{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.15);transition:transform .4s var(--ease),background .5s}
.swatches i:hover{transform:scale(1.15)}
.center{text-align:center}
.center h3,.right h3{font-weight:400}
.lbl{font-size:24px;letter-spacing:-.2px;line-height:34px;margin-bottom:10px}
.field{margin-bottom:30px}
.name-in{width:240px;height:52px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);font:22px var(--font);text-align:center;outline:0;padding-top:4px;transition:box-shadow .3s,border-color .3s}
.name-in:focus,.vision:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(196,92,124,.12)}
.sizes{display:flex;justify-content:space-between;gap:14px}
.opt{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);font-size:19px;letter-spacing:.3px;transition:transform .35s var(--ease),box-shadow .35s ease,background .3s,border-color .3s}
.opt:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.size{flex:1;height:54px;padding-top:3px}
.opt[aria-pressed=true]{background:var(--blush);border-color:var(--rose);box-shadow:0 8px 20px rgba(196,92,124,.16)}
.opt::after{content:"✓";position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--rose);color:#fff;font:700 13px/22px system-ui,sans-serif;text-align:center;transform:scale(0);transition:transform .35s var(--ease)}
.opt[aria-pressed=true]::after{transform:scale(1)}
.occ{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.occ .opt{height:128px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px}
.occ .opt img{width:72px;height:72px;object-fit:contain;margin-bottom:auto;margin-top:12px;transition:transform .5s var(--ease)}
.occ .opt:hover img{transform:scale(1.08) rotate(-3deg)}
.go{margin-top:6px}
.right{text-align:center}
.right h3{font-size:30px;line-height:40px;letter-spacing:-.3px}
.right h3.vision-h{margin-top:30px}
.picks{display:grid;grid-template-columns:repeat(5,48px);gap:12px;justify-content:center;margin:12px 0 10px}
.pick{position:relative;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:3px;opacity:.5;filter:saturate(.6);transition:opacity .3s,filter .3s,transform .35s var(--ease),box-shadow .3s,border-color .3s}
.pick:hover{opacity:1;filter:none;transform:translateY(-3px) scale(1.05)}
.pick img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:10px}
.pick[aria-pressed=true]{opacity:1;filter:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(196,92,124,.15)}
.pick-name{min-height:22px;font-size:17px;color:var(--muted);margin-bottom:4px;transition:opacity .2s}
.vision{display:block;width:100%;height:230px;margin:12px auto 0;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);padding:24px 22px;font:17px/23px var(--font);letter-spacing:.2px;text-align:center;resize:none;outline:0;transition:box-shadow .3s,border-color .3s}

/* meadow preview on the builder */
.meadow{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#fbe3ea 0%,#fdf2f4 45%,#fff 80%);box-shadow:var(--shadow)}
.meadow .hill{position:absolute;left:-8%;width:116%;max-width:none;bottom:-3%;z-index:20;pointer-events:none;filter:saturate(.9)}
.meadow .tag{position:absolute;left:14px;top:14px;z-index:40;padding:7px 14px 5px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);font-size:17px;box-shadow:var(--shadow-sm)}
.bloom{position:absolute;left:var(--x);bottom:var(--b,30%);height:var(--h);transform:translateX(-50%) rotate(var(--r));transform-origin:50% 100%;transition:transform .9s var(--ease),opacity .5s ease}
.bloom img{height:100%;width:auto;max-width:none;transform-origin:50% 100%;animation:bloomsway 7s ease-in-out infinite alternate;filter:drop-shadow(0 6px 10px rgba(60,40,30,.08))}
.bloom.hero{bottom:-6%;z-index:30!important}
.bloom.pop{transition:transform .85s cubic-bezier(.34,1.45,.64,1),opacity .4s ease}
.bloom.down{transform:translateX(-50%) translateY(110%) rotate(var(--r));opacity:0;transition:transform .55s cubic-bezier(.5,0,.75,0),opacity .35s ease .2s}
@keyframes bloomsway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}

/* generated result */
.result{display:grid;grid-template-columns:minmax(300px,560px) minmax(300px,460px);gap:80px;justify-content:center;align-items:center;max-width:1512px;margin:0 auto;padding:24px 40px 90px}
.result h1,.page h1{font-weight:400;font-size:54px;line-height:1.05;letter-spacing:-1px;margin:6px 0 8px}
.result p{font-size:20px;line-height:26px;margin:6px 0}
.frame .photo{aspect-ratio:4/5}
.frame .credit{font-size:14px;color:var(--muted);margin-top:10px;text-align:center;opacity:0;transition:opacity .6s .4s}
.frame.ready .credit{opacity:1}
.frame .credit a{text-decoration:underline}
.frame .photo img{opacity:0;transform:scale(1.08);filter:blur(14px)}
.frame.ready .photo img{opacity:1;transform:none;filter:none;transition:opacity 1s ease,transform 1.6s var(--ease),filter 1s ease}
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(110deg,var(--blush) 30%,#fff 50%,var(--blush) 70%) 0 0/250% 100%;animation:shimmer 1.6s linear infinite;transition:opacity .6s ease;z-index:2}
.frame.ready .loader{opacity:0;pointer-events:none}
.loader img{width:84px;animation:breathe 1.6s ease-in-out infinite}
.loader p{font-size:21px;color:var(--ink-2);min-height:26px;transition:opacity .25s}
.loader .bar{width:180px;height:3px;border-radius:3px;background:rgba(196,92,124,.15);overflow:hidden}
.loader .bar i{display:block;height:100%;width:0;background:var(--rose);border-radius:3px}
@keyframes shimmer{to{background-position:-250% 0}}
@keyframes breathe{50%{transform:scale(1.08) rotate(-4deg);opacity:.75}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.chip{display:flex;align-items:center;gap:8px;padding:5px 14px 3px 6px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:18px;transition:transform .35s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.quote{font-size:19px;line-height:25px;color:var(--ink-2);border-left:2px solid var(--rose);padding-left:16px;margin:18px 0 24px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.price-tag{font-size:30px;margin:10px 0 18px}

/* content pages */
.page{max-width:1160px;margin:0 auto;padding:30px 40px 100px}
.page .lead{font-size:23px;line-height:32px;max-width:700px;margin-bottom:36px;color:var(--ink-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}
.card{background:var(--card);border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:14px 14px 22px;text-align:center;transition:transform .5s var(--ease),box-shadow .5s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .ph{aspect-ratio:4/4.4;border-radius:16px;overflow:hidden;margin-bottom:14px;background:var(--blush)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card h3{font-weight:400;font-size:28px}
.card p{font-size:18px;color:var(--muted);margin:2px 0 14px}
.card .gicon{width:84px;height:84px;object-fit:contain;margin:22px auto 16px;transition:transform .6s var(--ease)}
.card:hover .gicon{transform:scale(1.1) rotate(-4deg)}
.credits li{list-style:none;font-size:17px;color:var(--ink-2);margin:4px 0}
.credits a{text-decoration:underline}

/* checkout */
.co{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:start}
.line{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.line .th{width:72px;height:72px;border-radius:14px;object-fit:cover;flex:none;background:var(--blush)}
.line .info-l{flex:1}
.line h3{font-weight:400;font-size:25px}
.line p{font-size:17px;color:var(--muted)}
.line .rm{font-size:16px;text-decoration:underline;color:var(--muted);transition:color .2s}
.line .rm:hover{color:var(--rose)}
.line .price{font-size:24px;white-space:nowrap;text-align:right}
.line.gone{opacity:0;transform:translateX(30px);transition:.35s var(--ease)}
.total{display:flex;justify-content:space-between;font-size:28px;margin-top:18px}
.form{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:28px;display:grid;gap:12px;position:sticky;top:110px}
.form h3{font-weight:400;font-size:28px}
.form input,.form select{font:19px var(--font);padding:12px 14px 9px;border:1px solid var(--line);border-radius:12px;outline:0;width:100%;background:#fff;transition:border-color .3s,box-shadow .3s}
.form input:focus,.form select:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(196,92,124,.12)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.empty{font-size:22px;color:var(--muted);padding:20px 0}
.done{text-align:center;padding:60px 0;animation:pagein .7s var(--ease)}
.done img{width:110px;margin:0 auto 10px;animation:breathe 2.4s ease-in-out infinite}

/* dialog */
dialog{border:0;border-radius:24px;box-shadow:var(--shadow-lg);padding:30px;max-width:540px;width:92%;margin:auto;font-family:var(--font)}
dialog[open]{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
dialog::backdrop{background:rgba(31,26,28,.3);backdrop-filter:blur(3px)}
dialog h3{font-size:32px;font-weight:400;margin-bottom:10px}
dialog ul{max-height:60vh;overflow:auto}
dialog li{list-style:none;display:flex;gap:12px;align-items:center;margin:10px 0;font-size:19px;line-height:22px}
dialog li img{width:46px;height:46px;object-fit:cover;object-position:50% 22%;border-radius:12px;background:var(--blush);flex:none}
dialog .btn{margin-top:14px}

.toast{position:fixed;left:50%;bottom:30px;z-index:100;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 24px 9px;border-radius:999px;font-size:19px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .35s ease,transform .45s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1100px){
  .builder,.result{grid-template-columns:1fr;gap:36px;padding:16px 24px 70px}
  .builder>*,.result>*{max-width:520px;margin:0 auto;width:100%}
  .preview{position:static}
  .co{grid-template-columns:1fr}
  .form{position:static}
}
@media(max-width:820px){
  .site-header{padding:16px 20px;flex-wrap:wrap}
  .brand span{display:none}
  .menu-btn{display:flex}
  .cart{margin-left:4px}
  .nav{order:5;width:100%;flex-direction:column;gap:0;font-size:24px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
  .nav a{padding:12px 0 8px;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .site-header.open .nav{max-height:260px}
  .page{padding:20px 20px 80px}
  .result h1,.page h1{font-size:42px}
  .occ{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-reveal [data-reveal]{opacity:1;transform:none}
}