/* ============================================================
   OctoEmployee — Brand Site stylesheet
   System: Lexend (display + body, 300–900)
   Palette: navy #0D1B2A, bright teal #02C39A, accent #028090,
            gold #C9922A, muted #3d5468, bg2 #f7f9fc
   ============================================================ */

:root{
  --navy:#0D1B2A;
  --navy2:#132030;
  --navy-ink:#1a2b3e;
  --accent:#028090;
  --bright:#02C39A;
  --gold:#C9922A;
  --amber:#E8813A;
  --muted:#3d5468;
  --muted2:#5a7388;
  --border:#e2e8f0;
  --border-soft:#eef1f5;
  --bg:#ffffff;
  --bg2:#f7f9fc;
  --bg3:#f1f5f9;
  --danger:#ef4444;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Lexend','Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--navy);
  line-height:1.7;
  font-size:16px; /* text-base */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ============================================================
   NAV  (brand nav — horizontal, multi-item)
   ============================================================ */
.brand-nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:72px; padding:0 40px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.brand-nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-nav .logo img{height:42px;width:auto}
.brand-nav .logo-text{
  font-family:'Lexend',sans-serif;
  font-weight:700; letter-spacing:.02em;
  color:var(--navy); font-size:16px;
}
.brand-nav .nav-center{
  display:flex; gap:4px;
}
.brand-nav .nav-center a{
  font-size:13.5px; font-weight:500;
  color:var(--muted); text-decoration:none;
  padding:8px 14px; border-radius:6px;
  transition:color .15s, background .15s;
}
.brand-nav .nav-center a:hover{color:var(--navy);background:var(--bg2)}
.brand-nav .nav-center a.active{color:var(--navy);background:var(--bg2);font-weight:600}
.brand-nav .nav-right{display:flex;align-items:center;gap:14px}
.brand-nav .nav-signin{
  font-size:13.5px;font-weight:500;color:var(--muted);
  text-decoration:none;padding:8px 12px;transition:color .15s;
}
.brand-nav .nav-signin:hover{color:var(--navy)}
.brand-nav .nav-cta{
  background:var(--navy); color:#fff;
  font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:6px;
  text-decoration:none; letter-spacing:.01em;
  transition:background .15s, transform .15s;
}
.brand-nav .nav-cta:hover{background:#1a2b3e;transform:translateY(-1px)}

/* Dark variant */
.brand-nav.dark{background:rgba(13,27,42,0.92);border-bottom-color:rgba(255,255,255,.07)}
.brand-nav.dark .logo-text{color:#fff}
.brand-nav.dark .nav-center a{color:rgba(255,255,255,.65)}
.brand-nav.dark .nav-center a:hover{color:#fff;background:rgba(255,255,255,.05)}
.brand-nav.dark .nav-center a.active{color:#fff;background:rgba(255,255,255,.06)}
.brand-nav.dark .nav-signin{color:rgba(255,255,255,.65)}
.brand-nav.dark .nav-signin:hover{color:#fff}
.brand-nav.dark .nav-cta{background:var(--bright);color:var(--navy)}
.brand-nav.dark .nav-cta:hover{background:#03d9ab}

/* ============================================================
   TYPE SYSTEM — Lexend, Tailwind-aligned scale
   72 / 60 / 36 / 30 / 24 / 20 / 18 / 16 / 14 / 12 / 11 / 10
   Weights 300–900
   ============================================================ */
.eyebrow{
  font-family:'Lexend',sans-serif;
  font-size:12px; /* text-xs */
  font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow.on-dark{color:var(--bright)}
.eyebrow.inline::before{
  content:''; display:inline-block; width:20px; height:2px;
  background:currentColor; vertical-align:middle;
  margin-right:10px; margin-bottom:2px;
}
h1,h2,h3,h4{
  font-family:'Lexend',sans-serif;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.025em;
  color:var(--navy);
}
/* h1: clamp(36px → 72px) — mobile text-4xl → desktop text-7xl */
h1{font-size:clamp(36px,6vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.03em}
/* h2: 30 → 60 (text-3xl → text-6xl on hero alts / section heads) */
h2{font-size:clamp(30px,4.2vw,60px);font-weight:800;line-height:1.1;letter-spacing:-0.025em}
/* h3: 24 → 30 */
h3{font-size:clamp(24px,2.4vw,30px);font-weight:700;line-height:1.18;letter-spacing:-0.02em}
/* h4: 20 — small section headers / card titles (text-xl / text-2xl) */
h4{font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-0.015em}

em.soft{color:rgba(13,27,42,0.55);font-style:italic;font-weight:600}
.on-dark em.soft{color:rgba(255,255,255,0.55)}

/* Body tiers */
p.lede{font-size:20px;color:var(--muted);line-height:1.6;max-width:640px;font-weight:400} /* text-xl intro */
.on-dark p.lede{color:rgba(255,255,255,0.78)}
p{font-size:16px;line-height:1.7;font-weight:400} /* text-base body */
small,.small{font-size:14px;color:var(--muted);line-height:1.6} /* text-sm */
.caption{font-size:12px;letter-spacing:.02em;color:var(--muted)} /* text-xs */
.fine{font-size:11px;color:var(--muted);letter-spacing:.01em} /* footer fine print */
.micro{font-size:10px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase} /* micro-utility */

/* Section containers */
section{padding:96px 8%}
.s-light{background:var(--bg);color:var(--navy)}
.s-gray{background:var(--bg2);color:var(--navy)}
.s-dark{background:var(--navy);color:#fff}
.s-dark h1,.s-dark h2,.s-dark h3{color:#fff}
.container{max-width:1200px;margin:0 auto}
.container-wide{max-width:1320px;margin:0 auto}
.container-narrow{max-width:820px;margin:0 auto}

/* Buttons — text-base (16px) per scale */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:8px;
  font-family:'Lexend',sans-serif;
  font-size:16px; font-weight:600; letter-spacing:-0.005em;
  text-decoration:none; cursor:pointer; border:none;
  transition:background .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#1a2b3e;transform:translateY(-1px)}
.btn-accent{background:var(--bright);color:var(--navy)}
.btn-accent:hover{background:#03d9ab;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--navy);background:var(--bg2)}
.on-dark .btn-ghost{color:rgba(255,255,255,0.9);border-color:rgba(255,255,255,0.25)}
.on-dark .btn-ghost:hover{border-color:var(--bright);color:var(--bright);background:transparent}

.btn-arrow::after{content:'→';font-weight:500;transition:transform .15s}
.btn-arrow:hover::after{transform:translateX(3px)}

/* Link styled */
.tlink{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.tlink:hover{color:var(--navy)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:96px 8% 80px;
  background:var(--bg);
}
.hero.dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero.dark::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 50% at 75% 40%,rgba(2,195,154,.06) 0%,transparent 70%);
  pointer-events:none;
}
.hero h1{max-width:900px;margin-bottom:22px}
.hero p.lede{margin-bottom:36px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:32px 28px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(2,128,144,.06)}
.card h3{font-family:'Lexend',sans-serif;font-weight:700;font-size:18px;color:var(--navy);margin-bottom:10px;letter-spacing:-0.015em}
.card p{font-size:14px;color:var(--muted);line-height:1.7}
.card .num{font-family:'Lexend',sans-serif;font-weight:900;font-size:48px;color:var(--border);line-height:1;margin-bottom:12px;letter-spacing:-0.03em}

/* Feature row */
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.feat-row.reverse{direction:rtl}
.feat-row.reverse > *{direction:ltr}

/* Stat box (dark) */
.stat{
  padding:22px 24px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
}
.stat .num{font-family:'Lexend',sans-serif;font-weight:900;font-size:36px;color:var(--bright);line-height:1;margin:0;letter-spacing:-0.03em}
.stat .label{font-size:14px;color:rgba(255,255,255,0.65);margin-top:6px;line-height:1.5}

/* Divider rule */
.rule{height:1px;background:var(--border);width:100%;margin:36px 0}

/* ============================================================
   FOOTER
   ============================================================ */
.brand-footer{
  background:var(--navy);color:rgba(255,255,255,0.65);
  padding:72px 8% 36px;
}
.brand-footer .foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-footer .fc-brand .logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.brand-footer .fc-brand .logo img{height:44px;width:auto}
.brand-footer .fc-brand .logo-text{color:#fff;font-weight:700;font-size:16px}
.brand-footer .fc-brand p{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.7;max-width:260px}
.brand-footer h5{
  font-family:'Lexend',sans-serif; font-size:12px;
  font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.88);
  margin-bottom:14px;
}
.brand-footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.brand-footer ul a{
  font-size:14px;color:rgba(255,255,255,0.55);
  text-decoration:none;transition:color .15s;
}
.brand-footer ul a:hover{color:#fff}
.brand-footer .foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;flex-wrap:wrap;gap:12px;
}
.brand-footer .foot-bottom p{font-size:11px;color:rgba(255,255,255,0.35)}
.brand-footer .foot-bottom .foot-links{display:flex;gap:20px}
.brand-footer .foot-bottom a{font-size:11px;color:rgba(255,255,255,0.4);text-decoration:none}

/* ============================================================
   UTIL
   ============================================================ */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-48{margin-bottom:48px}

.pill{
  display:inline-block;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;
  background:rgba(2,195,154,0.1);color:var(--accent);
  border:1px solid rgba(2,195,154,0.25);
}
.pill.gold{background:rgba(201,146,42,0.08);color:var(--gold);border-color:rgba(201,146,42,0.25)}
.pill.navy{background:rgba(13,27,42,0.06);color:var(--navy);border-color:var(--border)}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Callout */
.callout{
  border-left:3px solid var(--accent);
  background:#f0fdf9;
  padding:20px 24px;
  border-radius:8px;
  margin:28px 0;
}
.callout p{font-size:16px;color:var(--navy-ink);line-height:1.7}
.callout .label{
  font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}

/* Hero visual swatch — muted striped placeholder */
.placeholder{
  background:repeating-linear-gradient(135deg,#f7f9fc 0 16px,#eef3f8 16px 32px);
  border:1px solid var(--border);
  border-radius:12px;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  font-family:'Lexend',sans-serif;
  font-weight:600;
  font-size:12px;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;
}
.placeholder.dark{
  background:repeating-linear-gradient(135deg,#0f1f32 0 16px,#132638 16px 32px);
  border-color:rgba(255,255,255,0.07);color:rgba(255,255,255,0.5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .brand-nav{padding:0 20px}
  .brand-nav .nav-center{display:none}
  section{padding:72px 6%}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .grid-2,.feat-row{grid-template-columns:1fr;gap:40px}
  .brand-footer .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}