:root{
  --bg-dark: #0A0A0A;
  --soft-gray: #f4f5f6;   /* light-mode background base (soft gray) */
  --frost-light: rgba(255,255,255,0.35); /* Soft Frost style B */
  --green: #2fbf71;
  --red: #ff5c57;
  --muted-dark: rgba(255,255,255,0.78);
  --muted-light: #444;
}

/* Base */
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0; padding:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background: var(--soft-gray); color:#111; font-size:18px; line-height:1.6;
  transition: background .35s ease, color .35s ease;
}

/* dark mode */
.dark body {
  background: var(--bg-dark); color: #fff;
}

/* Landing specific */
.landing{position:relative; min-height:70vh; display:block;}

/* FULLSCREEN aurora wrapper */
#aurora-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -10;
  pointer-events: none;
}

/* aurora blob layers */
.aurora-layer {
  position: absolute;
  width: 200vw;
  height: 200vh;
  top: -50vh;
  left: -50vw;
  filter: blur(120px) saturate(130%);
  opacity: 0.25;
  mix-blend-mode: screen;
  will-change: transform;
}

/* color layers */
.layer-1 {
  background: radial-gradient(circle at 30% 30%, rgba(47,191,113,0.65), transparent 40%);
}

.layer-2 {
  background: radial-gradient(circle at 70% 40%, rgba(255,92,87,0.65), transparent 40%);
}

.layer-3 {
  background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.28), transparent 50%);
}

/* particle canvas full screen */
#aurora-particles {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none;
  z-index: -5;
}


/* Specific color tints for each layer (subtle) */
.layer-1{ background: radial-gradient( circle at 20% 30%, rgba(47,191,113,0.95), transparent 20% ); transform:translate(-45%,-40%) scale(1.05); opacity:0.22; }
.layer-2{ background: radial-gradient( circle at 70% 50%, rgba(255,92,87,0.95), transparent 18% ); transform:translate(20%,-30%) scale(1); opacity:0.18; }
.layer-3{ background: linear-gradient(90deg, rgba(47,191,113,0.08), rgba(255,92,87,0.08)), radial-gradient(circle at 50% 60%, rgba(255,255,255,0.06), transparent 20%); transform:translate(-10%,30%) scale(1.02); opacity:0.12; }

/* canvas overlay for particles */
#aurora-particles{width:100%; height:100%; display:block}

/* glass/frost cards (dual-mode soft frost style B) */
.glass, .glass-card{
  border-radius:14px;
  padding:1rem;
  transition:transform .18s ease, box-shadow .18s ease, background .25s;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* LIGHT: soft frost */
.glass{ background: var(--frost-light); border:1px solid rgba(0,0,0,0.08); color:#111; }

/* DARK: subtle tinted frost */
.dark .glass{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }

/* hover lift */
.glass:hover{ transform:translateY(-8px); box-shadow: 0 18px 48px rgba(0,0,0,0.12); }

/* hero */
.hero{padding-top:2rem;padding-bottom:1rem;}
.hero-title{font-weight:900; font-size:clamp(2.2rem,5vw,4.5rem); line-height:0.95; margin:0; text-wrap:balance; display:block;}
.hero-lead{margin:0 auto; color:var(--muted-light); max-width:44rem;}
.dark .hero-lead{ color:var(--muted-dark); }

/* gradient text (keeps visible in both modes) */
.gradient-text{
  background:linear-gradient(90deg,var(--green), #8af5c5, var(--red));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block; font-weight:900;
}

/* buttons */
.btn-primary{
  display:inline-block; padding:.7rem 1.25rem; border-radius:10px; font-weight:700;
  background: linear-gradient(90deg,var(--green), #7ef2b0);
  color:#07122a; box-shadow: 0 10px 30px rgba(47,191,113,0.08);
}
.btn-outline{
  display:inline-block; padding:.65rem 1.1rem; border-radius:10px; color:inherit;
  border:1px solid rgba(0,0,0,0.12); background:transparent;
}
.dark .btn-outline{ border:1px solid rgba(255,255,255,0.08); }

/* muted text */
.text-muted{ color:#444; }
.dark .text-muted{ color:rgba(255,255,255,0.78); }

/* offerings layout (balanced look) */
.offerings{ display:grid; grid-template-columns: 1fr; gap:1rem;}
@media(min-width:900px){ .offerings{ grid-template-columns: 1fr 1fr; gap:2rem; } }

/* small cards visuals */
.offerings .glass{ min-height:120px; }

/* closing CTA */
.closing-cta .glass{ display:inline-block; text-align:center; }

/* ripple helper */
.ripple{ position:relative; overflow:hidden; }
.ripple .ripple-dot{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,0.18); animation:ripple .7s linear; }
@keyframes ripple{ to{ transform:scale(15); opacity:0 } }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:all .72s cubic-bezier(.2,.9,.2,1); }
.reveal{ opacity:1; transform:translateY(0); }

/* accessibility focus */
:focus{ outline:3px solid rgba(47,191,113,0.14); outline-offset:3px; }

/* Responsive spacing adjustments */
.landing-inner{ max-width:1200px; margin:0 auto; }
@media(min-width:1200px){ .landing-inner{ padding-left:2rem; padding-right:2rem; } }

/* small aesthetic tinting for dark mode nav (if needed) */
.header-fade{ background: linear-gradient(180deg, rgba(0,0,0,0.2), transparent); }

/* small fix for large words clipping descenders */
.hero-title, .gradient-text { overflow: visible !important; padding-bottom:6px; }

/* keep everything smooth */
*{ transition-timing-function: cubic-bezier(.2,.9,.2,1); }

.floating-title {
  animation: floatUp 6s ease-in-out infinite;
  text-shadow: 0 0 25px rgba(0,0,0,0.35);
}
.feature-block {
  padding-left: 0;
}

.feature-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.feature-text {
  font-size: 1.05rem;
  color: var(--muted-light);
}

.dark .feature-text {
  color: var(--muted-dark);
}