/* ===== Design tokens (copied from design-system) ===== */
:root{
  --heading-font: 'Funnel Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --background: #09090b;
  --foreground: #fafafa;
  --card: #09090b;
  --card-foreground: #fafafa;
  --secondary: #27272a;
  --muted-foreground: #a1a1aa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --border: #27272a;
  --radius: 0.5rem;
  --ring: #d4d4d8;
  /* measured at runtime; used by hero sizing and page offset */
  --site-top-height: 5rem;
}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;line-height:1.7}
.container{max-width:none;margin:0;padding:0 4vw}
.muted{color:var(--muted-foreground)}

/* ===== Heading treatment (use the design-system heading font) ===== */
h1,h2,h3,h4{font-family:var(--heading-font);letter-spacing:-0.02em}
h1{font-weight:800}
h2{font-weight:600;font-size:2.25rem}
h3{font-weight:600;font-size:1.5rem}

/* ===== Buttons (trimmed from design-system) ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.9rem;font-weight:500;border-radius:var(--radius);border:none;cursor:pointer;text-decoration:none;transition:all .18s ease}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-ghost{background:transparent;color:var(--foreground);border:1px solid transparent}
.btn-outline{background:transparent;color:var(--foreground);border:1px solid var(--border)}
.btn-lg{padding:.85rem 1.75rem;font-size:1.1rem}

/* ===== Cards (from design-system) ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .18s ease;padding:2rem}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.45);border-color:var(--muted-foreground)}
.card-title{font-family:var(--heading-font);font-weight:600;margin-bottom:.5rem;font-size:1.2rem}
.card-description{color:var(--muted-foreground);font-size:1rem;margin-bottom:1rem}
.card-content{color:var(--muted-foreground);font-size:1rem}

/* ===== Rise-up: animate when element scrolls into view (non-images) ===== */
@keyframes riseUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* base (hidden) state for elements that should animate on scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
}

/* reveal when element becomes visible */
.animate-on-scroll.in-view {
  animation: riseUp 420ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: var(--anim-delay, 0ms);
}

/* stagger helpers (set per-element delays using CSS variables) */
.integrations .integration:nth-child(1){ --anim-delay: 120ms }
.integrations .integration:nth-child(2){ --anim-delay: 180ms }
.integrations .integration:nth-child(3){ --anim-delay: 240ms }
.integrations .integration:nth-child(4){ --anim-delay: 300ms }
.integrations .integration:nth-child(5){ --anim-delay: 360ms }
.integrations .integration:nth-child(6){ --anim-delay: 420ms }
.component-grid .card:nth-child(1){ --anim-delay: 160ms }
.component-grid .card:nth-child(2){ --anim-delay: 220ms }
.component-grid .card:nth-child(3){ --anim-delay: 280ms }
.component-grid .card:nth-child(4){ --anim-delay: 340ms }
.component-grid .card:nth-child(5){ --anim-delay: 400ms }

/* explicitly exclude images / SVGs from animations */
img, svg, .hero-image { animation: none !important; opacity: 1 !important; transform: none !important }

/* ensure header/topbar never animate */
header.site-top, header.site-top * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }

/* respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Topbar ===== */
.site-top{position:fixed;top:0;left:0;width:100%;z-index:50;border-bottom:1px solid rgba(255,255,255,0.04);background:transparent;backdrop-filter:blur(6px)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 4vw;max-width:none;margin:0}

/* header is fixed — use a visible spacer element instead of padding-top so spacing exists before JS runs */
main{padding-top:0}
.top-spacer{height:var(--site-top-height,5rem);width:100%;pointer-events:none}

.brand{font-family:var(--heading-font);font-size:1.5rem;letter-spacing:.02em;font-weight:800} 
.badge.beta{display:inline-flex;align-items:center;gap:.5rem;background:#27272A;color:var(--muted-foreground);padding:.3rem 1rem;border-radius:9999px;font-size:.85rem;position:relative}
.badge.beta::before{content:"";width:.5rem;height:.5rem;border-radius:9999px;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.55);flex:0 0 auto}

/* ===== HERO split (vertical sections) ===== */
.hero{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - var(--site-top-height, 4rem));align-items:stretch;overflow:hidden;position:relative;margin-bottom:0}
.hero-left{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent 40%);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:0 4vw 8vh}
.hero-right{display:flex;align-items:flex-end;justify-content:center;padding:0;overflow:hidden}

/* Giant bottom-left heading on left pane */
.hero-heading-wrap{position:absolute;left:4vw;bottom:8vh;display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;z-index:12}
.hero-giant{margin:0;color:rgba(250,250,250,0.95);font-size:clamp(44px, 10.5vw, 140px);line-height:0.92;transform:translateZ(0);text-wrap:balance;text-transform:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.hero-badge{margin:0;transform:translateY(-0.6rem);display:inline-flex}
.hero-image{width:100%;height:100%;max-width:none;border-radius:0;box-shadow:0 30px 60px rgba(2,6,23,0.7);object-fit:cover;display:block;transform:none}

/* section divider anchored to the hero bottom so it always touches the image */
.section-divider{position:absolute;left:0;right:0;bottom:0;height:0;border-top:1px solid var(--border);z-index:9;pointer-events:none}
.section-divider::before{display:none}

/* Small screens: stack the hero */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;height:calc(100vh - var(--site-top-height, 3.5rem));margin-bottom:2.5rem}
  .hero-heading-wrap{position:relative;left:auto;bottom:auto;padding:2rem 0 0;display:flex;flex-direction:column;gap:1.25rem}
  .hero-badge{display:inline-flex}
  /* increase mobile hero font-size for better legibility */
  .hero-giant{position:relative;left:auto;bottom:auto;padding:0;font-size:clamp(48px,12.5vw,96px);line-height:1;letter-spacing:-0.01em;text-align:left}
  .hero-right{padding:0}
}

/* specific color for Slack inline SVG */
.integration.slack { color: var(--foreground); } 

/* ===== Intro / feature layout ===== */
.intro{padding:8rem 4vw}
.intro-grid{display:grid;grid-template-columns:1fr 480px;gap:5rem;align-items:start}
.intro-copy h2{font-size:2.5rem;margin-bottom:1.5rem;line-height:1.2}
.cta-row{margin:2rem 0;display:flex;gap:1.5rem;align-items:center}
.integrations{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;margin-top:2rem}
.integration{display:inline-flex;gap:.75rem;align-items:center;padding:.6rem 1.1rem;border-radius:9999px;background:rgba(255,255,255,0.02);color:var(--muted-foreground);font-size:1rem}
.integration svg,.integration img{width:18px;height:18px;flex-shrink:0;opacity:.95}

.intro-cards{display:flex;flex-direction:column;gap:1.25rem}

@media (max-width:900px){
  .intro-grid{grid-template-columns:1fr}
  .intro-cards{order:2}
}

/* ===== Sections & grids ===== */
.section{padding:8rem 4vw;border-top:1px solid var(--border)}
.section-title{font-size:2rem;margin-bottom:.75rem}
.section-description{color:var(--muted-foreground);font-size:1.1rem;margin-bottom:2.5rem}
.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}

/* ===== Final CTA ===== */
.final-grid{display:flex;justify-content:space-between;align-items:center;gap:3rem}
.align-right{display:flex;gap:2rem}

@media (max-width:700px){
  .final-grid{flex-direction:column;align-items:start}
  .align-right{width:100%;justify-content:flex-start}
}

/* ===== Footer (large full-width brand) ===== */
.site-footer{border-top:1px solid var(--border);padding:6rem 4vw 0 4vw;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(9,9,11,0.22),transparent);backdrop-filter:blur(6px)}
.footer-brand{font-family:var(--heading-font);font-size:clamp(48px,18vw,320px);letter-spacing:-0.02em;color:var(--foreground);font-weight:900;line-height:0.9;display:block;width:100%;max-width:none;white-space:nowrap;overflow:hidden;margin:0}
.footer-sub{display:none}

/* Small utility */
.text-muted{color:var(--muted-foreground)}
.container .section:first-child{border-top:none}