:root{
  --bg:#050f1d;
  --bg2:#07182b;
  --panel:#0a1b30;
  --panel2:#0d223c;
  --blue:#1488ff;
  --cyan:#17c7df;
  --teal:#14b8a6;
  --gold:#e7a52c;
  --white:#f6f9fd;
  --text:#c3d0df;
  --muted:#7f95ad;
  --line:rgba(255,255,255,.09);
  --shadow:0 24px 80px rgba(0,0,0,.3);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 78% 4%,rgba(20,136,255,.16),transparent 30%),
    radial-gradient(circle at 8% 32%,rgba(23,199,223,.07),transparent 25%),
    var(--bg);
  color:var(--white);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}

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

img{
  max-width:100%;
}

.container{
  width:min(1180px,92%);
  margin:auto;
}

.nav-wrap{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(18px);
  background:rgba(5,15,29,.8);
  border-bottom:1px solid var(--line);
}

.nav{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand img{
  display:block;
  width:230px;
  height:auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:27px;
  font-size:14px;
  color:#a9bbce;
}

.nav-links a{
  transition:.2s;
}

.nav-links a:hover{
  color:white;
}

.nav-action{
  border:1px solid rgba(23,199,223,.3);
  padding:10px 17px;
  border-radius:9px;
  color:#e8fcff!important;
  background:rgba(23,199,223,.05);
}

.mobile-button{
  display:none;
  width:43px;
  height:43px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:9px;
  color:white;
  font-size:21px;
  cursor:pointer;
}

.hero{
  min-height:760px;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  align-items:center;
  gap:65px;
  position:relative;
}

.kicker{
  color:var(--cyan);
  font-weight:800;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(52px,6.3vw,86px);
  line-height:.99;
  letter-spacing:-3.5px;
  margin:19px 0 27px;
  max-width:760px;
}

.gradient{
  background:linear-gradient(100deg,#f3b43e 0%,#17c7df 52%,#1488ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-copy{
  max-width:670px;
  color:var(--text);
  font-size:18px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:34px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:0 23px;
  border-radius:9px;
  font-size:14px;
  font-weight:800;
  transition:.25s;
}

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

.btn-primary{
  background:linear-gradient(105deg,#e3a029,#f1bd52);
  color:#071525;
  box-shadow:0 15px 40px rgba(231,165,44,.16);
}

.btn-outline{
  border:1px solid rgba(23,199,223,.3);
  background:rgba(23,199,223,.04);
}

.hero-note{
  margin-top:35px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:1px;
}

.hero-visual{
  min-height:520px;
  display:grid;
  place-items:center;
  position:relative;
}

.core-shell{
  position:relative;
  width:420px;
  height:420px;
  display:grid;
  place-items:center;
}

.orbit{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(23,199,223,.17);
  animation:rotate 28s linear infinite;
}

.orbit.o2{
  inset:55px;
  border-color:rgba(231,165,44,.19);
  animation-direction:reverse;
  animation-duration:20s;
}

.orbit.o3{
  inset:110px;
  border-color:rgba(20,136,255,.25);
  animation-duration:15s;
}

.node{
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 19px var(--cyan);
}

.n1{top:-5px;left:50%}
.n2{right:-5px;top:48%;background:var(--blue)}
.n3{bottom:-5px;left:48%;background:var(--gold)}
.n4{left:-5px;top:48%}

.core{
  width:160px;
  height:160px;
  border-radius:38px;
  position:relative;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%,rgba(23,199,223,.2),transparent 36%),
    linear-gradient(145deg,#0d2845,#071423);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 100px rgba(20,136,255,.13),
    inset 0 0 35px rgba(23,199,223,.08);
}

.core strong{
  font-size:37px;
  letter-spacing:-2px;
}

.core small{
  position:absolute;
  bottom:29px;
  font-size:8px;
  color:var(--muted);
  letter-spacing:3px;
}

.visual-tag{
  position:absolute;
  padding:9px 13px;
  border-radius:8px;
  background:rgba(7,24,43,.87);
  border:1px solid var(--line);
  color:#a9bdd1;
  font-size:11px;
  backdrop-filter:blur(8px);
}

.tag-cloud{top:76px;right:2px}
.tag-network{bottom:89px;right:1px}
.tag-fiber{bottom:80px;left:0}

@keyframes rotate{
  to{transform:rotate(360deg)}
}

.section{
  padding:105px 0;
  border-top:1px solid var(--line);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:48px;
}

.section-title{
  max-width:710px;
}

.section-title h2{
  font-size:clamp(35px,4vw,52px);
  letter-spacing:-2px;
  line-height:1.08;
  margin-top:13px;
}

.section-title p{
  color:var(--muted);
  margin-top:15px;
  max-width:640px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.card{
  min-height:270px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:25px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:.3s;
  position:relative;
  overflow:hidden;
}

.card:before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  background:var(--blue);
  filter:blur(85px);
  opacity:.1;
  top:-50px;
  right:-50px;
}

.card:hover{
  transform:translateY(-6px);
  border-color:rgba(23,199,223,.3);
}

.card-no{
  display:block;
  color:var(--cyan);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:35px;
}

.card h3{
  font-size:18px;
  margin-bottom:12px;
}

.card p{
  color:var(--muted);
  font-size:13px;
}

.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center;
}

.about-grid h2{
  font-size:clamp(38px,4vw,53px);
  line-height:1.07;
  letter-spacing:-2px;
  margin:14px 0 24px;
}

.about-grid p{
  color:var(--text);
  margin-bottom:16px;
}

.ecosystem{
  padding:38px;
  min-height:430px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 50%,rgba(20,136,255,.09),transparent 35%),
    rgba(255,255,255,.018);
  display:grid;
  place-items:center;
  position:relative;
}

.eco-center{
  width:140px;
  height:140px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0b2038;
  border:1px solid rgba(23,199,223,.25);
  font-weight:900;
  font-size:23px;
  box-shadow:0 0 65px rgba(20,136,255,.12);
}

.eco-item{
  position:absolute;
  font-size:12px;
  color:#a7bbcf;
  padding:10px 14px;
  border:1px solid var(--line);
  background:#08192c;
  border-radius:8px;
}

.e1{top:40px}
.e2{right:35px;top:175px}
.e3{bottom:40px}
.e4{left:35px;top:175px}

.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.product{
  min-height:390px;
  padding:42px;
  border:1px solid var(--line);
  border-radius:23px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#0b2037,#071523);
}

.product:after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-100px;
  bottom:-120px;
  border-radius:50%;
  background:var(--blue);
  filter:blur(90px);
  opacity:.11;
}

.product-radius:after{
  background:var(--gold);
}

.product-label{
  color:var(--cyan);
  letter-spacing:3px;
  font-size:10px;
  font-weight:800;
}

.product h3{
  font-size:38px;
  margin:24px 0 12px;
  letter-spacing:-1.5px;
}

.product p{
  color:var(--text);
  max-width:500px;
}

.product ul{
  list-style:none;
  margin-top:31px;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.product li{
  border:1px solid var(--line);
  border-radius:50px;
  padding:7px 12px;
  font-size:11px;
  color:#afc1d2;
}

.cap-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.cap{
  padding:28px;
  border-top:2px solid var(--blue);
  background:rgba(255,255,255,.02);
}

.cap:nth-child(2),
.cap:nth-child(5){border-color:var(--cyan)}

.cap:nth-child(3),
.cap:nth-child(6){border-color:var(--gold)}

.cap h3{
  margin-bottom:8px;
  font-size:17px;
}

.cap p{
  color:var(--muted);
  font-size:13px;
}

.values{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
}

.value{
  padding:29px 18px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.02);
}

.value strong{
  display:block;
  font-size:16px;
}

.value small{
  color:var(--muted);
}

.cta-wrap{
  padding:85px 0;
}

.cta{
  padding:58px;
  border-radius:24px;
  border:1px solid rgba(23,199,223,.18);
  background:
    radial-gradient(circle at 90% 20%,rgba(20,136,255,.16),transparent 35%),
    linear-gradient(125deg,#0b2037,#071523);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
}

.cta h2{
  font-size:clamp(31px,4vw,46px);
  letter-spacing:-1.5px;
  max-width:680px;
  line-height:1.1;
  margin-top:12px;
}

.cta p{
  color:var(--muted);
  margin-top:13px;
}

footer{
  border-top:1px solid var(--line);
  padding:55px 0 35px;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:50px;
}

.footer-brand img{
  width:230px;
  margin-bottom:20px;
}

.footer-brand p,
.footer-column a,
.footer-column p{
  color:var(--muted);
  font-size:13px;
}

.footer-column h4{
  margin-bottom:14px;
  font-size:13px;
}

.footer-column a{
  display:block;
  margin:7px 0;
}

.copyright{
  border-top:1px solid var(--line);
  margin-top:42px;
  padding-top:24px;
  color:#61778f;
  font-size:11px;
  display:flex;
  justify-content:space-between;
  gap:20px;
}

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

.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:1000px){
  .cards{
    grid-template-columns:repeat(2,1fr);
  }

  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:70px 0;
  }

  .hero-copy{
    margin:auto;
  }

  .hero-actions{
    justify-content:center;
  }

  .hero-visual{
    min-height:460px;
  }

  .about-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .mobile-button{
    display:block;
  }

  .nav-links{
    display:none;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    padding:24px 4%;
    background:#071626;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links.open{
    display:flex;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .cap-grid{
    grid-template-columns:1fr 1fr;
  }

  .values{
    grid-template-columns:1fr 1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .brand img{
    width:190px;
  }

  .hero{
    min-height:auto;
    padding-top:80px;
  }

  .hero h1{
    letter-spacing:-2px;
  }

  .hero-visual{
    min-height:370px;
  }

  .core-shell{
    width:310px;
    height:310px;
  }

  .core{
    width:130px;
    height:130px;
  }

  .visual-tag{
    display:none;
  }

  .section{
    padding:78px 0;
  }

  .section-head{
    display:block;
  }

  .cards,
  .cap-grid,
  .values{
    grid-template-columns:1fr;
  }

  .product{
    padding:30px;
  }

  .ecosystem{
    min-height:350px;
  }

  .eco-item{
    font-size:10px;
  }

  .e2{right:15px}
  .e4{left:15px}

  .cta{
    display:block;
    padding:35px;
  }

  .cta .btn{
    margin-top:27px;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .copyright{
    display:block;
  }
}

/* =========================================================
   CLOVER BRAND / HERO V2.1
   ========================================================= */

.brand img{
  width:255px;
}

.brand-core{
  width:190px;
  height:190px;
  padding:14px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(20,136,255,.15),
      rgba(5,15,29,.95) 68%);
  box-shadow:
    0 0 45px rgba(23,199,223,.14),
    0 0 100px rgba(20,136,255,.12);
  border:0;
}

.brand-core img{
  width:100%;
  height:100%;
  object-fit:contain;
  animation:coreFloat 5s ease-in-out infinite;
}

.hero-visual:before{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(20,136,255,.10) 0%,
      rgba(23,199,223,.04) 35%,
      transparent 67%);
  pointer-events:none;
}

.hero-visual:after{
  content:"";
  position:absolute;
  inset:30px;
  opacity:.10;
  background-image:
    linear-gradient(rgba(23,199,223,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,199,223,.18) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 72%);
  pointer-events:none;
}

.core-shell{
  z-index:2;
}

.visual-tag{
  letter-spacing:1.2px;
  font-weight:700;
  text-transform:uppercase;
}

.tag-cloud:before,
.tag-network:before,
.tag-fiber:before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#17C7DF;
  margin-right:7px;
  box-shadow:0 0 10px #17C7DF;
}

.tag-fiber:before{
  background:#E7A52C;
  box-shadow:0 0 10px #E7A52C;
}

.hero-note{
  display:inline-block;
  padding-top:22px;
  position:relative;
}

.hero-note:before{
  content:"";
  position:absolute;
  width:55px;
  height:2px;
  top:8px;
  left:0;
  background:linear-gradient(90deg,#E7A52C,#17C7DF);
}

@keyframes coreFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.015)}
}

@media(max-width:600px){
  .brand img{
    width:210px;
  }

  .brand-core{
    width:150px;
    height:150px;
  }

  .hero-visual:before{
    width:360px;
    height:360px;
  }
}