:root{
  --bg:#0b1320; --paper:#0e172a; --card:#0f1b33;
  --ink:#e6eef8; --muted:#a8b3c7;
  --brand:#6ad0e3; --brand-2:#00b3c7;
  --ring: rgba(106,208,227,.35);
  --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
  --shadow: 0 18px 40px rgba(2,6,23,.35);

  /* header sizing vars (easy to tweak) */
  --logo-mobile: 77px;     /* phones */
  --logo-desktop: 84px;    /* ≥992px */
  --nav-font-sm: 1rem;     /* phones */
  --nav-font-lg: 1.16rem;  /* desktop */
  --nav-pad-y-sm: .6rem;
  --nav-pad-y-lg: 1.85rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#0a0f1c 20%, #0b1222 60%);
  color:var(--ink);
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container-narrow{max-width:1100px; margin:auto; padding:0 1rem}

/* Reserve space for async header include (prevents jump/flash) */
[data-include="header"]{
  display:block; min-height:74px; background:transparent;
}

/* Header */
.pw-header{
  backdrop-filter:saturate(120%) blur(10px);
  background:rgba(6,10,22,.45);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-top: env(safe-area-inset-top);
}
.navbar-brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.navbar-brand img.logo{
  width:42px; height:42px; border-radius:999px; border:2px solid rgba(255,255,255,.35);
  background:#000;
}
.navbar .nav-link{ color:var(--ink) !important; opacity:.9}
.navbar .nav-link.active{ color:#fff !important }
.navbar .btn-cta{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#031016; border:0; font-weight:700; padding:.55rem .9rem; border-radius:999px;
  box-shadow:0 8px 22px rgba(0, 179, 199, .3);
}
.navbar .btn-cta:hover{filter:brightness(1.08)}

/* Language pill */
.lang-pill{display:flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:var(--ink)}
.lang-pill .dot{width:8px;height:8px;border-radius:999px;background:var(--brand)}

/* Footer */
footer{ margin-top:5rem; padding:2.2rem 0; background:rgba(6,10,22,.55);
  border-top:1px solid rgba(255,255,255,.06)}
footer .brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
footer .brand img{width:36px; height:36px; border-radius:999px; border:2px solid rgba(255,255,255,.35)}
.badge-soft{ background:rgba(106,208,227,.12); color:#9be6f3; border:1px solid rgba(106,208,227,.25);
  padding:.35rem .55rem; border-radius:999px; font-weight:600; font-size:.8rem}

/* Layout helpers */
.section{ padding: clamp(48px, 7vw, 96px) 0 }
.h1-hero{ font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:0 0 .8rem 0 }
.lead{ font-size:clamp(16px,2.6vw,20px); color:var(--muted) }
.card-glass{
  background:linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);
  box-shadow: var(--shadow);
}
.shadow-ring{ box-shadow: 0 0 0 10px rgba(106,208,227,.06) }

/* ===== Contrast fixes ===== */
h1,h2,h3,h4,h5,h6 { color: var(--ink) }
.text-soft { color: var(--muted) }
.card-glass, .card-glass * { color: inherit }
.btn-outline-light { color: #e8f6fb; border-color: rgba(255,255,255,.35) }
.btn-outline-light:hover { color:#031016; background:#e8f6fb; border-color:#e8f6fb }

/* ===== Hamburger icon (always white) ===== */
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.98)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1.5em; height: 1.5em;
}

/* ===== Responsive header behavior ===== */
@media (max-width: 576px) {
  .pw-header .navbar{
    min-height: 72px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 10px;
  }
  .navbar.position-relative { position: relative; padding-right: 3.25rem; }
  .navbar-brand .brand-text { display: none; } /* logo-only on phones */
  .brand-center{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .navbar-toggler{
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }
}
/* Bigger header logo on phones */
@media (max-width: 576px){
  .navbar-brand img.logo{
    width: 56px;
    height: 56px;
  }
  .pw-header .navbar{
    min-height: 84px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: 12px;
  }
  .navbar.position-relative{ padding-right: 3.5rem; }
}

/* Floating WhatsApp button (mobile only) */
#wa-fab{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 10px 30px rgba(18,140,126,.45);
  z-index: 1040;
  border: 1px solid rgba(255,255,255,.18);
}
#wa-fab:hover { transform: translateY(-2px); }
#wa-fab:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(18,140,126,.5); }
#wa-fab svg { display: block; }
@media (max-width: 768px){
  #wa-fab{ display: grid; }
}

/* ===== Enhanced footer ===== */
.footer-cta img{ width:44px; height:44px; object-fit:cover }
.footer-title{ font-weight:800; margin-bottom:.4rem }
.footer-links{ list-style:none; margin:0; padding:0 }
.footer-links li{ margin:.25rem 0; color:var(--ink) }
.footer-links a{ color:var(--ink); text-decoration:none }
.footer-links a:hover{ text-decoration:underline }
.footer-sep{
  border:0; height:1px; width:100%; background:rgba(255,255,255,.08);
  margin: 1rem 0 0;
}
.social-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  color:#0b272c; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 22px rgba(0,179,199,.25);
}
.social-btn:hover{ filter:brightness(1.05) }
footer .brand{ display:flex; align-items:center; gap:.6rem; font-weight:700 }
footer .brand img{
  width:36px; height:36px; border-radius:999px;
  border:2px solid rgba(255,255,255,.35); background:#000;
}
@media (max-width:576px){
  .footer-cta{ padding:14px !important }
}
footer .text-muted { color: var(--ink) !important; opacity: .95; }

/* ===== GLOBAL: Hide header/offcanvas instantly on real navigation ===== */
html.nav-leave [data-include="header"],
html.nav-leave .navbar-collapse,
html.nav-leave .offcanvas,
html.nav-leave .offcanvas-backdrop,
html.nav-leave .mobile-nav{
  visibility:hidden !important; display:none !important;
}
html.nav-leave body{ pointer-events:none }

/* =========================================================
   === Header size tuning (overrides) ======================
   =======================================================*/
.pw-header .navbar{
  padding-block: .7rem;         /* phones default */
}
.navbar-brand .brand-text{
  font-size: 1.06rem;
  line-height: 1;
  margin-left: .45rem;
}

/* default logo size on small/medium screens before lg breakpoint */
.navbar-brand img.logo{
  width: 52px;
  height: 52px;
}

/* nav links larger + bigger click target */
.navbar-nav .nav-link{
  font-size: var(--nav-font-sm);
  padding-block: var(--nav-pad-y-sm);
  padding-inline: .7rem;
}

/* language pill & CTA slightly larger by default */
.lang-pill{ padding:.4rem .7rem; font-size:.92rem }
.btn-cta.btn-sm{ padding:.55rem 1rem; font-size:.98rem; border-radius:.7rem }

/* Desktop (≥992px) */
@media (min-width: 992px){
  .pw-header .navbar{
    padding-block: 1rem;        /* thicker desktop header */
  }
  .navbar-brand img.logo{
    width: var(--logo-desktop);
    height: var(--logo-desktop);
  }
  .navbar-brand .brand-text{
    font-size: 1.2rem;
  }
  .navbar-nav .nav-link{
    font-size: var(--nav-font-lg);
    padding-block: var(--nav-pad-y-lg);
    padding-inline: .9rem;
  }
  .btn-cta.btn-sm{ padding:.65rem 1.15rem; font-size:1rem }
}

/* Phones (≤576px) — enforce larger logo using vars */
@media (max-width: 576px){
  .navbar-brand img.logo{
    width: var(--logo-mobile);
    height: var(--logo-mobile);
  }
  .pw-header .navbar{
    min-height: calc(var(--logo-mobile) + 28px);
  }
}