/* ImpulseMonk: shared base, header, footer, buttons. Page CSS lives in home.css, vision.css, about.css, books.css, contact.css */

:root {
  --z: 1;
  --ink: #18181b;
  --muted: #5e5d62;
  --orange: #e07a1b;
  --brown: #965b00;
  --rust: #b9510a;
  --navy: #102f3b;
  --cream: #fbf7ef;
  --line: #e4dcce;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 132px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Geist', system-ui, sans-serif; color: var(--ink); background: var(--cream); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
section[id] { scroll-margin-top: 100px; }

.wrap { width: 1440px; margin: 0 auto; position: relative; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Header: overlays the hero, gets a solid backdrop after scroll (no filter on the header itself) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; height: 0; }
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--header-h); background: rgba(251, 247, 239, .97); opacity: 0; transition: opacity .35s ease; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.site-header.scrolled::before { opacity: 1; }
.site-header .wrap { height: var(--header-h); }
.brand { position: absolute; left: 50px; top: 45.5px; font: 700 36px/41.4px 'Tinos', serif; color: var(--navy); }
.brand span { color: var(--rust); }
.nav-links { position: absolute; left: 450px; top: 42px; display: flex; gap: 33px; }
.nav-links a { position: relative; display: block; min-width: 54px; height: 46px; padding-top: 12.6px; text-align: center; font: 700 16.2px/19.4px 'Lato', sans-serif; color: var(--navy); transition: color .25s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4px; background: var(--rust); opacity: 0; transition: opacity .25s ease; }
.nav-links a.active { color: var(--rust); }
.nav-links a.active::after, .nav-links a:hover::after { opacity: 1; }
.header-actions { position: absolute; left: 1008px; top: 41px; width: 368px; height: 50px; display: flex; align-items: center; gap: 15px; }
.login { display: flex; align-items: center; gap: 12px; width: 130px; height: 50px; padding-left: 26px; border: 1.3px solid var(--rust); border-radius: 30px; background: rgba(255, 255, 255, .91); box-shadow: 0 3px 5px rgba(23, 59, 67, .14); font: 700 17px/20.4px 'Lato', sans-serif; color: var(--navy); transition: transform .3s var(--ease), box-shadow .3s ease; }
.login img { width: 20px; height: 20px; }
.login:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(23, 59, 67, .2); }
.divider { width: 1px; height: 46px; background: rgba(89, 148, 163, .3); }
.explore { display: flex; align-items: center; justify-content: space-between; width: 207px; height: 50px; padding: 0 9px 0 24px; border-radius: 30px; background: #bf4d00; color: #fff; box-shadow: 0 5px 11px rgba(61, 103, 72, .29); font: 700 16.5px/19.8px 'Lato', sans-serif; transition: transform .3s var(--ease), box-shadow .3s ease; }
.explore img { width: 33px; height: 33px; transition: transform .3s var(--ease); }
.explore:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(191, 77, 0, .35); }
.explore:hover img { transform: translateX(3px); }
.m-account, .nav-toggle, .nav-links a.nav-cta-mobile { display: none; }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: #191919; color: #fff; }
.site-footer .wrap { height: 466px; }
.f-coin { position: absolute; left: 141px; top: 75px; width: 190px; height: 190px; border-radius: 50%; }
.f-col { position: absolute; top: 75px; }
.f-col h4 { font: 500 16px/21.6px 'Plus Jakarta Sans', sans-serif; margin-bottom: 16px; }
.f-col h4.b { font-weight: 700; }
.f-col li { margin-bottom: 12px; font: 400 16px/20px 'Inter', sans-serif; letter-spacing: -.15px; }
.f-col li a { color: rgba(255, 255, 255, .7); transition: color .25s ease, padding-left .25s var(--ease); }
.f-col li a:hover { color: #fff; padding-left: 4px; }
.f-col.c1 { left: 659px; }
.f-col.c2 { left: 866px; }
.f-col.c3 { left: 1107px; }
.store { position: relative; display: block; width: 187px; height: 60px; margin-bottom: 20px; background: #000; border: 1.4px solid #a6a6a6; border-radius: 8.4px; transition: transform .3s var(--ease), border-color .3s ease; }
.store:hover { transform: translateY(-3px); border-color: #fff; }
.store img { position: absolute; left: 11px; top: 11px; }
.store .t1 { position: absolute; left: 50px; font-family: 'Plus Jakarta Sans', sans-serif; color: #fff; white-space: nowrap; }
.store.gp img { width: 29.4px; height: 33.6px; }
.store.gp .t1.s { top: 7px; font-size: 11px; line-height: 14px; text-transform: uppercase; font-weight: 400; }
.store.gp .t1.l { top: 21px; font-size: 21.5px; line-height: 26px; font-weight: 500; letter-spacing: -.3px; }
.store.ap img { width: 28px; height: 33.6px; }
.store.ap .t1.s { top: 10px; font-size: 12.6px; line-height: 13px; font-weight: 500; }
.store.ap .t1.l { top: 22px; font-size: 25.2px; line-height: 26px; font-weight: 500; letter-spacing: -.66px; }
.f-bottom { position: absolute; left: 80px; right: 80px; top: 355px; height: 53px; border-top: 1px solid rgba(255, 255, 255, .22); display: flex; justify-content: space-between; align-items: flex-start; padding-top: 17px; }
.f-social { display: flex; align-items: center; }
.f-social a { display: block; transition: transform .25s var(--ease), opacity .25s ease; opacity: .9; }
.f-social a:hover { transform: translateY(-2px); opacity: 1; }
.f-social svg { display: block; width: 20px; height: 20px; }
.f-social a + a { margin-left: 16px; }
.f-copy { font: 400 14px/20px 'Inter', sans-serif; letter-spacing: -.15px; }

/* ---------- Zoom layer ---------- */
@media (min-width: 900px) { body { zoom: var(--z, 1); } }

/* ---------- Mobile ---------- */
@media (max-width: 899.98px) {
  :root { --header-h: 80px; }
  .wrap { width: 100%; }
  section[id] { scroll-margin-top: 80px; }
  .site-header::before { height: 80px; }
  .site-header .wrap { height: 80px; }
  .brand { left: 24px; top: 24px; font-size: 28px; line-height: 32px; z-index: 120; }
  .header-actions { display: none; }
  .m-account { display: block; position: absolute; right: 70px; top: 28px; width: 24px; height: 24px; z-index: 120; }
  .m-account img { width: 24px; height: 24px; }
  .nav-toggle { display: block; position: absolute; right: 14px; top: 18px; width: 44px; height: 44px; z-index: 120; }
  .nav-toggle span { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--navy); transition: transform .3s var(--ease), opacity .3s ease, top .3s var(--ease); }
  .nav-toggle span:nth-child(1) { top: 15px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 27px; }
  .nav-toggle.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  .nav-links { position: fixed; inset: 0; left: 0; top: 0; transform: translateX(100%); flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; padding: 104px 24px 32px; background: var(--cream); transition: transform .35s var(--ease); overflow-y: auto; z-index: 110; }
  .nav-links.open { transform: none; }
  .nav-links a { width: 100%; height: auto; padding: 14px 0; text-align: left; font-size: 18px; line-height: 24px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
  .nav-links a::after { display: none; }
  .nav-links a.nav-cta-mobile { display: inline-flex; align-items: center; justify-content: center; width: auto; align-self: flex-start; margin-top: 28px; padding: 0 28px; height: 48px; border: 0; border-radius: 100px; background: #bf4d00; color: #fff; font-size: 15px; line-height: 1; }
  body.menu-open { overflow: hidden; }

  .site-footer .wrap { height: auto; padding: 56px 24px 32px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .f-coin, .f-col, .f-bottom { position: static; }
  .f-coin { grid-column: 1 / -1; width: 104px; height: 104px; margin-bottom: 40px; }
  .f-col.c3 { grid-column: 1 / -1; margin-top: 20px; }
  .f-col.c3 .stores { display: flex; gap: 16px; }
  .f-col.c3 .store { margin-bottom: 0; flex: 0 0 auto; zoom: .84; }
  .f-col li { margin-bottom: 14px; font-size: 14px; }
  .f-col h4 { font-size: 16px; }
  .f-copy { font-size: 12px; }
  .f-bottom { grid-column: 1 / -1; margin-top: 36px; height: auto; padding-top: 24px; flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}