:root{
  --bg:#010207;
  --panel:#070b13;
  --panel2:#0b101b;
  --text:#eef6ff;
  --muted:#8fa2bd;
  --cyan:#14d9ff;
  --green:#00ffb2;
  --violet:#8b5cff;
  --pink:#ff4fd8;
  --line:rgba(255,255,255,.11);
  --line2:rgba(20,217,255,.34);
  --shadow:0 30px 90px rgba(0,0,0,.75);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:#010207;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 75% 8%,rgba(139,92,255,.11),transparent 30%),
    radial-gradient(circle at 8% 12%,rgba(20,217,255,.06),transparent 25%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,auto,76px 76px,76px 76px;
  z-index:-2;
}

a{text-decoration:none;color:inherit}

.header{
  height:78px;
  padding:0 7%;
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(1,2,7,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}

.logo{
  font-size:27px;
  font-weight:950;
  letter-spacing:-1px;
}

.logo span,
.footer span{color:var(--cyan)}

.nav{
  display:flex;
  align-items:center;
  gap:30px;
}

.nav a{
  color:#aab8cf;
  font-size:14px;
  font-weight:800;
}

.nav a:hover{color:#fff}

.nav-btn{
  color:var(--cyan)!important;
  border:1px solid var(--line2);
  padding:12px 20px;
  border-radius:999px;
  box-shadow:0 0 30px rgba(20,217,255,.12);
}

.menu{
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:28px;
}

.hero-v4{
  min-height:calc(100vh - 78px);
  padding:75px 7% 55px;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:42px;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.hero-copy,
.hero-graphic{position:relative;z-index:2}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  margin-bottom:24px;
  border-radius:999px;
  color:var(--green);
  border:1px solid rgba(0,255,178,.28);
  background:rgba(0,255,178,.07);
  font-size:13px;
  font-weight:900;
}

.kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 18px var(--green);
}

h1{
  margin:0;
  font-size:clamp(58px,6vw,96px);
  line-height:.9;
  letter-spacing:-5px;
  font-weight:950;
}

h1 span,
h2 span{
  background:linear-gradient(90deg,var(--cyan),var(--green),var(--violet));
  -webkit-background-clip:text;
  color:transparent;
}

h2{
  margin:0 0 20px;
  font-size:clamp(38px,4.5vw,66px);
  line-height:1;
  letter-spacing:-3px;
  font-weight:950;
}

p{
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.hero-copy p{
  max-width:620px;
  margin-top:28px;
}

.actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 24px;
  border-radius:15px;
  font-size:14px;
  font-weight:950;
  transition:.25s;
}

.btn:hover{transform:translateY(-4px)}

.btn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  box-shadow:0 20px 55px rgba(20,217,255,.25);
}

.btn.secondary{
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
}

.hero-metrics{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:640px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
}

.hero-metrics div{
  padding:22px 18px;
  border-right:1px solid var(--line);
}

.hero-metrics div:last-child{border-right:0}

.hero-metrics strong{
  display:block;
  color:var(--cyan);
  font-size:36px;
  line-height:1;
  font-weight:950;
}

.hero-metrics small{
  display:block;
  color:#9badc5;
  margin-top:7px;
  font-size:13px;
}

.hero-graphic{
  min-height:660px;
  overflow:visible;
}

.hero-graphic.spline-hero iframe{
  position:absolute;
  inset:-90px -100px -70px -80px;
  width:calc(100% + 190px);
  height:calc(100% + 160px);
  border:0;
  filter:contrast(1.08) brightness(.92) saturate(1.1);
}

.command-panel{
  position:absolute;
  right:0;
  bottom:74px;
  width:min(420px,88%);
  padding:24px;
  border:1px solid var(--line);
  background:rgba(8,12,22,.80);
  backdrop-filter:blur(18px);
  border-radius:24px;
  box-shadow:var(--shadow);
  z-index:5;
}

.command-panel h3{
  margin:0 0 10px;
  font-size:19px;
}

.command-panel p{
  margin:0 0 18px;
  font-size:14px;
}

.command-list{
  display:grid;
  gap:12px;
}

.command-list div{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:#dbe8ff;
  font-size:14px;
}

.command-list span{color:var(--violet)}

.trust-strip{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:42px;
  padding:0 7%;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.025);
  overflow:hidden;
  color:#8f9eb7;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  font-weight:950;
}

.trust-strip span{
  width:230px;
  flex-shrink:0;
}

.trust-strip b{
  color:#aebbd2;
  white-space:nowrap;
}

.section-pad{padding:95px 7%}

.ecosystem{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:58px;
  align-items:start;
}

.ecosystem-copy{
  position:sticky;
  top:110px;
}

.ecosystem-copy p{max-width:520px}

.ecosystem-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:24px;
}

.tool-card{
  min-height:330px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  transition:.28s;
}

.tool-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(20,217,255,.18),transparent 35%);
  opacity:0;
  transition:.25s;
}

.tool-card:hover{
  transform:translateY(-10px);
  border-color:var(--line2);
}

.tool-card:hover::after{opacity:1}

.tool-card>*{position:relative;z-index:2}

.tool-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(20,217,255,.18),rgba(139,92,255,.22));
  border:1px solid var(--line2);
  font-size:24px;
  margin-bottom:24px;
}

.tool-title-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.tool-title-row h3{
  font-size:24px;
  margin:0;
}

.tool-title-row span{
  padding:7px 10px;
  border-radius:999px;
  color:var(--green);
  border:1px solid rgba(0,255,178,.25);
  background:rgba(0,255,178,.06);
  font-size:11px;
  font-weight:900;
}

.tool-card p{
  font-size:15px;
  margin-bottom:24px;
}

.tool-card a{
  color:var(--cyan);
  font-weight:950;
}

.vulnexia-showcase{
  margin:30px 7% 95px;
  padding:36px;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:42px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:var(--shadow);
}

.showcase-left{
  padding:24px;
}

.showcase-left ul{
  list-style:none;
  padding:0;
  margin:28px 0;
  display:grid;
  gap:14px;
  color:#b7c4d9;
}

.showcase-left li::before{
  content:"▣ ";
  color:var(--violet);
}

.dashboard{
  min-height:560px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#060a12;
  box-shadow:inset 0 0 80px rgba(139,92,255,.08);
}

.dash-top{
  display:flex;
  gap:9px;
  align-items:center;
  margin-bottom:20px;
  color:#b9c8dd;
}

.dash-top span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 15px var(--cyan);
}

.dash-top strong{margin-left:12px}

.dash-target{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:16px;
}

.dash-target strong{display:block}
.dash-target small{color:var(--green)}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.dash-grid div{
  padding:17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.dash-grid strong{
  display:block;
  font-size:28px;
}

.dash-grid small{color:var(--muted)}
.danger{color:#ff4f7b!important}

.dash-body{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px;
  margin-top:18px;
}

.risk-chart,
.risk-table{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:16px;
}

.chart-head{
  display:flex;
  justify-content:space-between;
  color:#c7d5e9;
  margin-bottom:10px;
}

.chart-head small{
  color:var(--muted);
  border:1px solid var(--line);
  padding:5px 8px;
  border-radius:8px;
}

.risk-chart svg{
  width:100%;
  height:245px;
}

.risk-chart .area{
  fill:url(#area);
}

.risk-chart .line{
  fill:none;
  stroke:var(--violet);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 12px rgba(139,92,255,.9));
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:drawLine 3s ease forwards infinite alternate;
}

.risk-table h4{
  margin:0 0 12px;
}

.risk-table p{
  margin:0;
  padding:12px 0;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.risk-table p:last-child{border-bottom:0}
.risk-table b{color:#ff4f7b}
.risk-table .medium{color:#ffbd4a}

.recent-report{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.recent-report span{
  color:var(--violet);
}

.recent-report div{
  flex:1;
}

.recent-report strong,
.recent-report small{
  display:block;
}

.recent-report small{color:var(--muted)}

.recent-report button{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:white;
  font-weight:800;
}

.final-cta{
  margin:0 7% 70px;
  min-height:300px;
  padding:55px;
  display:grid;
  grid-template-columns:220px 1fr 220px;
  align-items:center;
  gap:30px;
  text-align:center;
  border:1px solid var(--line2);
  border-radius:32px;
  background:
    radial-gradient(circle at 10% 50%,rgba(20,217,255,.16),transparent 26%),
    radial-gradient(circle at 90% 45%,rgba(139,92,255,.18),transparent 30%),
    rgba(255,255,255,.025);
  box-shadow:var(--shadow);
}

.final-cta h2{
  font-size:42px;
  line-height:1.08;
  margin:0 0 18px;
}

.final-cta p{
  max-width:680px;
  margin:0 auto;
}

.cta-object{
  width:170px;
  height:170px;
  margin:auto;
  border-radius:50%;
  border:1px solid rgba(20,217,255,.35);
  background:radial-gradient(circle at 50% 45%,rgba(20,217,255,.9),rgba(20,217,255,.18) 28%,transparent 62%);
  box-shadow:inset 0 0 35px rgba(20,217,255,.25),0 0 60px rgba(20,217,255,.22);
  animation:floaty 4s ease-in-out infinite;
}

.cta-object.cube{
  border-color:rgba(139,92,255,.45);
  background:radial-gradient(circle at 50% 45%,rgba(139,92,255,.9),rgba(139,92,255,.22) 28%,transparent 62%);
  box-shadow:inset 0 0 35px rgba(139,92,255,.25),0 0 60px rgba(139,92,255,.28);
  animation-delay:.8s;
}

.footer{
  padding:42px 7%;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr .8fr;
  gap:30px;
}

.footer h3{
  font-size:25px;
}

.footer p{
  max-width:430px;
  font-size:14px;
}

.footer a{
  display:block;
  color:#9fb0ca;
  margin:8px 0;
}

.socials{
  display:flex;
  gap:14px;
  color:var(--cyan);
}

.copyright{
  padding:20px 7%;
  border-top:1px solid var(--line);
  text-align:center;
  color:#8fa1bb;
  font-size:13px;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:.75s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}

@keyframes drawLine{
  to{stroke-dashoffset:0}
}

@keyframes floaty{
  50%{transform:translateY(-14px)}
}

@media(max-width:1050px){
  .menu{display:block}

  .nav{
    display:none;
    position:absolute;
    top:78px;
    left:7%;
    right:7%;
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#05070d;
  }

  .nav.open{display:flex}

  .hero-v4,
  .ecosystem,
  .vulnexia-showcase,
  .final-cta,
  .footer,
  .dash-body{
    grid-template-columns:1fr;
  }

  .hero-graphic{
    min-height:480px;
  }

  .hero-graphic.spline-hero iframe{
    inset:-40px -60px -40px -60px;
    width:calc(100% + 120px);
    height:calc(100% + 80px);
  }

  .command-panel{
    right:20px;
    bottom:30px;
  }

  .ecosystem-copy{
    position:relative;
    top:auto;
  }

  .ecosystem-cards,
  .dash-grid,
  .hero-metrics{
    grid-template-columns:1fr;
  }

  h1{
    font-size:58px;
    letter-spacing:-3px;
  }

  .section-pad{
    padding:70px 7%;
  }
}