/* ================================================================
   GATOR GEEKS — Main Stylesheet
   Tropical Florida Theme with Palm Backgrounds
   ================================================================ */

/* ---- GOOGLE FONTS (loaded in header.php) ---- */

/* ---- CSS VARIABLES ---- */
:root {
  --swamp: #14532d;
  --gator: #22c55e;
  --gator-dark: #16a34a;
  --lime: #84cc16;
  --sun: #fbbf24;
  --sun-light: #fef3c7;
  --coral: #f97316;
  --sand: #fefce8;
  --cream: #fefdf5;
  --ocean: #0e7490;
  --sky: #22d3ee;
  --deep: #0c1f0f;
  --white: #ffffff;
  --text: #334155;
  --muted: #64748b;
  --light-border: rgba(34,197,94,0.12);
  --card-shadow: 0 6px 32px rgba(0,0,0,0.05);
  --hover-shadow: 0 16px 48px rgba(34,197,94,0.1);
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 99px;
  --transition: all 0.3s ease;
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Nunito', sans-serif;
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul, ol { list-style:none; }

/* ================================================================
   TROPICAL BACKGROUND — Subtle palm silhouettes
   ================================================================ */
body::before {
  content:'';
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 55% 45% at 12% 75%, rgba(34,197,94,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 45% 50% at 88% 15%, rgba(251,191,36,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(14,116,144,0.03) 0%, transparent 60%);
}

/* Palm leaf watermark — left side */
body::after {
  content:'';
  position:fixed;
  top: -5%;
  left: -8%;
  width: 500px;
  height: 700px;
  pointer-events:none;
  z-index:0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cpath d='M200 580 L200 320 Q140 270 60 160 Q100 240 180 310 Q110 220 80 100 Q130 200 180 290 Q160 170 170 50 Q180 175 195 285 Q210 160 230 60 Q220 180 205 290 Q250 180 300 90 Q250 210 210 300 Q280 230 330 150 Q270 260 200 320' fill='%2322c55e'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---- Content sits above background ---- */
main, section, .sec, nav, footer { position:relative; z-index:1; }

/* ================================================================
   TROPICAL DECORATIVE ELEMENTS (reusable)
   ================================================================ */
.tropical-divider {
  width:100%;
  height:40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20 Q150 0 300 20 Q450 40 600 20 Q750 0 900 20 Q1050 40 1200 20' fill='none' stroke='%2322c55e' stroke-width='1.5' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 1200px 40px;
  background-repeat: repeat-x;
}

.leaf-accent-right {
  position:absolute;
  top:0; right:0;
  width:250px; height:350px;
  pointer-events:none;
  opacity:0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cpath d='M150 480 L150 260 Q80 210 20 110 Q60 185 130 250 Q70 170 40 70 Q90 155 140 240 Q120 130 130 30 Q140 140 150 240 Q160 130 180 40 Q170 150 155 240 Q200 140 250 60 Q200 170 160 250 Q230 185 280 110 Q210 210 150 260' fill='%2322c55e'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  transform:scaleX(-1);
}

/* Small monstera leaf pattern for section backgrounds */
.tropical-pattern-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%2322c55e' opacity='0.06'/%3E%3C/svg%3E");
}

/* ================================================================
   NAVIGATION
   ================================================================ */
nav.main-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2.5rem;
  background:rgba(254,253,245,0.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--light-border);
  transition:box-shadow 0.3s, padding 0.3s;
}

nav.main-nav.scrolled {
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  padding:0.7rem 2.5rem;
}

.logo {
  display:flex; align-items:center; gap:0.6rem;
}
.logo svg { width:44px; height:44px; }
.logo-text {
  font-family:'Lilita One', cursive;
  font-size:1.45rem; color:var(--swamp);
}
.logo-text em { font-style:normal; color:var(--gator); }

.nav-links {
  display:flex; align-items:center; gap:1.8rem;
}
.nav-links a {
  font-weight:700; font-size:0.85rem; color:var(--swamp);
  transition:color 0.2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-4px; left:0; width:0; height:2px;
  background:var(--gator); transition:width 0.3s;
}
.nav-links a:hover { color:var(--gator); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--gator); }
.nav-links a.active::after { width:100%; }

.nav-cta {
  background:var(--gator) !important;
  color:var(--white) !important;
  padding:0.55rem 1.4rem;
  border-radius:var(--radius-pill);
  box-shadow:0 4px 16px rgba(34,197,94,0.3);
  transition:transform 0.2s, box-shadow 0.2s;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(34,197,94,0.35);
}

/* Mobile */
.burger {
  display:none; background:none; border:none;
  cursor:pointer; flex-direction:column; gap:5px; padding:4px;
}
.burger span {
  display:block; width:26px; height:3px;
  background:var(--swamp); border-radius:2px; transition:0.3s;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:linear-gradient(135deg, var(--gator), var(--swamp));
  color:var(--white); padding:0.9rem 2rem;
  border-radius:var(--radius-pill);
  font-family:'Lilita One', cursive; font-size:1rem;
  box-shadow:0 6px 24px rgba(34,197,94,0.3);
  transition:var(--transition); border:none; cursor:pointer;
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(34,197,94,0.35);
}

.btn-secondary {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:var(--white); color:var(--swamp);
  border:2px solid rgba(20,83,45,0.15);
  padding:0.9rem 2rem; border-radius:var(--radius-pill);
  font-family:'Lilita One', cursive; font-size:1rem;
  transition:var(--transition); cursor:pointer;
}
.btn-secondary:hover {
  border-color:var(--gator);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(34,197,94,0.1);
}

.btn-sm {
  padding:0.6rem 1.4rem; font-size:0.9rem;
}

/* ================================================================
   SECTION HELPERS
   ================================================================ */
.sec {
  padding:5rem 2rem;
  max-width:1100px;
  margin:0 auto;
}

.sec-label {
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem; text-transform:uppercase;
  letter-spacing:2.5px; color:var(--gator);
  display:flex; align-items:center; gap:0.6rem;
  margin-bottom:0.6rem;
}
.sec-label::before {
  content:''; width:24px; height:2px; background:var(--gator);
}

.sec-title {
  font-family:'Lilita One', cursive;
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  color:var(--deep); margin-bottom:0.6rem;
}

.sec-sub {
  font-size:1.05rem; color:var(--muted);
  max-width:540px; line-height:1.7;
  margin-bottom:2.5rem;
}

/* ================================================================
   PAGE HERO (used on inner pages)
   ================================================================ */
.page-hero {
  padding:9rem 2rem 4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.page-hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(34,197,94,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(251,191,36,0.05) 0%, transparent 60%);
}

.page-hero .leaf-accent-right { top:-40px; }

.page-hero-inner {
  position:relative; z-index:1;
  max-width:700px; margin:0 auto;
}

.page-hero h1 {
  font-family:'Lilita One', cursive;
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  color:var(--deep); line-height:1.1; margin-bottom:1rem;
}
.page-hero h1 .pop {
  color:var(--gator); position:relative;
}
.page-hero h1 .pop::after {
  content:''; position:absolute;
  bottom:3px; left:-3px; right:-3px; height:10px;
  background:rgba(251,191,36,0.3); border-radius:3px;
  z-index:-1; transform:skew(-2deg);
}

.page-hero p {
  font-size:1.1rem; color:var(--muted);
  max-width:500px; margin:0 auto;
  line-height:1.7;
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background:var(--white);
  border-radius:var(--radius);
  padding:2rem;
  border:1.5px solid transparent;
  transition:var(--transition);
  position:relative; overflow:hidden;
}
.card::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gator), var(--lime), var(--sun));
  transform:scaleX(0); transition:transform 0.35s;
}
.card:hover {
  border-color:rgba(34,197,94,0.18);
  transform:translateY(-5px);
  box-shadow:var(--hover-shadow);
}
.card:hover::after { transform:scaleX(1); }

/* ================================================================
   DARK SECTION (hosting features, etc)
   ================================================================ */
.dark-sec {
  background:linear-gradient(160deg, var(--deep), #0a2e15 50%, #063b20);
  color:var(--white);
  padding:5rem 2rem;
  overflow:hidden;
  position:relative;
}
.dark-sec::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(34,197,94,0.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(14,116,144,0.08), transparent 50%);
}
.dark-sec .sec-inner {
  max-width:1100px; margin:0 auto; position:relative; z-index:1;
}
.dark-sec .sec-label { color:var(--lime); }
.dark-sec .sec-label::before { background:var(--lime); }
.dark-sec .sec-title { color:var(--white); }
.dark-sec .sec-sub { color:rgba(255,255,255,0.55); }

/* Dark palm watermark */
.dark-sec::after {
  content:''; position:absolute;
  bottom:-5%; right:-5%;
  width:400px; height:550px;
  pointer-events:none;
  opacity:0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cpath d='M200 580 L200 320 Q140 270 60 160 Q100 240 180 310 Q110 220 80 100 Q130 200 180 290 Q160 170 170 50 Q180 175 195 285 Q210 160 230 60 Q220 180 205 290 Q250 180 300 90 Q250 210 210 300 Q280 230 330 150 Q270 260 200 320' fill='%2384cc16'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  transform:scaleX(-1) rotate(15deg);
}

/* Feature card in dark section */
.feat-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:1.5rem;
  transition:var(--transition);
}
.feat-card:hover {
  background:rgba(255,255,255,0.09);
  border-color:rgba(132,204,22,0.35);
  transform:translateY(-3px);
}
.feat-icon {
  font-size:1.4rem;
  background:linear-gradient(135deg, var(--gator), var(--lime));
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0.8rem;
}
.feat-card h4 {
  font-weight:800; font-size:0.95rem; margin-bottom:0.3rem;
}
.feat-card p {
  font-size:0.82rem; color:rgba(255,255,255,0.5); line-height:1.55;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer.main-footer {
  background:var(--deep);
  color:rgba(255,255,255,0.5);
  padding:4rem 2rem 2rem;
  position:relative; z-index:1;
}

.footer-grid {
  max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:2.5rem;
}

.footer-brand p {
  font-size:0.88rem; line-height:1.7; margin-top:1rem;
}

footer h4 {
  font-family:'Lilita One', cursive;
  color:var(--white); font-size:1rem;
  margin-bottom:0.8rem;
}

footer ul li { margin-bottom:0.4rem; }
footer ul a {
  color:rgba(255,255,255,0.45);
  font-size:0.88rem; transition:color 0.2s;
}
footer ul a:hover { color:var(--lime); }

.footer-bottom {
  max-width:1100px; margin:0 auto;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between;
  align-items:center; font-size:0.78rem;
  flex-wrap:wrap; gap:0.5rem;
}

/* Tropical wave in footer */
footer.main-footer::before {
  content:''; position:absolute;
  top:-1px; left:0; right:0; height:30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30'%3E%3Cpath d='M0 30 Q150 0 300 15 Q450 30 600 15 Q750 0 900 15 Q1050 30 1200 15 L1200 30 Z' fill='%230c1f0f'/%3E%3C/svg%3E");
  background-size:1200px 30px;
  background-repeat:repeat-x;
  z-index:1;
}

/* ================================================================
   FLOATING GUS (back to top)
   ================================================================ */
.gus-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:999;
  cursor:pointer; transition:transform 0.3s;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  opacity:0; pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
}
.gus-fab.visible { opacity:1; pointer-events:auto; }
.gus-fab:hover { transform:scale(1.12) rotate(-5deg); }
.gus-fab svg { width:56px; height:56px; }

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.rv {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.rv.vis { opacity:1; transform:translateY(0); }

/* stagger children */
.rv-delay-1 { transition-delay:0.1s; }
.rv-delay-2 { transition-delay:0.2s; }
.rv-delay-3 { transition-delay:0.3s; }
.rv-delay-4 { transition-delay:0.4s; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:768px) {
  nav.main-nav { padding:0.9rem 1.5rem; }
  .nav-links {
    display:none; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(254,253,245,0.98);
    padding:1.5rem 2rem; gap:1.2rem;
    border-bottom:1px solid var(--light-border);
  }
  .nav-links.open { display:flex; }
  .burger { display:flex; }

  .sec { padding:3.5rem 1.5rem; }
  .page-hero { padding:7rem 1.5rem 3rem; }
  .footer-grid { grid-template-columns:1fr; }
  body::after { display:none; }

  .gus-fab { bottom:1rem; right:1rem; }
  .gus-fab svg { width:48px; height:48px; }
}

@media (max-width:480px) {
  .hero-btns { flex-direction:column; align-items:center; }
}