/* Core variables - using home page's better colors */
:root{
  --bg:#0b1020;
  --panel:#0e1429;
  --panel2:#111831;
  --line:rgba(255,255,255,.1);
  --text:#eaf0ff;
  --text-dim:#a9b4d6;
  --accent:#5cc4ff;
  --accent2:#8c7bff;
  --success:#8cffa8;
  --warning:#ffb347;
  --error:#ff6b85;
  --grad:linear-gradient(90deg,#5cc4ff,#9c7bff,#ff6ea4);
  
  /* Compatibility aliases */
  --ink:var(--text);
  --muted:var(--text-dim);
  --cta:#ff3b3b;
  --ok:#2ecc71;
}

/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Typography */
h1{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h2{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:1rem}
h3{font-size:1.5rem;font-weight:600;margin-bottom:0.75rem}
p{color:var(--text-dim);margin-bottom:1rem;font-size:1.1rem}
.lead{font-size:1.25rem;color:var(--text)}
@media (max-width:768px){h1{font-size:2.5rem}h2{font-size:2rem}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700;background:var(--panel);transition:.15s transform ease}
.btn:hover{transform:translateY(-1px)}
.btn-cta{background:var(--cta);border-color:transparent;color:#fff}
.btn-ghost{background:transparent}

/* Header */
header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#15224d,#0f1736);border-bottom:1px solid var(--line);backdrop-filter:saturate(120%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:34px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.brand span{font-weight:800}
.links{display:flex;gap:18px;align-items:center}
.links a{text-decoration:none;font-weight:600;opacity:.95}
.links a:hover{text-decoration:underline}
.menu{display:none}

/* Dropdown */
.dropdown{position:relative;display:inline-block}
.dropdown-toggle{display:flex;align-items:center;gap:4px;text-decoration:none;font-weight:600;opacity:.95}
.dropdown-toggle:hover{text-decoration:underline}
.dropdown-toggle .arrow{font-size:10px;transition:transform .2s ease}
.dropdown:hover .arrow{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:100;padding:8px 0}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:8px 16px;text-decoration:none;font-weight:500;opacity:.9;border-radius:4px;margin:0 8px}
.dropdown-menu a:hover{background:var(--line);opacity:1;text-decoration:none}

@media (max-width:900px){.links{display:none}.menu{display:inline-flex}}

/* Hero */
.hero{padding:80px 0;background:radial-gradient(1000px 700px at 10% -10%, rgba(111,211,255,.08), transparent 40%),radial-gradient(800px 500px at 110% 10%, rgba(140,255,181,.08), transparent 35%),var(--bg)}
.hero-content{max-width:800px;text-align:center;margin:0 auto}
.hero h1{margin-bottom:1.5rem}
.hero p{font-size:1.25rem;margin-bottom:2rem}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Features grid */
.features{padding:40px 0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px;margin-top:48px}
.feature-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px;position:relative;overflow:hidden}
.feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.feature-icon{width:48px;height:48px;background:var(--grad);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:24px}
.feature-card h3{color:var(--text)}
.feature-card p{color:var(--text-dim)}

/* Two column sections */
.two-col{padding:80px 0}
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.two-col-content h2{margin-bottom:1.5rem}
.two-col-visual{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px;text-align:center;position:relative}
.two-col-visual::before{content:"";position:absolute;inset:8px;border:1px dashed var(--line);border-radius:8px;opacity:0.5}
.visual-placeholder{color:var(--text-dim);font-style:italic}
@media (max-width:900px){.two-col-grid{grid-template-columns:1fr;gap:32px}}

/* Benefit list */
.benefit-list{list-style:none;margin:24px 0}
.benefit-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:16px;background:var(--panel2);border-radius:8px;border-left:3px solid var(--accent)}
.benefit-list li::before{content:"✓";color:var(--success);font-weight:bold;font-size:18px}

/* Stats */
.stats{padding:80px 0;background:var(--panel)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;text-align:center}
.stat{padding:24px}
.stat-number{font-size:3rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.stat-label{color:var(--text-dim);font-weight:600}

/* CTA section */
.cta{padding:80px 0;text-align:center;background:var(--panel)}
.cta h2{margin-bottom:1rem}
.cta p{margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}

/* Footer */
footer{background:var(--panel2);border-top:1px solid var(--line);padding:32px 0;text-align:center;color:var(--text-dim)}

/* Utility bar */
.util{background:var(--grad);color:white;font-size:14px;font-weight:500;text-align:center;padding:8px 0}
.util a{color:white;text-decoration:underline}

/* Animations */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-art .frame{animation:float 9s ease-in-out infinite}


.pillar {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
  animation: riseFade .7s 
ease both;
}

.pillar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--p1, #5cc4ff), var(--p2, #9c7bff));
  filter: saturate(115%);
  opacity: .85;
  animation: barShift 8s 
ease-in-out infinite;
}

.pillars {
  display: grid
;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pillar:nth-child(1) {
  --p1: #66d1ff;
  --p2: #7aa8ff;
  animation-delay: .02s;
}

.pillar:nth-child(2) {
  --p1: #7aa8ff;
  --p2: #b08dff;
  animation-delay: .08s;
}


.pillar:nth-child(3) {
  --p1: #ff89c2;
  --p2: #ffb4d6;
  animation-delay: .14s;
}

.pillar:nth-child(4) {
  --p1: #ffb86b;
  --p2: #ffd07a;
  animation-delay: .20s;
}

 /* Use the same modern styling from home page */
 .hero{position:relative;padding:72px 0 40px;background:radial-gradient(1000px 700px at 10% -10%, rgba(255,140,0,.08), transparent 40%),radial-gradient(800px 500px at 110% 10%, rgba(34,139,34,.08), transparent 35%),var(--bg)}
 .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
 @media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
 
 .hero-art{position:relative}
 .hero-art::before{content:"";position:absolute;inset:-10% -6% -10% -6%;background:radial-gradient(60% 60% at 30% 20%, rgba(255,140,0,.35), transparent 60%),radial-gradient(60% 60% at 80% 60%, rgba(34,139,34,.35), transparent 60%),radial-gradient(50% 50% at 50% 100%, rgba(255,69,0,.25), transparent 60%);filter:blur(26px);z-index:0}
 .hero-art .frame{position:relative;z-index:1;border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel2)) padding-box, var(--grad) border-box;border:1px solid transparent;box-shadow:0 24px 60px rgba(0,0,0,.42),0 8px 26px rgba(255,140,0,.18);overflow:hidden;animation:float 9s ease-in-out infinite}
 .hero-art .frame::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% -10%, rgba(255,255,255,.06), transparent 50%),radial-gradient(100% 70% at -10% 110%, rgba(255,255,255,.05), transparent 50%);pointer-events:none}
 .hero-art .frame::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center, rgba(255,255,255,.4), rgba(255,255,255,.2) 40%, transparent 70%);z-index:1;pointer-events:none}
 .hero-art img{display:block;width:100%;height:auto;border-radius:14px}
 @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
 
 .eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.03)}
 h1{font-size:2.8rem;line-height:1.12;margin:.6rem 0 1rem;background:linear-gradient(90deg,#ff8c00,#228b22,#ff4500);-webkit-background-clip:text;background-clip:text;color:transparent}
 .lead{color:var(--muted);font-size:1.15rem;line-height:1.6}
 .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
 .trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;color:var(--muted);font-size:.95rem}

 /* Features section */
 #features{padding: 60px 0}
 .features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
 @media (max-width:1100px){.features{grid-template-columns:repeat(2,1fr)}}
 @media (max-width:620px){.features{grid-template-columns:1fr}}
 .feature{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px 22px 24px;box-shadow:0 10px 28px rgba(0,0,0,.25);transition:transform .25s ease, box-shadow .25s ease}
 .feature::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:6px;border-radius:999px;background:var(--card-grad, var(--grad))}
 .feature:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.28)}
 .feature h3{margin:.2rem 0 .6rem;font-size:1.35rem;color:#fff}
 .feature p{color:var(--muted)}
 .feature-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
 .ficon{display:none}
 .ficon svg{width:28px;height:28px;display:block}
 
 /* Paintball-specific gradients */
 .features .feature:nth-child(1){--card-grad:linear-gradient(90deg,#56b4ff,#8fe3ff)}
 .features .feature:nth-child(2){--card-grad:linear-gradient(90deg,#7f5cff,#b299ff)}
 .features .feature:nth-child(3){--card-grad:linear-gradient(90deg,#ff7aa2,#ffb3c7)}
 .features .feature:nth-child(4){--card-grad:linear-gradient(90deg,#ffb84d,#ffd280)}

 /* Benefits section */
 #benefits{position:relative;padding:88px 0;background:radial-gradient(900px 520px at 5% 110%, rgba(255,140,0,.30), transparent 58%),radial-gradient(900px 520px at 95% -10%, rgba(34,139,34,.34), transparent 58%),linear-gradient(180deg,#0a0f26,#0b1030)}
 .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
 @media (max-width:1100px){.benefits{grid-template-columns:repeat(2,1fr)}}
 @media (max-width:620px){.benefits{grid-template-columns:1fr}}
 .benefit{position:relative;display:flex;flex-direction:column;gap:8px;min-height:160px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:20px;backdrop-filter:blur(6px);transition:transform .25s ease, box-shadow .25s ease}
 .benefit:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.25);border-color:rgba(255,255,255,.35)}
 .benefit h4{margin-bottom:8px;color:#ff8c00;font-weight:700}
 .benefit p{margin:0;opacity:.9}

 /* Proof Section */
 .proof{padding:48px 0;background:linear-gradient(135deg, #1a2454 0%, #0f1736 50%, #1e2b5a 100%);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
 .proof-row{display:flex;justify-content:center;align-items:center}
 .quote-row{display:flex;align-items:center;gap:20px;max-width:800px}
 .quote-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
 .quote{margin:0;font-size:1.1rem;line-height:1.5;color:#fff}
 .quote strong{color:#fff;font-weight:600}

 /* CTA Section */
 #cta{position:relative;padding:84px 0;background:linear-gradient(180deg,#0b1030,#0a0f26)}
 .cta-content{text-align:center;max-width:600px;margin:0 auto}
 .cta-content h2{font-size:2.1rem;margin:8px 0}
.cta-content .sub{color:var(--muted);margin:16px 0 24px}

/* How it works section */
.how{padding:72px 0;background:linear-gradient(135deg, #0f1b3c 0%, #0a1429 50%, #12204a 100%);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.how-grid{grid-template-columns:1fr;gap:32px}}
.steps{display:flex;flex-direction:column;gap:20px}
.step{padding:20px 0;border-left:4px solid var(--line);padding-left:20px;border-radius:2px}
.step:nth-child(1){border-left-color:#56b4ff}
.step:nth-child(2){border-left-color:#7f5cff}
.step:nth-child(3){border-left-color:#ff7aa2}
.step:nth-child(4){border-left-color:#ffb84d}
.step strong{color:#fff;font-size:1.1rem;font-weight:600}
.step .lead{color:var(--text-dim);font-size:1rem;margin:4px 0 0 0;line-height:1.5}
.how img{width:100%;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)}

/* Revenue Flow Section */
.revenue-flow{padding:72px 0;background:linear-gradient(135deg, #0e1b3a 0%, #0a1429 50%, #11204b 100%);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.revenue-middle{position:relative;display:flex;align-items:center;justify-content:center;max-width:1200px;margin:0 auto;min-height:600px;padding:60px 0}

/* Customer Growth - Large Central Card */
.revenue-image-wrapper{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}

/* Platform positioning around the center */
.stripe-revenue{position:absolute;top:0;right:40px;z-index: 2}
.sc-revenue{position:absolute;bottom:0;right:40px;z-index: 2}
.groupon-revenue{position:absolute;bottom:18px;left:1px;z-index: 2}
.google-revenue{position:absolute;top:107px;left:10px;z-index: 2}

/* Platform logos */
.platform-logos{display:flex;flex-direction:column;gap:8px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;backdrop-filter:blur(6px)}
.platform-logos.groupon,.platform-logos.google{flex-direction:row}
.sc-logo-wrapper{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:20px;backdrop-filter:blur(8px)}

/* Revenue icons */
.revenue-icon{height:32px;width:auto;filter:brightness(1.1)}
.revenue-icon.sc{height:40px}
.revenue-icon.groupon,.revenue-icon.google{height:28px}

/* SVG flow lines */
.flow-svg{position:absolute;z-index:1;color:#56b4ff}
.flow-svg.sc{color:#8c7bff}
.flow-svg.groupon{color:#ff7aa2}

/* SVG positioning */
.stripe-revenue .flow-svg{bottom:-50px;left:10px;transform:translateX(-50%);width:60px;height:120px}
.sc-revenue .flow-svg{top:-100px;left:-3px;transform:scaleX(-1) scaleY(-1);width:60px;height:120px}
.groupon-revenue .flow-svg{top:-45px;right:-100px;width:120px;height:80px}
.google-revenue .flow-svg{bottom:-50px;right:-60px;width:120px;height:80px}

/* Dash animation */
@keyframes dash{0%{stroke-dashoffset:9}100%{stroke-dashoffset:0}}
.animate-dash{animation:dash 2s linear infinite}
@keyframes dashReverse{0%{stroke-dashoffset:0}100%{stroke-dashoffset:9}}
.flow-svg.groupon .animate-dash,
.flow-svg.sc .animate-dash{animation:dashReverse 2s linear infinite}

/* Customer Growth Dashboard */
.growth-heading{color:#fff;font-size:1.5rem;margin-bottom:30px;text-align:center;font-weight:600;position:relative;top:-80px;right:120px;}
.dashboard-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:40px;backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.3);min-width:350px}

/* Gauge styling */
.gauge-module{position:relative;width:180px;height:180px;margin:0 auto 30px}
.gauge-wrapper{position:relative;width:100%;height:100%}
.gauge-circle{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,.08)}
.gauge-circle.outer{border-width:4px}
.gauge-circle.middle{inset:12px;border-width:5px}
.gauge-circle.inner{inset:24px;border-width:6px}

.gauge-progress{position:absolute;border-radius:50%;border:4px solid transparent}
.gauge-progress.outer-progress{inset:0;border-width:4px;border-top-color:#56b4ff;border-right-color:#56b4ff;transform:rotate(245deg)}
.gauge-progress.middle-progress{inset:12px;border-width:5px;border-top-color:#8c7bff;border-right-color:#8c7bff;transform:rotate(200deg)}
.gauge-progress.inner-progress{inset:24px;border-width:6px;border-top-color:#ff7aa2;border-right-color:#ff7aa2;transform:rotate(150deg)}

.gauge-info{display:flex;align-items:center;gap:16px;justify-content:center}
.growth-icon-wrapper{width:40px;height:40px;background:#56b4ff;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.customer-title{margin:0;color:var(--text-dim);font-size:1rem}
.success-text{margin:0;color:#56b4ff;font-size:2.5rem;font-weight:700}

/* FAQ Section */
.faq-item:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.25);border-color:rgba(255,255,255,.35)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr !important}}

/* Responsive */
@media (max-width:900px){
  .revenue-middle{grid-template-columns:1fr;grid-template-rows:auto;gap:20px;max-width:400px}
  .stripe-revenue,.sc-revenue,.groupon-revenue,.google-revenue,.revenue-image-wrapper{grid-column:1;grid-row:auto}
  .flow-svg{display:none}
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Ensure header stays on top */
header.nav, .util, nav {
  position: relative;
  z-index: 1000;
}

/* Badge links styling */
.pillrow a.badge {
  text-decoration: none;
  transition: all 0.2s ease;
}
.pillrow a.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Feature links styling */
.features a.feature {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.features a.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Footer */
 .footer{background:linear-gradient(90deg,#15224d,#0f1736);border-top:1px solid var(--line);padding:48px 0}
 .footer strong{font-size:.95rem;letter-spacing:.02em}
 .footer a{opacity:.92;text-decoration:none}
 .footer a:hover{opacity:1;text-decoration:underline}
 .footer ul{margin-top:10px;line-height:1.9;list-style:none;padding:0}
 .footer .brand img{height:36px}
 .footer .lead{font-size:.95rem;line-height:1.6}