/* ============================================================
   Matasia Nursing Home — "Coming Soon" holding page
   Self-contained: the brand tokens and the handful of shared
   primitives this page needs are lifted from the site stylesheet,
   so the folder can be deployed on its own.
   ============================================================ */

:root{
  /* --- brand core --- */
  --navy:        #23125B;
  --navy-deep:   #1A0E45;
  --blue:        #0A8CFF;
  --pink:        #FF2E8A;
  --pink-deep:   #E01F76;
  --lav:         #C9B8E6;
  --lav-soft:    #EFEAF8;

  /* --- neutrals --- */
  --paper:       #FFFFFF;
  --line:        #E7E4F2;
  --body:        #5B5473;
  --body-soft:   #7E7794;

  /* --- gradients --- */
  --g-navy:      linear-gradient(120deg, #2B1770 0%, #23125B 55%, #1B0E4A 100%);
  --g-whatsapp:  linear-gradient(140deg, #45E57F 0%, #25D366 46%, #079C4A 100%);

  /* --- scale (4pt) --- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --sh-1: 0 2px 8px rgba(35,18,91,.06);
  --sh-3: 0 18px 48px rgba(35,18,91,.14);

  --shell: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.65; color:var(--body);
  background:var(--paper);
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }

/* line icons are drawn with currentColor strokes */
svg:not(.sprite){ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 var(--r-md) 0;
}
.skip-link:focus{ left:0; }

.shell{ width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }

.eyebrow{
  display:inline-block;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#C21768; margin-bottom:var(--sp-4);
}

/* ---------- brand lockup ---------- */
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand__mark{
  width:46px; height:46px; border-radius:11px; flex:none;
  border:2px solid var(--navy); background:#fff; object-fit:contain; padding:1px;
}
.brand__text{ display:grid; line-height:1; }
.brand__name{
  font-size:1.1rem; font-weight:700; letter-spacing:.13em;
  color:var(--navy); text-transform:uppercase;
}
.brand__sub{
  font-size:.6875rem; font-weight:600; letter-spacing:.155em;
  color:var(--navy); text-transform:uppercase; margin-top:.24rem;
}
.brand__tag{
  display:flex; align-items:center; gap:.28em;
  font-size:.5625rem; font-weight:600; font-style:italic; letter-spacing:.015em;
  color:#C21768; margin-top:.3rem;
}
.brand__tag svg{ width:.95em; height:.95em; flex:none; stroke-width:2.4; }

/* ---------- social row ---------- */
.social{ display:flex; gap:.6rem; }
.social a{
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; background:#fff; color:var(--navy);
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.social a svg{ width:18px; height:18px; }
.social a:hover{ transform:translateY(-3px); background:var(--pink); color:#fff; }

/* ---------- wave divider ---------- */
.wave{
  position:absolute; left:0; width:100%; pointer-events:none;
  display:block; height:clamp(46px, 6.6vw, 104px);
  overflow:visible;
}
.wave--bottom{ top:0; transform:translateY(-99%); }
.wave path{ stroke-linejoin:round; }

/* ============================================================
   PAGE
   ============================================================ */
.coming-body{
  min-height:100svh;
  display:flex; flex-direction:column;
  background:linear-gradient(175deg,#FFFFFF 0%,#FBFAFE 45%,#F3F0FB 100%);
}
.coming-body > .coming{ flex:1 0 auto; }

.coming{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding-top:clamp(2rem, 5vw, 3.5rem);
}

/* the brand field from the homepage hero, re-cut for this layout */
.coming__blob{
  position:absolute; z-index:-2; top:-30%; right:-22%;
  width:min(72vw,760px); aspect-ratio:1/1.12;
  background:
    radial-gradient(58% 52% at 26% 30%, rgba(201,184,230,.5), transparent 68%),
    linear-gradient(146deg,#5B37B8 0%,#3A1E8E 46%,#23125B 100%);
  border-radius:52% 48% 62% 38% / 44% 56% 44% 56%;
  opacity:.96;
}
.coming__leaf{
  position:absolute; z-index:-1; top:12%; left:38%; width:min(26vw,240px); aspect-ratio:1;
  background:radial-gradient(circle at 40% 40%, rgba(201,184,230,.42), transparent 62%);
  filter:blur(2px);
}

.coming__grid{
  display:grid; gap:clamp(2.25rem,6vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  padding-bottom:clamp(3rem,7vw,5.5rem);
}
.coming__copy{ position:relative; z-index:3; }
.brand--static{ margin-bottom:clamp(1.75rem,4vw,2.5rem); }

.coming__eyebrow{
  display:inline-block; margin-bottom:var(--sp-4);
  border:1.5px solid rgba(255,46,138,.5); border-radius:var(--r-pill);
  padding:.35rem .9rem; background:rgba(255,255,255,.7);
}

.coming__title{
  font-size:clamp(2.2rem, 1.2rem + 4.4vw, 3.6rem);
  line-height:1.06; font-weight:700; letter-spacing:-.035em; color:var(--navy);
}
.coming__line{ display:block; }
.coming__line--pink{ color:var(--pink); display:flex; align-items:center; gap:.4em; flex-wrap:wrap; }
.coming__heart{
  width:.6em; height:.6em; flex:none; color:var(--pink);
  stroke-width:2.2; margin-top:.06em;
  animation:beat 2.6s var(--ease) infinite;
}
@keyframes beat{ 0%,72%,100%{transform:scale(1)} 78%{transform:scale(1.14)} 84%{transform:scale(1)} 90%{transform:scale(1.09)} }

.coming__lede{
  margin-top:var(--sp-5);
  font-size:clamp(.9375rem,.88rem + .2vw,1.0625rem);
  line-height:1.75; color:var(--body); max-width:48ch;
}

/* ---------- countdown ---------- */
.countdown{ margin-top:clamp(1.75rem,4vw,2.25rem); }
.countdown[hidden]{ display:none; }
.countdown__label{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body-soft); margin-bottom:var(--sp-3);
}
.countdown__list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.countdown__unit{
  display:grid; justify-items:center; gap:.15rem;
  min-width:74px; padding:.7rem .65rem;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.countdown__num{
  font-size:1.65rem; font-weight:700; line-height:1.1; letter-spacing:-.02em;
  color:var(--navy); font-variant-numeric:tabular-nums;
}
.countdown__cap{
  font-size:.625rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--body-soft);
}
.countdown__live{
  font-size:.9375rem; font-weight:600; color:var(--navy);
  padding:.75rem 1rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.94); border:1px solid var(--line);
}
.countdown.is-done .countdown__list,
.countdown.is-done .countdown__label{ display:none; }

.coming__list{
  display:grid; gap:.7rem;
  margin-top:clamp(1.75rem,4vw,2.25rem);
  padding-top:clamp(1.5rem,3vw,1.9rem);
  border-top:1px solid var(--line);
}
.coming__list li{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.875rem; line-height:1.6; color:var(--body);
}
.coming__list svg{ width:20px; height:20px; flex:none; color:var(--pink); margin-top:.1rem; }

/* ---------- media and contact card ---------- */
.coming__aside{ position:relative; z-index:2; }
.coming__frame{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; border-radius:var(--r-xl);
  box-shadow:0 26px 60px rgba(35,18,91,.24);
}
.coming__photo{ width:100%; height:100%; object-fit:cover; object-position:5% 26%; }

.coming__card{
  position:relative; z-index:3;
  margin-top:calc(var(--sp-5) * -1); margin-inline:var(--sp-4);
  padding:var(--sp-5);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
}
.coming__card-row{ display:flex; align-items:flex-start; gap:.8rem; }
.coming__card-ico{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; border:2px solid var(--pink); color:var(--pink);
}
.coming__card-ico svg{ width:19px; height:19px; }
.coming__card-label{ display:block; font-size:.8125rem; font-weight:600; color:var(--navy); }
.coming__card-big{ display:block; font-size:1.5rem; font-weight:700; color:var(--navy); line-height:1.15; letter-spacing:-.01em; }
.coming__card-rule{ margin-block:var(--sp-4); }

.coming__contact{ display:grid; gap:var(--sp-3); }
.coming__contact li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.8125rem; line-height:1.65; color:var(--body);
}
.coming__contact a{ color:var(--navy); font-weight:600; }
.coming__contact a:hover{ color:#C21768; }
.coming__ico{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  border-radius:50%; background:var(--lav-soft); color:var(--navy);
}
.coming__ico svg{ width:14px; height:14px; stroke-width:2; }

/* ---------- footer strip ---------- */
.coming__foot{
  position:relative; margin-top:auto;
  background:var(--g-navy); color:#C4BCDF;
}
.coming__foot-in{
  display:grid; gap:var(--sp-4); justify-items:center; text-align:center;
  padding-block:clamp(2rem,5vw,2.75rem);
}
.coming__note{ font-size:.8125rem; line-height:1.7; max-width:52ch; }
.coming__copyright{ font-size:.6875rem; color:#B2A9D1; }

/* ============================================================
   FLOATING WHATSAPP BUTTON — the page's single chat entry point
   ============================================================ */
.fab-wa{
  position:fixed; z-index:95; right:20px; bottom:20px;
  display:grid; place-items:center; width:64px; height:64px;
  border-radius:50%;
  background:var(--g-whatsapp); color:#fff;
  box-shadow:0 14px 34px rgba(7,156,74,.45), 0 0 0 0 rgba(37,211,102,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:fab-float 4.5s var(--ease) infinite;
}
.fab-wa svg{ width:32px; height:32px; stroke-width:1.8; }

/* two rings breathing outward, so the button reads as "talk to us now" */
.fab-wa::before,
.fab-wa::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:fab-ripple 2.8s var(--ease) infinite;
  pointer-events:none;
}
.fab-wa::after{ animation-delay:1.4s; }

.fab-wa:hover{ transform:scale(1.07); box-shadow:0 20px 44px rgba(7,156,74,.55); }
.fab-wa:active{ transform:scale(.98); }

@keyframes fab-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }
@keyframes fab-ripple{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.75); opacity:0; }
  100% { transform:scale(1.75); opacity:0; }
}

/* keep the button clear of the closing line on small screens */
@media (max-width:767px){
  .coming__foot-in{ padding-bottom:calc(clamp(2rem,5vw,2.75rem) + 4.5rem); }
}

/* ---------- wider screens ---------- */
@media (min-width:768px){
  .countdown__unit{ min-width:88px; padding:.85rem .8rem; }
  .countdown__num{ font-size:2rem; }
  .coming__card{ margin-inline:var(--sp-6); }
}

@media (min-width:1024px){
  .coming__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center; gap:clamp(2.5rem,5vw,4.5rem);
    padding-block:clamp(2rem,4vw,3.5rem) clamp(4rem,8vw,6.5rem);
  }
  .coming__aside{ padding-bottom:var(--sp-6); }
  .coming__frame{ aspect-ratio:1/1.02; }
  .fab-wa{ right:28px; bottom:28px; width:68px; height:68px; }
  .fab-wa svg{ width:34px; height:34px; }
}

@media (prefers-reduced-motion: reduce){
  .coming__heart,
  .fab-wa,
  .fab-wa::before,
  .fab-wa::after{ animation:none; }
  .fab-wa{ transition:none; }
  .fab-wa:hover{ transform:none; }
}

@media print{
  .fab-wa,.coming__blob,.coming__leaf{ display:none; }
}