/* ==========================================================================
   Template: Digital Marketing Agency — signature design (v2).
   Concept: a "launch control" console. Several coordinated systems running
   at once, not one isolated effect: an ambient particle network, a custom
   magnetic cursor that reacts to what it's over, a CRT scanline texture,
   an RGB-glitch headline word, and a chart panel that tilts in 3D with a
   live blinking data indicator and floating stat pills. Own palette.
   ========================================================================== */

.agency-page {
  --a-void: #030405;
  --a-panel: #0a0e10;
  --a-panel-2: #0f1518;
  --a-line: rgba(198, 255, 61, 0.14);
  --a-lime: #c6ff3d;
  --a-lime-dim: #8fbf3f;
  --a-ink: #f2f5ef;
  --a-ink-dim: #8a9488;
  --a-ink-on-btn: #04150a;

  background: var(--a-void);
  color: var(--a-ink);
  font-family: "JetBrains Mono", monospace;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Custom cursor only on devices with a real pointer — never hide the
   system cursor on touch, and never leave visitors without any cursor. */
@media (hover: hover) and (pointer: fine) {
  .agency-page { cursor: none; }
  .agency-page .cursor-dot,
  .agency-page .cursor-ring { display: block; }
}

#agency-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.agency-spotlight {
  position: fixed; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 255, 61, 0.06), transparent 70%);
  pointer-events: none; z-index: 1; transform: translate(-50%, -50%);
}

.cursor-dot {
  display: none;
  position: fixed; width: 8px; height: 8px; border-radius: 50%; background: var(--a-lime);
  pointer-events: none; z-index: 50; transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--a-lime);
}
.cursor-ring {
  display: none;
  position: fixed; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(198, 255, 61, 0.5);
  pointer-events: none; z-index: 50; transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

.agency-scanline {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(198, 255, 61, 0.03) 50%, transparent);
  background-size: 100% 4px;
  opacity: 0.4;
}

.agency-wrap { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; padding: 32px 24px 48px; }

.agency-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 56px; font-family: "Space Grotesk", var(--font-body); flex-wrap: wrap;
}
.agency-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.agency-logo-mark { width: 9px; height: 9px; background: var(--a-lime); transform: rotate(45deg); box-shadow: 0 0 10px var(--a-lime); flex-shrink: 0; }
.agency-sysbar {
  font-size: 10px; letter-spacing: 0.12em; color: var(--a-lime-dim); text-transform: uppercase;
  border: 1px solid var(--a-line); padding: 7px 14px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.agency-sysbar .led { width: 6px; height: 6px; border-radius: 50%; background: var(--a-lime); animation: agency-blink 1.4s infinite; flex-shrink: 0; }
@keyframes agency-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.agency-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; }
@media (max-width: 900px) { .agency-hero { grid-template-columns: minmax(0, 1fr); } }
.agency-content { min-width: 0; }

.agency-eyebrow {
  font-size: 11px; letter-spacing: 0.26em; color: var(--a-lime); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.agency-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--a-lime); flex-shrink: 0; }

.agency-headline {
  font-family: "Space Grotesk", var(--font-body); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 18px;
}
.agency-headline .glitch { position: relative; color: var(--a-lime); display: inline-block; }
.agency-headline .glitch::before,
.agency-headline .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;
  background: var(--a-void); clip-path: inset(0 0 100% 0);
}
.agency-headline .glitch::before { color: #ff3d81; animation: agency-glitch-top 4.5s infinite linear; }
.agency-headline .glitch::after { color: #3dd6ff; animation: agency-glitch-bot 4.5s infinite linear; }
@keyframes agency-glitch-top {
  0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  93% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, -1px); }
  95% { clip-path: inset(60% 0 5% 0); transform: translate(2px, 1px); }
  97% { clip-path: inset(30% 0 40% 0); transform: translate(-1px, 0); }
}
@keyframes agency-glitch-bot {
  0%, 92%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0, 0); }
  93% { clip-path: inset(50% 0 20% 0); transform: translate(2px, 1px); }
  95% { clip-path: inset(5% 0 70% 0); transform: translate(-2px, -1px); }
  97% { clip-path: inset(40% 0 30% 0); transform: translate(1px, 0); }
}

.agency-sub { font-family: "Space Grotesk", var(--font-body); color: var(--a-ink-dim); font-size: 14.5px; line-height: 1.7; max-width: 460px; margin-bottom: 30px; }

/* Countdown ------------------------------------------------------------- */

.agency-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 400px; margin-bottom: 26px; }
.agency-unit {
  background: linear-gradient(180deg, var(--a-panel-2), var(--a-panel));
  border: 1px solid var(--a-line); border-radius: 10px;
  padding: 14px 6px; text-align: center; position: relative; overflow: hidden; min-width: 0;
}
.agency-unit::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--a-lime), transparent);
  animation: agency-sweep 2.6s linear infinite;
}
@keyframes agency-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.agency-num { font-size: clamp(20px, 3.6vw, 26px); font-weight: 600; color: var(--a-lime); line-height: 1; font-variant-numeric: tabular-nums; }
.agency-lbl { margin-top: 5px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-ink-dim); }

/* Form -------------------------------------------------------------------- */

.agency-form { display: flex; max-width: 400px; }
.agency-form .field { flex: 1; min-width: 0; }
.agency-form input {
  width: 100%; min-height: 46px;
  background: var(--a-panel-2); border: 1px solid var(--a-line); border-right: none;
  border-radius: 8px 0 0 8px; padding: 0 16px; color: var(--a-ink); font-size: 12.5px;
  font-family: "JetBrains Mono", monospace;
}
.agency-form input::placeholder { color: var(--a-ink-dim); }
.agency-form .btn {
  border: none; border-radius: 0 8px 8px 0; padding: 0 24px; min-height: 46px;
  background: var(--a-lime); color: var(--a-ink-on-btn); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.08em; font-family: "Space Grotesk", var(--font-body); text-transform: uppercase;
  flex-shrink: 0; transition: filter 0.2s ease;
}
.agency-form .btn:hover { filter: brightness(1.15); }

/* Chart panel — grid texture, tilts on hover, floating stat pills -------- */

.chart-stage {
  background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 18px;
  padding: 24px 20px 16px; position: relative; overflow: visible;
  transition: transform 0.15s ease-out; will-change: transform; min-width: 0;
}
.chart-stage::before { border-radius: 18px; }
.chart-stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--a-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-line) 1px, transparent 1px);
  background-size: 28px 28px; opacity: 0.35;
}
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; position: relative; font-family: "Space Grotesk", var(--font-body); }
.chart-head .t1 { font-size: 10.5px; color: var(--a-ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.chart-head .t2 { font-size: 19px; font-weight: 700; color: var(--a-lime); }
.chart-area { position: relative; height: 190px; display: flex; align-items: flex-end; gap: 12px; }
.bar {
  flex: 1; background: linear-gradient(180deg, var(--a-lime), var(--a-lime-dim));
  border-radius: 5px 5px 0 0; position: relative; box-shadow: 0 0 18px rgba(198, 255, 61, 0.35);
  animation: agency-grow 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform-origin: bottom;
}
.bar:nth-child(1) { height: 34%; animation-delay: 0.05s; background: linear-gradient(180deg, #3a4a2e, #26301f); box-shadow: none; }
.bar:nth-child(2) { height: 48%; animation-delay: 0.15s; background: linear-gradient(180deg, #5a6b45, #3a4a2e); box-shadow: none; }
.bar:nth-child(3) { height: 58%; animation-delay: 0.25s; }
.bar:nth-child(4) { height: 78%; animation-delay: 0.35s; }
.bar:nth-child(5) { height: 100%; animation-delay: 0.45s; }
@keyframes agency-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.node-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--a-lime);
  box-shadow: 0 0 14px var(--a-lime); top: 2px; right: 0; animation: agency-blink 1.6s infinite;
}
.chart-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 9px; color: var(--a-ink-dim); letter-spacing: 0.08em; position: relative; }

.pill {
  position: absolute; background: rgba(10, 14, 16, 0.9); border: 1px solid var(--a-line);
  border-radius: 999px; padding: 7px 13px; font-size: 10px; display: flex; align-items: center; gap: 7px;
  font-family: "Space Grotesk", var(--font-body); animation: agency-bob 4s ease-in-out infinite;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-lime); box-shadow: 0 0 8px var(--a-lime); flex-shrink: 0; }
.pill-a { top: 38%; left: -14px; animation-delay: 0s; }
.pill-b { bottom: -14px; right: 26px; animation-delay: 1.5s; }
@keyframes agency-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) { .pill { display: none; } }

.agency-footer { text-align: center; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--a-line); }
.agency-copyright { font-size: 10.5px; color: var(--a-ink-dim); letter-spacing: 0.05em; }

@media (prefers-reduced-motion: reduce) {
  .agency-page *,
  .agency-page *::before,
  .agency-page *::after {
    animation: none !important;
    transition: none !important;
  }
}