/* =============================================================
   Mandari — shared styles
   Brand: terracotta #C65D32 (sampled from the logo mark)
   Fonts: Space Grotesk (display) · Hanken Grotesk (body)
   ============================================================= */

:root{
  --md-accent:#C65D32;        --md-accent-rgb:198,93,50;
  --md-accent2:#E07E50;       --md-accent2-rgb:224,126,80;
  --md-accent-deep:#A2461F;
  --md-accent-tint:#F8E8DE;
  --md-accent-soft:#EBAA89;
  --md-ink:#16130F;
  --md-bg:#FBF9F5;
  --md-ease:cubic-bezier(.2,.7,.2,1);  /* signature motion curve, used site-wide */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--md-bg);
  color:var(--md-ink);
  font-family:'Hanken Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background-color:var(--md-accent); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---- Keyframes ---- */
@keyframes mdFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes mdFloatSlow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(18px); } }
@keyframes mdDash{ to{ stroke-dashoffset:-28; } }
@keyframes mdPulseNode{
  0%,100%{ box-shadow:0 1px 2px rgba(22,19,15,.06), 0 0 0 0 rgba(var(--md-accent-rgb),0); }
  50%{ box-shadow:0 1px 2px rgba(22,19,15,.06), 0 0 0 8px rgba(var(--md-accent-rgb),.10); }
}
@keyframes mdRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes mdPop{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
@keyframes mdMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mdBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes mdFaqOpen{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---- Hero entrance (staggered) ---- */
.md-rise-1{ animation:mdRise .8s var(--md-ease) both .05s; }
.md-rise-2{ animation:mdRise .8s var(--md-ease) both .15s; }
.md-rise-3{ animation:mdRise .8s var(--md-ease) both .25s; }
.md-rise-4{ animation:mdRise .8s var(--md-ease) both .35s; }
.md-rise-5{ animation:mdRise .9s var(--md-ease) both .5s; }

/* ---- Scroll reveal (JS adds .is-visible) ----
   Gated on .js so that without JavaScript everything is fully visible
   (progressive enhancement). Hidden ONLY while not-yet-revealed; once revealed we play a
   one-shot rise (no fill) so the element keeps NO persistent transform — that lets card
   :hover transforms work normally (matching the original design's hover lift). */
.js [data-reveal]:not(.is-visible){ opacity:0; }
.js [data-reveal].is-visible{ animation:mdRise .7s var(--md-ease); }

/* ---- Logo / nav ---- */
.md-logo{ transition:color .2s; }
.md-logo:hover{ color:var(--md-accent) !important; }
.md-logo img{ height:32px; width:auto; }
.md-logo--sm img{ height:28px; }

.md-nav-link{
  background-image:linear-gradient(var(--md-accent),var(--md-accent));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:2px;
  transition:background-size .3s var(--md-ease), color .2s;
}
.md-nav-link:hover{ color:var(--md-ink) !important; background-size:100% 2px; }

/* ---- Buttons ---- */
.md-cta:hover{ background-color:var(--md-accent-deep) !important; transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(var(--md-accent-rgb),.6) !important; }
.md-ghost:hover{ border-color:var(--md-ink) !important; transform:translateY(-2px); }
.md-btnlight{ transition:transform .25s var(--md-ease), box-shadow .25s; }
.md-btnlight:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.3); }
.md-btnlight:hover .md-arrow{ transform:translateX(5px); }
.md-arrow{ display:inline-block; transition:transform .3s var(--md-ease); }
.md-cta:hover .md-arrow, .md-textlink:hover .md-arrow{ transform:translateX(5px); }
.md-textlink{ transition:color .2s; }
.md-textlink:hover{ color:var(--md-accent-deep) !important; }
.md-newauto{ transition:background-color .2s, color .2s, transform .2s; }
.md-newauto:hover{ background-color:var(--md-accent) !important; color:#fff !important; transform:translateY(-1px); }

/* ---- Lift cards ---- */
.md-lift{ transition:transform .34s var(--md-ease), box-shadow .34s var(--md-ease); }
.md-lift:hover{ transform:translateY(-7px); box-shadow:0 32px 66px -34px rgba(22,19,15,.45) !important; }
.md-lift .md-ic, .md-lift .md-tile{ transition:transform .38s var(--md-ease), background-color .3s ease; }
.md-lift:hover .md-ic{ transform:translateY(-3px); }
.md-lift:hover .md-tile{ transform:translateY(-3px); background-color:rgba(var(--md-accent-rgb),.2); }

/* ---- Chips ---- */
.md-chip{ transition:transform .26s var(--md-ease), border-color .26s, box-shadow .26s; }
.md-chip:hover{ transform:translateY(-4px); border-color:rgba(var(--md-accent-rgb),.45) !important; box-shadow:0 16px 32px -18px rgba(var(--md-accent-rgb),.45); }

/* ---- Bento ---- */
.md-bento > div{ transition:transform .4s var(--md-ease), box-shadow .4s var(--md-ease); }
.md-bento > div:hover{ transform:translateY(-7px); box-shadow:0 34px 66px -36px rgba(22,19,15,.45); }
.md-bento > div > div:first-child{ transition:transform .45s var(--md-ease); }
.md-bento > div:hover > div:first-child{ transform:translateY(-4px) scale(1.07); }

/* ---- Hero node-graph ---- */
.md-node{ transition:transform .28s var(--md-ease), box-shadow .28s, border-color .28s; cursor:default; }
.md-node:hover{ transform:translate(-50%,-50%) scale(1.06) !important; box-shadow:0 18px 40px -14px rgba(var(--md-accent-rgb),.5) !important; border-color:rgba(var(--md-accent-rgb),.45) !important; z-index:6 !important; }
.md-flowpath{ animation:mdDash 1.1s linear infinite; }

/* ---- FAQ ---- */
.md-faq{ transition:border-color .25s, box-shadow .25s; }
.md-faq:hover{ border-color:rgba(var(--md-accent-rgb),.4) !important; box-shadow:0 14px 30px -20px rgba(22,19,15,.32); }
.md-faqsign{ transition:transform .26s var(--md-ease); }
.md-faq:hover .md-faqsign{ transform:scale(1.12); }
.md-faq-body{ display:none; padding:0 24px 22px; font-size:15.5px; line-height:1.62; color:#57514A; }
.md-faq.is-open .md-faq-body{ display:block; animation:mdFaqOpen .32s var(--md-ease); }

/* ---- Contact form field focus ---- */
.md-field{ transition:border-color .2s, box-shadow .2s; }
.md-field:focus{ outline:none; border-color:var(--md-accent) !important; box-shadow:0 0 0 4px rgba(var(--md-accent-rgb),.12) !important; }

/* ---- Dashboard mock bars: grow up (staggered) when the section reveals ----
   'backwards' fill holds the collapsed state during each bar's delay (no flash) and
   leaves NO persistent transform afterwards, so the per-bar :hover still works.
   Gated on .js so bars are full-height without JavaScript. */
@keyframes mdGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.md-bar{ transform-origin:bottom; transition:filter .25s, transform .25s var(--md-ease); }
.js [data-reveal]:not(.is-visible) .md-bar{ transform:scaleY(0); }
.js [data-reveal].is-visible .md-bar{ animation:mdGrow .7s var(--md-ease) backwards; }
.md-bar:nth-child(1){ animation-delay:.03s }
.md-bar:nth-child(2){ animation-delay:.09s }
.md-bar:nth-child(3){ animation-delay:.15s }
.md-bar:nth-child(4){ animation-delay:.21s }
.md-bar:nth-child(5){ animation-delay:.27s }
.md-bar:nth-child(6){ animation-delay:.33s }
.md-bar:nth-child(7){ animation-delay:.39s }
.md-bar:hover{ filter:brightness(1.07); transform:scaleY(1.04); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .md-bar{ transform:scaleY(1) !important; }
  html{ scroll-behavior:auto; }
}

/* ---- Responsive ---- */
@media (max-width:760px){
  .md-navlinks{ display:none !important; }
  nav, section, header, footer, main{ padding-left:20px !important; padding-right:20px !important; }
  section{ padding-top:64px !important; padding-bottom:64px !important; }
  .md-bento{ grid-template-columns:1fr !important; }
  .md-bento > div{ grid-column:auto !important; min-height:0 !important; }
}
@media (max-width:600px){
  .md-hero-float{ display:none !important; }
  .md-node{ min-width:88px !important; padding:8px 9px !important; gap:7px !important; }
  .md-nic{ width:24px !important; height:24px !important; font-size:12px !important; }
  .md-nlabel{ font-size:11px !important; }
  .md-nsub{ font-size:9px !important; }
}