/* ============================================================
   THEME — Mill Digital (light: warm grey ground, orange accent,
   navy headings; Poppins + Space Grotesk). Palette, type and
   component styles taken from reference/milldigital-website.html.
   ============================================================ */
:root{
  /* --- ground (public site) --- */
  --bg:#f6f7fa;
  --bg-2:#eceef4;
  --panel:#ffffff;
  --panel-2:#eaf1fb;
  --bar-bg:rgba(246,247,250,.88);
  --field-bg:#ffffff;
  --fade:rgba(246,247,250,.94);

  /* --- accent (brand color) --- */
  --accent:#f07d1c;
  --accent-2:#f59a4d;
  --accent-dim:rgba(240,125,28,.38);
  --accent-faint:rgba(240,125,28,.10);
  --accent-contrast:#ffffff;
  --grad-accent:linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 55%,var(--accent) 90%);
  --glow-strong:rgba(240,125,28,.10);
  --glow-soft:rgba(34,119,216,.08);

  /* --- navy (secondary brand color, from the reference) --- */
  --navy:#152559;

  /* --- text --- */
  --heading:#152559;
  --text:#2e3446;
  --text2:#5a6072;
  --text-soft:#454b5e;

  /* --- lines & placeholders --- */
  --line:#e7eaf1;
  --line-strong:#dfe3ec;
  --ph-1:#dfe6f2; --ph-2:#eceef4; --ph-3:#f6f7fa;
  --ph-cool-1:#dbe7f7; --ph-cool-2:#e8eff9; --ph-cool-3:#f2f6fc;
  --ph-warm-1:#fbe3cd; --ph-warm-2:#fdf0e2; --ph-warm-3:#fef8f1;

  /* --- semantic --- */
  --wa:#25D366;
  --err:#E5484D;
  --okc:#1f8a45;
  --ok:#1f8a45;
  --ok-text:#1f7a3e;
  --err-text:#c22f35;

  /* --- type & layout (reference: Poppins everywhere, Space Grotesk for numerals) --- */
  --font-display:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-body:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-mono:"Space Grotesk","Segoe UI",monospace;
  --maxw:1180px;
}

/* --- admin area overrides (body has class="admin") --- */
body.admin{
  --bg:#eef0f5;
  --panel:#ffffff;
  --panel-2:#f4f6fa;
  --bar-bg:rgba(255,255,255,.92);
  --field-bg:#ffffff;
  --accent-dim:rgba(240,125,28,.45);
}

/* ============================================================
   Component overrides to match the reference design.
   Selectors are prefixed with body so they win over site.css
   (which loads after this file with equal specificity).
   ============================================================ */

/* type: bold sans headings (reference uses Poppins 700/800) */
body h1, body h2, body h3{font-weight:700}
body .hero h1{font-weight:800}
body .accent-i{font-style:normal;font-weight:800}
body .stat b, body .step::before{font-family:var(--font-mono);font-weight:700;-webkit-text-stroke:0;color:var(--accent)}
body .step::before{opacity:.9}

/* buttons: rounded, normal case (reference: 15px/600, radius 5-6px) */
body .btn, body .btn-accent, body .btn-line, body .btn-danger{
  border-radius:6px;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}
body .btn{padding:13px 26px}
body .nav-links .nav-cta{border-radius:5px;font-size:14px}
/* hero primary button is NAVY in the reference; nav/form stay orange */
body .hero-ctas .btn-accent{background:var(--navy);color:#fff}
body .btn-line{border-color:#c6cede;color:var(--navy)}
body .btn-line:hover{border-color:var(--navy);background:rgba(21,37,89,.05)}
/* hover dos botões laranja: texto PRETO p/ contraste máximo sobre o laranja
   (o padrão clareava o fundo e apagava o texto branco) */
body .btn-accent:hover, body .nav-links .nav-cta:hover{
  color:#141005;
  filter:saturate(1.06)}

/* soft rounded cards with subtle shadow */
body .card, body .proj, body .form, body .ph, body .ctaband-in, body .kb-col, body .kb-card,
body .msg-card, body .config-group, body .login-box, body .adm-empty, body .type-note,
body .kpi, body .table-wrap{border-radius:10px}
body .card, body .form, body .kpi, body .config-group, body .msg-card{box-shadow:0 1px 4px rgba(0,0,0,.06)}
body .card .icon, body .cinfo-item .icon{border-radius:8px}
body .field input, body .field select, body .field textarea,
body .adm-form input, body .adm-form select, body .adm-form textarea,
body .login-box input, body .kb-quickadd input, body .note-form textarea{border-radius:6px}
body .chip, body .pill-admin{border-radius:4px}

/* brand wordmark: "MillDigital" bold single line with orange highlight */
body .brand-name.brand-mill{font-family:var(--font-body);font-weight:800;font-size:21px;letter-spacing:0}
body .brand-name.brand-mill .brand-hl{color:var(--accent)}
body footer .brand-name.brand-mill, body.admin .brand-name.brand-mill{font-size:19px}


/* ============================================================
   Animations (toggled in Admin -> Homepage -> Animations;
   each prints an anim-* class on <body>; fx.js strips them all
   under prefers-reduced-motion)
   ============================================================ */

/* -- brush-stroke divider: the previous section's ground drips into the next -- */
body.anim-divider .stats, body.anim-divider .about,
body.anim-divider .process, body.anim-divider .contact{position:relative}
body.anim-divider .stats::before, body.anim-divider .about::before,
body.anim-divider .process::before, body.anim-divider .contact::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:36px;
  background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27350%27%20height%3D%2738%27%3E%3Cpath%20d%3D%27M0%200H350V5h-44q-1.2%2011%20-4.0%2011q-2.8%200%20-4.0%20-11h-50q-1.5%2026%20-5.0%2026q-3.5%200%20-5.0%20-26h-63q-1.3%2017%20-4.5%2017q-3.1%200%20-4.5%20-17h-36q-1.8%2030%20-6.0%2030q-4.2%200%20-6.0%20-30h-58q-1.2%2013%20-4.0%2013q-2.8%200%20-4.0%20-13h-42q-1.5%2022%20-5.0%2022q-3.5%200%20-5.0%20-22Z%27/%3E%3C/svg%3E") repeat-x top/auto 34px;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27350%27%20height%3D%2738%27%3E%3Cpath%20d%3D%27M0%200H350V5h-44q-1.2%2011%20-4.0%2011q-2.8%200%20-4.0%20-11h-50q-1.5%2026%20-5.0%2026q-3.5%200%20-5.0%20-26h-63q-1.3%2017%20-4.5%2017q-3.1%200%20-4.5%20-17h-36q-1.8%2030%20-6.0%2030q-4.2%200%20-6.0%20-30h-58q-1.2%2013%20-4.0%2013q-2.8%200%20-4.0%20-13h-42q-1.5%2022%20-5.0%2022q-3.5%200%20-5.0%20-22Z%27/%3E%3C/svg%3E") repeat-x top/auto 34px;
  pointer-events:none;z-index:2}

/* -- stagger: grid cards reveal in cascade -- */
body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(2){transition-delay:.09s}
body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(3){transition-delay:.18s}
body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(4){transition-delay:.27s}
body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(5){transition-delay:.36s}
body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(6){transition-delay:.45s}

/* -- Ken Burns: slow drift on real photos -- */
body.anim-kenburns .ph.has-img img{animation:wl-ken 22s ease-in-out infinite alternate}
@keyframes wl-ken{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.4%,1.4%)}}

/* -- slogan marquee strip -- */
.marquee{overflow:hidden;padding:20px 0;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee-track{display:flex;align-items:center;gap:30px;white-space:nowrap;width:max-content}
body.anim-marquee .marquee-track{animation:wl-marquee 32s linear infinite}
.marquee-track span{font-family:var(--font-slogan,var(--font-display));font-size:21px;letter-spacing:.05em;
  color:transparent;-webkit-text-stroke:1.1px var(--text2)}
.marquee-track i{color:var(--accent);font-style:normal;font-size:21px}
@keyframes wl-marquee{to{transform:translateX(-50%)}}

/* -- sheen sweep on primary buttons -- */
body.anim-sheen .btn-accent{position:relative;overflow:hidden}
body.anim-sheen .btn-accent::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
body.anim-sheen .btn-accent:hover::after{left:135%}

/* -- spotlight parallax hook (fx.js writes --spot-y on scroll; no-op on flat backgrounds) -- */
body.anim-parallax .stats, body.anim-parallax .about,
body.anim-parallax .process, body.anim-parallax .contact{
  background-position:50% var(--spot-y,0px), 0 0}