:root{
  --bg1:#005281;
  --bg2:#213464;
  --accent:#00c4cc;
  --ink:#003244;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:#fff;background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;}
.container{width:min(1100px,92%);margin:0 auto}
a{color:#fff;text-decoration:none}

/* Header */
.header{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,rgba(0,82,129,.75),rgba(33,52,100,.75));backdrop-filter:saturate(1.2) blur(6px)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand img{height:clamp(34px,5vw,56px);display:block}
.nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.nav a{font-weight:700;opacity:.95}
.nav a:hover{opacity:1}

/* Hero */
.hero{padding:4.5rem 0 2rem}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:.5rem 0 1rem}
.hero .logo-tile{max-width:260px}
.ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.3rem;border-radius:12px;font-weight:800;letter-spacing:.2px}
.btn--primary{background:#005281;color:#fff}
.btn--primary:hover{background:#003d63}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid #e0e6ed}
.btn--ghost:hover{background:#f2f6f9}

/* Device */
.hero .device{display:flex;justify-content:center}
.hero .device img{max-width:clamp(260px, 44vw, 520px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}

/* Sections */
.section{padding:4rem 0;scroll-margin-top:84px}
.section .container{text-align:center}
.section h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin:0 0 1rem}
.section p.lead{opacity:.95;margin:0 auto 1.2rem;max-width:860px}

/* Screens grid */
#screens .screens-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:1.2rem;align-items:center;justify-items:center}
#screens img{max-width:200px;width:100%;height:auto;border:none;border-radius:16px;background:transparent}
@media (max-width:1000px){#screens .screens-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media (max-width:520px){#screens .screens-grid{grid-template-columns:1fr}}

/* Links (hotel) */
#hotel .container{display:flex;justify-content:center}
.links-list{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.link-item{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.2rem;border-radius:12px;background:#005281;color:#fff;font-weight:700}
.link-item:hover{background:#003d63}
.link-item img{width:20px;height:20px;filter:brightness(0) invert(1)}

/* Contact */
.contact{text-align:center;padding:4rem 0}
.contact a{color:#00e6f6;font-weight:800}
.contact a:hover{text-decoration:underline}

/* Footer */
.footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,.1)}
.footer a{opacity:.9}
.footer a:hover{opacity:1}

/* Responsive */
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}.hero .device{order:-1;margin-bottom:1rem}}

/* v14 hero spacing tweak */
.hero{
  padding: 2.2rem 0 1.2rem;
}
.hero .container{}
.hero__grid{gap:1.6rem}
.hero h1{margin:.2rem 0 .8rem}
.ctas{margin-top:.9rem}
@media (min-width:1100px){
  .hero{padding:1.6rem 0 .8rem}
}

/* v15: hero top spacing tuned to the user's reference */
.hero{padding:1.25rem 0 1.25rem;}
@media (min-width:981px){
  .hero__grid{align-items:flex-start;}
}
.hero h1{margin:.15rem 0 .6rem;}
.ctas{margin-top:.7rem;}


/* v16: lift device image for desktop */
@media (min-width: 981px){
  .hero .device img{ 
    margin-top: -2.5rem;
  }
}


/* v17: align phone top with logo block */
@media (min-width: 981px){
  .hero .device img{
    margin-top: -4rem;
  }
}