/* ZTF WIG — design system. Hand-built token layer, components, utilities. */

/* ============================================================ 1. TOKENS */
:root{
  /* brand + ink */
  --brand:#5E2231; --brand-dark:#3E1620; --brand-mid:#7A3143; --brand-light:#F4EAEC;
  --accent:#B08A4F; --accent-dark:#8D6C37; --accent-light:#F3EADB;
  --ink:#2A1810; --ink-2:#4E3B32; --ink-3:#7A6A61; --ink-4:#9C8F86;
  --line:#E4DCD2; --line-strong:#CFC2B4;
  --bg:#FDFBF7; --bg-soft:#F6F1E9; --bg-tint:#F1E8DC; --bg-dark:#241118; --bg-darker:#190B10;
  --ok:#3F6B4A; --warn:#8D5A1F; --wa:#25D366; --wa-dark:#1EA952;
  --on-dark:#F6EFE7; --on-dark-2:#D6C6BA;
  /* type scale */
  --ff-display:"ztf-serif",Georgia,"Times New Roman",serif;
  --ff-body:"ztf-sans","Helvetica Neue",Arial,sans-serif;
  --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem;
  --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:1.9rem;
  --fs-4xl:2.4rem; --fs-5xl:3.1rem; --fs-6xl:3.9rem;
  --lh-tight:1.14; --lh-snug:1.3; --lh-body:1.7; --lh-loose:1.85;
  --fw-reg:400; --fw-bold:700;
  --ls-tight:-.015em; --ls-wide:.02em; --ls-caps:.14em;
  /* space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --sp-20:5rem; --sp-24:6rem; --sp-32:8rem;
  --section-y:clamp(3rem,7vw,5.5rem);
  /* radius + shadow */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --sh-1:0 1px 2px rgba(42,24,16,.06);
  --sh-2:0 4px 18px rgba(42,24,16,.09);
  --sh-3:0 14px 44px rgba(42,24,16,.16);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.35);
  /* layout */
  --container:1200px; --container-narrow:760px; --header-h:74px;
  --dur:.22s; --dur-slow:.6s; --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================ 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-body);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:var(--fw-bold);
  line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--ink);margin:0 0 var(--sp-4)}
h1{font-size:clamp(1.9rem,4.6vw,var(--fs-5xl))}
h2{font-size:clamp(1.55rem,3.3vw,var(--fs-4xl))}
h3{font-size:clamp(1.15rem,2vw,var(--fs-2xl))}
h4{font-size:var(--fs-lg);line-height:var(--lh-snug)}
p{margin:0 0 var(--sp-4)}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-mid)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--sp-4);padding-inline-start:1.25rem}
li{margin-bottom:var(--sp-2)}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-8) 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:var(--sp-4);top:-4rem;z-index:200;
  background:var(--brand);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);
  transition:top var(--dur) var(--ease)}
.skip-link:focus{top:var(--sp-3);color:#fff}

/* ============================================================ 3. LAYOUT */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.container-narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-tint)}
.section--dark{background:var(--bg-dark);color:var(--on-dark)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}
.section--dark p{color:var(--on-dark-2)}
.section--dark a{color:var(--accent-light)}
.section-head{max-width:64ch;margin-bottom:var(--sp-10)}
.section-head--center{margin-inline:auto;text-align:center}
.kicker{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--accent-dark);
  margin-bottom:var(--sp-3)}
.section--dark .kicker{color:var(--accent)}
.lede{font-size:var(--fs-lg);color:var(--ink-2);max-width:68ch}
.section--dark .lede{color:var(--on-dark-2)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  border:0;margin:var(--sp-8) 0}
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack>*+*{margin-top:var(--sp-4)}
.prose{max-width:70ch}
.prose p{color:var(--ink-2)}
.prose h2{margin-top:var(--sp-10)}
.prose h3{margin-top:var(--sp-8)}

/* ============================================================ 4. BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-wide);padding:var(--sp-3) var(--sp-6);border-radius:var(--r-full);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
             color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn svg{flex:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-accent{background:var(--accent);color:#33260F}
.btn-accent:hover{background:var(--accent-dark);color:#fff}
.btn-ghost{border-color:var(--brand);color:var(--brand);background:transparent}
.btn-ghost:hover{background:var(--brand-light);color:var(--brand-dark)}
.btn-light{background:rgba(253,251,247,.92);color:var(--brand);border-color:rgba(94,34,49,.15)}
.btn-light:hover{background:#fff;color:var(--brand-dark)}
.btn-outline-light{border-color:rgba(246,239,231,.7);color:var(--on-dark);background:transparent}
.btn-outline-light:hover{background:rgba(246,239,231,.12);color:#fff}
.btn-wa{background:var(--wa);color:#04361A}
.btn-wa:hover{background:var(--wa-dark);color:#fff}
.btn-sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.btn-row--center{justify-content:center}

/* ============================================================ 5. HEADER */
.header{position:sticky;top:0;z-index:90;background:rgba(253,251,247,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.header__bar{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h)}
.header__logo{display:flex;align-items:center;flex:none;padding-block:var(--sp-2)}
.header__logo img{height:44px;width:auto;max-width:210px;object-fit:contain}
.header__nav{display:none;flex:1;align-items:center;justify-content:center;gap:var(--sp-1)}
.header__spacer{flex:1}
.header__actions{display:flex;align-items:center;gap:var(--sp-3);flex:none;margin-inline-start:auto}
.header__cta{display:none}
.lang-switch{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);
  color:var(--ink-2);text-decoration:none;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line-strong);border-radius:var(--r-full);white-space:nowrap}
.lang-switch:hover{border-color:var(--brand);color:var(--brand)}
.nav-link{display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:0;
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-full);cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav-link:hover,.nav-link[aria-expanded=true]{background:var(--brand-light);color:var(--brand)}
.nav-link svg{width:10px;height:10px;opacity:.6}
.nav-item{position:static}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line-strong);border-radius:var(--r-full);background:transparent;
  color:var(--ink);cursor:pointer}

/* ---- mega menu ---- */
.mega{position:absolute;inset-inline:0;top:100%;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-3);padding-block:var(--sp-8);
  max-height:min(72vh,590px);overflow-y:auto;z-index:95}
.mega[hidden]{display:none}
.mega__grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(2,minmax(0,1fr))}
.mega__col-title{font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--accent-dark);font-weight:var(--fw-bold);margin-bottom:var(--sp-3)}
.mega__card{display:block;text-decoration:none;color:inherit;overflow-wrap:anywhere}
.mega__thumb{display:block;overflow:hidden;border-radius:var(--r-md);background:var(--bg-tint);margin-bottom:var(--sp-2)}
.mega__thumb img{aspect-ratio:4/5;width:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
.mega__card:hover .mega__thumb img{transform:scale(1.05)}
.mega__name{display:block;font-family:var(--ff-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  color:var(--ink);line-height:var(--lh-snug)}
.mega__card:hover .mega__name{color:var(--brand)}
.mega__desc{display:block;margin-top:2px;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.45}
.mega__links{list-style:none;padding:0;margin:0}
.mega__links li{margin-bottom:var(--sp-2)}
.mega__links a{font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;font-weight:var(--fw-bold)}
.mega__links a:hover{color:var(--brand)}
.mega__foot{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}

/* ---- mobile drawer ---- */
.drawer{position:fixed;inset:0;z-index:120;background:var(--bg);overflow-y:auto;
  padding:var(--sp-5) 0 var(--sp-16)}
.drawer[hidden]{display:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-6)}
.drawer__head img{height:40px;width:auto}
.drawer__group{border-top:1px solid var(--line);padding-block:var(--sp-4)}
.drawer__group h2{font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--accent-dark);margin-bottom:var(--sp-3)}
.drawer__group ul{list-style:none;padding:0;margin:0}
.drawer__group a{display:block;padding:var(--sp-2) 0;color:var(--ink);text-decoration:none;
  font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.drawer__group a:hover{color:var(--brand)}

/* ============================================================ 6. HERO */
.hero{position:relative;isolation:isolate;min-height:min(86vh,720px);display:grid;
  align-items:end;overflow:hidden;background:var(--bg-dark)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slow) var(--ease);
  z-index:0}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,11,16,.42) 0%,rgba(25,11,16,.22) 38%,rgba(25,11,16,.78) 100%)}
.hero__inner{position:relative;z-index:2;padding-block:clamp(3rem,10vw,6rem)}
.hero__copy{max-width:41rem}
.hero__kicker{display:inline-block;font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:var(--fw-bold);color:var(--accent-light);
  background:rgba(25,11,16,.45);border:1px solid rgba(176,138,79,.5);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);margin-bottom:var(--sp-5)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(20,8,12,.55);margin-bottom:var(--sp-5)}
.hero__sub{color:#F2E9E1;font-size:var(--fs-lg);max-width:36rem;
  text-shadow:0 1px 14px rgba(20,8,12,.5);margin-bottom:var(--sp-8)}
.hero__dots{display:flex;gap:var(--sp-2);margin-top:var(--sp-8)}
.hero__dot{width:34px;height:4px;border-radius:var(--r-full);border:0;padding:0;cursor:pointer;
  background:rgba(246,239,231,.38);transition:background var(--dur) var(--ease)}
.hero__dot.is-active{background:var(--accent)}
.hero-sub{position:relative;background:var(--bg-dark);color:var(--on-dark);
  padding-block:var(--sp-10)}

/* ============================================================ 7. CARDS */
.card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.card__media{background:var(--bg-tint);overflow:hidden}
.card__media img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.card__title{font-family:var(--ff-display);font-weight:var(--fw-bold);font-size:var(--fs-lg);
  color:var(--ink);line-height:var(--lh-snug);margin:0}
.card:hover .card__title{color:var(--brand)}
.card__text{font-size:var(--fs-sm);color:var(--ink-3);margin:0}
.card__more{margin-top:auto;padding-top:var(--sp-3);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);color:var(--brand);
  text-transform:uppercase}
.card--wide .card__media img{aspect-ratio:16/10}
.card--flat{border:0;background:var(--bg-soft)}
.card--flat:hover{box-shadow:none;transform:none;background:var(--bg-tint)}

.tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);height:100%}
.tile h3{font-size:var(--fs-xl);margin-bottom:var(--sp-2)}
.tile p{color:var(--ink-3);font-size:var(--fs-sm);margin:0}
.section--dark .tile{background:rgba(246,239,231,.06);border-color:rgba(246,239,231,.14)}
.section--dark .tile p{color:var(--on-dark-2)}

.figure{margin:0}
.figure img{border-radius:var(--r-lg);width:100%}
.figure figcaption{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-3)}
.section--dark .figure figcaption{color:var(--on-dark-2)}

/* ---- numbered process ---- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(1,minmax(0,1fr));counter-reset:step}
.step{position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);counter-increment:step;margin:0}
.step::before{content:counter(step,decimal-leading-zero);display:block;
  font-family:var(--ff-display);font-size:var(--fs-2xl);color:var(--accent);
  line-height:1;margin-bottom:var(--sp-3)}
.step h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.step p{font-size:var(--fs-sm);color:var(--ink-3);margin:0}
.section--dark .step{background:rgba(246,239,231,.06);border-color:rgba(246,239,231,.14)}
.section--dark .step p{color:var(--on-dark-2)}

/* ---- facts strip ---- */
.facts{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.fact{text-align:center;padding:var(--sp-5) var(--sp-3);border:1px solid rgba(246,239,231,.16);
  border-radius:var(--r-lg)}
.fact__v{font-family:var(--ff-display);font-size:var(--fs-4xl);color:var(--accent);
  line-height:1;display:block;margin-bottom:var(--sp-2)}
.fact__l{font-size:var(--fs-xs);color:var(--on-dark-2);letter-spacing:var(--ls-wide)}

/* ---- spec table ---- */
.spec{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.spec table{font-size:var(--fs-sm)}
.spec th,.spec td{padding:var(--sp-3) var(--sp-5);text-align:start;
  border-bottom:1px solid var(--line);vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:38%;color:var(--ink-2);font-weight:var(--fw-bold);background:var(--bg-soft)}
.spec td{color:var(--ink-2)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{font-size:var(--fs-sm);min-width:34rem}
.cmp th,.cmp td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);text-align:start}
.cmp thead th{background:var(--brand);color:#fff;font-weight:var(--fw-bold);border-bottom:0}
.cmp tbody th{font-weight:var(--fw-bold);color:var(--ink)}
.cmp td{color:var(--ink-2)}

/* ---- checklist ---- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.checks li{position:relative;padding-inline-start:var(--sp-8);color:var(--ink-2);margin:0}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:14px;height:2px;
  background:var(--accent);border-radius:var(--r-full)}
.section--dark .checks li{color:var(--on-dark-2)}

/* ---- gallery ---- */
.gallery{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery figure{margin:0}
.gallery img{border-radius:var(--r-md);aspect-ratio:4/5;object-fit:cover;width:100%;
  background:var(--bg-tint)}
.gallery figcaption{margin-top:var(--sp-2);font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.4}

/* ---- product hero ---- */
.phero{display:grid;gap:var(--sp-8);align-items:center;
  grid-template-columns:repeat(1,minmax(0,1fr))}
.phero__media img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--bg-tint)}

/* ============================================================ 8. FAQ */
.faq{max-width:52rem;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line);background:transparent}
.faq__item summary{cursor:pointer;list-style:none;display:flex;gap:var(--sp-4);
  align-items:flex-start;justify-content:space-between;padding:var(--sp-5) 0;
  font-family:var(--ff-display);font-weight:var(--fw-bold);font-size:var(--fs-lg);
  color:var(--ink);line-height:var(--lh-snug)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.35em;
  border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item summary:hover{color:var(--brand)}
.faq__a{padding:0 0 var(--sp-5);color:var(--ink-2);font-size:var(--fs-sm);max-width:60ch}
.faq__a p:last-child{margin-bottom:0}

/* ============================================================ 9. BREADCRUMB + FOOTER */
.crumbs{font-size:var(--fs-xs);color:var(--ink-3);padding-block:var(--sp-4);
  border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0}
.crumbs li{margin:0;display:flex;gap:var(--sp-2);align-items:center}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand)}

.footer{background:var(--bg-darker);color:var(--on-dark-2);padding-block:var(--sp-16) var(--sp-8)}
.footer__grid{display:grid;gap:var(--sp-8);grid-template-columns:repeat(1,minmax(0,1fr))}
.footer h2{font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--sp-4)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:var(--sp-2)}
.footer a{color:var(--on-dark-2);text-decoration:none;font-size:var(--fs-sm)}
.footer a:hover{color:#fff}
.footer__logo img{height:46px;width:auto;margin-bottom:var(--sp-4)}
.footer__bottom{margin-top:var(--sp-12);padding-top:var(--sp-6);
  border-top:1px solid rgba(246,239,231,.14);display:flex;flex-wrap:wrap;gap:var(--sp-4);
  justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-4)}
.footer__bottom a{font-size:var(--fs-xs)}

/* ============================================================ 10. CTA BAND + DOCK */
.cta-band{background:var(--brand);color:#fff;border-radius:var(--r-xl);
  padding:clamp(2rem,5vw,3.5rem);text-align:center;box-shadow:var(--sh-2)}
.cta-band h2{color:#fff}
.cta-band p{color:#F0DDE1;max-width:48ch;margin-inline:auto}

.cta-dock,.cta-dock.is-fixed{position:fixed;inset-inline-end:20px;bottom:20px;z-index:100;
  display:flex;flex-direction:column;gap:var(--sp-3)}
.cta-dock__btn{width:54px;height:54px;border-radius:var(--r-full);display:grid;place-items:center;
  color:#fff;box-shadow:var(--sh-3);transition:transform var(--dur) var(--ease)}
.cta-dock__btn:hover{transform:scale(1.07);color:#fff}
.cta-dock__btn--mail{background:var(--brand)}
.cta-dock__btn--wa{background:var(--wa)}

/* ============================================================ 11. ANIMATION */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{animation:rise .55s var(--ease) both}
.flow line,.flow path{stroke-dasharray:7 5;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================ 12. RTL */
[dir=rtl] .crumbs li+li::before{content:"\\"}
[dir=rtl] .step::before{direction:ltr}
[dir=rtl] .fact__v{direction:ltr}
[dir=rtl] .faq__item summary::after{transform:rotate(135deg)}
[dir=rtl] .faq__item[open] summary::after{transform:rotate(-45deg)}
[dir=rtl] .header__logo img,[dir=rtl] .footer__logo img,[dir=rtl] .drawer__head img{direction:ltr}

/* ============================================================ 13. BREAKPOINTS */
@media (min-width:480px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  :root{--header-h:80px}
  .container{padding-inline:var(--sp-6)}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phero{grid-template-columns:1.05fr .95fr}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .header__nav{display:flex}
  .header__cta{display:inline-flex}
  .burger{display:none}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mega__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
  .drawer{display:none!important}
}
@media (min-width:1280px){
  .container{padding-inline:var(--sp-8)}
  .mega__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .steps--6{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:1536px){
  :root{--container:1280px}
}
@media (max-width:640px){
  .cta-dock{inset-inline-end:14px;bottom:76px}
  .cta-dock__btn{width:50px;height:50px}
  .hero{min-height:78vh}
}
@media (max-width:1023px){
  .mega{display:none!important}
}
@media print{
  .header,.footer,.cta-dock,.hero__dots{display:none}
  body{background:#fff;color:#000}
}