/* Derila Ergo Pillow — mobile-first, Mobirise-style */
:root{
  --navy:#0e1961; --navy-dark:#0a1448; --blue:#4277F0; --blue-dark:#00289c;
  --cta1:#1AC70E; --cta2:#12A14B;
  --accent:#ffb800; --accent-dark:#e6a400; --ink:#1a2340; --muted:#5b6478;
  --bg:#ffffff; --bg-soft:#F5FBFF; --bg-warm:#FFFBF0; --line:#dcdcdc;
  --green:#12A14B; --radius:14px; --shadow:0 10px 30px rgba(14,25,97,.10);
  --font:'Plus Jakarta Sans','Jakarta Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-head:'Cinzel','Cinzel Fallback',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.65;font-size:17px;background:var(--bg);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:var(--blue)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
h1,h2,h3{font-family:var(--font-head);line-height:1.3;color:var(--navy);font-weight:700;letter-spacing:.01em}
h1{font-size:clamp(30px,6vw,52px);margin-bottom:16px}
h2{font-size:clamp(24px,4.6vw,36px);margin-bottom:14px}
h3{font-size:clamp(19px,3.4vw,24px);margin-bottom:10px}
p{margin-bottom:14px;color:#2c3550}
.lead{font-size:clamp(17px,2.6vw,21px);color:#3a4560}
.center{text-align:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.btn{display:inline-block;background:linear-gradient(180deg,var(--cta1),var(--cta2));color:#fff!important;font-weight:800;font-size:18px;padding:16px 34px;border-radius:50px;text-decoration:none;box-shadow:0 8px 22px rgba(18,161,75,.45);border:0;cursor:pointer;min-height:56px;line-height:1.3;transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,161,75,.55);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn-blue{background:linear-gradient(180deg,var(--blue),var(--blue-dark));color:#fff!important;box-shadow:0 8px 22px rgba(66,119,240,.4)}
.btn-blue:hover{box-shadow:0 12px 28px rgba(66,119,240,.55)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.micro{font-size:13px;color:var(--muted)}
.disclosure{font-size:12.5px;color:#8a93a8;background:#f6f8fd;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:14px 0}

/* top bar */
.topbar{background:var(--navy-dark);color:#fff;font-size:14px;font-weight:600;padding:10px 0;text-align:center}
.topbar a{color:var(--accent);font-weight:800;text-decoration:none}
.topbar .dot{opacity:.5;margin:0 6px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1120px;margin:0 auto}
.logo{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--navy);text-decoration:none;letter-spacing:.02em}
.logo span{color:var(--blue)}
.nav .btn{font-size:15px;padding:11px 24px;min-height:44px}
.nav-links{display:none;gap:26px}
.nav-links a{color:var(--navy);font-weight:700;font-size:15.5px;text-decoration:none}
.nav-links a:hover{color:var(--blue)}
@media(min-width:900px){.nav-links{display:flex}}

/* hero */
.hero{background:linear-gradient(180deg,#eef3ff 0%,#ffffff 100%);padding:48px 0 56px}
.hero-grid{display:grid;gap:28px;align-items:center}
.hero-bullets{list-style:none;margin:18px 0;display:grid;gap:8px}
.hero-bullets li{font-weight:700;color:var(--navy);font-size:16.5px}
.hero-bullets li::before{content:"✔ ";color:var(--green)}
.hero-cta{margin-top:6px}
.trust-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--muted);font-weight:600}
.stars{color:#f5a623;letter-spacing:2px}

/* quick answer */
.qa-box{background:#fff;border:2px solid var(--blue);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin:8px 0}
.qa-box h2{font-size:22px;margin-bottom:8px}
.qa-box p:last-child{margin-bottom:0}

/* features */
.grid2{display:grid;gap:26px}
.grid3{display:grid;gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card .ico{font-size:34px;margin-bottom:10px}
.soft{background:var(--bg-soft)}
.warm{background:var(--bg-warm)}
.split{display:grid;gap:26px;align-items:center}
.split img{box-shadow:var(--shadow)}

/* steps */
.steps{counter-reset:step;display:grid;gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 20px 76px;position:relative;box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:18px;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:20px}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.cmp th,.cmp td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left}
.cmp th{background:var(--navy);color:#fff;font-size:15px}
.cmp td:first-child{font-weight:700}
.yes{color:var(--green);font-weight:800}.no{color:#c0392b;font-weight:800}
.table-scroll{overflow-x:auto}

/* pricing */
.price-grid{display:grid;gap:18px}
.price-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:28px 24px;text-align:center;box-shadow:var(--shadow);position:relative}
.price-card.hot{border-color:var(--accent);transform:scale(1.02)}
.badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--accent);color:#3a2500;font-weight:800;font-size:13px;padding:6px 18px;border-radius:30px;white-space:nowrap}
.price-card h3{margin-bottom:6px}
.save{color:var(--green);font-weight:800}

/* faq */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:#fff;border:0;padding:18px;font-size:17px;font-weight:700;color:var(--navy);cursor:pointer;font-family:var(--font);min-height:56px}
.faq-q::after{content:"+";float:right;font-size:22px;color:var(--blue)}
.faq-item.open .faq-q::after{content:"–"}
/* faq accordion (animated, see motion section) */

/* footer */
footer{background:var(--navy-dark);color:#c9d3ea;padding:48px 0 28px;font-size:14.5px}
footer a{color:#c9d3ea;text-decoration:none}
footer a:hover{color:#fff}
.foot-grid{display:grid;gap:24px;margin-bottom:24px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.35);padding-top:20px;font-size:14px;color:#ffffff}
.foot-bottom a{color:#ffffff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.foot-bottom a:hover{color:#fff}

/* review page */
.article{max-width:800px;margin:0 auto}
.article h2{margin-top:34px}
.article figure{margin:22px 0}
.article figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
.pros-cons{display:grid;gap:16px;margin:20px 0}
.pros,.cons{border-radius:var(--radius);padding:20px}
.pros{background:#eefbf3;border:1px solid #bfe8cf}
.cons{background:#fdf1ef;border:1px solid #f3c9c2}
.pros ul,.cons ul{margin:8px 0 0 20px}
.toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:24px 0}
.toc ol{margin:8px 0 0 22px}
.verdict{background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px;margin:28px 0}
.verdict h2,.verdict p{color:#fff}
blockquote{border-left:4px solid var(--blue);padding:10px 18px;margin:18px 0;background:var(--bg-soft);border-radius:0 12px 12px 0;font-style:italic}

.sticky-buy{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--navy-dark);padding:10px 16px;box-shadow:0 -4px 20px rgba(0,0,0,.25)}
.sticky-buy a{display:block;text-align:center;background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#3a2500!important;font-weight:800;font-size:16px;padding:13px;border-radius:40px;text-decoration:none;min-height:48px}
@media(max-width:759px){.sticky-buy{display:block}body{padding-bottom:76px}}

@media(min-width:760px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:repeat(3,1fr)}
  .pros-cons{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:2fr 1fr 1fr}
  section{padding:72px 0}
}
@media(max-width:759px){
  .btn{width:100%;text-align:center}
  .nav .btn{width:auto}
  .topbar{font-size:12.5px}
}

.logo-img{height:38px;width:auto;display:block}
@media(max-width:560px){.logo-img{height:32px}}

/* ---------- professional motion: reveals, hovers, pulse ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease;will-change:opacity,transform}
.reveal.visible{opacity:1;transform:none}
/* CTA pulse on primary buttons */
@keyframes ctaPulse{0%{box-shadow:0 8px 22px rgba(18,161,75,.45)}50%{box-shadow:0 8px 34px rgba(18,161,75,.8)}100%{box-shadow:0 8px 22px rgba(18,161,75,.45)}}
.btn-pulse{animation:ctaPulse 2.4s ease-in-out infinite}
.btn-pulse:hover{animation-play-state:paused}
/* benefit/feature card hover lift */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(14,25,97,.16);border-color:var(--blue)}
/* image hover zoom */
.imgz{overflow:hidden}
.imgz img{transition:transform .6s ease}
.imgz:hover img{transform:scale(1.05)}
/* pricing table hover emphasis */
.cmp{transition:box-shadow .3s ease}
.cmp:hover{box-shadow:0 18px 44px rgba(14,25,97,.16)}
.cmp tbody tr{transition:background .2s ease}
.cmp tbody tr:hover{background:#f2f7ff}
/* smooth FAQ accordion */
.faq-a{max-height:0;overflow:hidden;padding:0 18px;color:#2c3550;transition:max-height .38s ease,padding .38s ease}
.faq-item.open .faq-a{max-height:600px;padding:0 18px 18px}
.faq-q{transition:background .2s ease}
.faq-q:hover{background:#f4f8ff}
.faq-q::after{transition:transform .3s ease}
.faq-item.open .faq-q::after{transform:rotate(180deg)}
/* step cards subtle hover */
.step{transition:transform .25s ease,box-shadow .25s ease}
.step:hover{transform:translateX(4px);box-shadow:0 14px 34px rgba(14,25,97,.14)}
/* topbar link + sticky buy hover */
.topbar a{transition:color .2s ease}
.topbar a:hover{color:#fff}
.sticky-buy a{transition:transform .2s ease,filter .2s ease}
.sticky-buy a:hover{transform:translateY(-2px);filter:brightness(1.05)}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- price cards (competitor-style) ---------- */
.price-cards{display:grid;gap:22px;max-width:1000px;margin:0 auto}
.price-card{background:#fffdf4;border:1px solid #e8dfc8;border-radius:18px;padding:38px 22px 24px;text-align:center;box-shadow:var(--shadow);position:relative;transition:transform .25s ease,box-shadow .25s ease}
.price-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(14,25,97,.16)}
.price-card.hot{border:2px solid var(--navy);box-shadow:0 16px 44px rgba(14,25,97,.18)}
.price-badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--navy-dark);color:#fff;font-weight:800;font-size:13.5px;padding:8px 22px;border-radius:30px 30px 0 0;white-space:nowrap;letter-spacing:.02em}
.price-img{max-width:210px;margin:6px auto 14px;border-radius:12px}
.price-per{font-size:26px;color:var(--ink);margin-bottom:4px}
.price-per strong{font-size:32px;font-weight:800}
.price-guar{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.buy-btn{display:inline-block;background:linear-gradient(180deg,#ffd21f,#ffb800);color:#3a2500!important;font-weight:800;font-size:17px;padding:14px 44px;border-radius:12px;text-decoration:none;box-shadow:0 6px 18px rgba(255,184,0,.45);min-height:52px;line-height:1.4;transition:transform .15s,box-shadow .2s,filter .2s}
.buy-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,184,0,.6);filter:brightness(1.04)}
.price-total{font-size:16px;margin:14px 0 6px;color:var(--ink)}
.price-total s{color:#c0392b;margin-right:6px}
.price-total strong{font-weight:800;font-size:19px}
.pay-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.pay-badges span{font-size:11px;font-weight:800;color:#5b6478;background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 9px;letter-spacing:.04em}
.price-unit{font-size:13px;color:var(--muted);margin-bottom:0}

/* ---------- review cards (competitor-style) ---------- */
.review-cards{display:grid;gap:22px;max-width:1080px;margin:0 auto;align-items:stretch}
.review-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.review-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(14,25,97,.16)}
.review-card.featured{background:linear-gradient(160deg,#2b4bd8,#0e1961);border-color:#2b4bd8}
.review-card.featured .review-name,.review-card.featured .review-text{color:#fff}
.review-card.featured .review-loc{color:#c9d3ea}
.review-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.avatar{width:52px;height:52px;min-width:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.review-name{font-weight:800;font-size:17px;color:var(--navy);margin:0}
.review-loc{font-size:13px;color:var(--muted);margin:0}
.review-card .stars{font-size:17px;margin:2px 0 8px}
.verified-badge{display:inline-block;background:#d7f5ef;color:#0a7d6c;font-size:12.5px;font-weight:800;border-radius:20px;padding:5px 14px;margin-bottom:12px}
.review-card.featured .verified-badge{background:rgba(215,245,239,.18);color:#9ff0dd}
.review-text{font-size:15.5px;line-height:1.7;margin-bottom:0;flex:1}

/* ---------- final CTA band (dark navy) ---------- */
.final-cta{background:linear-gradient(160deg,#16277c,#0a1448);padding:72px 0;color:#fff;text-align:center}
.final-cta-title{font-family:var(--font-head);color:#fff;font-size:clamp(28px,5.4vw,44px);font-weight:900;letter-spacing:.04em;margin-bottom:6px}
.final-cta-sub{color:#5eead4;font-style:italic;font-size:clamp(18px,3vw,24px);font-weight:600;margin-bottom:16px}
.final-cta-feats{color:#c9d3ea;font-size:14.5px;max-width:700px;margin:0 auto 6px;line-height:1.8}
.btn-white{background:#fff;color:var(--navy)!important;box-shadow:0 8px 22px rgba(255,255,255,.25)}
.btn-white:hover{box-shadow:0 12px 30px rgba(255,255,255,.4)}
.btn-teal{background:linear-gradient(180deg,#2dd4bf,#0d9488);color:#fff!important;box-shadow:0 8px 22px rgba(45,212,191,.4)}
.btn-teal:hover{box-shadow:0 12px 30px rgba(45,212,191,.55)}
.final-cta-trust{color:#fff;font-weight:700;font-size:15px;margin:22px 0 8px}
.final-cta-med{color:#8f9bb8;font-size:13px;margin-bottom:0}
.trust-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 6px}
.trust-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 16px;font-size:13.5px;color:#e6ebfa;backdrop-filter:blur(4px)}
.trust-badge strong{color:#fff}
.tb-ico{font-size:20px}
.pay-strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.pay-strip span{font-size:12px;font-weight:800;letter-spacing:.06em;color:#0a1448;background:#fff;border-radius:8px;padding:6px 14px;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ---------- footer v2 ---------- */
.foot-grid-4{grid-template-columns:1fr}
.foot-title{font-family:var(--font-head);font-size:21px;font-weight:700;color:#fff;margin-bottom:12px}
.foot-title .teal{color:#2dd4bf}
.foot-emoji{font-size:22px}
.foot-brand p{color:#aab4d4;font-size:14px;line-height:1.7}
.foot-head{color:#fff;font-weight:800;margin-bottom:12px;font-size:15.5px}
.foot-grid p{margin-bottom:8px}
.feature-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.feature-badges span{font-size:12px;font-weight:700;color:#dfe6f7;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:5px 12px}
.foot-disclaimer{border-top:1px solid rgba(255,255,255,.15);padding:20px 0 6px;margin-top:8px}
.foot-disclaimer p{font-size:12.5px;color:#8f9bb8;line-height:1.7;max-width:960px;margin:0 auto;text-align:center}
.foot-legal{margin-top:8px}
.foot-legal a{margin:0 4px}

/* ---------- back to top ---------- */
#toTop{position:fixed;right:22px;bottom:22px;z-index:70;width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(180deg,#2dd4bf,#0d9488);color:#fff;font-size:24px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(13,148,136,.5);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{filter:brightness(1.1)}
.sticky-buy{bottom:0}
@media(max-width:759px){#toTop{bottom:92px;right:16px}}

@media(min-width:760px){
  .price-cards{grid-template-columns:repeat(3,1fr)}
  .review-cards{grid-template-columns:repeat(3,1fr)}
  .foot-grid-4{grid-template-columns:1.6fr 1fr 1fr 1fr}
}
/* ---------- 60-day guarantee seal (CSS, crisp at any size) ---------- */
.seal{position:relative;width:230px;height:230px;margin:6px auto;border-radius:50%;
  background:conic-gradient(from 0deg,#f7c948,#b8860b,#f7c948,#8a6508,#f7c948,#b8860b,#f7c948);
  box-shadow:0 14px 34px rgba(14,25,97,.22),inset 0 2px 6px rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center}
.seal-ring{position:absolute;inset:10px;border-radius:50%;border:3px dashed rgba(255,255,255,.75)}
.seal-inner{width:178px;height:178px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1c2c8f,#0a1448);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.45)}
.seal-num{font-family:var(--font-head);font-weight:900;font-size:34px;color:#ffd21f;letter-spacing:.03em;line-height:1}
.seal-txt{font-size:12.5px;font-weight:800;color:#fff;letter-spacing:.14em;line-height:1.5}
.seal-stars{color:#ffd21f;font-size:15px;letter-spacing:3px;margin-top:2px}
@keyframes sealShine{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.seal::after{content:"";position:absolute;inset:-8px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 40%,rgba(255,255,255,.35) 50%,transparent 60% 100%);
  animation:sealShine 7s linear infinite;pointer-events:none}

/* ---------- review summary header ---------- */
.review-summary{font-size:16px;color:var(--muted);margin:10px 0 16px}
.review-score{font-size:34px;font-weight:800;color:var(--navy);font-family:var(--font-head);vertical-align:middle;margin-right:6px}

@media(max-width:759px){
  .final-cta{padding:56px 0}
  .trust-badge{font-size:12.5px;padding:8px 12px}
  .seal{width:200px;height:200px}
  .seal-inner{width:154px;height:154px}
  .seal-num{font-size:29px}
}

/* competitor-style effects */
.price-img{transition:transform .35s ease}
.price-card:hover .price-img{transform:scale(1.07) rotate(-1deg)}
.buy-btn{position:relative;overflow:hidden}
.buy-btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%{left:-80%}55%{left:130%}100%{left:130%}}
.price-card.hot{animation:hotGlow 2.6s ease-in-out infinite}
@keyframes hotGlow{0%,100%{box-shadow:0 16px 44px rgba(14,25,97,.18)}50%{box-shadow:0 16px 54px rgba(43,75,216,.42)}}
.review-card .price-img,.imgz img{transition:transform .35s ease}
.nav-links a{transition:color .2s}
.faq-q{transition:background .2s}
.faq-item.open .faq-q{background:#f4f7ff}
@media (prefers-reduced-motion:reduce){.buy-btn::after,.price-card.hot{animation:none}}

/* order steps + image grids */
.steps4{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.steps4 .ico{font-weight:800}
.duoimg{display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
.duoimg img{width:100%;max-width:460px;margin:0 auto;border-radius:18px;box-shadow:var(--shadow)}
.posegrid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.posegrid img{width:100%;border-radius:14px;box-shadow:var(--shadow)}
@media(min-width:900px){
  .steps.cols3{grid-template-columns:repeat(3,1fr)}
  .steps4{grid-template-columns:repeat(4,1fr)}
  .duoimg{grid-template-columns:1fr 1fr}
  .posegrid{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   AWESOME MOTION v3 — premium hover & motion system
   (competitor-studied: shine sweeps, glow pulses, lift hovers,
    floating hero, staggered reveals, animated underlines)
   GPU-friendly: transform + opacity only. Consistent easing.
   ============================================================ */
:root{--ease:cubic-bezier(.22,.9,.28,1)}

/* ---------- primary buttons: shine sweep + press ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .01s}
.btn:hover::after{left:140%;transition:left .7s var(--ease)}
.btn:hover{transform:translateY(-3px) scale(1.015)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-blue::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent)}
.btn-teal::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent)}
/* hero CTA: living gradient */
@keyframes ctaFlow{0%,100%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(-8deg) brightness(1.07)}}
.btn-pulse{animation:ctaPulse 2.4s ease-in-out infinite,ctaFlow 5s ease-in-out infinite}
.btn-pulse:hover{animation-play-state:paused}

/* ---------- nav: sliding underline ---------- */
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2.5px;width:100%;
  background:linear-gradient(90deg,var(--blue),#2dd4bf);border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--blue-dark)}
.nav-links a:hover::after{transform:scaleX(1)}
.logo{transition:transform .25s var(--ease)}
.logo:hover{transform:scale(1.03)}

/* ---------- topbar: shimmering order link ---------- */
@keyframes linkShimmer{0%,100%{opacity:1}50%{opacity:.65}}
.topbar a{animation:linkShimmer 2.2s ease-in-out infinite;display:inline-block}
.topbar a:hover{animation-play-state:paused;color:#fff;transform:translateY(-1px)}
.topbar a{transition:transform .2s,color .2s}

/* ---------- hero: floating product + staggered bullets ---------- */
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero .imgz img{animation:heroFloat 6s ease-in-out infinite}
.hero-bullets li{opacity:0;transform:translateX(-14px);animation:bulletIn .55s var(--ease) forwards}
.hero-bullets li:nth-child(1){animation-delay:.15s}.hero-bullets li:nth-child(2){animation-delay:.28s}
.hero-bullets li:nth-child(3){animation-delay:.41s}.hero-bullets li:nth-child(4){animation-delay:.54s}
.hero-bullets li:nth-child(5){animation-delay:.67s}.hero-bullets li:nth-child(6){animation-delay:.8s}
@keyframes bulletIn{to{opacity:1;transform:none}}

/* ---------- directional reveals (JS adds .visible) ---------- */
.reveal-l{opacity:0;transform:translateX(-34px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-r{opacity:0;transform:translateX(34px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-s{opacity:0;transform:scale(.94);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-l.visible,.reveal-r.visible,.reveal-s.visible{opacity:1;transform:none}
/* stagger helpers — delay reveals only, hovers stay instant */
.d1:not(:hover){transition-delay:.08s}.d2:not(:hover){transition-delay:.16s}.d3:not(:hover){transition-delay:.24s}.d4:not(:hover){transition-delay:.32s}

/* ---------- cards: accent bar + icon pop ---------- */
.card{position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),#2dd4bf,var(--blue));background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(14,25,97,.18);border-color:var(--blue)}
.card:hover::before{transform:scaleX(1);animation:barSlide 1.6s linear infinite}
@keyframes barSlide{to{background-position:200% 0}}
.card .ico{display:inline-block;transition:transform .35s var(--ease)}
.card:hover .ico{transform:scale(1.18) rotate(-8deg)}

/* ---------- review cards: glow border + quote ---------- */
.review-card{position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.review-card::before{content:"“";position:absolute;top:6px;right:18px;font-family:var(--font-head);
  font-size:64px;line-height:1;color:var(--blue);opacity:.12;transition:opacity .3s,transform .3s var(--ease)}
.review-card:hover{transform:translateY(-7px) rotate(-.4deg);box-shadow:0 24px 52px rgba(14,25,97,.2);border-color:var(--blue)}
.review-card:hover::before{opacity:.28;transform:scale(1.15)}
.review-card.featured:hover{border-color:#5eead4;box-shadow:0 24px 52px rgba(43,75,216,.35)}

/* ---------- price cards: badge pulse + breathing hot card ---------- */
@keyframes badgePulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.07)}}
.price-badge{animation:badgePulse 2s ease-in-out infinite}
.price-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.price-card:not(.hot):hover{border-color:var(--accent);transform:translateY(-8px)}
.price-card.hot:hover{transform:scale(1.02) translateY(-6px)}
@keyframes hotBreathe{0%,100%{transform:scale(1.02)}50%{transform:scale(1.035)}}
.price-card.hot{animation:hotGlow 2.6s ease-in-out infinite,hotBreathe 4s ease-in-out infinite}
.price-card.hot:hover{animation-play-state:paused}
.buy-btn{transition:transform .18s var(--ease),box-shadow .25s,filter .25s}
.buy-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 30px rgba(255,184,0,.65)}
.buy-btn:active{transform:scale(.97)}

/* ---------- steps: number badge pop ---------- */
.step{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step::before{transition:transform .35s var(--ease),background .3s}
.step:hover{transform:translateX(6px)}
.step:hover::before{transform:scale(1.15) rotate(-6deg);background:var(--blue)}

/* ---------- comparison table: row sweep ---------- */
.cmp tbody tr{position:relative;transition:background .25s}
.cmp tbody tr:hover{background:#eaf1ff;box-shadow:inset 4px 0 0 var(--blue)}
.cmp th{position:relative;overflow:hidden}
.cmp th::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg)}
.cmp:hover th::after{left:130%;transition:left 1s var(--ease)}

/* ---------- FAQ: open glow + icon spin ---------- */
.faq-item{transition:box-shadow .3s,border-color .3s,transform .3s var(--ease)}
.faq-item:hover{transform:translateY(-2px)}
.faq-item.open{border-color:var(--blue);box-shadow:0 12px 30px rgba(66,119,240,.16)}
.faq-q::after{display:inline-block;transition:transform .35s var(--ease)}
.faq-item.open .faq-q::after{transform:rotate(135deg);color:var(--blue)}

/* ---------- images: zoom + glow ---------- */
.imgz{border-radius:var(--radius)}
.imgz img{transition:transform .7s var(--ease),filter .5s}
.imgz:hover img{transform:scale(1.08) rotate(.5deg);filter:saturate(1.08)}
.posegrid .imgz:hover img{transform:scale(1.1)}

/* ---------- final CTA: living gradient + badge lift ---------- */
@keyframes ctaBg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.final-cta{background:linear-gradient(140deg,#16277c,#0a1448,#1b2f9e,#0a1448);background-size:300% 300%;animation:ctaBg 14s ease infinite}
.trust-badge{transition:transform .3s var(--ease),background .3s,border-color .3s}
.trust-badge:hover{transform:translateY(-4px) scale(1.04);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.pay-strip span{transition:transform .25s var(--ease)}
.pay-strip span:hover{transform:translateY(-3px) scale(1.06)}

/* ---------- guarantee seal: slow majestic spin already; add hover pause+grow ---------- */
.seal{transition:transform .4s var(--ease)}
.seal:hover{transform:scale(1.05)}
.seal:hover::after{animation-play-state:paused}

/* ---------- sticky buy: slide-up entrance ---------- */
@keyframes stickyIn{from{transform:translateY(110%)}to{transform:translateY(0)}}
@media(max-width:759px){.sticky-buy{animation:stickyIn .6s var(--ease) .8s both}}
.sticky-buy a{position:relative;overflow:hidden}
.sticky-buy a::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);
  animation:sheen 3.2s ease-in-out infinite}

/* ---------- back-to-top: lift ---------- */
#toTop{transition:opacity .3s,transform .3s var(--ease),filter .25s}
#toTop:hover{filter:brightness(1.12);transform:translateY(-4px)}
#toTop:active{transform:scale(.92)}

/* ---------- pros/cons: hover emphasis ---------- */
.pros,.cons{transition:transform .3s var(--ease),box-shadow .3s}
.pros:hover,.cons:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(14,25,97,.14)}
.pros ul li,.cons ul li{transition:transform .25s var(--ease)}
.pros ul li:hover,.cons ul li:hover{transform:translateX(5px)}

/* ---------- professional touches ---------- */
::selection{background:var(--blue);color:#fff}
a:focus-visible,button:focus-visible,.btn:focus-visible,.buy-btn:focus-visible{
  outline:3px solid #2dd4bf;outline-offset:3px;border-radius:8px}
img{transition:filter .4s}
@media (prefers-reduced-motion:reduce){
  .btn::after,.buy-btn::after,.sticky-buy a::after,.cmp th::after{display:none}
  .price-card.hot,.price-badge,.topbar a,.hero .imgz img,.final-cta,.card:hover::before{animation:none!important}
  .hero-bullets li{opacity:1;transform:none;animation:none}
  .reveal-l,.reveal-r,.reveal-s{opacity:1;transform:none}
}

/* ---------- v3 refinements ---------- */
.card::before{border-radius:13px 13px 0 0}
.faq-item.open .faq-q::after{content:"+";transform:rotate(45deg)}