:root{
  --bg1:#0b1f3a;
  --bg2:#0e2a4f;
  --pri:#58d200;    /* lime-green from logo family */
  --pri2:#00d4ff;   /* cyan accent */
  --sec:#2a7b3b;    /* deep green from logo */
  --sec2:#4be8c6;   /* mint */
  --white:#ffffff;
}

*{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';}

body{
  background: radial-gradient(1200px 600px at 20% 0%, #173e7a66, transparent 40%),
              linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh;
}

/* hero glass card */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-radius: 1.35rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.20);
}

/* logo */
.logo{ max-width: 360px; height:auto; filter: drop-shadow(0 8px 28px rgba(0,0,0,.25)); }

/* animated gradients */
.grad{
  position:absolute; border-radius:50%; filter: blur(70px); opacity:.35;
}
.grad-1{width:44vmax;height:44vmax; left:-12vmax; top:-8vmax; background: radial-gradient(circle at 30% 30%, var(--pri2), transparent 60%); animation: drift 16s ease-in-out infinite;}
.grad-2{width:38vmax;height:38vmax; right:-10vmax; bottom:-12vmax; background: radial-gradient(circle at 70% 70%, var(--sec), transparent 60%); animation: drift 18s ease-in-out -3s infinite;}
.grad-3{width:24vmax;height:24vmax; right:20vmax; top:10vmax; background: radial-gradient(circle at 50% 50%, var(--sec2), transparent 60%); animation: drift 20s ease-in-out -6s infinite;}
@keyframes drift { 0%,100%{transform: translateY(0) scale(1)} 50%{transform: translateY(-12px) scale(1.05)} }

/* Big professional buttons */
.btn{ border-radius: 1.05rem; }
.btn-xl{ padding: 1.05rem 1.25rem; font-size: 1.15rem; font-weight: 800; letter-spacing: .15px; position:relative; overflow:hidden; box-shadow: 0 16px 38px rgba(0,0,0,.28); transform: translateZ(0); }
.btn-xl .btn-content{ position:relative; z-index:2; }

.btn-pro{
  background: linear-gradient(135deg, var(--pri), var(--sec2));
  color: #00131e; border: 0;
}
.btn-pro:hover{ filter: brightness(1.06); color:#00131e; transform: translateY(-1px); }
.btn-pro:active{ transform: translateY(1px); }

.btn-pro-2{
  background: linear-gradient(135deg, var(--pri2), #8bd3ff);
  color: #00131e; border: 0;
}
.btn-pro-2:hover{ filter: brightness(1.06); color:#00131e; transform: translateY(-1px); }
.btn-pro-2:active{ transform: translateY(1px); }

/* glossy shine sweep */
.shine{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 30%, rgba(255,255,255,.04) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.btn:hover .shine{ transform: translateX(120%); }

/* stats */
.stat{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius: 1rem; padding:1rem; text-align:center; color:#fff;
}
.stat-k{font-size:.85rem; opacity:.8;}
.stat-v{font-weight:900; letter-spacing:.02em;}

/* footer */
footer{border-top:1px solid rgba(255,255,255,.1);}

/* spacing */
.hero-bg{ padding: 5rem 0; }
@media (max-width: 576px){
  .hero-bg{ padding: 3.5rem 0; }
  .btn-xl{ font-size: 1.05rem; }
}