/* ===========================
   Clean Hero (Section 1 only)
   Responsive + fast load
   =========================== */

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #ffffff;
  background: #0b0f18;
  line-height: 1.4;
}

.page { min-height: 100%; }

/* Container */
.container {
  width: min(1100px, calc(100% - 2rem));
  margin-inline: auto;
}

/* HERO layout */
.hero {
  position: relative;
  min-height: 100svh; /* modern mobile safe viewport */
  min-height: 100vh;  /* fallback */
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Video / media layer */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0b0f18;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0); /* helps some GPUs */
}

/* Fallback layer:
   - shown if video can't autoplay or isn't supported */
.hero__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(120, 167, 255, 0.25), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(255, 135, 205, 0.20), transparent 55%),
    linear-gradient(180deg, rgba(11, 15, 24, 0.35), rgba(11, 15, 24, 0.85));
  opacity: 0; /* JS toggles to 1 if needed */
  pointer-events: none;
}

/* Overlay to keep text readable on all videos */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.60) 100%),
    radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  pointer-events: none;
}

/* Content */
.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vw, 5rem) 0;
  width: 100%;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  font-size: 0.85rem;
}

.headline {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.subhead {
  margin: 0 0 1.5rem;
  max-width: 48ch;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  opacity: 0.92;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
  user-select: none;
}

.btn:focus {
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: 3px;
}

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

.btn--primary {
  background: rgba(255,255,255,0.95);
  color: #0b0f18;
  border-color: rgba(255,255,255,0.9);
}

.btn--ghost {
  background: rgba(11, 15, 24, 0.25);
  color: #ffffff;
}

.note {
  margin: 0;
  opacity: 0.85;
  font-size: 0.95rem;
  max-width: 60ch;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(255,255,255,0.12);
  padding: 0.15em 0.35em;
  border-radius: 6px;
}

/* Respect reduced motion: show fallback instead of autoplay video */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__fallback { opacity: 1; }
}

/* Small screens: tighten spacing */
@media (max-width: 420px) {
  .actions { gap: 0.6rem; }
  .btn { width: 100%; }
}

/* Logo (IMG element): true top-center + SMALL */
.hero__logo{
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  z-index:999;
  pointer-events:none;
  display:block;
  /* size is enforced inline for mobile; keep here as fallback */
  width:60px !important;
  max-width:60px !important;
  height:auto !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}

@media (min-width: 768px){
  .hero__logo{
    width:80px !important;
    max-width:80px !important;
  }
}


/* ===========================
   Top Navigation (Buttons Only)
   =========================== */
.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:1001;
  padding: 10px 0;
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.site-header__left{
  display:flex;
  align-items:center;
  gap: 0.75rem;
  min-width: 0;
}

/* Desktop nav */
.nav{
  display:flex;
  align-items:center;
  gap: 0.9rem;
}

.nav__link{
  color:#fff;
  text-decoration:none;
  font-weight:650;
  letter-spacing:0.01em;
  font-size: 0.98rem;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(11, 15, 24, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.nav__link:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.30); }
.nav__link:focus{ outline:2px solid rgba(255,255,255,0.65); outline-offset: 3px; }

.site-header__right{
  display:flex;
  align-items:center;
  gap:0.6rem;
  margin-left:auto; /* FORCE FAR RIGHT */
}

/* Smaller buttons for top bar */
.btn--sm{
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
}

/* Hamburger (mobile) */
.hamburger{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(11, 15, 24, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display:none; /* shown on mobile */
  position: relative;
  box-shadow:
    0 0 0 0 rgba(120, 167, 255, 0.0),
    0 0 0 0 rgba(255, 135, 205, 0.0);
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease;
}

.hamburger:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.35);
  box-shadow:
    0 0 18px rgba(120, 167, 255, 0.35),
    0 0 18px rgba(255, 135, 205, 0.25);
}

.hamburger:focus{ outline:2px solid rgba(255,255,255,0.65); outline-offset: 3px; }

/* 3 glowing lines */
.hamburger__lines,
.hamburger__lines::before,
.hamburger__lines::after{
  content:"";
  position:absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  transform: translateX(-50%);
  border-radius: 999px;
  box-shadow:
    0 0 10px rgba(120, 167, 255, 0.45),
    0 0 10px rgba(255, 135, 205, 0.35);
}
.hamburger__lines{ top: 50%; }
.hamburger__lines::before{ top: -6px; }
.hamburger__lines::after{ top: 6px; }

/* Mobile menu */
.mobile-menu[hidden]{ display:none; }

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.mobile-menu__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}

.mobile-menu__panel{
  position:absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(11, 15, 24, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.9rem;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.mobile-menu.is-open .mobile-menu__panel{
  transform: translateY(0);
  opacity: 1;
}

.mobile-menu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 0.65rem;
}

.mobile-menu__title{
  font-weight: 750;
  letter-spacing: -0.01em;
}

.mobile-menu__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
}

.nav--mobile{
  display:flex;
  flex-direction:column;
  gap: 0.55rem;
}

.nav__link--mobile{
  width: 100%;
  justify-content: flex-start;
  padding: 0.75rem 0.85rem;
  font-size: 1rem;
}

/* Responsive behavior */
@media (max-width: 860px){
  .nav--desktop{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .site-header__inner{ gap: 0.75rem; }
  .btn--sm{ padding: 0.6rem 0.8rem; }
}

/* Keep logo from overlapping header too much */
.hero{
  padding-top: 64px; /* space for top nav */
}


html.no-scroll, body.no-scroll{ overflow:hidden; }




@keyframes premiumShine{
  0%   { transform: translateX(-140%) rotate(18deg); opacity: 0.0; }
  10%  { opacity: 0.55; }
  35%  { opacity: 0.10; }
  100% { transform: translateX(240%) rotate(18deg); opacity: 0.0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn--premium::before,
  .btn--premium::after,
  .btn--premium-outline::after{
    animation: none !important;
  }
}


/* ===========================
   ULTRA PREMIUM GOLD BUTTONS
   =========================== */
.btn--premium{
  position:relative;
  color:#1a1206;
  border:1px solid rgba(255,235,180,.9);
  background:linear-gradient(135deg,#fff7cf,#ffc84a 45%,#ffe9b0);
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    0 0 25px rgba(255,200,74,.8),
    0 0 60px rgba(255,220,140,.6);
  overflow:hidden;
}

.btn--premium::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:conic-gradient(from 0deg,transparent,#fff3c0,#ffcb5a,transparent);
  filter:blur(14px);
  animation:megaGlow 1.8s linear infinite;
}

.btn--premium::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:60%;
  height:220%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.9),transparent);
  transform:rotate(18deg);
  animation:megaShine 2.4s ease-in-out infinite;
}

.btn--premium:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 18px 45px rgba(0,0,0,.5),
    0 0 35px rgba(255,200,74,1),
    0 0 90px rgba(255,220,140,.8);
}

@keyframes megaGlow{
  0%{transform:scale(.95);opacity:.4}
  50%{transform:scale(1.05);opacity:1}
  100%{transform:scale(.95);opacity:.4}
}

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

@media(prefers-reduced-motion:reduce){
  .btn--premium::before,
  .btn--premium::after{animation:none}
}



.site-header .site-header__inner{
  justify-content: space-between !important;
}

.site-header__right{
  margin-left: auto !important;
  justify-content: flex-end !important;
}


/* ===========================
   HARD FIX: Header edge pinning
   Ensures right buttons are VERY RIGHT on all devices.
   =========================== */
.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:1001;
  padding: 6px 0 !important;
}

.site-header__inner{
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 6px; /* ~2-3 "spaces" from edge */
  height: 56px;   /* consistent header height */
  display:block;  /* children are absolutely positioned */
}

.site-header__left{
  position:absolute;
  left: 6px;
  top: 6px;
  display:flex;
  align-items:center;
  gap: 0.75rem;
}

.site-header__right{
  position:absolute;
  right: 6px;
  top: 6px;
  display:flex;
  align-items:center;
  gap: 0.6rem;
  justify-content:flex-end;
}

/* Keep desktop nav visible on wide screens */
@media (min-width: 861px){
  .nav--desktop{ display:flex; }
  .hamburger{ display:none; }
}

/* Mobile: show hamburger, hide desktop nav */
@media (max-width: 860px){
  .nav--desktop{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}


}


/* Mobile-only: shift logo slightly to the right (~3 spaces) */
@media (max-width: 860px){
  .hero__logo{
    left: calc(50% + 12px) !important; /* shift right */
  }
}


/* Mobile: place Free Trial next to menu button */
@media (max-width: 860px){
  .site-header__left .btn--premium{
    margin-left: 8px;
  }
}

/* Desktop: keep Free Trial + Login together on the right */
.btn--free-trial--desktop{ display:none; }

@media (min-width: 861px){
  .btn--free-trial--mobile{ display:none; }
  .btn--free-trial--desktop{ display:inline-flex; }
}


/* ===========================
   Login button (green)
   Soft glow animated (no size change)
   =========================== */
.btn--login-green{
  position: relative;
  border: 1px solid rgba(150, 255, 200, 0.55);
  color: #062212;
  background:
    linear-gradient(135deg, rgba(215, 255, 233, 0.98), rgba(64, 220, 150, 0.95) 45%, rgba(185, 255, 220, 0.98));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.40),
    0 0 18px rgba(64, 220, 150, 0.45),
    0 0 38px rgba(120, 255, 200, 0.25);
  overflow: hidden;
}

.btn--login-green::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(180, 255, 220, 0.75), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(90, 255, 190, 0.55), transparent 55%);
  filter: blur(12px);
  opacity: 0.65;
  animation: greenPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}

.btn--login-green::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-50%;
  width: 55%;
  height: 240%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: rotate(18deg);
  animation: greenShine 3.2s ease-in-out infinite;
  pointer-events:none;
}

.btn--login-green:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.45),
    0 0 22px rgba(64, 220, 150, 0.65),
    0 0 55px rgba(120, 255, 200, 0.35);
}

@keyframes greenPulse{
  0%,100%{ opacity: 0.45; transform: scale(0.98); }
  50%{ opacity: 0.85; transform: scale(1.03); }
}

@keyframes greenShine{
  0%{ transform: translateX(-160%) rotate(18deg); opacity: 0.0; }
  12%{ opacity: 0.55; }
  45%{ opacity: 0.12; }
  100%{ transform: translateX(260%) rotate(18deg); opacity: 0.0; }
}

@media (prefers-reduced-motion: reduce){
  .btn--login-green::before,
  .btn--login-green::after{ animation: none !important; }
}


/* Premium contact blocks */
.header-contact{
  margin-left:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:12px;
  line-height:1.3;
}
.mobile-contact{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
}
.contact-line{
  display:flex;
  align-items:center;
  gap:6px;
  opacity:.9;
}
.icon{font-size:14px;}
@media(max-width:768px){
  .header-contact{display:none;}
}
@media(min-width:769px){
  .mobile-contact{display:none;}
}


/* Premium pill contacts */
.pills{
 gap:8px;
}
.pill{
 display:flex;
 align-items:center;
 gap:8px;
 padding:6px 14px;
 border-radius:999px;
 background:rgba(0,0,0,.45);
 border:1px solid rgba(255,255,255,.25);
 color:#fff;
 font-size:12px;
 text-decoration:none;
 backdrop-filter:blur(6px);
 box-shadow:0 0 12px rgba(0,255,180,.25);
 transition:.25s;
}
.pill:hover{
 transform:translateY(-1px);
 box-shadow:0 0 18px rgba(0,255,180,.45);
}
.header-contact.pills{
 align-items:flex-end;
}

.mobile-contact.pills{
 margin-top:18px;
}



/* LIVE CHAT premium button */
.qs-chat-btn{
display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
background:linear-gradient(135deg, rgba(14,50,70,.95), rgba(6,18,30,.9));
border:1px solid rgba(255,215,120,.6);color:#fff;text-decoration:none;
backdrop-filter:blur(10px);box-shadow:0 0 25px rgba(255,215,120,.35);font-size:11px;
transition:.25s;
}
.qs-chat-btn:hover{transform:translateY(-2px);}

.qs-avatar{
width:26px;height:26px;border-radius:50%;
background:linear-gradient(135deg,#00c389,#0dd6ff);
box-shadow:0 0 12px rgba(255,200,90,.5);
position:relative;
}

.qs-avatar::after{
content:"";position:absolute;inset:-2px;border-radius:50%;
border:2px solid rgba(255,215,120,.6);
}

.qs-label strong{font-size:9px;letter-spacing:.12em;}
.qs-label small{font-size:9px;opacity:.8;}

.qs-status{
width:8px;height:8px;border-radius:50%;
background:#2cff9a;box-shadow:0 0 12px rgba(44,255,154,.8);
}

.qs-mobile-bar{
margin-top:20px;
display:none;
justify-content:center;
}

@media(max-width:768px){
.qs-chat-desktop{display:none;}
.qs-mobile-bar{display:flex;}
}


/* Fix: mobile header spacing & hide LIVE CHAT on mobile */
@media (max-width: 768px){
  .qs-chat-desktop{ display:none !important; }
  .qs-mobile-bar{ display:none !important; }

  /* Give the left area a bit more room so the logo stays visible */
  .site-header__left{
    gap: 10px;
  }
  /* Keep mobile Free Trial from drifting too far right */
  .btn--free-trial--mobile{
    margin-left: 6px;
  }
}


/* Upgrade LIVE CHAT avatar + animated status (desktop only) */
.qs-avatar{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%2300c389'/><stop offset='100%' stop-color='%230dd6ff'/></linearGradient></defs><rect width='100' height='100' rx='50' fill='url(%23g)'/><circle cx='50' cy='44' r='18' fill='%23f5d7b2'/><circle cx='43' cy='43' r='2.6' fill='%233b2b1f'/><circle cx='57' cy='43' r='2.6' fill='%233b2b1f'/><path d='M36 48c3 6 8 9 14 9s11-3 14-9' fill='none' stroke='%233b2b1f' stroke-width='3' stroke-linecap='round'/></svg>");
  background-size:cover;
  background-position:center;
}

/* animated multicolor live dot */
.qs-status{
  animation: livePulse 2.4s infinite;
}

@keyframes livePulse{
  0%{background:#2cff9a; box-shadow:0 0 12px #2cff9a;}
  33%{background:#27b6ff; box-shadow:0 0 14px #27b6ff;}
  66%{background:#ffe066; box-shadow:0 0 16px #ffe066;}
  100%{background:#2cff9a; box-shadow:0 0 12px #2cff9a;}
}



/* Mobile-only chat inside menu */
.qs-chat-mobile{display:none;}
@media(max-width:768px){
  .qs-chat-mobile{display:flex;}
}



/* === Glass Luxury Nav Bar (single background) === */
.glass-nav{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:
    linear-gradient(120deg, rgba(255,215,120,.18), transparent 35%),
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(14,50,70,.85), rgba(6,18,30,.8));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,215,120,.35);
  box-shadow:
    0 20px 60px rgba(0,0,0,.65),
    0 0 0 2px rgba(255,215,120,.12),
    0 0 40px rgba(255,215,120,.25);
}

/* Nav links become soft pills INSIDE bar */
.glass-nav .nav__link{
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  color:#fff;
  text-decoration:none;
  transition:.25s;
  opacity:.9;
}

.glass-nav .nav__link:hover{
  background:rgba(255,255,255,.12);
  box-shadow:0 0 18px rgba(255,215,120,.35);
  opacity:1;
  transform:translateY(-1px);
}



/* Hide glass desktop nav on mobile (hamburger only) */
@media(max-width:768px){
  .glass-nav{display:none !important;}
}



/* === Neon Green-Blue Premium Hamburger (safe cosmetic only) === */
.hamburger__lines,
.hamburger__lines::before,
.hamburger__lines::after{
  height:3px !important;
  background:linear-gradient(90deg,#2cff9a,#27b6ff);
  box-shadow:
    0 0 6px rgba(44,255,154,.6),
    0 0 10px rgba(39,182,255,.5);
  animation: neonShift 3s linear infinite;
}

/* subtle color shift */
@keyframes neonShift{
  0%{filter:hue-rotate(0deg);}
  100%{filter:hue-rotate(40deg);}
}

/* hover boost (desktop only) */
@media(min-width:769px){
.hamburger:hover .hamburger__lines,
.hamburger:hover .hamburger__lines::before,
.hamburger:hover .hamburger__lines::after{
  box-shadow:
    0 0 10px rgba(44,255,154,.9),
    0 0 18px rgba(39,182,255,.8);
}
}



/* === Premium Mobile Hamburger Menu Panel === */
.mobile-menu__panel{
  background:
    linear-gradient(120deg, rgba(44,255,154,.12), transparent 40%),
    radial-gradient(140% 140% at 10% 0%, rgba(39,182,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,18,30,.96), rgba(2,8,14,.96));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left:1px solid rgba(44,255,154,.35);
  box-shadow:
    -10px 0 40px rgba(0,0,0,.8),
    inset 0 0 40px rgba(44,255,154,.15);
}

/* mobile menu links premium pills */
.nav__link--mobile{
  padding:12px 18px;
  margin:6px 0;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition:.25s;
}

.nav__link--mobile:hover{
  background:rgba(44,255,154,.12);
  box-shadow:
    0 0 18px rgba(39,182,255,.35),
    inset 0 0 0 1px rgba(44,255,154,.4);
  transform:translateX(4px);
}



/* === Desktop: Golden Shiny Bar around actions (chat + free trial + login + contact pills) === */
@media(min-width:769px){
  .actions-bar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 10px;
    border-radius:999px;
    background:
      radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.20), transparent 55%),
      linear-gradient(120deg, rgba(255,215,120,.22), transparent 40%),
      linear-gradient(135deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
    border:1px solid rgba(255,215,120,.45);
    box-shadow:
      0 18px 60px rgba(0,0,0,.55),
      0 0 0 2px rgba(255,215,120,.10),
      0 0 46px rgba(255,215,120,.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* subtle "star" sparkle using a tiny repeating highlight */
  .actions-bar{
    position:relative;
    overflow:hidden;
  }
  .actions-bar::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
      radial-gradient(circle at 15% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 35%),
      radial-gradient(circle at 70% 55%, rgba(255,240,190,.25), rgba(255,240,190,0) 40%),
      radial-gradient(circle at 40% 80%, rgba(255,255,255,.18), rgba(255,255,255,0) 45%);
    opacity:.55;
    pointer-events:none;
    filter: blur(0.2px);
  }
  .actions-bar > *{
    position:relative; /* keep items above sparkle */
    z-index:1;
  }
}



/* === Desktop Golden Action Bar (no size changes inside) === */
@media(min-width:769px){
.desktop-action-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  position:relative;
  background:
    linear-gradient(120deg, rgba(255,215,120,.18), transparent 35%),
    radial-gradient(140% 140% at 10% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(10,28,40,.9), rgba(4,12,20,.9));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,215,120,.45);
  box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    0 0 0 2px rgba(255,215,120,.18),
    0 0 50px rgba(255,215,120,.35);
}

/* tiny transparent gold stars */
.desktop-action-bar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background-image:
   radial-gradient(circle at 20% 30%, rgba(255,215,120,.35) 0 1px, transparent 2px),
   radial-gradient(circle at 60% 70%, rgba(255,215,120,.25) 0 1px, transparent 2px),
   radial-gradient(circle at 80% 40%, rgba(255,215,120,.3) 0 1px, transparent 2px);
  opacity:.6;
}

/* keep everything inline */
.desktop-action-bar > *{
  margin:0 !important;
}
}

/* mobile unaffected */


/* === Futuristic Tech Actions Bar (Desktop only) === */
@media(min-width:769px){
.actions-bar{
  background:
    linear-gradient(120deg, rgba(44,255,154,.18), transparent 40%),
    radial-gradient(120% 140% at 15% 0%, rgba(39,182,255,.25), transparent 55%),
    linear-gradient(180deg, rgba(6,18,30,.9), rgba(2,8,14,.9));
  border:1px solid rgba(44,255,154,.6);
  box-shadow:
    0 0 40px rgba(39,182,255,.45),
    inset 0 0 30px rgba(44,255,154,.25);
}

/* animated scan line */
.actions-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(44,255,154,.35), transparent);
  animation: techScan 4s linear infinite;
  pointer-events:none;
}

@keyframes techScan{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
}


/* === Mobile ONLY Futuristic Hamburger === */
@media(max-width:768px){

.hamburger{
  padding:10px;
  border-radius:12px;
  background:
    linear-gradient(135deg, rgba(44,255,154,.18), rgba(39,182,255,.18)),
    rgba(6,18,30,.85);
  border:1px solid rgba(44,255,154,.5);
  box-shadow:
    0 0 20px rgba(39,182,255,.45),
    inset 0 0 18px rgba(44,255,154,.25);
}

/* cyber grid glow */
.hamburger::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
  opacity:.25;
  pointer-events:none;
}

/* animated scan */
.hamburger::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:linear-gradient(90deg, transparent, rgba(44,255,154,.35), transparent);
  animation: mobileScan 3.5s linear infinite;
  pointer-events:none;
}

@keyframes mobileScan{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

}



/* === Desktop menu nudge left (ONLY desktop, no mobile change) === */
@media (min-width: 861px){
  .nav--desktop{
    margin-left: -8px; /* ~1 backspace */
  }
}
/* === End desktop nudge === */


/* ===== Header Center Logo ===== */
.header-center-logo{
  height:46px;
  margin:0 14px;
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(255,215,120,.6));
}

@media(max-width:900px){
  .header-center-logo{display:none;} /* desktop only */
}


/* ===== TOP CENTER LOGO (LOGIN PAGE ONLY) ===== */
body.login-page .top-center-logo-wrap,
body.free-trial-page .top-center-logo-wrap{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
}

body.login-page .top-center-logo,
body.free-trial-page .top-center-logo{
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,215,120,.7));
}

/* hide on mobile */
@media(max-width:900px){
  body.login-page .top-center-logo-wrap,
body.free-trial-page .top-center-logo-wrap{display:none;}
}


/* ===== Free Trial MOBILE center logo between buttons ===== */
body.free-trial-page .mobile-center-logo,
body.login-page .mobile-center-logo{
  height:46px;
  margin-left:24px; margin-right:8px;
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(255,215,120,.6));
}

@media(min-width:901px){
  body.free-trial-page .mobile-center-logo,
body.login-page .mobile-center-logo{display:none;}
}