:root{
  --bg:#070f1a;
  --bg2:#0b1a2e;
  --card:#0d223c;
  --text:#e9f2ff;
  --muted:#b8c7dc;
  --accent:#00d1ff;
  --accent2:#4aa3ff;
  --line:rgba(255,255,255,.08);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius:18px;
  --max:1150px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,209,255,.22), transparent 60%),
    radial-gradient(1000px 700px at 85% 10%, rgba(74,163,255,.22), transparent 55%),
    linear-gradient(180deg, var(--bg), #050a12 60%, #04070e);
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); padding:0 18px; margin:0 auto}

.topbar{background:rgba(0,0,0,.25); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:10px 0; font-size:14px; color:var(--muted)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04)}
.badge svg{opacity:.9}

header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:rgba(7,15,26,.72); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:44px; height:44px; border-radius:10px}
.brand .name{line-height:1.05}
.brand .name b{font-size:15px; letter-spacing:.3px}
.brand .name small{display:block; color:var(--muted); font-size:12px; margin-top:2px}

nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0}
nav a{color:var(--muted); font-weight:600; font-size:14px; padding:10px 10px; border-radius:12px}
nav a.active, nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text); font-weight:800; letter-spacing:.2px; transition: transform .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.10)}
.btn.primary{background:linear-gradient(135deg, rgba(0,209,255,.95), rgba(74,163,255,.95)); border-color:transparent; color:#04101b}
.btn.primary:hover{background:linear-gradient(135deg, rgba(0,209,255,1), rgba(74,163,255,1));}
.btn.small{padding:10px 12px; font-weight:800; font-size:14px}

.menuBtn{display:none}

.hero{padding:44px 0 22px}
.heroGrid{display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; align-items:stretch}
.heroCard{border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(13,34,60,.68), rgba(7,15,26,.35)); box-shadow:var(--shadow); overflow:hidden}
.heroCard .inner{padding:34px}
.kicker{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-weight:700; font-size:13px}
.kicker .dot{width:8px; height:8px; border-radius:99px; background:var(--accent)}

h1{margin:12px 0 12px; font-size:44px; line-height:1.05}
.lead{color:var(--muted); font-size:17px; line-height:1.6; margin:0 0 20px}
.ctaRow{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 0}

.heroArt{border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(0,209,255,.18), transparent 45%), radial-gradient(900px 450px at 70% 20%, rgba(74,163,255,.35), transparent 60%), linear-gradient(180deg, rgba(13,34,60,.55), rgba(7,15,26,.25)); box-shadow:var(--shadow); overflow:hidden; position:relative}
.heroArt .img{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.34; filter:saturate(1.05) contrast(1.05)}
.heroArt .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,15,26,.1), rgba(7,15,26,.86) 78%)}
.heroArt .content{position:relative; padding:26px}
.stat{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:16px; margin:10px 0}
.stat b{display:block; font-size:16px}
.stat span{display:block; color:var(--muted); font-size:13px; line-height:1.4}

.grid{display:grid; gap:14px}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols2{grid-template-columns:repeat(2,1fr)}
.section{padding:24px 0}
.section h2{margin:0 0 10px; font-size:28px}
.section p{margin:0 0 16px; color:var(--muted); line-height:1.7}

.card{border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:var(--radius); padding:18px}
.card:hover{background:rgba(255,255,255,.07)}
.card h3{margin:0 0 8px; font-size:17px}
.card .muted{color:var(--muted); font-size:14px; line-height:1.6}
.icon{width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:rgba(0,209,255,.14); border:1px solid rgba(0,209,255,.18); margin-bottom:12px}

.step{display:flex; gap:14px; align-items:flex-start}
.step:before{counter-increment:step; content:counter(step); width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:rgba(74,163,255,.16); border:1px solid rgba(74,163,255,.22); font-weight:900}

.split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.ctaBanner{border:1px solid rgba(0,209,255,.22); background:linear-gradient(135deg, rgba(0,209,255,.16), rgba(74,163,255,.12)); border-radius:var(--radius); padding:18px; display:flex; gap:14px; align-items:center; justify-content:space-between}

footer{padding:28px 0 40px; border-top:1px solid var(--line); color:var(--muted)}
footer .foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

.form{display:grid; gap:12px}
input, textarea, select{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(11,26,46,.55); /* more "site-like" */
  color:var(--text);
  outline:none;
}
input:focus, textarea:focus, select:focus{border-color:rgba(0,209,255,.35); box-shadow:0 0 0 4px rgba(0,209,255,.10)}
textarea{min-height:120px; resize:vertical}
label{font-size:13px; color:var(--muted); font-weight:700}
.field{display:grid; gap:7px}
.note{font-size:13px; color:var(--muted); line-height:1.6}

/* Dropdown menu items (Windows/Chrome often uses system styles; this helps where supported) */
select option{background: var(--bg2); color: var(--text)}
select optgroup{background: var(--bg2); color: var(--text)}

.whatsapp{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:999px; background:#18c35a; color:#072110; font-weight:900; box-shadow:0 18px 40px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18)}
.whatsapp:hover{filter:brightness(1.02); transform:translateY(-1px)}
.whatsapp svg{flex:0 0 auto}

@media (max-width:920px){h1{font-size:38px}.heroGrid{grid-template-columns:1fr}.grid.cols3{grid-template-columns:1fr}.grid.cols2{grid-template-columns:1fr}.split{grid-template-columns:1fr}}
@media (max-width:760px){nav ul{display:none}.menuBtn{display:inline-flex}nav.open ul{display:flex; flex-direction:column; gap:10px; position:absolute; left:18px; right:18px; top:70px; background:rgba(7,15,26,.95); border:1px solid var(--line); border-radius:18px; padding:12px}}


/* ===== FINAL Mobile + iOS fixes (RO) ===== */
html, body{width:100%; max-width:100%; overflow-x:hidden; background:var(--bg);}
img, svg, video, canvas{max-width:100%; height:auto;}

/* Logo size */
.brand img{width:72px; height:72px; object-fit:contain;}

/* Keep buttons readable */
.btn{white-space:nowrap;}
.actions{flex:0 0 auto; flex-shrink:0;}
.actions .btn{flex:0 0 auto;}

@media (max-width:520px){
  .brand img{width:52px; height:52px;}

  /* Only show Call in header */
  .actions a.btn:not(.primary){display:none !important;}

  /* prevent truncation: make Call wide enough */
  .actions a.btn.primary{padding:10px 12px; font-size:13px; min-width:92px;}

  /* Center topbar items */
  .topbar .wrap{flex-direction:column; align-items:center; justify-content:center; gap:8px;}
  .topbar .wrap>div{justify-content:center;}
  .badge{justify-content:center; text-align:center;}

  /* Hide tagline bullets */
  .sep{display:none;}
}