/* ===========================================================
   NXT AUTOMATION — V2 — core stylesheet
   Readable sans font system, light + dark themes, subtle motion
   =========================================================== */

/* Font loading moved to partials/header.php as real <link> tags — a CSS
   @import here forces the browser to fetch this file, parse it, discover
   the @import, THEN fetch the font CSS, THEN the font files, all serially.
   <link> tags in <head> let the browser start all of that in parallel
   with this stylesheet instead. Do not re-add an @import for fonts. */

/* ---------- THEME TOKENS ---------- */
:root, [data-theme="dark"]{
  --bg:            #0b0f10;
  --bg-raised:     #141a1a;
  --bg-elevated:   #1a2121;
  --line:          #262f2f;
  --ink:           #f2f1ea;
  --ink-dim:       #a3adad;
  --acid:          #8fe36b;
  --acid-strong:   #b6ff8f;
  --amber:         #ffab5e;
  --danger:        #ff6b6b;
  --scrim:         rgba(0,0,0,0.5);
}

[data-theme="light"]{
  --bg:            #faf9f5;
  --bg-raised:     #ffffff;
  --bg-elevated:   #f1f0e9;
  --line:          #e2e0d5;
  --ink:           #14181a;
  --ink-dim:       #565f5f;
  --acid:          #2f7a2b;
  --acid-strong:   #256423;
  --amber:         #c9701f;
  --danger:        #cf3a3a;
  --scrim:         rgba(255,255,255,0.6);
}

:root{
  --heading: 'Outfit', -apple-system, sans-serif;
  --sans:    'Manrope', -apple-system, sans-serif;
  --maxw: 1180px;
  --radius: 10px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth; overflow-x:hidden;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
  /* overflow-x:hidden was here before — iOS Safari has a well-known bug
     where overflow set on <body> (as opposed to <html>) silently breaks
     position:sticky on descendants, which was making the header vanish
     on mobile instead of sticking to the top. Moved to <html> above,
     which prevents horizontal scroll without breaking sticky. */
}

::selection{background:var(--acid); color:var(--bg);}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1;}

h1,h2,h3,h4{
  font-family:var(--heading);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem, 5.5vw, 4.4rem);}
h2{font-size:clamp(1.7rem, 3.4vw, 2.6rem);}
h3{font-size:1.2rem; font-weight:600;}
p{color:var(--ink-dim); max-width:60ch;}

.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--acid);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--acid); border-radius:2px; display:inline-block;}

/* ---------- neural network background canvas ---------- */
#neural-bg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:0.65;
}
[data-theme="light"] #neural-bg{opacity:0.55;}

/* On narrow screens the network lines sit directly behind headline text
   with no room to breathe, so text and lines visually merge ("camouflage").
   Fix: turn the canvas down (JS also lowers node density on mobile — see
   script.js), and add a soft scrim behind hero copy so text always has
   guaranteed contrast regardless of what the animation is doing. */
@media(max-width:760px){
  #neural-bg{opacity:0.32;}
  [data-theme="light"] #neural-bg{opacity:0.28;}
}

/* ---------- ambient gradient blob (adds motion behind hero) ---------- */
.blob{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--acid) 0%, transparent 70%);
  opacity:0.12; filter:blur(40px); pointer-events:none; z-index:0;
  animation:blobMove 14s ease-in-out infinite;
}
[data-theme="light"] .blob{opacity:0.16;}
.blob-1{top:-140px; right:-100px;}
.blob-2{bottom:-160px; left:-120px; animation-delay:-7s;}
@keyframes blobMove{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-30px) scale(1.15);}
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{padding-top:18px; font-size:0.85rem; color:var(--ink-dim); display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.breadcrumbs a{color:var(--ink-dim); font-weight:600; transition:color .2s ease;}
.breadcrumbs a:hover{color:var(--acid);}
.breadcrumbs .sep{opacity:0.5;}
.breadcrumbs .current{color:var(--ink); font-weight:600;}

/* ---------- page load fade ---------- */
/* (Whole-page fade-in removed: it hid content on first paint and
   slowed Largest Contentful Paint, a Core Web Vitals metric.) */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:0.92rem;
  padding:14px 26px;
  border:1.5px solid var(--acid); color:var(--acid);
  border-radius:var(--radius);
  transition:all .2s ease;
  white-space:nowrap; cursor:pointer;
}
.btn:hover{background:var(--acid); color:var(--bg);}
.btn.solid{background:var(--acid); color:var(--bg);}
.btn.solid:hover{background:var(--acid-strong); border-color:var(--acid-strong); color:var(--bg);}
.btn::after{content:"→"; transition:transform .2s ease;}
.btn:hover::after{transform:translateX(3px);}

/* ---------- theme toggle ---------- */
.theme-toggle{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--bg-raised);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .2s ease, transform .2s ease;
  flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--acid); transform:rotate(-8deg);}
.theme-toggle svg{width:18px; height:18px; stroke:var(--ink); fill:none;}
.theme-toggle .sun-icon{display:none;}
[data-theme="light"] .theme-toggle .moon-icon{display:none;}
[data-theme="light"] .theme-toggle .sun-icon{display:block;}

/* ---------- top info bar ---------- */
.topbar{background:var(--bg-elevated); border-bottom:1px solid var(--line); font-size:0.8rem;}
.topbar-inner{padding:7px 28px; display:flex; justify-content:flex-end;}
.topbar-phone{display:flex; align-items:center; gap:7px; color:var(--ink-dim); font-weight:600; transition:color .2s ease;}
.topbar-phone:hover{color:var(--acid);}
.topbar-phone svg{stroke:currentColor;}

/* ---------- header ---------- */
header{
  position:-webkit-sticky; /* older iOS Safari needs the -webkit- prefix or it silently falls back to static */
  position:sticky;
  top:0; z-index:90;
  /* z-index bumped from 50 to 90 — header (position:sticky + z-index) forms
     its own stacking context, and .navlinks (the mobile drawer, z-index:70)
     lives INSIDE header. That means the drawer's z-index only ranked it
     among header's own children; against the scrim (z-index:65, a sibling
     right after </header>, outside that context) the WHOLE header was
     still capped at its old z-index:50 and lost. The scrim was rendering
     on top of the drawer and eating every tap — links looked open but
     taps just hit the scrim and closed the menu instead of navigating.
     Raising header above every mobile-menu z-index (scrim 65, drawer 70,
     burger 75) fixes it without touching the HTML structure. */
  /* Solid, universally-supported background first. color-mix() + backdrop-filter
     are layered on top only where supported (@supports below), so on any
     renderer that doesn't understand them the header still shows a normal
     solid bar instead of risking a transparent/invisible header. */
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  header{
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto;}
.logo{font-family:var(--heading); font-weight:800; font-size:1rem; letter-spacing:0.02em; display:flex; flex-wrap:nowrap; align-items:center; gap:10px;}
.logo-img{height:32px; width:auto; flex-shrink:0; display:block; transition:transform .3s ease;}
[data-theme="light"] .logo-img{
  background:#0b0f10;
  padding:5px 7px;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.logo:hover .logo-img{transform:scale(1.06) rotate(-2deg);}
.logo-text{padding-top:2px; white-space:nowrap; font-weight:800;}
.logo .dot{width:8px; height:8px; background:var(--acid); border-radius:50%; box-shadow:0 0 10px var(--acid); animation:pulseDot 2.4s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.5; transform:scale(0.7);}}
.navlinks{display:flex; gap:20px; align-items:center;}
.navlinks a{font-weight:600; font-size:0.86rem; color:var(--ink-dim); position:relative; padding:4px 0; cursor:pointer; white-space:nowrap;}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}
.navlinks a.active::after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--acid); border-radius:2px;}
.navcta{display:flex; align-items:center; gap:14px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
/* Hidden by default (desktop) — this button only exists for the mobile
   slide-in drawer and is re-shown inside the max-width:860px block below.
   Without this, it has no display rule outside that block at all, so on
   desktop it was falling back to a plain unstyled <button> and sitting
   inline in the header next to the logo — that stray boxed "X" you saw. */
.nav-close{display:none;}
.burger span{width:22px; height:2px; background:var(--ink); border-radius:2px;}

/* ---------- nav dropdown (Products) ---------- */
.navdrop{position:relative;}
.navdrop-trigger{
  background:none; border:none; font-family:var(--sans); font-weight:600; font-size:0.86rem;
  color:var(--ink-dim); display:flex; align-items:center; gap:5px; cursor:pointer; padding:4px 0;
}
.navdrop-trigger svg{stroke:currentColor; transition:transform .2s ease;}
.navdrop:hover .navdrop-trigger, .navdrop:focus-within .navdrop-trigger{color:var(--ink);}
.navdrop:hover .navdrop-trigger svg, .navdrop:focus-within .navdrop-trigger svg{transform:rotate(180deg);}
.navdrop-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px; min-width:230px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.navdrop-menu a{display:block; padding:10px 12px; border-radius:6px; font-weight:700; color:var(--ink); font-size:0.88rem;}
.navdrop-menu a:hover{background:var(--bg-elevated);}
.navdrop-menu a span{display:block; font-weight:500; font-size:0.78rem; color:var(--ink-dim); margin-top:2px;}

@media(max-width:1080px){
  .navlinks{gap:16px;}
  .navlinks a, .navdrop-trigger{font-size:0.82rem;}
}
@media(max-width:860px){
  /* Right-to-left slide-in drawer, full viewport height (goes edge to
     edge, over the header too) so it reads unmistakably as "a menu just
     opened" rather than a strip tucked under the header.
     Hidden state uses THREE independent mechanisms stacked together —
     transform pushes it off-screen, visibility removes it from the
     accessibility tree/hit-testing, and pointer-events blocks clicks —
     so even if one fails on some device, the other two still keep it
     closed. display stays "flex" always (never display:none) so the
     transform can actually animate. */
  .navlinks{
    display:flex;
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:70;
    /* width:min(320px, 82vw) was here — replaced because the renderer
       showing the shrunk, floating (not full-height) drawer very likely
       doesn't support the min() function, which drops the whole
       declaration. With width left as "auto" and the drawer's children
       set to width:100%, a fixed-position flex column with no explicit
       width falls into shrink-to-fit sizing that fights with those
       100%-width children, producing an unpredictable, wrong-looking box
       instead of a proper full-height panel. width + max-width use only
       long-supported plain CSS, no function needed. */
    width:320px; max-width:82vw;
    height:100vh; /* explicit fallback alongside top:0/bottom:0 */
    background:var(--bg);
    flex-direction:column; align-items:flex-start;
    padding:100px 36px 40px 38px; gap:6px; overflow-y:auto;
    border-left:1px solid var(--line);
    box-shadow:-24px 0 48px -16px rgba(0,0,0,0.35);
    transform:translateX(110%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .32s ease, visibility 0s linear .32s;
  }
  .navlinks.open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .32s ease, visibility 0s linear 0s;
  }
  /* Dimmed backdrop behind the drawer — tapping it closes the menu.
     Same hide technique as the drawer itself (opacity + visibility, not
     display) so it can fade instead of popping. */
  .nav-scrim{
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:65;
    background:rgba(10,14,14,0.5);
    opacity:0; visibility:hidden;
    transition:opacity .32s ease, visibility 0s linear .32s;
  }
  .nav-scrim.open{
    opacity:1; visibility:visible;
    transition:opacity .32s ease, visibility 0s linear 0s;
  }
  .nav-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:20px; right:20px;
    width:40px; height:40px; border-radius:10px;
    border:1.5px solid var(--acid); background:transparent; color:var(--acid);
    cursor:pointer;
  }
  /* Divider line under every top-level nav item, matching the reference
     drawer style — full-width rows with hairlines between them, rather
     than plain gap spacing. */
  .navlinks > a, .navlinks > .navdrop{
    width:100%; padding-bottom:16px; margin-bottom:0;
    border-bottom:1px solid var(--line);
  }
  .navlinks a, .navdrop-trigger{font-size:1.05rem;}
  .navdrop{width:100%;}
  .navdrop-trigger{width:100%; justify-content:space-between;}
  .navdrop-menu{position:static; opacity:1; pointer-events:auto; transform:none; box-shadow:none; display:none; margin-top:14px; width:100%;}
  .navdrop.open .navdrop-menu{display:block;}
  /* Touch taps can leave :hover "stuck" active on mobile browsers, and
     ".navdrop:hover .navdrop-menu" (desktop's centered-dropdown rule,
     transform:translateX(-50%)) has higher CSS specificity than the
     plain ".navdrop-menu{transform:none}" reset just above — so it was
     winning even inside the mobile drawer and yanking the AuditIQ/AI
     Voice Agent panel sideways, half off-screen. Forcing it back to the
     static, full-width mobile layout regardless of hover state. */
  .navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu{
    position:static; transform:none; left:auto; min-width:0; width:100%;
  }
  .burger{display:flex; position:relative; z-index:75; width:22px; height:16px; justify-content:center;}
  .burger span{position:absolute; left:0; width:100%; transition:transform .25s ease, opacity .2s ease, top .25s ease;}
  .burger span:nth-child(1){top:0;}
  .burger span:nth-child(2){top:7px;}
  .burger span:nth-child(3){top:14px;}
  /* The burger used to morph into its own X on open, but the drawer also
     has its own dedicated ✕ (.nav-close) in roughly the same corner —
     together they read as a "double cross". Simplest fix: just fade the
     header's burger out while the drawer is open, since .nav-close (plus
     the backdrop and Escape) already covers closing the menu. */
  .burger.open{opacity:0; pointer-events:none;}
  .navcta .btn{display:none;}
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,0.4);
  transition:transform .2s ease;
  animation:waPulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover{transform:scale(1.08);}
@keyframes waPulse{0%,100%{box-shadow:0 10px 30px -8px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5);} 50%{box-shadow:0 10px 30px -8px rgba(0,0,0,0.4), 0 0 0 10px rgba(37,211,102,0);}}
@media (prefers-reduced-motion: reduce){.whatsapp-float{animation:none;}}

/* ---------- hero ---------- */
.hero{padding:110px 0 90px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{margin-bottom:24px;} /* no entrance animation: the headline is the LCP element */
.hero h1 .accent{color:var(--acid);}
.hero p.lead{font-size:1.12rem; margin-bottom:34px; color:var(--ink-dim); animation:riseIn .7s .1s ease both;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; animation:riseIn .7s .2s ease both;}
.hero-stats{display:flex; gap:40px; margin-top:56px; flex-wrap:wrap; animation:riseIn .7s .3s ease both;}
.stat .num{font-family:var(--heading); font-size:2.1rem; color:var(--acid); font-weight:800;}
.stat .label{font-size:0.78rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; font-weight:600;}

.hero-panel{
  border:1px solid var(--line); background:var(--bg-raised); border-radius:var(--radius);
  padding:26px; font-size:0.9rem; position:relative;
  animation:riseIn .8s .2s ease both, float 6s ease-in-out infinite;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.35);
}
.hero-panel .bar{display:flex; gap:6px; margin-bottom:20px;}
.hero-panel .bar span{width:9px; height:9px; border-radius:50%; background:var(--line);}
.hero-panel .line{display:flex; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); color:var(--ink-dim); font-weight:500;}
.hero-panel .line:last-child{border:none;}
.hero-panel .line .k{color:var(--acid); font-weight:700;}
.hero-panel .line .ok{color:var(--acid); margin-left:auto; font-weight:700;}

@keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}

/* ---------- section shell ---------- */
section{padding:100px 0; position:relative;}
.section-head{max-width:640px; margin-bottom:56px;}
.divider{border:none; border-top:1px solid var(--line);}

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

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.grid-3, .grid-2{grid-template-columns:1fr;}}

.card{
  border:1px solid var(--line); background:var(--bg-raised); padding:32px 28px;
  border-radius:var(--radius); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display:block;
}
.card:hover{border-color:var(--acid); transform:translateY(-4px); box-shadow:0 16px 40px -18px rgba(0,0,0,0.3);}
.card .idx{font-weight:700; color:var(--acid); font-size:0.8rem; margin-bottom:16px; display:block; text-transform:uppercase; letter-spacing:0.06em;}
.card h3{margin-bottom:12px;}
.card h2.card-title{font-size:1.2rem; font-weight:600; margin-bottom:12px;}
.card p{font-size:0.94rem;}
.card ul{margin-top:16px; padding-left:0; list-style:none;}
.card ul li{font-size:0.88rem; color:var(--ink-dim); padding:6px 0 6px 20px; position:relative;}
.card ul li::before{content:"→"; position:absolute; left:0; color:var(--acid);}

/* ---------- process / steps ---------- */
.steps{counter-reset:step;}
.step{display:grid; grid-template-columns:70px 1fr; gap:24px; padding:30px 0; border-bottom:1px solid var(--line);}
.step:first-child{border-top:1px solid var(--line);}
.step .n{counter-increment:step; font-weight:800; color:var(--acid); font-size:1.4rem; font-family:var(--heading);}
.step .n::before{content:"0" counter(step);}

/* ---------- logos strip ---------- */
.stack-strip{display:flex; gap:14px; flex-wrap:wrap; padding:22px 0;}
.tag{font-size:0.82rem; font-weight:600; border:1px solid var(--line); padding:8px 14px; border-radius:20px; color:var(--ink-dim); text-decoration:none; transition:border-color .2s ease, color .2s ease;}
.tag:hover{border-color:var(--acid); color:var(--ink);}
.platform-tag{display:inline-flex; align-items:center; gap:8px;}
.platform-icon{width:16px; height:16px; flex-shrink:0;}

/* ---------- testimonial / quote ---------- */
.quote{border-left:3px solid var(--acid); padding:8px 0 8px 28px; font-size:1.15rem; font-weight:500; color:var(--ink); max-width:70ch;}
.quote .who{margin-top:16px; font-size:0.85rem; color:var(--ink-dim); font-weight:600;}

/* ---------- cta band ---------- */
.cta-band{
  border:1px solid var(--line); background:var(--bg-raised);
  padding:70px 40px; border-radius:calc(var(--radius) + 6px); text-align:center; position:relative; overflow:hidden;
}
.cta-band h2{margin-bottom:18px;}
.cta-band p{margin:0 auto 34px;}
.cta-band .btn{margin:0 auto;}

/* ---------- forms ---------- */
form{display:grid; gap:18px; max-width:560px;}
.formrow-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:600px){.formrow-2{grid-template-columns:1fr;}}
label{font-weight:700; font-size:0.8rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:8px;}
input, textarea, select{
  width:100%; background:var(--bg-raised); border:1.5px solid var(--line); color:var(--ink);
  padding:13px 14px; font-family:var(--sans); font-size:0.95rem; border-radius:calc(var(--radius) - 4px);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--acid); box-shadow:0 0 0 3px color-mix(in srgb, var(--acid) 25%, transparent);}
a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--acid); outline-offset:3px;}
textarea{resize:vertical; min-height:120px;}

/* ---------- newsletter band ---------- */
.newsletter-band{
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  padding:34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised);
  margin-bottom:50px;
}
.newsletter-band h3{font-size:1.25rem;}
.newsletter-band p{font-size:0.9rem; max-width:40ch;}
.newsletter-band form{display:flex; gap:10px; flex-wrap:wrap; margin:0; max-width:none;}
.newsletter-band input{width:240px; margin:0;}
@media(max-width:640px){.newsletter-band form{width:100%;} .newsletter-band input{width:100%;}}

/* ---------- footer logo ---------- */
/* Bumped up from the header's 32px — in the footer the logo sits next to
   body copy rather than nav links, so the header's compact size read as
   too small there. Sized (not larger) so it still fits on one line with
   "AUTOMATION" next to it in the narrower footer column on mobile. */
footer .logo-img{height:40px;}
footer .logo-text{font-size:1rem;}

/* ---------- social links ---------- */
.social-links{display:flex; gap:12px; margin-top:18px;}
.social-links a{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.social-links a svg{width:19px; height:19px;}
.social-links a:hover{border-color:var(--acid); color:var(--acid); background:var(--bg-raised);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:60px 0 30px; margin-top:60px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr 1.3fr; gap:36px; margin-bottom:50px;}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:0.78rem; letter-spacing:0.06em; color:var(--ink-dim); margin-bottom:16px; font-weight:700; text-transform:uppercase;}
.footer-grid a{display:block; color:var(--ink-dim); font-size:0.92rem; padding:5px 0; font-weight:500;}
.footer-grid a:hover{color:var(--acid);}
/* .footer-grid a{display:block} above (needed for the Site/Services/Legal
   link columns) was also matching the brand logo link, since it's an <a>
   inside .footer-grid too — and beats ".logo{display:flex}" on specificity.
   That's what was forcing the icon and "AUTOMATION" onto separate lines
   no matter what was changed on .logo itself. This rule targets only the
   logo link and wins because it's more specific, restoring the row layout. */
.footer-grid a.logo{display:flex; flex-wrap:nowrap; align-items:center; padding:0; color:var(--ink);}
/* Same specificity clash as the logo above — .footer-grid a{display:block;
   padding:5px 0} was also landing on the LinkedIn/Instagram circle links
   and winning (same specificity, later in the file), which killed their
   flex centering and added stray padding, making the icons sit off-center
   inside their circles instead of dead-center. */
.footer-grid a.social-linkedin, .footer-grid a.social-instagram{
  display:flex; align-items:center; justify-content:center; padding:0;
}
.footer-grid .listed-on{margin-top:14px; font-size:0.85rem; color:var(--ink-dim);}
.footer-grid .listed-on a{display:inline; padding:0; color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.footer-grid .listed-on a:hover{color:var(--acid);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line); font-size:0.82rem; color:var(--ink-dim); flex-wrap:wrap; gap:12px; font-weight:600;}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); padding:4px 24px; transition:border-color .2s ease;}
.faq-item[open]{border-color:var(--acid);}
.faq-item summary{
  padding:18px 0; font-weight:700; font-size:1rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--acid); font-weight:400; transition:transform .2s ease; flex-shrink:0; margin-left:16px;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding-bottom:20px; margin:0; max-width:none;}
/* ---------- legal page content ---------- */
.wrap.legal-content{max-width:var(--maxw);}
.legal-content > *{max-width:760px;}
.legal-content h2{font-size:1.3rem; margin:40px 0 14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{max-width:760px; margin-bottom:6px;}
.legal-content a{color:var(--acid); font-weight:600;}

.page-hero{padding:150px 0 60px;}
.page-hero .eyebrow{margin-bottom:22px;}
.page-hero p.lead{font-size:1.05rem; max-width:65ch;}
/* On every inner page, .breadcrumbs sits directly above .page-hero and
   already provides clearance below the header — so page-hero's own
   150px top padding (sized for when IT is the first thing on the page)
   was stacking on top of that and leaving a big empty gap under the
   Home / Services trail before the heading. Cut way down when a
   breadcrumb row immediately precedes it. */
.breadcrumbs + .page-hero{padding-top:40px;}

/* Mobile-only contrast scrim behind hero/page-hero copy, so headline text
   stays legible no matter how dense the neural-network canvas gets. */
@media(max-width:760px){
  .hero .wrap, .page-hero .wrap{
    position:relative;
    z-index:1;
  }
  .hero .wrap::before, .page-hero .wrap::before{
    content:"";
    position:absolute;
    inset:-16px -16px -16px -16px;
    background:radial-gradient(120% 100% at 50% 0%, var(--bg) 45%, transparent 100%);
    z-index:-1;
    pointer-events:none;
  }
}

/* ---------- utility ---------- */
.center{text-align:center; margin-left:auto; margin-right:auto;}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  #neural-bg{display:none;}
}

/* ---------- form anti-spam helpers ---------- */
/* Honeypot: moved off-screen rather than display:none, which some bots detect. */
.hp-field{position:absolute !important; left:-10000px !important; top:auto; width:1px; height:1px; overflow:hidden;}
.captcha-slot:empty{display:none;}
.newsletter-band form .captcha-slot{flex-basis:100%;}

/* ---------- cookie consent banner ---------- */
.cookie-banner{
  position:fixed; left:24px; bottom:24px; z-index:80;
  width:420px; max-width:calc(100vw - 48px);
  background:var(--bg-raised); color:var(--ink);
  border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  box-shadow:0 20px 50px -18px rgba(0,0,0,0.45);
  padding:20px 22px; display:flex; flex-direction:column; gap:16px;
  font-size:0.9rem; line-height:1.55;
  animation:riseIn .35s ease both;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner-text{color:var(--ink-dim);}
.cookie-banner-text strong{color:var(--ink); display:block; font-family:var(--heading); font-size:1rem; margin-bottom:4px;}
.cookie-banner-text a{color:var(--acid); font-weight:700; white-space:nowrap;}
.cookie-banner-actions{display:flex; gap:10px;}
.cookie-banner .cookie-btn{flex:1; justify-content:center; padding:11px 18px;}
.cookie-banner .cookie-btn::after{content:none;}
.cookie-banner .cookie-btn:not(.solid){background:transparent; font-family:var(--sans);}
.cookie-banner .cookie-btn:not(.solid):hover{background:var(--acid); color:var(--bg);}
.cookie-banner .cookie-btn.solid{font-family:var(--sans);}
@media(max-width:600px){
  .cookie-banner{left:12px; right:12px; bottom:12px; width:auto; max-width:none;}
  /* keep the WhatsApp button clear of the banner while it's open */
  body.cookie-banner-open .whatsapp-float{bottom:210px;}
}
.legal-content ul{padding-left:22px; margin:8px 0 14px;}
.legal-content li{color:var(--ink-dim); margin-bottom:6px;}

/* ---------- in-content links (internal linking) ---------- */
.inline-link{color:var(--acid); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.inline-link:hover{color:var(--acid-strong);}
.card-link{display:inline-block; margin-top:18px; color:var(--acid); font-weight:700; font-size:0.9rem;}
.card-link::after{content:" →";}
.card-link:hover{color:var(--acid-strong);}

/* ---------- blog post body ---------- */
.post-body{color:var(--ink); line-height:1.75;}
.post-body > p, .post-body > ul{margin-bottom:18px; max-width:none; color:var(--ink);}
.post-body > h2{font-size:1.45rem; margin:42px 0 14px;}
.post-body > ul{padding-left:22px;}
.post-body > ul li{margin-bottom:8px;}
.post-body a{color:var(--acid); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.post-body .card p{color:var(--ink-dim);}

/* ---------- topbar hours ---------- */
.topbar-inner{gap:22px; align-items:center;}
.topbar-hours{color:var(--ink-dim); font-weight:600;}
@media(max-width:600px){.topbar-hours{display:none;}}

/* ---------- footer address ---------- */
.footer-address{font-style:normal; color:var(--ink-dim); font-size:0.85rem; line-height:1.6; margin-top:10px;}

/* ---------- long-form text blocks on landing pages ---------- */
.prose{max-width:760px;}
.prose p{max-width:none; margin-bottom:16px; color:var(--ink-dim); font-size:1.02rem;}
.prose h2{font-size:1.5rem; margin:36px 0 14px;}
.prose h2:first-child{margin-top:0;}

/* ---------- founder block ---------- */
.founder{display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start; border:1px solid var(--line); background:var(--bg-raised); border-radius:calc(var(--radius) + 6px); padding:36px;}
.founder p{max-width:68ch;}
.founder-photo{width:160px; height:160px; border-radius:50%; background:var(--bg-elevated); border:2px solid var(--acid); display:flex; align-items:center; justify-content:center; font-family:var(--heading); font-weight:800; font-size:2.6rem; color:var(--acid); object-fit:cover;}
@media(max-width:700px){.founder{grid-template-columns:1fr; padding:26px;} .founder-photo{width:110px; height:110px; font-size:1.9rem;}}

/* ---------- client card ---------- */
.client-card{border:1px solid var(--line); border-left:4px solid var(--acid); background:var(--bg-raised); border-radius:var(--radius); padding:26px 28px; max-width:900px;}
.client-card h3{margin-bottom:8px;}
.client-card p{max-width:none;}

/* ---------- blog byline ---------- */
.byline{margin-top:18px; font-size:0.9rem; color:var(--ink-dim); font-weight:600;}
.byline a{color:var(--acid);}

/* ---------- blog post header ---------- */
.breadcrumbs + article .page-hero{padding-top:40px;}
article .page-hero h1{font-size:clamp(2rem, 4.2vw, 3.2rem); max-width:22ch;}