/* =========================================================================
   HoneyBusiness — shared design system
   Dark, futuristic, premium. Honey-gold brand accent + per-pillar colours.
   This one file styles every page. Header/nav/footer are identical site-wide.
   ========================================================================= */

:root{
  /* Brand */
  --honey:#E0A82E;          /* primary honey-gold */
  --honey-deep:#B7841A;
  --honey-soft:#F6D98A;

  /* Pillar signatures */
  --money:#12B981;          /* emerald  */
  --energy:#F59E0B;         /* amber    */
  --relationship:#F43F5E;   /* rose     */
  --business:#4EA8FF;       /* bright azure (pops on royal blue) */

  /* Royal blue (brand standard) */
  --royal:#1E40AF;
  --royal-bright:#2563EB;
  --royal-deep:#15296B;

  /* Surfaces (royal-blue dark) */
  --bg:#081132;
  --bg-2:#0B1A46;
  --panel:#102253;
  --panel-2:#162C63;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  /* Text */
  --ink:#EAF0F8;
  --ink-2:#AEB9CC;
  --ink-3:#7C889B;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --glow:0 0 40px -6px rgba(224,168,46,.45);

  --f-head:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Ambient background glow */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60vw 60vw at 80% -12%, rgba(224,168,46,.20), transparent 60%),
    radial-gradient(58vw 58vw at 6% 4%, rgba(37,99,235,.32), transparent 55%),
    radial-gradient(65vw 65vw at 50% 122%, rgba(30,64,175,.34), transparent 62%);
}
body::after{ /* subtle honeycomb grain */
  content:"";position:fixed;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:26px 26px;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h3{font-size:1.35rem}
.eyebrow{
  font-family:var(--f-head);font-weight:600;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--honey);display:inline-flex;align-items:center;gap:.5rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--honey);border-radius:2px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:60ch}
.muted{color:var(--ink-3)}
.gradient-text{
  background:linear-gradient(100deg,#fff 10%,var(--honey-soft) 45%,var(--honey) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-head);font-weight:600;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .25s ease;
  white-space:nowrap;
}
.btn i{font-size:1.15em}
.btn-primary{background:linear-gradient(120deg,var(--honey),var(--honey-deep));color:#241a03;box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 55px -4px rgba(224,168,46,.7)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.btn-lg{padding:1rem 1.8rem;font-size:1.05rem}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px);
  background:rgba(8,10,15,.72);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-head);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.brand .logo{width:34px;height:34px;flex:none}
.brand b{color:var(--honey)}

/* Uploaded logo emblem — 3D presentation (art untouched, only lighting/shadow) */
.logo-mark{height:44px;width:auto;flex:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(224,168,46,.4))}
.hero-emblem-wrap{position:relative;width:max-content;margin:0 auto 1.8rem;display:grid;place-items:center}
.hero-emblem-wrap::before{content:"";position:absolute;width:135%;height:135%;border-radius:50%;
  background:radial-gradient(circle,rgba(224,168,46,.30),rgba(37,99,235,.14) 45%,transparent 70%);
  filter:blur(6px);z-index:0;animation:pulse 5s ease-in-out infinite}
.hero-emblem{position:relative;z-index:1;width:clamp(150px,24vw,220px);height:auto;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.6)) drop-shadow(0 0 46px rgba(224,168,46,.4));
  animation:float 6.5s ease-in-out infinite;transform-style:preserve-3d}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-16px) rotate(.5deg)}}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.hero-emblem,.hero-emblem-wrap::before{animation:none}}

.menu{display:flex;align-items:center;gap:.35rem;list-style:none}
.menu > li{position:relative}
.menu > li > a{
  display:flex;align-items:center;gap:.35rem;
  font-family:var(--f-head);font-weight:500;font-size:.95rem;color:var(--ink-2);
  padding:.6rem .85rem;border-radius:10px;transition:color .2s,background .2s;
}
.menu > li > a:hover,.menu > li.open > a{color:var(--ink);background:rgba(255,255,255,.05)}
.menu > li.has-sub > a::after{content:"\ea5f";font-family:"tabler-icons";font-size:.9em;opacity:.6;transition:transform .2s}
.menu > li.open.has-sub > a::after{transform:rotate(180deg)}

/* Dropdown */
.submenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  /* min-width was 250px. Each row inside is its own flex layout, and the browser's automatic
     "shrink to fit" sizing gets confused by that and locks the whole box at this floor instead
     of growing for longer titles like "The Relationship Wake-Up Call" — cramming title, caption
     and the SOON badge onto three squeezed, overlapping lines. 380px comfortably fits the
     longest real label (measured ~373px) on one line with the caption and badge alongside it. */
  min-width:380px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:14px;padding:.5rem;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:.2s ease;list-style:none;
}
.menu > li:hover .submenu,.menu > li.open .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.submenu li a{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:9px;
  font-size:.92rem;color:var(--ink-2);transition:.15s;
}
.submenu li a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.submenu li a .dot{width:8px;height:8px;border-radius:50%;flex:none}
.submenu li a small{display:block;color:var(--ink-3);font-size:.72rem;font-weight:400}
.submenu li a.soon{opacity:.55}
.submenu li a.soon::after{content:"soon";margin-left:auto;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--honey);border:1px solid var(--line-2);padding:1px 6px;border-radius:6px}

.nav-cta{display:flex;align-items:center;gap:.6rem}
.hamburger{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);width:44px;height:44px;border-radius:11px;font-size:1.4rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);text-align:center}
.hero .pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:.82rem;color:var(--ink-2);margin-bottom:1.6rem;
}
.hero .pill .glow-dot{width:8px;height:8px;border-radius:50%;background:var(--honey);box-shadow:0 0 10px var(--honey)}
.hero h1{margin:0 auto;max-width:16ch}
.hero .lead{margin:1.4rem auto 0;text-align:center}
.hero .hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.hero .trust{margin-top:1.6rem;font-size:.85rem;color:var(--ink-3)}

/* ---------- Pillars ---------- */
.pillars{padding:clamp(2rem,5vw,4rem) 0}
.section-head{text-align:center;max-width:65ch;margin:0 auto clamp(2rem,4vw,3rem)}
.section-head .lead{margin:1rem auto 0}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.pillar{
  --c:var(--honey);
  position:relative;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem 1.5rem;
  overflow:hidden;transition:transform .25s ease,border-color .25s ease;
}
.pillar:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c);opacity:.9}
.pillar::after{content:"";position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;
  background:var(--c);filter:blur(50px);opacity:.22;transition:opacity .25s}
.pillar:hover::after{opacity:.4}
.pillar .hex{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:1rem;
  color:var(--c);font-size:1.5rem;
  background:color-mix(in srgb,var(--c) 14%,transparent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pillar h3{margin-bottom:.4rem}
.pillar p{font-size:.9rem;color:var(--ink-2);min-height:2.6em}
.pillar .links{margin-top:1rem;display:flex;flex-direction:column;gap:.15rem}
.pillar .links a{font-size:.86rem;color:var(--ink-3);padding:.28rem 0;display:flex;align-items:center;gap:.5rem;transition:color .15s}
.pillar .links a:hover{color:var(--c)}
.pillar .links a i{font-size:.9em;opacity:.7}
.pillar.money{--c:var(--money)} .pillar.energy{--c:var(--energy)}
.pillar.relationship{--c:var(--relationship)} .pillar.business{--c:var(--business)}

/* HB-HOME-003 (R2/R3): non-clickable coming-soon items + per-pillar Explore CTA */
.pillar .links .link-soon{font-size:.86rem;color:var(--ink-3);opacity:.6;padding:.28rem 0;
  display:flex;align-items:center;gap:.5rem;cursor:default}
.pillar .links .link-soon i{font-size:.9em;opacity:.7}
.pillar-explore{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  font-family:var(--f-head);font-weight:600;font-size:.88rem;color:var(--c);transition:gap .2s}
.pillar-explore:hover{gap:.7rem}
.pillar-explore.is-soon{color:var(--ink-3);opacity:.6;cursor:default;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:6px;padding:2px 8px}

/* ---------- Featured product rows ---------- */
.featured{padding:clamp(2.5rem,6vw,4.5rem) 0}
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  background:linear-gradient(160deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,4vw,3rem);
  margin-bottom:1.4rem;
}
.feature-row.flip .feature-media{order:2}
.feature-media{
  position:relative;border-radius:16px;overflow:hidden;min-height:260px;
  display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.06),transparent 60%),var(--panel-2);
}
.feature-media .badge{position:absolute;top:14px;left:14px;font-family:var(--f-head);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;border-radius:8px;
  background:rgba(0,0,0,.4);border:1px solid var(--line-2);color:var(--honey);z-index:2}
.feature-cover{width:210px;max-width:62%;border-radius:5px 10px 10px 5px;
  border:1px solid var(--line-2);box-shadow:-16px 22px 46px -14px rgba(0,0,0,.75);
  transform:rotate(-2deg);transition:transform .4s ease}
.feature-cover:hover{transform:rotate(0) translateY(-4px)}
.feature-body .eyebrow{margin-bottom:1rem}
.feature-body h2{margin-bottom:.9rem}
.feature-body p{color:var(--ink-2);margin-bottom:1.4rem}
.feature-body .row-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* Book mock */
.book-mock{width:190px;aspect-ratio:2/3;border-radius:6px 12px 12px 6px;
  background:linear-gradient(145deg,#1b2233,#0d1119);border:1px solid var(--line-2);
  box-shadow:-14px 18px 40px -12px rgba(0,0,0,.8);position:relative;padding:22px 18px;
  display:flex;flex-direction:column;justify-content:space-between}
.book-mock::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;background:rgba(255,255,255,.12)}
.book-mock .bm-top{font-family:var(--f-head);font-weight:700;font-size:1.05rem;line-height:1.2}
.book-mock .bm-accent{width:38px;height:4px;border-radius:4px;background:var(--money)}
.book-mock .bm-foot{font-size:.7rem;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}

/* App mock (TallyLens) */
.app-mock{width:100%;max-width:480px;border-radius:12px;border:1px solid var(--line-2);overflow:hidden;
  background:var(--bg);box-shadow:var(--shadow)}
.app-mock > img{width:100%;display:block}
.app-mock .bar{height:34px;background:var(--panel-2);display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line)}
.app-mock .bar span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.app-mock .screen{padding:16px;display:grid;gap:10px}
.app-mock .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.app-mock .kpi div{background:var(--panel);border:1px solid var(--line);border-radius:8px;height:44px}
.app-mock .kpi div:nth-child(1){border-top:2px solid var(--business)}
.app-mock .kpi div:nth-child(2){border-top:2px solid var(--money)}
.app-mock .kpi div:nth-child(3){border-top:2px solid var(--honey)}
.app-mock .chart{height:80px;background:linear-gradient(180deg,rgba(59,130,246,.18),transparent);
  border:1px solid var(--line);border-radius:8px;position:relative;overflow:hidden}
.app-mock .chart::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.5),transparent);
  clip-path:polygon(0 100%,10% 60%,25% 75%,40% 30%,55% 55%,70% 20%,85% 45%,100% 10%,100% 100%)}

/* ---------- Blog teaser ---------- */
.blog-teaser{padding:clamp(2.5rem,6vw,4rem) 0}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.post-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,border-color .2s}
.post-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.post-card .thumb{height:150px;background:linear-gradient(135deg,var(--panel-2),var(--bg));position:relative}
.post-card .thumb .tag{position:absolute;left:12px;top:12px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:6px;font-family:var(--f-head);font-weight:600}
.post-card .pc-body{padding:1.1rem 1.2rem 1.3rem}
.post-card h3{font-size:1.05rem;margin-bottom:.4rem}
.post-card p{font-size:.85rem;color:var(--ink-3)}
.post-card .read{margin-top:.8rem;font-size:.82rem;color:var(--honey);display:inline-flex;align-items:center;gap:.35rem}

/* HB-HOME-006: Knowledge Library category cards (non-clickable; replaced by real
   article cards in HB-BLOG-001 once articles are published) */
.knowledge-grid{grid-template-columns:repeat(4,1fr)}
.kn-card{padding-top:1.2rem;cursor:default}
.kn-card .tag{position:static;display:inline-block;margin-left:1.2rem;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.25rem .6rem;border-radius:6px;font-family:var(--f-head);font-weight:600}
.kn-card .pc-body{padding-top:.9rem}
.kn-soon{display:inline-block;margin-top:.9rem;font-family:var(--f-head);font-weight:600;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 8px;opacity:.7}
@media(max-width:1000px){.knowledge-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.knowledge-grid{grid-template-columns:1fr}}

/* HB-NAV-001: honest coming-soon states for nav + footer items whose pages
   don't exist yet (anchors without href are non-clickable by design) */
.menu a:not([href]),.submenu li a:not([href]),.foot-col a:not([href]){cursor:default}
.menu > li > a.nav-soon{opacity:.5}
.menu > li > a.nav-soon::after{content:"soon";font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--honey);border:1px solid var(--line-2);padding:1px 5px;border-radius:5px;margin-left:.4rem}
.menu > li.has-sub > a:not([href]){opacity:.8}
.foot-col a:not([href]){opacity:.45}
.foot-col a:not([href])::after{content:" · coming soon";font-size:.82em}
.foot-col a:not([href]):hover{color:var(--ink-3)}
.foot-social a:not([href]){opacity:.4;cursor:default}
.foot-social a:not([href]):hover{color:var(--ink-2);border-color:var(--line-2);transform:none}

/* =========================================================================
   HB-ABOUT-001 — styles scoped to about.html only (existing colors,
   typography and animation language; no locked component modified)
   ========================================================================= */
.ab-hero{text-align:center;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.ab-hero .eyebrow{justify-content:center}
.ab-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:18ch;margin:1rem auto 0}
.ab-hero .lead{margin:1.4rem auto 0}
.ab-hero .ab-purpose{font-family:var(--f-head);font-weight:600;color:var(--honey-soft);margin:1.2rem auto 0;max-width:52ch}
.ab-hero .cta{margin-top:2rem}

/* Knowledge Journey chain */
.kj-wrap{max-width:420px;margin:2.4rem auto 0}
.kj-chain{list-style:none;display:flex;flex-direction:column;align-items:center}
.kj-step{display:flex;flex-direction:column;align-items:center}
.kj-node{font-family:var(--f-head);font-weight:600;font-size:1.02rem;color:var(--ink);
  background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);
  border-radius:999px;padding:.55rem 1.7rem;min-width:230px;text-align:center}
.kj-step:first-child .kj-node,.kj-step:last-child .kj-node{border-color:var(--honey);color:var(--honey-soft);
  box-shadow:0 0 24px -8px rgba(224,168,46,.5)}
.kj-link{width:2px;height:1.9rem;background:linear-gradient(180deg,var(--honey),rgba(224,168,46,.15));margin:.35rem 0}
.kj-text{max-width:56ch;margin:2.4rem auto 0;text-align:center;color:var(--ink-2)}

/* Why Honey stanza */
.ab-stanza{margin:1.6rem auto;max-width:34ch;text-align:center}
.ab-stanza p{font-family:var(--f-head);font-weight:600;font-size:1.08rem;color:#12213f;padding:.3rem 0}

/* Mission / Vision / Promise cards */
.mvp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.mvp-card{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.5rem;overflow:hidden}
.mvp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--honey)}
.mvp-card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;
  color:var(--honey);background:rgba(224,168,46,.12);margin-bottom:1rem}
.mvp-card h3{margin-bottom:.7rem}
.mvp-card p{color:var(--ink-2);font-size:.95rem}
.mvp-card p+p{margin-top:.6rem}

/* Values */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
.val-item{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:1.4rem 1.3rem;
  transition:transform .2s,box-shadow .2s}
.val-item:hover{transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(15,31,73,.25)}
.val-item .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.25rem;
  color:var(--honey-deep);background:rgba(224,168,46,.14);margin-bottom:.8rem}
.val-item h3{font-family:"Playfair Display",Georgia,serif;font-size:1.1rem;color:#12213f;margin-bottom:.35rem}
.val-item p{font-size:.88rem;color:#5a6373}

/* Founder future-note */
.ab-founder-note{margin-top:1rem;font-style:italic;color:var(--ink-3)}

/* Looking Ahead ecosystem */
.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.2rem}
.eco-item{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:1.6rem 1rem;transition:transform .2s,border-color .2s}
.eco-item:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--honey) 45%,transparent)}
.eco-item i{font-size:1.8rem;color:var(--honey)}
.eco-item h3{font-size:1rem;margin-top:.7rem}
.ab-eco-purpose{text-align:center;margin-top:2rem;font-family:var(--f-head);font-weight:600;color:var(--honey-soft)}

@media(max-width:900px){
  .mvp-grid{grid-template-columns:1fr}
  .val-grid{grid-template-columns:1fr 1fr}
  .eco-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .val-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr}
  .kj-node{min-width:200px}
}

/* ---------- CTA band ---------- */
.cta-band{margin:clamp(3rem,7vw,5rem) 0}
.cta-inner{
  text-align:center;background:linear-gradient(135deg,rgba(224,168,46,.14),rgba(59,130,246,.10));
  border:1px solid var(--line-2);border-radius:26px;padding:clamp(2.5rem,6vw,4rem) 1.5rem;position:relative;overflow:hidden;
}
.cta-inner h2{max-width:20ch;margin:0 auto 1rem}
.cta-inner .lead{margin:0 auto 2rem}
.newsletter{display:flex;gap:.6rem;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter input{flex:1;min-width:220px;padding:.9rem 1.1rem;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(0,0,0,.3);color:var(--ink);font-family:var(--f-body);font-size:.95rem}
.newsletter input::placeholder{color:var(--ink-3)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(3rem,6vw,4rem) 0 2rem;margin-top:2rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:1.8rem}
.foot-brand p{color:var(--ink-3);font-size:.9rem;margin-top:1rem;max-width:32ch}
.foot-col h4{font-family:var(--f-head);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1rem}
.foot-col a{display:block;color:var(--ink-3);font-size:.88rem;padding:.28rem 0;transition:color .15s}
.foot-col a:hover{color:var(--honey)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--ink-3);font-size:.83rem}
.foot-social{display:flex;gap:.6rem}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);transition:.2s}
.foot-social a:hover{color:var(--honey);border-color:var(--honey);transform:translateY(-2px)}

/* =========================================================================
   Inner content pages (book / product / article)
   ========================================================================= */
.page-hero{padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-split .col-text .eyebrow{margin-bottom:1rem}
.hero-split .col-text h1{font-size:clamp(2.1rem,5vw,3.5rem)}
.hero-split .col-text .sub{font-family:var(--f-head);font-weight:500;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--honey-soft);margin-top:.8rem}
.hero-split .col-text .lead{margin-top:1.2rem}
.hero-split .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero-split .after{margin-top:1.3rem;font-size:.86rem;color:var(--ink-3);display:flex;align-items:center;gap:.5rem}

/* 3D book cover */
.book-stage{display:grid;place-items:center;perspective:1600px}
.book3d{position:relative;width:min(300px,70vw);aspect-ratio:2/3;
  transform:rotateY(-22deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .55s ease;
  border-radius:4px 9px 9px 4px;box-shadow:-32px 42px 64px -22px rgba(0,0,0,.75);
  display:flex;flex-direction:column;justify-content:space-between;padding:30px 26px;
  background:linear-gradient(160deg,#12244f,#0a1430);border:1px solid var(--line-2)}
.book3d:hover{transform:rotateY(-9deg) rotateX(2deg)}
.book3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px 9px 9px 4px}
.book3d::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15px;border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.05));z-index:3}
.book3d::after{content:"";position:absolute;inset:0;border-radius:4px 9px 9px 4px;z-index:4;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.16),transparent 42%)}
.book3d .b-accent{width:44px;height:5px;border-radius:5px;background:var(--money);position:relative;z-index:2}
.book3d .b-title{font-family:var(--f-head);font-weight:800;font-size:1.5rem;line-height:1.1;margin-top:14px;position:relative;z-index:2}
.book3d .b-author{font-size:.82rem;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:2}

/* Generic content sections */
.band{padding:clamp(2.4rem,5vw,4rem) 0}
.band.soft{background:var(--bg-2);border-block:1px solid var(--line)}
.checklist{list-style:none;display:grid;gap:.9rem;max-width:640px;margin:1.5rem auto 0}
.checklist li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.02rem;color:var(--ink-2)}
/* --pillar-c lets a page set its own accent (Energy, Relationships, …); defaults to Money
   unchanged, so money-book.html looks exactly as it always has. */
.checklist li i{color:var(--pillar-c,var(--money));font-size:1.3rem;flex:none;margin-top:2px}
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
.learn-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.3rem;transition:transform .2s,border-color .2s}
.learn-item:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--pillar-c,var(--money)) 45%,transparent)}
.learn-item .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;
  color:var(--pillar-c,var(--money));background:color-mix(in srgb,var(--pillar-c,var(--money)) 15%,transparent);margin-bottom:.9rem}
.learn-item h3{font-size:1.08rem;margin-bottom:.4rem}
.learn-item p{font-size:.9rem;color:var(--ink-3)}

/* Author */
.author-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:flex-start;
  background:linear-gradient(160deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:22px;padding:clamp(1.6rem,4vw,2.6rem)}
.author-photo{width:210px;height:266px;border-radius:16px;flex:none;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 18px 42px -18px rgba(0,0,0,.75);background:#000}
.author-photo img{width:100%;height:100%;object-fit:cover;display:block}
.author-card h3{margin:.6rem 0 1.1rem}
.author-bio p{color:var(--ink-2);font-size:.97rem;margin-bottom:.85rem}
.author-bio p:last-child{margin-bottom:0}
.author-bio .pull{font-family:var(--f-head);font-weight:600;color:var(--honey-soft);font-size:1.08rem;margin:.4rem 0 1rem}

/* Testimonials */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem}
.quote .stars{color:var(--honey);font-size:.9rem;letter-spacing:2px;margin-bottom:.7rem}
.quote p{font-size:.95rem;color:var(--ink);font-style:italic;margin-bottom:1rem}
.quote .who{font-family:var(--f-head);font-weight:600;font-size:.88rem;color:var(--ink-2)}
.quote .who small{display:block;color:var(--ink-3);font-weight:400;font-style:normal}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;text-align:center}
  .hero-split .book-stage{order:-1}
  .hero-split .eyebrow,.hero-split .cta,.hero-split .after{justify-content:center}
  .learn-grid,.quote-grid{grid-template-columns:1fr}
  .author-card{grid-template-columns:1fr;text-align:center}
  .author-photo{margin:0 auto}
}

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

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .hamburger{display:block}
  .menu{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:.5rem;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .menu.show{max-height:80vh;overflow-y:auto;padding:.5rem .5rem 1.2rem}
  .menu > li > a{padding:.9rem 1rem;justify-content:space-between}
  /* !important here: at this width the desktop hover rule above (.menu > li.open .submenu{transform:translate(-50%,0)})
     was still winning the cascade and pushing this off the left edge of the screen when tapped open on a phone. */
  .submenu,.menu > li.open .submenu{position:static!important;transform:none!important;opacity:1;visibility:visible;box-shadow:none;border:none;
    background:transparent;padding:0 0 .5rem 1rem;min-width:0;max-height:0;overflow:hidden;transition:max-height .3s}
  .menu > li.open .submenu{max-height:400px}
  .nav-cta .btn-ghost{display:none}
  .feature-row,.feature-row.flip .feature-media{grid-template-columns:1fr;order:0}
  .feature-media{order:-1!important}
  .post-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pillar-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* =========================================================================
   HOME v2 — cinematic hero + "Why HoneyBusiness" (matches approved mockup)
   Serif display = Playfair Display (loaded in <head>); UI stays Sora/Inter.
   ========================================================================= */
.display{font-family:"Playfair Display",Georgia,serif;font-weight:700;letter-spacing:-.01em;line-height:1.08}

/* Header brand tagline */
.brand-text{display:flex;flex-direction:column;line-height:1.06}
.brand-text small{font-family:var(--f-body);font-weight:400;font-size:.64rem;letter-spacing:.01em;color:var(--ink-3);margin-top:2px}
@media(max-width:1150px){.brand-text small{display:none}}

/* ---------- Cinematic hero ---------- */
.home-hero{position:relative;display:flex;align-items:center;min-height:min(90vh,780px);
  background:linear-gradient(180deg,#070d20 0%,#0a1330 55%,var(--bg) 100%)}
.home-hero .container{position:relative;z-index:3;width:100%}

.hero-visual{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:0;overflow:hidden}
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%);
  mask-image:linear-gradient(90deg,transparent 0,#000 36%);
  animation:heroKen 26s ease-in-out infinite alternate}
.hero-visual::before{content:"";position:absolute;left:30%;top:41%;width:32%;height:44%;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;filter:blur(26px);z-index:1;
  background:radial-gradient(circle,rgba(255,209,102,.5),rgba(224,168,46,0) 68%);
  animation:glowPulse 4.6s ease-in-out infinite}
.hero-visual::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;pointer-events:none;
  mix-blend-mode:screen;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,210,120,.16),transparent);
  animation:shimmer 7.5s ease-in-out infinite}
@keyframes heroKen{0%{transform:scale(1.02) translateY(0)}100%{transform:scale(1.1) translateY(-1.5%)}}
@keyframes glowPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes shimmer{0%,100%{transform:translateX(-22%);opacity:.35}50%{transform:translateX(22%);opacity:.8}}

/* floating gold particles */
.hero-particles{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,232,170,.95),rgba(224,168,46,0) 70%);
  animation:floatUp var(--d,10s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes floatUp{0%{transform:translateY(24px) scale(.5);opacity:0}
  15%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-130px) scale(1.15);opacity:0}}

/* hero content */
.hero-content{max-width:600px}
.hero-content h1{margin:1rem 0 0}
.hero-content h1 .goldline{display:block;color:var(--honey)}
.hero-content .lead{margin-top:1.4rem;color:var(--ink-2)}
.hero-content .hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.1rem}
/* HB-HOME-001 (R2): balanced 2×2 badge grid (was flex-wrap → uneven 3+1 wrap) */
.trust-badges{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:1.1rem 2.2rem;margin-top:2.2rem}
.trust-badges .tb{display:flex;align-items:center;gap:.65rem}
.trust-badges .tb i{color:var(--honey);font-size:1.1rem;width:36px;height:36px;flex:none;
  border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.03)}
.trust-badges .tb b{display:block;font-family:var(--f-head);font-weight:600;font-size:.8rem;color:var(--ink)}
.trust-badges .tb small{color:var(--ink-3);font-size:.74rem}

/* staggered entrance */
.anim{opacity:0;transform:translateY(22px);animation:heroUp .85s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes heroUp{to{opacity:1;transform:none}}

/* scroll-down button straddling hero + next section */
.scroll-down{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);z-index:6;
  width:52px;height:52px;border-radius:50%;background:var(--bg-2);border:1px solid var(--honey);color:var(--honey);
  display:grid;place-items:center;font-size:1.3rem;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:bob 2.2s ease-in-out infinite}
.scroll-down:hover{background:var(--honey);color:#241a03}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- "Why HoneyBusiness" light section ---------- */
.why{background:#F5F1E7;color:#16223d;padding:clamp(3.2rem,6vw,5rem) 0}
.why .eyebrow{color:var(--honey-deep)}
.why-grid{display:grid;grid-template-columns:.95fr 1.25fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.why-left h2{font-family:"Playfair Display",Georgia,serif;color:#111d38;margin:.8rem 0 0}
.why-left p{margin-top:1.2rem;color:#4a5468;font-size:1rem;max-width:44ch}
.why-values{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.value{padding:0 1.2rem}
.value + .value{border-left:1px solid rgba(0,0,0,.1)}
.value .vic{color:var(--honey-deep);font-size:1.7rem;margin-bottom:.7rem}
.value h3{font-family:"Playfair Display",Georgia,serif;font-size:1.12rem;color:#12213f;margin-bottom:.5rem}
.value p{font-size:.83rem;color:#5a6373;line-height:1.55}

@media(prefers-reduced-motion:reduce){
  .hero-visual img,.hero-visual::before,.hero-visual::after,.particle,.scroll-down,.anim{animation:none!important}
  .anim{opacity:1!important;transform:none!important}
}
@media(max-width:900px){
  .home-hero{display:block;min-height:auto;padding:1rem 0 3.2rem}
  .hero-visual{position:relative;width:100%;height:300px;margin-top:1.6rem;border-radius:16px}
  .hero-visual img{-webkit-mask-image:linear-gradient(0deg,transparent,#000 32%);mask-image:linear-gradient(0deg,transparent,#000 32%)}
  .hero-content{max-width:none}
  .why-grid{grid-template-columns:1fr;gap:2rem}
  .why-values{grid-template-columns:1fr 1fr;gap:1.4rem 0}
  .value{padding:0 1rem}
  .value:nth-child(3){border-left:none}
}
@media(max-width:520px){
  .why-values{grid-template-columns:1fr}
  .value{border-left:none!important;border-top:1px solid rgba(0,0,0,.1);padding:1.1rem 0}
  .value:first-child{border-top:none;padding-top:0}
  .trust-badges{gap:1.1rem}
}