:root{
  --bg:#f4f4f2;
  --bg2:#e9ebe7;
  --text:#0b1a24;
  --muted:rgba(11,26,36,.70);
  --muted2:rgba(11,26,36,.50);
  --line:rgba(11,26,36,.08);
  --white:#ffffff;
  --dark:#0b1a24;
  --shadow:0 20px 70px rgba(11,26,36,.08);
  --shadow-strong:0 35px 120px rgba(11,26,36,.16);
  --shadow-soft:0 14px 40px rgba(11,26,36,.06);
  --radius:30px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.bg{
  position:fixed;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(circle at 15% 10%, rgba(11,26,36,.08), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(11,26,36,.08), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(11,26,36,.05), transparent 30%),
    linear-gradient(to bottom, var(--bg), var(--bg2));
}

.bg::after{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.34), transparent 16%),
    radial-gradient(circle at 76% 32%, rgba(255,255,255,.22), transparent 14%),
    radial-gradient(circle at 54% 78%, rgba(11,26,36,.05), transparent 18%);
  opacity:.65;
  animation:backgroundDrift 24s ease-in-out infinite;
}

.grid{
  position:fixed;
  inset:0;
  z-index:-3;
  opacity:.05;
  background-image:
    linear-gradient(rgba(11,26,36,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,26,36,.7) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center, black 15%, transparent 85%);
  pointer-events:none;
}

.ambient{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}

.ambient::before,
.ambient::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(44px);
  opacity:.26;
  animation:floatSlow 18s ease-in-out infinite;
}

.ambient::before{
  width:420px;
  height:420px;
  background:radial-gradient(circle, rgba(11,26,36,.12), transparent 70%);
  top:10%;
  left:-120px;
}

.ambient::after{
  width:520px;
  height:520px;
  background:radial-gradient(circle, rgba(11,26,36,.10), transparent 72%);
  right:-150px;
  bottom:5%;
  animation-delay:3s;
}

.container{
  width:min(1220px, calc(100% - 40px));
  margin-inline:auto;
}

.signal-bar{
  position:sticky;
  top:0;
  z-index:70;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(11,26,36,.06);
}

.signal-inner{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.signal-left,
.signal-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.signal-left span,
.signal-right span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--muted2);
}

.nav{
  position:sticky;
  top:34px;
  z-index:60;
  border-bottom:1px solid rgba(11,26,36,.06);
  background:rgba(244,244,242,.72);
  backdrop-filter:blur(16px);
}

.nav-inner{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand img{
  height:46px;
  width:auto;
  filter:drop-shadow(0 6px 16px rgba(11,26,36,.08));
}

.nav-links{
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}

.nav-links a{
  position:relative;
  font-size:12px;
  letter-spacing:.24em;
  color:var(--muted);
  transition:.25s ease;
  text-transform:uppercase;
  padding:8px 0;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg, rgba(11,26,36,.55), transparent 85%);
  transition:transform .28s ease;
}

.nav-links a:hover{
  color:var(--text);
}

.nav-links a:hover::after{
  transform:scaleX(1);
}

.btn{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 26px;
  border-radius:18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:.25s ease;
  border:1px solid transparent;
  cursor:pointer;
}

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

.btn-dark{
  background:var(--dark);
  color:#fff;
  box-shadow:0 18px 50px rgba(11,26,36,.16);
}

.btn-dark:hover{
  box-shadow:0 24px 70px rgba(11,26,36,.22);
}

.btn-light{
  background:rgba(255,255,255,.82);
  color:var(--text);
  border-color:var(--line);
  box-shadow:0 12px 34px rgba(11,26,36,.05);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:42px 0 56px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:34px;
  align-items:center;
  min-height:calc(100vh - 144px);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 30px rgba(11,26,36,.04);
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--dark);
  box-shadow:0 0 0 10px rgba(11,26,36,.05);
}

.eyebrow span:last-child{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.34em;
  color:var(--muted);
}

h1{
  margin:24px 0 0;
  font-size:clamp(52px,5vw,80px);
  line-height:1.01;
  letter-spacing:-.055em;
  max-width:980px;
}

.hero-text{
  margin:22px 0 0;
  max-width:860px;
  font-size:clamp(18px,1.6vw,21px);
  line-height:1.82;
  color:var(--muted);
}

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

.section-cta{
  margin-top:34px;
}

.hero-stats{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:980px;
}

.stat{
  position:relative;
  overflow:hidden;
  padding:22px 22px 24px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  min-height:178px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:.25s ease;
}

.stat::after{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(11,26,36,.12), transparent 70%);
}

.stat:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 56px rgba(11,26,36,.12);
}

.stat .label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--muted2);
}

.stat .value{
  display:block;
  margin-top:12px;
  font-size:14px;
  line-height:1.72;
  color:var(--muted);
}

.hero-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}

.visual{
  position:relative;
  width:min(100%,580px);
  aspect-ratio:1/1;
  border-radius:38px;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.22));
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow-strong);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  margin-inline:auto;
}

.visual::before{
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(11,26,36,.06);
  border-radius:28px;
}

.visual::after{
  content:"";
  position:absolute;
  inset:-15%;
  background:conic-gradient(from 120deg, rgba(11,26,36,.03), rgba(255,255,255,.18), rgba(11,26,36,.03));
  animation:spin 18s linear infinite;
  z-index:-1;
}

.halo{
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(11,26,36,.14), transparent 62%);
  filter:blur(22px);
  animation:haloPulse 6s ease-in-out infinite;
}

.ring,
.ring-soft,
.orbit-line{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.ring{
  border:1.5px solid transparent;
}

.ring1{
  width:92%;
  height:92%;
  border-top-color:rgba(11,26,36,.18);
  border-right-color:rgba(11,26,36,.08);
  animation:spin 22s linear infinite;
}

.ring2{
  width:76%;
  height:76%;
  border-left-color:rgba(11,26,36,.16);
  border-bottom-color:rgba(11,26,36,.08);
  animation:spinReverse 16s linear infinite;
}

.ring3{
  width:58%;
  height:58%;
  border-top-color:rgba(11,26,36,.12);
  border-right-color:rgba(11,26,36,.06);
  animation:spin 10s linear infinite;
}

.ring-soft{
  width:112%;
  height:112%;
  border:1px dashed rgba(11,26,36,.08);
  animation:spinReverse 34s linear infinite;
}

.orbit-line{
  width:124%;
  height:68%;
  border:1px solid rgba(11,26,36,.08);
  transform:rotate(-18deg);
}

.orbit-line::before,
.orbit-line::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--dark);
  box-shadow:0 0 0 10px rgba(11,26,36,.05);
}

.orbit-line::before{
  top:10%;
  left:16%;
  animation:orbitPulse 7s ease-in-out infinite;
}

.orbit-line::after{
  bottom:14%;
  right:18%;
  animation:orbitPulse 7s ease-in-out infinite 1.2s;
}

.logo-panel{
  position:relative;
  z-index:2;
  width:min(70%,390px);
  text-align:center;
}

.logo-panel-3d{
  width:min(74%,420px);
}

.logo-wrap{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(11,26,36,.06);
  box-shadow:0 20px 50px rgba(11,26,36,.08);
  backdrop-filter:blur(12px);
}

.logo-wrap::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-40%;
  width:60%;
  height:300%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:rotate(25deg);
  animation:logoSweep 9s linear infinite;
}

.logo-wrap-3d{
  background:rgba(255,255,255,.34);
}

.hero-logo{
  width:100%;
  filter:drop-shadow(0 22px 40px rgba(11,26,36,.14));
}

.hero-3d-logo{
  width:min(100%,280px);
  display:block;
  margin:auto;
  transform-origin:center;
  transform-style:preserve-3d;
  animation:darkvoidSpin 24s linear infinite;
  filter:drop-shadow(0 26px 50px rgba(11,26,36,.18));
}

.panel-text{
  margin:18px auto 0;
  max-width:340px;
  font-size:13px;
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--muted2);
}

.section{
  padding:84px 0;
  position:relative;
}

.section-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.34em;
  color:var(--muted2);
}

.section-head{
  max-width:920px;
}

.section-head h2{
  margin:16px 0 0;
  font-size:clamp(38px,4.7vw,58px);
  line-height:1.08;
  letter-spacing:-.04em;
}

.section-head p{
  margin:18px 0 0;
  max-width:760px;
  font-size:18px;
  line-height:1.82;
  color:var(--muted);
}

.two-col{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:28px;
}

.panel{
  border-radius:32px;
  padding:42px;
}

.panel-dark{
  background:var(--dark);
  color:#fff;
  box-shadow:var(--shadow-strong);
  position:relative;
  overflow:hidden;
}

.panel-dark::before{
  content:"";
  position:absolute;
  inset:auto -8% -40% auto;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
  filter:blur(16px);
}

.panel-dark .section-label{
  color:rgba(255,255,255,.45);
}

.panel-dark h2{
  margin:18px 0 0;
  font-size:clamp(30px,4vw,44px);
  line-height:1.12;
  position:relative;
  z-index:1;
}

.panel-light{
  background:rgba(255,255,255,.80);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.panel-light p{
  margin:0;
  font-size:18px;
  line-height:1.88;
  color:var(--muted);
}

.panel-light p + p{
  margin-top:22px;
}

.cards{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.card,
.glass-card,
.platform-card{
  border-radius:30px;
  padding:30px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.card:hover,
.glass-card:hover,
.platform-card:hover{
  transform:translateY(-4px);
}

.card{
  background:rgba(255,255,255,.84);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.card-number{
  font-size:11px;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--muted2);
}

.card h3,
.glass-card h3,
.platform-card h3{
  margin:16px 0 0;
  font-size:28px;
  line-height:1.2;
}

.card p,
.platform-card p{
  margin:16px 0 0;
  font-size:16px;
  line-height:1.78;
  color:var(--muted);
}

.platform-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}

.platform-card{
  background:var(--dark);
  color:#fff;
  box-shadow:0 18px 60px rgba(11,26,36,.14);
}

.platform-card p{
  color:rgba(255,255,255,.72);
  margin-top:14px;
  font-size:15px;
  line-height:1.8;
}

.dark-section{
  position:relative;
  color:#fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 25%),
    linear-gradient(180deg, #08131b 0%, #0b1a24 100%);
  overflow:hidden;
}

.dark-section::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

.dark-section::after{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  top:-220px;
  right:-180px;
  animation:spin 40s linear infinite;
}

.dark-section .section-label{
  color:rgba(255,255,255,.48);
}

.dark-section .section-head p{
  color:rgba(255,255,255,.68);
}

.glass-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
  position:relative;
  overflow:hidden;
}

.glass-card::after{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}

.glass-card .card-number,
.glass-card p{
  color:rgba(255,255,255,.70);
}

.glass-card h3{
  color:#fff;
}

.contact-panel{
  text-align:center;
  padding:44px 50px;
  border-radius:36px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-strong);
  position:relative;
  overflow:hidden;
  margin-top:0;
}

.contact-panel::before,
.contact-panel::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(11,26,36,.06);
  pointer-events:none;
}

.contact-panel::before{
  width:280px;
  height:280px;
  left:-80px;
  bottom:-120px;
}

.contact-panel::after{
  width:220px;
  height:220px;
  right:-60px;
  top:-100px;
}

.contact-panel h2{
  margin:16px auto 0;
  max-width:1100px;
  font-size:clamp(34px,4.8vw,58px);
  line-height:1.08;
  letter-spacing:-.04em;
  position:relative;
  z-index:1;
}

.contact-panel p{
  margin:18px auto 0;
  max-width:860px;
  font-size:18px;
  line-height:1.82;
  color:var(--muted);
  position:relative;
  z-index:1;
}

.contact-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
  position:relative;
  z-index:1;
}

.pill{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  padding:0 24px;
  border-radius:18px;
  background:rgba(11,26,36,.04);
  border:1px solid var(--line);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.footer{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(12px);
}

.footer-inner{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:14px;
  color:var(--muted);
  flex-wrap:wrap;
  padding:22px 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  align-items:center;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand img{
  height:32px;
  width:auto;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  transition:.2s ease;
}

.footer-links a:hover{
  color:var(--text);
}

.footer-meta{
  text-align:right;
  font-size:13px;
  color:var(--muted);
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}

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

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

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

@keyframes haloPulse{
  0%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:.7}
}

@keyframes logoSweep{
  0%{transform:translateX(-160%) rotate(25deg)}
  100%{transform:translateX(260%) rotate(25deg)}
}

@keyframes orbitPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.72}
}

@keyframes floatSlow{
  0%,100%{transform:translateY(0px) translateX(0px)}
  50%{transform:translateY(-18px) translateX(8px)}
}

@keyframes backgroundDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(1.2%, -1.2%, 0) scale(1.03)}
}

@keyframes darkvoidSpin{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}

@media (max-width:1180px){
  .cards{grid-template-columns:1fr 1fr}
  .platform-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-meta{text-align:left}
  h1{max-width:900px}
}

@media (max-width:1080px){
  .hero-grid,
  .two-col{grid-template-columns:1fr}
  .hero-visual{order:0}
}

@media (max-width:900px){
  .hero-stats{grid-template-columns:1fr}
  .cards,
  .platform-grid{grid-template-columns:1fr}
}

@media (max-width:760px){
  .nav{
    top:34px;
  }

  .nav-links{display:none}
  .container{width:min(100% - 28px, 1220px)}
  .section{padding:68px 0}
  .panel,
  .contact-panel,
  .card,
  .glass-card,
  .platform-card{padding:24px}
  h1{font-size:clamp(42px,13vw,58px);letter-spacing:-.05em}
  .visual{width:min(100%,440px)}
  .stat{min-height:auto}
  .hero-grid{min-height:auto}
  .hero{padding:32px 0 48px}

  .signal-inner{
    min-height:auto;
    padding:8px 0;
    flex-direction:column;
    align-items:flex-start;
  }

  .signal-left,
  .signal-right{
    gap:10px;
  }

  .footer-links{
    justify-content:flex-start;
    gap:14px;
  }
}