/* ============================================================
   GLOBAL STYLES — shared across homepage, jotform, LSX, docs
   ------------------------------------------------------------
   Includes: variables, typography, nav, CTAs, animations,
   utilities, scroll reveal, footer base.
============================================================ */

/* -----------------------------
   THEME VARIABLES
------------------------------ */
:root{
  --accent:#2f80ed;
  --accent2:#56ccf2;

  --dark:#111;
  --light:#fff;
  --gray:#f4f4f4;

  --hero-glow: rgba(255,255,255,0.08);
  --hero-bg1:#0d0d0d;
  --hero-bg2:#101820;
  --hero-bg3:#1e3c72;
}

/* -----------------------------
   BASE TYPOGRAPHY + STRUCTURE
------------------------------ */
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--light);
  color:var(--dark);
}

h1,h2,h3{margin:0;}
a{text-decoration:none !important;color:inherit;}

/* -----------------------------
   FLOATING NAV (GLOBAL)
------------------------------ */
.masthead{
  position:fixed;
  top:22px;
  left:0;right:0;
  max-width:1100px;
  margin:0 auto;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:40px;
}

.masthead .brand{
  position:relative;top:-10px;
  width:60px;height:60px;border-radius:50%;
  background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.masthead .brand img{width:48px;height:48px;border-radius:50%;}

.masthead .nav-pill{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:1.6rem;
  padding:.8rem 1.6rem;
  min-width:min(92vw, 1000px);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin-top:-12px;
}

.nav-pill a{font-weight:600;transition:color .25s ease;}
.nav-pill a:hover{color:var(--accent);}

.masthead .hamburger{
  position:absolute;right:14px;top:10px;
  width:46px;height:46px;border-radius:12px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);
  display:none;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  z-index:3;
}

#nav-drawer{
  display:none;position:fixed;top:86px;right:12px;
  background:#fff;border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  padding:.8rem 1rem;z-index:998;
}
#nav-drawer a{display:block;padding:.6rem .4rem;font-weight:600;}
#nav-drawer a:hover{color:var(--accent);}

@media(max-width:768px){
  .masthead .nav-pill{display:none;}
  .masthead .hamburger{display:flex;}
}

/* -----------------------------
   CTA BUTTONS (GLOBAL)
------------------------------ */
.cta{
  display:inline-block;
  padding:1rem 2.2rem;
  border-radius:50px;
  font-weight:600;
  transition:.3s;
  white-space:nowrap;
}

.primary-cta{
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  color:#fff;
}
.primary-cta:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 22px rgba(47,128,237,.4);
}

.secondary-cta{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  backdrop-filter:blur(6px);
}
.secondary-cta:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 20px rgba(255,255,255,.25);
}

/* Responsive CTA container */
.cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin-top:2.2rem;
  flex-wrap:wrap;
  width:100%;
  max-width:100%;
}

@media(max-width:600px){
  .cta-row{
    flex-direction:column;
    gap:0.8rem;
  }
  .cta{
    width:100%;
    max-width:320px;
    text-align:center;
  }
}

/* -----------------------------
   SCROLL REVEAL SECTIONS
------------------------------ */
section{
  padding:6rem 2rem;
  max-width:1100px;
  margin:auto;
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease-out;
}
.visible{
  opacity:1;
  transform:translateY(0);
}

h2{text-align:center;font-size:2rem;margin-bottom:2.5rem;}

/* -----------------------------
   FOOTER (GLOBAL)
------------------------------ */
footer{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  padding:5rem 2rem;
  border-top:1px solid rgba(255,255,255,0.15);
  color:#eee;
  font-size:.9rem;
  background:linear-gradient(135deg,#0d0d0d,#101820,#1e3c72);
  border-radius:12px 12px 0 0;
}
footer a{
  color:var(--accent2);
  font-weight:500;
}