/* SplitHawk — splithawk.com */

:root {
  --black: #1A1A1A; --near-black: #2D2D2D; --charcoal: #3C3C3C;
  --graphite: #5A5A5A; --steel: #8A8A8A; --silver: #B0B0B0;
  --cloud: #D4D4D4; --mist: #ECECEC; --white: #FFFFFF;
  --teal: #4ABDB2; --hawk: #F59E0B; --hawk-dark: #D97706;
  --hawk-bg: rgba(245,158,11,0.08); --hawk-border: rgba(245,158,11,0.25);
  --font-display: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-display); background:var(--black); color:var(--white); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(26,26,26,0.92); backdrop-filter:blur(24px); border-bottom:1px solid var(--charcoal); padding:0 48px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-left { display:flex; align-items:center; gap:12px; cursor:pointer; }
.nav-name { font-family:var(--font-mono); font-weight:500; font-size:16px; color:var(--white); }
.nav-links { display:flex; gap:36px; list-style:none; align-items:center; }
.nav-links a { font-size:14px; color:var(--steel); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover { color:var(--white); }
.nav-cta { font-size:13px; color:var(--black); background:var(--hawk); padding:8px 20px; border-radius:100px; text-decoration:none; font-weight:600; transition:background 0.2s; }
.nav-cta:hover { background:var(--hawk-dark); }

.sl { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:var(--graphite); margin-bottom:16px; display:block; }

.hero { padding:220px 48px 120px; max-width:1200px; margin:0 auto; }
.hero-badge { display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--hawk); border:1px solid var(--hawk-border); border-radius:100px; padding:4px 14px; margin-bottom:32px; }
.hero h1 { font-size:56px; font-weight:700; letter-spacing:-0.035em; line-height:1.08; margin-bottom:28px; max-width:760px; }
.hero h1 .a { color:var(--hawk); }
.hero p { font-size:19px; color:var(--steel); line-height:1.7; max-width:580px; font-weight:300; }

.opp { padding:120px 48px; background:var(--white); color:var(--black); }
.opp-inner { max-width:1200px; margin:0 auto; }
.opp h2 { font-size:36px; font-weight:600; letter-spacing:-0.025em; line-height:1.2; margin-bottom:24px; max-width:700px; }
.opp-intro { font-size:17px; color:var(--graphite); line-height:1.7; max-width:620px; margin-bottom:56px; }
.opp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.opp-card { padding:32px; border-radius:12px; border:1px solid var(--mist); }
.opp-card h4 { font-size:15px; font-weight:600; margin-bottom:8px; }
.opp-card p { font-size:13px; color:var(--graphite); line-height:1.7; }

.how { padding:120px 48px; }
.how-inner { max-width:1200px; margin:0 auto; }
.how h2 { font-size:36px; font-weight:600; letter-spacing:-0.025em; line-height:1.2; margin-bottom:24px; max-width:620px; }
.how-intro { font-size:17px; color:var(--steel); line-height:1.7; max-width:580px; margin-bottom:56px; }
.how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.how-step { padding:28px; border-radius:12px; border:1px solid var(--charcoal); }
.how-step-num { font-family:var(--font-mono); font-size:24px; font-weight:300; color:var(--hawk); margin-bottom:12px; display:block; }
.how-step h4 { font-size:14px; font-weight:600; margin-bottom:8px; }
.how-step p { font-size:12px; color:var(--steel); line-height:1.7; }

.buckets { padding:120px 48px; background:var(--near-black); }
.bk-inner { max-width:1200px; margin:0 auto; }
.buckets h2 { font-size:36px; font-weight:600; letter-spacing:-0.025em; line-height:1.2; margin-bottom:24px; max-width:600px; }
.bk-intro { font-size:17px; color:var(--steel); line-height:1.7; max-width:580px; margin-bottom:56px; }
.bk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bk-card { padding:28px; border-radius:12px; border:1px solid var(--charcoal); cursor:pointer; transition:border-color 0.3s, transform 0.2s; text-decoration:none; color:inherit; display:block; }
.bk-card:hover { border-color:var(--hawk-border); transform:translateY(-2px); }
.bk-tag { font-family:var(--font-mono); font-size:10px; color:var(--hawk); letter-spacing:0.06em; margin-bottom:10px; display:block; }
.bk-card h4 { font-size:16px; font-weight:600; margin-bottom:8px; }
.bk-card p { font-size:13px; color:var(--steel); line-height:1.7; }
.bk-link { font-family:var(--font-mono); font-size:11px; color:var(--hawk); margin-top:14px; display:inline-block; }

.platform { padding:120px 48px; }
.pl-inner { max-width:1200px; margin:0 auto; }
.platform h2 { font-size:36px; font-weight:600; letter-spacing:-0.025em; line-height:1.2; margin-bottom:56px; max-width:500px; }
.pl-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pl-card { padding:28px; border-radius:12px; border:1px solid var(--charcoal); }
.pl-card h4 { font-size:15px; font-weight:600; margin-bottom:8px; }
.pl-card p { font-size:13px; color:var(--steel); line-height:1.7; }

.cta { padding:120px 48px; text-align:center; background:var(--near-black); }
.cta-inner { max-width:560px; margin:0 auto; }
.cta h2 { font-size:36px; font-weight:600; letter-spacing:-0.025em; line-height:1.2; margin-bottom:20px; }
.cta p { font-size:17px; color:var(--steel); line-height:1.7; margin-bottom:36px; }
.cta-btn { display:inline-block; padding:14px 36px; border-radius:100px; background:var(--hawk); color:var(--black); text-decoration:none; font-weight:600; font-size:15px; transition:background 0.2s; }
.cta-btn:hover { background:var(--hawk-dark); }

.footer { padding:48px; border-top:1px solid var(--charcoal); }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:48px; }
.footer-left { display:flex; flex-direction:column; gap:12px; }
.footer-brand { font-family:var(--font-mono); font-size:16px; color:var(--white); font-weight:500; }
.footer-powered { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--graphite); margin-top:8px; }
.footer-powered img { width:14px; height:14px; }
.footer-reg { font-family:var(--font-mono); font-size:10px; color:var(--graphite); line-height:1.8; }
.footer-links { display:flex; gap:48px; }
.footer-col h5 { font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--graphite); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; }
.footer-col a { display:block; font-size:13px; color:var(--steel); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; }
.footer-col a:hover { color:var(--white); }

.subpage { display:none; }
.subpage.active { display:block; }
.sub-hero { padding:140px 48px 80px; max-width:1200px; margin:0 auto; }
.sub-back { display:inline-block; font-family:var(--font-mono); font-size:13px; color:var(--hawk); text-decoration:none; margin-bottom:32px; }
.sub-tag { display:block; font-family:var(--font-mono); font-size:12px; color:var(--hawk); letter-spacing:0.06em; margin-bottom:12px; }
.sub-hero h1 { font-size:44px; font-weight:700; letter-spacing:-0.03em; line-height:1.1; margin-bottom:24px; max-width:680px; }
.sub-lead { font-size:18px; color:var(--steel); line-height:1.7; max-width:580px; font-weight:300; }
.sub-section { padding:0 48px 80px; max-width:1200px; margin:0 auto; }
.sub-body { font-size:15px; color:var(--silver); line-height:1.8; max-width:640px; }
.sub-cap-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.sub-cap { padding:24px; border-radius:10px; border:1px solid var(--charcoal); }
.sub-cap h4 { font-size:14px; font-weight:600; margin-bottom:6px; }
.sub-cap p { font-size:12px; color:var(--steel); line-height:1.7; }
.sub-cta { padding:60px 48px; max-width:1200px; margin:0 auto; text-align:center; border-top:1px solid var(--charcoal); }
.sub-cta h3 { font-size:22px; font-weight:600; margin-bottom:20px; }
.app-placeholder { margin-top:32px; padding:64px; border-radius:16px; border:2px dashed var(--charcoal); text-align:center; color:var(--graphite); font-family:var(--font-mono); font-size:12px; }

.loop-section { padding:0 48px 80px; max-width:1200px; margin:0 auto; }
.loop-vis { background:var(--near-black); border:1px solid var(--charcoal); border-radius:16px; padding:48px; text-align:center; }
.loop-step { display:inline-block; padding:10px 20px; border-radius:8px; font-family:var(--font-mono); font-size:11px; margin:4px; }
.loop-step.acq { background:var(--charcoal); color:var(--silver); }
.loop-step.sh { background:var(--hawk-bg); color:var(--hawk); border:1px solid var(--hawk-border); }
.loop-step.wf { background:rgba(74,189,178,0.1); color:var(--teal); border:1px solid rgba(74,189,178,0.25); }
.loop-arrow { font-family:var(--font-mono); color:var(--graphite); font-size:14px; margin:0 4px; }
.loop-row { margin-bottom:12px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }

@media (max-width:900px) {
  .nav { padding:0 24px; } .nav-links { display:none; }
  .hero { padding:140px 24px 80px; } .hero h1 { font-size:32px; }
  .opp,.how,.buckets,.platform,.cta { padding:80px 24px; }
  .opp-grid,.bk-grid { grid-template-columns:1fr; }
  .how-steps { grid-template-columns:1fr 1fr; }
  .pl-grid,.sub-cap-grid { grid-template-columns:1fr; }
  .footer { padding:32px 24px; } .footer-links { flex-direction:column; gap:24px; }
  .sub-hero { padding:120px 24px 60px; } .sub-hero h1 { font-size:28px; }
  .sub-section,.loop-section { padding:0 24px 60px; }
}