/* Avalon Consulting · v3.1 design system (editorial dark)
   ------------------------------------------------------------------
   Layer 1 (v3): tokens, .nav .hero .btn .cards .card .band .steps .faq
                 .stats .footer .rv .esbar. Every page already uses these.
   Layer 2 (v3.1): editorial dark sections and live artifacts, all opt in.
     .dark            dark editorial section (navy ground, white type)
     .hero.dark       tall hero with lila glow plus film grain
     .hl / .hl-u      accent word (color / underline stroke)
     .statrow .stat   rule separated metric strip, b[data-count] counts up
     .marquee         seamless scrolling word strip
     .num             small numeral label for section indexes
     .quote           pull quote with lila rule
     .roi             two column calculator, wired in site.js
     .burger          mobile nav toggle, .nav.open reveals the list
     LIVE ARTIFACTS (all animate when their .rv wrapper gets .in):
     .live            product surface card with pulsing .dot status
     .bars i          bar chart, height inline, grows on entry
     .line path       line chart, stroke draws in, .area fades after
     .ring circle.v   progress ring, --off set inline
     .toast .d1-.d3   notifications sliding in one after another
     .type            caret typing line, text from data-type in site.js
     .float           floating badge that bobs, .d2 offsets the phase
   Motion is driven by /site.js and disabled under reduced motion.
   ------------------------------------------------------------------ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#7788ED; --primary-text:#5566D8; --primary-soft:#E7EAFC; --primary-mist:#F2F4FE;
  --navy:#0A122D; --navy-2:#131C3E;
  --paper:#F7F8FC; --white:#FFFFFF;
  --ink:#0A122D; --ink-soft:#3E4763; --ink-mute:#626A87;
  --line:#DFE3F2;
  --fh:'Poppins',sans-serif; --fb:'Montserrat',sans-serif;
  --radius:14px; --shadow:0 10px 34px rgba(10,18,45,.08);
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--fh);line-height:1.15;font-weight:600}
h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 5vw}
section{padding:4.5rem 0}
/* Wider rhythm once there is room for it. */
@media(min-width:900px){body{font-size:1rem;line-height:1.7}section{padding:5.5rem 0}}
.eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--primary-text);font:600 .72rem var(--fh);letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:'';width:34px;height:2px;background:var(--primary)}
.vline{border-left:3px solid var(--primary);padding-left:1.2rem}
.sub{color:var(--ink-soft);font-size:1.05rem;max-width:640px}
.num{font:700 .8rem var(--fh);color:var(--primary);letter-spacing:.12em}

/* Nav ------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.75rem 5vw;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(247,248,252,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(10,18,45,.07);transition:background .3s ease,border-color .3s ease}
.nav .brand img{height:34px;width:auto}
.nav ul{display:flex;gap:1.4rem;list-style:none;align-items:center;font:600 .85rem var(--fb)}
.nav ul a{color:var(--ink-soft)} .nav ul a:hover,.nav ul a.on{color:var(--primary-text)}
.nav .lang{border:1.5px solid var(--line);border-radius:999px;padding:.3rem .85rem;font:700 .78rem var(--fh);color:var(--navy)}
.nav .burger{display:none;position:relative;width:40px;height:40px;border:1.5px solid var(--line);border-radius:10px;background:var(--white);cursor:pointer}
.nav .burger span{position:absolute;left:10px;width:18px;height:1.5px;background:var(--navy);transition:transform .25s var(--ease)}
.nav .burger span:nth-child(1){top:16px} .nav .burger span:nth-child(2){top:22px}
.nav.open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
/* Nav over a dark hero, flipping to the light glass once scrolled past it. */
.nav.on-dark{background:rgba(10,18,45,.6);border-bottom-color:rgba(255,255,255,.1)}
.nav.on-dark .brand img{filter:brightness(0) invert(1)}
.nav.on-dark ul a{color:#C7CDE8}
.nav.on-dark ul a:hover,.nav.on-dark ul a.on{color:var(--primary)}
.nav.on-dark .lang{border-color:rgba(255,255,255,.28);color:#fff}
.nav.on-dark .burger{background:transparent;border-color:rgba(255,255,255,.25)}
.nav.on-dark .burger span{background:#fff}
.nav.on-dark.scrolled{background:rgba(247,248,252,.88);border-bottom-color:rgba(10,18,45,.07)}
.nav.on-dark.scrolled .brand img{filter:none}
.nav.on-dark.scrolled ul a{color:var(--ink-soft)}
.nav.on-dark.scrolled ul a:hover,.nav.on-dark.scrolled ul a.on{color:var(--primary-text)}
.nav.on-dark.scrolled .lang{border-color:var(--line);color:var(--navy)}
.nav.on-dark.scrolled .burger{background:var(--white);border-color:var(--line)}
.nav.on-dark.scrolled .burger span{background:var(--navy)}
.esbar{display:none}
@media(max-width:820px){
  .nav{justify-content:flex-end}
  .nav .brand{margin-right:auto}
  .nav ul{display:none}
  .nav .burger{display:block}
  .nav.open ul{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:1rem 5vw 1.4rem;border-bottom:1px solid var(--line);gap:.9rem}
  .nav.on-dark:not(.scrolled).open ul{background:var(--navy);border-bottom-color:rgba(255,255,255,.12)}
  .nav .lang{display:inline-block}
  .esbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;align-items:center;justify-content:space-between;gap:.8rem;background:var(--navy);color:#fff;padding:.7rem 5vw;font:600 .85rem var(--fh)}
}

/* Heroes ----------------------------------------------------------- */
.hero{padding:9rem 0 5rem;background:linear-gradient(180deg,var(--primary-mist),var(--paper) 70%)}
.hero.dark{position:relative;overflow:hidden;padding:9rem 0 6rem;background:var(--navy)}
.hero.dark>*{position:relative;z-index:2}
.hero.dark::before{content:'';position:absolute;z-index:0;top:-34%;right:-14%;width:76vw;height:76vw;max-width:880px;max-height:880px;border-radius:50%;background:radial-gradient(circle,rgba(119,136,237,.35),rgba(119,136,237,0) 62%);filter:blur(46px);pointer-events:none}
/* Film grain keeps the flat navy from reading as a template block. */
.hero.dark::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero.dark h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.02em;line-height:1.05}
.hl{color:var(--primary)}
.hl-u{background-image:linear-gradient(var(--primary),var(--primary));background-repeat:no-repeat;background-size:100% 3px;background-position:0 100%;padding-bottom:.08em}

/* Buttons ---------------------------------------------------------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:.95rem 1.9rem;font:600 .95rem var(--fh);transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;border:0}
.btn.primary{background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.violet{background:var(--primary);color:#fff}
.btn.ghost{border:1.5px solid var(--line);color:var(--navy);background:var(--white)}
.btn.wa{background:#25D366;color:#062b13}
.btn.mag{will-change:transform}
/* Sheen sliding across the filled buttons on hover. */
.btn.primary::after,.btn.violet::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.btn.primary:hover::after,.btn.violet:hover::after{left:130%}

/* Blocks ----------------------------------------------------------- */
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:0 4px 18px rgba(10,18,45,.04)}
.card h3{font-size:1.12rem;margin:.9rem 0 .5rem}
.card .icon{width:44px;height:44px;border-radius:11px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center}
.card .icon img{width:24px;height:24px}
.card p{color:var(--ink-soft);font-size:.95rem}
.card .go{display:inline-block;margin-top:1rem;color:var(--primary-text);font:600 .9rem var(--fh)}
.band{background:var(--navy);color:#fff;border-radius:var(--radius);padding:2.4rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
.band h3{color:#fff} .band p{color:#C7CDE8}
.steps{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:st}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);font:700 1rem var(--fh);color:var(--primary-text)}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:1rem 1.3rem;margin-bottom:.7rem}
.faq summary{font:600 .98rem var(--fh);cursor:pointer;color:var(--navy)}
.faq p{margin-top:.6rem;color:var(--ink-soft);font-size:.94rem}
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center}
.stats b{display:block;font:600 2rem var(--fh);color:var(--primary-text)}
.stats span{color:var(--ink-mute);font-size:.85rem}
.quote{border-left:3px solid var(--primary);padding-left:1.2rem;font:500 1.15rem/1.55 var(--fh);color:var(--ink)}
.quote cite{display:block;margin-top:.7rem;font:600 .78rem var(--fb);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* Metric strip. Numbers carry data-count so site.js can run them up. */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem 2rem}
.stat b{display:block;font:600 clamp(2rem,4vw,3rem) var(--fh);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.4rem;font-size:.85rem;color:var(--ink-mute)}
@media(min-width:820px){.statrow .stat{border-top:1px solid var(--line);padding-top:1.1rem}}

/* Marquee. Duplicate the item list in the track so the loop is seamless. */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.9rem 0}
.marquee-track{display:inline-flex;animation:mq 28s linear infinite;will-change:transform}
.marquee span{display:inline-flex;align-items:center;gap:3rem;padding-right:3rem;font:600 .72rem var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.marquee span::after{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--primary)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ROI calculator --------------------------------------------------- */
.roi{display:grid;gap:1.6rem;grid-template-columns:1.1fr .9fr;align-items:start}
.roi .inputs label{display:block;font:600 .8rem var(--fh);letter-spacing:.03em;margin:.8rem 0 .3rem}
.roi .inputs label b{color:var(--primary-text)}
.roi input[type=range]{width:100%;accent-color:var(--primary)}
.roi .out{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.6rem}
.roi .out b{display:block;font:600 2.4rem var(--fh);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.roi .out small{display:block;color:#AEB6D6;font-size:.82rem}
@media(max-width:820px){.roi{grid-template-columns:1fr}}

/* Live artifacts --------------------------------------------------- */
.live{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.live .head{display:flex;align-items:center;gap:.5rem;font:600 .74rem var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.live .dot{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.bars{display:flex;align-items:flex-end;gap:.5rem;height:120px}
.bars i{flex:1;background:var(--primary);border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.bars i.navy{background:var(--navy)}
.in .bars i{transform:scaleY(1)}
.bars i:nth-child(1){transition-delay:.05s} .bars i:nth-child(2){transition-delay:.12s}
.bars i:nth-child(3){transition-delay:.19s} .bars i:nth-child(4){transition-delay:.26s}
.bars i:nth-child(5){transition-delay:.33s} .bars i:nth-child(6){transition-delay:.4s}
.bars i:nth-child(7){transition-delay:.47s} .bars i:nth-child(8){transition-delay:.54s}
.line{display:block;width:100%}
.line path{stroke:var(--primary);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1)}
.in .line path{stroke-dashoffset:0}
.line .area{stroke:none;fill:rgba(119,136,237,.15);opacity:0;transition:opacity .8s .8s ease}
.in .line .area{opacity:1}
.ring circle{fill:none;stroke-width:8}
.ring circle.t{stroke:var(--line)}
.ring circle.v{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);transform:rotate(-90deg);transform-origin:50% 50%}
.in .ring circle.v{stroke-dashoffset:var(--off,0)}
.toast{opacity:0;transform:translateY(8px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.in .toast{opacity:1;transform:none}
.toast.d1{transition-delay:.5s} .toast.d2{transition-delay:.95s} .toast.d3{transition-delay:1.4s} .toast.d4{transition-delay:1.85s}
.type{display:inline-block;border-right:2px solid var(--primary);white-space:nowrap;overflow:hidden;animation:caret 1s step-end infinite}
@keyframes caret{50%{border-color:transparent}}
.float{position:absolute;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;box-shadow:var(--shadow);font:600 .78rem var(--fh);animation:bob 5s ease-in-out infinite}
.float.d2{animation-delay:-2.5s}
@keyframes bob{50%{transform:translateY(-6px)}}

/* Dark editorial sections ------------------------------------------ */
.dark{background:var(--navy);color:#fff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .sub{color:#C7CDE8}
.dark .eyebrow{color:var(--primary)}
.dark .num{color:var(--primary)}
.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.dark .card p{color:#AEB6D6}
.dark .card .go{color:var(--primary)}
.dark .card .icon{background:rgba(119,136,237,.18)}
.dark .step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#fff}
.dark .step p{color:#AEB6D6}
.dark .step::before{color:var(--primary)}
.dark .faq details{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.dark .faq summary{color:#fff}
.dark .faq p{color:#AEB6D6}
.dark .btn.ghost{border-color:rgba(255,255,255,.25);color:#fff;background:transparent}
.dark .btn.ghost:hover{border-color:var(--primary);background:rgba(119,136,237,.12)}
.dark .btn.primary{background:var(--primary);color:#fff}
.dark .band{background:var(--navy-2)}
.dark .quote{color:#fff}
.dark .quote cite{color:#AEB6D6}
.dark .stat b{color:#fff}
.dark .stat span{color:#AEB6D6}
.dark .statrow .stat{border-top-color:rgba(255,255,255,.12)}
.dark .stats b{color:var(--primary)}
.dark .marquee{border-color:rgba(255,255,255,.12)}
.dark .marquee span{color:#AEB6D6}
.dark .live{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;color:#fff}
.dark .live .head{color:#AEB6D6}
.dark .ring circle.t{stroke:rgba(255,255,255,.14)}
.dark .bars i.navy{background:rgba(255,255,255,.22)}
.dark .line .area{fill:rgba(119,136,237,.22)}
.dark .float{background:var(--navy-2);border-color:rgba(255,255,255,.14);color:#fff}
.dark .roi .out{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.dark .roi .inputs label{color:#fff}
.dark .roi .inputs label b{color:var(--primary)}

/* Footer and reveal ------------------------------------------------ */
.footer{background:var(--navy);color:#B9C0DC;padding:3rem 0;margin-top:4rem;font-size:.9rem}
.footer a{color:#fff}
.footer .cols{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center}
@media(max-width:820px){.footer{padding-bottom:5.5rem}}
.rv{opacity:0;transform:translateY(14px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s} .rv.d2{transition-delay:.24s}
.rv.d3{transition-delay:.36s} .rv.d4{transition-delay:.48s}


/* Stack / integrations: vendor-agnostic chip wall (home EN + /es). */
.stack{background:var(--paper);text-align:center}
.stack .eyebrow{justify-content:center}.stack .eyebrow::before{display:none}
.stack .eyebrow::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);order:-1}
.stack h2{max-width:30ch;margin:.6rem auto .9rem;text-wrap:balance}
.stack h2 em{font-style:italic;font-weight:500}
.stack .sub{margin:0 auto 2.2rem;max-width:620px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.stagger>*{opacity:0;transform:translateY(10px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*45ms)}
.in.stagger>*,.in .stagger>*{opacity:1;transform:none}
.chip{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .95rem .55rem .55rem;border:1px solid var(--line);border-radius:999px;background:var(--white);font:500 .86rem var(--fb);color:var(--ink);transition:transform .15s ease,border-color .15s ease}
.chip:hover{transform:translateY(-2px);border-color:var(--primary)}
.chip img{width:18px;height:18px;object-fit:contain;margin-left:.25rem}
.stack .more{margin-top:1.4rem;color:var(--ink-mute);font-style:italic;font-size:.9rem}
@media(max-width:640px){.chip{font-size:.8rem}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .btn{transition:none}
  .btn.primary::after,.btn.violet::after{display:none}
  .live .dot,.float,.type{animation:none}
  .bars i{transform:scaleY(1);transition:none}
  .line path{stroke-dashoffset:0;transition:none}
  .line .area{opacity:1;transition:none}
  .ring circle.v{stroke-dashoffset:var(--off,0);transition:none}
  .toast{opacity:1;transform:none;transition:none}
  .stagger>*{opacity:1;transform:none;transition:none}
}