@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --bg:#070a0f;
  --surface:#0d121a;
  --surface2:#111923;
  --text:#f5f7fa;
  --muted:#aab4c1;
  --line:rgba(255,255,255,.12);
  --blue:#1597ff;
  --blue2:#006edc;
  --silver:#cbd2dc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"DM Sans",Arial,sans-serif;line-height:1.6
}
a{color:inherit;text-decoration:none}
.site-header{
  position:fixed;z-index:10;top:0;left:0;right:0;
  height:82px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;
  background:rgba(7,10,15,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)
}
.brand img{width:180px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:32px;font-size:.92rem}
.nav a{color:#dce2ea;transition:.2s}
.nav a:hover{color:white}
.nav-cta{padding:10px 17px;border:1px solid rgba(21,151,255,.65);border-radius:999px}
.menu-toggle{display:none;background:none;border:0;color:white;font-size:25px}
.hero{
  min-height:100vh;padding:150px 7vw 90px;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;position:relative;overflow:hidden
}
.hero-glow{
  position:absolute;width:650px;height:650px;right:-180px;top:90px;
  background:radial-gradient(circle,rgba(21,151,255,.19),transparent 66%);filter:blur(8px)
}
.hero-content{position:relative;z-index:1;max-width:720px}
.eyebrow{font-size:.75rem;letter-spacing:.24em;color:#59b7ff;font-weight:700;margin:0 0 20px}
h1,h2{font-family:"Playfair Display",Georgia,serif;line-height:1.05;margin:0}
h1{font-size:clamp(3.6rem,7vw,7rem);letter-spacing:-.04em}
h1 span{color:#dbe2eb}
h2{font-size:clamp(2.4rem,4vw,4.3rem);letter-spacing:-.035em}
.hero-copy{font-size:1.15rem;color:var(--muted);max-width:620px;margin:28px 0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:5px;font-weight:700}
.button-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 10px 30px rgba(0,110,220,.25)}
.button-ghost{border:1px solid var(--line);color:#dce2ea}
.hero-mark{height:470px;position:relative;display:grid;place-items:center}
.ring{position:absolute;border:1px solid rgba(21,151,255,.25);border-radius:50%}
.ring-one{width:410px;height:410px}
.ring-two{width:300px;height:300px;border-color:rgba(203,210,220,.18)}
.wv{
  font-family:Georgia,serif;font-size:11rem;font-weight:700;
  color:transparent;-webkit-text-stroke:2px rgba(221,229,238,.65);
  text-shadow:0 0 50px rgba(21,151,255,.15)
}
.section{padding:120px 7vw}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw}
.section-copy{font-size:1.12rem;color:#c3ccd6;max-width:700px}
.muted{color:#7f8b99}
.dark-section{background:linear-gradient(180deg,#0b1017,#070a0f)}
.section-heading{max-width:700px;margin-bottom:55px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  padding:34px;background:rgba(255,255,255,.035);border:1px solid var(--line);
  min-height:270px;transition:transform .25s,border-color .25s
}
.card:hover{transform:translateY(-5px);border-color:rgba(21,151,255,.45)}
.card-number{color:#1597ff;font-weight:700;letter-spacing:.12em}
.card h3{font-size:1.45rem;margin:55px 0 10px}
.card p{color:var(--muted);margin:0}
.values{border-top:1px solid var(--line)}
.value{
  display:grid;grid-template-columns:.55fr 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)
}
.value strong{font-family:"Playfair Display",Georgia,serif;font-size:2rem}
.value span{color:var(--muted);align-self:center}
.contact-section{
  margin:0 7vw 100px;padding:65px;display:flex;justify-content:space-between;align-items:center;gap:35px;
  border:1px solid rgba(21,151,255,.28);
  background:radial-gradient(circle at 80% 50%,rgba(21,151,255,.12),transparent 45%),#0b1119
}
.contact-section h2{font-size:3rem;margin-bottom:15px}
.contact-section p:not(.eyebrow){color:var(--muted);margin:0;max-width:620px}
.footer{
  padding:35px 7vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:20px;color:#778391;font-size:.85rem
}
.footer div{display:flex;flex-direction:column;gap:3px}
.footer strong{color:#dfe5ec;letter-spacing:.08em}
@media(max-width:800px){
  .site-header{height:72px;padding:0 5vw}
  .brand img{width:145px}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;padding:20px 5vw;flex-direction:column;align-items:flex-start;background:#080c12;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .hero{grid-template-columns:1fr;padding:125px 6vw 70px}
  .hero-mark{height:260px;order:-1}
  .ring-one{width:230px;height:230px}.ring-two{width:165px;height:165px}.wv{font-size:6rem}
  .section{padding:80px 6vw}
  .split,.cards{grid-template-columns:1fr}
  .cards{gap:12px}
  .contact-section{margin:0 6vw 70px;padding:35px;display:block}
  .contact-section .button{margin-top:25px}
  .footer{padding:30px 6vw;display:block}
  .footer>span{display:block;margin-top:18px}
}