/* ===========================
   JESTTECH modern refresh (modified)
   Works with your existing markup/classes
   =========================== */

/* Brand / tokens */
:root{
  --brand-50:#eef9ff; --brand-100:#d9f0ff; --brand-400:#51b3ff;
  --brand-500:#2f8cff; --brand-600:#1e6fe6;
  --ink-900:#0a0f1a; --ink-700:#1f2633; --ink-600:#3b4657; --ink-400:#6b7483;
  --surface:#f7f9fc;
  --r-md:12px; --r-lg:16px;
  --sh-soft:0 8px 28px rgba(10,15,26,.10);
  --sh-hover:0 12px 36px rgba(10,15,26,.18);

  /* hero + nav sizing */
  --nav-h-desktop: 80px;
  --nav-h-mobile: 68px;
  --hero-extra: 8vh; /* extra height so “Features” doesn’t peek */

  /* AI neon palette */
  --ai-1:#00eaff;     /* cyan */
  --ai-2:#7c4dff;     /* violet */
  --ai-3:#00ffa3;     /* mint */
  --ai-glass: rgba(255,255,255,.88);
  --ai-glass-dark: rgba(15,21,33,.58);
}

/* -------- Preloader -------- */
#preloader{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;background:#fff;transition:opacity .5s ease,visibility .5s ease}
body.loaded #preloader{opacity:0;visibility:hidden}
#preloader img{width:84px;height:84px;filter:saturate(1.1)}

/* ===========================
   NAV – AI NEON (curved, animated)
   =========================== */
.hero .fixed-nav-container{ padding:12px; }
.hero .fixed-nav-container .hero-nav{
  position: sticky; top: 8px; z-index: 1030;
  border-radius: 22px !important;
  background: var(--ai-glass) !important;
  backdrop-filter: blur(12px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.25) !important;
  border: 1px solid rgba(10,15,26,.10) !important;
  box-shadow: 0 14px 44px rgba(10,15,26,.16) !important;
  padding: 10px 16px !important;
  overflow: hidden !important;
}
.hero .fixed-nav-container .hero-nav::before{
  /* animated neon border */
  content:""; position:absolute; inset:-1.5px; border-radius:inherit;
  padding:1.5px;
  background: linear-gradient(120deg,var(--ai-1),var(--ai-2),var(--ai-3),var(--ai-1));
  background-size: 300% 300%;
  animation: navGlow 9s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; /* show only the border ring */
  pointer-events:none;
}
/* Clean aurora + stars, no grid lines */
.hero .fixed-nav-container .hero-nav::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 220% at -10% -40%, rgba(124,77,255,.16), transparent 60%),
    radial-gradient(120% 220% at 110% -40%, rgba(0,234,255,.16), transparent 60%),
    radial-gradient(1px 1px at 8% 30%,  rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 74%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 68% 62%, rgba(255,255,255,.72) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 85% 26%, rgba(255,255,255,.80) 50%, transparent 51%);
  animation: twinkle 9s ease-in-out infinite;
  opacity:.95;
}

.hero .hero-nav .nav{min-height:var(--nav-h-desktop);align-items:center;gap:10px}
.hero .hero-nav__logo{height:56px !important;width:auto;transition:transform .2s ease}
.hero .hero-nav__logo:hover{transform:translateY(-1px) scale(1.03)}

@media (max-width:992px){
  .hero .fixed-nav-container .hero-nav{ border-radius:16px !important; top: 8px; }
  .hero .hero-nav .nav{min-height:var(--nav-h-mobile)}
  .hero .hero-nav__logo{height:44px !important}
}

/* links */
.hero .hero-nav__link{
  display:inline-flex; align-items:center; position:relative;
  padding:10px 14px; border-radius:12px;
  color:var(--ink-700); font-weight:700; letter-spacing:.2px; text-decoration:none;
  transition: color .2s ease, background-color .2s ease, transform .12s ease;
}
.hero .hero-nav__link:hover{
  color:var(--ink-900); transform: translateY(-1px);
}
.hero .hero-nav__link::after{
  /* neon underline sweep */
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px;
  background: linear-gradient(90deg,var(--ai-1),var(--ai-2),var(--ai-3));
  background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.hero .hero-nav__link:hover::after{ transform: scaleX(1); animation: sweep 2.4s linear infinite; }

/* mobile menu buttons */
button[open-nav-menu], .ft-menu__close-btn{
  border:1px solid rgba(10,15,26,.12); border-radius:10px; background:#fff; color:var(--ink-700);
  padding:.5rem .7rem; box-shadow:0 2px 8px rgba(10,15,26,.06)
}

/* CTA in navbar (Try For Free) – animated shine */
.hero .hero-nav .btn{
  border-radius:12px !important;
  background: linear-gradient(135deg, var(--ai-2), var(--ai-1)) !important;
  color:#fff !important; border:0 !important; box-shadow: 0 10px 26px rgba(47,140,255,.35);
  position:relative; overflow:hidden; transition: transform .08s ease, box-shadow .2s ease;
}
.hero .hero-nav .btn::after{
  /* moving light streak */
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 35%, transparent 70%);
  background-size: 250% 100%;
  transform: translateX(-120%);
  animation: shine 3.6s ease-in-out infinite;
  pointer-events:none;
}
.hero .hero-nav .btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 38px rgba(47,140,255,.42); }

/* mobile slide-out background */
@media (max-width:992px){
  /* Popover sheet below curved bar (no clipping) */
  .hero .fixed-nav-container .hero-nav{
    overflow: visible !important;
    padding: 8px 12px !important;
  }
  #hero-menu, .hero .hero__nav-list{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:9999;
    width:100%;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)) !important;
    border:1px solid rgba(10,15,26,.08);
    border-radius: 14px; box-shadow: 0 22px 50px rgba(10,15,26,.22);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    overflow:hidden; transform-origin:top center;
  }
  .hero .hero__nav-list .ft-menu__slider{
    max-height:70vh; overflow-y:auto; padding:8px 10px;
  }
  .hero .hero-nav__link{ padding:12px 14px; -webkit-tap-highlight-color:transparent; }
  .hero .hero-nav .btn{ width:100%; margin:6px 0 8px; text-align:center; }
}

/* ===========================
   HERO: full viewport, image at RIGHT
   =========================== */
header.hero.container-fluid{
  display:flex !important; flex-direction:column !important;
  margin-bottom:0 !important; padding-bottom:0 !important;
  min-height: calc(100vh + var(--hero-extra)) !important;
}
header.hero .hero__content{ flex:0 0 auto !important; }
header.hero .hero__row{
  display:flex !important; align-items:stretch !important;
  flex:1 1 auto !important;
  min-height: calc(100vh - var(--nav-h-desktop)) !important;
}
header.hero .hero__body{
  display:flex !important; flex-direction:column !important; justify-content:center !important;
  padding:24px 0 32px !important;
}
header.hero .hero__image-column{
  flex:1 1 45% !important;
  min-height: clamp(440px, 65vh, 860px) !important;
  background-repeat:no-repeat !important;
  background-position:right center !important;  /* right side only */
  background-size:auto 100% !important;        /* fit by height */
  border-radius:16px;
}
@media (max-width:992px){
  header.hero .hero__row{ min-height: calc(100vh - var(--nav-h-mobile)) !important; }
  header.hero .hero__image-column{
    min-height: clamp(420px, 60vh, 720px) !important;
    background-position:right center !important;
    background-size: 100% auto !important;
    border-radius:14px;
  }
}
.block-1.space-between-blocks{ margin-top:0 !important; }

/* ===========================
   BUTTONS
   =========================== */
.btn, .btn-primary, .btn-outline-primary, .btn-secondary{
  border-radius:12px !important; font-weight:700 !important; letter-spacing:.2px;
  padding:.75rem 1.15rem !important;
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}
.btn-primary, a.btn-primary{
  background:var(--brand-500) !important; border:0 !important; color:#fff !important;
  box-shadow:var(--sh-soft)
}
.btn-primary:hover{background:var(--brand-600) !important;transform:translateY(-1px);box-shadow:var(--sh-hover)}
.btn-outline-primary{
  background:transparent !important;color:var(--brand-600) !important;border:2px solid var(--brand-500) !important;box-shadow:none !important;
}
.btn-outline-primary:hover{background:var(--brand-50) !important;transform:translateY(-1px)}
.hero .hero__btn.btn{box-shadow:0 10px 30px rgba(47,140,255,.28)}
.hero .hero__btn.btn:hover{box-shadow:0 14px 40px rgba(47,140,255,.36)}

/* ===========================
   CARDS / TILES
   =========================== */
.card-1, .testimonial-card-1, .block-2-card{
  background:#fff;border:1px solid rgba(10,15,26,.08);
  border-radius:16px;box-shadow:var(--sh-soft);
  padding:24px;height:100%;
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}
.card-1:hover, .testimonial-card-1:hover, .block-2-card:hover{
  transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:rgba(10,15,26,.12)
}
.card-1__title, .block-2-card__title{color:var(--ink-900);margin-bottom:.35rem}
.card-1__paragraph, .block-2-card__paragraph{color:var(--ink-600)}
.card-1 .fr-icon, .feature-card .fr-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:var(--brand-50);color:var(--brand-600);margin-bottom:10px;
}
.block-2-card{margin:10px 0}

/* ===========================
   STATS & FAQ
   =========================== */
.stats{background:#fff;border:1px solid rgba(10,15,26,.06);border-radius:16px;box-shadow:var(--sh-soft)}
.stats__number{font-weight:800;color:var(--ink-900)}
.stats__text{color:var(--ink-600);letter-spacing:.3px}
.content-block{
  background:#fff;border:1px solid rgba(10,15,26,.08);border-radius:16px;box-shadow:var(--sh-soft);
  padding:22px;margin-bottom:18px;transition:box-shadow .2s ease,border-color .2s ease,transform .18s ease
}
.content-block:hover{transform:translateY(-2px);box-shadow:var(--sh-hover);border-color:rgba(10,15,26,.12)}
.content-block__title{color:var(--ink-900);margin-bottom:.5rem}
.content-block__paragraph{color:var(--ink-600)}

/* ===========================
   Footer links
   =========================== */
.block-44__link{color:var(--ink-600)}
.block-44__link:hover{color:var(--brand-600)}

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width:992px){
  .card-1, .testimonial-card-1, .block-2-card{padding:20px;border-radius:14px}
  .btn, .btn-primary{padding:.68rem 1rem !important}
}
@media (max-width:576px){
  .btn, .btn-primary{padding:.62rem .9rem !important}
  .stats{padding:14px}
}

/* ===========================
   Dark mode
   =========================== */
@media (prefers-color-scheme: dark){
  :root{--surface:#0f1521;--ink-900:#e7edf7;--ink-700:#cfd7e6;--ink-600:#b7c1d5;--ink-400:#97a3b8}
  body{background:#0b111b;color:var(--ink-600)}
  .hero .fixed-nav-container .hero-nav{
    background: var(--ai-glass-dark) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  }
  .hero .hero-nav__link{ color:#dfe7f5; }
  .hero .hero-nav__link:hover{ color:#ffffff; }
  .card-1, .testimonial-card-1, .block-2-card, .content-block{
    background:#121a2a;border-color:rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(0,0,0,.35)
  }
  .stats{background:#121a2a;border-color:rgba(255,255,255,.07)}
  .block-44__link{color:#b7c1d5}
  .block-44__link:hover{color:#aac8ff}
}

/* ===========================
   Animations
   =========================== */
@keyframes navGlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes sweep{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}
@keyframes shine{
  0%{ transform: translateX(-120%); }
  55%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}
@keyframes twinkle{
  0%,100%{ opacity:.94 }
  50%{ opacity:1 }
}

/* ===========================
   MOBILE FIXES + LIGHTER EFFECTS
   (kept at the end for specificity)
   =========================== */

/* respect prefers-reduced-motion on mobile */
@media (prefers-reduced-motion: reduce) and (max-width: 992px){
  .hero .fixed-nav-container .hero-nav::before,
  .hero .fixed-nav-container .hero-nav::after,
  .hero .hero-nav .nav::after { animation: none !important; }
}