/* PUTTOWORK.CO SHARED STYLES */
/* Pure black #000, Bebas Neue headings, Space Grotesk body, minimal white-on-black */

@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:block;src:url(data:font/woff2;base64,d09GMgABAAAAADSQAA4AAAAAlkAAADQ1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGnQbvQgcixoGYACKehEICoGgeIGDSAuHZAABNgIkA48mBCAFhAQHmFEbtIIHZF5L3MF5AHL9uYlTFewmeNDbyyqFCGg0IoKNAwKa1VXy/39GcjKGYxYwNat6D4qJqCDQ1QtluqBG7z1q0kUNgsIyy+VUR4yl5MQL+mY3K1PDwoPhmS/u9nl/c6DDzKzHAst068c4NukdyWAphGwmG0ggQ0vQ4fjnd4WIkwrCt8f7Tf9MZl47mnHOa2SOahkbjB0snPilIrc6m88Ad1gRoysRvB7/P3tykQe4hCqxEr4E5ojmbHbvLnK5XBT8W8RCRYSapSYpRTyE0pSaYXUqrljAg4h96pYWzQ/8Nnt8MbACRULATyioIBVKCyK0AkZ9FVExZ9Qqy+ttehHpRe0y3UXyz/8f8dvnPvFvMDXNYGkJ9i3QSQMLPIug2Vrr8s/z9/Hb69w/vveHJh4NEohLm4WLPJGQwrqQxHQVprJl5z5hTQtqTA+eQ68CCBiy0yzTkE1gG/IeMpG20Il1TiSDPKKBQaSkDBnAYlQprIgWrVVzZXohnanJHiEYCw9G3v2vNZ/VlBnRH4Xb0tF0j8bgOYE7vMn2prio3QB/DegwpVD/0tn/q+1r3jf6gJcpQSusQobVlrJe3c64BRdWK006RBR1mSUcJkl/96kdbKW1jx8WIV07//fbybMqnlIRLNqmUYJRMgcGpUUaDO58p9PvO1YTjuD6us7e+1bUUFugQgXI2nr/79Ns9XV2zmO7NAc7TmehOfkLFKvdQD49MDVaP7MyF9P34CrnRB5vayQFzUaayNDCJyeu5ztUu1GURhaqoDalEAlYlWmoqJNl6JN0aUpmqQL4uC4hqkE4MdMIgJvuiPrcRiA9RgGOEvnGGDz6XxdrY92wmOBp2ztsIWk0tZtOt2d5APryTrLX/RBUcmfDQU7rB8i/yJN6UYwOXbBdgF4Appx7bASDlOXretW/9/lNz37crfQu8eY3C9UDk7lz0tomUeZQh1cLbI0V6rcg/oWjxHgdjUOpZBgNFTpAZ2M2mcBsKJYG3tfe6B9u8YSIhSp29fMjXr8N7HHtbCPRSRNgwRJRSSIbK9/ncM43f2l0HNe8qJj23I1WXHOqWNWyMrjJ3pvGQFGAnSGESlWHk6l+nAaNIIhQqQlkGWWQ1YKhAR7A3nnPeSTPyF/WYXLMSUCOJRJ0clQJC+elEKI88CiVfQcgaxI/ZEAEBHQ01Cs9/Z/dBtzfvkSiwSEBjQkAIFHfnoCBxtvk4FIXBmf25rge91/n0DXNx9UwdCte/NCA4g3+WL++duMQBi1MAggcx2Ae5j2FpkpZWqFABQrG8l+UWmmPaExMslB9t0lDlcNqWV4Y4v2upSijR2gLVQphhY10kTlSkwoFTU25UCCpFyoMZfPw4eeFVwrzxMXHf+ZK5ZNClvlC2Wb0Awym2ldTF610fjo2+3QS5VF43md4qyOCRJoIQ89qHzgdfCoWjnWQ2WSfd2Tt8J68yEQpsT+KZHuTbJLEfPLfe8Z+Wrv7AjL+Ajt8GHT/Hh3hbexXP40nt4cR7I7dfERJulFfDvPQ4f5z0Tz72pboOx4H+xmOklU3bJlrXS1pUC+ONERsHHdfF6limLUicXzpTwmRMMscc7IPuDzyyE7r2TKAxvwN0+J387wCD+YiE10FJa9E6uuqCDi+LepYSH8eDuFu7FdfHr7y9TOc6HI4nXok48+jbyNut/p4BsDO21TZP3LB0bckDVo275LbqVn+r3ibSwQhAxSEWQDO0SImE59FfezjxXtUzyc6i2ijBLeq/Aa7kV21z/T3kl7zn7z398+X7ufvt+3vn/Pf8+jy/4R99I+9+83ev+73+r/+P+0+f/r/H/9/e9v79//j/vP1/+f/cv/+v32/+x//5v+/p/+tfP/9v1//59//3/v+/+P+9/z/x/1///+/f/3/4//8//v///9/z4T17ft6mZ2OIQPf+Yjpuc/bSc3M/0j1RFBIggCOz2KiEQIIQIggAgCAEAIQQghBCCEAIIQQghAgBSKEEIQQQhBCCEAIIQQhhBCEEEIQQghBCCEEIYQQhBBCECDXH1EhLq7fvGxpS//N+dZ+3Z/v29/4f/59Ljn3+Pd43fP+//vd/r///9///+//v/H///+////v////99////v//9/+///v////////v////v//////////n////////////////////////////////////////////3//////////v////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8=) format("woff2")}@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAACVwAA0AAAAATIwAAACSUWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgVgchFQGYACDShEICqFIm10BNgIkA4M8C4RiBCAFlAUHjFMbt4IX1W5wIH90W7YJ0qGWRxJZN4k4fgRB//u1nfvelMgkk0gi4hkidJLIEkmq1eqaIIRKJ1GrBN3b//+fvfdqJXc9bVhWOt3dnc7dtG3bOjbJNk6ybVuW/ffv5Mncu8MnbZ8+TdtcaxtXnpEzzz7rnPc5B2CEyBRB+kCMQCB6EYhBJCDDqRZB+iMxBZGECKdaFPnvFsUIZEQkQDgVIjl+iGjDiOQvNtbu//vzTfP/39P/n9YeUDWRBr/wNGLQkEIHBj3oQMDGQ/5/O9t29m5nm8TRfnGqLxAKogKHKIiIYcgKKqJAIgoiYggSjk7aqX3f2/t+V9Wqt+93NVVvGjCcBuRWgBIUwADh5YmB5ggCADjBBh6y0IUEQ4JAJAAHCQmAAfAlAD+AQApJJCABCRy8kYICKvjDAi/kIIEQfBBRO9N53/vdz/d+/09VP/X/Pz1V+/+f//9P84D/9z/Vfz93NQNw9wf/1v+RgQLgvQEw//8v7v///+2o/6uqav/4/6j/o/7+aRpAfOqP/7VfTy6BzOOBEAAgdpQqzHVPSMAWBJARohgiYfkSWwxDIDDCYIgk8iUxBYJAiCZICEIOy5fBkBAMkZR8WQwJQ0CQEBTJl82QCAyRtHw5DImEwBBJw1fA2EpxDEhaSBFrGX56jG/B+HjMNb7FxsfDviamZqYJxlZ/Evz/x9X+h0H5n2bV//+o+qtq/wRDBYa0VPkxWZaV6xpx+YO/YbWZj/v7N2bkz94F0EsJpCJKgCBKAUOkAoIoBYIoFYQoFQSRAoqCAkpCDCQpI0CBSMQxpEDykQOJKPmQCAohJB+ykHyQkeRDDiQf8iAFkA+FkAIoBJIPRZACSEEUQQogCiGFUAQohBRCESjIkwz5tAiD6EhBlKAP/Ucfr+GbMH4Oc4PvJn4H86+f+D/+1f71/1XVqv7U//73f/P/qv//X/v/v6k/LkFvAAgGCIBAIEDAAQEDBz4k4H/6f8z/AJz5/z9O/f+fqv1v+vvf//9X/ff/1P/+//w//9P+r/D/+p/nf9r/Ov8//+/+n/3/yf8P/z/6/+H/R/8//P/o/0f/P/r/0f+P/s/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f/s/2f/P/v/2f/P/n/2/7P/n/3/7P9n/z/7/9n/z/5/9v+z/5/9/+z/Z/8/+//Z/8/+f/b/s/+f/f8HmMWiog==) format("woff2")}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  background: #000;
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: #fff; text-decoration: none; }

h1, h2, h3, h4, .stat-num, .logo, .cta {
  font-family: 'Bebas Neue', 'Space Grotesk', sans-serif;
}

/* NAVIGATION */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: #000;
  z-index: 1000;
}

.logo {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 2px;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  font-size: 0.9rem;
  opacity: 0.6;
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
}

/* HERO */
.hero {
  padding: 12rem 2.5rem 6rem;
  max-width: 900px;
}

.hero h1 {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.hero h1 .thin {
  opacity: 0.5;
}

.hero .sub {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 400;
  opacity: 0.55;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 600px;
}

/* CTA BUTTON */
.cta {
  display: inline-block;
  border: 1px solid #fff;
  padding: 0.85rem 2.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  transition: all 0.2s;
}

.cta:hover {
  background: #fff;
  color: #000;
}

.cta.secondary {
  opacity: 0.6;
  border-color: rgba(255,255,255,0.4);
}

.cta.secondary:hover {
  opacity: 1;
  background: transparent;
  border-color: rgba(255,255,255,1);
}

/* STATS */
.stats {
  padding: 0 2.5rem 6rem;
  max-width: 900px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 4rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  margin-bottom: 1rem;
}

.stat-num {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}

.stat-label {
  font-size: 0.85rem;
  opacity: 0.4;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* SECTIONS */
.section {
  padding: 6rem 2.5rem;
  max-width: 900px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.section h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.section h2 .thin { opacity: 0.5; }

.section-sub {
  font-size: 1.05rem;
  opacity: 0.5;
  margin-bottom: 3rem;
  line-height: 1.6;
}

/* CARDS */
.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.cap {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 2rem;
  transition: border-color 0.2s;
}

.cap:hover {
  border-color: rgba(255,255,255,0.4);
}

.cap h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.cap p {
  font-size: 0.85rem;
  opacity: 0.45;
  line-height: 1.5;
}

/* INSIGHTS */
.insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.insight {
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.insight-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.insight-desc {
  font-size: 0.85rem;
  opacity: 0.45;
  line-height: 1.5;
}

/* TABLES */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 3rem 0;
  font-family: 'Space Grotesk', monospace;
}

table th,
table td {
  padding: 1.25rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.95rem;
}

table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.4;
  font-weight: 400;
}

table tr:hover {
  background: rgba(255,255,255,0.02);
}

.variant-name {
  font-weight: 600;
}

.best-metric {
  font-weight: 600;
  opacity: 1;
}

/* STATUS INDICATORS */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.status-dot.live { background: #0f0; }
.status-dot.paused { background: #ff0; }

/* COPY BUTTON */
.copy-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.4rem 1rem;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.copy-btn:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
}

/* FOOTER */
footer {
  padding: 3rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.35;
  max-width: 900px;
}

footer a {
  opacity: 0.7;
  transition: opacity 0.2s;
}

footer a:hover {
  opacity: 1;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  nav, .hero, .stats, .section, footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .nav-links { gap: 1.2rem; font-size: 0.8rem; }
  table { font-size: 0.8rem; }
  table th, table td { padding: 0.75rem 0.5rem; }
  footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}