:root{
  --bg-0:#0b1220;
  --bg-1:#0f172a;
  --ink:#e5eefb;
  --muted:#98a6c3;
  --brand:#3aa8e5;
  --brand-2:#74c0ff;
  --radius:14px;
  --shadow:0 8px 30px rgba(2,10,25,.35);
  --container: min(1120px, 92vw);
  --header-h: 64px;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--ink);
  background: #0b1020;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:var(--container);margin-inline:auto;padding-inline:12px}

/* ---------- Topbar ---------- */
.topbar{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#04121c;
  font-weight:600;
  font-size:.93rem;
}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:8px;flex-wrap:wrap;
}
.topbar__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar__phone{
  background:#fff;color:#0b1220;padding:.35rem .6rem;border-radius:999px;
  font-weight:800;line-height:1;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background: color-mix(in srgb, var(--bg-0) 94%, transparent);
  border-bottom:1px solid rgba(120,144,180,.12);
  backdrop-filter: blur(8px);
}
.site-header .container{
  display:flex;align-items:center;gap:12px;padding-block:10px;
}
.brand__logo{height:46px}

/* ---------- Nav (desktop) ---------- */
.nav{
  margin-left:auto;
  display:flex;align-items:center;gap:18px;
  flex:1;                /* allow nav area to flex between logo and CTAs */
  min-width:0;           /* prevents weird overflow calculations */
}
.nav__list{
  list-style:none;margin:0;padding:0;display:flex;gap:10px;
  flex-wrap:nowrap;      /* 🔒 keep items on a single row */
  align-items:center;
}
.nav__link{
  padding:.6rem .85rem;border-radius:12px;color:var(--ink);font-weight:600;
  position:relative;white-space:nowrap; /* 🔒 no per-item wrapping */
}
.nav__link::after{
  content:"";position:absolute;left:10px;right:10px;bottom:8px;height:2px;
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  transform:scaleX(0);transition:transform .24s ease;
}
.nav__link:hover::after{ transform:scaleX(1) }
.nav__cta{ display:flex;gap:10px;margin-left:auto } /* push CTAs to far right */

/* Make desktop nav squeeze gracefully on smaller wide screens */
@media (min-width:1025px) and (max-width:1280px){
  .nav__list{ gap:8px; }
  .nav__link{ padding:.55rem .7rem; font-size:.95rem; }
  .btn{ padding:.6rem .9rem; font-size:.95rem; }
}
@media (min-width:1025px) and (max-width:1150px){
  /* if things are still tight, hide the 'All Services' button first */
  .nav__cta .btn--outline{ display:none; }
}

/* Buttons */
.btn{padding:.7rem 1rem;border-radius: var(--radius);font-weight:700;border:1px solid transparent;white-space:nowrap}
.btn--accent{background: linear-gradient(180deg, var(--brand-2), var(--brand));color:#04121c;box-shadow: 0 6px 18px rgba(58,168,229,.35);}
.btn--outline{border-color: rgba(115,140,170,.35);background:transparent;color: var(--ink);}
.btn--sm{padding:.45rem .7rem;border-radius:999px;font-size:.9rem}
.btn--lg{padding:.9rem 1.1rem;font-size:1.05rem}

/* ---------- Toggle button visibility ---------- */
/* Hidden by default (desktop) */
.nav-toggle{
  margin-left:auto;background:transparent;border:0;color:var(--ink);
  cursor:pointer;display:none;
  gap:4px;padding:8px;border-radius:10px;z-index:101;
}
.nav-toggle__bar{width:24px;height:2px;background:var(--ink);}

/* ---------- Mobile/tablet ---------- */
@media (max-width: 1024px), (hover: none) and (pointer: coarse){
  .brand__logo{height:36px}
  .topbar .container{flex-direction:column;align-items:stretch}
  .btn--sm{font-size:.85rem;padding:.4rem .6rem}

  .nav-toggle{ display:grid !important; }  /* show hamburger */

  .nav__link::after{content:none;} /* remove underline animation */

  /* Full-screen overlay menu */
  .nav{
    position:fixed; inset:0; z-index:90;
    height:100dvh;
    background: var(--bg-1);
    display:grid; gap:16px;
    padding: calc(var(--header-h) + 12px) 16px 20px;
    transform: translateY(-110%);
    transition: transform .25s ease;
    box-shadow: var(--shadow);
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .nav[data-open="true"]{ transform: translateY(0); }

  .nav__list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:8px;
  }
  .nav__list li{ margin:0; padding:0; }
  .nav__link{
    display:block; width:100%;
    padding:1rem 1rem;
    background:#0c1528; border-radius:12px;
    font-size:1rem; line-height:1.2;
  }
  .nav__cta{ display:grid; gap:10px; grid-template-columns:1fr; margin-left:0; }
}

/* Ensure desktop nav is inline (not overlay) */
@media (min-width: 1025px){
  .nav{
    position:static; transform:none !important; height:auto;
    background:transparent; box-shadow:none; padding:0; overflow:visible;
  }
}

/* Lock body scroll & hide topbar when menu is open */
body.menu-open{ overflow:hidden; }
body.menu-open .topbar{ display:none; }

/* ---------- Demo hero ---------- */
.hero{
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(58,168,229,.15), transparent 70%),
    radial-gradient(900px 380px at 90% -10%, rgba(58,168,229,.12), transparent 70%),
    linear-gradient(180deg, #0b1220, #0b1020 60%, #0b0f1c);
  padding: 56px 0 80px;
  text-align:left;
}
.hero h1{margin:0 0 12px;font-size:clamp(26px, 6vw, 42px)}
.hero p{margin:0 0 18px;color:var(--muted);max-width:46ch}


/* === About & Benefits (fs-about) ===
   Uses existing :root color vars. */
.fs-about{
  background:#fff;
  color:#1c2638;
  padding:clamp(2rem,4vw,4rem) 1rem;
}
.fs-about__wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:2rem;
  grid-template-columns:1fr;
}

/* Copy */
.fs-about__copy h2{
  font-size:clamp(1.9rem,3vw,3rem);
  line-height:1.1;
  margin:0 0 1rem;
  color:#1f2937;
  letter-spacing:-.02em;
}
.fs-about__copy p{
  margin:0 0 1rem;
  color:#374151;
  font-size:clamp(1rem,1.2vw,1.1rem);
}
.fs-about__btn{
  display:inline-block;
  margin-top:.5rem;
  padding:.85rem 1.2rem;
  background:#f15a24;
  color:#fff;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fs-about__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 36px rgba(2,10,25,.4);
  background:#e24f1e;
}

/* Cards */
.fs-about__grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr 1fr;
}
.fs-about-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  overflow:hidden;
  display:grid;
  grid-template-rows:160px auto;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fs-about-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
}
.fs-about-card__media{
  background-image:var(--img, url('assets/image/placeholder.jpg'));
  background-size:cover;
  background-position:center;
}
.fs-about-card__title{
  margin:0;
  padding:1rem;
  text-align:center;
  font-size:1.05rem;
  font-weight:800;
  color:#4b5563;
  background:linear-gradient(#fff,#f3f4f6);
}
.fs-about-card__description{
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
}

/* Desktop layout */
@media (min-width:960px){
  .fs-about__wrap{
    grid-template-columns:1.15fr 1fr;
    align-items:start;
  }
  .fs-about__grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Reveal animation hooks */
.fs-about [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.fs-about .is-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}

