/* ============================================================
   Kweli — Shared site stylesheet (tokens + landing components)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* Magenta */
  --kweli-magenta-50:#FFF0F5; --kweli-magenta-100:#FFD9E4; --kweli-magenta-200:#FFADC7;
  --kweli-magenta-300:#FF6E9B; --kweli-magenta-400:#FB2E77; --kweli-magenta-500:#E30858;
  --kweli-magenta-600:#C30749; --kweli-magenta-700:#A0063C; --kweli-magenta-800:#7A042D; --kweli-magenta-900:#51021E;
  /* Ink */
  --kweli-ink-50:#F3F4F8; --kweli-ink-100:#E4E6EE; --kweli-ink-200:#C2C6D6; --kweli-ink-300:#8F94AC;
  --kweli-ink-400:#545A78; --kweli-ink-500:#2C3251; --kweli-ink-600:#1A1F3B; --kweli-ink-700:#10142A;
  --kweli-ink-800:#080C20; --kweli-ink-900:#060B1F;
  /* Neutrals */
  --kweli-neutral-0:#FFFFFF; --kweli-neutral-50:#FAFAFC; --kweli-neutral-100:#F4F5F8; --kweli-neutral-200:#E7E9EF;
  --kweli-neutral-300:#D2D5DF; --kweli-neutral-400:#A8ADBD; --kweli-neutral-500:#71778A; --kweli-neutral-600:#4D5266;
  --kweli-neutral-700:#363A4B; --kweli-neutral-800:#1F2232; --kweli-neutral-900:#0E1022;
  /* Semantic */
  --kweli-success-100:#D6F5E3; --kweli-success-500:#14A05B; --kweli-success-700:#0D6E3E;
  --kweli-warning-100:#FFF0D1; --kweli-warning-500:#E8A008; --kweli-warning-700:#A06A00;
  --kweli-danger-100:#FFDDE1; --kweli-danger-500:#E0243A; --kweli-danger-700:#9C0D1F;
  --kweli-info-100:#D7E8FF; --kweli-info-500:#2667E8; --kweli-info-700:#14409A;
  /* Gradients */
  --kweli-gradient-hex:linear-gradient(180deg,#FB0A61 0%,#D7074E 50%,#AD0843 100%);
  --kweli-gradient-hex-diag:linear-gradient(135deg,#FB0A61 0%,#AD0843 100%);
  --kweli-gradient-ink:linear-gradient(180deg,#10142A 0%,#060B1F 100%);
  --kweli-gradient-wash:linear-gradient(135deg,#060B1F 0%,#1A1F3B 60%,#7A042D 100%);

  --fg-1:var(--kweli-ink-900); --fg-2:var(--kweli-neutral-700); --fg-3:var(--kweli-neutral-500);
  --fg-muted:var(--kweli-neutral-400); --fg-on-brand:var(--kweli-neutral-0); --fg-on-ink:var(--kweli-neutral-0);
  --fg-brand:var(--kweli-magenta-500); --fg-link:var(--kweli-magenta-600);
  --bg-page:var(--kweli-neutral-50); --bg-surface:var(--kweli-neutral-0); --bg-sunken:var(--kweli-neutral-100);
  --bg-muted:var(--kweli-neutral-200); --bg-brand:var(--kweli-magenta-500); --bg-brand-soft:var(--kweli-magenta-50);
  --bg-ink:var(--kweli-ink-900); --bg-ink-soft:var(--kweli-ink-800);
  --border-subtle:var(--kweli-neutral-200); --border-default:var(--kweli-neutral-300);
  --border-strong:var(--kweli-neutral-400); --border-brand:var(--kweli-magenta-500);

  --font-display:'Montserrat','Arial',system-ui,sans-serif;
  --font-body:'Roboto','Arial',system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:900;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-2xl:28px; --radius-full:999px;

  --shadow-xs:0 1px 2px rgba(6,11,31,.06); --shadow-sm:0 2px 6px rgba(6,11,31,.08);
  --shadow-md:0 6px 18px rgba(6,11,31,.10); --shadow-lg:0 12px 36px rgba(6,11,31,.14);
  --shadow-xl:0 24px 60px rgba(6,11,31,.20); --shadow-brand:0 8px 24px rgba(227,8,88,.28);
  --ring-focus:0 0 0 3px rgba(227,8,88,.28);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms; --dur-base:200ms;

  --tracking-tight:-0.02em; --tracking-caps:0.08em; --tracking-wide:0.04em;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--fg-1); background:var(--bg-page);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.6;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; letter-spacing:var(--tracking-tight); line-height:1.08; color:var(--fg-1);}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm);}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:1320px; margin:0 auto; padding:0 24px;}
section{position:relative;}

/* ---- Logo image (official SVG) ---- */
.kw-logo-img{height:34px; width:auto; display:block;}
.nav .kw-logo-img{height:34px;}
.foot .kw-logo-img{height:30px;}

/* ---- Quiet login link ---- */
.nav-login{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:var(--fw-semi);
  font-size:14.5px; color:var(--fg-2); padding:9px 6px; transition:color var(--dur-fast); white-space:nowrap;}
.nav-login:hover{color:var(--fg-1);}
.nav-login .ic{width:17px; height:17px;}
.nav-dark .nav-login{color:rgba(255,255,255,.72);}
.nav-dark .nav-login:hover{color:#fff;}

/* ---- Logo lockup (CSS) ---- */
.kw-logo{display:inline-flex; align-items:center; gap:.62em; font-family:var(--font-display); font-weight:var(--fw-black); line-height:1; user-select:none;}
.kw-logo .kw-hex{
  position:relative; width:1.32em; height:1.46em; display:grid; place-items:center;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--kweli-gradient-hex-diag);
}
.kw-logo .kw-hex span{color:#fff; font-size:.92em; font-weight:var(--fw-black);}
.kw-logo .kw-word{font-size:1em; letter-spacing:.01em;}
.kw-logo.on-dark .kw-word{color:#fff;}
.kw-logo.on-light .kw-word{color:var(--kweli-ink-900);}

/* ---- Hexagon shape ---- */
.hex{-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--kweli-gradient-hex); aspect-ratio:1/1.06;}

/* ---- Eyebrow ---- */
.eyebrow{font-family:var(--font-display); font-weight:var(--fw-bold); font-size:12px;
  text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--fg-brand); margin:0 0 14px;}
.eyebrow.on-dark{color:var(--kweli-magenta-300);}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:15px;
  padding:13px 22px; border-radius:var(--radius-md); border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-base), color var(--dur-fast);}
.btn:active{transform:scale(.98);}
.btn-brand{background:var(--bg-brand); color:#fff; box-shadow:var(--shadow-brand);}
.btn-brand:hover{background:var(--kweli-magenta-600);}
.btn-ink{background:var(--kweli-ink-900); color:#fff;}
.btn-ink:hover{background:var(--kweli-ink-700);}
.btn-ghost{background:transparent; color:var(--fg-1); border-color:var(--border-default);}
.btn-ghost:hover{border-color:var(--kweli-ink-900); background:var(--bg-surface);}
.btn-ghost-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.24);}
.btn-ghost-dark:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.btn-lg{padding:16px 28px; font-size:16px;}
.btn .ic{width:18px; height:18px;}

/* ---- Nav ---- */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);}
.nav.nav-dark{background:rgba(6,11,31,.82); border-bottom:1px solid rgba(255,255,255,.08);}
.nav-inner{max-width:1320px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; gap:28px;}
.nav-links{display:flex; align-items:center; gap:22px; margin-left:8px;}
.nav-links a{font-family:var(--font-display); font-weight:var(--fw-semi); font-size:14.5px; color:var(--fg-2); transition:color var(--dur-fast);}
.nav-links a:hover{color:var(--fg-1);}
.nav-dark .nav-links a{color:rgba(255,255,255,.72);}
.nav-dark .nav-links a:hover{color:#fff;}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px;}
.lang-toggle{display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-full); overflow:hidden; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:12px;}
.nav-dark .lang-toggle{border-color:rgba(255,255,255,.22);}
.lang-toggle button{background:transparent; border:none; padding:6px 12px; color:var(--fg-3); letter-spacing:.04em;}
.nav-dark .lang-toggle button{color:rgba(255,255,255,.6);}
.lang-toggle button.active{background:var(--kweli-ink-900); color:#fff;}
.nav-dark .lang-toggle button.active{background:var(--kweli-magenta-500); color:#fff;}

/* ---- Mobile hamburger nav ---- */
.nav-toggle{display:none; margin-left:4px; width:42px; height:42px; flex:none; border:1px solid var(--border-default); background:transparent; border-radius:var(--radius-md); flex-direction:column; justify-content:center; align-items:center; gap:4px; cursor:pointer;}
.nav-dark .nav-toggle{border-color:rgba(255,255,255,.22);}
.nav-toggle span{width:18px; height:2px; border-radius:2px; background:var(--fg-1); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);}
.nav-dark .nav-toggle span{background:#fff;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-menu{display:none; flex-direction:column; padding:8px 24px 22px; border-top:1px solid var(--border-subtle); background:var(--bg-surface);}
.nav-dark .mobile-menu{background:var(--kweli-ink-900); border-top-color:rgba(255,255,255,.1);}
.nav.menu-open .mobile-menu{display:flex;}
.mobile-menu a{font-family:var(--font-display); font-weight:var(--fw-semi); font-size:16px; color:var(--fg-1); padding:13px 2px; border-bottom:1px solid var(--border-subtle);}
.nav-dark .mobile-menu a{color:#fff; border-bottom-color:rgba(255,255,255,.08);}
.mm-actions{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.mm-actions .btn{width:100%;}
.mm-actions .nav-login{justify-content:center; padding:11px;}
@media (max-width:1040px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-right .nav-login{display:none;}
  .nav-right > .btn{display:none;}
}

/* ---- Section header ---- */
.sec-head{max-width:760px;}
.sec-head h2{font-size:clamp(30px,4vw,46px); font-weight:var(--fw-bold);}
.sec-head p{margin-top:16px; font-size:18px; color:var(--fg-2); line-height:1.6;}

/* ---- Footer ---- */
.foot{background:var(--kweli-ink-900); color:rgba(255,255,255,.7); padding:72px 0 40px;}
.foot a{color:rgba(255,255,255,.7); transition:color var(--dur-fast);}
.foot a:hover{color:#fff;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;}
.foot h5{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:var(--tracking-wide); font-weight:var(--fw-bold); margin-bottom:18px;}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14.5px;}
.foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; font-size:13px; color:rgba(255,255,255,.5); flex-wrap:wrap;}

/* ---- Lead form ---- */
.lead-card{background:var(--bg-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:36px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--font-display); font-weight:var(--fw-semi); font-size:13px; color:var(--fg-2); margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%; padding:12px 14px; font-family:var(--font-body); font-size:15px; color:var(--fg-1);
  background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); transition:border-color var(--dur-fast),box-shadow var(--dur-fast);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--border-brand); box-shadow:var(--ring-focus);}
.field.err input,.field.err select{border-color:var(--kweli-danger-500);}
.field .msg{font-size:12px; color:var(--kweli-danger-500); margin-top:6px; display:none;}
.field.err .msg{display:block;}
.form-success{display:none; text-align:center; padding:24px 8px;}
.form-success.show{display:block;}
.form-success .chk{width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--kweli-success-100); color:var(--kweli-success-700); display:grid; place-items:center;}

/* ---- Reveal animation ---- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---- Cards ---- */
.card{background:var(--bg-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:28px;}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--radius-full); font-family:var(--font-display); font-weight:var(--fw-bold); font-size:12px; letter-spacing:.02em;}
.pill-success{background:var(--kweli-success-100); color:var(--kweli-success-700);}
.pill-warning{background:var(--kweli-warning-100); color:var(--kweli-warning-700);}
.pill-info{background:var(--kweli-info-100); color:var(--kweli-info-700);}
.pill-brand{background:var(--kweli-magenta-50); color:var(--kweli-magenta-700);}

/* tabular nums for any metric */
.tnum{font-variant-numeric:tabular-nums;}

/* ---- Floating direction switcher ---- */
.dir-switch{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:4px; padding:6px; border-radius:var(--radius-full);
  background:rgba(6,11,31,.92); backdrop-filter:blur(8px); box-shadow:var(--shadow-xl);}
.dir-switch .ds-label{font-family:var(--font-display); font-weight:var(--fw-bold); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); padding:0 10px 0 12px;}
.dir-switch a{font-family:var(--font-display); font-weight:var(--fw-bold); font-size:12.5px; color:rgba(255,255,255,.78);
  padding:8px 15px; border-radius:var(--radius-full); transition:background var(--dur-fast),color var(--dur-fast);}
.dir-switch a:hover{color:#fff; background:rgba(255,255,255,.1);}
.dir-switch a.active{background:var(--kweli-magenta-500); color:#fff;}
.dir-switch a.home{color:rgba(255,255,255,.55); padding:8px 11px;}
@media (max-width:560px){.dir-switch .ds-label{display:none;}}

@media (max-width:1040px){
  .nav-links{display:none;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .lead-card{padding:24px;}
}