/* ═══════════════════════════════════════════
   MATICLINIC — SHARED BASE (shared.css)
   Used by all subpages
═══════════════════════════════════════════ */

/* TOKENS */
:root{
  --white:#FAFAF8;--off-white:#F2F0EA;--mist:#E8E4DB;--stone:#C8C2B5;
  --slate:#8C8880;--ash:#54524E;--charcoal:#2C2B28;--ink:#131210;
  --p50:#EEF1FA;--p100:#D5DCF4;--p200:#A8B5E6;--p300:#7A8FD8;
  --p400:#5069C9;--p500:#3350BA;--p600:#2540A0;--p700:#1A2F7A;
  --p800:#101F56;--p900:#08112E;
  --a100:#FDF0D5;--a300:#F5C96B;--a500:#E8A820;--a700:#B07A0C;
  --ok:#2E7D52;--ok-bg:#EAF5EF;--err:#B42318;--err-bg:#FEF3F2;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Sora',system-ui,sans-serif;
  --fm:'DM Mono','Courier New',monospace;
  --nb-h:68px;--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.45,0,.55,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:calc(var(--nb-h)+46px)}
body{font-family:var(--fb);color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:none;border:none;background:none;font-family:inherit}
::selection{background:var(--p100);color:var(--p800)}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--off-white)}
::-webkit-scrollbar-thumb{background:var(--p400);border-radius:4px}

/* CURSOR */
#cursor{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--p500);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s;mix-blend-mode:multiply}
#cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--p400);
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:transform .18s var(--ease2),width .3s var(--ease),height .3s var(--ease),border-color .25s,opacity .25s}
body:has(a:hover,button:hover) #cursor{width:20px;height:20px;background:var(--a500)}
body:has(a:hover,button:hover) #cursor-ring{width:52px;height:52px;border-color:var(--a500);opacity:.5}
@media(hover:none){#cursor,#cursor-ring{display:none}body{cursor:auto}button{cursor:pointer}}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes spinCCW{to{transform:rotate(-360deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.35)}}
@keyframes pulseRing{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes drawLine{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
@keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].on{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.1s}[data-reveal][data-d="2"]{transition-delay:.2s}
[data-reveal][data-d="3"]{transition-delay:.3s}[data-reveal][data-d="4"]{transition-delay:.4s}
[data-reveal][data-d="5"]{transition-delay:.5s}

/* URGENCY BAR */
.ub{background:var(--err-bg);border-bottom:1px solid rgba(180,35,24,.12);
  padding:.475rem 0;position:sticky;top:0;z-index:200;transition:transform .3s var(--ease)}
.ub__in{display:flex;align-items:center;gap:.875rem;font-size:.8rem;flex-wrap:wrap}
.ub__dot{width:8px;height:8px;border-radius:50%;background:var(--err);flex-shrink:0;animation:pulse 1.5s ease-in-out infinite}
.ub__lbl{color:var(--err);font-weight:500}.ub__tel{color:var(--err);font-weight:700;font-family:var(--fm);letter-spacing:.03em;transition:opacity .2s}
.ub__tel:hover{opacity:.7}.ub__sep{color:var(--stone)}
.ub__wa{display:inline-flex;align-items:center;gap:.3rem;color:var(--err);font-weight:500;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s}
.ub__wa:hover{opacity:.7}

/* NAVBAR */
.nb{position:sticky;top:34px;z-index:199;height:var(--nb-h);background:rgba(250,250,248,.88);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(232,228,219,.6);transition:box-shadow .3s var(--ease),background .3s}
.nb.scrolled{box-shadow:0 4px 24px rgba(19,18,16,.08);background:rgba(250,250,248,.97)}
.nb__in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1.5rem}
.nb__logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.logo-ring{transform-origin:center;animation:spinSlow 20s linear infinite}
.logo-ring2{transform-origin:center;animation:spinCCW 15s linear infinite}
.logo-cross-h,.logo-cross-v{transition:fill .3s}
.nb__logo:hover .logo-cross-h,.nb__logo:hover .logo-cross-v{fill:var(--a500)}
.nb__logo-text{display:flex;flex-direction:column;line-height:1.05}
.nb__logo-name{font-family:var(--fd);font-size:1.45rem;font-weight:500;color:var(--ink);letter-spacing:-.03em}
.nb__logo-name em{font-style:italic;color:var(--p500)}
.nb__logo-tag{font-family:var(--fm);font-size:.525rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-top:1px}
.nb__nav{display:none;align-items:center;gap:.125rem}
@media(min-width:900px){.nb__nav{display:flex}}
.nb__lnk{font-size:.875rem;color:var(--ash);padding:.5rem .8rem;border-radius:6px;
  transition:color .2s,background .2s;position:relative}
.nb__lnk:hover{color:var(--ink);background:var(--off-white)}
.nb__lnk.act{color:var(--p600);font-weight:500}
.nb__lnk.act::after{content:'';position:absolute;bottom:-1px;left:.8rem;right:.8rem;height:2px;background:var(--p500);border-radius:2px}
.nb__act{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.nb__hbg{display:none;flex-direction:column;gap:5px;padding:.5rem;border-radius:6px;transition:background .2s}
.nb__hbg:hover{background:var(--off-white)}
.nb__hbg span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nb__hbg.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nb__hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nb__hbg.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:899px){.nb__hbg{display:flex}}
.nb__drawer{display:none;position:fixed;top:calc(34px + var(--nb-h));left:0;right:0;
  background:var(--white);border-bottom:1px solid var(--mist);
  padding:1rem clamp(1.25rem,5vw,2.5rem) 1.5rem;flex-direction:column;gap:.125rem;z-index:198;
  box-shadow:0 12px 40px rgba(19,18,16,.12);animation:fadeIn .25s var(--ease) both}
.nb__drawer.open{display:flex}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--fb);font-size:.875rem;font-weight:500;letter-spacing:.01em;line-height:1;
  padding:.75rem 1.375rem;border-radius:10px;border:1.5px solid transparent;
  cursor:none;white-space:nowrap;user-select:none;transition:all .22s var(--ease);
  position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.12);opacity:0;transition:opacity .2s}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--primary{background:var(--p600);color:#fff;border-color:var(--p600)}
.btn--primary:hover{background:var(--p700);border-color:var(--p700);box-shadow:0 8px 28px rgba(37,64,160,.35);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--p600);border-color:var(--p200)}
.btn--outline:hover{background:var(--p50);border-color:var(--p400)}
.btn--ghost{background:transparent;color:var(--ash);border-color:var(--mist)}
.btn--ghost:hover{background:var(--off-white);border-color:var(--stone);color:var(--ink)}
.btn--white{background:#fff;color:var(--p700);border-color:#fff}
.btn--white:hover{background:var(--off-white);box-shadow:0 8px 28px rgba(19,18,16,.15);transform:translateY(-1px)}
.btn--outline-w{background:transparent;color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.3)}
.btn--outline-w:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn--sm{padding:.5rem 1.125rem;font-size:.8125rem;border-radius:8px}
.btn--lg{padding:.9375rem 2rem;font-size:1rem;border-radius:12px}
.btn--xl{padding:1.125rem 2.5rem;font-size:1.0625rem;border-radius:12px}
.btn--full{width:100%}
.d-none-m{display:none}
@media(min-width:768px){.d-none-m{display:flex}}

/* SECTION */
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--p500);margin-bottom:1rem}
.sec__tag-dot{width:6px;height:6px;border-radius:50%;background:var(--p500);animation:pulse 2s ease-in-out infinite}
.sec__h{font-family:var(--fd);font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:400;
  line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin-bottom:1.25rem}
.sec__h em{font-style:italic;color:var(--p500)}
.sec__lead{font-size:1.0625rem;color:var(--ash);line-height:1.8;max-width:540px}
.sec__hdr{text-align:center;margin-bottom:4rem}
.sec__hdr .sec__lead{margin-inline:auto}

/* PAGE HERO */
.ph{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem)}
.ph__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ph__in{position:relative;z-index:2}
.ph__eye{font-family:var(--fm);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--p500);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.ph__eye-dot{width:6px;height:6px;border-radius:50%;background:var(--p500);animation:pulse 2s infinite}
.ph__h{font-family:var(--fd);font-size:clamp(3rem,6vw,5rem);font-weight:400;
  line-height:1.06;letter-spacing:-.04em;color:var(--ink);margin-bottom:1.25rem}
.ph__h em{font-style:italic;
  background:linear-gradient(135deg,var(--p500),var(--p400),var(--p600));
  background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 4s ease-in-out infinite}
.ph__sub{font-size:1.0625rem;color:var(--ash);line-height:1.8;max-width:520px}

/* CTA FINAL (shared) */
.cta-sec{position:relative;overflow:hidden;padding:7rem 0}
.cta-bg-grad{position:absolute;inset:0;background:linear-gradient(135deg,var(--p800),var(--p900),#050b1d)}
.cta-bg-grad::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(80,105,201,.25),transparent 60%)}
.cta-content{position:relative;z-index:1;text-align:center;max-width:640px;margin-inline:auto}
.cta-h{font-family:var(--fd);font-size:clamp(2.5rem,5vw,4rem);font-weight:400;color:#fff;
  line-height:1.08;letter-spacing:-.04em;margin-bottom:1.25rem}
.cta-h em{font-style:italic;background:linear-gradient(135deg,var(--p300),var(--p200));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-p{color:rgba(255,255,255,.6);font-size:1.0625rem;line-height:1.8;margin-bottom:2.75rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* FOOTER */
.ft{background:var(--ink);padding:4rem 0 0}
.ft__in{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.07)}
@media(max-width:768px){.ft__in{grid-template-columns:1fr;gap:2.5rem}}
.ft__tag{font-size:.875rem;color:var(--slate);margin:1rem 0;max-width:280px;line-height:1.65}
.ft__cts{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem}
.ft__cts a{font-size:.8125rem;color:var(--stone);transition:color .2s}
.ft__cts a:hover{color:var(--white)}
.ft__soc{display:flex;gap:.75rem}
.ft__soc a{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.06);color:var(--stone);display:flex;align-items:center;justify-content:center;transition:all .2s}
.ft__soc a:hover{background:rgba(255,255,255,.12);color:var(--white)}
.ft__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:480px){.ft__nav{grid-template-columns:1fr 1fr}}
.ft__col{display:flex;flex-direction:column;gap:.5rem}
.ft__col-t{font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:.5rem}
.ft__col a{font-size:.8125rem;color:var(--stone);transition:color .2s}
.ft__col a:hover{color:var(--white)}
.ft__bot{padding:1.25rem 0}
.ft__bot-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--ash)}
.ft__trust{display:flex;align-items:center;gap:.375rem;color:var(--ash)}
.ft__trust svg{color:var(--p500)}

/* WA FLOAT */
.wa-fl{position:fixed;bottom:1.75rem;right:1.75rem;width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);z-index:197;
  animation:fadeUp .5s var(--ease) 1s both;transition:all .3s var(--ease)}
.wa-fl:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,.55)}
.wa-fl__ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.4);animation:pulseRing 2s ease-out infinite}

/* TICKER */
.ticker{background:var(--ink);padding:.875rem 0;overflow:hidden}
.ticker__track{display:flex;white-space:nowrap;animation:ticker 28s linear infinite}
.ticker__item{display:inline-flex;align-items:center;gap:.625rem;font-size:.8rem;color:var(--stone);padding:0 2rem;flex-shrink:0}
.ticker__item svg{color:var(--p400)}
.ticker__dot{width:4px;height:4px;border-radius:50%;background:var(--p600);flex-shrink:0}

/* PLAN CHECK BULLETS */
.plan__li::before{content:'';width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:var(--ok-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232E7D52' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

/* FORM INPUTS */
.fi{font-family:var(--fb);font-size:.9375rem;color:var(--ink);background:var(--white);
  border:1.5px solid var(--mist);border-radius:10px;padding:.75rem 1rem;outline:none;
  width:100%;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.fi:focus{border-color:var(--p400);box-shadow:0 0 0 3px var(--p100)}
.fi::placeholder{color:var(--stone)}
.fi--sel{cursor:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8880' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.fi--ta{resize:vertical;min-height:108px;line-height:1.65}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--fm);font-size:.6875rem;
  letter-spacing:.07em;text-transform:uppercase;background:var(--p50);color:var(--p700);
  border:1px solid var(--p200);padding:.3rem .875rem;border-radius:999px}

/* ── PRELOADER ───────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #020C12;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.preloader__logo {
  width: 100px;
  /* subtle glow/shadow to make it elegant */
  filter: drop-shadow(0 4px 20px rgba(232,168,32,0.4));
  animation: flap 2s ease-in-out infinite;
}
@keyframes flap {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.05) translateY(-5px); filter: drop-shadow(0 8px 25px rgba(232,168,32,0.6)); }
  100% { transform: scale(1) translateY(0); }
}
.preloader__bar-bg {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.preloader__bar-fill {
  width: 0%;
  height: 100%;
  background: var(--ok); /* green bar */
  transition: width 0.1s ease-out;
}