/* ============================================
   LaunchLocal Studio — Shared Design System
   ============================================ */

:root {
  --cream: #FBFBF4;
  --ink: #020202;
  --ink-60: rgba(2,2,2,.6);
  --ink-35: rgba(2,2,2,.35);
  --ink-12: rgba(2,2,2,.12);
  --ink-08: rgba(2,2,2,.08);
  --ink-04: rgba(2,2,2,.04);
  --cream-60: rgba(251,251,244,.6);
  --cream-40: rgba(251,251,244,.4);
  --cream-12: rgba(251,251,244,.12);
  --cream-08: rgba(251,251,244,.08);
  --ease: cubic-bezier(.16,1,.3,1);
  --pad-x: clamp(20px,6vw,80px);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--cream); color:var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection { background:var(--ink); color:var(--cream); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* Animations */
@keyframes letterRise { to { opacity:1; transform:translateY(0); } }
@keyframes marqScroll { to { transform:translateX(-50%); } }

/* Scroll reveal */
[data-reveal] {
  opacity:0; transform:translateY(18px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
[data-reveal].revealed { opacity:1; transform:translateY(0); }
[data-reveal-delay="1"] { transition-delay:.1s; }
[data-reveal-delay="2"] { transition-delay:.2s; }
[data-reveal-delay="3"] { transition-delay:.3s; }
[data-reveal-delay="4"] { transition-delay:.4s; }

/* ---- Grain ---- */
.grain {
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Cursor ---- */
.cursor {
  position:fixed; top:0; left:0; width:18px; height:18px; border-radius:50%;
  background:var(--cream); mix-blend-mode:difference;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease);
}
.cursor.grow { width:52px; height:52px; }
@media (hover:none) { .cursor { display:none; } }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60); display:flex; align-items:center; gap:10px;
}
.eyebrow::before { content:''; width:18px; height:1px; background:var(--ink-35); display:inline-block; flex-shrink:0; }
.eyebrow.light { color:var(--cream-60); }
.eyebrow.light::before { background:rgba(251,251,244,.35); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 24px; font-size:13.5px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--ink); cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
  will-change:transform; font-family:'Hanken Grotesk',sans-serif;
}
.btn:hover { background:var(--ink); color:var(--cream); }
.btn-dark { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn-dark:hover { background:transparent; color:var(--ink); }
.btn-cream { background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn-cream:hover { background:transparent; color:var(--cream); border-color:var(--cream); }

/* ---- Nav ---- */
.nav-bg {
  position:fixed; top:0; left:0; right:0; height:80px; z-index:499;
  background:var(--cream); border-bottom:1px solid var(--ink-08);
}
header {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x); height:80px;
}
.logo {
  font-weight:700; font-size:17px; letter-spacing:-.01em;
  display:flex; align-items:center;
}
.logo-anim { display:flex; }
.logo-anim span { display:inline-block; opacity:0; transform:translateY(8px); animation:letterRise .5s var(--ease) forwards; }
nav.links { display:flex; align-items:center; gap:32px; }
.links-inner { display:flex; align-items:center; gap:32px; }
.links-inner a { font-size:14px; position:relative; padding-bottom:2px; }
.links-inner a::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ink); transition:width .35s var(--ease);
}
.links-inner a:hover::after, .links-inner a.active::after { width:100%; }
.links-inner a.active { font-weight:600; }
.clock { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-60); letter-spacing:.04em; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:22px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  position:fixed; top:80px; left:0; right:0; z-index:498;
  background:var(--cream); border-bottom:1px solid var(--ink-12);
  padding:24px var(--pad-x) 32px; display:none; flex-direction:column; gap:20px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:18px; font-weight:500; }
@media (max-width:860px) { .links-inner,.clock { display:none; } .hamburger { display:flex; } }

main { padding-top:80px; }

/* ---- Marquee ---- */
.marquee-wrap { border-top:1px solid var(--ink-08); border-bottom:1px solid var(--ink-08); padding:16px 0; overflow:hidden; }
.marquee-wrap.dark { background:var(--ink); border-color:var(--cream-12); }
.marquee-inner { display:flex; width:max-content; animation:marqScroll 30s linear infinite; }
.marquee-inner span {
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.05em;
  color:var(--ink-60); white-space:nowrap; padding:0 28px;
}
.marquee-inner span.sep { color:var(--ink-35); padding:0; }
.dark .marquee-inner span { color:var(--cream-60); }
.dark .marquee-inner span.sep { color:var(--cream-40); }

/* ---- Sticky WhatsApp ---- */
.wa-sticky {
  position:fixed; bottom:24px; right:24px; z-index:600;
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--cream); padding:13px 20px; border-radius:100px;
  font-size:13.5px; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.16);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.wa-dot { width:8px; height:8px; border-radius:50%; background:#25D366; flex-shrink:0; }
.wa-sticky.hidden { opacity:0; transform:translateY(14px); pointer-events:none; }

/* ---- Footer ---- */
footer { background:var(--ink); color:var(--cream); padding:64px var(--pad-x) 28px; }
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid var(--cream-12);
}
.footer-brand .logo { color:var(--cream); }
.footer-brand p { font-size:13.5px; color:var(--cream-60); max-width:30ch; line-height:1.65; margin-top:14px; }
.footer-col h4 {
  font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--cream-40); margin-bottom:16px; font-weight:500;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col ul a { font-size:14px; color:rgba(251,251,244,.8); transition:color .2s; }
.footer-col ul a:hover { color:var(--cream); }
.legal-row {
  padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--cream-40);
}
.legal-row .copyright {
  flex-basis:100%; margin-top:8px; padding-top:16px; border-top:1px solid var(--cream-12);
}
@media (max-width:700px) { .footer-grid { grid-template-columns:1fr; gap:32px; } }

/* ---- Launch offer modal ---- */
.offer-modal {
  position:fixed; inset:0; z-index:900; display:grid; place-items:center;
  padding:24px; background:rgba(17,17,17,.46); opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s;
}
.offer-modal.open { opacity:1; visibility:visible; }
.offer-dialog {
  width:min(520px,100%); background:var(--cream); border:1px solid var(--ink);
  padding:clamp(28px,4vw,48px); position:relative; transform:translateY(18px);
  transition:transform .38s var(--ease);
}
.offer-modal.open .offer-dialog { transform:none; }
.offer-close {
  position:absolute; top:16px; right:16px; border:0; background:transparent;
  font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-60); cursor:pointer; padding:6px;
}
.offer-eyebrow {
  display:flex; align-items:center; gap:10px; font:500 10px 'IBM Plex Mono',monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60);
}
.offer-eyebrow::before { content:''; width:18px; height:1px; background:var(--ink-35); }
.offer-dialog h2 { font-size:clamp(38px,6vw,64px); line-height:.96; letter-spacing:-.04em; margin-top:26px; }
.offer-intro { margin-top:24px; color:var(--ink-60); font-size:15px; line-height:1.6; max-width:38ch; }
.offer-price { margin-top:28px; padding:20px 0; border-top:1px solid var(--ink-12); border-bottom:1px solid var(--ink-12); }
.offer-price strong { display:block; font-size:clamp(23px,4vw,34px); letter-spacing:-.025em; }
.offer-price span { display:block; margin-top:7px; font:400 10px 'IBM Plex Mono',monospace; letter-spacing:.06em; color:var(--ink-60); text-transform:uppercase; }
.offer-note { margin-top:20px; font-size:12px; line-height:1.55; color:var(--ink-60); }
.offer-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
body.offer-open { overflow:hidden; }
@media (max-width:700px) {
  .offer-modal { place-items:end center; padding:0; }
  .offer-dialog { width:100%; border-width:1px 0 0; padding:32px var(--pad-x) 28px; transform:translateY(100%); }
  .offer-dialog h2 { font-size:42px; margin-top:22px; }
  .offer-intro { font-size:14px; margin-top:18px; }
  .offer-price { margin-top:22px; padding:16px 0; }
  .offer-actions { margin-top:22px; }
  .offer-actions .btn { flex:1; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .offer-modal,.offer-dialog { transition:none; }
}

/* ---- Page hero (shared) ---- */
.page-hero {
  padding:80px var(--pad-x) 64px; border-bottom:1px solid var(--ink-08);
}
.page-hero .eyebrow { margin-bottom:20px; }
.page-hero h1 {
  font-size:clamp(30px,5vw,56px); font-weight:700; letter-spacing:-.025em; line-height:1.04;
}
.page-hero .lede {
  font-size:clamp(15px,1.6vw,18px); color:var(--ink-60); line-height:1.65;
  max-width:48ch; margin-top:22px;
}

/* ---- Section containers ---- */
.section { padding:80px var(--pad-x); }
.section-sm { padding:56px var(--pad-x); }
.section-lg { padding:104px var(--pad-x); }
.section-dark { background:var(--ink); color:var(--cream); }
.divider { border:none; border-top:1px solid var(--ink-08); }
.divider-dark { border:none; border-top:1px solid var(--cream-12); }

/* ---- Grids ---- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink-08); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-08); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-08); }
@media (max-width:960px) { .grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* ---- Cards ---- */
.card { background:var(--cream); padding:36px 30px; }
.card-dark { background:var(--ink); padding:36px 30px; }
.card h3 { font-size:18px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px; }
.card p, .card-dark p { font-size:14px; line-height:1.65; color:var(--ink-60); }
.card-dark p { color:var(--cream-60); }

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  color:var(--ink-35); display:flex; gap:10px; align-items:center;
  padding:14px var(--pad-x); border-bottom:1px solid var(--ink-08);
}
.breadcrumb a { color:var(--ink-60); }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb .sep { color:var(--ink-35); }

/* ---- Deadline badge ---- */
.deadline-badge {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.02em;
  padding:9px 14px; border:1px solid var(--ink-12); margin-top:28px;
}
.d-dot { width:6px; height:6px; border-radius:50%; background:var(--ink); flex-shrink:0; }