/* ============================================================================
   PERFOZI — assets/css/pages/page-campaign.css
   Companion stylesheet for: template-parts/page-content/page-campaign.php

   Every value below is taken from perfozi-design-system.md (tokens §14,
   components §6, spacing §4, breakpoints §12). No new colours. No new fonts.
   Dark theme only.

   ── HOW TO USE ───────────────────────────────────────────────────────────────
   PART A — Layout helpers. These are the classes the campaign page needs that
            are usually NOT in global.css. Keep this part.

   PART B — Component definitions. These ARE normally in global.css already
            (.stats-bar, .sv, .proc-steps, .rc, .faq-layout, .mid-cta,
            .testi-card, .marquee-strip, .links-grid, .ideal-grid, .form-sec).
            They are reproduced here to spec so the page renders correctly even
            on a theme where one is missing.

            → If global.css already defines them, DELETE Part B.
              (Check by loading the page with Part B removed. If it looks right,
               leave it removed. Duplicate rules are harmless because the values
               match the spec, but a lean file is better.)

   No !important anywhere, so global.css always wins on shared selectors.
   ============================================================================ */


/* ============================================================================
   PART A — LAYOUT HELPERS  (keep)
   ============================================================================ */

/* --- Section scaffolding (§4) --------------------------------------------- */
.sec        { padding: var(--sp); }
.sec-sm     { padding: var(--sp-sm); }
.sd         { background: var(--black); }
.sa         { background: var(--s1); }

/* Centre the content column inside every full-bleed section (max 1400px, §4) */
.sec > *,
.sec-sm > * { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* Standard sub-paragraph under an .h2 */
.sec-sub    { color: var(--t2); font-size: 16px; max-width: 640px; margin: 14px 0 40px; }

/* --- Hero layout (§11 — 2-col: text left, feature cards right) ------------- */
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.hero-copy   { min-width: 0; }
.hero-sub    { color: var(--t1); font-size: 18px; line-height: 1.6; max-width: 540px; margin: 0 0 24px; }
.hero-pills  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.hero-cta    { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Hero right column — stacked feature/video cards */
.hero-cards  { display: grid; gap: 16px; }

/* --- Pain-point pill row (uses .tp, §6.3) --------------------------------- */
.tp-row      { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* --- CTA strip below the services grid (§11 step 4) ------------------------ */
.svc-cta     { margin-top: 32px; }

/* --- Footer link under the results grid ----------------------------------- */
.rc-foot     { margin-top: 28px; }


/* ============================================================================
   PART B — COMPONENT DEFINITIONS  (delete if already in global.css)
   ============================================================================ */

/* --- Section label / eyebrow (§6.1) --------------------------------------- */
.slbl {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fb); font-size: 11px; font-weight: 600;
  color: var(--cyan); letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 18px;
}
.slbl::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--cyan); }

/* --- Headings (§3) --------------------------------------------------------- */
.h2 { font-family: var(--fh); font-weight: 800; font-size: clamp(28px,3.5vw,48px); letter-spacing: -1.2px; line-height: 1.06; color: var(--white); margin: 0; }
.h3 { font-family: var(--fh); font-weight: 800; font-size: clamp(22px,2.5vw,32px); letter-spacing: -.8px; line-height: 1.1;  color: var(--white); }
.h2 em, .h3 em, .hero-h1 em { font-style: normal; color: var(--cyan); }

/* --- Blink dot (§6.2) ------------------------------------------------------ */
.kd { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: blink 2s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* --- Trust / tag pills (§6.3) ---------------------------------------------- */
.tp {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fb); font-size: 12px; color: var(--t2);
  background: var(--s1); border: 1px solid var(--br);
  border-radius: 100px; padding: 5px 13px;
}

/* --- Buttons (§5) ---------------------------------------------------------- */
.bp {
  background: var(--cyan); color: var(--black);
  font-family: var(--fh); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px;
  border: none; border-radius: 8px; padding: 15px 30px;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.bp:hover     { opacity: .88; transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0,212,255,.25); }
.btn-p-lg     { font-size: 15px; padding: 18px 36px; }
.bs {
  background: transparent; color: var(--t1);
  border: 1px solid var(--br); border-radius: 8px; padding: 14px 28px;
  font-family: var(--fb); font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.bs:hover     { border-color: var(--cyan); color: var(--cyan); }
.arr          { width: 15px; height: 15px; }

/* --- Hero shell + decorative effects (§10) --------------------------------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: var(--sp); overflow: hidden; }
.hero-h1 { font-family: var(--fh); font-weight: 800; font-size: clamp(38px,5vw,70px); letter-spacing: -2px; line-height: .93; color: var(--white); margin: 0 0 22px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  border: 1px solid var(--br2); border-radius: 100px; padding: 5px 16px;
  background: var(--cc); font-family: var(--fb); font-size: 11px;
  color: var(--cyan); letter-spacing: 2px; text-transform: uppercase;
}
.hero-noise::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.hero-glow {
  position: absolute; top: -120px; left: -160px; z-index: 0; pointer-events: none;
  width: 800px; height: 700px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,212,255,.06) 0%, transparent 65%);
}
.hero-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 100%);
}

/* --- Stats bar (§6.5) ------------------------------------------------------ */
.stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--br); border: 1px solid var(--br); border-radius: 14px; overflow: hidden; }
.stat      { background: var(--black); padding: 32px 24px; text-align: center; transition: all .35s cubic-bezier(.16,1,.3,1); }
.stat:hover{ background: var(--s2); }
.stat-num  { font-family: var(--fh); font-size: 36px; font-weight: 800; letter-spacing: -1px; color: var(--white); line-height: 1; }
.stat-num em { font-style: normal; color: var(--cyan); }
.stat-lbl  { font-size: 12px; color: var(--t2); margin-top: 6px; }

/* --- Service cards (§6.6) -------------------------------------------------- */
.svc-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--br); border-radius: 16px; overflow: hidden; }
.sv        { position: relative; background: var(--s2); padding: 32px 28px; transition: all .35s cubic-bezier(.16,1,.3,1); }
.sv::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.sv:hover  { background: var(--s3); transform: translateY(-4px); }
.sv:hover::before { transform: scaleX(1); }
.sv-num    { font-family: var(--fh); font-size: 10px; font-weight: 800; color: var(--t3); letter-spacing: 1px; margin-bottom: 14px; }
.sv-icon   { width: 42px; height: 42px; border-radius: 12px; background: var(--ca); border: 1px solid var(--cb); display: flex; align-items: center; justify-content: center; color: var(--cyan); margin-bottom: 16px; }
.sv-icon svg { width: 20px; height: 20px; }
.sv-title  { font-family: var(--fh); font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; color: var(--white); margin: 0 0 10px; }
.sv-desc   { font-size: 14px; color: var(--t2); line-height: 1.7; margin: 0 0 16px; }
.sv-list   { list-style: none; margin: 0; padding: 0; }
.sv-list li{ position: relative; padding: 7px 0 7px 22px; font-size: 13.5px; color: var(--t1); }
.sv-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--cyan); }

/* --- Process steps (§6.7) -------------------------------------------------- */
.proc-steps { position: relative; display: flex; flex-direction: column; gap: 18px; margin-top: 40px; }
.proc-steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 30px; width: 1px; background: linear-gradient(180deg, var(--cb), transparent); }
.proc-step  { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 22px; align-items: start; }
.proc-num   { width: 60px; height: 60px; border-radius: 50%; background: var(--s2); border: 1px solid var(--br2); display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 18px; font-weight: 800; color: var(--cyan); }
.proc-body  { background: var(--s2); border: 1px solid var(--br); border-radius: 14px; padding: 24px 28px; }
.proc-week  { font-family: var(--fb); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); margin-bottom: 8px; }
.proc-body p{ color: var(--t2); font-size: 14.5px; line-height: 1.7; margin: 8px 0 14px; }
.proc-pill  { display: inline-block; font-family: var(--fb); font-size: 11px; color: var(--cyan); background: var(--ca); border: 1px solid var(--cb); border-radius: 100px; padding: 4px 12px; }

/* --- Ideal client cards (§6.17) -------------------------------------------- */
.ideal-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 40px; }
.ideal-card { background: var(--s2); border: 1px solid var(--br); border-radius: 14px; padding: 28px; transition: all .35s cubic-bezier(.16,1,.3,1); }
.ideal-card:hover { border-color: var(--br2); transform: translateY(-3px); }
.ideal-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--ca); border: 1px solid var(--cb); display: flex; align-items: center; justify-content: center; color: var(--cyan); margin-bottom: 16px; }
.ideal-icon svg { width: 18px; height: 18px; }
.ideal-title{ font-family: var(--fh); font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--white); margin: 0 0 8px; }
.ideal-desc { font-size: 13px; color: var(--t2); line-height: 1.7; margin: 0; }

/* --- Results / metric cards (§6.8) ----------------------------------------- */
.rc-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.rc         { position: relative; background: var(--s2); border: 1px solid var(--br); border-radius: 16px; padding: 28px; overflow: hidden; transition: all .35s cubic-bezier(.16,1,.3,1); }
.rc:hover   { border-color: var(--br2); transform: translateY(-5px); background: linear-gradient(135deg, var(--s2), rgba(0,212,255,.05)); }
.rc-industry{ font-family: var(--fb); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--t3); margin-bottom: 14px; }
.rc-metric  { font-family: var(--fh); font-size: 50px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--white); }
.rc-metric em { font-style: normal; color: var(--cyan); }
.rc-metric-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--t3); margin: 8px 0 16px; }
.rc-desc    { font-size: 14px; color: var(--t1); line-height: 1.7; border-top: 1px solid var(--br); padding-top: 16px; margin: 0 0 16px; }
.rc-desc strong { color: var(--white); }
.rc-tags    { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Mid-page CTA (§6.10) -------------------------------------------------- */
.mid-cta {
  position: relative; overflow: hidden; padding: 80px 5%;
  background: linear-gradient(135deg, var(--s2), rgba(0,212,255,.05));
  border-top: 1px solid var(--br2); border-bottom: 1px solid var(--br2);
}
.mid-cta::before { content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 700px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(0,212,255,.06) 0%, transparent 65%); }
.mid-cta-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; text-align: center; }
.mid-cta-inner .slbl { justify-content: center; }
.mid-cta-inner .hero-cta { justify-content: center; }
.mid-cta-h   { font-family: var(--fh); font-size: clamp(24px,3.8vw,48px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; color: var(--white); margin: 8px 0 14px; }
.mid-cta-h em{ font-style: normal; color: var(--cyan); }
.mid-cta-sub { font-size: 16px; color: var(--t1); max-width: 560px; margin: 0 auto 28px; }

/* --- FAQ accordion (§6.9) -------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq-aside  { position: sticky; top: 90px; }
.faq-list   { display: flex; flex-direction: column; gap: 2px; }
.faq-item   { background: var(--s2); border: 1px solid var(--br); border-radius: 12px; overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--white);
  padding: 20px 24px; transition: background .25s ease;
}
.faq-q:hover { background: var(--s3); }
.faq-toggle {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ca); border: 1px solid var(--cb); color: var(--cyan);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--cyan); color: var(--black); }
.faq-a      { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 340px; }
.faq-a p    { padding: 0 24px 22px; margin: 0; font-family: var(--fb); font-size: 15.5px; color: var(--t1); line-height: 1.7; }

/* --- Testimonial card (§6.14) ---------------------------------------------- */
.testi-card  { background: var(--s2); border: 1px solid var(--br); border-radius: 16px; padding: 32px; max-width: 860px; margin: 0 auto; transition: all .35s cubic-bezier(.16,1,.3,1); }
.testi-card:hover { border-color: var(--br2); transform: translateY(-4px); }
.testi-quote { font-family: var(--fh); font-size: 56px; line-height: .6; color: rgba(0,212,255,.2); }
.testi-metric{ font-family: var(--fh); font-size: 13px; font-weight: 800; color: var(--cyan); margin: 8px 0 14px; }
.testi-body  { font-family: var(--fb); font-size: 14px; color: var(--t1); line-height: 1.75; margin: 0 0 22px; }
.testi-author{ display: flex; align-items: center; gap: 12px; }
.testi-avatar{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--cyan); color: var(--black); display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 13px; font-weight: 800; }
.testi-meta  { display: flex; flex-direction: column; line-height: 1.35; }
.testi-name  { font-family: var(--fh); font-size: 14px; font-weight: 800; color: var(--white); }
.testi-role  { font-size: 11px; color: var(--t3); }

/* --- Marquee / ticker (§6.12) ---------------------------------------------- */
.marquee-strip { border-top: 1px solid var(--br); border-bottom: 1px solid var(--br); background: var(--s1); padding: 20px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: ticker 30s linear infinite; }
.marquee-item  { font-family: var(--fh); font-size: 15px; font-weight: 800; color: var(--t3); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.marquee-item::before { content: "\2726"; color: var(--cyan); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- Related links grid (§6.13) -------------------------------------------- */
.links-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--br); border-radius: 12px; overflow: hidden; }
.link-card  { display: block; background: var(--s2); padding: 28px 24px; text-decoration: none; transition: all .35s cubic-bezier(.16,1,.3,1); }
.link-card:hover { background: var(--s3); transform: translateY(-3px); }
.link-lbl   { font-family: var(--fb); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); margin-bottom: 10px; }
.link-title { font-family: var(--fh); font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; color: var(--white); margin-bottom: 8px; }
.link-desc  { font-size: 13px; color: var(--t2); line-height: 1.6; margin: 0 0 12px; }
.link-arrow { display: inline-block; color: var(--cyan); font-size: 16px; transition: transform .3s ease; }
.link-card:hover .link-arrow { transform: translate(4px,-4px); }

/* --- Form section (§6.18) --------------------------------------------------- */
.form-sec   { padding: var(--sp); }
.form-grid  { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--br); border-radius: 18px; overflow: hidden; }
.form-info  { position: relative; background: var(--s1); padding: 48px; overflow: hidden; }
.form-info::before { content: ""; position: absolute; top: -100px; right: -120px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(0,212,255,.10) 0%, transparent 65%); }
.form-info > * { position: relative; z-index: 1; }
.form-info-sub { font-size: 15.5px; color: var(--t2); line-height: 1.7; margin: 14px 0 24px; }
.form-promises { list-style: none; margin: 0; padding: 0; }
.form-promises li { position: relative; padding: 10px 0 10px 28px; font-size: 15px; color: var(--t1); border-bottom: 1px solid var(--br); }
.form-promises li:last-child { border-bottom: 0; }
.form-promises li::before { content: "\2713"; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.form-panel { background: var(--s2); padding: 48px; }
.form-trust { margin-top: 18px; font-family: var(--fb); font-size: 12px; color: var(--t3); text-align: center; }

/* Contact Form 7 fields, themed to the design system (§6.18) */
.form-panel .wpcf7-form-control-wrap { display: block; margin-bottom: 18px; }
.form-panel label { display: block; font-family: var(--fb); font-size: 11px; font-weight: 600; color: var(--t2); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; }
.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel select,
.form-panel textarea {
  width: 100%; background: var(--s3); border: 1px solid var(--br); border-radius: 8px;
  padding: 14px 15px; color: var(--white); font-family: var(--fb); font-size: 15px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-panel input::placeholder, .form-panel textarea::placeholder { color: var(--t3); }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.08);
}
.form-panel input[type="submit"],
.form-panel .wpcf7-submit {
  width: 100%; background: var(--cyan); color: var(--black);
  font-family: var(--fh); font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px;
  border: none; border-radius: 8px; padding: 18px 36px; cursor: pointer;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.form-panel .wpcf7-submit:hover { opacity: .88; transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0,212,255,.25); }
.form-panel .wpcf7-not-valid-tip { color: #FF3B30; font-size: 12px; margin-top: 6px; }

/* --- Scroll reveal (§9) ----------------------------------------------------- */
.anim-up { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.anim-up.is-visible { opacity: 1; transform: none; }


/* ============================================================================
   RESPONSIVE (§12)
   ============================================================================ */
@media (max-width: 1100px) {
  .svc-grid   { grid-template-columns: repeat(2,1fr); }
  .ideal-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-cards { grid-template-columns: repeat(2,1fr); }
  .stats-bar  { grid-template-columns: repeat(2,1fr); }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-aside  { position: static; }
  .form-grid  { grid-template-columns: 1fr; }
  .links-grid { grid-template-columns: repeat(2,1fr); }
  .rc-grid    { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .sec, .form-sec { padding: var(--sp-sm); }
  .hero        { padding: var(--sp-sm); min-height: auto; }
  .hero-cards,
  .svc-grid, .ideal-grid, .rc-grid, .links-grid { grid-template-columns: 1fr; }
  .proc-step   { grid-template-columns: 48px 1fr; gap: 16px; }
  .proc-steps::before { left: 24px; }
  .proc-num    { width: 48px; height: 48px; font-size: 16px; }
  .form-info, .form-panel { padding: 32px 24px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .anim-up { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .kd { animation: none; }
}