/* ===== CSW effects layer (motion only; layout lives in style.css) ===== */
:root{--gold:#d2ad78;--gold-l:#f3e2c4;--glow:0 10px 28px rgba(181,130,111,.28),0 0 0 1px rgba(210,173,120,.35)}
section[id]{scroll-margin-top:64px}
.top{transition:box-shadow .35s ease,background-color .35s ease}
.top.scrolled{box-shadow:0 2px 10px rgba(47,59,59,.045)}

/* hero backdrop: soft gold/rose wash + sparkle canvas over the flat-lay */
.hero-img{position:relative;overflow:hidden;z-index:0}
.hero-img::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;transform-origin:50% 60%}
.hero-img::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(115deg,rgba(241,227,221,0) 20%,rgba(243,226,196,.32) 38%,rgba(181,130,111,.18) 50%,rgba(241,227,221,0) 66%);mix-blend-mode:soft-light;pointer-events:none}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-img .fx-fade{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,rgba(251,248,245,0),rgba(251,248,245,.35));z-index:1;pointer-events:none}

/* hero card: gold hairline + one light sweep */
.hero-card{overflow:hidden;isolation:isolate;z-index:1}
.hero-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(210,173,120,.75),rgba(241,227,221,.2) 35%,rgba(241,227,221,.2) 65%,rgba(181,130,111,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-card::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,247,232,.85),rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg);pointer-events:none;z-index:2;opacity:0}

/* gold shimmer on the script line */
.script{background:linear-gradient(100deg,var(--ink) 0 38%,var(--gold) 46%,#fff6e6 50%,var(--gold) 54%,var(--ink) 62% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink)}

/* twinkles around the logo */
.tw{position:absolute;width:14px;height:14px;pointer-events:none;z-index:3;opacity:0}
.tw::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0 12%,rgba(255,255,255,0) 13%),conic-gradient(from 0deg,transparent 0 40deg,var(--gold) 45deg,transparent 50deg 130deg,var(--gold) 135deg,transparent 140deg 220deg,var(--gold) 225deg,transparent 230deg 310deg,var(--gold) 315deg,transparent 320deg);-webkit-mask:radial-gradient(circle,#000 0 30%,rgba(0,0,0,.25) 31% 60%,transparent 61%);mask:radial-gradient(circle,#000 0 30%,rgba(0,0,0,.25) 31% 60%,transparent 61%)}

/* buttons, price card, chips: lift + glow */
.btn,.dock a,.top-call,.chips li,.price-card,.rev,.hero-phone{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background-color .3s ease,color .3s ease,border-color .3s ease}
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#2f3b3b,#3c4a49 55%,#2f3b3b)}
.btn-primary::after,.dock a.dock-main::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(243,226,196,.45),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none}
.dock a.dock-main{position:relative;overflow:hidden}
.price-card{position:relative;overflow:hidden}
.price-card::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(243,226,196,.55),rgba(255,255,255,0));transform:skewX(-18deg);pointer-events:none;opacity:0}
.price{background:linear-gradient(180deg,#b88a6e,#9a6a58);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (hover:hover){
  .btn:hover,.dock a:hover{transform:translateY(-2px);box-shadow:var(--glow)}
  .btn-ghost:hover{background:#fff;border-color:var(--rose-d)}
  .top-call:hover{background:var(--rose);color:#fff;box-shadow:0 6px 18px rgba(181,130,111,.3)}
  .price-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(181,130,111,.22),0 0 0 1px rgba(210,173,120,.45)}
  .chips li:hover{transform:translateY(-2px);background:var(--rose);color:#fff;box-shadow:0 8px 18px rgba(181,130,111,.28)}
  .rev:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(47,59,59,.08)}
  .hero-phone:hover{color:var(--ink)}
}
.btn:active,.dock a:active,.top-call:active,.chips li:active{transform:translateY(1px) scale(.98);box-shadow:0 0 0 4px rgba(210,173,120,.25)}
.price-card:active{transform:translateY(-3px);box-shadow:0 14px 34px rgba(181,130,111,.2),0 0 0 1px rgba(210,173,120,.45)}
.form input,.form select,.form textarea{transition:border-color .25s ease,box-shadow .25s ease}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 0 0 4px rgba(210,173,120,.2)}

/* tap sparkle burst */
.spk{position:fixed;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle,#fff,var(--gold) 60%,rgba(210,173,120,0));pointer-events:none;z-index:50}

/* review slider (2+ reviews) */
.rev-slider{display:grid;gap:0;position:relative}
.rev-slider .rev{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s linear .8s}
.rev-slider .rev.on{opacity:1;visibility:visible;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s}
.rev-dots{display:flex;justify-content:center;gap:8px;margin:-10px 0 24px}
.rev-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#e2d2cb;cursor:pointer;transition:width .35s ease,background-color .35s ease}
.rev-dots button[aria-current="true"]{width:22px;background:var(--rose)}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero-img::before{animation:fxKen 22s ease-in-out infinite alternate}
  .hero-img::after{animation:fxWash 9s ease-in-out infinite alternate}
  .hero-card{animation:fxRise .9s cubic-bezier(.2,.8,.2,1) both}
  .hero-card::after{animation:fxSweep 1.6s ease-in-out 1.1s 1 both}
  .hero-card>*{animation:fxUp .8s cubic-bezier(.2,.8,.2,1) both}
  .hero-logo{animation-delay:.15s!important}
  .hero-card .script{animation:fxUp .8s cubic-bezier(.2,.8,.2,1) .3s both,fxShimmer 6s ease-in-out 1.2s infinite}
  .hero-name{animation:fxBlurIn 1.1s cubic-bezier(.2,.8,.2,1) .45s both}
  .hero-by{animation-delay:.55s!important}
  .hero-card .btn{animation-delay:.68s!important}
  .hero-phone{animation-delay:.8s!important}
  .tw{animation:fxTwinkle 3.2s ease-in-out infinite}
  .btn-primary::after,.dock a.dock-main::after{animation:fxShine 5.5s ease-in-out 2s infinite}
  .dock{animation:fxDock .7s cubic-bezier(.2,.8,.2,1) .9s both}

  /* scroll reveal (only once JS has armed it) */
  .fx .rv{opacity:0;transform:translateY(70px) scale(.96);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.16,.84,.24,1);transition-delay:var(--d,0s)}
  .fx .rv.in{opacity:1;transform:none}
  .fx h2.rv::after{width:0;transition:width 1s cubic-bezier(.2,.8,.2,1) .35s}
  .fx h2.rv.in::after{width:46px}
  .fx .chips.rv li{opacity:0;transform:translateY(28px) scale(.9);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s ease,color .3s ease,box-shadow .3s ease}
  .fx .chips.rv.in li{opacity:1;transform:none}
  .fx .chips.rv.in li:nth-child(1){transition-delay:.05s}.fx .chips.rv.in li:nth-child(2){transition-delay:.12s}.fx .chips.rv.in li:nth-child(3){transition-delay:.19s}.fx .chips.rv.in li:nth-child(4){transition-delay:.26s}.fx .chips.rv.in li:nth-child(5){transition-delay:.33s}.fx .chips.rv.in li:nth-child(6){transition-delay:.4s}
  .fx .price-card.rv.in::after{animation:fxSweepCard 1.4s ease-in-out .6s 1 both}
}
@keyframes fxKen{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
@keyframes fxWash{from{transform:translateX(-18%)}to{transform:translateX(18%)}}
@keyframes fxRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fxUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fxBlurIn{from{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
@keyframes fxShimmer{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes fxSweep{0%{opacity:1;transform:translateX(-120%) skewX(-18deg)}85%{opacity:1}100%{opacity:0;transform:translateX(560%) skewX(-18deg)}}
@keyframes fxSweepCard{0%{opacity:1;transform:translateX(0) skewX(-18deg)}85%{opacity:1}100%{opacity:0;transform:translateX(560%) skewX(-18deg)}}
@keyframes fxShine{0%,70%{left:-75%}100%{left:130%}}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes fxDock{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.script{-webkit-text-fill-color:var(--ink);background:none}}