/* Cartavelle sales page.
   Sections: hero · collection · steps · pricing · FAQ · closing. Flower effects live in .fx layers (js/flowers.js).
   Ornament images are Elyasa's own (orn/*.webp, resized copies, content unchanged). */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}
main{display:block}
.wa-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;flex:none}
.btn-light{background:var(--paper);color:var(--wine-deep)}
.btn-light:hover{background:#fff}
.btn-big{min-height:58px;padding:0 32px}
img[aria-hidden="true"]{pointer-events:none;user-select:none;-webkit-user-select:none}

/* ---------- motion ---------- */
@keyframes shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes cardUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}

/* ---------- flower layers (filled by js/flowers.js) ---------- */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx .p,.fx .p *{animation-play-state:paused}
.fx.run .p,.fx.run .p *{animation-play-state:running}
.fx i{display:block;width:var(--w);height:var(--h);background-repeat:no-repeat;background-size:var(--bs) auto;background-position:var(--bp);opacity:var(--o,.9);filter:var(--f,none)}
/* fall: rose petals tumbling down */
@keyframes fxFall{from{transform:translate3d(0,-60px,0)}to{transform:translate3d(var(--sw),calc(var(--ch) + 60px),0)}}
@keyframes fxFlutter{to{transform:rotate3d(1,.35,.2,360deg)}}
.fx-fall .p{position:absolute;top:0;left:var(--x);animation:fxFall var(--d) linear var(--dl) infinite}
.fx-fall .p i{animation:fxFlutter var(--fd) linear var(--dl) infinite}
/* wind: petals carried sideways in waves */
@keyframes fxWindX{from{transform:translate3d(-80px,0,0)}to{transform:translate3d(calc(var(--cw) + 80px),0,0)}}
@keyframes fxWindY{0%,100%{transform:translate3d(0,-26px,0) rotate(-20deg)}50%{transform:translate3d(0,26px,0) rotate(40deg)}}
.fx-wind .p{position:absolute;left:0;top:var(--y);animation:fxWindX var(--d) linear var(--dl) infinite}
.fx-wind .p b{display:block;animation:fxWindY var(--fd) ease-in-out var(--dl) infinite}
/* bokeh: big soft petals drifting slowly in the background */
@keyframes fxDrift{0%{transform:translate3d(0,0,0) rotate(0deg)}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r))}}
.fx-bokeh .p{position:absolute;left:var(--x);top:var(--y);animation:fxDrift var(--d) ease-in-out var(--dl) infinite alternate}

/* ---------- phone frame ---------- */
.phone{position:relative;aspect-ratio:9/19;border-radius:14%/6.6%;background:linear-gradient(145deg,#2b2023,#151012 60%,#2a1f22);padding:4.2%;
  box-shadow:0 0 0 1px rgba(226,200,146,.18),0 0 0 1px rgba(255,255,255,.05) inset,0 34px 60px -30px rgba(58,26,34,.6),0 10px 20px -12px rgba(58,26,34,.35)}
.phone::before{content:"";position:absolute;z-index:3;left:50%;top:2.6%;width:30%;height:2.6%;transform:translateX(-50%);border-radius:99px;background:#151012}
.phone-screen{position:relative;width:100%;height:100%;border-radius:11%/5.2%;overflow:hidden;background:var(--panel);isolation:isolate}
.phone-screen img,.phone-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-screen video{opacity:0;transition:opacity .6s var(--ease)}
.phone-screen video.on{opacity:1}
.phone-screen::after{content:"";position:absolute;z-index:2;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}

/* ---------- sections ---------- */
.sec{position:relative;max-width:1240px;margin:0 auto;padding:clamp(64px,8vw,110px) var(--gutter) 0}
.sec > :not(.fx){position:relative;z-index:1}
.sec-head{text-align:center;margin-bottom:clamp(26px,3.6vw,44px)}
.sec-title{font-size:clamp(2.3rem,4.6vw,3.8rem)}
.js .sec > *{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.js .sec.in > *{opacity:1;transform:none}
.js .sec.in > *:nth-child(3){transition-delay:.12s}
.js .sec.in > *:nth-child(4){transition-delay:.22s}
.js .sec.in > *:nth-child(5){transition-delay:.32s}

/* ---------- hero ---------- */
.hero > .fx{top:var(--header-h)}
.hero{position:relative;overflow:hidden;padding:calc(var(--header-h) + clamp(28px,5vw,64px)) var(--gutter) clamp(56px,7vw,96px);text-align:center}
.hero-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:grid;justify-items:center;grid-template-columns:minmax(0,1fr)}
.hero-title{font-size:clamp(3rem,7vw,6.2rem)}
.hero-title .mask-line{text-align:center}
.hero-ey{margin:18px 0 0;font:600 .68rem/1.5 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:14px}
.hero-ey::before,.hero-ey::after{content:"";width:30px;height:1px;background:var(--gold);flex:none}
.hero-stage{position:relative;width:clamp(210px,22vw,290px);margin-top:clamp(28px,3.4vw,44px)}
.hero-stage::before{content:"";position:absolute;inset:6% -40% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(185,130,137,.26),transparent)}
.hero-stage .phone{position:relative;z-index:1}
.hero .phone-screen::after{animation:shine 6.5s var(--ease) 2.2s infinite}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,3.4vw,40px)}

/* ---------- collection ---------- */
/* collection: endless row that drifts on its own (js: initCarousel); swipe/scroll pauses it */
.grid{display:block;overflow-x:auto;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 18px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.grid::-webkit-scrollbar{display:none}
/* V2: items live in a .track that drifts with transform; touching switches to native scrolling with snap (js/site.js initCarousel) */
.track{display:flex;gap:clamp(16px,2.2vw,30px);width:max-content}
.grid .item{scroll-snap-align:center}
.grid.snap{scroll-snap-type:x mandatory}
.grid .item{flex:0 0 clamp(230px,24vw,300px)}
.item{display:flex;flex-direction:column;gap:10px;min-width:0}
.tile{display:block;padding:14% 15% 12%;border-radius:6px;background:linear-gradient(180deg,#fff,var(--panel));border:1px solid rgba(169,134,78,.25);box-shadow:0 24px 40px -30px rgba(76,38,48,.45);text-decoration:none}
.tile .phone{transition:transform .7s var(--ease-out)}
.tile:hover .phone,.tile:focus-visible .phone{transform:translateY(-8px)}
.tile:hover .phone-screen::after{animation:shine 1.1s var(--ease)}
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px}
.nm{margin:0;font:500 clamp(1.15rem,1.6vw,1.4rem)/1.2 var(--f-display);letter-spacing:.01em;color:var(--wine-deep)}
.pr{margin:0;font:500 .8rem/1 var(--f-body);color:var(--ink-soft);white-space:nowrap}
.meta2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pick{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:99px;background:var(--wine);color:var(--paper);font:600 .72rem/1 var(--f-body);letter-spacing:.08em;text-decoration:none;white-space:nowrap;transition:background .3s var(--ease)}
.pick:hover,.pick:focus-visible{background:var(--wine-deep)}
.demo{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--wine);border-radius:99px;font:600 .72rem/1 var(--f-body);letter-spacing:.08em;color:var(--wine);text-decoration:none;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.demo:hover,.demo:focus-visible{background:var(--wine);color:var(--paper)}
/* design stagger kept; V2 keys it to the original position so the endless loop has no 48px jump at the seam */
@media (min-width:981px){ .grid .item.lo{margin-top:48px} }

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px)}
.steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.roman{display:block;padding:0 .1em;font:300 italic clamp(3.4rem,6vw,5rem)/1 var(--f-display);
  background:linear-gradient(170deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent}
.roman::after{content:"";display:block;width:46px;height:9px;margin:12px auto 0;
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,radial-gradient(circle,var(--gold) 0 2.5px,transparent 3px) center/9px 9px no-repeat}
.st b{display:block;font:500 clamp(1.08rem,1.6vw,1.4rem)/1.25 var(--f-display);color:var(--wine-deep)}
.st p{margin:8px auto 0;max-width:28ch;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
@media (min-width:761px){ .steps li + li::before{content:"";position:absolute;left:calc(clamp(12px,3vw,40px)/-2);top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,var(--line),transparent)} }

/* ---------- pricing (menu card) ---------- */
.offer{display:flex;width:fit-content;max-width:100%;margin:0 auto 26px;align-items:center;gap:12px;padding:12px 20px;border-radius:99px;background:#FAF3E8;border:1px solid rgba(169,134,78,.35);font:600 .82rem/1.4 var(--f-body);color:var(--gold-lo)}
.offer-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
/* V2: ring pulse with transform/opacity only (compositor, no repaint) */
.offer-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(169,134,78,.75);animation:ringG 2.4s var(--ease-out) infinite}
@keyframes ringG{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3.2);opacity:0}}
.tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);max-width:1080px;margin:0 auto}
.tc{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(34px,4vw,52px) clamp(20px,3vw,40px);text-align:center}
.tc-std{order:1}.tc-hi{order:2}.tc-cus{order:3}
.tc h3{margin:0;font:600 .78rem/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--wine-deep)}
.tc-price{margin:0;font:300 clamp(3.2rem,5vw,4.4rem)/1 var(--f-display);color:var(--wine-deep)}
.tc-price small{display:block;margin-bottom:6px;font:600 .62rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.tc-price s{font-size:.5em;color:var(--ink-soft);text-decoration-thickness:1px;margin-right:4px}
.tc-plus{margin:0;font:600 .64rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo)}
.tc .ck{list-style:none;margin:0;padding:0;width:100%;max-width:280px;flex:1}
.tc .ck li{position:relative;padding:12px 0;font-size:.88rem;line-height:1.5}
.tc .ck li + li::before{content:"";position:absolute;top:0;left:50%;width:40px;height:1px;margin-left:-20px;background:rgba(169,134,78,.6)}
.tc .btn{min-width:200px}
.tc-alt{display:block;margin:0;font-size:.8rem;color:rgba(245,233,228,.85);text-decoration:none;padding:12px 8px}
.tc-alt:hover{text-decoration:underline;text-underline-offset:4px}
/* recommended package */
.tc-hi{background:var(--wine);border-radius:4px;color:#F5E9E4;padding-top:clamp(74px,7vw,90px);box-shadow:0 40px 70px -40px rgba(76,38,48,.7)}
.tc-hi::before{content:"";position:absolute;inset:12px;pointer-events:none;opacity:.8;background-repeat:no-repeat;
  background-image:linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),
    linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi));
  background-size:26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.tc-hi h3,.tc-hi .tc-price{color:#FBF4EE}
.tc-hi .tc-price s{color:rgba(245,233,228,.6)}
.tc-hi .ck li + li::before{background:rgba(226,200,146,.55)}
.tc-foil{position:absolute;top:20px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 18px;border-radius:99px;font:600 .62rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--wine-deep);
  background:linear-gradient(110deg,#B98E48 0%,#F6E3AE 18%,#C9A35B 34%,#F3DFA6 52%,#B98E48 70%,#F6E3AE 86%,#C9A35B 100%) 0 0/250% 100%;box-shadow:0 8px 18px -8px rgba(30,10,16,.55),inset 0 0 0 1px rgba(255,255,255,.35);overflow:hidden}
/* V2: shimmer = a light strip moved with transform instead of animating background-position */
.tc-foil::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,250,235,.6),transparent);transform:translateX(-120%) skewX(-20deg);animation:foilSweep 5s var(--ease) 1.2s infinite}
@keyframes foilSweep{0%{transform:translateX(-120%) skewX(-20deg)}45%,100%{transform:translateX(330%) skewX(-20deg)}}
.tc-save{font:600 .6rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);border:1px solid rgba(226,200,146,.55);padding:6px 10px;border-radius:99px;margin-top:-4px}
.price.in .tc{animation:cardUp .9s var(--ease-out) both}
.price.in .tc-hi{animation-delay:.08s}
.price.in .tc-cus{animation-delay:.2s}
.price.in .tc-std{animation-delay:.32s}

/* ---------- FAQ ---------- */
.faq-list{max-width:860px;margin:0 auto}
.faq-cat{margin:34px 0 4px;padding-bottom:10px;border-bottom:1px solid rgba(169,134,78,.45);font:600 .66rem/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo)}
.faq-cat:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;gap:18px;padding:20px 0;cursor:pointer;font:500 clamp(1.08rem,1.6vw,1.32rem)/1.3 var(--f-display);color:var(--wine-deep)}
.faq summary::-webkit-details-marker{display:none}
.qt{flex:1}
.faq summary:hover .qt{color:var(--wine)}
.faq summary i{width:10px;height:10px;flex:none;border-right:1.5px solid var(--wine);border-bottom:1.5px solid var(--wine);transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary i{transform:translateY(2px) rotate(-135deg)}
.faq details p{margin:0;padding:0 0 22px;max-width:62ch;color:var(--ink-soft);line-height:1.7}
.faq details[open] p{animation:fadeUp .45s var(--ease-out)}

/* ---------- closing ---------- */
.close{position:relative;overflow:hidden;margin:clamp(70px,9vw,120px) 0 0;padding:clamp(70px,9vw,120px) var(--gutter);background:var(--wine);color:#F2E3DE;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.close::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(closest-side,rgba(226,200,146,.14),transparent);pointer-events:none}
.close > :not(.fx){position:relative;z-index:1}
.close-title{color:#FBF4EE;font-size:clamp(2.4rem,5.4vw,4.4rem)}
.close-sub{margin:0;font-size:.85rem;opacity:.8}
.ig{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font:600 .8rem/1 var(--f-body);letter-spacing:.06em}
.ig[hidden]{display:none}
.ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ---------- closing: calm version (21.10): thin gold frame, small ivory seal, short gold line ---------- */
@keyframes cvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cv1{padding-top:clamp(84px,10vw,124px);padding-bottom:clamp(84px,10vw,124px)}
.cv1 .cv-frame{position:absolute;inset:clamp(14px,2vw,24px);z-index:1;pointer-events:none;border:1px solid rgba(226,200,146,.45)}
.cv-seal{display:grid;place-items:center;width:68px;height:66px;background:url(../orn/seal-ivory.webp) center/contain no-repeat;filter:drop-shadow(0 10px 14px rgba(30,10,16,.3));animation:cvFloat 6s ease-in-out infinite}
.cv-seal b{font:500 italic 1.7rem/1 var(--f-display);color:var(--gold);margin-top:-2px}
.cv-line{display:block;width:56px;height:1px;background:var(--gold-hi);opacity:.7}
.cv1 .btn{white-space:nowrap}
.cv1 .fx i{filter:brightness(1.75) saturate(.7);opacity:.5}
@media (max-width:760px){ .cv1 .btn-big{padding:0 24px;letter-spacing:.1em;font-size:.7rem} }
@media (prefers-reduced-motion:reduce){ .cv-seal{animation:none} }

/* ---------- footer + floating WhatsApp ---------- */
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 20px;padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom));background:var(--wine-deep);color:rgba(242,227,222,.75);font:500 .74rem/1.5 var(--f-body);letter-spacing:.04em}
.foot nav{display:flex;gap:10px;flex-wrap:wrap}
.foot a{color:#F2E3DE;text-decoration:none;display:inline-block;padding:10px 0}
.foot a:hover{text-decoration:underline}
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:10px;
  min-height:50px;padding:0 20px;border-radius:99px;background:var(--wine);color:var(--paper);text-decoration:none;font:600 .74rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(226,200,146,.35),0 14px 30px -12px rgba(76,38,48,.6);transition:transform .45s var(--ease-out),opacity .3s var(--ease),background .3s var(--ease)}
.wa-float:hover{background:var(--wine-deep)}
.wa-float.hide{transform:translateY(140%);opacity:0;pointer-events:none}

/* ---------- responsive ---------- */
@media (hover:hover){ .tc{transition:transform .5s var(--ease-out)} .tc:hover{transform:translateY(-6px)} }
@media (max-width:980px){
  .grid .item{flex:0 0 min(calc((100vw - 2 * var(--gutter)) * .64),280px)}
}
@media (max-width:860px){
  .tri{grid-template-columns:minmax(0,1fr)}
  .tc-hi{order:0;margin-bottom:18px}
  .tc-cus{box-shadow:0 -1px 0 rgba(169,134,78,.35)}
}
@media (max-width:760px){
  .hero{padding-top:calc(var(--header-h) + 26px)}
  .hero-title{font-size:clamp(2.7rem,12.5vw,3.6rem)}
  .hero-stage{width:min(226px,58vw)}
  .hero-ey{font-size:.56rem;letter-spacing:.14em;gap:10px}
  .hero-ey::before,.hero-ey::after{width:18px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 auto}
  .steps{grid-template-columns:minmax(0,1fr);gap:26px}
  .steps li{display:grid;grid-template-columns:72px 1fr;text-align:left;align-items:start;gap:16px}
  .roman{font-size:2.8rem;text-align:center}
  .roman::after{margin-top:8px}
  .st b{font-size:1rem}
  .st p{margin-left:0}
  .tile{padding:12% 14% 10%}
  .nm{font-size:1.12rem}
  .pick{font-size:.64rem;padding:0 12px}
  .demo{font-size:.64rem;padding:0 12px}
  .offer{border-radius:14px;align-items:flex-start}
  .offer-dot{margin-top:5px}
  .wa-float{padding:0;width:54px;height:54px;justify-content:center}
  .wa-float span{display:none}
  .wa-float .wa-ic{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .js .sec > *{opacity:1!important;transform:none!important;transition:none!important}
  .fx{display:none}
  .offer-dot,.offer-dot::after,.tc-foil,.tc-foil::after,.hero .phone-screen::after,.price.in .tc{animation:none!important}
  .offer-dot::after,.tc-foil::after{display:none}
  .phone-screen video{transition:none}
}

/* ---------- readability (21.10): important text a little heavier and darker ---------- */
.hero-ey{color:var(--ink);font-size:.72rem}
.nm{font-weight:600}
.pr{font-weight:600;color:var(--ink);font-size:.86rem}
.demo,.pick{font-size:.76rem;letter-spacing:.05em}
.st b{font-weight:600}
.st p{color:var(--ink);font-size:.95rem}
.tc h3{font-size:.84rem;letter-spacing:.16em}
.tc-price{font-weight:400}
.tc-std .ck li,.tc-cus .ck li{color:var(--ink)}
.tc .ck li{font-size:.94rem}
.tc-plus{font-size:.7rem}
.offer{font-size:.88rem}
.faq summary{font-weight:600}
.faq details p{color:var(--ink)}
.faq-cat{font-size:.72rem}
.close-sub{opacity:.92;font-size:.92rem}
.foot{font-size:.8rem}

/* ---------- demo viewer (21.10) ---------- */
html.dv-open{overflow:hidden}
.dv{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(36,16,22,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s var(--ease)}
.dv.on{opacity:1}
.dv[hidden]{display:none}
.dv-shell{position:relative;display:grid;justify-items:center;gap:12px}
.dv-phone{height:min(80vh,820px);height:min(80dvh,820px);aspect-ratio:9/19.5;border-radius:34px;overflow:hidden;background:#151012;padding:10px;box-shadow:0 0 0 1px rgba(226,200,146,.25),0 40px 80px -30px rgba(0,0,0,.7)}
.dv-phone iframe{width:100%;height:100%;border:0;border-radius:26px;background:#fff;display:block}
.dv-close{position:absolute;top:-6px;right:-120px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:99px;background:var(--paper);color:var(--wine-deep);font:600 .78rem/1 var(--f-body);letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.dv-close span{font-size:1.3rem;line-height:1}
.dv-hint{margin:0;color:rgba(255,248,240,.85);font-size:.82rem;text-align:center}
.dv-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:99px;background:var(--paper);color:var(--wine-deep);font:600 .82rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}
.dv-cta[hidden]{display:none}
@media (max-width:760px){
  .dv{place-items:stretch;background:#000}
  .dv-shell{display:flex;flex-direction:column;width:100%;height:100%;gap:0}
  .dv-phone{flex:1 1 auto;min-height:0;width:100%;height:auto;aspect-ratio:auto;border-radius:0;padding:0;box-shadow:none}
  .dv-cta{flex:none;margin:10px 16px max(10px,env(safe-area-inset-bottom))}
  .dv-phone iframe{border-radius:0}
  .dv-close{top:max(10px,env(safe-area-inset-top));right:auto;left:10px;z-index:2;min-height:40px;padding:0 14px;background:rgba(255,253,250,.92)}
  .dv-hint{display:none}
}

/* 22.10 polish: footer dots centred, hero line stays on one line on phones */
.foot nav{align-items:center}
@media (max-width:420px){.hero-ey{font-size:.6rem;letter-spacing:.15em;gap:8px}.hero-ey::before,.hero-ey::after{width:14px}}
.hero-ey span{text-wrap:balance}

/* ---------- 23.10 light redesign: pearl recommended card, light closing, light footer ---------- */
/* recommended package: warm pearl-champagne instead of burgundy, set apart from the plain cards by tone + gold hairline */
.tc-hi{background:linear-gradient(170deg,#FFFDF8 0%,#FCF3E8 52%,#F7E8D7 100%);color:var(--ink);border:1px solid rgba(169,134,78,.55);border-radius:6px;
  box-shadow:0 34px 64px -38px rgba(122,94,51,.55),0 2px 0 rgba(255,255,255,.9) inset}
.tc-hi::before{opacity:.9;background-image:linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold))}
.tc-hi h3,.tc-hi .tc-price{color:var(--wine-deep)}
.tc-hi .tc-price s{color:var(--ink-soft)}
.tc-hi .ck li{color:var(--ink)}
.tc-hi .ck li + li::before{background:rgba(169,134,78,.6)}
.tc-hi .tc-save{color:var(--gold-lo);border-color:rgba(169,134,78,.55);background:rgba(255,255,255,.6)}
.tc-hi .tc-alt{color:var(--wine)}
.tc-hi .tc-foil{box-shadow:0 8px 18px -10px rgba(122,94,51,.6),inset 0 0 0 1px rgba(255,255,255,.4)}

/* closing: light blush paper, thin gold frame, wine type */
.close.cv1{background:radial-gradient(120% 70% at 50% 0%,#FFFDF9 0%,rgba(255,253,249,0) 60%),linear-gradient(180deg,#FBF4EF 0%,#F6EAE3 100%);color:var(--ink)}
.close.cv1::before{background:radial-gradient(closest-side,rgba(226,200,146,.22),transparent)}
.cv1 .cv-frame{border-color:rgba(169,134,78,.5)}
.cv1 .cv-frame::before{content:"";position:absolute;inset:6px;border:1px solid rgba(169,134,78,.22)}
.cv1 .close-title{color:var(--wine-deep)}
.cv1 .close-sub{color:var(--ink-soft);opacity:1}
.cv1 .cv-line{background:var(--gold);opacity:.8}
.cv1 .cv-seal{filter:drop-shadow(0 10px 14px rgba(122,94,51,.28))}
.cv1 .fx i{filter:none;opacity:.55}
.cv1 .ig{color:var(--wine)}

/* footer: light, centred brand between the links and the copyright */
.foot{background:#FFFDFA;color:var(--ink-soft);border-top:1px solid rgba(169,134,78,.35)}
.foot a{color:var(--wine-deep)}
.foot nav span{color:var(--gold)}
.foot-brand{font:500 1.35rem/1 var(--f-display);color:var(--wine);letter-spacing:.01em}
@media (min-width:761px){ .foot{display:grid;grid-template-columns:1fr auto 1fr} .foot small{justify-self:end} }
@media (max-width:760px){ .foot{flex-direction:column;justify-content:center;text-align:center;gap:4px} .foot nav{justify-content:center} .foot-brand{order:-1;margin-top:6px} }

/* ================= V2 (24.10): motion polish ================= */
/* hero: phone (LCP image) is visible from the first frame; it only settles in with transform */
.hero-stage .phone{animation:heroSettle 1.4s var(--ease-out) both}
@keyframes heroSettle{from{transform:translateY(14px) scale(.975)}to{transform:none}}
/* petals fade out around the headline instead of crossing the letters */
.hero > .fx{--hm:radial-gradient(ellipse 420px 170px at 50% 130px,transparent 62%,#000 100%);-webkit-mask-image:var(--hm);mask-image:var(--hm)}
@media (max-width:760px){ .hero > .fx{--hm:radial-gradient(ellipse 56% 170px at 50% 130px,transparent 62%,#000 100%)} }
/* picture wrappers must not change layout */
picture{display:contents}
/* press feedback */
.btn:active{transform:translate(var(--bx),var(--by)) scale(.97);transition-duration:.12s}
.pick,.demo{transition:background .3s var(--ease),color .3s var(--ease),transform .25s var(--ease-out)}
.pick:active,.demo:active,.btn-ghost-sm:active{transform:scale(.95);transition-duration:.1s}
.wa-float:active{transform:scale(.94)}
/* collection cards: soft 3D tilt + deeper shadow (mouse only, js sets --rx/--ry) */
.tile{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease-out),box-shadow .5s var(--ease)}
.tile.tilting{transition:transform .12s linear,box-shadow .5s var(--ease)}
@media (hover:hover) and (pointer:fine){ .tile:hover{box-shadow:0 36px 54px -30px rgba(76,38,48,.55)} }
/* demo viewer: phone glides up and grows in, and back out on close */
.dv-phone{transform:translateY(34px) scale(.94);transition:transform .5s var(--ease-out)}
.dv.on .dv-phone{transform:none}
.dv:not(.on) .dv-phone{transition-duration:.32s;transition-timing-function:var(--ease)}
.dv-close,.dv-hint,.dv-cta{transition:opacity .4s var(--ease) .15s}
.dv:not(.on) .dv-close,.dv:not(.on) .dv-hint,.dv:not(.on) .dv-cta{opacity:0;transition-delay:0s}
@media (max-width:760px){ .dv-phone{transform:translateY(8%)} .dv.on .dv-phone{transform:none} }
@media (prefers-reduced-motion:reduce){
  .hero-stage .phone{animation:none}
  .tile{transform:none!important;transition:box-shadow .3s}
  .dv-phone,.dv.on .dv-phone{transform:none;transition:none}
  .btn:active,.pick:active,.demo:active,.btn-ghost-sm:active,.wa-float:active{transform:none}
}

/* ================= Stimmungen (24.10): Veo concept loops ================= */
.sec-sub{margin:14px auto 0;max-width:54ch;font-size:.95rem;line-height:1.6;color:var(--ink)}
.mood-row{list-style:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(12px,1.6vw,22px)}
.mood{min-width:0}
.mood-media{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:var(--panel);border:1px solid rgba(169,134,78,.25);box-shadow:0 24px 40px -30px rgba(76,38,48,.45);isolation:isolate}
.mood-media img,.mood-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mood-media video{opacity:0;transition:opacity .8s var(--ease),transform 1.2s var(--ease-out)}
.mood-media video.on{opacity:1}
.mood-tag{position:absolute;z-index:2;left:8px;top:8px;padding:6px 9px;border-radius:99px;background:rgba(255,253,250,.9);font:600 .56rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--wine-deep);white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.mood-nm{margin:12px 0 2px;font:600 clamp(1.05rem,1.4vw,1.25rem)/1.2 var(--f-display);color:var(--wine-deep)}
.mood-tx{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink)}
.mood-cta{text-align:center;margin:clamp(22px,3vw,34px) 0 0}
@media (hover:hover) and (pointer:fine){ .mood:hover .mood-media video{transform:scale(1.04)} }
@media (max-width:980px){
  .mood-row{grid-auto-columns:min(42vw,220px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .mood-row::-webkit-scrollbar{display:none}
  .mood{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){ .mood-media video{display:none} }

/* New collection uses the existing phone-card vocabulary with native swipe. */
.new-collection .grid{scroll-snap-type:x proximity}
.new-collection .track{padding-right:var(--gutter)}
.new-collection .item{scroll-snap-align:start}

/* ===== 06.11.2026 HERO "Floating Gallery" (approved Grok mockup, Variation 1) ===== */
.home-v3 .site-header{grid-template-columns:auto 1fr auto}
.home-v3 .brand{grid-column:1;justify-self:start}
.home-v3 .brand-word{font-size:1.7rem}
.home-v3 .nav{grid-column:2;grid-row:1;justify-self:center}
.home-v3 .nav a{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.home-v3 .btn-ghost-sm{border-radius:2px;padding:11px 20px;font-size:.66rem;letter-spacing:.2em}
.home-v3 .header-end{flex-direction:row-reverse;gap:18px}
.hv{position:relative;overflow:hidden;text-align:center;background:#F3EDE3;
  padding:calc(var(--header-h) + clamp(14px,2.4vw,34px)) var(--gutter) clamp(36px,4vw,56px)}
.hv-bg{position:absolute;inset:-3%;z-index:0;pointer-events:none;
  background:url(../assets/hero/hero-plate.webp) center/cover no-repeat;animation:hvLight 26s ease-in-out infinite alternate}
@keyframes hvLight{from{transform:scale(1) translate3d(0,0,0);filter:brightness(1)}to{transform:scale(1.04) translate3d(1.2%,.6%,0);filter:brightness(1.035)}}
.hv-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:grid;justify-items:center}
.hv-title{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;color:var(--wine-deep);letter-spacing:-.012em;font-weight:400}
.hv-sub{margin:14px auto 0;max-width:30ch;font:400 clamp(1.05rem,1.45vw,1.32rem)/1.35 var(--f-display);color:var(--ink);text-wrap:balance}
.hv-link{margin-top:16px;font:500 .9rem/1 var(--f-body);color:var(--ink);text-decoration:none;padding-bottom:6px;border-bottom:1px solid rgba(169,134,78,.7);transition:color .3s,border-color .3s}
.hv-link:hover{color:var(--wine);border-color:var(--wine)}
.hv-trio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:clamp(28px,5vw,80px);
  width:min(100%,760px);margin-top:clamp(10px,1.6vw,22px)}
.hv-it{margin:0;display:flex;flex-direction:column;align-items:center}
.hv-it figcaption{font:600 .62rem/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.hv-l{padding-top:0}.hv-c{padding-top:clamp(14px,2vw,26px)}.hv-r{padding-top:6px}
.hv-float{width:100%;animation:hvFloat 7s ease-in-out infinite}
.hv-l .hv-float{animation-delay:-2.4s}.hv-r .hv-float{animation-delay:-4.8s}
.hv-l .phone{transform:rotate(-4deg)}.hv-r .phone{transform:rotate(3deg)}.hv-c .phone{transform:rotate(-1deg)}
.hv .phone{box-shadow:18px 26px 34px -10px rgba(70,48,40,.38),6px 10px 14px -6px rgba(70,48,40,.3)}
@keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hv .phone-screen::after{animation:shine 7s var(--ease) 2.4s infinite}
.hv-l .phone-screen::after{animation-delay:4.2s}.hv-r .phone-screen::after{animation-delay:6s}
.hv-wa{position:absolute;z-index:3;left:calc(100% - 4px);top:36%;width:max-content;text-align:left;
  background:#fff;border-radius:10px;padding:13px 16px 30px;font:400 .82rem/1.45 var(--f-display);color:var(--ink);
  box-shadow:10px 16px 26px -10px rgba(70,48,40,.35),0 0 0 1px rgba(70,48,40,.05);transform:rotate(2deg);
  animation:hvWa .9s var(--ease-out) 1.4s both}
.hv-wa::after{content:"";position:absolute;left:18px;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0;border-left:0}
.hv-wa-t{display:block;font-size:.95rem}
.hv-wa u{display:block;color:#1f7a4d;text-decoration-color:rgba(31,122,77,.55);text-underline-offset:3px}
.hv-wa svg{position:absolute;right:10px;bottom:8px;width:24px;height:24px}
@keyframes hvWa{from{opacity:0;transform:translateY(12px) rotate(2deg) scale(.94)}to{opacity:1;transform:rotate(2deg)}}
.hv-trust{margin:clamp(30px,3.4vw,46px) 0 0;width:min(100%,900px);padding-top:18px;border-top:1px solid rgba(169,134,78,.5);
  font:600 .66rem/1.6 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
@media (max-width:1180px){ .hv-wa{left:auto;right:-10px;top:auto;bottom:-24px;font-size:.72rem} }
@media (max-width:760px){
  .home-v3 .site-header{grid-template-columns:1fr auto}
  .hv-title{font-size:clamp(2.3rem,10.5vw,3rem)}
  .hv-trio{gap:12px;width:100%;margin-top:18px}
  .hv-it figcaption{font-size:.48rem;letter-spacing:.14em;margin-bottom:8px}
  .hv-wa{display:none}
  .hv-trust{font-size:.52rem;letter-spacing:.12em}
  .hv-bg{background-image:url(../assets/hero/hero-plate-m.webp);background-position:30% center}
}
@media (prefers-reduced-motion:reduce){ .hv-bg,.hv-float,.hv-wa,.hv .phone-screen::after{animation:none!important} }
/* fine-tune to mockup: lighter paper, petal visible under the trio, smaller phones */
.hv{background:#F6F1E9}
.hv-bg{inset:auto;left:5.5%;top:-.5%;width:130%;aspect-ratio:1168/784;background-size:100% 100%;filter:brightness(1.08) saturate(.88)}
@keyframes hvLight{from{transform:translate3d(0,0,0);filter:brightness(1.08) saturate(.88)}to{transform:translate3d(-1%,.6%,0);filter:brightness(1.12) saturate(.88)}}
.hv-sub{max-width:44ch}
.hv-trio{width:min(100%,640px)}
@media (max-width:760px){ .hv-bg{left:-10%;width:220%} }
/* petal is its own layer now (background plate is clean) */
.hv-bg{inset:-3%;left:-3%;top:-3%;width:auto;aspect-ratio:auto;background-size:cover;background-position:left top}
.hv-petal{position:absolute;z-index:1;left:20%;bottom:-58px;width:clamp(56px,6.4vw,92px);height:auto;pointer-events:none;
  transform:rotate(-8deg);animation:hvPetal 9s ease-in-out infinite}
@keyframes hvPetal{0%,100%{transform:rotate(-8deg) translate3d(0,0,0)}50%{transform:rotate(-3deg) translate3d(4px,-3px,0)}}
@media (max-width:760px){ .hv-bg{left:-3%;width:auto} .hv-petal{left:6%;bottom:-34px} }
@media (prefers-reduced-motion:reduce){ .hv-petal{animation:none} }
.hv-bg{filter:brightness(1.15) saturate(.8)}
@keyframes hvLight{from{transform:translate3d(0,0,0);filter:brightness(1.15) saturate(.8)}to{transform:translate3d(-1%,.6%,0);filter:brightness(1.19) saturate(.8)}}
.hv-petal{left:4%;bottom:-74px}
@media (max-width:760px){ .hv-petal{display:none} .hv-trio{margin-top:26px} .hv-it figcaption{margin-bottom:12px} .hv-l .phone{transform:rotate(-3deg)} .hv-r .phone{transform:rotate(2deg)} }

/* 06.11: warm paper page; window-light details on the left/right edges, not on the phones */
.home-v3{position:relative;background-color:#F6F1E9}
.home-v3 .site-header.is-scrolled{background:rgba(246,241,233,.9)}
.home-v3 .foot{background:#F6F1E9}

.cv-sides{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cv-sl,.cv-sr{position:absolute;top:0;bottom:0;width:min(22vw,280px);pointer-events:none}
.cv-sl{left:0}
.cv-sr{right:0}
.cv-sl{
  background:
    radial-gradient(ellipse 120% 55% at 0% 28%, rgba(255,244,214,.55), transparent 72%),
    url("../assets/hero/hero-plate.webp") left top / cover no-repeat;
  opacity:.78;
  -webkit-mask-image:linear-gradient(to right,#000 20%,rgba(0,0,0,.55) 52%,transparent 100%);
  mask-image:linear-gradient(to right,#000 20%,rgba(0,0,0,.55) 52%,transparent 100%);
}
.cv-sr{
  background:
    radial-gradient(ellipse 120% 50% at 100% 40%, rgba(226,200,146,.34), transparent 74%),
    url("../assets/hero/hero-plate.webp") right 10% top 18% / cover no-repeat;
  opacity:.74;
  -webkit-mask-image:linear-gradient(to left,#000 20%,rgba(0,0,0,.55) 52%,transparent 100%);
  mask-image:linear-gradient(to left,#000 20%,rgba(0,0,0,.55) 52%,transparent 100%);
}
@media (max-width:1100px){
  .cv-sides{display:none}
}