/* ================================================================
   ZFORCE MARKETING — shared styles (single-page site)
   Dark-red / chrome "liquid-metal" design system.
   Adapted from the ZForce workspace scaffold; cyan → dark red.
================================================================ */
:root{
  --ink:#120607; --panel:#1C0A0C; --panel2:#220A0D; --line:#3A1B1E;
  --accent:#D71920; --accent2:#8E0E14; --accent-bright:#FF3B40;
  --cream:#F5ECE4;
  --chrome: linear-gradient(180deg,#ffffff 0%,#e4dad4 16%,#a99e98 38%,#fbf7f4 50%,#b7aca6 60%,#6b615c 82%,#ddd3cd 100%);
  --chrome-edge: linear-gradient(160deg,#f4efeb 0%,#a99f99 24%,#3a322f 50%,#a99f99 76%,#f4efeb 100%);
  /* metallic red: the same brushed-metal banding as --chrome/--chrome-edge, recolored to
     the brand red instead of silver — used for headline accent words + primary CTAs.
     Dark near-black red base with a saturated bright-red glint (like the logo's beam),
     not a light pink highlight. */
  --chrome-red: linear-gradient(180deg,#2a0406 0%,#ff3b40 16%,#7a0d10 34%,#ff1e28 50%,#6b0b0e 64%,#ff3b40 80%,#240406 100%);
  --chrome-red-edge: linear-gradient(160deg,#ff3b40 0%,#8e0e14 26%,#240406 50%,#8e0e14 74%,#ff3b40 100%);
}
*{ -webkit-tap-highlight-color: transparent; }
html{ overflow-x:hidden; }
body{ background:var(--ink); color:var(--cream); font-family:'Manrope',system-ui,sans-serif; overflow-x:hidden; width:100%; max-width:100%; }
img,iframe,video{ max-width:100%; }
::selection{ background:rgba(215,25,32,.34); color:#fff; }

h1,h2,h3,.font-display{ font-family:'Archivo',system-ui,sans-serif; letter-spacing:-0.03em; }
.font-serif{ font-family:'Fraunces',Georgia,'Times New Roman',serif; }

/* ---- atmospheric base : warm red-black steel ---- */
.bg-stage{ background:linear-gradient(180deg,#0E0405 0%,#140708 45%,#0E0405 100%); }

/* ---- themed animated background : drifting light beams ----
   Canvas beams are drawn by app.js (see the BEAMS block there; the hue
   range lives in that one constant). Layers, back to front:
   beams canvas → pulsing veil → vignette. All fixed behind the content. */
.bg-theme{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bg-theme #beams{
  position:absolute; inset:0; width:100%; height:100%;
  filter:blur(15px);            /* softens the already-blurred beams */
}
/* slow breathing veil — keeps the beams from ever overpowering the copy */
.bg-theme .veil{
  position:absolute; inset:0; background:rgba(14,4,5,.30);
  animation:veilPulse 10s ease-in-out infinite;
}
.bg-theme .vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 28%, transparent 52%, rgba(0,0,0,.6) 100%);
}
@keyframes veilPulse{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .bg-theme .veil{ animation:none; }
  .edge::before{ animation:none; }
}
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(215,25,32,.55),rgba(255,255,255,.12),transparent); }

/* ---- "the edge" : a morphing red horizon divider (nods to the reference) ---- */
.edge{ position:relative; height:2px; overflow:visible; background:linear-gradient(90deg,transparent,rgba(215,25,32,.35),transparent); }
.edge::before{
  content:""; position:absolute; top:-1px; left:-30%; width:60%; height:4px; border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--accent-bright),transparent);
  filter:blur(2px); box-shadow:0 0 26px 2px rgba(255,59,64,.5);
  animation:edgeSweep 7s ease-in-out infinite;
}
@keyframes edgeSweep{ 0%{ left:-40%; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ left:100%; opacity:0; } }

/* ---- chrome text ---- */
.chrome{
  background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent; text-shadow:0 1px 0 rgba(255,255,255,.06);
}
.chrome-soft{ background:linear-gradient(180deg,#f6f0ec,#b7aca6 55%,#847a74); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* ---- metallic red text (for big metrics + accent words) ---- */
.redtext{ background:var(--chrome-red); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:0 1px 0 rgba(255,255,255,.08); }

/* ---- hero headline glitch: a brief chromatic-aberration + slice jump every ~6s.
   Text stays fully legible at rest; only the short burst is glitchy. Split into two
   keyframes so the red "ignored." word (its own gradient fill) only gets the slice/
   shift jump and keeps its own text-shadow, while the plain white lines also get the
   red/cyan RGB split. ---- */
.glitch-text{ display:block; position:relative; animation:glitchRGB 6.2s infinite, glitchSlice 6.2s infinite; }
.glitch-text .redtext{ display:inline-block; animation:glitchSlice 6.2s infinite; }
@keyframes glitchRGB{
  0%, 92%, 100%{ text-shadow:none; }
  92.5%{ text-shadow:-2px 0 #2dd4ff, 2px 0 var(--accent-bright); }
  93%{ text-shadow:2px 0 #2dd4ff, -3px 0 var(--accent-bright); }
  93.5%{ text-shadow:-1px 0 #2dd4ff, 1px 0 var(--accent-bright); }
  94%{ text-shadow:3px 0 #2dd4ff, -2px 0 var(--accent-bright); }
  94.5%, 100%{ text-shadow:none; }
}
@keyframes glitchSlice{
  0%, 92%, 100%{ transform:translate(0,0); clip-path:none; }
  92.5%{ transform:translate(-3px,1px); clip-path:inset(0 0 55% 0); }
  93%{ transform:translate(3px,-1px); clip-path:inset(45% 0 0 0); }
  93.5%{ transform:translate(-2px,0); clip-path:inset(0 0 70% 0); }
  94%{ transform:translate(2px,1px); clip-path:inset(25% 0 15% 0); }
  94.5%, 100%{ transform:translate(0,0); clip-path:none; }
}
@media (prefers-reduced-motion: reduce){
  .glitch-text, .glitch-text .redtext{ animation:none; }
}

.eyebrow{ font-family:'Manrope'; font-weight:700; letter-spacing:.32em; text-transform:uppercase; font-size:.72rem; color:#C98A86; }

/* ---- hero chrome wordmark (fallback until real logo.png is dropped in) ---- */
.wordmark{
  font-family:'Archivo'; font-weight:900; font-style:italic; line-height:.84;
  letter-spacing:-0.045em; text-transform:uppercase;
  background:var(--chrome); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(215,25,32,.35));
}

/* ---- chrome-framed image component ---- */
.frame{
  position:relative; border-radius:16px; padding:2px;
  background:var(--chrome-edge);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.frame > .frame-inner{
  position:relative; border-radius:14px; overflow:hidden; background:#140708;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}
.frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.frame::after{ /* red rim glow on hover */
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(215,25,32,0); transition:box-shadow .4s, opacity .4s; opacity:0;
}
.group:hover .frame, .frame:hover{ transform:translateY(-6px); }
.group:hover .frame::after, .frame:hover::after{ opacity:1; box-shadow:0 0 40px -2px rgba(215,25,32,.55); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Manrope'; font-weight:700; border-radius:11px; min-height:48px; padding:0 1.35rem;
  transition:transform .15s, box-shadow .3s, background .3s, border-color .3s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:var(--chrome-red-edge);
  box-shadow:0 10px 26px -8px rgba(215,25,32,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{ box-shadow:0 14px 36px -8px rgba(255,59,64,.9), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-ghost{ color:var(--cream); background:rgba(255,255,255,.03);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.btn-ghost:hover{ border-color:rgba(215,25,32,.6); background:rgba(215,25,32,.08); }
.btn-chrome{ color:#160a0b; background:var(--chrome-edge); border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5); font-weight:800; }

/* ---- cards ---- */
.card{ position:relative; border-radius:18px; background:linear-gradient(180deg,#1F0B0D,#150809);
  border:1px solid var(--line); box-shadow:0 20px 50px -30px rgba(0,0,0,.9); transition:.4s; }
.card:hover{ border-color:rgba(215,25,32,.4); transform:translateY(-4px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,1), 0 0 44px -18px rgba(215,25,32,.45); }
/* plain card: no hover highlight / lift (used for the Services grid) */
.card-static:hover{ transform:none; border-color:var(--line);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9); }
.chip{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--line);
  background:rgba(255,255,255,.02); border-radius:999px; padding:.4rem .8rem; font-size:.78rem; font-weight:600; color:#D8C6C2; }

/* ---- service icon tile ---- */
.svc-ico{ width:52px; height:52px; border-radius:14px; display:inline-grid; place-items:center;
  color:#fff; background:linear-gradient(180deg,#2a0d10,#180809); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 30px -12px rgba(215,25,32,.7); }

/* ---- reveal animation ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---- nav ---- */
.nav-link{ position:relative; color:#C9B8B4; font-weight:600; font-size:.95rem; padding:.4rem 0; transition:color .2s; }
.nav-link:hover{ color:#fff; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg,#ff4750,#8E0E14); transition:width .3s; }
.nav-link:hover::after{ width:100%; }
.nav-link.active, .nav-link[aria-current="page"]{ color:#fff; }
.nav-link.active::after, .nav-link[aria-current="page"]::after{ width:100%; }

.ico{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.02); color:#D3C2BE; transition:.25s; }
.ico:hover{ color:#fff; border-color:rgba(215,25,32,.6); background:rgba(215,25,32,.1); transform:translateY(-2px); }

/* ---- language toggle (EN/ES) ---- */
.lang-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; height:42px; padding:0 .8rem;
  border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:#D3C2BE;
  font-family:'Manrope'; font-weight:800; font-size:.78rem; letter-spacing:.02em; transition:.25s; }
.lang-toggle:hover{ color:#fff; border-color:rgba(215,25,32,.6); background:rgba(215,25,32,.1); transform:translateY(-2px); }
.lang-toggle-mobile{ display:flex; align-items:center; justify-content:center; gap:.5rem; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* scroll progress bar under header */
#progress{ height:2px; background:linear-gradient(90deg,#ff4750,#8E0E14); width:0%; transition:width .1s linear; }

/* ---- process numerals ---- */
.step-num{ font-family:'Fraunces',serif; font-weight:600; font-style:italic; line-height:1;
  font-size:clamp(3rem,7vw,5.5rem); background:linear-gradient(180deg,#3a1114,#D71920 70%,#ff5a5f);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* ---- form fields ---- */
.field{ width:100%; background:#160809; border:1px solid var(--line); color:var(--cream);
  border-radius:11px; padding:.8rem .95rem; font-family:'Manrope'; font-size:.98rem; min-height:48px;
  transition:border-color .2s, box-shadow .2s; }
.field::placeholder{ color:#8a726e; }
.field:focus{ outline:none; border-color:rgba(215,25,32,.7); box-shadow:0 0 0 3px rgba(215,25,32,.18); }
select.field{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C98A86' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem; }
.form-label{ display:block; font-size:.8rem; font-weight:700; color:#D8C6C2; margin-bottom:.4rem; letter-spacing:.01em; }
.form-success{ display:none; }
.form-success.show{ display:block; }

/* ---- FAQ accordion ---- */
.faq{ border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#1B090B,#140708); overflow:hidden; }
.faq + .faq{ margin-top:.75rem; }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Archivo'; font-weight:700; font-size:1.02rem; color:#fff; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--accent); transition:transform .3s, background .3s; font-size:1.1rem; line-height:1; }
.faq[open] summary .plus{ transform:rotate(45deg); background:rgba(215,25,32,.12); }
.faq .faq-body{ padding:0 1.25rem 1.2rem; color:#CBB8B4; line-height:1.7; font-size:.96rem; }