:root{
  --bg: #070a14;
  --text:#eef2ff;
  --line:#ffffff1a;

  --blue:#2d68ff;
  --blue2:#1b42c7;
  --orange:#ff6a2a;
  --orange2:#ff3b1f;

  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 50% -20%, rgba(110,70,255,.25), transparent 55%),
              radial-gradient(800px 700px at 0% 30%, rgba(255,120,70,.18), transparent 55%),
              radial-gradient(900px 700px at 100% 35%, rgba(80,180,255,.18), transparent 60%),
              linear-gradient(180deg, var(--bg), #050712 75%, #04050c);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.container{width:min(1160px, 92%); margin:0 auto}

/* Topbar */
.topbar{
  background: linear-gradient(180deg, rgba(6,8,18,.92), rgba(6,8,18,.72));
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.topbar-left{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:#e7ecffcc}
.topbar-item{display:flex; align-items:center; gap:8px}
.dot{width:4px;height:4px;border-radius:99px;background:#ffffff45}

/* Header/Nav */
.header{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.93));
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid #00000010;
  backdrop-filter: blur(10px);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.logo-img{height:52px; width:auto; display:block}

.nav{display:flex; gap:26px; align-items:center}
.nav-link{color:#0e1633; font-weight:500; position:relative; padding:6px 0; opacity:.7}
.nav-link:hover{opacity:1}
.nav-link.active{opacity:1}
.nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px;
  height:3px; border-radius:99px;
  background: linear-gradient(90deg, #2d68ff, #7aa7ff);
}

/* Mobile */
.burger{display:none; width:44px;height:44px;border-radius:12px; border:1px solid #00000018; background:#fff; align-items:center; justify-content:center; gap:5px}
.burger span{display:block; width:18px; height:2px; background:#0e1633; border-radius:99px}
.mobile-nav{display:none; padding:10px 0 16px; border-top:1px solid #00000010; background: rgba(255,255,255,.95)}
.mobile-nav .nav-link{display:block; padding:10px 0; opacity:.9}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:700; letter-spacing:.3px;
  border:1px solid #ffffff22; box-shadow: 0 12px 25px rgba(0,0,0,.25);
  user-select:none; transition: transform .12s ease, filter .12s ease; white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); filter:brightness(1.05)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn-top{padding:10px 16px; border-radius:12px; font-weight:800}
.btn-lg{padding:14px 22px; border-radius:14px}
.btn-card{padding:12px 18px; border-radius:14px; width:100%}
.btn-orange{background: linear-gradient(180deg, var(--orange), var(--orange2)); border-color:#ffb08a66}
.btn-blue{background: linear-gradient(180deg, var(--blue), var(--blue2)); border-color:#a9c3ff55}

/* Hero */
.hero{position:relative; padding:34px 0 0; overflow:hidden}
.hero-bg{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
              url("assets/hero-device-bg.png") center/cover no-repeat;
}
.hero-glow{
  position:absolute; inset:-40px;
  background:
    radial-gradient(600px 260px at 15% 35%, rgba(255,120,70,.40), transparent 65%),
    radial-gradient(700px 320px at 65% 35%, rgba(110,80,255,.40), transparent 70%),
    radial-gradient(620px 280px at 90% 45%, rgba(70,190,255,.25), transparent 70%);
  pointer-events:none; mix-blend-mode: screen;
}
.hero-grid{position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:center; padding:52px 0 28px}
.hero-left h1{margin:0 0 14px; font-size: clamp(34px, 4.2vw, 56px); line-height:1.06; letter-spacing:-.6px; text-shadow: 0 12px 40px rgba(0,0,0,.55)}
.hero-sub{margin:0 0 22px; color:#eaf0ffcc; font-size: clamp(15px, 1.4vw, 18px); line-height:1.55; text-shadow: 0 12px 30px rgba(0,0,0,.55)}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-right{display:flex; justify-content:flex-end}
.hero-visual{width:min(520px, 100%); border-radius: 26px; position:relative; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-visual img{width:100%; height:auto; display:block; border-radius: 22px}

/* Reviews */
.reviews-band{position:relative; padding:22px 0 26px}
.reviews-inner{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.reviews-text{font-size: clamp(18px, 2.2vw, 30px); font-weight:700; color:#eaf0ff; text-shadow: 0 12px 35px rgba(0,0,0,.55)}
.reviews-text .big{font-size:1.25em}
.stars{font-size:26px; letter-spacing:3px; color:#ffd66b; text-shadow: 0 10px 26px rgba(255,220,120,.25), 0 10px 30px rgba(0,0,0,.65)}

/* Intro */
.intro{padding:56px 0 34px}
.intro-inner{text-align:center}
.intro h2{margin:0 0 10px; font-size: clamp(26px, 3.2vw, 40px); font-weight:800; letter-spacing:-.4px}
.intro p{margin:0 0 16px; color:#dfe7ffcc; font-size:18px}
.intro-line{font-weight:800; font-size:20px; margin-top:10px; color:#eef2ff; text-shadow: 0 10px 30px rgba(0,0,0,.55)}

/* Services cards */
.services{padding:18px 0 56px}
.section-title{text-align:center; margin-bottom:22px}
.section-title .kicker{font-weight:900; font-size: clamp(22px, 2.8vw, 36px); color:#cfe1ff; text-shadow: 0 12px 35px rgba(0,0,0,.55)}
.section-title h3{margin:10px 0 6px; font-size: clamp(22px, 3vw, 36px); font-weight:900; letter-spacing:-.4px}
.section-title p{margin:0; color:#dfe7ffcc}

.cards{margin-top:22px; display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.10); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; backdrop-filter: blur(10px)}
.card-img{height:150px; overflow:hidden; position:relative}
.card-img img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:16px 16px 18px}
.card h4{margin:0 0 8px; font-size:20px; font-weight:800}
.card p{margin:0 0 14px; color:#e7ecffcc; font-size:14px; line-height:1.35}
.arrow{margin-left:auto; opacity:.9}

/* Bottom services premium */
.bottom-services{
  position:relative; padding:84px 0 94px; overflow:hidden;
  background:
    radial-gradient(1000px 420px at 50% 0%, rgba(140,80,255,.35), transparent 70%),
    radial-gradient(900px 420px at 0% 45%, rgba(255,120,70,.25), transparent 70%),
    radial-gradient(900px 420px at 100% 45%, rgba(70,190,255,.25), transparent 70%),
    linear-gradient(180deg, rgba(7,10,20,.2), rgba(5,7,18,.92));
  border-top:1px solid rgba(255,255,255,.08);
}
.stars-layer{
  position:absolute; inset:-40px;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 75% 40%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(2px 2px at 85% 80%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,.6), transparent 60%);
  opacity:.20; filter: blur(.2px);
  animation: starsMove 18s linear infinite;
  pointer-events:none;
}
@keyframes starsMove{from{transform: translate3d(0,0,0)} to{transform: translate3d(-80px, 40px, 0)}}
.glow-layer{
  position:absolute; inset:-60px;
  background:
    radial-gradient(600px 260px at 15% 35%, rgba(255,120,70,.38), transparent 65%),
    radial-gradient(720px 320px at 55% 20%, rgba(110,80,255,.42), transparent 70%),
    radial-gradient(620px 280px at 90% 45%, rgba(70,190,255,.30), transparent 70%);
  mix-blend-mode: screen; opacity:.9;
  animation: glowPulse 6.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{0%,100%{transform: translateY(0) scale(1)} 50%{transform: translateY(6px) scale(1.02)}}
.scanline{
  position:absolute; left:-20%; right:-20%; height:2px; top:30%;
  background: linear-gradient(90deg, transparent, rgba(140,80,255,.5), rgba(70,190,255,.5), transparent);
  opacity:.6; filter: blur(.2px);
  animation: scan 5.2s linear infinite;
  pointer-events:none;
}
@keyframes scan{from{transform: translateY(-80px)} to{transform: translateY(420px)}}

.bottom-title{
  position:relative; text-align:center;
  font-size: clamp(28px, 3vw, 40px);
  font-weight:900; margin:0 0 42px; color:#fff;
  text-shadow: 0 12px 35px rgba(0,0,0,.6);
}
.bottom-cards{position:relative; display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; perspective:900px}
.bottom-card{
  position:relative; padding:28px 22px; border-radius:22px;
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  text-align:center; color:#fff; transform-style: preserve-3d;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}
.bottom-card .icon{
  width:54px;height:54px;border-radius:16px; display:grid; place-items:center;
  margin:0 auto 12px; background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14); font-size:26px;
  transform: translateZ(30px);
}
.bottom-card h3{margin:0 0 10px; font-weight:900; letter-spacing:.7px; transform: translateZ(24px)}
.bottom-card p{margin:0; font-size:14px; color:#e6ecffcc; transform: translateZ(18px)}
.shine{
  position:absolute; inset:-60px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 62%);
  transform: translateX(-60%) rotate(6deg);
  opacity:0; transition: opacity .2s ease;
  pointer-events:none;
}
.bottom-card:hover .shine{opacity:1; animation: shine 1.1s ease-in-out}
@keyframes shine{from{transform: translateX(-70%) rotate(6deg)} to{transform: translateX(70%) rotate(6deg)}}
.bottom-card:hover{box-shadow: 0 30px 70px rgba(0,0,0,.62); border-color: rgba(255,255,255,.22)}
.bottom-card.purple{background: radial-gradient(600px 230px at 20% 0%, rgba(170,90,255,.45), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06))}
.bottom-card.blue{background: radial-gradient(600px 230px at 20% 0%, rgba(70,190,255,.42), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06))}
.bottom-card.gold{background: radial-gradient(600px 230px at 20% 0%, rgba(255,200,90,.38), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06))}

/* Placeholder/Footer */
.placeholder{padding:56px 0; border-top:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03)}
.placeholder p{margin:0; color:#e7ecffcc}
.footer{padding:22px 0; border-top:1px solid rgba(255,255,255,.06); color:#e7ecffcc}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hero-grid{grid-template-columns: 1fr; padding:44px 0 18px}
  .hero-right{justify-content:center}
  .cards{grid-template-columns: 1fr}
  .bottom-cards{grid-template-columns:1fr}
  .logo-img{height:44px}
}
@media (max-width: 560px){.btn-top{display:none}}


/* Map section (neon frame) */
.map-section{
  position:relative;
  padding:70px 0 85px;
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(140,80,255,.22), transparent 70%),
    radial-gradient(900px 380px at 0% 55%, rgba(255,120,70,.14), transparent 70%),
    radial-gradient(900px 380px at 100% 55%, rgba(70,190,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0));
  border-top:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.map-glow{
  position:absolute; inset:-60px;
  background:
    radial-gradient(520px 240px at 20% 35%, rgba(70,190,255,.18), transparent 70%),
    radial-gradient(620px 260px at 70% 40%, rgba(140,80,255,.22), transparent 72%);
  mix-blend-mode: screen;
  opacity:.9;
  pointer-events:none;
  animation: mapGlow 7s ease-in-out infinite;
}
@keyframes mapGlow{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.map-title{
  text-align:center;
  margin:0 0 26px;
  font-size:clamp(24px, 2.8vw, 34px);
  font-weight:900;
  text-shadow: 0 12px 35px rgba(0,0,0,.6);
}
.map-frame{
  position:relative;
  border-radius:22px;
  padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.map-frame::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:24px;
  background: linear-gradient(90deg, rgba(70,190,255,.45), rgba(140,80,255,.45), rgba(255,120,70,.35));
  filter: blur(10px);
  opacity:.35;
  pointer-events:none;
}
.map-frame iframe{
  width:100%;
  height:min(520px, 70vh);
  border:0;
  border-radius:16px;
  position:relative;
  z-index:1;
}

/* ===== UI SCALE FIX (OPTION 3 PRO) ===== */

.hero-left h1{
  margin:0 0 12px;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height:1.08;
  letter-spacing:-0.4px;
}

.hero-sub{
  margin:0 0 18px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height:1.55;
}

.btn{
  font-size: 14px;
  padding: 10px 16px;
}

.btn-lg{
  padding: 12px 18px;
  border-radius: 12px;
}

.hero-grid{
  padding: 38px 0 22px;
}

.intro{
  padding: 40px 0 24px;
}

.services{
  padding: 10px 0 42px;
}

.bottom-services{
  padding: 60px 0 68px;
}

.section-title h3,
.bottom-title{
  font-size: clamp(24px, 2.6vw, 34px);
}

.card-body{
  padding: 14px 14px 16px;
}

.card p{
  font-size: 13px;
}


/* ===== HEADER NEON ULTRA FINAL ===== */

.logo-img{
  height:72px;
  width:auto;
  filter: drop-shadow(0 0 10px rgba(120,90,255,.6));
}

@media (max-width: 980px){
  .logo-img{height:56px;}
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:
    radial-gradient(400px 120px at 20% 50%, rgba(255,120,70,.35), transparent 65%),
    radial-gradient(420px 140px at 60% 50%, rgba(110,80,255,.45), transparent 70%),
    radial-gradient(420px 140px at 85% 50%, rgba(70,190,255,.35), transparent 70%),
    linear-gradient(180deg, rgba(8,10,28,.95), rgba(5,7,18,.92));
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.header::after{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255,120,70,.35) 60deg,
      rgba(110,80,255,.45) 120deg,
      rgba(70,190,255,.35) 180deg,
      transparent 240deg,
      transparent 360deg
    );
  filter: blur(22px);
  opacity:.6;
  animation: headerSpin 12s linear infinite;
}

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

.nav-link{
  color:#eaf0ff;
  opacity:.75;
}

.nav-link:hover,
.nav-link.active{
  opacity:1;
}


/* ===== ADJUSTMENTS V2 ===== */

/* Bigger logo */
.logo-img{
  height:92px;
  width:auto;
  filter: drop-shadow(0 0 14px rgba(140,90,255,.75));
}

@media (max-width: 980px){
  .logo-img{height:64px;}
}

/* Replace spinning animation with subtle sky sparkles */
.header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 10% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 65% 40%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.35), transparent 60%);
  opacity:.35;
  animation: skySparkle 18s linear infinite;
}

@keyframes skySparkle{
  from{transform: translateY(0)}
  to{transform: translateY(40px)}
}

/* Better framing for bottom images */
.card-img{
  height:180px;
}

.card-img img{
  object-fit: cover;
  object-position: center center;
}


/* ===== LOGO FINAL & IMAGE CROP FIX ===== */

/* Bigger logo without distortion */
.logo-img{
  height:110px;
  width:auto;
  max-width:100%;
  filter: drop-shadow(0 0 18px rgba(150,100,255,.8));
}

@media (max-width: 980px){
  .logo-img{height:70px;}
}

/* Force full-bleed images in cards (remove white sides) */
.card-img{
  height:190px;
  overflow:hidden;
}

.card-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  background:#000;
}


/* ===== LOGO BANNER MODE ===== */
/* Logo fills header height like a banner */

.header{
  min-height: 160px;
  display: flex;
  align-items: center;
}

.logo-img{
  height:140px;        /* fills banner */
  max-height:100%;
  width:auto;
  margin: 0;
  filter: drop-shadow(0 0 22px rgba(160,120,255,.9));
}

.nav-inner{
  align-items:center;
}

@media (max-width: 980px){
  .header{min-height:120px;}
  .logo-img{height:95px;}
}


/* ===== THIN BANNER + OVERSIZED LOGO (OVERFLOW) ===== */

/* Make header thin */
.header{
  min-height: 80px;
  padding: 10px 0;
  overflow: visible; /* allow logo to exceed banner */
}

/* Oversized logo that overflows banner */
.logo-img{
  height:160px;               /* very large logo */
  position: relative;
  top: 20px;                  /* pushes logo down */
  z-index: 60;
  filter: drop-shadow(0 0 26px rgba(160,120,255,.95));
}

/* Keep nav aligned */
.nav-inner{
  align-items: flex-start;
}

/* Mobile adjustments */
@media (max-width: 980px){
  .header{min-height:70px;}
  .logo-img{
    height:120px;
    top: 14px;
  }
}


/* ===== FIX WHITE BAND HEIGHT + LOGO ON SEPARATE PLANE ===== */

/* Make the header band very thin */
.header{
  min-height: 60px;
  padding: 6px 0;
}

/* Keep header background subtle and not enlarged */
.header{
  background:
    linear-gradient(180deg, rgba(10,12,28,.92), rgba(6,8,18,.92));
}

/* Place logo on its own visual plane */
.brand{
  position: relative;
  z-index: 80;
}

.logo-img{
  height:150px;                 /* big logo */
  position: absolute;
  top: -20px;                   /* overlaps header */
  left: 0;
  filter: drop-shadow(0 0 28px rgba(160,120,255,.9));
}

/* Adjust nav position so it stays inside thin bar */
.nav-inner{
  align-items: center;
  min-height: 60px;
}

@media (max-width: 980px){
  .header{min-height:55px;}
  .logo-img{
    height:110px;
    top:-16px;
  }
}


/* ===== FIX LOGO NOT DISPLAYING ===== */

/* Ensure brand container is visible and positioned */
.brand{
  position: relative;
  display: flex;
  align-items: center;
}

/* Make sure header allows overflow */
.header{
  overflow: visible;
}

/* Force logo visibility */
.logo-img{
  display: block !important;
  position: relative;     /* FIX: avoid disappearing absolute */
  height:140px;
  margin-top: -40px;      /* overlaps banner without hiding */
  z-index: 999;
}

/* Mobile */
@media (max-width: 980px){
  .logo-img{
    height:100px;
    margin-top:-28px;
  }
}


/* ===== WHITE BACKGROUND FOR INTRO + SERVICES ===== */

.intro{
  background:#ffffff;
  color:#0e1633;
}

.intro h2,
.intro p,
.intro .intro-line{
  color:#0e1633;
  text-shadow:none;
}

.services{
  background:#ffffff;
}

.section-title .kicker,
.section-title h3,
.section-title p{
  color:#0e1633;
  text-shadow:none;
}

.card{
  background:#ffffff;
  border:1px solid #e6e9f2;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.card h4{color:#0e1633;}
.card p{color:#4a4f6a;}


/* ===== REDUCE NAV BAR HEIGHT ===== */

/* Thin navigation band */
.header{
  min-height: 56px !important;
  padding: 4px 0 !important;
}

/* Reduce inner spacing */
.nav-inner{
  padding: 6px 0 !important;
  min-height: 56px;
}

/* Navigation links more compact */
.nav-link{
  font-size: 14px;
  padding: 4px 0;
}

/* Mobile */
@media (max-width: 980px){
  .header{
    min-height: 50px !important;
  }
  .nav-inner{
    min-height: 50px;
    padding: 4px 0 !important;
  }
}


/* ===== ULTRA THIN NAV BAR (APPLE-STYLE) ===== */

.header{
  min-height: 44px !important;
  padding: 0 !important;
}

.nav-inner{
  min-height: 44px;
  padding: 2px 0 !important;
}

.nav-link{
  font-size: 13px;
  padding: 2px 0;
  line-height: 1.2;
}

/* Mobile */
@media (max-width: 980px){
  .header{
    min-height: 40px !important;
  }
  .nav-inner{
    min-height: 40px;
    padding: 2px 0 !important;
  }
}


/* ===== TOP INFO BAR ULTRA THIN ===== */
.topbar{
  padding: 0 !important;
}

.topbar-inner{
  min-height: 34px;
  padding: 2px 0 !important;
}

.topbar-item{
  font-size: 12px;
}

.btn-top{
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 980px){
  .topbar-inner{
    min-height: 30px;
    padding: 2px 0 !important;
  }
}


/* ===== TOPBAR REMOVED + HEADER OVER HERO ===== */

/* Disable topbar completely */
.topbar{display:none !important;}

/* Header overlays hero background */
.header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  background: transparent !important;
  border-bottom:none !important;
  backdrop-filter:none !important;
}

/* Push hero content down to avoid overlap */
.hero{
  padding-top: 120px;
}

/* Align logo and nav with hero visual */
.nav-inner{
  align-items:center;
}

/* Ensure logo remains visible */
.logo-img{
  margin-top: 0;
}


/* ===== LOGO BIGGER + LOWER ===== */

.logo-img{
  height:190px;        /* bigger logo */
  margin-top: 40px;    /* move down */
  filter: drop-shadow(0 0 30px rgba(160,120,255,.95));
}

@media (max-width: 980px){
  .logo-img{
    height:130px;
    margin-top: 28px;
  }
}


/* ===== MENU UP + BOLD ===== */

/* Move nav higher */
.nav-inner{
  align-items: flex-start;
  padding-top: 0 !important;
}

/* Raise nav links */
.nav{
  margin-top: -30px;
}

/* Bold menu font */
.nav-link{
  font-weight: 700;     /* bold */
  letter-spacing: 0.3px;
}

/* Mobile */
@media (max-width: 980px){
  .nav{
    margin-top: -18px;
  }
}


/* ===== FIX MENU VISIBILITY + MOVE UP SAFELY ===== */

/* Ensure nav is visible */
.nav{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 1000;
}

/* Move menu up without hiding */
.nav{
  margin-top: -50px;   /* move up more */
}

/* Ensure header doesn't clip menu */
.header{
  overflow: visible !important;
}

/* Menu style */
.nav-link{
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Mobile fix */
@media (max-width: 980px){
  .nav{
    margin-top: -28px;
  }
}


/* ===== MAKETTE STYLE PACK (NO WHITE TOP BAND) ===== */

/* Global typography closer to mockup */
body{
  letter-spacing: .1px;
}
h1,h2,h3,h4{
  letter-spacing: -.3px;
}

/* Nav links: brighter, underline like mockup */
.nav-link{
  font-weight: 700 !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.88) !important;
}
.nav-link.active::after{
  height: 4px;
  bottom: -12px;
  background: linear-gradient(90deg, #2d68ff, #8ec5ff);
  box-shadow: 0 8px 20px rgba(45,104,255,.35);
}
.nav-link:hover{
  color:#fff !important;
}

/* Buttons closer to mockup (bevel + glow) */
.btn{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-orange{
  background: linear-gradient(180deg, #ff7b3c, #ff3b1f) !important;
  border-color: rgba(255,170,120,.35) !important;
  box-shadow: 0 16px 34px rgba(255,72,32,.22), 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-blue{
  background: linear-gradient(180deg, #3b79ff, #1b42c7) !important;
  border-color: rgba(140,185,255,.35) !important;
  box-shadow: 0 16px 34px rgba(45,104,255,.22), 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-lg{
  padding: 13px 22px !important;
  font-weight: 800 !important;
}
.btn-card{
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}

/* Reviews band: more like mockup */
.reviews-band{
  padding: 18px 0 22px !important;
  background: linear-gradient(180deg, rgba(10,12,28,.25), rgba(10,12,28,.55)) !important;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.stars{
  font-size: 28px !important;
  text-shadow: 0 12px 28px rgba(0,0,0,.65), 0 10px 20px rgba(255,210,120,.25);
}

/* Cards like mockup (rounded, soft shadow, light section already white) */
.services{
  padding-top: 18px !important;
}
.cards{
  gap: 22px !important;
}
.card{
  border-radius: 18px !important;
  overflow: hidden;
}
.card-img{
  height: 170px !important;
}
.card-body h4{
  font-size: 20px !important;
}
.card-body p{
  font-size: 13.5px !important;
}

/* Make white section titles look like mockup */
.section-title .kicker{
  font-weight: 900 !important;
}

/* Slight vignette around hero like mockup */
.hero-bg{
  filter: saturate(1.05) contrast(1.03);
}
.hero-left h1{
  text-shadow: 0 14px 46px rgba(0,0,0,.58) !important;
}
.hero-sub{
  color: rgba(235,242,255,.86) !important;
}


/* ===== MAKETTE TOP MENU (EXACT-LIKE) ===== */

/* Top dark bar (like mockup) */
.topbar{
  background: linear-gradient(180deg, rgba(6,8,18,.95), rgba(6,8,18,.78));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  min-height: 56px;
  padding: 8px 0;
}
.topbar-left{gap:18px}
.topbar-item{font-size:14px; color: rgba(235,242,255,.88)}
.topbar-item a{color: rgba(235,242,255,.88)}
.btn-top{
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing:.4px;
}

/* White navbar (like mockup) */
.header.header-white{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
.header::after{display:none !important;} /* remove any header overlay particles */
.nav-inner{
  padding: 12px 0;
  min-height: 64px;
}
.logo-img{
  height: 56px;
  margin: 0;
  filter:none;
}
.nav{
  display:flex !important;
  gap: 30px;
}
.nav-link{
  color: rgba(14,22,51,.72) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 6px 0 !important;
  text-shadow:none !important;
}
.nav-link:hover{color: rgba(14,22,51,1) !important}
.nav-link.active{
  color: rgba(14,22,51,1) !important;
}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-12px;
  height:3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2d68ff, #79a9ff);
}

/* Burger should match white bar */
.burger{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
}

/* Ensure hero starts right below navbar (no overlay header) */
.hero{padding-top: 0 !important;}

/* Buttons like mockup (rounded + gradient) */
.btn{
  border-radius: 12px !important;
}
.btn-orange{
  background: linear-gradient(180deg, #ff7b3c, #ff3b1f) !important;
}
.btn-blue{
  background: linear-gradient(180deg, #3b79ff, #1b42c7) !important;
}
.btn-lg{
  padding: 12px 22px !important;
  border-radius: 14px !important;
}

/* Mobile */
@media (max-width: 980px){
  .nav{display:none !important;}
  .logo-img{height:48px;}
  .topbar-inner{min-height: 52px;}
}


/* ===== FIX: MENU VISIBLE + BIGGER LOGO ===== */

/* Bigger logo in white navbar */
.header.header-white .logo-img{
  height: 78px !important;
  width:auto !important;
  display:block !important;
}

/* Make sure nav menu is visible */
.header.header-white .nav{
  display:flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If screen is small, keep menu visible by allowing wrap + smaller gap */
@media (max-width: 980px){
  .header.header-white .nav{
    display:flex !important;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-end;
  }
  .header.header-white .nav-link{
    font-size: 14px !important;
  }
  .burger{display:none !important;} /* not needed if menu stays visible */
}

/* Ensure header content has enough height for larger logo but stays slim */
.header.header-white .nav-inner{
  min-height: 74px !important;
  padding: 10px 0 !important;
}

/* Make menu underline always visible */
.header.header-white .nav-link.active::after{
  bottom: -10px !important;
}


/* ===== HARD FIX: SHOW TOP MENU LIKE MAKETTE ===== */

/* Topbar fixed */
.topbar{
  position: fixed !important;
  top: 0; left:0; right:0;
  z-index: 2000 !important;
}
/* White navbar fixed under topbar */
.header.header-white{
  position: fixed !important;
  top: 56px !important;
  left:0; right:0;
  z-index: 1900 !important;
}

/* Push page content below the two bars */
body{
  padding-top: 120px !important; /* 56 + ~64 */
}

/* Ensure menu is visible on desktop */
.header.header-white .nav{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}

/* Bigger logo in navbar */
.header.header-white .logo-img{
  height: 72px !important;
  width: auto !important;
  display: block !important;
}

/* Keep navbar height slim even with bigger logo */
.header.header-white .nav-inner{
  min-height: 64px !important;
  padding: 8px 0 !important;
  align-items: center !important;
}

/* Mobile: use burger + dropdown */
@media (max-width: 980px){
  .header.header-white .nav{display:none !important;}
  .burger{display:block !important;}
  .mobile-nav{
    position: fixed;
    top: 120px;
    left: 12px;
    right: 12px;
    z-index: 3000;
  }
}


/* ===== REMOVE BLACK TOP BAR + WHITE FIXED MENU ===== */

/* Ensure topbar is gone */
.topbar{display:none !important;}

/* Fixed white menu */
.header.header-white{
  position: fixed !important;
  top: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  z-index: 3000 !important;
}

/* Push page content below menu */
body{
  padding-top: 80px !important;
}

/* Menu text: white bar, bold dark text */
.header.header-white .nav-link{
  font-weight: 800 !important;
  color: #0e1633 !important;
  font-size: 15px !important;
}

/* Active underline stronger */
.header.header-white .nav-link.active::after{
  height: 4px !important;
  background: linear-gradient(90deg,#2d68ff,#79a9ff);
}

/* Bigger logo */
.header.header-white .logo-img{
  height: 72px !important;
}

/* Navbar height */
.header.header-white .nav-inner{
  min-height: 72px !important;
}

/* Mobile */
@media (max-width: 980px){
  body{padding-top: 68px !important;}
  .header.header-white .logo-img{height:56px !important;}
}


/* ===== LOGO STYLE EXACT (LIKE YOUR SCREENSHOT) ===== */

/* Keep menu bar slim */
.header.header-white{
  overflow: visible !important; /* allow logo to overflow */
}

/* Nav container */
.header.header-white .nav-inner{
  min-height: 70px !important;
  padding: 10px 0 !important;
  align-items: flex-start !important;
}

/* Brand/logo placement: big, left, slightly overlapping */
.header.header-white .brand{
  position: relative !important;
  display: block !important;
  line-height: 0;
}

/* Logo big + positioned like mockup */
.header.header-white .logo-img{
  height: 120px !important;     /* BIG */
  width: auto !important;
  display: block !important;
  margin: -18px 0 0 -6px !important; /* up + a bit left */
  filter: none !important;       /* screenshot has clean logo */
}

/* Keep nav on the right, not affected by logo size */
.header.header-white .nav{
  margin-top: 6px !important;
  margin-left: auto !important;
}

/* Mobile: reduce but keep same style */
@media (max-width: 980px){
  .header.header-white .logo-img{
    height: 92px !important;
    margin: -14px 0 0 -4px !important;
  }
  .header.header-white .nav-inner{
    min-height: 62px !important;
  }
}


/* ===== LOGO ON SEPARATE PLANE (BAND DOES NOT GROW) ===== */

/* Keep white menu band slim */
.header.header-white{
  height: 70px !important;
  min-height: 70px !important;
  overflow: visible !important;
}

/* Logo lives on its own layer */
.header.header-white .brand{
  position: absolute !important;
  left: 20px;
  top: 0;
  z-index: 5000 !important;
}

/* Very large logo, independent from menu height */
.header.header-white .logo-img{
  height: 140px !important;
  width: auto !important;
  margin-top: -30px !important;  /* overlap hero */
  pointer-events: auto;
}

/* Keep nav unaffected */
.header.header-white .nav{
  position: relative;
  z-index: 100;
  margin-left: auto !important;
}

/* Mobile */
@media (max-width: 980px){
  .header.header-white{
    height: 62px !important;
    min-height: 62px !important;
  }
  .header.header-white .logo-img{
    height: 105px !important;
    margin-top: -22px !important;
  }
}


/* ===== LOGO EVEN BIGGER + LOWER ===== */

.header.header-white .logo-img{
  height: 180px !important;      /* MUCH bigger */
  width: auto !important;
  margin-top: -10px !important;  /* move down */
}

.header.header-white .brand{
  top: 10px !important;          /* push logo block down */
}

/* Mobile */
@media (max-width: 980px){
  .header.header-white .logo-img{
    height: 130px !important;
    margin-top: -6px !important;
  }
  .header.header-white .brand{
    top: 8px !important;
  }
}


/* ===== LOGO SLIGHTLY UP (FINE ADJUST) ===== */

.header.header-white .logo-img{
  height: 180px !important;      
  margin-top: -22px !important;  /* move a bit UP */
}

.header.header-white .brand{
  top: -2px !important;          /* slight up */
}

/* Mobile */
@media (max-width: 980px){
  .header.header-white .logo-img{
    height: 130px !important;
    margin-top: -18px !important;
  }
  .header.header-white .brand{
    top: -2px !important;
  }
}


/* ===== MOBILE MENU BUTTON MOVE RIGHT ===== */

@media (max-width: 980px){
  /* Force burger button to far right and above logo */
  .burger{
    position: absolute !important;
    right: 16px !important;
    top: 18px !important;
    z-index: 6000 !important;
  }

  /* Ensure logo does not cover burger */
  .header.header-white .brand{
    z-index: 2000 !important;
  }
}