/* === GATE INDIPENDENT WOW skin (navy / gold / light gray) === */
:root{
  --navy:#093264;
  --navy2:#153869;
  --sky:#79ACCA;
  --gold:#BD9840;
  --gold2:#C9A54A;
  --ink:#0B1B2A;
  --muted:rgba(11,27,42,.72);
  --bg:#FFFFFF;
  --bg2:#F4F6F9;
  --line:rgba(9,50,100,.14);
  --shadow:0 18px 44px rgba(11,27,42,.10);
  --radius:20px;
}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
.container{width:min(1180px,92%);margin:0 auto}
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}
.top-ribbon{background:linear-gradient(90deg,var(--navy) 0%, var(--navy2) 100%);color:#fff;font-size:12.5px}
.ribbon-inner{display:flex;align-items:center;gap:10px;padding:10px 0;opacity:.93;flex-wrap:wrap}
.ribbon-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(189,152,64,.22)}
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.header{
  background: var(--bg2);              /* light gray */
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:14px;font-size:13px}
.nav a{padding:9px 10px;border-radius:12px}
.nav a:hover{background:rgba(9,50,100,.06)}
.nav a.active{background:rgba(121,172,202,.18);border:1px solid rgba(121,172,202,.35)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer}
.nav-toggle span{display:block;height:2px;width:18px;margin:5px auto;background:var(--navy);border-radius:2px}
.mobile-nav{display:none;padding:10px 0 18px;border-top:1px solid var(--line)}
.mobile-nav a{display:block;padding:12px 4%;border-bottom:1px solid rgba(9,50,100,.07)}
.mobile-nav a.btn{margin:12px 4% 0;width:92%}
@media (max-width: 860px){.nav{display:none}.nav-toggle{display:inline-block}}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;background:linear-gradient(180deg,var(--navy) 0%, var(--navy2) 100%);color:#fff;font-weight:800;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 24px rgba(9,50,100,.20)}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid rgba(9,50,100,.20);box-shadow:none}
.section{padding:74px 0}
.section.alt{background:var(--bg2);border-top:1px solid rgba(9,50,100,.06);border-bottom:1px solid rgba(9,50,100,.06)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width: 980px){.grid-3,.grid-2{grid-template-columns:1fr}.section{padding:58px 0}}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(9,50,100,.85)}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.gold-line{height:2px;width:88px;background:linear-gradient(90deg,var(--gold) 0%, rgba(189,152,64,.10) 100%);border-radius:2px}
.hero{position:relative;overflow:hidden;padding:78px 0 56px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(900px 440px at 16% 18%, rgba(121,172,202,.26), transparent 60%),radial-gradient(840px 420px at 82% 18%, rgba(189,152,64,.16), transparent 60%),linear-gradient(180deg, rgba(9,50,100,.06), transparent 55%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(to right, rgba(9,50,100,.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(9,50,100,.06) 1px, transparent 1px);background-size:64px 64px;opacity:.28}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.hero h1{margin:10px 0 14px 0;font-size:46px;line-height:1.05;letter-spacing:-.02em;}
/* HERO: H1 bianco + leggibilità */
.hero h1{
  color:#fff;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.hero p.lead{margin:0;color:var(--muted);font-size:16.5px;max-width:62ch}
/* HERO: sottotitolo (lead) bianco */
.hero p.lead{
  color: rgba(255,255,255,.85);
}
.hero .kicker{
  color: rgba(255,255,255,.80);
}
.hero p.lead, .hero .kicker{
  text-shadow: 0 10px 24px rgba(0,0,0,.25);
}
@media (max-width: 980px){.hero-inner{grid-template-columns:1fr}.hero h1{font-size:38px}}
.hero-card{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.hero-card ul{margin:0;padding-left:18px;color:rgba(11,27,42,.75);font-size:13.5px}
.hero-card li{margin:8px 0}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.metric{background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 12px 20px rgba(11,27,42,.06)}
.metric strong{display:block;color:var(--navy);font-weight:900;margin-bottom:4px}
.metric span{font-size:12.5px;color:rgba(11,27,42,.72)}
@media (max-width: 980px){.metrics{grid-template-columns:1fr}}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{font-size:12px;padding:8px 10px;border-radius:999px;background:rgba(121,172,202,.18);border:1px solid rgba(121,172,202,.34);color:rgba(9,50,100,.95);font-weight:700}
.pill.outline{background:rgba(255,255,255,.7);border:1px solid rgba(9,50,100,.16);color:rgba(9,50,100,.90)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:26px;margin:10px 0;color:rgba(11,27,42,.78);font-size:13.5px}
.checklist li:before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:6px;border:1px solid rgba(189,152,64,.55);background:rgba(189,152,64,.18);box-shadow: inset 0 0 0 2px rgba(255,255,255,.85)}
.cta-strip{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;border-radius:var(--radius);border:1px solid rgba(189,152,64,.35);background:linear-gradient(135deg, rgba(121,172,202,.20), rgba(255,255,255,.78))}
@media (max-width: 860px){.cta-strip{flex-direction:column;align-items:flex-start}}
.page-hero{padding:52px 0 26px;background:radial-gradient(900px 420px at 15% 10%, rgba(121,172,202,.22), transparent 60%),radial-gradient(800px 420px at 85% 10%, rgba(189,152,64,.14), transparent 62%),linear-gradient(180deg, rgba(9,50,100,.06), transparent 60%);border-bottom:1px solid rgba(9,50,100,.08)}
.page-hero h1{margin:0 0 10px 0;font-size:36px;letter-spacing:-.02em;line-height:1.1}
.breadcrumb{margin-top:10px;font-size:12.5px;color:rgba(11,27,42,.65)}
.breadcrumb a{color:rgba(9,50,100,.88);font-weight:800}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:16px}
@media (max-width: 980px){.contact-grid{grid-template-columns:1fr}}
.form label{display:block;font-size:13px;font-weight:800;color:rgba(11,27,42,.78);margin-top:12px}
input,select,textarea{width:100%;margin-top:6px;padding:12px 12px;border-radius:14px;border:1px solid rgba(9,50,100,.18);outline:none;font:inherit;background:rgba(255,255,255,.96)}
input:focus,select:focus,textarea:focus{border-color:rgba(189,152,64,.78);box-shadow:0 0 0 4px rgba(189,152,64,.18)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 760px){.form-row{grid-template-columns:1fr}}
.footer{background:linear-gradient(180deg, #071E38, #061A31);color:rgba(255,255,255,.88);padding:26px 0;border-top:1px solid rgba(189,152,64,.22)}
.footer-inner{display:grid;grid-template-columns: 1fr auto auto;gap:16px;align-items:center}
@media (max-width: 980px){.footer-inner{grid-template-columns:1fr;gap:10px}}
.footer-brand{font-weight:900;letter-spacing:.08em}
.footer-sub{font-size:12.5px;opacity:.86}
.footer-links{display:flex;gap:14px;font-size:13px}
.footer-links a{opacity:.92}
.footer-links a:hover{opacity:1;text-decoration:underline}
.footer-legal{display:flex;gap:10px;align-items:center;font-size:12px;opacity:.82;flex-wrap:wrap}
.footer-legal .dot{opacity:.5}
/* ===== HEADER: fascia superiore tutta blu (logo + menu) ===== */
.top-ribbon{
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy2) 100%);
}

.header{
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: none; /* toglie effetto vetro */
}

/* Link/menu in bianco */
.header .nav a{
  color:#fff;
}
.header .nav a:hover{
  background: rgba(255,255,255,.10);
}

/* Stato attivo (evidenziato) */
.header .nav a.active{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
}

/* Bottone “Book a call” già blu: lo facciamo gold per WOW */
.header .nav .btn{
  background: linear-gradient(180deg, var(--gold) 0%, rgba(189,152,64,.85) 100%);
  color: #0B1B2A;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 24px rgba(0,0,0,.18);
}

/* Hamburger menu (mobile) visibile su blu */
.nav-toggle{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
}
.nav-toggle span{
  background:#fff;
}
/* HERO background image */
.hero-bg{
  background:
    linear-gradient(180deg, rgba(9,50,100,.55), rgba(9,50,100,.05)),
    url("assets/hero-dubai.jpg");
  background-size: cover;
  background-position: center;
}
/* HERO buttons: stile dedicato */
.hero .btn{
  background: linear-gradient(180deg, var(--gold) 0%, rgba(189,152,64,.88) 100%);
  color: #0B1B2A;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

.hero .btn-ghost{
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: none;
}
.hero .btn-ghost:hover{
  background: rgba(255,255,255,.18);
}
/* Rende la prima pill uguale alle outline */
.pills .pill:first-child{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(9,50,100,.16);
  color: rgba(9,50,100,.90);
}
/* === STICKY BAR ~70% HEIGHT === */

/* Top ribbon: da 10px a ~7px */
.ribbon-inner{
  padding: 8px 0;          /* prima 10px 0 */
}

/* Header: da 14px a ~10px */
.header-inner{
  padding: 12px 0;         /* prima 14px 0 */
}

/* Logo: più compatto ma ancora “premium” */
.brand img{
  max-height: 52px;        /* circa 70% visivo */
  width: auto !important;
}
/* ===== FIX MENU MOBILE iPhone: leggibilità e pannello ===== */
@media (max-width: 860px){

  .mobile-nav{
    background: rgba(9,50,100,.96);
    border-top: 1px solid rgba(255,255,255,.14);
  }

  .mobile-nav a{
    color: #fff !important;
    font-weight: 700;
    font-size: 18px;
    padding: 16px 6%;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .mobile-nav a:active{
    background: rgba(255,255,255,.08);
  }

  .mobile-nav a.btn{
    margin: 14px 6% 16px;
    width: auto;
    background: linear-gradient(180deg, #BD9840 0%, rgba(189,152,64,.88) 100%);
    color: #0B1B2A !important;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 14px 24px rgba(0,0,0,.18);
  }
}