/* ============ Tokens ============ */
:root{
  --bg: #0a0a0a;
  --bg-alt: #111311;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  --text: #f3f4f0;
  --text-muted: #a7aca3;
  --text-faint: #6f746a;

  --green: #8bc53f;
  --green-light: #a9d968;
  --green-glow: rgba(139,197,63,0.35);

  --font-head: "Monument Extended", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

.text-accent{ color: var(--green); }

/* subtle grain overlay for depth/polish */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight:600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn-icon{ width:19px; height:19px; flex-shrink:0; }

.btn-glass{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-glass:hover{
  background: rgba(139,197,63,0.14);
  border-color: rgba(139,197,63,0.5);
  color: var(--green-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px var(--green-glow), inset 0 1px 0 rgba(255,255,255,0.1);
}
/* ============ Hero ============ */
.hero{
  position:relative;
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 60px 24px;
}
.hero-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 900px; height: 700px;
  background: radial-gradient(closest-side, var(--green-glow), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
  pointer-events:none;
}

/* floating ambient blobs for the glass effect */
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(70px);
  pointer-events:none;
  opacity:.55;
}
.blob-a{
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(139,197,63,0.45), transparent 70%);
  top: -8%; left: -6%;
  animation: float-a 16s ease-in-out infinite alternate;
}
.blob-b{
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(139,197,63,0.3), transparent 70%);
  bottom: -10%; right: -6%;
  animation: float-b 19s ease-in-out infinite alternate;
}
@keyframes float-a{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(40px, 30px) scale(1.12); }
}
@keyframes float-b{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(-30px,-40px) scale(1.08); }
}

.hero-inner{ position:relative; width:100%; max-width: 760px; perspective: 1400px; }

/* ============ Glass card ============ */
.glass-card{
  position:relative;
  text-align:center;
  background: linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 55%, rgba(139,197,63,0.05));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 28px;
  padding: clamp(40px, 6vw, 72px) clamp(26px, 6vw, 64px);
  box-shadow:
    0 30px 70px -25px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.09);
  overflow:hidden;
  animation: card-glow 6s ease-in-out infinite alternate;
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.card-glare{
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(139,197,63,0.35), transparent 60%);
  opacity:0;
  transition: opacity .4s ease;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.glass-card:hover::before{
  animation-play-state: paused;
  opacity:0;
}
.glass-card::before{
  content:"";
  position:absolute;
  top:-60%; left:-60%;
  width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: rotate(20deg);
  transition: opacity .3s ease;
  animation: shimmer 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%{ left: -60%; }
  45%{ left: 130%; }
  100%{ left: 130%; }
}
@keyframes card-glow{
  from{ box-shadow: 0 30px 70px -25px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.09), 0 0 0 1px rgba(139,197,63,0.08); }
  to{ box-shadow: 0 30px 80px -20px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 40px 2px rgba(139,197,63,0.16); }
}

.hero-logo{
  width: min(280px, 50vw);
  margin: 0 auto 32px;
  position:relative;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green-light);
  margin: 0 0 20px;
}
.eyebrow::before, .eyebrow::after{ content:""; width:6px; height:6px; border-radius:50%; background: var(--green); box-shadow:0 0 12px 2px var(--green-glow); flex-shrink:0; }

.hero h1{
  font-family: var(--font-head);
  font-weight:400;
  line-height:1.2;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.hero-sub{
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 28px;
}

.tagline{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight:500;
  color: var(--text);
  max-width: 480px;
  margin: 0 auto 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.contact-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap: 14px;
}

/* ============ Reveal animation ============ */
.reveal{ opacity:0; transform: translateY(16px); animation: reveal-in .8s var(--ease) forwards; }
.hero-logo.reveal{ animation-delay: .05s; }
.eyebrow.reveal{ animation-delay: .15s; }
.hero h1.reveal{ animation-delay: .25s; }
.hero-sub.reveal{ animation-delay: .35s; }
.tagline.reveal{ animation-delay: .45s; }
.contact-row.reveal{ animation-delay: .55s; }

@keyframes reveal-in{
  to{ opacity:1; transform:none; }
}

/* ============ Footer ============ */
.site-footer{
  position:relative;
  padding: 22px 24px 28px;
  text-align:center;
}
.site-footer p{ margin:0; font-size:.8rem; color: var(--text-faint); }

@media (max-width: 640px){
  .hero{ padding: 40px 16px; }
  .glass-card{ border-radius: 22px; }
  .hero-logo{ margin-bottom: 26px; }
  .tagline{ padding-top: 22px; margin-bottom: 30px; }
  .contact-row{ flex-direction:column; }
  .btn{ width:100%; }
  .btn-icon-only{ width:50px; align-self:center; }
}