/* =====================================================================
   site.css — page chrome, light SaaS theme. Depends on atlx.css tokens.
   ===================================================================== */

/* ---------------------------------------------------------- HEADER
   Sticky + shrinks on scroll: height and logo size step down once
   .is-stuck is applied by JS after a small scroll threshold. */
.site-head {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck { border-bottom-color:var(--line); box-shadow:var(--sh-xs); }
.site-head__inner {
  display:flex; align-items:center; gap:var(--s-6); height:80px;
  transition:height var(--dur) var(--ease);
}
.site-head.is-stuck .site-head__inner { height:64px; }

/* ---------------------------------------------------------- BRAND
   Two-tone wordmark matching the real logo artwork exactly: "ATHARV" in
   the normal heading colour, "LOGIX" in --brand-orange, with
   "TECHNOLOGIES" tracked out small below. --brand-orange is also what
   --primary and --accent resolve to (see atlx.css) — the whole site
   uses this one brand colour, not a different one for the logo and
   another for everything else. */
.brand { display:flex; align-items:center; gap:var(--s-3); flex:0 0 auto; }
.brand img { transition:width var(--dur) var(--ease), height var(--dur) var(--ease); }
.site-head.is-stuck .brand img { width:30px; height:30px; }
.brand__word { display:flex; flex-direction:column; line-height:1; }
.brand__word b {
  font-family:var(--f-display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.01em; color:var(--secondary);
}
.brand__word b i { font-style:normal; color:var(--brand-orange); }
.brand__word small {
  font-family:var(--f-mono); font-size:8px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-3); margin-top:3px;
}

/* ---------------------------------------------------------- DESKTOP NAV */
.nav-bar { display:none; margin-inline:auto; }
.nav__list { display:flex; align-items:center; gap:var(--s-2); }
.nav__item { position:relative; }
.nav__link {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.6rem .9rem; border:0; background:none; cursor:pointer; border-radius:var(--r-full);
  font-size:var(--t-sm); font-weight:600; color:var(--text-2);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover,.nav__link.is-active,.nav__link[aria-expanded="true"] {
  color:var(--primary); background:var(--primary-50);
}
.nav__caret {
  width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--dur) var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret { transform:rotate(-135deg) translateY(-1px); }

.site-head__tools { display:flex; align-items:center; gap:var(--s-3); margin-left:auto; }
.icon-btn {
  display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--bg); color:var(--text-2); cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { border-color:var(--primary); color:var(--primary); }

/* ---------------------------------------------------------- BURGER */
.nav-burger { flex-direction:column; gap:5px; }
.nav-burger span { display:block; width:18px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .28s var(--ease), opacity .2s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------- MOBILE DRAWER
   Sibling of <header> — see the note in includes/header.php. */
.mnav {
  position:fixed; inset:0 0 0 auto; z-index:90;
  width:min(400px,92vw); display:flex; flex-direction:column;
  background:var(--bg); border-left:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); visibility:hidden;
  transition:transform .34s var(--ease), visibility .34s;
}
.mnav.is-open { transform:none; visibility:visible; }
.mnav__top { display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-5) var(--s-6); border-bottom:1px solid var(--line); }
.mnav__list { padding:0 var(--s-6); flex:1; }
.mnav__list > li { border-bottom:1px solid var(--line); }
.mnav__link,.mnav summary {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-5) 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:var(--t-lg); font-weight:700; color:var(--secondary);
}
.mnav summary::-webkit-details-marker { display:none; }
.mnav summary::after { content:"+"; font-size:1.2rem; color:var(--text-3); font-weight:400; }
.mnav details[open] summary::after { content:"\2013"; }
.mnav__link.is-active { color:var(--primary); }
.mnav__sub { padding:0 0 var(--s-5); display:grid; gap:var(--s-1); }
.mnav__sub a { display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) 0;
  font-size:var(--t-base); color:var(--text-2); }
.mnav__sub a:hover { color:var(--primary); }
.mnav__code {
  flex:0 0 auto; min-width:44px; text-align:center; padding:3px var(--s-2); border-radius:var(--r-xs);
  background:var(--primary-50); color:var(--primary); font-size:10px; font-weight:700;
}
.mnav__foot { padding:var(--s-6); border-top:1px solid var(--line); display:grid; gap:var(--s-3); }
.mnav__call { text-align:center; font-size:var(--t-sm); color:var(--text-2); padding-top:var(--s-2); }
.nav-scrim { position:fixed; inset:0; z-index:85; background:rgba(15,23,42,.5); }
.nav-scrim[hidden] { display:none; }

/* ---------------------------------------------------------- MEGA */
.mega {
  position:absolute; left:0; right:0; top:100%;
  background:var(--bg); border-block:1px solid var(--line);
  box-shadow:var(--sh-lg); border-radius:0 0 var(--r-lg) var(--r-lg);
}
.mega[hidden] { display:none; }
.mega__inner { display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:var(--s-12); padding-block:var(--s-10); }
.mega--compact .mega__inner { grid-template-columns:1fr; }
.mega__intro h3 { font-size:var(--t-lg); margin-bottom:var(--s-4); }
.mega__intro .link { margin-top:var(--s-5); }
.mega__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-2); }
.mega__item { display:flex; gap:var(--s-5); align-items:flex-start; padding:var(--s-4) var(--s-5);
  border-radius:var(--r); transition:background var(--dur) var(--ease); }
.mega__item:hover { background:var(--surface-2); }
.mega__code {
  flex:0 0 auto; display:grid; place-items:center; min-width:48px; height:28px; border-radius:var(--r-xs);
  background:var(--primary-50); color:var(--primary); font-size:10px; font-weight:700;
}
.mega__text strong { display:block; font-size:var(--t-base); font-weight:700; color:var(--secondary); }
.mega__text small { display:block; color:var(--text-3); font-size:var(--t-sm); line-height:1.5; margin-top:2px; }
.mega__cols { columns:4; column-gap:var(--s-8); }
.mega__cols li { break-inside:avoid; }
.mega__cols a { display:block; padding:var(--s-2) 0; color:var(--text-2); font-size:var(--t-sm); font-weight:500; }
.mega__cols a:hover { color:var(--primary); }

.nav-only-lg { display:none; }
@media (min-width:1024px) {
  .nav-bar { display:block; }
  .nav-only-lg { display:inline-flex; }
  .nav-burger { display:none; }
  .mnav,.nav-scrim { display:none !important; }
}
@media (max-width:1023px) { .mega { display:none !important; } .brand__word small { display:none; } }

/* ---------------------------------------------------------- HERO
   Large headline, generous whitespace, illustration on the right, an
   animated stat readout beneath it. No dark section anywhere. */
.hero { padding-block:clamp(56px,8vw,110px) var(--chapter); position:relative; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:-10% -10% auto -10%; height:70%; z-index:-1;
  background:radial-gradient(900px 480px at 78% -10%, var(--primary-50), transparent 65%);
}
.hero__inner { display:grid; gap:var(--s-12); align-items:center; }
@media (min-width:1024px) { .hero__inner { grid-template-columns:1.05fr .95fr; gap:var(--s-16); } }
.hero__tagline {
  font-family:var(--f-display); font-weight:800; font-size:var(--t-lg);
  letter-spacing:-.01em; color:var(--secondary); margin-bottom:var(--s-4);
}
.hero__tagline i { font-style:normal; color:var(--brand-orange); }
.hero h1 { margin-bottom:var(--s-6); }
.hero__lead { font-size:var(--t-md); color:var(--text-2); max-width:46ch; margin-bottom:var(--s-8); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-4); margin-bottom:var(--s-8); }
.hero__proof { display:flex; flex-wrap:wrap; gap:var(--s-5); }
.hero__proof li { display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); color:var(--text-2); font-weight:500; }
.hero__proof svg { color:var(--success); flex:0 0 auto; }

.readout {
  display:flex; justify-content:space-between; gap:var(--s-5);
  padding:var(--s-6); margin-top:var(--s-6); border-radius:var(--r-lg);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--sh);
}
.readout__v { font-family:var(--f-display); font-size:var(--t-lg); font-weight:800; color:var(--secondary); display:block; line-height:1; }
.readout__l { color:var(--text-3); font-size:11px; font-weight:600; letter-spacing:.02em; margin-top:4px; display:block; }

/* ---------------------------------------------------------- FOOTER */
.site-foot { background:var(--surface-2); border-top:1px solid var(--line); padding-block:var(--s-16) var(--s-8); }
.site-foot h4 { font-size:var(--t-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--s-5); }
.foot__grid { display:grid; gap:var(--s-10); grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.foot__brand { grid-column:1 / -1; max-width:32rem; }
@media (min-width:900px) { .foot__brand { grid-column:span 2; } }
.foot__brand p { color:var(--text-2); margin-top:var(--s-5); font-size:var(--t-sm); }
.foot__tagline {
  color:var(--secondary) !important; font-weight:600; margin-top:var(--s-3) !important;
  font-size:var(--t-sm);
}
.foot__tagline i { font-style:normal; color:var(--brand-orange); }
.foot__list { display:grid; gap:var(--s-3); }
.foot__list a { color:var(--text-2); font-size:var(--t-sm); transition:color var(--dur) var(--ease); }
.foot__list a:hover { color:var(--primary); }
.foot__newsletter { display:flex; gap:var(--s-2); margin-top:var(--s-5); max-width:320px; }
.foot__newsletter .input { border-radius:var(--r-full); }
.foot__newsletter .btn { border-radius:var(--r-full); padding-inline:1.2rem; }
.foot__map {
  margin-top:var(--s-6); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/10; background:var(--surface-3);
}
.foot__pricing { grid-column:1/-1; padding-top:var(--s-8); border-top:1px solid var(--line); }
.foot__pricing-row { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; justify-content:space-between; }
.foot__bottom {
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  margin-top:var(--s-16); padding-top:var(--s-6); border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--text-3);
}
.foot__legal { display:flex; flex-wrap:wrap; gap:var(--s-5); }
.foot__legal a:hover { color:var(--primary); }
.foot__social { display:flex; gap:var(--s-2); }
.foot__social a { display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-full);
  border:1px solid var(--line); color:var(--text-2); background:var(--bg);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.foot__social a:hover { border-color:var(--primary); color:var(--primary); }