/* ─────────────────────────────────────────────
   Cactus IT Solutions — Shared Stylesheet
   #000 bg · #0d0d0d cards · #191919 borders
   rgb(119,119,119) muted · #fff text · Inter
   Green cactus accent: #2ecc71 / #1a7a42
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:      #000000;
  --card:    #0d0d0d;
  --border:  #191919;
  --white:   #ffffff;
  --muted:   rgb(119,119,119);
  --muted-a: rgba(255,255,255,0.08);
  --muted-b: rgba(255,255,255,0.20);
  --green:   #2ecc71;
  --green-dark: #1a7a42;
  --green-glow: rgba(46,204,113,0.15);
  --green-subtle: rgba(46,204,113,0.06);
}
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0;}
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.6;
  overflow-x:clip; /* clip instead of hidden — prevents horizontal scroll without breaking position:sticky on mobile Chrome */
  /* Subtle radial glow behind main content area */
  background-image: radial-gradient(ellipse 600px 400px at 75% 200px, var(--green-subtle), transparent),
    radial-gradient(ellipse 400px 600px at 85% 900px, rgba(46,204,113,0.03), transparent);
  background-attachment: fixed;
}

/* Ensure images never overflow containers */
img { max-width: 100%; height: auto; }

/* ── NAV ── */
nav {
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:center;
  height:64px; background:rgba(0,0,0,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  width:960px; max-width:100%; padding:0 20px;
  display:flex; align-items:center;
}
.nav-logo { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--white); flex:1 0 0; overflow:hidden; }
.nav-logo svg { width:30px; height:30px; flex-shrink:0; }
.nav-logo-text { font-size:15px; font-weight:700; letter-spacing:-0.02em; white-space:nowrap; }
.nav-center { flex:2 0 0; display:flex; align-items:center; justify-content:center; gap:15px; overflow:visible; }
.nav-center a { text-decoration:none; color:var(--muted); font-size:15px; font-weight:500; letter-spacing:-0.01em; line-height:1em; white-space:pre; transition:color .15s; }
.nav-center a:hover, .nav-center a.active { color:var(--white); }
.nav-right { flex:1 0 0; display:flex; align-items:center; justify-content:flex-end; gap:10px; overflow:hidden; }
.nav-phone { text-decoration:none; color:var(--muted); font-size:13px; font-weight:500; letter-spacing:-0.01em; white-space:nowrap; transition:color .15s; }
.nav-phone:hover { color:var(--white); }
.nav-portal { text-decoration:none; color:var(--muted); font-size:13px; font-weight:500; letter-spacing:-0.01em; white-space:nowrap; transition:color .15s; }
.nav-portal:hover { color:var(--green); }
.nav-cta {
  display:inline-flex; align-items:center;
  background:var(--green); color:#000 !important;
  padding:0 12px; height:30px; border-radius:100px;
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
  text-decoration:none; white-space:pre; user-select:none;
  transition:background .15s;
}
.nav-cta:hover { background:#27ae60; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; margin-left:auto; }
.hamburger span { width:20px; height:1.5px; background:var(--white); border-radius:2px; }
.mobile-menu {
  display:none; position:sticky; top:64px; z-index:99;
  background:rgba(0,0,0,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  flex-direction:column; padding:8px 20px 20px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; padding:14px 0; border-bottom:1px solid var(--border); letter-spacing:-0.01em; transition:color .15s; }
.mobile-menu a.active { color:var(--green); font-weight:600; }
.mobile-menu a:last-child { border:none; }
.mobile-menu a:hover { color:var(--white); }

/* ── LAYOUT ── */
section {padding: 27px 20px;}
.container { width:960px; max-width:100%; margin:0 auto; }

/* ── TYPOGRAPHY ── */
.eyebrow { font-size:15px; font-weight:700; letter-spacing:-0.01em; line-height:1em; color:var(--green); }
.title { font-size:32px; font-weight:700; letter-spacing:-0.03em; line-height:1em; color:var(--white); white-space:pre-wrap; word-break:break-word; word-wrap:break-word; }
.title .dim { color:var(--muted); }
.body-text { font-size:22px; font-weight:500; letter-spacing:-0.01em; color:var(--muted); line-height:1.4; }

/* Green accent text utility */
.green-accent { color:var(--green); }

/* ── BUTTONS ── */
.btn-white {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green); color:#000;
  height:40px; padding:0 16px; border-radius:10px;
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
  text-decoration:none; border:none; cursor:pointer;
  will-change:transform; transition:background .15s;
}
.btn-white:hover { background:#27ae60; }

/* ══════════════════════════════════════════════
   CTA MULTI-STAGE HOVER (JS-driven stages)
   Border Draw → Mana Fill → Trianglify Hover → Fizzy + Cactus
   ══════════════════════════════════════════════ */

/* ── WRAPPER ── */
.cta-btn-wrap {
  position:relative; display:inline-block;
}

/* ── BUTTON (in CTA context) ── */
.cta-btn-wrap .btn-white {
  position:relative; overflow:visible;
  background:transparent; color:var(--green);
  border:2px solid transparent;
  border-radius:10px; z-index:5;
  transition:color 0.3s ease, text-shadow 0.3s ease;
}
.cta-btn-wrap .btn-white.txt-dark {
  color:#000; text-shadow:0 0 8px rgba(46,204,113,0.3);
}

/* ── STAGE 1: BORDER DRAW (SVG sized to button via JS) ── */
.cta-border-svg {
  position:absolute; top:-2px; left:-2px;
  pointer-events:none; z-index:6;
}
.cta-border-svg rect {
  fill:none; stroke:var(--green); stroke-width:2.5;
  stroke-linecap:round;
}
.cta-border-svg rect.drawing {
  animation:cta-border-draw 0.8s ease-out forwards;
}
@keyframes cta-border-draw {
  from { stroke-dashoffset:var(--perim); }
  to   { stroke-dashoffset:0; }
}

/* ── STAGE 2: MANA FILL (trianglify rises from bottom) ── */
.cta-mana {
  position:absolute; inset:0; border-radius:10px;
  overflow:hidden; z-index:0; pointer-events:none;
}
.cta-mana-fill {
  position:absolute; left:0; right:0; bottom:0; height:100%;
  transform:scaleY(0); transform-origin:bottom;
}
.cta-mana-fill.rising {
  animation:cta-mana-rise 1.2s ease-out forwards;
}
@keyframes cta-mana-rise {
  from { transform:scaleY(0); }
  to   { transform:scaleY(1); }
}

/* ── STAGE 2b: TRIANGLIFY SHIMMER (continuous hover pulse) ── */
.cta-mana-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,0.18) 50%,transparent 75%);
  background-size:250% 100%; opacity:0;
}
.cta-mana-fill.shimmer::after {
  animation:cta-tri-shimmer 1.8s ease-in-out infinite;
}
@keyframes cta-tri-shimmer {
  0%   { opacity:1; background-position:250% 0; }
  100% { opacity:1; background-position:-250% 0; }
}
/* second trianglify pattern overlaid with different palette, fades in */
.cta-tri-overlay {
  position:absolute; inset:0; border-radius:10px;
  overflow:hidden; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 0.6s ease;
}
.cta-tri-overlay.active { opacity:1; }
.cta-tri-overlay svg { width:100%; height:100%; display:block; }

/* ── STAGE 3a: FIZZY PARTICLES ── */
.cta-fizz {
  position:absolute; inset:0; pointer-events:none; z-index:7;
  overflow:visible;
}
.cta-fizz-dot {
  position:absolute; border-radius:50%;
  opacity:0; will-change:transform,opacity;
}
.cta-fizz-dot.active {
  animation:cta-fizz-scatter var(--dur) ease-out var(--delay) infinite;
}
@keyframes cta-fizz-scatter {
  0%  { transform:translate(0,0) scale(1); opacity:0.9; }
  40% { opacity:1; }
  100%{ transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}

/* ── STAGE 3b: CACTUS GARDEN ── */
.cta-plant {
  position:absolute; bottom:100%; pointer-events:none; z-index:8;
  transform:scaleY(0); transform-origin:bottom center; opacity:0;
}
.cta-plant.growing {
  animation:cta-plant-grow 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes cta-plant-grow {
  0%   { transform:scaleY(0); opacity:0; }
  60%  { transform:scaleY(1.15); opacity:1; }
  100% { transform:scaleY(1); opacity:1; }
}
.cta-plant.swaying {
  opacity:1 !important;
  transform:scaleY(1);
  animation:cta-sway 2.5s ease-in-out infinite;
}
.cta-plant.swaying:nth-child(even) {
  animation-direction:reverse;
}
@keyframes cta-sway {
  0%,100% { transform:scaleY(1) rotate(0deg); }
  50%     { transform:scaleY(1) rotate(3deg); }
}

/* ── GLOW PULSE (stage 3+) ── */
.cta-btn-wrap.glowing {
  animation:cta-glow-pulse 2s ease-in-out infinite;
}
@keyframes cta-glow-pulse {
  0%,100% { filter:drop-shadow(0 0 6px rgba(46,204,113,0.3)); }
  50%     { filter:drop-shadow(0 0 20px rgba(46,204,113,0.6)); }
}
.btn-dim {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--muted-a); color:var(--white);
  height:40px; padding:0 16px; border-radius:10px;
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
  text-decoration:none; border:none; cursor:pointer;
  will-change:transform; transition:background .15s;
}
.btn-dim:hover { background:var(--muted-b); }

/* ── PAGE HEADER ── */
.page-header { padding:64px 20px 0; display:flex; justify-content:center; }
.page-header .container { display:flex; flex-direction:column; gap:0; padding:40px 0; overflow:visible; }
.page-header .title { font-size:40px; letter-spacing:-0.04em; }
.page-header .title-dim { font-size:40px; font-weight:700; letter-spacing:-0.04em; line-height:1em; color:var(--muted); white-space:pre-wrap; }
.page-header .body-text { margin-top:40px; font-size:32px; font-weight:700; letter-spacing:-0.03em; color:var(--muted); }

/* ── CARD ── */
.card {
  background:var(--card); border-radius:24px;
  padding:20px; overflow:visible; position:relative;
  border:1px solid var(--border);
  transition:border-color .2s;
}
.card:hover { border-color:rgba(46,204,113,0.2); }

/* ── TIER CARDS ── */
.tiers-row { display:flex; gap:20px; width:100%; align-items:stretch; }
.tier-card {
  background:var(--card); border-radius:24px; flex:1 0 0;
  padding:20px; display:flex; flex-direction:column; gap:20px;
  overflow:visible; position:relative;
  border:1px solid var(--border);
  transition:border-color .2s;
}
.tier-card:hover { border-color:rgba(46,204,113,0.2); }
.tier-name { font-size:15px; font-weight:550; letter-spacing:-0.01em; line-height:1em; color:var(--muted); display:flex; align-items:center; gap:6px; }
.tier-name span[class*="--"] { width:20px; height:20px; flex-shrink:0; }
.tier-price { font-size:32px; font-weight:700; letter-spacing:-0.02em; line-height:1em; color:var(--white); }
.tier-features { display:flex; flex-direction:column; gap:5px; flex:1; overflow:hidden; }
.feat-row { display:flex; align-items:center; gap:10px; width:100%; }
.feat-check { width:16px; height:16px; flex-shrink:0; }
/* Icon spans used as bullet points in feat-rows — match size of SVG checks, close the gap */
.feat-row > span[class*="--"] { width:16px; height:16px; flex-shrink:0; }
.feat-text { font-size:15px; font-weight:500; letter-spacing:-0.01em; line-height:1.3em; color:var(--muted); flex:1 0 0; width:1px; }

/* ── CTA BAND ── */
.cta-band {
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:15px; height:342px; text-align:center; padding:0 20px;
}
.cta-band .title { font-size:32px; letter-spacing:-0.03em; }
.cta-band .body-text { font-size:22px; max-width:280px; line-height:1.1em; }

/* ── FOOTER (overhauled) ── */
footer {
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg) 0%, #020c05 100%);
}
.footer-inner {
  width:960px; max-width:100%; margin:0 auto;
  padding:60px 20px 40px;
  display:flex; flex-direction:column; gap:40px;
}
.footer-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
}
.footer-brand {
  display:flex; flex-direction:column; gap:12px; max-width:280px;
}
.footer-brand-name {
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; letter-spacing:-0.02em; color:var(--white);
}
.footer-brand p {
  font-size:13px; color:var(--muted); letter-spacing:-0.01em; line-height:1.55;
}
.footer-brand a {
  font-size:13px; color:var(--green); text-decoration:none; font-weight:500; transition:color .15s;
}
.footer-brand a:hover { color:#27ae60; }
.footer-cols { display:flex; gap:48px; flex-wrap:wrap; }
.footer-col { display:flex; flex-direction:column; gap:10px; min-width:120px; }
.footer-col-title { font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--green); margin-bottom:4px; }
.footer-col a { font-size:14px; font-weight:500; letter-spacing:-0.01em; color:var(--muted); text-decoration:none; transition:color .15s; }
.footer-col a:hover { color:var(--green); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:24px; border-top:1px solid var(--border);
}
.footer-copy {
  font-size:12px; color:var(--muted); letter-spacing:-0.01em;
}
.footer-bottom-links {
  display:flex; gap:20px;
}
.footer-bottom-links a {
  font-size:12px; color:var(--muted); text-decoration:none; transition:color .15s;
}
.footer-bottom-links a:hover { color:var(--green); }

/* Legacy footer support (remove spacer) */
.footer-logo-col { flex-shrink:0; }
.footer-spacer { display:none; }

/* ── INLINE SVG LOGO ── */
.logo-svg { display:block; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.fu { animation:fadeUp .5s ease forwards; opacity:0; }
.fu.d1 { animation-delay:.06s; }
.fu.d2 { animation-delay:.13s; }
.fu.d3 { animation-delay:.20s; }
.fu.d4 { animation-delay:.28s; }

/* ── SCROLL REVEAL (shared across all pages) ── */
.digi-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  filter: blur(4px);
}
.digi-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Stagger children when cards are in a grid */
.digi-reveal-stagger:nth-child(1) { transition-delay: 0s; }
.digi-reveal-stagger:nth-child(2) { transition-delay: 0.08s; }
.digi-reveal-stagger:nth-child(3) { transition-delay: 0.16s; }
.digi-reveal-stagger:nth-child(4) { transition-delay: 0.24s; }
.digi-reveal-stagger:nth-child(5) { transition-delay: 0.32s; }
.digi-reveal-stagger:nth-child(6) { transition-delay: 0.40s; }
.digi-reveal-stagger:nth-child(7) { transition-delay: 0.48s; }
.digi-reveal-stagger:nth-child(8) { transition-delay: 0.56s; }

/* ── RESPONSIVE IMAGE HELPER ── */
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── RESPONSIVE ── */
@media (max-width:809px) {
  .nav-center, .nav-right { display:none; }
  .hamburger { display:flex; }
  .nav-inner { padding:0 20px; }
  .nav-logo img { width:36px !important; height:36px !important; }
  .tiers-row { flex-direction:column; }
  .page-header .title, .page-header .title-dim { font-size:28px; }
  .page-header .body-text { font-size:22px; }
  .title { font-size:24px; }
  .body-text { font-size:17px; }
  .cta-band { height:300px; }
  .cta-band .title { font-size:24px; }
  .cta-band .body-text { font-size:17px; max-width:260px; }

  /* Footer mobile */
  .footer-top { flex-direction:column; gap:32px; }
  .footer-brand { max-width:100%; }
  .footer-cols { gap:32px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:12px; }
}
.az-banner.digi-reveal.revealed {
  background-image: url("images/phxMetro.png") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ai-style-change-1 {
  div& {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    padding: 20px 40px;
    box-sizing: border-box;
  }
}
.ai-style-change-2 {
  .az-banner p& {
    font-size: 36px;
    font-weight: bold;
    color: white;
    margin: 0px;
    padding: 0px;
    /* text-transform: uppercase; */
    text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
  }
}
.ai-style-change-3 {
  .az-banner p& {
    font-size: 20px;
    font-weight: normal;
    color: white;
    margin: 0px;
    padding: 0px;
    text-align: left;
    text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 3px;
  }
}