/* =========================================================================
   HealtySoftware — black, motion-driven studio site
   Palette + type direction: ui-ux-pro-max (Pure black + white contrast,
   Archivo / Space Grotesk, Motion-Driven style).
   Fully static. Scales 360px phone → 49" ultrawide.
   ========================================================================= */

:root{
  --bg:#000000;
  --fg:#FAFAFA;
  --card:#0C0C0C;
  --muted:#131313;
  --muted-fg:#94A3B8;
  --border:#262629;
  --border-strong:#3F3F46;
  --accent:#FFFFFF;
  --on-accent:#0A0A0A;

  --font-display:"Space Grotesk","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --maxw:1240px;
  --maxw-wide:1600px;
  --pad-x:clamp(20px,5vw,64px);
  --sec-y:clamp(64px,9vw,148px);

  --t-hero:clamp(2.6rem,6.4vw,6.5rem);
  --t-h2:clamp(1.9rem,3.6vw,3.4rem);
  --t-h3:clamp(1.05rem,1.5vw,1.35rem);
  --t-body:clamp(1rem,1.15vw,1.15rem);
  --t-small:clamp(.8rem,.95vw,.9rem);

  --ease-spring:cubic-bezier(.16,1,.3,1);
  --radius:18px;

  --nav-h:74px;
  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--fg);
  background:transparent;            /* let the fixed .bg layer show through */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:#fff; color:#000; }

.wrap{
  width:min(var(--maxw), 100% - (var(--pad-x) * 2));
  margin-inline:auto;
}
@media (min-width:2200px){
  :root{ --maxw:1500px; }
  .wrap{ width:min(var(--maxw-wide), 92%); }
}

/* ---------------- animated background ---------------- */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:#000; pointer-events:none; }
#bg-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:1; }
.bg-glow{
  position:absolute; border-radius:50%; filter:blur(80px);
  opacity:.9; will-change:transform, opacity;
  mix-blend-mode:screen;
}
.bg-glow--1{
  width:66vw; height:66vw; left:-18vw; top:-22vw;
  background:radial-gradient(circle at 42% 40%, rgba(99,132,255,.42), rgba(80,110,255,.12) 46%, transparent 70%);
  animation:aurora1 20s ease-in-out infinite alternate;
}
.bg-glow--2{
  width:58vw; height:58vw; right:-20vw; bottom:-18vw;
  background:radial-gradient(circle at 60% 60%, rgba(190,150,255,.34), rgba(120,120,255,.10) 46%, transparent 70%);
  animation:aurora2 26s ease-in-out infinite alternate;
}
.bg-glow--3{
  width:44vw; height:44vw; left:50%; top:6vh; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 68%);
  animation:aurora3 30s ease-in-out infinite alternate;
}
@keyframes aurora1{
  0%{ transform:translate3d(-4%,-3%,0) scale(1); opacity:.85; }
  100%{ transform:translate3d(10%,7%,0) scale(1.3); opacity:1; }
}
@keyframes aurora2{
  0%{ transform:translate3d(4%,4%,0) scale(1.1); opacity:.7; }
  100%{ transform:translate3d(-10%,-7%,0) scale(1); opacity:1; }
}
@keyframes aurora3{
  0%{ transform:translateX(-50%) translateY(0) scale(1); opacity:.5; }
  100%{ transform:translateX(-50%) translateY(6vh) scale(1.2); opacity:.9; }
}
.bg-beam{
  position:absolute; left:50%; top:-40%; width:70vw; height:150vh;
  transform:translateX(-50%) rotate(16deg);
  background:conic-gradient(from 200deg at 50% 50%, transparent, rgba(255,255,255,.07) 20%, transparent 40%, rgba(140,170,255,.06) 62%, transparent 80%);
  filter:blur(40px); will-change:transform; mix-blend-mode:screen;
  animation:beamspin 40s linear infinite;
}
@keyframes beamspin{ to{ transform:translateX(-50%) rotate(376deg); } }
.bg-grid{
  position:absolute; inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:clamp(48px,6vw,84px) clamp(48px,6vw,84px);
  mask-image:radial-gradient(ellipse 85% 65% at 50% 28%, #000 15%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 28%, #000 15%, transparent 72%);
}
.bg-grain{
  position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.bg-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 130% 90% at 50% 8%, transparent 55%, rgba(0,0,0,.42) 100%);
}
@media (prefers-reduced-motion:reduce){
  #bg-canvas{ display:none; }
  .bg-glow,.bg-beam{ animation:none !important; }
}

/* ---------------- nav ----------------
   Always a dark, translucent bar (even at rest). Scroll only tightens it. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:calc(14px + var(--safe-t)) 0 14px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:padding .35s var(--ease-spring), background .35s ease, border-color .35s ease;
}
.nav.scrolled{
  padding:9px 0;
  background:rgba(0,0,0,.78);
  border-bottom-color:var(--border);
}
.nav__inner{
  width:min(var(--maxw), 100% - (var(--pad-x) * 2));
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(12px,3vw,40px);
}
.nav__brand img{
  height:clamp(26px,2.4vw,34px); width:auto;
  transform:translateY(-2px);
  filter:drop-shadow(0 0 20px rgba(255,255,255,.15));
}
.nav__links{
  display:flex; gap:clamp(14px,2vw,30px); margin-inline:auto;
  font-size:var(--t-small); font-weight:500;
}
.nav__links a{ color:var(--muted-fg); transition:color .2s ease; position:relative; padding:4px 0; }
.nav__links a:hover{ color:var(--fg); }
.nav__right{ display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); }

@media (max-width:920px){
  .nav__links{ display:none; }
}

/* language selector */
.lang{ position:relative; }
.lang__btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:var(--t-small); font-weight:500;
  color:var(--muted-fg);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:999px; padding:8px 12px; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.lang__btn:hover{ color:var(--fg); border-color:var(--border-strong); }
.lang__btn svg:first-child{ opacity:.8; }
.lang__menu{
  position:absolute; right:0; top:calc(100% + 10px);
  width:230px; max-height:min(60vh,420px); overflow-y:auto;
  background:#0a0a0a; border:1px solid var(--border-strong);
  border-radius:14px; padding:6px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8);
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);
  z-index:10;
}
.lang.open .lang__menu{ opacity:1; transform:none; pointer-events:auto; }
.lang__menu button{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  font:inherit; font-size:var(--t-small); color:var(--muted-fg);
  background:none; border:0; border-radius:9px; padding:9px 10px; cursor:pointer; text-align:left;
  transition:background .15s, color .15s;
}
.lang__menu button:hover{ background:rgba(255,255,255,.06); color:var(--fg); }
.lang__menu button[aria-selected="true"]{ color:var(--fg); }
.lang__menu button[aria-selected="true"]::after{ content:"●"; font-size:9px; }
.lang__menu button .sub{ color:#555; font-size:.72rem; }

/* ---------------- buttons ---------------- */
.btn{
  --b:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:clamp(.9rem,1vw,1rem);
  letter-spacing:.01em;
  padding:clamp(13px,1.3vw,16px) clamp(22px,2.2vw,30px);
  color:var(--on-accent); background:var(--accent);
  border:1px solid var(--b); border-radius:999px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .25s var(--ease-spring), box-shadow .25s ease, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(255,255,255,.35); }
.btn:active{ transform:translateY(0); }
.btn--ghost{
  background:transparent; color:var(--fg); border-color:var(--border-strong);
}
.btn--ghost:hover{ background:rgba(255,255,255,.06); box-shadow:none; border-color:#fff; }
.btn--sm{ padding:9px 16px; font-size:var(--t-small); }
.btn--lg{ padding:clamp(15px,1.6vw,20px) clamp(28px,3vw,44px); font-size:clamp(1rem,1.2vw,1.15rem); }
@media (max-width:560px){ .nav__right .btn--sm{ display:none; } }

/* ---------------- reveal animation ----------------
   Visible by default. Only hidden when JS is confirmed running
   (html.js) so a script failure never leaves a blank page. */
.js .reveal{
  opacity:0; transform:translateY(22px); filter:blur(10px);
  transition:opacity .9s var(--ease-spring), transform .9s var(--ease-spring), filter .9s var(--ease-spring);
  transition-delay:var(--d,0ms);
}
.js .reveal.in{ opacity:1; transform:none; filter:blur(0); }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; }
}

/* ---------------- hero ---------------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 6vh) 0 max(9vh, 80px);
  position:relative;
}
@media (max-width:560px){
  .badge{ font-size:.7rem; letter-spacing:.1em; padding:7px 13px; }
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:var(--t-small); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-fg);
  border:1px solid var(--border); border-radius:999px;
  padding:8px 16px; margin:0 0 clamp(22px,3vw,34px);
  background:rgba(255,255,255,.03);
}
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; }
.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-hero); line-height:1.18; letter-spacing:-.02em;
  margin:0; max-width:16ch; padding-bottom:.06em;
  background:linear-gradient(180deg,#fff 30%, #9ea2ad 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  margin:clamp(20px,2.6vw,32px) 0 0; max-width:56ch;
  font-size:clamp(1rem,1.3vw,1.3rem); color:var(--muted-fg);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.6vw,44px); }
.hero__meta{
  list-style:none; margin:clamp(40px,7vh,88px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 28px;
  font-family:var(--font-display); font-size:var(--t-small); letter-spacing:.08em;
  text-transform:uppercase; color:#5b5b63;
}
.hero__meta li{ display:flex; align-items:center; gap:28px; }
.hero__meta li+li::before{ content:""; }
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--border-strong); border-radius:12px;
}
.hero__scroll span{
  position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:#fff; transform:translateX(-50%);
  animation:scrolldot 1.9s var(--ease-spring) infinite;
}
@keyframes scrolldot{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }
@media (prefers-reduced-motion:reduce){ .hero__scroll span{ animation:none; } }

/* ---------------- generic section ---------------- */
.section{ padding:var(--sec-y) 0; position:relative; }
.section--tight{ padding:clamp(48px,7vh,96px) 0; }
.eyebrow{
  font-family:var(--font-display); font-size:var(--t-small); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted-fg);
  margin:0 0 clamp(24px,3vw,40px);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--border-strong); }
.section__title{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-h2);
  line-height:1.1; letter-spacing:-.02em; margin:0 0 clamp(16px,2vw,24px); max-width:20ch;
}
.section__lead{ font-size:var(--t-body); color:var(--muted-fg); max-width:56ch; margin:0 0 clamp(36px,5vw,64px); }
.section__note{ color:var(--muted-fg); margin:0; }

/* ---------------- services cards ---------------- */
.cards{ display:grid; gap:clamp(18px,2.4vw,32px); grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); }
.card{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card);
  padding:clamp(26px,3vw,44px);
  transition:border-color .3s ease, transform .3s var(--ease-spring), background .3s ease;
}
.card:hover{ border-color:var(--border-strong); transform:translateY(-4px); }
.card__icon{
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--border-strong); border-radius:14px; color:#fff;
  margin-bottom:22px; background:rgba(255,255,255,.04);
}
.card h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2vw,1.8rem); margin:0 0 10px; letter-spacing:-.01em; }
.card>p{ color:var(--muted-fg); margin:0 0 22px; max-width:42ch; }
.taglist{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.taglist li{
  font-family:var(--font-display); font-size:var(--t-small); color:#cfcfd4;
  border:1px solid var(--border); border-radius:999px; padding:6px 12px;
  background:rgba(255,255,255,.02);
}

/* ---------------- marquee ---------------- */
.marquee{
  margin-top:clamp(28px,4vw,52px);
  display:flex; gap:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  border-block:1px solid var(--border);
  padding:clamp(16px,2vw,26px) 0;
}
.marquee__track{
  display:flex; flex-shrink:0; gap:clamp(28px,4vw,56px); padding-right:clamp(28px,4vw,56px);
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.6rem); color:#7d7d85; letter-spacing:-.01em;
}
.marquee__item img{ width:clamp(24px,2.4vw,32px); height:auto; opacity:.85; }
@keyframes marquee{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

/* ---------------- approach feats ---------------- */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--border); gap:1px; }
.feat{ padding:clamp(22px,2.4vw,34px); background:var(--card); }
.feat:hover{ background:var(--muted); }
.feat__n{ display:block; font-family:var(--font-display); font-size:var(--t-small); color:#5b5b63; letter-spacing:.1em; margin-bottom:clamp(28px,4vw,52px); }
.feat h3{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); margin:0 0 8px; letter-spacing:-.01em; }
.feat p{ color:var(--muted-fg); margin:0; font-size:var(--t-small); }

/* ---------------- contact ---------------- */
.section--contact{ text-align:center; padding:clamp(90px,16vh,220px) 0; }
.section--contact .eyebrow{ justify-content:center; }
.section--contact .eyebrow::before{ display:none; }
.section--contact .section__lead{ margin-inline:auto; }
.cta__title{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(2.4rem,6vw,5.5rem); line-height:1.16; margin:0 0 clamp(18px,2.4vw,28px); padding-bottom:.06em;
  background:linear-gradient(180deg,#fff 35%, #8b8b93 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact__addr{ margin:22px 0 0; color:var(--muted-fg); font-family:var(--font-display); font-size:var(--t-small); letter-spacing:.06em; }

/* ---------------- footer ---------------- */
.footer{ border-top:1px solid var(--border); padding:clamp(48px,7vw,84px) 0 calc(clamp(40px,6vw,72px) + var(--safe-b)); }
.footer__inner{ display:flex; flex-direction:column; gap:clamp(28px,4vw,44px); }
.footer__logo{
  height:clamp(52px,4.8vw,68px); width:auto; max-width:100%;
  align-self:flex-start;                 /* flex column stretch was distorting the width */
  opacity:.9; filter:drop-shadow(0 0 26px rgba(255,255,255,.14));
}

.footer__social{ display:flex; flex-direction:column; gap:14px; }
.footer__social .social-label{
  font-family:var(--font-display); font-size:var(--t-small); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-fg); margin:0;
}
.socials{ display:flex; flex-wrap:wrap; gap:12px; }
.socials a{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:var(--t-small); font-weight:500;
  color:var(--muted-fg);
  border:1px solid var(--border); border-radius:999px; padding:9px 16px 9px 13px;
  background:rgba(255,255,255,.02);
  transition:color .2s, border-color .2s, background .2s, transform .2s var(--ease-spring);
}
.socials a:hover{ color:#fff; border-color:var(--border-strong); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; flex:none; }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding-top:clamp(20px,3vw,28px); border-top:1px solid var(--border);
}
.footer__bottom p{ margin:0; color:#5b5b63; font-size:var(--t-small); }

/* ---------------- rtl ---------------- */
[dir="rtl"] .eyebrow::before{ order:2; }
[dir="rtl"] .nav__links{ direction:rtl; }