/* ============================================================
   MINTIT — shared styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo:ital,wght@0,400;0,500;0,600;1,500&family=Space+Mono:wght@400;700&display=swap');

:root{
  --lime: #A6E22E;
  --lime-dim: #8FCB1F;
  --spring: #34D058;      /* second green — deeper, vivid */
  --spring-deep: #12B24A;
  --ink: #0D0F0A;
  --forest: #16210F;
  --cream: #F5F4EE;
  --cream-dim: #E9E7DD;
  --white: #FFFFFF;
  --muted: #4a4a42;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: var(--cream);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; letter-spacing:-0.02em; line-height:1;
}
.mono{ font-family:'Space Mono', monospace; letter-spacing:0.02em; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--spring); outline-offset:2px; }

/* ---------- Splat signature mark ---------- */
.splat{
  display:inline-block; width:1em; height:1em; background:currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 10c14 0 20 22 18 45-1 10 8 13 16 6 17-15 40-19 49-6 9 13-2 32-19 40-9 4-9 14 0 18 17 8 28 27 19 40-9 13-32 9-49-6-8-7-17-4-16 6 2 23-4 45-18 45s-20-22-18-45c1-10-8-13-16-6-17 15-40 19-49 6-9-13 2-32 19-40 9-4 9-14 0-18-17-8-28-27-19-40 9-13 32-9 49 6 8 7 17 4 16-6-2-23 4-45 18-45z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 10c14 0 20 22 18 45-1 10 8 13 16 6 17-15 40-19 49-6 9 13-2 32-19 40-9 4-9 14 0 18 17 8 28 27 19 40-9 13-32 9-49-6-8-7-17-4-16 6 2 23-4 45-18 45s-20-22-18-45c1-10-8-13-16-6-17 15-40 19-49 6-9-13 2-32 19-40 9-4 9-14 0-18-17-8-28-27-19-40 9-13 32-9 49 6 8 7 17 4 16-6-2-23 4-45 18-45z"/></svg>') no-repeat center / contain;
  flex-shrink:0;
}
.splat-spin{ animation: spin-float 16s ease-in-out infinite; }
@keyframes spin-float{
  0%{ transform: rotate(0deg) translateY(0); }
  25%{ transform: rotate(90deg) translateY(-14px); }
  50%{ transform: rotate(180deg) translateY(0); }
  75%{ transform: rotate(270deg) translateY(14px); }
  100%{ transform: rotate(360deg) translateY(0); }
}
.splat-slow{ animation: spin 30s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; } .d4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .splat-spin,.splat-slow{ animation:none; }
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .marquee-track{ animation:none !important; }
}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6vw; background:rgba(245,244,238,0.85);
  backdrop-filter: blur(10px);
  border-bottom:2px solid var(--ink);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; }
.brand .splat{ color:var(--ink); font-size:1.1rem; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a.link{ font-family:'Space Mono',monospace; font-size:0.85rem; position:relative; }
.nav-links a.link::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--spring); transition:width .25s ease; }
.nav-links a.link:hover::after{ width:100%; }
.nav-links a.link.active::after{ width:100%; background:var(--ink); }
.nav .cta{
  background:var(--ink); color:var(--lime); padding:10px 20px; border-radius:999px;
  font-family:'Space Mono',monospace; font-size:0.85rem; border:2px solid var(--ink); transition:all .2s ease;
}
.nav .cta:hover{ background:var(--lime); color:var(--ink); }
@media (max-width:640px){ .nav-links .link{ display:none; } }

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--lime); color:var(--ink); padding:15px 28px; border-radius:999px;
  font-weight:600; font-size:0.98rem; display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--lime); transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(166,226,46,0.4); }
.btn-ghost{
  padding:15px 28px; border-radius:999px; border:2px solid currentColor;
  font-weight:600; font-size:0.98rem; transition:all .15s ease;
}
.btn-ghost:hover{ color:var(--spring); transform:translateY(-2px); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--ink); color:var(--cream); padding:9vw 6vw 8vw; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 15%, rgba(52,208,90,0.28), transparent 45%),
              radial-gradient(circle at 15% 90%, rgba(166,226,46,0.18), transparent 40%);
  pointer-events:none;
  animation: gradient-drift 14s ease-in-out infinite alternate;
}
@keyframes gradient-drift{
  0%{ background-position: 0% 0%, 0% 0%; opacity:1; }
  100%{ background-position: 12% 8%, -8% -6%; opacity:0.85; }
}
@media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; } }
.splat-bg{ position:absolute; pointer-events:none; }
.hero .s1{ color:var(--lime); width:340px; height:340px; top:-90px; right:-70px; opacity:0.9; }
.hero .s2{ color:var(--spring); width:130px; height:130px; bottom:40px; left:5vw; opacity:0.6; }
.hero .s3{ color:var(--spring-deep); width:80px; height:80px; top:35%; left:42%; opacity:0.35; }

.eyebrow{ font-family:'Space Mono',monospace; font-size:0.85rem; display:inline-flex; align-items:center; gap:8px; margin-bottom:24px;
  color:var(--lime); border:1px solid rgba(166,226,46,0.4); padding:6px 14px; border-radius:999px; }
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--spring); box-shadow:0 0 0 0 rgba(52,208,90,0.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(52,208,90,0); } 100%{ box-shadow:0 0 0 0 rgba(52,208,90,0); } }

.hero h1{ font-size:clamp(2.7rem,7.5vw,6rem); max-width:15ch; position:relative; z-index:2; }
.hero h1 .grad{
  background:linear-gradient(100deg, var(--lime), var(--spring));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ margin-top:28px; max-width:48ch; font-size:1.18rem; line-height:1.55; color:var(--cream-dim); position:relative; z-index:2; }
.hero-ctas{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:2; }
.hero .btn-ghost{ color:var(--cream); border-color:rgba(245,244,238,0.3); }

/* ---------- Marquee ---------- */
.marquee{ background:var(--lime); color:var(--ink); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  overflow:hidden; white-space:nowrap; padding:12px 0; }
.marquee.alt{ background:var(--ink); color:var(--lime); }
.marquee-track{ display:inline-flex; animation: scroll 30s linear infinite; }
.marquee.rev .marquee-track{ animation-direction: reverse; }
.marquee-track span{ font-family:'Space Mono',monospace; font-size:0.95rem; padding:0 2rem; display:flex; align-items:center; gap:0.6rem; }
.marquee-track .splat{ font-size:0.8rem; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Sections ---------- */
section{ padding:7vw 6vw; position:relative; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3.4rem; }
.section-head h2{ font-size:clamp(1.9rem,4.4vw,3rem); max-width:18ch; }
.section-head .tag{ font-family:'Space Mono',monospace; font-size:0.85rem; color:var(--forest); opacity:0.65; max-width:34ch; }
.eyebrow-dark{ font-family:'Space Mono',monospace; font-size:0.8rem; color:var(--spring-deep); display:flex; align-items:center; gap:8px; margin-bottom:16px; }

/* ---------- Pillars / cards grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:2px solid var(--ink); }
.cell{ background:var(--white); padding:2.6rem 2rem; display:flex; flex-direction:column; gap:1.1rem;
  transition: background .2s ease, transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; }
.cell:hover{ background:var(--cream-dim); transform:translateY(-6px); box-shadow:0 18px 34px rgba(13,15,10,0.12); z-index:2; }
.cell .splat{ font-size:1.6rem; color:var(--spring); }
.cell:hover .splat{ animation:spin-float 3.5s ease-in-out infinite; color:var(--spring-deep); }
.cell h3{ font-size:1.35rem; }
.cell p{ color:var(--muted); line-height:1.55; font-size:0.98rem; }
@media (max-width:780px){ .grid-3{ grid-template-columns:1fr; } }

/* ---------- Showcase (teardown cards) ---------- */
.showcase{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
.tcard{ border-radius:22px; padding:1.8rem; position:relative; overflow:hidden; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; border:2px solid var(--ink);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; }
.tcard:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(13,15,10,0.18); }
.tcard .splat-bg{ opacity:0.18; width:150px; height:150px; bottom:-30px; right:-30px; }
.tcard .badge{ font-family:'Space Mono',monospace; font-size:0.72rem; padding:5px 12px; border-radius:999px;
  align-self:flex-start; background:rgba(13,15,10,0.1); position:relative; z-index:2; }
.tcard h3{ font-size:1.5rem; line-height:1.1; position:relative; z-index:2; }
.tcard .meta{ font-family:'Space Mono',monospace; font-size:0.78rem; opacity:0.75; position:relative; z-index:2; }
.tcard.dark{ background:var(--ink); color:var(--cream); }
.tcard.dark .splat-bg{ color:var(--spring); }
.tcard.lime{ background:var(--lime); color:var(--ink); }
.tcard.lime .splat-bg{ color:var(--ink); }
.tcard.spring{ background:linear-gradient(150deg, var(--spring), var(--spring-deep)); color:var(--ink); }
.tcard.spring .splat-bg{ color:var(--ink); }
.tcard.cream{ background:var(--white); color:var(--ink); }
.tcard.cream .splat-bg{ color:var(--spring); }

/* ---------- Topics list (big rows) ---------- */
.topics{ border-top:2px solid var(--ink); }
.topic-row{ display:flex; align-items:center; gap:1.5rem; padding:1.6rem 0; border-bottom:2px solid var(--ink);
  transition: padding-left .25s ease, background .25s ease; cursor:default; }
.topic-row:hover{ padding-left:1.5rem; background:linear-gradient(90deg, rgba(52,208,90,0.12), transparent); }
.topic-row .num{ font-family:'Space Mono',monospace; font-size:0.85rem; color:var(--spring-deep); width:44px; }
.topic-row .name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.3rem,3vw,2rem); flex:1; }
.topic-row .desc{ color:var(--muted); font-size:0.92rem; max-width:34ch; }
.topic-row .splat{ font-size:1.1rem; color:var(--spring); opacity:0; transform:translateX(-10px); transition:all .25s ease; }
.topic-row:hover .splat{ opacity:1; transform:translateX(0); }
@media (max-width:720px){ .topic-row .desc{ display:none; } }

/* ---------- Proof / banner strip ---------- */
.banner{ background:var(--forest); color:var(--cream); padding:5vw 6vw; display:flex; align-items:center;
  gap:2rem; flex-wrap:wrap; justify-content:space-between; position:relative; overflow:hidden; }
.banner::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 50%, rgba(52,208,90,0.25), transparent 50%); pointer-events:none; }
.banner p{ font-family:'Space Grotesk',sans-serif; font-size:clamp(1.4rem,3vw,2.1rem); max-width:28ch; line-height:1.3; position:relative; z-index:2; }
.banner p .splat{ color:var(--spring); font-size:0.9em; }
.banner .mono{ opacity:0.6; font-size:0.85rem; position:relative; z-index:2; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink); border:2px solid var(--ink); }
.stat{ background:var(--white); padding:2.2rem 1.5rem; text-align:center; }
.stat .n{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,2.8rem);
  background:linear-gradient(120deg,var(--spring-deep),var(--lime-dim)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l{ font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--muted); margin-top:8px; }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Join CTA ---------- */
.join{ background:var(--lime); padding:8vw 6vw; text-align:center; position:relative; overflow:hidden; }
.join::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(52,208,90,0.4), transparent 45%); pointer-events:none; }
.join .splat-bg{ color:rgba(13,15,10,0.08); }
.join .j1{ width:420px; height:420px; top:-130px; left:-110px; }
.join .j2{ width:240px; height:240px; bottom:-90px; right:-50px; }
.join h2{ font-size:clamp(2.1rem,5.5vw,3.8rem); max-width:17ch; margin:0 auto 1.4rem; position:relative; z-index:2; }
.join p{ max-width:44ch; margin:0 auto 2.4rem; color:var(--forest); font-size:1.08rem; position:relative; z-index:2; }
.join .btn-primary{ background:var(--ink); color:var(--lime); border-color:var(--ink); position:relative; z-index:2; }
.join .btn-primary:hover{ box-shadow:0 12px 30px rgba(13,15,10,0.35); }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:var(--cream-dim); padding:3rem 6vw 2.4rem; }
.foot-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem; }
footer .brand{ color:var(--cream); font-size:1.4rem; }
footer .brand .splat{ color:var(--spring); }
.foot-tag{ font-family:'Space Mono',monospace; font-size:0.82rem; opacity:0.7; max-width:30ch; margin-top:12px; }
.foot-nav{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:10px; }
.foot-col b{ font-family:'Space Mono',monospace; font-size:0.75rem; letter-spacing:0.08em; opacity:0.5; text-transform:uppercase; }
.foot-col a{ font-size:0.92rem; transition:color .2s ease; }
.foot-col a:hover{ color:var(--spring); }
.foot-bottom{ border-top:1px solid rgba(245,244,238,0.15); padding-top:1.6rem; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; font-family:'Space Mono',monospace; font-size:0.78rem; opacity:0.6; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ background:var(--ink); color:var(--cream); padding:8vw 6vw 6vw; position:relative; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(52,208,90,0.25), transparent 45%); pointer-events:none; }
.page-hero .splat-bg{ color:var(--lime); width:260px; height:260px; top:-70px; right:-50px; opacity:0.85; }
.page-hero h1{ font-size:clamp(2.4rem,6vw,4.6rem); max-width:16ch; position:relative; z-index:2; }
.page-hero h1 .grad{ background:linear-gradient(100deg,var(--lime),var(--spring)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p{ margin-top:22px; max-width:52ch; font-size:1.12rem; line-height:1.55; color:var(--cream-dim); position:relative; z-index:2; }

/* ---------- Prose (about) ---------- */
.prose{ max-width:60ch; }
.prose p{ font-size:1.12rem; line-height:1.7; color:#2a2a24; margin-bottom:1.4rem; }
.prose p .hl{ background:linear-gradient(transparent 60%, rgba(166,226,46,0.5) 60%); font-weight:500; }
.lead{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(1.3rem,2.6vw,1.7rem)!important;
  line-height:1.4!important; color:var(--ink)!important; }

/* two-col about */
.split{ display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:2.4rem; } }
.side-card{ background:var(--ink); color:var(--cream); border-radius:22px; padding:2.4rem; position:relative; overflow:hidden; }
.side-card .splat-bg{ color:var(--spring); width:160px; height:160px; bottom:-40px; right:-40px; opacity:0.3; }
.side-card h3{ font-size:1.4rem; margin-bottom:1.2rem; position:relative; z-index:2; }
.side-card ul{ list-style:none; display:flex; flex-direction:column; gap:1rem; position:relative; z-index:2; }
.side-card li{ display:flex; gap:12px; align-items:flex-start; font-size:0.98rem; line-height:1.4; color:var(--cream-dim); }
.side-card li .splat{ color:var(--lime); font-size:0.9rem; margin-top:3px; }

/* ---------- Now page: shift rows ---------- */
.shift-list{ display:flex; flex-direction:column; }
.shift{ display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start;
  padding:3rem 0; border-top:2px solid var(--ink); }
.shift:last-child{ border-bottom:2px solid var(--ink); }
.shift-k{ display:flex; align-items:center; gap:1rem; }
.shift-k .mono{ font-size:0.85rem; color:var(--spring-deep); }
.shift-k .splat{ font-size:1.4rem; color:var(--spring); }
.shift h3{ font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.05; }
.shift p{ color:var(--muted); font-size:1.05rem; line-height:1.65; grid-column:2; margin-top:-1.2rem; }
.shift:hover h3{ color:var(--spring-deep); transition:color .25s ease; }
@media (max-width:760px){
  .shift{ grid-template-columns:1fr; gap:1rem; padding:2.2rem 0; }
  .shift p{ grid-column:1; margin-top:0; }
}

/* ---------- Now page: quote ---------- */
.quote-wrap{ background:var(--ink); color:var(--cream); text-align:center; position:relative; overflow:hidden;
  padding:8vw 6vw; }
.quote-wrap .splat-bg{ color:var(--spring); width:280px; height:280px; top:-80px; left:-60px; opacity:0.18; }
.quote-wrap blockquote{ max-width:24ch; margin:0 auto; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1.6rem,4vw,2.8rem); line-height:1.25; position:relative; z-index:2; }
.quote-wrap .qmark{ display:block; font-size:4rem; color:var(--spring); line-height:0.6; margin-bottom:0.4rem; }