/* ==========================================================
   Demira Store — HP Elite x2 1012 G2 landing page
   ========================================================== */

:root {
  --bg: #FBF5EC;
  --card: #FFFDF8;
  --text: #1A1A1A;
  --text-muted: #5A5A5A;
  --accent: #7A2E2E;          /* Rich burgundy — mature premium tone */
  --accent-hover: #5C1F1F;
  --olive: #6B6A3F;
  --border: #E5DED0;
  --success: #16A34A;         /* Bright green for in-stock indicator */
  --success-glow: rgba(34,197,94,.55);
  --wa: #25D366;

  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: 3rem;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(26,26,26,.05), 0 1px 3px rgba(26,26,26,.05);
  --shadow-md: 0 6px 20px rgba(26,26,26,.08);
  --shadow-lg: 0 20px 40px rgba(26,26,26,.10);

  --container: 1200px;
  --header-h: 64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-0.01em;line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:56px 20px}
.section.narrow{max-width:820px}
.center{text-align:center}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--text);color:var(--bg);padding:8px 12px;z-index:9999}
.skip-link:focus{left:8px;top:8px}

/* ============ Announcement bar ============ */
.announcement{background:var(--text);color:var(--bg);font-size:var(--fs-xs);letter-spacing:.02em}
.marquee{overflow:hidden;padding:8px 0}
.marquee-track{display:flex;gap:2rem;white-space:nowrap;animation:scroll 40s linear infinite;width:max-content}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============ Header ============ */
.header{
  position:sticky;top:0;z-index:50;background:rgba(251,245,236,.9);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s;
}
.header.scrolled{box-shadow:var(--shadow-sm);border-bottom-color:var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{display:inline-flex;align-items:center}
.logo-text{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--text);letter-spacing:-.01em}
.logo-text em{font-style:italic;font-weight:400;color:var(--accent);margin-left:.25rem}
.logo-text.small{font-size:1.15rem}
.header-nav{display:flex;align-items:center;gap:1.25rem}
.header-link{color:var(--text);font-size:var(--fs-sm);font-weight:500}
.header-link:hover{color:var(--accent)}

/* Support icon in nav */
.support-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  width:42px;height:42px;border-radius:50%;background:var(--card);
  border:1px solid var(--border);color:var(--accent);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.support-link:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.support-link svg{width:20px;height:20px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.25rem;border-radius:var(--radius-sm);font-weight:600;font-size:var(--fs-sm);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  border:1px solid transparent;line-height:1;text-align:center;
}
.btn-lg{padding:1rem 1.5rem;min-height:56px;font-size:var(--fs-base)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(122,46,46,.28)}
.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(122,46,46,.35)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--text)}
.btn-outline:hover{background:var(--text);color:var(--bg);transform:translateY(-2px)}
.text-link{display:inline-block;margin-top:.75rem;color:var(--text);border-bottom:1px solid var(--border)}
.text-link:hover{color:var(--accent);border-color:var(--accent)}

/* ============ Hero ============ */
.hero{
  display:grid;grid-template-columns:1fr;gap:32px;
  padding-top:32px;padding-bottom:32px;
}
@media(min-width:960px){
  .hero{grid-template-columns:1.05fr 1fr;gap:56px;padding-top:56px;padding-bottom:56px}
}

.hero-gallery{min-width:0}
.gallery{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
}
.gal-viewport{overflow:hidden}
.gal-track{display:flex;transition:transform .5s cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.gal-slide{flex:0 0 100%;position:relative;aspect-ratio:1/1;background:var(--card)}
.gal-slide img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gal-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,253,248,.92);color:var(--text);
  font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);z-index:2;transition:background .2s, transform .2s;
}
.gal-arrow:hover{background:#fff}
.gal-prev{left:12px}.gal-next{right:12px}
@media(max-width:520px){
  .gal-arrow{width:36px;height:36px;font-size:1.25rem}
  .gal-prev{left:8px}.gal-next{right:8px}
}
.gal-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2}
.gal-dot{width:8px;height:8px;border-radius:50%;background:rgba(26,26,26,.25);cursor:pointer;transition:background .2s,width .2s}
.gal-dot.active{background:var(--accent);width:22px;border-radius:4px}
@media(min-width:960px){.gal-dots{display:none}}

.gal-thumbs{
  display:none;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;
}
.gal-thumbs::-webkit-scrollbar{height:6px}
.gal-thumbs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@media(min-width:960px){.gal-thumbs{display:flex}}
.gal-thumb{
  flex:0 0 70px;height:70px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;background:var(--card);transition:border-color .2s
}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb.active{border-color:var(--accent)}

/* ============ Hero info ============ */
.hero-info{min-width:0}
.badge{
  display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:100px;background:rgba(107,106,63,.12);color:var(--olive);
}
.badge-olive{color:var(--olive)}
.product-title{
  font-size:clamp(1.9rem, 5vw, 2.6rem);margin:.5rem 0 .5rem;color:var(--text);
}
.product-subtitle{font-size:var(--fs-sm);color:var(--text-muted);font-weight:500;margin-bottom:.35rem}
.product-desc{color:var(--text-muted);margin-bottom:1rem}
.rating{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;font-size:var(--fs-sm);color:var(--text-muted)}
.stars{color:var(--accent);font-size:1.1rem;letter-spacing:1px;position:relative}
.star-half{opacity:.5}

.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .75rem;margin-bottom:1rem;min-width:0}
.price-current{font-family:var(--serif);font-size:clamp(1.6rem,6vw,2.2rem);font-weight:700;color:var(--accent);line-height:1}
.price-original{color:var(--text-muted);text-decoration:line-through;font-size:1rem}
.price-save{display:inline-block;font-size:var(--fs-xs);font-weight:600;background:var(--accent);color:#fff;padding:.3rem .6rem;border-radius:100px;letter-spacing:.02em;white-space:nowrap}
@media(max-width:520px){.price-save{flex-basis:100%}}

.stock{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--success);margin-bottom:1.5rem;font-weight:500}
.stock-dot{
  width:10px;height:10px;border-radius:50%;background:#22C55E;
  box-shadow:0 0 0 0 var(--success-glow);
  animation:stockPulse 1.4s ease-out infinite;
}
@keyframes stockPulse{
  0%   {box-shadow:0 0 0 0 rgba(34,197,94,.7), 0 0 6px rgba(34,197,94,.9);}
  70%  {box-shadow:0 0 0 10px rgba(34,197,94,0), 0 0 12px rgba(34,197,94,.9);}
  100% {box-shadow:0 0 0 0 rgba(34,197,94,0), 0 0 6px rgba(34,197,94,.9);}
}
@media(prefers-reduced-motion:reduce){
  .stock-dot{animation:none;box-shadow:0 0 6px rgba(34,197,94,.9)}
}

.cta-group{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}
.cta-group .btn{width:100%}
@media(min-width:640px){.cta-group{flex-direction:row}.cta-group .btn{width:auto;flex:1}}

.trust-strip{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;font-size:var(--fs-xs);color:var(--text-muted)}
.trust-strip li{display:inline-flex;align-items:center;gap:.4rem}
.trust-strip.center{justify-content:center;margin-top:1rem}

/* ============ Highlights ============ */
.highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.highlights{grid-template-columns:repeat(4,1fr);gap:16px}}
.hl-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;text-align:center;transition:transform .2s,box-shadow .2s;
}
.hl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.hl-icon{font-size:1.75rem;margin-bottom:.5rem}
.hl-val{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--text)}
.hl-lbl{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem}

/* ============ Sections ============ */
.section-title{font-size:clamp(1.5rem,3.5vw,2rem);color:var(--text);margin-bottom:1rem}
.section-title.center{text-align:center}
.sub-title{font-family:var(--serif);font-size:1.25rem;margin:1.5rem 0 .5rem;color:var(--text)}
.prose{font-size:var(--fs-md);color:var(--text-muted);line-height:1.75}
.prose.center{text-align:center;margin-left:auto;margin-right:auto;max-width:640px}
.prose.closing{margin-top:1.5rem;color:var(--text)}

/* ============ Features grid ============ */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.5rem}
@media(min-width:640px){.features-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(4,1fr)}}
.feature{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;font-size:var(--fs-sm);font-weight:500;color:var(--text);
  display:flex;align-items:flex-start;gap:.6rem;transition:transform .2s,box-shadow .2s;
}
.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.f-ico{color:var(--accent);font-size:1.15rem;flex-shrink:0}

/* ============ Split (display) ============ */
.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:840px){.split{grid-template-columns:1fr 1fr;gap:48px}}
.split-media{border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border)}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.spec-list{margin-top:1rem}
.spec-list li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.spec-list li strong{color:var(--text);font-weight:600}
.spec-list li span{color:var(--text-muted);text-align:right}

/* ============ Connectivity ============ */
.conn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.5rem}
@media(min-width:640px){.conn-grid{grid-template-columns:repeat(5,1fr)}}
.conn{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 12px;text-align:center;font-size:var(--fs-sm);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.conn span{font-size:1.5rem;color:var(--accent)}

/* ============ Check list ============ */
.check-list{margin-top:1rem}
.check-list li{
  position:relative;padding:.5rem 0 .5rem 2rem;color:var(--text);font-size:var(--fs-md);
  border-bottom:1px solid var(--border);
}
.check-list li:last-child{border-bottom:none}
.check-list li::before{
  content:"✓";position:absolute;left:0;top:.5rem;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
}

/* ============ Pills ============ */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem}
.pill{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:.55rem 1rem;border-radius:100px;font-size:var(--fs-sm);font-weight:500;
}

/* ============ Spec table ============ */
.spec-table-wrap{margin-top:1.5rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec-table tr:nth-child(even){background:#FFFDF8}
.spec-table tr:nth-child(odd){background:var(--bg)}
.spec-table th,.spec-table td{padding:.85rem 1rem;text-align:left;vertical-align:top}
.spec-table th{font-weight:600;color:var(--text);width:40%;border-right:1px solid var(--border)}
.spec-table td{color:var(--text-muted)}
@media(max-width:520px){.spec-table th{width:45%;font-size:.82rem}.spec-table td{font-size:.82rem}}

/* ============ Box grid ============ */
.box-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:1.5rem}
@media(min-width:640px){.box-grid{grid-template-columns:repeat(3,1fr)}}
.box-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 20px;text-align:center;transition:transform .2s,box-shadow .2s
}
.box-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.box-ico{font-size:2.25rem;margin-bottom:.5rem}
.box-card h3{font-size:1.05rem;margin:0}

/* ============ Final CTA ============ */
.final-cta{
  background:linear-gradient(180deg,var(--card) 0%, var(--bg) 100%);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:64px 0;margin-top:32px;
}
.final-cta .section-title{margin-bottom:.5rem}

/* ============ FAQ ============ */
.faq{margin-top:1.5rem;max-width:820px;margin-left:auto;margin-right:auto}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.25rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:var(--fs-base);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:20px;height:20px;flex-shrink:0}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--accent);
  transition:transform .3s ease;
}
.faq-plus::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq-plus::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item[open] .faq-plus::before{transform:translate(-50%,-50%) rotate(45deg)}
.faq-body{padding:0 1.25rem 1.1rem;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.7}
.faq-body p{margin:0}

/* ============ Contact form ============ */
.contact-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.contact-form input,.contact-form textarea{
  font:inherit;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);color:var(--text);width:100%;transition:border-color .2s,box-shadow .2s;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(122,46,46,.15)
}
.contact-form input.invalid,.contact-form textarea.invalid{
  border-color:#B03E14;box-shadow:0 0 0 3px rgba(176,62,20,.12);
}
.field-err{color:#B03E14;font-size:.78rem;font-weight:500;margin-top:.15rem;min-height:1em}
.contact-form textarea{resize:vertical;min-height:120px}
.honeypot{display:none !important}
.form-msg{margin:.5rem 0 0;font-size:var(--fs-sm);min-height:1.2em}
.form-msg.ok{color:var(--success)}
.form-msg.err{color:#B03E14}

/* ============ Footer ============ */
.footer{background:var(--card);border-top:1px solid var(--border);margin-top:32px;padding:32px 0 24px;color:var(--text-muted);font-size:var(--fs-sm)}
.footer-inner{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
@media(min-width:768px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-brand{display:flex;flex-direction:column;gap:.25rem;align-items:center}
@media(min-width:768px){.footer-brand{align-items:flex-start}}
.tagline{font-size:var(--fs-xs)}
.footer-fine{text-align:center;font-size:var(--fs-xs);color:var(--text-muted);margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}

/* ============ Floating WhatsApp ============ */
.fab-whatsapp{
  position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:60;transition:transform .2s;
}
.fab-whatsapp:hover{transform:scale(1.08);color:#fff}
body.has-mobile-buy .fab-whatsapp{bottom:96px}
@media(min-width:1024px){body.has-mobile-buy .fab-whatsapp{bottom:20px}}

/* ============ Scroll to top ============ */
.fab-top{
  position:fixed;right:24px;bottom:96px;width:44px;height:44px;border-radius:50%;
  background:var(--text);color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);z-index:59;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;
}
.fab-top.show{opacity:1;pointer-events:auto}
.fab-top:hover{transform:translateY(-2px)}
body.has-mobile-buy .fab-top{bottom:160px}
@media(min-width:1024px){.fab-top{display:none !important}}

/* ============ Mobile buy bar ============ */
.mobile-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--card);border-top:1px solid var(--border);
  padding:10px 12px;display:flex;align-items:center;gap:12px;
  box-shadow:0 -8px 24px rgba(26,26,26,.08);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.mobile-buy.show{transform:translateY(0)}
.mb-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0}
.mb-info{flex:1;min-width:0}
.mb-name{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-price{font-size:.95rem;color:var(--accent);font-weight:700;font-family:var(--serif)}
.mobile-buy .btn{flex-shrink:0;padding:.7rem 1rem;min-height:44px}
@media(min-width:1024px){.mobile-buy{display:none !important}}

/* ============ Lightbox ============ */
.lightbox{
  position:fixed;inset:0;background:rgba(26,26,26,.88);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.75rem;line-height:1;display:flex;align-items:center;justify-content:center}

/* ============ Modal ============ */
.modal{
  position:fixed;inset:0;background:rgba(26,26,26,.7);z-index:110;
  display:none;align-items:flex-end;justify-content:center;padding:0;
}
.modal.open{display:flex}
@media(min-width:640px){.modal{align-items:center;padding:20px}}
.modal-card{
  background:var(--bg);border-radius:var(--radius) var(--radius) 0 0;
  width:100%;max-width:520px;padding:24px 20px 28px;position:relative;
  max-height:92vh;overflow-y:auto;
}
@media(min-width:640px){.modal-card{border-radius:var(--radius)}}
.modal-close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  background:var(--card);color:var(--text);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
}

/* ============ Success popup ============ */
.success-pop{
  position:fixed;inset:0;background:rgba(26,26,26,.7);z-index:120;
  display:none;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .25s ease;
}
.success-pop.open{display:flex;opacity:1}
.success-card{
  background:var(--card);border-radius:var(--radius);
  width:100%;max-width:440px;padding:36px 28px;text-align:center;
  box-shadow:var(--shadow-lg);position:relative;
  transform:scale(.92);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.success-pop.open .success-card{transform:scale(1)}
.success-icon{
  width:72px;height:72px;border-radius:50%;background:var(--success);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  color:#fff;font-size:2.25rem;font-weight:700;
  animation:successPop .5s cubic-bezier(.2,.9,.3,1.4) .05s both;
}
@keyframes successPop{
  0%{transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.success-title{font-family:var(--serif);font-size:1.5rem;color:var(--text);margin:0 0 .5rem}
.success-msg{color:var(--text-muted);font-size:var(--fs-sm);margin:0 0 1.5rem;line-height:1.6}
.success-back{min-width:180px}

/* ============ Reveal on scroll ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  *{scroll-behavior:auto !important}
}

/* ============ Focus visible ============ */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}