:root{
  --bg:#ffffff; --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b;
  --line:#e2e8f0; --brand:#0ea5e9; --brand-2:#2563eb; --ok:#059669;

  /* Header sizing vars (fatter to fit larger logo) */
  --header-h:84px;          /* mobile/tablet default */
  --header-pad-y:12px;
  --header-pad-x:16px;

  /* Logo controls (natural aspect, no circle, no border) */
  --logo-w: clamp(72px, 24vw, 120px);
  --logo-h: clamp(36px, 10vw, 60px);
}

#contact { scroll-margin-top: calc(var(--header-h) + 16px); }

*{box-sizing:border-box}
html,body{height:100%}
html, body { width:100%; overflow-x:hidden }
html{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg);
  overflow-wrap:anywhere;
}

img, svg, canvas, video{max-width:100%; height:auto; display:block}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* Header (fixed, fatter) */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:var(--header-pad-y) var(--header-pad-x);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
  inline-size:100%;
  block-size:var(--header-h);
}
.brand{
  display:flex; align-items:center; gap: 12px; text-decoration:none; color:inherit; min-width:0;
}
.brand-title{font-weight:700; white-space:nowrap}
.brand-sub{font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-inline-size:40ch}

/* Logo: natural aspect, bigger, no circle, no border */
.logo{
  flex:0 0 auto;
  object-fit:contain;
  object-position:left center;
  border:none;
  border-radius:0;
  background:transparent;
}

/* Desktop nav */
.nav{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end;
}
.nav a{color:var(--ink-2); text-decoration:none; font-size:14px}
.nav a:hover{color:var(--ink)}
.btn-cta{text-decoration:none; /* no underline */ padding:8px 12px; border-radius:999px; border:1px solid rgba(14,165,233,.35); background:rgba(186,230,253,.35); color:#075985; font-weight:600}

.contact-outline{height: 390px;padding:10px 15px; border-radius:20px; border:1px solid rgba(14,165,233,.35); background:rgba(186,230,253,.35); color:#075985; font-weight:600}

.btn-cta:hover{
  background:rgba(186,230,253,.55);
  transform:translateY(-2px);
  text-decoration:none;
}

/* Floating & transition setup */
.contact-btn{
  position:fixed;
  bottom:8px;
  right:8px;
  z-index:9999;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.1);

  /* start hidden, but with transitions ready */
  opacity:0;
  transform:translateY(6px);
  visibility:hidden;        /* avoid accidental focus */
  pointer-events:none;

  will-change: opacity, transform;
  transition: opacity .5s ease, transform .5s ease;
}

/* Target state */
.contact-btn.is-visible{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}

/* If you have global animations, this isolates paint of the button */
.contact-btn { contain: paint; }

/* Optional */
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  .contact-btn{ transition:none; }
}


/* Burger control (CSS-only) */
.nav-toggle{display:none}
.burger{
  display:none; /* shown on mobile */
  width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
  align-items:center; justify-content:center; cursor:pointer; user-select:none; background:#fff;
  margin-left:auto; flex:0 0 auto;
  position:relative; z-index:60;
}
.burger-bar, .burger-bar::before, .burger-bar::after{
  content:""; display:block; width:22px; height:2px; background:#0f172a; border-radius:2px; position:relative;
  transition:transform .25s ease, opacity .2s ease;
}
.burger-bar::before{ position:absolute; top:-7px; }
.burger-bar::after{ position:absolute; top:7px; }

/* Animate burger to X when open */
.nav-toggle:checked + .burger .burger-bar{ transform:rotate(45deg); }
.nav-toggle:checked + .burger .burger-bar::before{ transform:rotate(90deg); top:0; }
.nav-toggle:checked + .burger .burger-bar::after{ opacity:0; }

/* Sections */
.section{
  min-height:calc(100vh - var(--header-h));
  padding:96px 16px 48px;
  margin-top: 20px;
  align-items:center; position:relative;
  inline-size:100%;
}

.section-90{
  min-height:calc(80vh - var(--header-h));
  padding:96px 16px 48px;
  margin-top: 20px;
  align-items:center; position:relative;
  inline-size:100%;
}
.section-90 h2{
  text-align: center;
  font-size: clamp(24px, 3vw, 36px);
  margin: 8px 0;
}

.hero{ overflow:hidden }
.section > *{z-index:1}

/* Hero */
.hero-inner{
  display:grid; grid-template-columns:1.1fr 1fr; gap:32px;
  max-inline-size:1200px; margin-inline:auto; inline-size:100%;
}
.hero-content h1{
  font-size: clamp(28px, 4vw, 56px); line-height:1.18; margin:16px 0 6px;
}
.grad-text{
  display:inline; background:linear-gradient(90deg,#0891b2,#0284c7,#2563eb);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  padding-bottom:0.12em;
}
.lead{color:var(--ink-2); max-inline-size:60ch}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:2px solid var(--line); background:#fff; color:var(--ink-3); font-size:16px}
.dot{width:6px;height:6px;border-radius:50%;background:#10b981}
.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.btn-dark{background:#0f172a; color:#fff; padding:10px 14px; border-radius:14px; text-decoration:none; font-weight:600}
.btn-outline{border:1px solid var(--line); padding:10px 14px; border-radius:14px; text-decoration:none; color:var(--ink); background:#fff}
.hint{font-size:12px; color:var(--ink-3)}
.hero-visual{display:grid; place-items:center}
#globe{inline-size:min(560px, 84svw); block-size:min(560px, 84svw)}

/* Ambient blobs */
.bg-blob{position:absolute; border-radius:50%; filter: blur(60px); pointer-events:none; z-index:0; contain:paint}
.blob-a{inline-size:700px; block-size:700px; left:50%; top:-120px; transform:translateX(-50%); background:rgba(125,211,252,.26)}
.blob-b{inline-size:320px; block-size:320px; right:0; bottom:20px; background:rgba(165,180,252,.26)}

/* Services */
.section-box{max-inline-size:1200px; margin-inline:auto; inline-size:100%}
.center{text-align:center}
.center h2{font-size: clamp(24px, 3vw, 36px); margin:8px 0}
.muted{color:var(--ink-2)}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:24px}
.card{border:1px solid var(--line); background:#fff; border-radius:20px; padding:18px; box-shadow: 0 4px 10px rgba(2,8,23,.05)}
.card-head{display:flex; align-items:center; gap:10px}
.ic{inline-size:40px; block-size:40px; display:grid; place-items:center; border:1px solid rgba(14,165,233,.35); background:rgba(186,230,253,.35); border-radius:12px; color:#075985; font-size:18px}
.card-desc{color:var(--ink-2); font-size:14px; line-height:1.55; margin-top:8px}
.card-headlines {
  font-size: 16px;
  font-weight: bold;

}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; inline-size:100%;}
.contact-copy{min-width:0}
.form{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:18px;
  box-shadow: 0 4px 10px rgba(2,8,23,.05); display:grid; gap:14px; inline-size:100%;
  height: 390px;
}
label{font-size:14px; color:var(--ink)}
input,textarea{inline-size:100%; margin-top:6px; padding:10px 12px; border-radius:12px; border:1px solid #dbe3ec; outline: none; font:inherit; color:inherit; background:#fff}
input:focus,textarea:focus{border-color:#7dd3fc; box-shadow:0 0 0 3px rgba(125,211,252,.35)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.status{min-height:20px; color:#065f46; font-size:14px}
.fine{font-size:12px; color:#64748b}
.kv{display:grid; gap:6px; margin-top:28px}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:#f8fafc; inline-size:100%}
.foot-grid{
  display:grid; gap:18px;
  grid-template-columns:2fr 2fr 1fr; /* brand | (company+legal) | contact */
  max-inline-size:1200px; margin-inline:auto; padding:24px clamp(12px, 4vw, 20px);
}
.foot-brand{gap:10px; display:flex; align-items:center}
.foot-head{font-weight:600; margin-bottom:8px}
.foot-links{list-style:none; padding:0; margin:0}
.foot-links li{margin:6px 0; color:var(--ink-2); word-break:break-word}
.foot-links a{text-decoration:none; color:var(--ink-2)}
.foot-links a:hover{color:var(--ink)}
.foot-links-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.foot-brand-block, .foot-contact-block{display:flex; flex-direction:column; justify-content:flex-start}
.copyright{border-top:1px solid var(--line); text-align:center; font-size:12px; color:#64748b; padding:10px 0}

/* ---------------------------
   Responsive (burger + layout)
----------------------------*/

/* Tablet ≤ 980px: center hero, one-column cards, show burger */
@media (max-width: 980px){
  .lead { display:none }
  .hero-inner{grid-template-columns:1fr}
  .hero-content{ text-align:center; }
  .lead{ margin-inline:auto; }
  .actions{ justify-content:center; }
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}

  .burger{ display:flex; }

  /* Mobile nav panel (truly hidden when closed) */
  .nav{
    position:fixed;
    top:var(--header-h);
    left:env(safe-area-inset-left);
    right:env(safe-area-inset-right);
    inline-size:auto; max-inline-size:100svw;
    display:flex; flex-direction:column; gap:0;
    background:#fff;
    border:0;                   /* no line when hidden */
    transform:translateY(-8%);  /* small offset (will be hidden via visibility/opacity) */
    transition:opacity .2s ease, transform .25s ease;
    will-change:transform, opacity;
    box-shadow:none;
    z-index:49;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  .nav a{
    padding:14px 16px; border-top:1px solid var(--line); font-size:16px;
  }
  .nav a:first-child{ border-top:0; }

  .nav .btn-cta{
    margin: 10px 16px 16px; text-align:center; border-radius:12px;
  }

  /* Reveal menu when toggled */
  .nav-toggle:checked ~ .nav{
    transform:translateY(0);
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    border-bottom:1px solid var(--line);
    box-shadow: 0 6px 12px rgba(2,8,23,.06);
  }
  .form{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:18px;
  box-shadow: 0 4px 10px rgba(2,8,23,.05); display:grid; gap:14px; inline-size:100%;
  height: auto;
  }
  .contact-outline{height: auto;padding:10px 15px; border-radius:20px; border:1px solid rgba(14,165,233,.35); background:rgba(186,230,253,.35); color:#075985; font-weight:600}
}

/* Mobile ≤ 640px */
@media (max-width: 640px){
  .section{ padding:88px 16px 40px; }
  .hero-content h1{ font-size: clamp(28px, 7vw, 40px); line-height:1.2; }
  .hero-visual{ margin-top:8px; }
  .brand-sub{ display:none; }

  .contact-grid{ grid-template-columns:1fr; gap:16px; }
  .form{ padding:16px; border-radius:16px; }
  .grid2{ grid-template-columns:1fr; gap:12px; }

  .foot-grid{
    grid-template-columns:1fr; gap:16px; padding:20px 16px;
    text-align:center;
  }
  .foot-brand-block, .foot-contact-block{ align-items:center; }
  .foot-links-grid{
    grid-template-columns:1fr 1fr; gap:14px; text-align:center;
  }
  .lead { display:none }
  .pill { display:none }
  .form{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:18px;
  box-shadow: 0 4px 10px rgba(2,8,23,.05); display:grid; gap:14px; inline-size:100%;
  height: auto;
  }
}

/* --------- Desktop enhancements --------- */
@media (min-width: 981px){
  :root{
    --header-h:96px;         /* fatter desktop header */
    --header-pad-y:16px;
    --header-pad-x:24px;
  }

  .brand-title{ font-size:18px; }
  .brand-sub{ font-size:13px; }

  .nav{ gap:22px; }
  .nav a{ font-size:16px;}
  .btn-cta{ padding:10px 14px; }
  
  .contact-outline{height: 390px; padding:10px 15px; border-radius:20px; border:1px solid rgba(14,165,233,.35); background:rgba(186,230,253,.35); color:#075985; font-weight:600}
}

/* Ultra-narrow phones */
@media (max-width: 360px){
  .btn-dark, .btn-outline{ inline-size:100%; text-align:center; }
  .contact-outline{height: auto;padding:10px 15px; border-radius:20px; border:1px solid rgba(14,165,233,.35); background:rgba(186,230,253,.35); color:#075985; font-weight:600}
}

/* --- Page + Globe entrance -------------------- */
body{
  opacity:0;                    /* start hidden */
  transition: opacity 1s ease; /* page fade duration */
}
body.ready{ opacity:1; }

/* Gently stagger most content (optional but nice).
   Add 'page-enter' to big sections that shouldn't pop immediately. */
.page-enter{
  opacity:0;
  transform: translateY(4px);
  transition: opacity .6s ease .15s, transform .6s ease .15s; /* slight delay vs globe */
}
body.ready .page-enter{
  opacity:1;
  transform:none;
}

/* Globe comes in a touch earlier & quicker than the rest */
#globe{
  opacity:0;
  transform: scale(.985);
  transition: opacity .5s ease .0s, transform .6s ease .0s; /* no delay */
}
body.ready #globe{
  opacity:1;
  transform:none;
}

/* Gradient text helpers */
.contact-underline{
  border-bottom: var(--brand) 1.5px solid;
  border-width: 2px;
}

/* Optional: ensure the h2 inherits your normal sizing/weight */
.headline-gradient{
  font-weight: inherit;
}
/* =========================
   Stats section (cards)
========================= */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}

.stat-card{
  position:relative;
  border:1px solid var(--line);
  background:#fff;
  border-radius:20px;
  padding:18px;
  box-shadow:0 4px 10px rgba(2,8,23,.05);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* subtle brand edge glow */
.stat-card::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,#7dd3fc,#60a5fa,#93c5fd);
  opacity:.35;
}

/* hover lift */
.stat-card:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 18px rgba(2,8,23,.08);
  border-color:rgba(14,165,233,.35);
}

/* Head */
.stat-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px;
}
.stat-icon{
  inline-size:40px; block-size:40px;
  display:grid; place-items:center;
  border:1px solid rgba(14,165,233,.35);
  background:rgba(186,230,253,.35);
  border-radius:12px; color:#075985; font-size:18px;
  flex:0 0 auto;
}
.stat-overline{
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}

/* Body: KPI strip */
.stat-body{ display:grid; gap:12px; }

.stat-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.kpi{
  border:1px solid #e6eef7;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius:14px;
  padding:10px 12px;
  text-align:center;
}

.kpi-value{
  font-weight:800;
  font-size: clamp(18px, 3.3vw, 26px);
  line-height:1.1;
}
.kpi-unit{
  font-size:.65em; font-weight:600; color:var(--ink-3); margin-left:2px;
}
.kpi-label{
  margin-top:4px;
  font-size:12px; color:var(--ink-2);
}

/* Cost table tiles */
.cost-grid{ display:grid; gap:8px; }

.cost-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:10px 12px;
  border:1px solid rgba(14,165,233,.25);
  background:rgba(186,230,253,.20);
  border-radius:12px;
}
.cost-tier{
  font-weight:600; color:#075985;
}
.cost-value{
  font-variant-numeric: tabular-nums;
  font-weight:800;
}

/* So-what line */
.stat-so-what{
  margin-top:4px;
  padding-top:10px;
  border-top:1px dashed var(--line);
  color:var(--ink-2);
}
.stat-so-what em{ font-style:normal; font-weight:700; }

/* Footer/source */
.stat-foot{
  margin-top:12px; display:flex; align-items:center; justify-content:space-between;
}
.stat-source{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(14,165,233,.35);
  background:rgba(186,230,253,.30);
  color:#075985; text-decoration:none; font-weight:600; font-size:12px;
  position: absolute;
  left: 16px;
  bottom: 16px;
}
.stat-source:hover{ background:rgba(186,230,253,.42); }
.stat-source-reference{
  color:#075985; text-decoration:none;
}

/* ------------- Responsive tweaks ------------- */
@media (max-width: 980px){
  .stats-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .stat-card{ padding:16px; border-radius:16px; }
  .stat-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .stat-card{ transition:none; }
}

.contact-card {
  position: relative;
  min-height: 260px; /* ensure space for overlay */
}

.contact-card form {
  transition: filter 160ms ease, opacity 160ms ease;
}

.contact-card.is-locked form {
  filter: blur(3px);
  opacity: 0.75;
  pointer-events: none;
}

#form-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

#form-overlay.visible {
  opacity: 1;
  pointer-events: auto; /* capture clicks to prevent interacting underneath */
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(2px);
}

#form-overlay .msg {
  max-width: 36rem;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
}

#form-overlay .msg.ok { border-left: 6px solid #16a34a; }   /* green */
#form-overlay .msg.err { border-left: 6px solid #b91c1c; }   /* red */