/* ===== Design tokens =====
   Brand kit sampled directly from the two logo files (ISOTIPO 1, the
   light-mode mark on an off-white card, and ISOTIPO 2, the dark-mode mark
   on a near-black card): the coral-red monogram is #ED5145 in both, the
   light card's background is #FBFBFB, and the dark card's background is
   #101011. Site --bg matches each logo's own backing color exactly, so the
   mark's square canvas blends into the page instead of sitting in a box.
   The "online" green is the same red hue-rotated to green (~145deg) at the
   matching saturation/lightness, so neither color reads as more saturated
   or "louder" than the other. */
:root{
  --bg: #101011;
  --bg-2: #18181a;
  --surface: #1e1e20;
  --surface-2: #262628;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);
  --text: #f5f5f6;
  --text-dim: #a8a8ac;
  --text-mute: #77777c;

  --accent: #ed5145;
  --accent-2: #b23d34;
  --accent-soft: rgba(237,81,69,.14);
  --online: #3ddb82;
  --online-soft: rgba(61,219,130,.16);

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --tshadow: 0 1px 2px rgba(0,0,0,.9), 0 8px 30px rgba(0,0,0,.55);

  --header-h: 76px;
  --header-solid-bg: rgba(16,16,17,.72);
}

:root[data-theme="light"]{
  --bg: #fbfbfb;
  --bg-2: #f0f0f0;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --line: rgba(16,16,17,.10);
  --line-strong: rgba(16,16,17,.20);
  --text: #17181a;
  --text-dim: #57585c;
  --text-mute: #86878b;

  /* The exact logo red (#ed5145) reads at only ~3.5:1 on this near-white
     card, short of the 4.5:1 body-text floor, so light mode uses a
     deepened shade of the same hue for text-weight accent uses; dark mode
     keeps the logo's true red since it easily clears contrast there. */
  --accent: #d1382a;
  --accent-2: #9e2a1f;
  --accent-soft: rgba(209,56,42,.12);
  --online: #0e8a4c;
  --online-soft: rgba(14,138,76,.14);

  --tshadow: 0 1px 2px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.08);
  --header-solid-bg: rgba(251,251,251,.82);
}

html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip}
body{
  margin:0;
  overflow-x:hidden; overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s var(--ease-soft), color .4s var(--ease-soft);
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

.skip-link{
  position:fixed;top:-60px;left:12px;z-index:999;
  background:var(--accent);color:#ffffff;padding:.7em 1.1em;border-radius:8px;font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:12px}

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

/* ===== fixed ambient background ===== */
.bg-field{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(178,61,52,.16), transparent 60%),
    radial-gradient(900px 600px at 100% 12%, rgba(237,81,69,.12), transparent 55%),
    var(--bg);
  animation: bgdrift 70s linear infinite;
  background-size: 140% 140%;
  transition:background-color .4s var(--ease-soft);
}
:root[data-theme="light"] .bg-field{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(158,42,31,.08), transparent 60%),
    radial-gradient(900px 600px at 100% 12%, rgba(209,56,42,.07), transparent 55%),
    var(--bg);
  background-size: 140% 140%;
}
@keyframes bgdrift{
  0%{background-position:0% 0%,100% 0%,0 0}
  50%{background-position:8% 6%,92% 8%,0 0}
  100%{background-position:0% 0%,100% 0%,0 0}
}

/* ===== layout helpers ===== */
.section-head{max-width:640px;margin:0 auto 3rem;text-align:center}
.section-kicker{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .8rem;
}
.section-lede{color:var(--text-dim);margin-top:.9rem;font-size:1.05rem}
/* .chip always sits on photographic backdrops (the hero canvas, the
   satellite map), never on a theme surface, so it stays fixed dark
   regardless of the site theme. */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  background:rgba(10,14,24,.6);border:1px solid rgba(245,245,246,.18);border-radius:999px;
  padding:.5em 1em;font-size:.82rem;color:rgba(245,245,246,.85);backdrop-filter:blur(10px);
}
.dot-live{
  width:8px;height:8px;border-radius:50%;background:var(--online);display:inline-block;flex:none;
  box-shadow:0 0 0 0 var(--online-soft);
  animation:pulseDot 2.4s ease-out infinite -1.1s;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(61,219,130,.55)}
  70%{box-shadow:0 0 0 10px rgba(61,219,130,0)}
  100%{box-shadow:0 0 0 0 rgba(61,219,130,0)}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:10px;font-weight:600;font-size:.95rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#ffffff;box-shadow:0 10px 30px -8px rgba(237,81,69,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(237,81,69,.65)}
/* Only used in the hero, which stays fixed dark, so this stays fixed light. */
.btn-ghost{border-color:rgba(245,245,246,.32);color:#f5f5f6}
.btn-ghost:hover{border-color:#ed5145;background:rgba(237,81,69,.14);transform:translateY(-2px)}
.btn-cta{background:var(--surface-2);border-color:var(--line-strong);color:var(--text);font-size:.88rem;padding:.65em 1.2em}
.btn-cta:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{width:100%}

/* ===== header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1500;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-soft), border-color .4s var(--ease-soft), backdrop-filter .4s var(--ease-soft), height .3s var(--ease-soft);
}
.site-header.scrolled{
  background:var(--header-solid-bg);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  height:64px;
}
.header-inner{
  width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:2rem;
}
.brand{display:flex;align-items:center;gap:.6em;flex:none}
/* The logo file is the mark on a transparent background (no card color to
   match per theme), so one asset now works everywhere. */
.brand-mark{display:inline-flex;filter:drop-shadow(0 0 6px rgba(237,81,69,.35))}
.brand-logo{display:block;height:34px;width:auto}
.brand-logo-footer{height:26px}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.brand-text em{display:block;font-style:normal;font-size:.56rem;letter-spacing:.22em;color:var(--text-dim);font-weight:500}

.main-nav{display:flex;gap:1.8rem;margin-left:1rem;flex:1}
.main-nav a{font-size:.92rem;color:var(--text-dim);position:relative;padding:.3em 0;transition:color .25s var(--ease-soft)}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--accent);transition:right .3s var(--ease)}
.main-nav a:hover{color:var(--text)}
.main-nav a:hover::after{right:0}

.header-actions{display:flex;align-items:center;gap:.6rem;flex:none}
.icon-btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.55em 1em;border-radius:9px;border:1px solid var(--line);
  color:var(--text-dim);font-size:.85rem;font-weight:600;
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft), background .25s var(--ease-soft);
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.icon-btn svg{flex:none}

.header-divider{width:1px;height:22px;background:currentColor;opacity:.2;flex:none}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft), background .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:rotate(-12deg)}
.theme-toggle svg{flex:none}
.theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}

.login-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--text-dim);
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft), background .25s var(--ease-soft);
}
.login-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.login-btn svg{flex:none}

.lang-toggle{
  position:relative;display:inline-flex;align-items:center;flex:none;
  width:60px;height:32px;border-radius:999px;border:1px solid var(--line);padding:2px;
  transition:border-color .25s var(--ease-soft);
}
.lang-toggle:hover{border-color:var(--accent)}
.lang-thumb{
  position:absolute;top:1px;left:1px;width:28px;height:26px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transition:transform .35s var(--ease);
}
:root[lang="es"] .lang-thumb{transform:translateX(28px)}
.lang-opt{
  position:relative;z-index:1;flex:1;text-align:center;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.03em;
  opacity:.5;transition:opacity .3s var(--ease-soft),color .3s var(--ease-soft);
  color:#ffffff;
}
:root:not([lang="es"]) .lang-opt.en{opacity:1}
:root[lang="es"] .lang-opt.es{opacity:1}
:root:not([lang="es"]) .lang-opt.es,:root[lang="es"] .lang-opt.en{color:inherit}

.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.menu-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:99;
  background:rgba(7,11,20,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(245,245,246,.12);
  padding:1.2rem clamp(1rem,5vw,2rem) 1.6rem;
  flex-direction:column;gap:1rem;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-nav a{font-size:1rem;color:rgba(245,245,246,.78);padding:.4em 0}
.mobile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.6rem;padding-top:1rem;border-top:1px solid rgba(245,245,246,.12)}
/* .mobile-nav has its own permanent dark backdrop regardless of site theme,
   same reasoning as the unscrolled header above. */
.mobile-nav .icon-btn{color:rgba(245,245,246,.85);border-color:rgba(245,245,246,.22)}
.mobile-nav .btn-cta{background:rgba(255,255,255,.08);border-color:rgba(245,245,246,.24);color:#f5f5f6}
.mobile-nav .theme-toggle,.mobile-nav .lang-toggle,.mobile-nav .login-btn{border-color:rgba(245,245,246,.22);color:#f5f5f6}

/* The header sits on top of the hero's own fixed dark scene at the top of
   the page, so its unscrolled state stays light regardless of the site
   theme. Once scrolled past the hero, the solid bar switches to the
   theme's own tokens. */
.site-header{color:#f5f5f6}
.site-header .main-nav a{color:rgba(245,245,246,.7)}
.site-header .main-nav a:hover{color:#fff}
.site-header .icon-btn{color:rgba(245,245,246,.88);border-color:rgba(245,245,246,.22)}
.site-header .btn-cta{background:rgba(255,255,255,.08);border-color:rgba(245,245,246,.24);color:#f5f5f6}
.site-header .brand-text em{color:rgba(245,245,246,.62)}
.site-header .menu-toggle span{background:#f5f5f6}
.site-header .theme-toggle,.site-header .lang-toggle,.site-header .login-btn{border-color:rgba(245,245,246,.22);color:#f5f5f6}

.site-header.scrolled{color:var(--text)}
.site-header.scrolled .main-nav a{color:var(--text-dim)}
.site-header.scrolled .main-nav a:hover{color:var(--text)}
.site-header.scrolled .icon-btn{color:var(--text-dim);border-color:var(--line)}
.site-header.scrolled .btn-cta{background:var(--surface-2);border-color:var(--line-strong);color:var(--text)}
.site-header.scrolled .brand-text em{color:var(--text-dim)}
.site-header.scrolled .menu-toggle span{background:var(--text)}
.site-header.scrolled .theme-toggle,.site-header.scrolled .lang-toggle,.site-header.scrolled .login-btn{border-color:var(--line);color:var(--text-dim)}

/* Light theme is the one exception to "unscrolled header stays fixed
   light": with a light theme active, a header that still reads as pure
   white-on-transparent gives no feedback that the toggle did anything
   until the visitor scrolls past the hero. So in light theme only, the
   unscrolled header gets its own translucent light glass and dark text,
   visible immediately at the top of the page. Dark theme's unscrolled
   look (transparent, light text) is untouched. */
:root[data-theme="light"] .site-header:not(.scrolled){
  background:rgba(244,246,251,.55);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid rgba(23,24,26,.08);
  color:#17181a;
}
:root[data-theme="light"] .site-header:not(.scrolled) .main-nav a{color:rgba(23,24,26,.72)}
:root[data-theme="light"] .site-header:not(.scrolled) .main-nav a:hover{color:#17181a}
:root[data-theme="light"] .site-header:not(.scrolled) .icon-btn{color:rgba(23,24,26,.85);border-color:rgba(23,24,26,.18)}
:root[data-theme="light"] .site-header:not(.scrolled) .btn-cta{background:rgba(23,24,26,.06);border-color:rgba(23,24,26,.2);color:#17181a}
:root[data-theme="light"] .site-header:not(.scrolled) .brand-text em{color:rgba(23,24,26,.6)}
:root[data-theme="light"] .site-header:not(.scrolled) .menu-toggle span{background:#17181a}
:root[data-theme="light"] .site-header:not(.scrolled) .theme-toggle,
:root[data-theme="light"] .site-header:not(.scrolled) .lang-toggle,
:root[data-theme="light"] .site-header:not(.scrolled) .login-btn{border-color:rgba(23,24,26,.18);color:#17181a}

@media (max-width:920px){
  .main-nav{display:none}
  .header-actions{display:none}
  .menu-toggle{display:flex}
  .mobile-nav{display:flex}
}

/* ===== hero ===== */
.hero{
  position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding-top:var(--header-h);
  isolation:isolate;
  background:#101011; /* fixed, so the particle field always has a dark
    backdrop to read against, regardless of the site's light/dark theme */
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 45%, rgba(7,11,20,0) 30%, rgba(7,11,20,.82) 100%),
             linear-gradient(rgba(7,11,20,.35), rgba(7,11,20,.75) 85%);
}

.hero-holo{
  position:absolute;left:50%;top:52%;z-index:1;
  width:min(520px,60vw);height:min(520px,60vw);
  transform:translate(-50%,-50%);
  perspective:900px;pointer-events:none;
  opacity:.85;
}
.holo-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(237,81,69,.5);
  box-shadow:0 0 40px rgba(237,81,69,.15) inset;
  transform-style:preserve-3d;
}
.holo-ring.r1{animation:spinX 14s linear infinite}
.holo-ring.r2{inset:10%;border-color:rgba(178,61,52,.55);animation:spinY 18s linear infinite reverse}
.holo-ring.r3{inset:20%;border-color:rgba(237,81,69,.35);animation:spinX 22s linear infinite}
@keyframes spinX{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes spinY{from{transform:rotateX(72deg) rotateY(0)}to{transform:rotateX(72deg) rotateY(360deg)}}
.holo-core{
  position:absolute;inset:38%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(237,81,69,.9), rgba(178,61,52,.5) 55%, transparent 78%);
  filter:blur(2px);
  animation:corepulse 4.5s ease-in-out infinite -1.6s;
}
@keyframes corepulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.holo-scan{
  position:absolute;left:0;right:0;height:2px;top:10%;
  background:linear-gradient(90deg,transparent,rgba(237,81,69,.9),transparent);
  filter:drop-shadow(0 0 8px rgba(237,81,69,.8));
  animation:scan 3.6s linear infinite -1.2s;
}
@keyframes scan{0%{top:6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:94%;opacity:0}}

.hero-content{position:relative;z-index:2;width:100%;max-width:1180px;padding:0 1.5rem;text-align:center}
.eyebrow{margin:0 auto 1.6rem}

/* The hero is a fixed dark scene regardless of the site theme (see the
   header comment above), so its type stays fixed light/cyan rather than
   riding the theme tokens. */
.hero-title{
  font-size:clamp(2.1rem,5.4vw,4.2rem);color:#f5f5f6;
  text-shadow:0 1px 2px rgba(3,5,10,.9), 0 8px 30px rgba(3,5,10,.55);
}
.hero-title .w{display:inline-block;opacity:0;transform:translateY(18px);filter:blur(6px);
  animation:wordIn .8s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms + .15s)}
.hero-title .accent{background:linear-gradient(120deg,#ed5145,#b23d34);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes wordIn{to{opacity:1;transform:translateY(0);filter:blur(0)}}

.hero-sub{
  margin:1.6rem auto 0;max-width:56ch;color:rgba(245,245,246,.78);font-size:1.1rem;
  text-shadow:0 1px 2px rgba(3,5,10,.9), 0 8px 30px rgba(3,5,10,.55);
}
.hero-cta-row{display:flex;gap:1rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap}

.scroll-cue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
  color:rgba(245,245,246,.8);opacity:.8;
  animation:cuebounce 2.2s ease-in-out infinite;
}
@keyframes cuebounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===== client marquee ===== */
.clients{padding:4.5rem 0 3.5rem;text-align:center}
.clients .section-kicker{text-align:center}
.marquee{
  overflow:hidden;position:relative;margin-top:1.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 46s linear infinite;
}
/* Spacing lives on each chip's own margin, not the track's flex `gap`.
   With `gap`, translateX(-50%) lands half a gap short of the real seam
   between the two duplicated halves (the math: N items need N/2 gaps of
   shift, but 50% of the track only contains (N-1)/2 gaps), which shows up
   as a small stutter once per loop right at the wrap. Baking the spacing
   into margin-right instead makes each half's width divide evenly, so the
   loop point is exact and the marquee never hitches. */
.logo-chip{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:150px;height:76px;border-radius:12px;background:#fff;
  padding:.9rem 1.3rem;opacity:.88;margin-right:clamp(2rem,5vw,4rem);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
  transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft);
}
.logo-chip img{max-width:100%;max-height:100%;object-fit:contain}
.logo-chip:hover{opacity:1;transform:translateY(-3px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clients-disclaimer{
  max-width:90ch;margin:2rem auto 0;padding:0 1.5rem;
  font-size:.78rem;color:var(--text-mute);line-height:1.6;
}

/* ===== stats ===== */
.stats{padding:2rem 0 5rem}
.stats-grid{
  max-width:1200px;margin:0 auto;padding:0 1.5rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
}
.stat-card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:16px;padding:2rem 1.4rem;text-align:center;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.stat-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.stat-icon{
  height:2rem;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:.6rem;color:var(--accent);
}
.stat-value{
  min-height:4.6rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;color:var(--text);
}
/* The stars sit in the icon slot (same box every card's icon uses) and the
   "5" is the lone value, so this card lines up with the other three
   exactly instead of needing its own two-line layout. */
.stat-icon.stars{color:#ffd166;font-size:1.4rem;letter-spacing:.15em;text-shadow:0 0 16px rgba(255,209,102,.4)}
.counter-wrap{display:inline-block;overflow:hidden;vertical-align:bottom}
.counter.slide-in{animation:counterSlide .6s var(--ease)}
@keyframes counterSlide{
  from{transform:translateX(-60%);opacity:0}
  to{transform:translateX(0);opacity:1}
}
.unit{font-size:.55em;color:var(--text-dim);margin-left:.15em}
.stat-label{margin-top:.7rem;color:var(--text-dim);font-size:.88rem}
.live-tag{
  display:inline-block;margin-left:.4em;font-family:var(--font-mono);font-size:.66rem;
  color:var(--online);background:var(--online-soft);border-radius:999px;padding:.15em .55em;letter-spacing:.06em;
}

@media (max-width:820px){ .stats-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .stats-grid{grid-template-columns:1fr} }

/* ===== services carousel ===== */
.services{padding:5rem 0 5.5rem;max-width:1320px;margin:0 auto}
.services .section-head{padding:0 1.5rem}

.services-carousel{display:flex;align-items:center;gap:.75rem;padding:0 1.5rem}
.carousel-arrow{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--text-dim);background:var(--surface);
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft), background .25s var(--ease-soft), transform .2s var(--ease-soft), opacity .25s var(--ease-soft);
}
.carousel-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:scale(1.06)}
.carousel-arrow:disabled{opacity:.35;cursor:default}

.services-viewport{flex:1;min-width:0;overflow:hidden}
.services-track{
  display:flex;gap:1.25rem;
  transition:transform .55s var(--ease);
}

.svc-card{
  flex-grow:0;flex-shrink:0;flex-basis:clamp(230px, 23vw, 288px);
  min-height:620px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  opacity:.4;transform:scale(.94);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .3s var(--ease-soft);
}
.svc-card.in{opacity:1;transform:scale(1)}
.svc-card:hover{border-color:var(--line-strong)}
.svc-media{height:224px;overflow:hidden;background:var(--surface-2)}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.svc-card:hover .svc-media img{transform:scale(1.05)}
.svc-body{padding:1.8rem 1.4rem 2rem;display:flex;flex-direction:column;flex:1}
.svc-kicker{font-size:.82rem;color:var(--text-dim);margin-bottom:.4rem}
.svc-title{font-family:var(--font-display);font-size:1.28rem;line-height:1.25;margin-bottom:.9rem}
/* flex:1 on the description (not the card padding) is what pushes the
   button down to the card's bottom edge, so every card's CTA lines up on
   the same baseline regardless of how much description text it has. */
.svc-desc{color:var(--text-dim);font-size:.9rem;flex:1;margin-bottom:1.8rem}
.svc-cta{align-self:flex-start;padding:.7em 1.4em;font-size:.88rem}

.carousel-dots{display:flex;justify-content:center;gap:.5rem;margin-top:2rem}
.dot{
  width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none;
  transition:background .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.dot:hover{background:var(--text-dim)}
.dot.active{background:var(--accent);transform:scale(1.2)}

@media (max-width:640px){
  .services-carousel{gap:.4rem}
  .carousel-arrow{width:38px;height:38px}
  .svc-card{flex-basis:78vw}
}

/* ===== coverage / map ===== */
.coverage{padding:5rem 1.5rem;max-width:1320px;margin:0 auto}
/* z-index:0 gives the map its own stacking context, so Leaflet's internal
   z-index:1000 controls and panes can never climb above the fixed header. */
.map-wrap{position:relative;z-index:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.coverage-map{width:100%;height:min(560px,70vh);background:var(--surface)}
.map-legend{position:absolute;left:16px;bottom:16px;z-index:500}
.leaflet-popup-content-wrapper{background:#18181a;color:var(--text);border-radius:10px;border:1px solid var(--line)}
.leaflet-popup-tip{background:#18181a}
.leaflet-popup-content{font-family:var(--font-body);font-size:.85rem}
.wifi-marker{display:flex;align-items:center;justify-content:center}
.wifi-pin{position:relative;width:22px;height:22px}
.wifi-pin .ping{position:absolute;inset:0;border-radius:50%;background:rgba(61,219,130,.5);animation:wifiping 2.4s ease-out infinite}
.wifi-pin .dot{position:absolute;inset:5px;border-radius:50%;background:var(--online);box-shadow:0 0 10px rgba(61,219,130,.9)}
@keyframes wifiping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* ===== about ===== */
.about{
  padding:5rem 1.5rem;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:start;
}
.about-copy p{color:var(--text-dim);margin-top:1.1rem}
.about-copy h2{margin-top:.4rem;font-size:clamp(1.6rem,3vw,2.2rem)}
.about-cta{margin-top:1.8rem}
.reasons-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.reason-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.5rem;
  transition:border-color .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.reason-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.reason-icon{font-size:1.4rem}
.reason-card h3{font-size:1.02rem;margin:.7rem 0 .4rem}
.reason-card p{color:var(--text-dim);font-size:.88rem}

@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .reasons-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .reasons-grid{grid-template-columns:1fr} }

/* ===== contact ===== */
.contact{
  padding:5rem 1.5rem 6rem;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:start;
}
.contact h2{margin-top:.4rem;font-size:clamp(1.6rem,3vw,2.2rem)}
.contact-list{margin-top:1.8rem;display:flex;flex-direction:column;gap:1rem}
.contact-list li{display:flex;align-items:center;gap:.8em;color:var(--text-dim)}
.contact-icon{color:var(--accent);flex:none;display:inline-flex}
.contact-list a:hover{color:var(--text)}
.social-row{display:flex;gap:.7rem;margin-top:1.8rem}
.social-btn{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--text-dim);
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.social-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.social-note{margin-top:.7rem;font-size:.76rem;color:var(--text-mute)}

.contact-form{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:2rem;
  display:flex;flex-direction:column;gap:1.1rem;
}
.form-row{display:flex;flex-direction:column;gap:.45rem}
.form-row label{font-size:.82rem;color:var(--text-dim)}
.form-row input,.form-row select,.form-row textarea{
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:.75em .9em;
  color:var(--text);transition:border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none;
}
.form-row textarea{resize:vertical;min-height:100px}
.form-note{font-size:.76rem;color:var(--text-mute)}
.form-success{
  background:var(--online-soft);border:1px solid rgba(61,219,130,.4);color:#d6f5e0;
  border-radius:10px;padding:.9em 1em;font-size:.88rem;
}

@media (max-width:920px){ .contact{grid-template-columns:1fr} }

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line);padding:2.8rem 1.5rem 1.6rem}
.footer-inner{
  max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
}
.footer-inner nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer-inner nav a{color:var(--text-dim);font-size:.9rem}
.footer-inner nav a:hover{color:var(--text)}
.footer-copy{color:var(--text-mute);font-size:.85rem}
.footer-fine{
  max-width:1320px;margin:1.6rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--text-mute);font-size:.74rem;text-align:center;
}

/* ===== scroll-reveal (generic) ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .bg-field{animation:none}
  .hero-title .w{opacity:1;transform:none;filter:none}
  .svc-card, .reveal{opacity:1;transform:none}
  .services-track{transition:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ===== touch targets ===== */
@media (pointer:coarse){
  .btn,.icon-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .social-btn{min-width:44px;min-height:44px}
  .menu-toggle{min-width:44px;min-height:44px;justify-content:center;align-items:center}
  .skip-link{min-height:44px;display:inline-flex;align-items:center}
}