:root{
  --bg:#050712;
  --bg2:#070b18;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --ink:#f6f7ff;
  --mut:#aeb8dc;
  --brd:rgba(255,255,255,.14);
  --shadow:0 26px 80px rgba(0,0,0,.60);
  --glow:0 0 34px rgba(110,168,255,.25);
  --a:#6ea8ff;
  --b:#22c55e;
  --c:#f59e0b;
  --d:#ef4444;
  --x1:#7c3aed;
  --x2:#06b6d4;
  --x3:#22c55e;
  --radius:22px;
  --max:1180px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(6,182,212,.24), transparent 55%),
    radial-gradient(900px 800px at 70% 85%, rgba(34,197,94,.20), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--ink);
  font-family:var(--font);
  scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}
p{line-height:1.75;color:var(--mut)}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.topbar{
  position:sticky;top:0;z-index:60;
  backdrop-filter: blur(18px);
  background: linear-gradient(to bottom, rgba(6,8,18,.86), rgba(6,8,18,.55));
  border-bottom:1px solid var(--brd);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:10px}
.brand{display:flex;gap:10px;align-items:center;min-width:220px}
.logo{
  width:44px;height:44px;border-radius:14px;
  background: conic-gradient(from 140deg, var(--x1), var(--x2), var(--x3), var(--a));
  box-shadow: var(--glow);
  border:1px solid rgba(255,255,255,.18);
}
.brand b{font-size:16px;letter-spacing:.4px}
.brand small{display:block;color:var(--mut);margin-top:2px;font-size:12px}
.links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.links a{
  padding:10px 12px;border-radius:14px;
  border:1px solid transparent;
  color:var(--mut);
  transition:.18s ease;
}
.links a:hover{border-color:var(--brd);color:var(--ink);background:rgba(255,255,255,.04)}
.links a.active{border-color:rgba(110,168,255,.45);color:var(--ink);background:rgba(110,168,255,.08)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(124,58,237,.14));
  box-shadow: var(--shadow);
  color:var(--ink);
  font-weight:900;
  letter-spacing:.2px;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn2{background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(6,182,212,.14));}
.btn3{background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(239,68,68,.12));}
.chip{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--mut);
  font-size:12px;
}
.dot{width:8px;height:8px;border-radius:99px;background:var(--b);box-shadow:0 0 18px rgba(34,197,94,.35)}
.dot.blue{background:var(--a);box-shadow:0 0 18px rgba(110,168,255,.35)}
.dot.gold{background:var(--c);box-shadow:0 0 18px rgba(245,158,11,.35)}

.card{
  border:1px solid var(--brd);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:var(--radius);
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(110,168,255,.18), transparent 60%),
    radial-gradient(420px 260px at 80% 0%, rgba(6,182,212,.14), transparent 55%);
  opacity:.7;
  pointer-events:none;
}
.card > *{position:relative}
.pad{padding:22px}
.h1{font-size:46px;line-height:1.03;margin:10px 0 12px;letter-spacing:-.7px}
@media (max-width: 520px){.h1{font-size:36px}}
.h2{font-size:24px;margin:0 0 10px}
.h3{font-size:18px;margin:0 0 8px}
.sub{font-size:16px;margin:0 0 18px}
.small{font-size:12px;color:rgba(255,255,255,.55)}
.hero{padding:44px 0 18px}
.heroGrid{display:grid;grid-template-columns: 1.15fr .85fr; gap:14px}
@media (max-width: 980px){.heroGrid{grid-template-columns:1fr}}
.glowline{
  height:1px;background:linear-gradient(90deg, transparent, rgba(110,168,255,.55), rgba(6,182,212,.45), transparent);
  margin:14px 0;
}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media (max-width: 520px){.kpis{grid-template-columns:1fr}}
.kpi{
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:14px;
  background:rgba(255,255,255,.04);
}
.kpi b{font-size:18px}
.kpi span{display:block;color:var(--mut);font-size:12px;margin-top:4px}
.section{padding:22px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}}
.notice{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  border-radius:18px;padding:14px;
}
.ul{margin:10px 0 0;padding:0;list-style:none}
.ul li{margin:8px 0;color:var(--mut)}
.ul li:before{content:"- ";color:rgba(255,255,255,.45)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{
  font-size:12px;color:var(--mut);
  border:1px solid rgba(255,255,255,.14);
  padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.03)
}
.service{
  padding:18px;border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}
.service:before{
  content:"";position:absolute;inset:-1px;
  border-radius:22px;
  background: radial-gradient(520px 220px at 20% 20%, rgba(110,168,255,.18), transparent 60%),
              radial-gradient(430px 240px at 80% 0%, rgba(6,182,212,.16), transparent 55%),
              radial-gradient(540px 240px at 60% 110%, rgba(34,197,94,.12), transparent 55%);
  opacity:.7;pointer-events:none
}
.service > *{position:relative}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.85);
}
.pill i{width:10px;height:10px;border-radius:99px;background:var(--a);box-shadow:0 0 18px rgba(110,168,255,.35)}
.pill b{font-family:var(--mono);font-weight:900;font-size:12px;letter-spacing:.3px}
.footer{
  padding:28px 0;color:var(--mut);
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:26px
}
input,textarea,select{
  width:100%;padding:12px 12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:var(--ink); outline:none;
}
textarea{min-height:140px;resize:vertical}
label{display:block;margin:12px 0 6px;color:rgba(255,255,255,.78);font-weight:900;font-size:13px}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 740px){.formRow{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
.reveal.on{opacity:1;transform:translateY(0px)}

/* Sliding doors hero */
.doors{
  position:relative;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  background:
    radial-gradient(1000px 520px at 50% 10%, rgba(110,168,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  min-height: 340px;
}
@media (max-width: 520px){.doors{min-height: 300px}}
.door{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(700px 420px at 40% 30%, rgba(124,58,237,.22), transparent 55%),
    radial-gradient(700px 420px at 60% 70%, rgba(6,182,212,.18), transparent 55%);
  border-right:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.door.right{right:0;border-right:0;border-left:1px solid rgba(255,255,255,.10)}
.door.left{left:0}
.handle{
  position:absolute; top:50%; width:18px; height:54px;
  transform:translateY(-50%);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(245,158,11,.35), rgba(110,168,255,.12));
  box-shadow:0 0 26px rgba(245,158,11,.18);
}
.door.left .handle{right:18px}
.door.right .handle{left:18px}
.doors.open .door.left{animation: doorLeft 1.25s cubic-bezier(.2,.9,.2,1) forwards}
.doors.open .door.right{animation: doorRight 1.25s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes doorLeft{to{transform:translateX(-102%)}}
@keyframes doorRight{to{transform:translateX(102%)}}
.doorContent{
  position:relative;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}
.doorTop{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap
}
.bigBadge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
}
.bigBadge .star{
  width:22px;height:22px;border-radius:8px;
  background:conic-gradient(from 90deg, rgba(245,158,11,.85), rgba(110,168,255,.8), rgba(34,197,94,.8), rgba(245,158,11,.85));
  box-shadow:0 0 18px rgba(245,158,11,.20);
  border:1px solid rgba(255,255,255,.16);
}
.heroActions{display:flex;gap:10px;flex-wrap:wrap}

/* Floating actions */
.fab{
  position:fixed; right:14px; bottom:14px; z-index:80;
  display:flex; flex-direction:column; gap:10px;
}
.fab a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(6,8,18,.78);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  color:var(--ink);
  font-weight:900;
}
.fab a span{color:rgba(255,255,255,.70);font-weight:800}
.fab a:hover{transform:translateY(-1px);transition:.18s ease}
.icon{
  width:18px;height:18px;border-radius:6px;
  background:linear-gradient(135deg, rgba(110,168,255,.85), rgba(124,58,237,.65));
  box-shadow:0 0 18px rgba(110,168,255,.25);
}
.icon.green{background:linear-gradient(135deg, rgba(34,197,94,.85), rgba(6,182,212,.65))}
.icon.gold{background:linear-gradient(135deg, rgba(245,158,11,.85), rgba(239,68,68,.55))}

/* Marquee */
.marquee{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  overflow:hidden;
}
.marqueeTrack{
  display:flex; gap:26px; white-space:nowrap;
  padding:12px 14px;
  animation: marquee 18s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.mqItem{color:rgba(255,255,255,.78); font-weight:900; letter-spacing:.2px}
.mqItem span{color:rgba(255,255,255,.50); font-weight:800}

/* FAQ accordion */
details{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px 14px;
}
details+details{margin-top:10px}
summary{
  cursor:pointer;
  list-style:none;
  font-weight:900;
  color:rgba(255,255,255,.90);
}
summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0}

/* Table */
table{width:100%;border-collapse:separate;border-spacing:0 10px}
td,th{padding:12px 12px;text-align:left}
thead th{color:rgba(255,255,255,.75);font-size:12px;letter-spacing:.25px;text-transform:uppercase}
tbody tr{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);}
tbody tr td:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}
tbody tr td:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}
.mono{font-family:var(--mono)}