/* =====================================================================
   Bizmate design system: base layer (loaded on every page)
   Brand colors are fixed. Only the 9 brand tokens below may be used as
   colors; tints are rgba() of the same values. See CLAUDE.md.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand colors: DO NOT CHANGE */
  --ink:#06110D; --ink-2:#0B1D17; --house:#1E3932; --green:#006241; --accent:#00754A;
  --mint:#D4E9E2; --gold:#CBA258; --gold-2:#E2C487; --white:#F3F7F5;

  /* Text tiers (mint tints). --text-muted is the faintest allowed for text: 4.5:1+ on ink */
  --text-strong:var(--white);
  --text:rgba(212,233,226,.76);
  --text-muted:rgba(212,233,226,.62);

  /* Lines and surfaces (tints of brand colors) */
  --line:rgba(212,233,226,.12);
  --line-strong:rgba(212,233,226,.24);
  --line-gold:rgba(203,162,88,.42);
  --surface:rgba(11,29,23,.74);              /* ink-2 tint: cards */
  --surface-solid:#0B1D17;
  --surface-hi:linear-gradient(160deg,rgba(30,57,50,.78),rgba(8,22,17,.92));     /* house: raised cards */
  --surface-feature:linear-gradient(150deg,rgba(0,98,65,.5),rgba(8,22,17,.92) 70%); /* green: featured/proof */
  --wash-green:rgba(0,117,74,.3);
  --wash-gold:rgba(203,162,88,.15);
  --danger:#E0796B; --danger-text:#F0A196;  /* form errors (unchanged from original) */

  /* Type */
  --display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Scale: ratio 1.25, fluid between 375px and 1440px */
  --fs-xs:.875rem;                                   /* 14  labels, meta */
  --fs-sm:.9375rem;                                  /* 15  small body */
  --fs-base:1.0625rem;                               /* 17  body */
  --fs-lg:clamp(1.125rem,1.06rem + .28vw,1.3125rem); /* 18-21 lede */
  --fs-xl:clamp(1.25rem,1.14rem + .45vw,1.625rem);   /* 20-26 h4, card titles */
  --fs-2xl:clamp(1.5rem,1.33rem + .7vw,2.0625rem);   /* 24-33 h3 */
  --fs-3xl:clamp(1.75rem,1.48rem + 1.15vw,2.5625rem);/* 28-41 article h2 */
  --fs-4xl:clamp(2.125rem,1.7rem + 1.8vw,3.25rem);   /* 34-52 */
  --fs-5xl:clamp(2.375rem,1.75rem + 2.65vw,4.0625rem);/* 38-65 section h2 */
  --fs-6xl:clamp(2.625rem,1.7rem + 3.95vw,5.0625rem);/* 42-81 page h1 */
  --fs-display:clamp(3rem,1.55rem + 6.2vw,7.125rem); /* 48-114 home hero */
  --lh-tight:.95; --lh-heading:1.05; --lh-snug:1.3; --lh-body:1.6;
  --track-display:-.045em; --track-heading:-.035em; --track-title:-.02em;

  /* Spacing: 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --pad:clamp(20px,5vw,56px);                 /* page gutter */
  --section-y:clamp(72px,10vw,128px);         /* section top/bottom */
  --container:1200px;
  --measure:68ch;

  /* Shape and depth */
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.7);
  --shadow-md:0 24px 50px -24px rgba(0,0,0,.6);

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.25s; --dur:.45s; --dur-slow:.7s;

  color-scheme:dark;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 88px);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:var(--fs-base);line-height:var(--lh-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul[class],ol[class]{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--s-4);top:var(--s-4);z-index:200;padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);background:var(--gold);color:var(--ink);font-weight:600;transform:translateY(-200%);transition:transform var(--dur-fast)}
.skip:focus{transform:none}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--text-strong);font-variation-settings:"opsz" 96;text-wrap:balance}
h1{font-size:var(--fs-6xl);line-height:var(--lh-tight);font-weight:700;letter-spacing:var(--track-display)}
h2{font-size:var(--fs-5xl);line-height:var(--lh-heading);font-weight:700;letter-spacing:var(--track-heading);max-width:16ch}
h3{font-size:var(--fs-2xl);line-height:1.15;font-weight:600;letter-spacing:var(--track-title)}
h4{font-size:var(--fs-xl);line-height:1.2;font-weight:600;letter-spacing:var(--track-title)}
p{text-wrap:pretty}
.lede{font-size:var(--fs-lg);max-width:52ch;color:var(--text)}
.muted{color:var(--text-muted)}
.inline-link{color:var(--gold);border-bottom:1px solid currentColor;transition:color var(--dur-fast)}
.inline-link:hover{color:var(--gold-2)}
strong{color:var(--text-strong);font-weight:600}

/* ---------- 4. Layout ---------- */
main,footer{position:relative;z-index:3}
.wrap{max-width:var(--container);margin:0 auto}
.section{position:relative;padding:var(--section-y) var(--pad)}
.section > .wrap > h2 + .lede,.section h2 + .lede{margin-top:var(--s-5)}
.stack > * + *{margin-top:var(--s-4)}

/* Atmosphere: static brand washes, no motion */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(55% 45% at 88% 0%,rgba(0,117,74,.32),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(203,162,88,.10),transparent 70%)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:linear-gradient(90deg,var(--accent),var(--gold));transform-origin:left;transform:scaleX(0)}

/* ---------- 5. Header / nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:calc(env(safe-area-inset-top,0px) + var(--s-4)) var(--pad) var(--s-4);border-bottom:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur),padding var(--dur) var(--ease)}
.nav.scrolled{background:rgba(6,17,13,.82);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-color:var(--line);padding-top:calc(env(safe-area-inset-top,0px) + var(--s-3));padding-bottom:var(--s-3)}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--text-strong);letter-spacing:-.04em;position:relative;z-index:2}
.logo svg{transition:transform .8s var(--ease)}
.logo:hover svg{transform:rotate(180deg)}
.nav-links{display:flex;align-items:center;gap:var(--s-1);font-size:var(--fs-sm)}
.nav-links > a,.dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-pill);color:var(--mint);transition:color var(--dur-fast),background var(--dur-fast)}
.nav-links > a:hover,.dd-btn:hover{color:var(--gold-2);background:rgba(212,233,226,.05)}
.nav-links > a[aria-current="page"],.dd-btn.on{color:var(--gold)}
.dd{position:relative}
.dd-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) var(--ease)}
.dd.open .dd-btn{color:var(--gold)}
.dd.open .dd-btn::after{transform:rotate(225deg) translateY(-2px)}
.dd-menu{position:absolute;top:100%;left:-8px;padding-top:var(--s-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s var(--dur-fast)}
@media (hover:hover){.dd:hover .dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s 0s}}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s 0s}
.dd-box{min-width:290px;padding:var(--s-2);border-radius:var(--r-md);background:rgba(11,29,23,.98);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.dd-box a{display:block;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);color:var(--mint);line-height:1.35;transition:background var(--dur-fast),color var(--dur-fast)}
.dd-box a small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-muted)}
.dd-box a:hover,.dd-box a[aria-current]{background:rgba(0,117,74,.3);color:var(--text-strong)}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);position:relative;z-index:2}
.burger span{position:absolute;left:15px;right:15px;height:1.5px;background:var(--white);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:nth-child(1){top:19px}.burger span:nth-child(2){top:27px}
.menu-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:23px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:104px var(--pad) calc(env(safe-area-inset-bottom,0px) + var(--s-7));overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility 0s var(--dur)}
.menu-open .mobile-menu{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease),visibility 0s 0s}
.mobile-menu a{font-family:var(--display);font-size:clamp(1.6rem,7vw,2.5rem);font-weight:700;color:var(--text-strong);letter-spacing:-.035em;line-height:1.2;padding:2px 0}
.mobile-menu a:hover{color:var(--gold-2)}
.mobile-menu a.btn{font-family:var(--body);font-size:1rem;margin-top:var(--s-6);align-self:flex-start;letter-spacing:0;padding:var(--s-4) var(--s-6)}
@media (max-width:1060px){.nav-links{display:none}.burger{display:block}}
@media (max-width:640px){.nav > .btn{display:none}}

/* ---------- 6. Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 var(--s-6);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);line-height:1.2;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur),transform var(--dur-fast) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold::before{background:var(--gold-2)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text-strong)}
.btn-ghost::before{background:rgba(212,233,226,.08)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{min-height:44px;padding:0 var(--s-5);font-size:var(--fs-xs)}
.btn[disabled]{opacity:.7;cursor:progress}
.btn-row,.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:420px){.hero-ctas .btn{flex:1 1 100%}}

/* ---------- 7. Small parts ---------- */
.crumbs{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--s-5)}
.crumbs a{transition:color var(--dur-fast)}
.crumbs a:hover{color:var(--gold)}
.tag,.case-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line-gold);color:var(--gold-2);font-size:var(--fs-xs);font-weight:500}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(212,233,226,.06);border:1px solid var(--line);font-size:var(--fs-xs);color:var(--mint)}
.chip b{color:var(--gold);font-weight:600}
.live,.feed-status{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:500}
.dot,.pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(203,162,88,.55)}70%{box-shadow:0 0 0 9px rgba(203,162,88,0)}100%{box-shadow:0 0 0 0 rgba(203,162,88,0)}}
.check-list{display:grid;gap:var(--s-3)}
.check-list li,.hub li,.plan li{position:relative;padding-left:28px;font-size:var(--fs-sm);color:var(--mint);line-height:1.45}
.check-list li::before,.hub li::before,.plan li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 8. Cards ---------- */
/* One card look for every boxed item on the site */
.card,.hub,.crm,.tool,.group,.ex,.stat,.exa,.plan,.cap{position:relative;isolation:isolate;overflow:hidden;padding:var(--s-6) var(--s-5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:border-color var(--dur),transform var(--dur) var(--ease),background var(--dur)}
.card.is-link:hover,a.card:hover,.hub:hover,.crm:hover,.tool:hover,.group:hover,.ex:hover,.cap:hover{border-color:var(--line-gold);transform:translateY(-4px)}
/* pointer-following green wash (site.js sets --mx/--my) */
.hub::before,.crm::before,.tool::before,.group::before,.cap::before,a.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--wash-green),transparent 65%);opacity:0;transition:opacity var(--dur)}
.hub:hover::before,.crm:hover::before,.tool:hover::before,.group:hover::before,.cap:hover::before,a.card:hover::before{opacity:1}
.panel{padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-lg)}
.feature-card{position:relative;overflow:hidden;padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--surface-feature);border:1px solid var(--line-gold)}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--s-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- 9. Steps (Audit / Build / Hand off) ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-8);position:relative}
.steps::before{content:"";position:absolute;top:24px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--gold),var(--accent) 60%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.steps.in::before{transform:none}
.step-n{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);border:1px solid var(--gold);color:var(--gold);font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:var(--s-5);transition:background var(--dur),color var(--dur)}
.steps li:hover .step-n{background:var(--gold);color:var(--ink)}
.steps h3{font-size:var(--fs-2xl);margin-bottom:var(--s-2)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:var(--s-6);margin-top:var(--s-7)}
  .steps::before{top:0;bottom:0;left:24px;right:auto;width:1px;height:auto;transform:scaleY(0);transform-origin:top;background:linear-gradient(180deg,var(--gold),var(--accent) 60%,transparent)}
  .steps.in::before{transform:none}
  .steps li{position:relative;padding-left:76px}
  .step-n{position:absolute;left:0;top:-6px;margin:0}
}

/* ---------- 10. FAQ ---------- */
.faq{margin-top:var(--s-7);max-width:880px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-1);font-family:var(--display);font-size:var(--fs-xl);font-weight:600;color:var(--text-strong);letter-spacing:var(--track-title);line-height:1.25;transition:color var(--dur-fast)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--gold-2)}
summary i{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);position:relative;transition:transform var(--dur) var(--ease),border-color var(--dur-fast)}
summary i::before,summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--gold);transform:translate(-50%,-50%)}
summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--dur) var(--ease)}
details[open] summary i{transform:rotate(180deg);border-color:var(--gold)}
details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
details p{padding:0 var(--s-1) var(--s-5);max-width:var(--measure);animation:open var(--dur) var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}

/* ---------- 11. CTA band ---------- */
.cta{position:relative;overflow:hidden;max-width:var(--container);margin:0 auto;padding:clamp(56px,8vw,104px) var(--pad);border-radius:calc(var(--r-lg) + 8px);text-align:center;background:radial-gradient(80% 120% at 50% 0%,rgba(0,117,74,.5),rgba(11,29,23,.92) 70%);border:1px solid var(--line-gold)}
.cta h2{margin:0 auto;max-width:18ch}
.cta p{margin:var(--s-5) auto var(--s-6);max-width:46ch;font-size:var(--fs-lg)}

/* ---------- 12. Footer ---------- */
.footer{padding:var(--s-9) var(--pad) calc(env(safe-area-inset-bottom,0px) + var(--s-6));border-top:1px solid var(--line);background:linear-gradient(to bottom,rgba(6,17,13,.4),var(--ink) 35%);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.1fr 1.4fr;gap:var(--s-8)}
.foot-big{font-family:var(--display);font-size:var(--fs-3xl);font-weight:600;line-height:1.1;letter-spacing:var(--track-heading);color:var(--text-strong);max-width:17ch;margin:var(--s-5) 0 var(--s-6)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.foot-h{color:var(--text-strong);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s-3)}
.foot-cols a,.foot-cols span{display:block;padding:6px 0;font-size:var(--fs-sm);color:var(--text-muted);transition:color var(--dur-fast)}
.foot-cols a:hover{color:var(--gold)}
.mega{display:flex;justify-content:space-between;margin-top:var(--s-9);padding-bottom:.06em;font-family:var(--display);font-weight:800;font-size:clamp(4.6rem,23vw,20rem);line-height:.8;letter-spacing:-.06em;user-select:none;background:linear-gradient(100deg,var(--mint) 0%,var(--gold) 35%,var(--accent) 70%,var(--mint) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3) var(--s-5);flex-wrap:wrap;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-muted)}
.foot-bottom p{max-width:80ch}
.to-top{min-height:44px;color:var(--mint);font-size:var(--fs-xs);transition:color var(--dur-fast)}
.to-top:hover{color:var(--gold)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr;gap:var(--s-7)}}
@media (max-width:560px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols > div:last-child{grid-column:1/-1}}

/* ---------- 13. Reveal motion ---------- */
[data-reveal],[data-split]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].in,[data-split].in{opacity:1;transform:none}
[data-hero]{animation:heroIn .7s var(--ease) backwards;animation-delay:var(--d,0ms)}
/* transform only: hero text is visible on first paint (no opacity fade, good for LCP) */
@keyframes heroIn{from{transform:translateY(16px)}to{transform:none}}

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