/* ==========================================================================
   Pinecloud365.top - Full stylesheet
   Created to match: headings #72fc36, text #ffd298, accents #72fc36
   button bg #72fc36, button text #5f3600, button hover #ffd298, bg #5f3600
   Font: Poppins (via Google Fonts), fallback system stack
   All classes use pinecloud365- prefix to match HTML
   ========================================================================== */

/* -------------------------
   CSS Variables (theme)
   ------------------------- */
:root{
  --site-bg: #5f3600;         /* site background */
  --heading: #72fc36;         /* headings and accents */
  --text: #ffd298;            /* primary text */
  --button-bg: #72fc36;       /* primary button background */
  --button-text: #5f3600;     /* button text (dark brown) */
  --button-hover: #ffd298;    /* hover background (light) */
  --muted: rgba(255,210,152,0.9);
  --card-bg: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.02);
  --shadow: 0 12px 40px rgba(0,0,0,0.55);
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --max-container: 1180px;
  --transition: 220ms cubic-bezier(.2,.9,.3,1);
  --font-stack: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------
   Global / Base
   ------------------------- */
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-stack);
  background-color: var(--site-bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* container override */
.container { max-width: var(--max-container); margin: 0 auto; padding: 0 1rem; }

/* links */
a { color: var(--heading); text-decoration:none; transition: color var(--transition); }
a:hover, a:focus { color: var(--button-hover); }

/* reset headings */
h1,h2,h3,h4,h5{ margin:0; font-weight:700; color:var(--heading); }

/* -------------------------
   Navbar
   ------------------------- */
.pinecloud365-navbar {
  background: rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding: 0.8rem 0;
  backdrop-filter: blur(4px);
}
.pinecloud365-logo { max-height:80px; display:block; }
.pinecloud365-navbar .nav-link{
  color: var(--text);
  font-weight:600;
  padding: 0.45rem 0.8rem;
  border-radius:8px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.pinecloud365-navbar .nav-link:hover { background: rgba(255,255,255,0.02); color: var(--button-hover); transform: translateY(-2px); }
.pinecloud365-navbar .nav-link.active { color: var(--heading); background: rgba(255,255,255,0.02); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* mobile toggler */
.navbar-toggler { border:none; color:var(--text); }

/* -------------------------
   Hero
   ------------------------- */
.pinecloud365-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
  background-image: url("../images/header-bg.jpg"); /* correct relative path */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.pinecloud365-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pinecloud365-hero > * {
  position: relative;
  z-index: 2;
}


/* hero content sits above overlay */
.pinecloud365-hero-content { position:relative; z-index:2; max-width:1100px; padding: 0 1rem; }

/* hero heading */
.pinecloud365-hero-heading {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  color: var(--heading);
  letter-spacing: 0.6px;
  text-shadow: 0 8px 32px rgba(0,0,0,0.6);
  margin-bottom: 1rem;
}

/* hero text */
.pinecloud365-hero-text {
  color: var(--text);
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  max-width:900px;
  margin: 0 auto 1.6rem;
  line-height:1.6;
  text-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

/* hero CTA */
.pinecloud365-hero-btn {
  display:inline-block;
  background: var(--button-bg);
  color: var(--button-text);
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-weight:800;
  letter-spacing:0.4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border:none;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.pinecloud365-hero-btn:hover,
.pinecloud365-hero-btn:focus {
  background: var(--button-hover);
  color: var(--button-text); /* dark brown for contrast */
  transform: translateY(-4px);
  box-shadow: 0 16px 46px rgba(0,0,0,0.55);
}
.pinecloud365-hero-btn:active { transform: translateY(-1px); }

/* -------------------------
   Section Title
   ------------------------- */
.pinecloud365-section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--heading);
  font-weight:800;
  text-align:center;
  margin-bottom: .6rem;
  letter-spacing: 0.8px;
}

/* subtle subtext */
.pinecloud365-section-text,
.pinecloud365-feature-subtext,
.pinecloud365-reviews-intro {
  color: var(--text);
  opacity: 0.95;
  max-width: 920px;
  margin: 0 auto 1.25rem;
  text-align:center;
  font-size: 1.02rem;
}

/* -------------------------
   Disclaimer Card
   ------------------------- */
.pinecloud365-disclaimer-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
}
.pinecloud365-disclaimer-card p { color:var(--text); line-height:1.7; }

/* primary button (used in disclaimer) */
.pinecloud365-btn{
  display:inline-block;
  background: var(--button-bg);
  color: var(--button-text);
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight:700;
  border:none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.pinecloud365-btn:hover{ background: var(--button-hover); color: var(--button-text); transform: translateY(-3px); }

/* ghost */
.pinecloud365-btn-ghost{
  background: transparent;
  border: 1.6px solid rgba(255,255,255,0.06);
  color: var(--text);
}
.pinecloud365-btn-ghost:hover{ border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }

/* -------------------------
   Game Card / Iframe
   ------------------------- */
.pinecloud365-game-section { padding: 3.25rem 0; text-align:center; }
.pinecloud365-game-card{
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  background: #000;
}
.pinecloud365-game-card iframe {
  width:100%;
  height: 620px; /* desktop default */
  border: 0;
  display:block;
}

/* responsive iframe heights */
@media (max-width: 992px){ .pinecloud365-game-card iframe { height:520px; } }
@media (max-width: 576px){ .pinecloud365-game-card iframe { height:420px; } }

/* -------------------------
   Features
   ------------------------- */
.pinecloud365-features-section { padding: 3.5rem 0; }
.pinecloud365-feature-card{
  background: var(--glass);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(255,255,255,0.03);
  min-height: 200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
}
.pinecloud365-feature-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
.pinecloud365-feature-card i{ font-size:2.2rem; color:var(--heading); background: rgba(255,255,255,0.02); padding:.6rem; border-radius:12px; }

/* ================= About Section ================= */
.pinecloud365-about-section {
  background-color: #5f3600; /* Site background */
  padding: 5rem 1rem;
}

.pinecloud365-about-section .pinecloud365-section-title {
  color: #72fc36; /* Headings */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
}

.pinecloud365-about-section .pinecloud365-about-text {
  color: #ffd298; /* Text */
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.pinecloud365-about-section img {
  border-radius: 1rem; /* Rounded corners */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  border: 2px solid #72fc36; /* Neon accent border */
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pinecloud365-about-section img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .pinecloud365-about-section .pinecloud365-section-title {
    font-size: 2rem;
  }
  
  .pinecloud365-about-section .pinecloud365-about-text {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .pinecloud365-about-section {
    padding: 3rem 1rem;
  }

  .pinecloud365-about-section img {
    margin-bottom: 2rem;
  }
}
`

/* ================= Reviews Section ================= */
.pinecloud365-reviews-section {
  background-color: #5f3600; /* dark site background */
  padding: 5rem 1rem;
}

.pinecloud365-reviews-section .pinecloud365-section-title {
  color: #72fc36;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
}

.pinecloud365-reviews-section .pinecloud365-reviews-intro {
  color: #ffd298;
  font-size: 1.1rem;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

.pinecloud365-review-card {
  background-color: #3e1f00; /* slightly lighter than background */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pinecloud365-review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}

.pinecloud365-review-card p {
  color: #ffd298;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.pinecloud365-review-card h5 {
  color: #72fc36;
  margin-bottom: 0.25rem;
}

.pinecloud365-review-card small {
  color: #ffd298;
}

/* Unique borders for each card */
.pinecloud365-review-card.border-green { border-top: 4px solid #72fc36; }
.pinecloud365-review-card.border-gold { border-top: 4px solid #ffd298; }
.pinecloud365-review-card.border-accent { border-top: 4px solid #72fc36; }
.pinecloud365-review-card.border-orange { border-top: 4px solid #ffd298; }

/* Responsive adjustments */
@media (max-width: 992px) {
  .pinecloud365-reviews-section .pinecloud365-section-title {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .pinecloud365-reviews-section {
    padding: 3rem 1rem;
  }
}

/* -------------------------
   Footer (two-column)
   ------------------------- */
.pinecloud365-footer { padding:2.5rem 0; background: rgba(0,0,0,0.06); color:var(--text); border-top:1px solid rgba(255,255,255,0.03); }
.pinecloud365-footer-logo { max-height:66px; margin-bottom:1rem; display:block; margin-left:auto; margin-right:auto; }
.pinecloud365-footer-heading { color: var(--heading); font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.pinecloud365-footer-text { color: var(--text); line-height:1.6; }
.pinecloud365-footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.pinecloud365-footer-link { color: var(--text); font-weight:600; transition: color var(--transition); }
.pinecloud365-footer-link:hover { color: var(--button-hover); text-decoration:underline; }

/* bottom copyright */
.pinecloud365-footer .border-top { border-color: rgba(255,255,255,0.03); }

/* =======================
   Age Verification Popup
======================= */
.pinecloud365-age-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85); /* darker overlay for visibility */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.pinecloud365-age-popup-overlay.active {
  display: flex;
}

.pinecloud365-age-popup-box {
  background: #5f3600; /* site background */
  color: #ffd298;
  padding: 2.5rem;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  text-align: center;
}

.pinecloud365-age-popup-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #72fc36; /* heading color */
}

.pinecloud365-age-popup-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #ffd298;
}

.pinecloud365-btn {
  background: #72fc36;
  color: #5f3600;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pinecloud365-btn:hover {
  background: #ffd298;
  color: #5f3600;
}

.pinecloud365-btn-ghost {
  background: transparent;
  border: 2px solid #72fc36;
  color: #72fc36;
}

.pinecloud365-btn-ghost:hover {
  background: #72fc36;
  color: #5f3600;
}

/* -------------------------
   Scroll to top button
   ------------------------- */
.pinecloud365-scroll-top {
  position: fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:50%;
  display:none; align-items:center; justify-content:center; background:var(--button-bg); color:var(--button-text);
  border:none; font-weight:800; box-shadow: 0 12px 36px rgba(0,0,0,0.5); cursor:pointer; z-index:1300; transition: transform var(--transition), background var(--transition);
}
.pinecloud365-scroll-top.visible { display:flex; }
.pinecloud365-scroll-top:hover { transform: translateY(-4px); background: var(--button-hover); color: var(--button-text); }

/* -------------------------
   Forms (if added later)
   ------------------------- */
.pinecloud365-contact-form .form-control { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:var(--text); border-radius:10px; padding:.75rem; }
.pinecloud365-contact-form .form-label { color:var(--heading); font-weight:700; }

/* -------------------------
   Accessibility focus states
   ------------------------- */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(114,252,54,0.12); outline-offset:2px; }

/* -------------------------
   Responsive adjustments
   ------------------------- */
@media (max-width: 992px){
  .pinecloud365-hero { padding: 3.25rem 1rem; min-height:78vh; }
  .pinecloud365-hero-heading { font-size: 2.6rem; }
  .pinecloud365-game-card iframe { height:520px; }
}
@media (max-width: 576px){
  .pinecloud365-hero-heading { font-size: 2.1rem; }
  .pinecloud365-hero-text { font-size: .98rem; }
  .pinecloud365-game-card iframe { height:380px; }
  .pinecloud365-footer { padding: 2rem 0; }
}

/* -------------------------
   Micro interactions
   ------------------------- */
/* small underline animation for footer links */
.pinecloud365-footer-links a::after {
  content:""; display:block; height:2px; width:0; background:var(--heading); transition: width var(--transition);
}
.pinecloud365-footer-links a:hover::after { width:100%; }

/* subtle floating CTA */
@keyframes floatUp {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.pinecloud365-hero-btn.float { animation: floatUp 6s ease-in-out infinite; }



/* ================= Contact Section ================= */
.pinecloud365-contact-section {
  background-color: #5f3600; /* site background */
  color: #ffd298; /* text color */
  padding: 5rem 1rem;
}

.pinecloud365-contact-section .pinecloud365-section-title {
  color: #72fc36;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.pinecloud365-contact-section .pinecloud365-contact-intro {
  color: #ffd298;
  font-size: 1.1rem;
  margin-bottom: 3rem;
}

.pinecloud365-contact-form .form-label {
  color: #ffd298;
  font-weight: 600;
}

.pinecloud365-contact-form .form-control {
  background-color: #3e1f00;
  border: 1px solid #72fc36;
  color: #ffd298;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.pinecloud365-contact-form .form-control:focus {
  border-color: #ffd298;
  box-shadow: 0 0 8px rgba(255, 210, 152, 0.7);
  background-color: #3e1f00;
  color: #ffd298;
}

.pinecloud365-contact-form textarea.form-control {
  resize: none;
}

.pinecloud365-contact-form .pinecloud365-btn {
  background-color: #72fc36;
  color: #5f3600;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

.pinecloud365-contact-form .pinecloud365-btn:hover {
  background-color: #ffd298;
  color: #5f3600;
  transform: translateY(-3px);
}

@media (max-width: 576px) {
  .pinecloud365-contact-section {
    padding: 3rem 1rem;
  }
}


/* ================= Pinecloud365 Legal Pages ================= */
.pinecloud365-legal-section {
  padding: 6rem 1rem;
  background-color: #5f3600; /* Site background */
  color: #ffd298;            /* Main text color */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Unique, readable font */
  min-height: 100vh;
}

.pinecloud365-legal-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background-color: rgba(0, 0, 0, 0.6); /* Slight dark overlay for readability */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pinecloud365-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #72fc36; /* Headings color */
  margin-bottom: 2rem;
  text-align: center;
}

.pinecloud365-section-text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #ffd298; /* Soft text color */
  text-align: justify;
}

.pinecloud365-legal-card h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #72fc36;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.pinecloud365-legal-card p {
  margin-bottom: 1.25rem;
}

/* ================= Buttons ================= */
.pinecloud365-btn {
  display: inline-block;
  background-color: #72fc36;
  color: #5f3600;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  transition: all 0.3s e


/* ================= Responsive Adjustments ================= */
@media (max-width: 991px) {
  .pinecloud365-legal-section {
    padding: 4rem 1rem;
  }

  .pinecloud365-legal-section .pinecloud365-legal-card {
    padding: 2rem 1.5rem;
  }

  .pinecloud365-legal-section h1.pinecloud365-section-title {
    font-size: 2rem;
  }

  .pinecloud365-legal-section h2 {
    font-size: 1.5rem;
  }

  .pinecloud365-legal-section p.pinecloud365-section-text {
    font-size: 1rem;
  }
}

@media (max-width: 575px) {
  .pinecloud365-legal-section {
    padding: 3rem 1rem;
  }

  .pinecloud365-legal-section .pinecloud365-legal-card {
    padding: 1.5rem 1rem;
  }

  .pinecloud365-legal-section h1.pinecloud365-section-title {
    font-size: 1.75rem;
  }

  .pinecloud365-legal-section h2 {
    font-size: 1.25rem;
  }

  .pinecloud365-legal-section p.pinecloud365-section-text {
    font-size: 0.95rem;
  }
}