/* ============================================
   WORKFACILIT v2 — Base, Reset, Utilities
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--wf-sans);color:var(--wf-text-2);background:var(--wf-bg);line-height:1.6;overflow-x:hidden}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--wf-display);font-weight:700;line-height:1.1;letter-spacing:-0.03em;color:var(--wf-text-1)}
p{color:var(--wf-text-2)}

/* ── Container ── */
.container{width:100%;max-width:var(--wf-max);margin:0 auto;padding:0 1.5rem}
.container--narrow{max-width:var(--wf-narrow)}

/* ── Section ── */
.section{padding:var(--wf-section) 0;position:relative}

/* ── Section Header ── */
.sh{text-align:center;max-width:720px;margin:0 auto 4rem}
.sh__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;
  background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.15);
  border-radius:var(--wf-r-full);font-size:var(--wf-text-xs);font-weight:600;
  color:var(--wf-primary-light);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1.5rem}
.sh__title{font-size:clamp(2rem,4vw,var(--wf-text-5xl));margin-bottom:1rem}
.sh__sub{font-size:var(--wf-text-lg);color:var(--wf-text-2);line-height:1.7;max-width:600px;margin:0 auto}

/* ── Text Gradient ── */
.tg{background:var(--wf-grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;font-size:var(--wf-text-sm);font-weight:600;
  border-radius:var(--wf-r-md);transition:all 300ms var(--wf-ease);white-space:nowrap;position:relative}

.btn--primary{background:var(--wf-primary);color:#fff;
  box-shadow:0 0 0 1px rgba(99,102,241,0.5),0 2px 8px rgba(99,102,241,0.3)}
.btn--primary:hover{background:var(--wf-primary-dark);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(99,102,241,0.6),0 8px 30px rgba(99,102,241,0.35)}

.btn--ghost{background:rgba(255,255,255,0.04);color:var(--wf-text-1);
  border:1px solid var(--wf-border)}
.btn--ghost:hover{background:rgba(255,255,255,0.08);border-color:var(--wf-border-hover);transform:translateY(-2px)}

.btn--pitch-glow{color:var(--wf-text-2);border-color:var(--wf-border)}
.btn--pitch-glow:hover{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.25);color:var(--wf-primary-light)}

.btn--accent{background:var(--wf-rose);color:#fff;
  box-shadow:0 0 0 1px rgba(244,63,94,0.5),0 2px 8px rgba(244,63,94,0.25)}
.btn--accent:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(244,63,94,0.6),0 8px 30px rgba(244,63,94,0.3)}

.btn--lg{padding:16px 32px;font-size:var(--wf-text-base);border-radius:var(--wf-r-lg)}
.btn--sm{padding:8px 16px;font-size:var(--wf-text-xs)}

.btn svg{width:16px;height:16px;transition:transform 200ms var(--wf-ease)}
.btn:hover svg{transform:translateX(3px)}

/* ── Card base ── */
.card{background:var(--wf-bg-card);border:1px solid var(--wf-border);border-radius:var(--wf-r-xl);
  padding:2rem;transition:all 400ms var(--wf-ease);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:var(--wf-grad-glow);opacity:0;
  transition:opacity 400ms var(--wf-ease);pointer-events:none;border-radius:inherit}
.card:hover{border-color:var(--wf-border-hover);transform:translateY(-4px)}
.card:hover::before{opacity:1}

/* ── Divider ── */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--wf-border),transparent);margin:0 auto;max-width:80%}

/* ── Grid ── */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .container{padding:0 1rem}
  :root{--wf-section:5rem}
}