/* ============================================================
   1. TOKENS + BASE SCALE  (this is what fixes the "zoomed out")
   ============================================================ */
:root{
  --blue:#1479f5;
  --blue-dark:#0a63d4;
  --red:#941909;
  --ink:#0b0e14;
  --body:#525c6b;
  --line:#e5e9ef;
  --container:1320px;

  /* fluid type scale */
  --fs-hero:  clamp(2.6rem, 5.2vw, 4.35rem);
  --fs-h2:    clamp(2rem, 3.3vw, 3.1rem);
  --fs-h3:    clamp(1.35rem, 1.5vw, 1.6rem);
  --fs-quote: clamp(1.8rem, 3.3vw, 3.05rem);
  --fs-lead:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-body:  1rem;
  --fs-small: .9375rem;

  --pad-sec: clamp(72px, 9vw, 130px);
}

/* 18px base — the single biggest correction */
html{font-size:112.5%; scroll-behavior:smooth}
@media (max-width:575.98px){ html{font-size:106.25%} }   /* 17px */

*{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  font-family:'Outfit',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
a{text-decoration:none}
p{color:var(--body);line-height:1.72;margin-bottom:1rem}

.container, .container-lg, .container-xl, .container-xxl{
  max-width:var(--container);
  padding-inline:clamp(20px,3vw,40px);
}

.text-blue{color:var(--blue)!important}
.text-red{color:var(--red)!important}
.fw-800{font-weight:800}

.section{padding:var(--pad-sec) 0}
.eyebrow{
  color:var(--blue);font-size:1rem;font-weight:600;
  letter-spacing:.005em;margin-bottom:.65rem;
}
.h-sec{
  font-size:var(--fs-h2);font-weight:500;line-height:1.14;
  letter-spacing:-.025em;margin:0;
}
.lead-sec{
  font-size:var(--fs-lead);line-height:1.7;
  max-width:53ch;margin:1.5rem auto 0;
}
.section-divider{
  height:10px;border-radius:99px;background:#eceff4;
  max-width:1140px;margin:0 auto;
}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn-pill{
  --bs-btn-focus-box-shadow:none;
  border-radius:7px;font-size:var(--fs-small);font-weight:500;
  padding:.9rem 1.75rem;line-height:1.1;
  display:inline-flex;align-items:center;gap:.6rem;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn-pill:active{transform:translateY(1px)}
.btn-pill:hover{background: var(--red) !important; border-color: var(--red) !important; color: #fff !important}
.btn-pill i{font-size:.85em}
.btn-outline-light-x{border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-outline-light-x:hover{background:#fff;color:#0b0e14;border-color:#fff}
.btn-outline-dark-x{border:1px solid #d3dae3;color:#0b0e14;background:#fff}
.btn-outline-dark-x:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.nav-top{
  position:absolute;
  inset:0 0 auto 0;
  z-index:1030;
  padding:26px 0;
  transition:padding .3s,background .3s;
}
.nav-top.scrolled{
  position:fixed;
  padding:14px 0;
  background:rgba(8,9,12,.9);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#fff!important;
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-.015em;
}

.brand-dot{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.8rem;
  font-weight:800;
}

.nav-shell{
  border:1px solid rgba(255,255,255,.24);
  border-radius:9px;
  padding:.3rem .55rem;
}

.nav-top .nav-link{
  color:rgba(255,255,255,.88)!important;
  font-size:var(--fs-small);
  font-weight:400;
  padding:.55rem .95rem!important;
  border-radius:6px;
}

.nav-top .nav-link:hover,.nav-top .nav-link.show{
  color:#fff!important;
  background:rgba(255,255,255,.08)
}

.nav-top .dropdown-menu{
  border:0;
  border-radius:12px;
  padding:.6rem;
  margin-top:.75rem;
  font-size:var(--fs-small);
  box-shadow:0 22px 55px rgba(0,0,0,.2);
  min-width:270px;
}
.nav-top .dropdown-item{border-radius:7px;padding:.6rem .85rem}
.nav-top .dropdown-item:hover{background:#f0f6ff;color:var(--blue)}
.navbar-toggler{border-color:rgba(255,255,255,.35);padding:.4rem .6rem}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler-icon{filter:invert(1) brightness(2.4)}
@media(max-width:991.98px){
  .nav-shell{background:rgba(10,11,14,.97);margin:1rem 0;padding:.7rem}
  .nav-top .nav-link{padding:.7rem .6rem!important}
}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:min(100vh,860px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;color:#fff;
  padding:clamp(150px,20vh,220px) 0 clamp(48px,7vh,72px);
  background:
    radial-gradient(
      circle at 72% 40%,
      rgba(25,126,255,.3),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(0,210,255,.15),
      transparent 35%
    ),
    linear-gradient(125deg, #061224 0%, #09203d 52%, #063a72 100%);
}
.hero-inner{position:relative;z-index:2}
.hero h1{
  font-size:var(--fs-hero);font-weight:500;line-height:1.1;
  letter-spacing:-.03em;max-width:20ch;margin:0 auto;
}
.hero h1 b{font-weight:800}
.hero p{
  color:rgba(255,255,255,.74);font-size:var(--fs-lead);
  max-width:44ch;margin:1.85rem auto 2.4rem;
}
.hero-trusted{
  position:relative;z-index:2;margin-top:clamp(56px,9vh,96px);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.01em;color:#fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(67,170,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,170,255,.12) 1px, transparent 1px);
  background-size: 65px 65px;
  transform: perspective(600px) rotateX(55deg) scale(1.5);
  transform-origin: center bottom;
}

.hero::after {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  right: -300px;
  top: -150px;
  border-radius: 50%;
  border: 1px solid rgba(72,190,255,.2);
  box-shadow:
    0 0 0 80px rgba(72,190,255,.025),
    0 0 0 160px rgba(72,190,255,.025),
    0 0 0 240px rgba(72,190,255,.025);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}

.hero-visual {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 430px;
  height: 430px;
  opacity: .8;
}
.radar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 52px,
      rgba(72,190,255,.17) 53px 54px
    ),
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(50,200,255,.28) 30deg,
      transparent 75deg,
      transparent 360deg
    );
  border: 1px solid rgba(89,200,255,.25);
  box-shadow:
    0 0 80px rgba(0,160,255,.15),
    inset 0 0 80px rgba(0,160,255,.08);
  animation: radar-spin 9s linear infinite;
}

.radar::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: #5de3ff;
  border-radius: 50%;
  top: 23%;
  left: 67%;
  box-shadow:
    0 0 15px #5de3ff,
    0 0 35px #5de3ff;
}

.radar::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 61%;
  left: 25%;
  box-shadow:
    0 0 15px #fff,
    0 0 30px #4ecbff;
}

@keyframes radar-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   5. SOLUTION CARDS
   ============================================================ */
.soft-glow{
  background:
    radial-gradient(55% 42% at -5% -5%,rgba(20,121,245,.17),transparent 62%),
    radial-gradient(55% 42% at 105% -5%,rgba(20,121,245,.17),transparent 62%),#fff;
}

.sol-card{
  position:relative;display:block;overflow:hidden;border-radius:10px;
  height:clamp(320px,32vw,440px);background:#0b0e14;
}

.sol-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1)
}

.sol-card:hover img{
  transform:scale(1.06)
}

.sol-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 38%,rgba(0,0,0,.8));
}

.sol-card .description {
  position:absolute;
  z-index:2;
  left:clamp(20px,2vw,30px);
  right:clamp(20px,2vw,30px);
  bottom:clamp(18px,2vw,28px);
}

.sol-card .description h3 {
  margin:0;
  color:#fff;
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.01em;
}

.sol-card .description .additional {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: all .7s ease;
}

.sol-card .description .additional * {
  color: #fff;
}

.sol-card:hover .additional {
  max-height: 200px;
}

.sol-card .description a:hover, .sol-card .description a i {color: var(--red)}

/* ============================================================
   6. INDUSTRY TABS
   ============================================================ */
.ind-box{border:1px solid var(--line);border-radius:10px;padding:clamp(20px,2.4vw,36px)}
.ind-tabs{border:0;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.ind-tabs::-webkit-scrollbar{display:none}
.ind-tabs .nav-link{
  border:0!important;background:transparent;color:#5b6472;
  font-size:var(--fs-small);font-weight:600;white-space:nowrap;text-align:center;
  padding:.7rem 1.15rem;border-radius:9px;
}
.ind-tabs .nav-link i{display:block;font-size:1.5rem;margin-bottom:.5rem;color:#93a0b1}
.ind-tabs .nav-link:hover{background:#f6f9fd}
.ind-tabs .nav-link.active{color:var(--blue);background:#f2f8ff}
.ind-tabs .nav-link.active i{color:var(--blue)}
.ind-tabs .nav-link.active::after{
  content:"";display:block;height:2px;background:var(--blue);
  border-radius:2px;margin-top:.6rem;
}
.ind-desc{font-size:var(--fs-lead);color:#4a5461;max-width:75ch;margin-bottom:1.75rem}
.ind-img{width:100%;aspect-ratio:16/6.6;object-fit:cover;border-radius:6px;display:block}
@media(max-width:575.98px){.ind-img{aspect-ratio:16/10}}

/* ============================================================
   7. TECHNOLOGY CARDS
   ============================================================ */
.tech-card{
  height:100%;
  border-radius:14px;
  color:#fff;
  padding:clamp(28px,2.6vw,40px);
  background:linear-gradient(165deg,#1c86ff,#0d6adf);
  box-shadow:0 34px 60px -34px rgba(20,121,245,.75);
  display:flex;
  flex-direction:column;
  text-align: center
}

.tech-icon{
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 4rem;
  background: none;
  border: 16px solid rgba(255, 255, 255, .34);
  margin-bottom: clamp(48px, 6vw, 86px);
  margin: 0 auto 60px;
}
.tech-card h4{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;margin-bottom:.7rem}
.tech-card p{color:rgba(255,255,255,.9);font-size:var(--fs-small);line-height:1.65;margin:0}

/* ============================================================
   8. DEMO BAND
   ============================================================ */
.demo-band{
  position:relative;color:#fff;padding:clamp(80px,10vw,140px) 0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.84) 42%,rgba(0,0,0,.4) 100%),
    url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=2200&q=75") center/cover no-repeat;
}
.demo-band h2{
  font-size:var(--fs-h2);font-weight:500;line-height:1.16;
  letter-spacing:-.025em;margin-bottom:1.25rem;
}
.demo-band h2 b{font-weight:800;display:block}
.demo-band p{color:rgba(255,255,255,.76);font-size:var(--fs-lead);max-width:48ch;margin-bottom:2rem}

/* ============================================================
   9. TESTIMONIALS
   ============================================================ */
.testi-wrap{
  position:relative;
  background:
    radial-gradient(36% 46% at -2% 50%,rgba(20,121,245,.22),transparent 66%),
    radial-gradient(36% 46% at 102% 50%,rgba(20,121,245,.22),transparent 66%),#fff;
}
.quote{
  font-size:var(--fs-quote);font-weight:500;line-height:1.26;
  letter-spacing:-.03em;color:var(--ink);
  max-width:24ch;margin:0 auto;
}
.quote b{font-weight:700;color:var(--blue)}
.testi-link{font-size:.875rem;color:#6b7280;display:inline-flex;align-items:center;gap:.4rem}
.testi-link:hover{color:var(--blue)}
.logo-mark{
  font-weight:800;font-size:.9rem;text-transform:uppercase;
  letter-spacing:.18em;display:inline-flex;align-items:center;gap:.45rem;
}
.testi-author{font-size:var(--fs-small);font-weight:700;line-height:1.35}
.testi-author span{display:block;font-weight:400;color:#6b7280;font-size:.875rem}
.carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:50px;height:50px;border:0;border-radius:50%;
  display:grid;place-items:center;font-size:1.05rem;
  background:var(--blue);color:#fff;
  box-shadow:0 12px 26px -8px rgba(20,121,245,.65);
  transition:filter .2s,transform .2s;
}
.carousel-nav:hover{filter:brightness(1.08);transform:translateY(-50%) scale(1.06)}
.carousel-nav.prev{left:2%;background:#dde8f7;color:#7c8798;box-shadow:none}
.carousel-nav.next{right:2%}
@media(min-width:1200px){.carousel-nav.prev{left:8%}.carousel-nav.next{right:8%}}
@media(max-width:767.98px){
  .carousel-nav{width:40px;height:40px;font-size:.9rem;top:auto;bottom:-70px;transform:none}
  .carousel-nav:hover{transform:none}
  .carousel-nav.prev{left:26%} .carousel-nav.next{right:26%}
  .testi-dots{margin-bottom:56px}
}
.testi-dots{display:flex;gap:10px;justify-content:center;margin-top:clamp(32px,4vw,52px)}
.testi-dots button{
  width:11px;height:11px;border-radius:50%;border:0;background:#d5dde8;padding:0;
  transition:background .2s,transform .2s;
}
.testi-dots button.active{background:var(--blue);transform:scale(1.1)}

/* ============================================================
   10. RESOURCE POSTS
   ============================================================ */
.post-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
.post h5{
  font-size:var(--fs-small);font-weight:700;line-height:1.45;
  margin:1.15rem 0 .6rem;letter-spacing:-.005em;transition:color .2s;
}
.post p{font-size:.875rem;color:#7a828f;line-height:1.65;margin:0}
.post a{color:inherit;display:block}
.post a:hover h5{color:var(--blue)}

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer{background:#000;color:#fff;overflow:hidden;padding-top:clamp(64px,8vw,110px)}
.news-card{
  background:#141517;border:1px solid #24262a;border-radius:12px;
  padding:clamp(26px,3vw,44px);
}
.news-card h4{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;margin-bottom:.55rem}
.news-card p{color:#9aa2ae;font-size:var(--fs-small);margin:0;max-width:48ch}
.news-card .form-control{
  background:#0a0b0c;border:1px solid #2e3035;color:#fff;
  font-size:var(--fs-small);border-radius:6px;padding:.85rem 1.1rem;
}
.news-card .form-control::placeholder{color:#767d88}
.news-card .form-control:focus{background:#0a0b0c;color:#fff;border-color:var(--blue);box-shadow:none}
.btn-join{
  background:#fff;color:#000;font-size:var(--fs-small);font-weight:600;
  border-radius:6px;padding:.85rem 1.75rem;border:0;transition:.25s;
}
.btn-join:hover{background:var(--blue);color:#fff}
.f-note{color:#8b929d;font-size:.8125rem;margin-top:.85rem}
.f-note a{color:#8b929d;text-decoration:underline}
.f-title{font-size:var(--fs-small);font-weight:700;margin-bottom:1.15rem}
.f-links a{display:block;color:#a7aeb8;font-size:.9375rem;margin-bottom:.7rem;transition:color .2s}
.f-links a:hover{color:#fff}
.f-text{color:#a7aeb8;font-size:.9375rem}
a.f-text:hover{color:#fff}
.f-soc a{
  width:38px;height:38px;border-radius:8px;background:var(--blue);color:#fff;
  display:inline-grid;place-items:center;font-size:1rem;margin-right:.55rem;transition:.25s;
}
.f-soc a:hover{background:#fff;color:var(--blue)}
.f-brand{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.25rem;color:#fff}
.watermark{
  font-size:clamp(3.5rem,13.2vw,11.5rem);font-weight:700;letter-spacing:-.035em;
  line-height:.85;color:#141517;white-space:nowrap;text-align:center;
  margin:clamp(48px,6vw,90px) 0 -.14em;user-select:none;pointer-events:none;
}
.f-bottom{border-top:1px solid #1d1e21;padding:26px 0;position:relative;z-index:2}
.f-bottom,.f-bottom a{color:#8b929d;font-size:.8125rem}
.f-bottom a:hover{color:#fff}
.f-legal a{display:inline-block;margin-right:1.6rem;margin-bottom:.4rem}

/* chat FAB */
.chat-fab{
  position:fixed;right:26px;bottom:26px;z-index:1050;
  width:60px;height:60px;border-radius:50%;
  background:#fff;color:#0b0e14;border:1px solid #e3e7ed;
  display:grid;place-items:center;font-size:1.4rem;
  box-shadow:0 18px 38px -12px rgba(0,0,0,.35);transition:.25s;
}
.chat-fab:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-2px)}

@media(max-width:575.98px){.chat-fab{width:52px;height:52px;font-size:1.2rem;right:16px;bottom:16px}}