@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --bg:#071725;
  --bg-2:#081b2c;
  --ink:#e8f0f8;
  --muted:#bcd2e6;
  --accent:#00b8e8;
  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% 15%, #0c2f48 0%, var(--bg) 55%);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}

.header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 7%;
  background:rgba(5,15,25,.65);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:.6rem}
.logo{width:34px; height:34px; border-radius:8px; display:block}
.brand-text{font-weight:700; letter-spacing:.4px}
.nav{display:flex; gap:1.1rem; align-items:center}
.nav a{color:var(--ink); opacity:.9}
.nav .btn.small{padding:.4rem .8rem; border-radius:8px; background:var(--accent); color:#001018; font-weight:700}

.menu{display:none; background:none; border:0}
.menu span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}

.mobile-nav{
  position:fixed; inset:auto 0 0 0; transform:translateY(100%);
  background:rgba(7,23,37,.98); backdrop-filter: blur(10px);
  padding:1rem 7% 2rem; display:flex; flex-direction:column; gap:1rem; z-index:60;
  border-top:1px solid rgba(255,255,255,.08);
  transition:transform .28s ease;
}
.mobile-nav a{color:var(--ink); font-size:1.1rem}
.mobile-nav .full{display:block; text-align:center}

.section{padding:72px 7%; max-width:1100px; margin:0 auto}
.section h2{font-size:2rem; letter-spacing:.2px; margin:0 0 .6rem}
.lead{color:var(--muted); max-width:780px}

.hero{
  position:relative; min-height:78vh; display:grid; place-items:center;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero-inner{padding:96px 7% 56px; text-align:center; max-width:950px}
.eyebrow{letter-spacing:.28em; color:#8cbdd3; font-weight:600; font-size:.85rem}
.hero h1{font-size: clamp(2rem, 6vw, 3.4rem); line-height:1.1; margin:.6rem auto; max-width:940px}
.hero .accent{color:#66d9ff}
.hero .sub{color:var(--muted); max-width:760px; margin:0 auto 1.2rem}
.hero-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:.6rem}
.btn{display:inline-block; padding:.8rem 1.2rem; border-radius:12px; font-weight:700}
.primary{background:var(--accent); color:#001018}
.outline{border:1px solid var(--accent); color:var(--accent)}
.block{display:inline-block; margin-top:1rem}

.hero-glow{
  position:absolute; inset:auto -20% -30% -20%;
  height:40vh; background:radial-gradient(50% 100% at 50% 100%, rgba(0,184,232,.18), transparent 60%);
  filter:blur(40px);
}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:16px; padding:1rem 1.1rem;
  box-shadow:0 10px 40px rgba(0,0,0,.25) inset, 0 1px 0 rgba(255,255,255,.03);
}
.card h3{margin:.2rem 0 .4rem}
.bg-graphic{background-size:cover; background-position:center; border-radius:24px}
.bg-soft{background-size:cover; background-position:center; border-radius:24px;}

.table-wrap{overflow:auto; border-radius:14px; border:1px solid var(--stroke); background:var(--glass)}
table{width:100%; border-collapse:collapse; min-width:640px}
thead th{padding:.9rem; text-align:left; background:rgba(255,255,255,.04); border-bottom:1px solid var(--stroke)}
tbody td{padding:.9rem; border-bottom:1px solid rgba(255,255,255,.06); color:var(--muted)}

.diagram{position:relative; margin:1rem 0 1.4rem}
.diagram img{width:100%; border-radius:18px; border:1px solid var(--stroke); background:var(--glass)}
.timer{position:absolute; inset:auto 50% 50% auto; transform:translate(50%,50%); width:160px; text-align:center}
.timer svg{width:160px; height:160px}
.ring-bg{fill:none; stroke:rgba(255,255,255,.12); stroke-width:8}
.ring{fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round; stroke-dasharray:339.292; stroke-dashoffset:0; transform:rotate(-90deg); transform-origin:50% 50%;}
.t{fill:#e8f0f8; font-weight:800; font-size:34px; text-anchor:middle}
.t-caption{margin-top:-6px; color:var(--muted); font-size:.95rem}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.pill{background:var(--glass); border:1px solid var(--stroke); padding:1rem 1.1rem; border-radius:16px}

.footer{margin-top:36px; background-size:cover; background-position:center; padding:40px 7%}
.footer-inner{max-width:1100px; margin:0 auto; border-radius:14px; padding:16px 18px; border:1px solid var(--stroke); background:rgba(7,23,37,.6)}

.glass{box-shadow: 0 10px 40px rgba(0,0,0,.25) inset, 0 1px 0 rgba(255,255,255,.03)}

.fade{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.fade.visible{opacity:1; transform:none}

@media (max-width: 900px){
  .nav{display:none}
  .menu{display:block}
  .cards{grid-template-columns:1fr}
  .cards.three{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .timer{position:relative; inset:auto; transform:none; margin:10px auto 0}
  .section{padding:64px 6%}
}