:root{
  --bg:#0b1220;
  --card:#101a2f;
  --muted:#93a4c7;
  --text:#e8eefc;
  --accent:#60d394;
  --accent2:#4aa3ff;
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --radius:18px;
  --max: 1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(96,211,148,.20), transparent 60%),
              radial-gradient(900px 500px at 80% -10%, rgba(74,163,255,.18), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.55;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}
header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(11,18,32,.65);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width: 240px;
}
.logo{
  width:44px;
  height:44px;
  border-radius:10px;
  background: url('scube-logo.jpg') center/contain no-repeat;
}
.brand b{display:block; letter-spacing:.4px}
.brand span{display:block; color:var(--muted); font-size:13px; margin-top:1px;}
.links{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;
  align-items:center;
}
.links a{
  color: var(--muted);
  padding:10px 10px;
  border-radius: 12px;
}
.links a:hover{color:var(--text); background: rgba(255,255,255,.06);}
.links a.active{color:var(--text); background: rgba(255,255,255,.08); border:1px solid var(--border);}
.cta{display:flex; gap:10px; align-items:center;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);}
.btn.primary{
  border: 1px solid rgba(96,211,148,.55);
  background: linear-gradient(135deg, rgba(96,211,148,.25), rgba(74,163,255,.15));
}
.btn.primary:hover{border-color: rgba(96,211,148,.85);}

main{min-height:60vh}
.hero{padding: 52px 0 18px;}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch;}
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-size: 13px;
}
.dot{width:8px; height:8px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 4px rgba(96,211,148,.18);}
h1{margin:14px 0 10px; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: .2px;}
.lead{color: var(--muted); font-size: 16px; max-width: 70ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.stats{display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 18px;}
.stat{border:1px solid var(--border); border-radius: var(--radius); padding: 14px; background: rgba(255,255,255,.04);}
.stat b{display:block; font-size:18px;}
.stat span{color: var(--muted); font-size:13px;}

.card{border:1px solid var(--border); border-radius: var(--radius); background: rgba(16,26,47,.75); box-shadow: var(--shadow);}
.hero-card{padding: 18px; display:flex; flex-direction:column; gap:14px;}
.hero-card h3{margin:0; font-size:16px;}
.hero-card p{margin:0; color:var(--muted); font-size:14px;}

.checklist{margin:0; padding:0; list-style:none; display:grid; gap:10px;}
.checklist li{display:flex; gap:10px; align-items:flex-start; color: var(--text); font-size: 14px;}
.tick{flex:0 0 auto; width:18px; height:18px; margin-top:2px; border-radius: 7px; background: rgba(96,211,148,.20); border: 1px solid rgba(96,211,148,.35); position: relative;}
.tick:after{content:""; position:absolute; left:5px; top:3px; width:6px; height:10px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform: rotate(35deg);}

section{padding: 36px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom: 16px;}
.section-head h2{margin:0; font-size: 22px;}
.section-head p{margin:0; color:var(--muted); max-width: 80ch;}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
.box{padding: 18px; border-radius: var(--radius); border:1px solid var(--border); background: rgba(255,255,255,.04);}
.box h3{margin:0 0 8px; font-size:16px;}
.box p{margin:0; color:var(--muted); font-size:14px;}
.tagrow{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px;}
.tag{font-size:12px; color: var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius: 999px; background: rgba(255,255,255,.03);}
.flow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.step{flex:1 1 180px; border:1px solid var(--border); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.03);}
.step b{display:block; font-size: 13px;}
.step span{display:block; color: var(--muted); font-size: 13px; margin-top:4px;}
.note{color: var(--muted); font-size: 13px; margin-top: 10px;}

.page-title{padding: 26px 0 4px;}
.breadcrumb{color:var(--muted); font-size: 13px;}

.contact{display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch;}
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 6px;}
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
textarea{min-height: 118px; resize: vertical;}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px;}
.small{font-size:12px; color:var(--muted); margin-top:10px;}

footer{padding: 26px 0 40px; border-top:1px solid var(--border); color: var(--muted);}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;}
.foot a{color: var(--muted);}
.foot a:hover{color: var(--text);}

.whatsapp{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(96,211,148,.50);
  background: rgba(16,26,47,.85);
  box-shadow: var(--shadow);
}
.whatsapp:hover{border-color: rgba(96,211,148,.85); transform: translateY(-1px);}
.whatsapp span{color: var(--muted); font-size: 13px;}
.whatsapp b{font-size: 13px;}
.whatsapp .w-dot{width:10px; height:10px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 4px rgba(96,211,148,.18);}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .contact{grid-template-columns: 1fr;}
}
@media (max-width: 860px){
  .grid3{grid-template-columns: 1fr;}
  .grid2{grid-template-columns: 1fr;}
  .brand{min-width:auto}
  .links{display:none}
}