/* ============================================================
   K.I.N.D — SHARED DESIGN SYSTEM  (kind.css)
   Loaded AFTER each page's inline <style> so these rules win.
   Homepage adopted 3 June; rolled across all pages Tuesday.
   Brand: warm, human "AI Family" — pink→purple→blue gradient,
   distinct, premium purple.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --g1:#ff2ec4;            /* pink  */
  --g2:#9a4dff;            /* purple */
  --g3:#36c5f0;            /* blue  */
  --grad:linear-gradient(100deg,#ff2ec4 0%,#9a4dff 48%,#36c5f0 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,46,196,.12),rgba(54,197,240,.12));
}

/* ---- Typography ------------------------------------------------ */
body{ font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; }
.hero h1,.s-title,.problem-headline,.cta-banner h2,.promise-big,.stat-num,
.p-price,.prod h3,.agents-intro .s-title,.figsy-scroll-step h4,.level-card h3,
.comp-inner .s-title,.why-kind .s-title,.team-wins .s-title{
  font-family:'Outfit',system-ui,sans-serif; letter-spacing:-0.03em;
}

/* ---- Gradient signature on primary CTAs ----------------------- */
.btn-nav-primary,.btn-hero-primary,.prod-cta,.p-badge,.dd-promo-cta,
.p-btn-dark,.human-strip-btn{
  background:var(--grad); border:none; color:#fff;
}
.btn-nav-primary:hover,.btn-hero-primary:hover,.prod-cta:hover,
.p-btn-dark:hover,.human-strip-btn:hover{ opacity:.9; }

/* ---- Gradient text on eyebrow labels -------------------------- */
.s-label,.hero-label,.trust-stat-num,.promise-big,.stat-num span{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Logo: real K mark replaces the emoji tile ---------------- */
.logo-icon{
  background:transparent !important; box-shadow:none !important;
  width:34px; height:34px; border-radius:8px; overflow:hidden;
  font-size:0 !important;             /* hide the ⚡ emoji text node */
}
.logo-icon img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ---- Reusable ambient glow (replaces the floating orbs) ------- */
.kind-glow{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.kind-glow.g-pink{ background:radial-gradient(circle,rgba(255,46,196,.22),transparent 65%); }
.kind-glow.g-purple{ background:radial-gradient(circle,rgba(154,77,255,.20),transparent 65%); }
.kind-glow.g-blue{ background:radial-gradient(circle,rgba(54,197,240,.22),transparent 65%); }

@media (prefers-reduced-motion: reduce){
  .kind-glow{ animation:none !important; }
}

/* ============================================================
   DEPTH PASS — ClickUp-inspired (3 June)
   Brand identity, deep-space dark sections, lit cards, breathing room.
   ============================================================ */

/* ---- 1. Brand typography: broaden Outfit + heavier display ---- */
.kf-head h1,.agent-card h3,.wk-card h3,.hiw-card h3,.tw-card h3,
.video-header .s-title,.figsy-name,.p-card h3,.popia-headline,
.products-intro-text,.human-strip-hed{
  font-family:'Outfit',system-ui,sans-serif; letter-spacing:-0.03em;
}
.hero h1,.problem-headline,.cta-banner h2,.kf-head h1{ font-weight:900; }

/* ---- 2. Deep-space dark sections: shifted base + corner glows ---- */
.problem-section,.figsy-section,.level-section,.comp-section{
  position:relative;
  background-color:#080812;
  background-image:
    radial-gradient(58% 55% at 12% -8%, rgba(154,77,255,.20) 0%, transparent 60%),
    radial-gradient(54% 50% at 104% 110%, rgba(54,197,240,.15) 0%, transparent 62%);
  background-repeat:no-repeat;
}
.cta-banner{ background-color:#080812; }
/* film grain carried through from the hero stage */
.problem-section::after,.figsy-section::after,.level-section::after,
.comp-section::after,.cta-banner::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ---- 6. Dark cards: lit-from-above top edge + a touch more body ---- */
.prob-card,.figsy-step,.level-card:not(.active-level),.comp-them,.dogfood-callout{
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.prob-card,.figsy-step,.level-card:not(.active-level){
  border-top-color:rgba(255,255,255,.16);
}

/* ---- 7. Gradient primary buttons get a little lift ---- */
.btn-hero-primary{ box-shadow:0 10px 28px rgba(154,77,255,.28); }
.btn-hero-primary:hover{ box-shadow:0 14px 34px rgba(154,77,255,.36); }

/* ---- 4. Spacing: breathe (desktop only — mobile keeps tight padding) ---- */
.wk-grid,.figsy-flow,.level-grid{ gap:14px; }
@media (min-width:769px){
  .why-kind,.team-wins{ padding-top:112px; padding-bottom:112px; }
  .problem-section,.figsy-section,.comp-section{ padding-top:120px; padding-bottom:120px; }
  .cta-section{ padding-top:120px; padding-bottom:140px; }
}

/* ---- Honest proof strip (first-party dogfooding, no fake social proof) ---- */
.proof-strip{ padding:88px 48px; background:#faf5ff; border-top:1px solid rgba(154,77,255,.12); border-bottom:1px solid rgba(154,77,255,.12); }
.proof-inner{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center; }
.proof-copy .s-title{ margin-bottom:16px; }
.proof-copy p{ font-size:.96rem; color:rgba(0,0,0,.55); line-height:1.8; margin-bottom:14px; max-width:560px; }
.proof-honest{ font-size:.86rem !important; color:rgba(0,0,0,.4) !important; }
.proof-stat{ text-align:center; background:#fff; border:1px solid rgba(154,77,255,.16); border-radius:24px; padding:40px 32px; box-shadow:0 18px 48px rgba(154,77,255,.10); }
.proof-stat-num{ font-family:'Outfit',system-ui,sans-serif; font-size:4.4rem; font-weight:900; letter-spacing:-.04em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.proof-stat-num span{ font-size:2rem; opacity:.55; }
.proof-stat-label{ margin-top:14px; font-size:.85rem; color:rgba(0,0,0,.5); line-height:1.55; }
@media (max-width:768px){
  .proof-strip{ padding:48px 24px; }
  .proof-inner{ grid-template-columns:1fr; gap:32px; }
}

/* ---- 5. Section transitions: short, crisp seams on the new base ---- */
.grad-wht-dark,.grad-dark-grey,.grad-grey-dark,.grad-dark-wht,.grad-light-to-wht{ height:14px; }
.grad-wht-dark{ background:linear-gradient(to bottom,#fff 0%,#080812 100%); }
.grad-dark-grey{ background:linear-gradient(to bottom,#080812 0%,#f9fafb 100%); }
.grad-grey-dark{ background:linear-gradient(to bottom,#f9fafb 0%,#080812 100%); }
.grad-dark-wht{ background:linear-gradient(to bottom,#080812 0%,#fff 100%); }