/* PowerFleet marketing site — base, layout, nav, footer.
   Mobile-first. Philosophy: confident operational clarity. */
@import url("tokens.css");
@import url("components.css");
@import url("sections.css");

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }   /* ensure the attribute wins over component display rules */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
img,svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:none; box-shadow:var(--shadow-focus); border-radius:var(--border-radius-xs); }

/* ---------- base ---------- */
body {
  font-family:var(--font-family-body);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  color:var(--color-text-primary);
  background:var(--color-bg-primary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { font-family:var(--font-family-display); font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-snug); letter-spacing:var(--letter-spacing-tight); color:inherit; }
p { max-width:var(--max-width-content); }
strong { font-weight:var(--font-weight-semibold); }

/* ---------- layout ---------- */
.container { width:100%; max-width:var(--max-width-wide); margin-inline:auto;
  padding-inline:var(--gutter-page); }
.section { padding-block:var(--section-pad-y); }
@media (min-width:1024px){ .section { padding-block:var(--section-pad-y-lg); } }
.section--tint { background:var(--color-bg-tint); }
.section--navy { background:var(--color-bg-inverse); color:var(--color-text-inverse); }
.skip-link { position:absolute; left:var(--space-4); top:-3rem; z-index:200;
  background:var(--pf-navy-900); color:#fff; padding:var(--space-2) var(--space-4);
  border-radius:var(--border-radius-sm); transition:top var(--duration-fast) var(--easing-out); }
.skip-link:focus { top:var(--space-3); }

/* ---------- type helpers ---------- */
.display { font-family:var(--font-family-display); font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-tighter); line-height:var(--line-height-tight); }
.lead { font-size:var(--font-size-md); color:var(--color-text-secondary);
  line-height:var(--line-height-relaxed); }
.section-head { max-width:var(--max-width-content); margin-bottom:var(--space-6); }
.section-head h2 { font-size:var(--font-size-2xl); }
@media (min-width:1024px){ .section-head h2 { font-size:var(--font-size-3xl); } }

/* ============================================================
   NAVIGATION — sticky, condenses on scroll, mobile drawer
   ============================================================ */
.site-nav { position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--pf-navy-900) 92%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--color-border-inverse);
  color:var(--color-text-inverse);
  transition:background var(--duration-normal) var(--easing-default); }
.site-nav__inner { display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-height); max-width:var(--max-width-page); margin-inline:auto;
  padding-inline:var(--gutter-page);
  transition:height var(--duration-normal) var(--easing-default); }
.site-nav[data-scrolled="true"] .site-nav__inner { height:var(--nav-height-scrolled); }
.site-nav[data-scrolled="true"] { box-shadow:0 6px 24px rgba(8,12,20,0.35); }

.brand { display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-family-display); font-weight:var(--font-weight-bold);
  font-size:var(--font-size-md); letter-spacing:-0.01em; color:#fff; }
.brand__k { width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--pf-orange-500); color:var(--pf-navy-900);
  font-weight:800; font-size:var(--font-size-base); }

.nav-links { display:none; }
.nav-actions { display:flex; align-items:center; gap:var(--space-4); }
.nav-login { display:none; }

@media (min-width:1024px){
  .nav-links { display:flex; align-items:center; gap:var(--space-6); margin-left:auto;
    margin-right:var(--space-6); }
  .nav-links a { font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);
    color:var(--pf-navy-400); letter-spacing:0.01em;
    transition:color var(--duration-fast) var(--easing-out); }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color:#fff; }
  .nav-login { display:inline-block; font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium); color:var(--pf-navy-400); }
  .nav-login:hover { color:#fff; }
}

/* hamburger */
.nav-toggle { display:inline-grid; place-items:center; width:44px; height:44px;
  border-radius:var(--border-radius-sm); color:#fff; }
.nav-toggle span { display:block; width:20px; height:2px; background:currentColor; border-radius:2px;
  position:relative; transition:transform var(--duration-fast) var(--easing-out),
  opacity var(--duration-fast) var(--easing-out); }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0;
  width:20px; height:2px; background:currentColor; border-radius:2px;
  transition:transform var(--duration-fast) var(--easing-out); }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
@media (min-width:1024px){ .nav-toggle { display:none; } }

/* mobile drawer */
.nav-drawer { position:fixed; inset:0; z-index:150; display:none; }
.nav-drawer[data-open="true"] { display:block; }
.nav-drawer__scrim { position:absolute; inset:0; background:var(--color-surface-overlay);
  opacity:0; transition:opacity var(--duration-normal) var(--easing-out); }
.nav-drawer[data-open="true"] .nav-drawer__scrim { opacity:1; }
.nav-drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
  background:var(--pf-navy-900); color:#fff; padding:var(--space-6) var(--gutter-page);
  display:flex; flex-direction:column; gap:var(--space-2);
  border-left:1px solid var(--color-border-inverse);
  transform:translateX(100%); transition:transform var(--duration-normal) var(--easing-default); }
.nav-drawer[data-open="true"] .nav-drawer__panel { transform:translateX(0); }
.nav-drawer__close { align-self:flex-end; width:44px; height:44px; font-size:1.4rem; color:#fff;
  margin-bottom:var(--space-4); }
.nav-drawer__panel a { padding:var(--space-3) 0; font-size:var(--font-size-lg);
  font-family:var(--font-family-display); font-weight:var(--font-weight-medium);
  border-bottom:1px solid var(--color-border-inverse); color:#fff; }
.nav-drawer__panel a:last-of-type { border-bottom:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--pf-navy-900); color:var(--pf-navy-400);
  padding-block:var(--space-8) var(--space-6);
  border-top:1px solid var(--color-border-inverse); }
.site-footer__grid { display:grid; grid-template-columns:1fr; gap:var(--space-7);
  max-width:var(--max-width-page); margin-inline:auto; padding-inline:var(--gutter-page); }
@media (min-width:768px){ .site-footer__grid { grid-template-columns:2fr 1fr 1fr 1fr; } }
.site-footer__brandcol p { color:var(--pf-navy-400); font-size:var(--font-size-sm);
  margin-top:var(--space-4); max-width:32ch; }
.footcol h4 { font-family:var(--font-family-body); font-size:var(--font-size-xs);
  text-transform:uppercase; letter-spacing:var(--letter-spacing-wide);
  color:var(--pf-slate-500); margin-bottom:var(--space-4); }
.footcol a { display:block; padding-block:var(--space-2); font-size:var(--font-size-sm);
  color:var(--pf-navy-400); transition:color var(--duration-fast) var(--easing-out); }
.footcol a:hover { color:#fff; }
.site-footer__base { max-width:var(--max-width-page); margin:var(--space-7) auto 0;
  padding:var(--space-5) var(--gutter-page) 0; border-top:1px solid var(--color-border-inverse);
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); justify-content:space-between;
  font-size:var(--font-size-xs); color:var(--pf-slate-500); }

/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero { background:var(--color-bg-inverse); color:var(--color-text-inverse);
  position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 88% -10%, rgba(247,148,29,0.16), transparent 55%),
             radial-gradient(80% 70% at -10% 110%, rgba(146,166,176,0.14), transparent 60%);
  pointer-events:none; }
.hero__inner { position:relative; display:grid; gap:var(--space-7);
  max-width:var(--max-width-page); margin-inline:auto;
  padding:var(--space-8) var(--gutter-page) var(--space-9);
  grid-template-columns:1fr; align-items:center; }
@media (min-width:1024px){
  .hero__inner { grid-template-columns:1.05fr 1fr; gap:var(--space-8);
    padding-block:var(--space-9) var(--space-10); }
}
.hero__copy { max-width:34rem; }
.hero h1 { font-size:var(--font-size-4xl); margin:var(--space-4) 0 var(--space-5); }
@media (max-width:640px){ .hero h1 { font-size:var(--font-size-3xl); } }
@media (min-width:1280px){ .hero h1 { font-size:var(--font-size-5xl); } }
.hero .lead { color:var(--pf-navy-400); max-width:32rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
@media (max-width:640px){ .hero__actions .btn { width:100%; justify-content:center; } }
.hero__note { margin-top:var(--space-4); font-size:var(--font-size-sm); color:var(--pf-slate-400);
  display:flex; align-items:center; gap:var(--space-2); }
.hero__note::before { content:""; width:8px; height:8px; border-radius:50%;
  background:var(--pf-orange-500); box-shadow:0 0 0 4px rgba(247,148,29,0.20); flex-shrink:0; }
.hero__visual { justify-self:center; width:100%; }

/* orange brand accents ("push it harder" on the marketing site) */
.hl { color:var(--pf-orange-500); }                 /* orange keyword on navy */
.hl-mark { position:relative; white-space:nowrap; color:#fff; }
.hl-mark::after { content:""; position:absolute; left:0; right:0; bottom:0.08em; height:0.30em;
  background:var(--pf-orange-500); opacity:0.92; border-radius:2px; z-index:-1; }
/* eyebrow gets a small leading orange rule */
.eyebrow--on-navy { position:relative; padding-left:1.7rem; }
.eyebrow--on-navy::before { content:""; position:absolute; left:0; top:50%; width:1.1rem; height:2px;
  background:var(--pf-orange-500); transform:translateY(-50%); }

/* generic reveal-on-load */
.reveal { opacity:0; transform:translateY(12px);
  animation:reveal var(--duration-slow) var(--easing-out) forwards; }
.reveal[data-delay="1"]{ animation-delay:80ms; } .reveal[data-delay="2"]{ animation-delay:160ms; }
.reveal[data-delay="3"]{ animation-delay:240ms; } .reveal[data-delay="4"]{ animation-delay:320ms; }
@keyframes reveal { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .reveal { animation:none; opacity:1; transform:none; } }