/* ---------- ROOT VARIABLES (dark theme) ---------- */
:root {
  --bg-color: #000000;
  --surface-color: #0a0a0a;
  --accent-color: #00f2ff;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --border-color: #1a1a1a;
  --header-height: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- CUSTOM NAVBAR (copied from home page) ---------- */
header {
  background-color: transparent !important;
  width: 100%;
  height: 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  font-family: "Inter", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-out;
}

header.menu-open {
  background-color: #fff !important;
  border-bottom: 1px solid #000;
}

header .menu button {
  width: 5.5vw;
  height: 2.3vw;
  border-radius: 30px;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

header .menu button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}

header.menu-open .menu button {
  border: 1px solid #333;
  color: #000;
}

header.menu-open .menu button:hover {
  background-color: #f5f1ed !important;
  color: #000;
}

header .logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

header.menu-open .logo-center {
  opacity: 1;
  pointer-events: auto;
}

header .logo-center img {
  width: 15vw;
  height: auto;
}

header .logo img {
  width: 15rem;
}

/* Hamburger Menu */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  display: none;
  flex-direction: row;
  padding: 0;
}

.hamburger-menu.active {
  display: flex;
  animation: slideLeft 0.5s ease-out forwards;
}

.hamburger-menu.closing {
  display: flex;
  animation: slideLeftOut 0.5s ease-out forwards;
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeftOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.menu-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-left {
  width: 30%;
  background-color: #f5f1ed;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border-right: 1px solid #000;
}

.menu-right {
  width: 70%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.menu-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.4s ease-out, transform 0.6s ease-out;
  transform: scale(1);
  display: block;
}

.menu-right img.active {
  transform: scale(1.05);
}

.hamburger-menu .menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.hamburger-menu .menu-items li a {
  color: #000;
  font-size: 1.5rem;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  transition: all 0.3s ease-out;
  display: block;
  padding: 0.5rem 0;
  text-transform: uppercase;
}

.hamburger-menu .menu-items li a:hover {
  color: #666;
}

/* Ensure the menu content is above the background and clickable */
.hamburger-menu {
  pointer-events: none; /* Block clicks when hidden */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.hamburger-menu.active {
  pointer-events: auto; /* Enable clicks when visible */
  opacity: 1;
  visibility: visible;
}

.menu-items li a {
  display: block;
  position: relative;
  z-index: 100; /* Force links to the top */
  cursor: pointer !important;
}

/* ---------- MOBILE NAVBAR STYLES (copied from home page) ---------- */
@media (max-width: 768px) {
  header {
    height: 20vw !important;
    padding: 0 1rem !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  header .logo {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  header .logo img {
    width: auto;
    height: 100%;
    max-height: 12vw;
    object-fit: contain;
    padding-right: 0;
  }

  header .logo-center img {
    display: none;
  }

  header.menu-open {
    background-color: #fff !important;
    border-bottom: 1px solid #000;
  }

  header .menu button {
    width: 60px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }

  .hamburger-menu .menu-right {
    display: none;
  }

  .hamburger-menu .menu-left {
    width: 100%;
    border-right: none;
    padding: 0 1rem;
  }

  .hamburger-menu .menu-items li a {
    font-size: 1.2rem;
    padding: 0.3rem 0;
  }
}

/* ---------- TERMS PAGE STYLES (same as privacy) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;500&display=swap");

.mono {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.85rem;
}

.hero-terms {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  background: linear-gradient(to right, #000 30%, transparent 100%),
    url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&q=80&w=2000")
      center/cover no-repeat;
  z-index: 1;
}

.hero-title {
  z-index: 10;
  position: relative;
}

.hero-title h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 900;
  margin: 1rem 0;
}

.hero-title h1 span {
  color: var(--accent-color);
}

.hero-title p {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-top: 1rem;
}

/* Main content container */
.terms-content {
  margin: 4rem auto;
  padding: 0 8rem;
}

.terms-section {
  margin-bottom: 3rem;
}

.terms-section h2 {
  font-size: 1.8rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}

.terms-section h3 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin: 1.5rem 0 0.5rem;
}

.terms-section p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  width: 60%;
}

.terms-section ul {
  list-style: none;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.terms-section ul li {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  position: relative;
}

.terms-section ul li::before {
  content: "•";
  color: var(--accent-color);
  font-weight: bold;
  position: absolute;
  left: -1.2rem;
}

.terms-section .highlight {
  background-color: var(--surface-color);
  border-left: 4px solid var(--accent-color);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
}

.image-row {
  display: flex;
  gap: 2rem;
  margin: 3rem 0;
  flex-wrap: wrap;
}

.image-row img {
  flex: 1 1 300px;
  max-width: 100%;
  border-radius: 8px;
  filter: grayscale(1) contrast(1.2);
  transition: 0.3s;
  border: 1px solid var(--border-color);
}

.image-row img:hover {
  filter: grayscale(0) contrast(1);
}

.last-updated {
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 2rem;
  text-align: right;
}

/* ---------- MODERN FOOTER ---------- */
footer {
  background-color: var(--bg-color);
  color: var(--text-primary);
  padding: 4rem 2rem 2rem;
  font-family: "Inter", sans-serif;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
}

.footer-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-left {
  flex: 0 0 250px;
}

.footer-left a {
  text-transform: uppercase;
  font-size: 0.7rem;
  text-decoration: none;
  color: var(--text-primary);
}

.footer-left h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.social-links a {
  color: var(--text-secondary);
  font-size: 1.3rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: var(--accent-color);
  transform: translateY(-3px);
}

.copyright {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2rem;
  line-height: 1.5;
}

.footer-right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-end;
}

.footer-column {
  min-width: 160px;
}

.footer-column h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer-bottom {
  max-width: 1400px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center; /* center legal links on desktop */
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center; /* ensure links are centered */
}

.legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Mobile copyright – hidden on desktop, visible on mobile */
.mobile-copyright {
  display: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.footer-year {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footer-container {
    gap: 2rem;
  }
  .footer-left {
    flex: 0 0 200px;
  }
  .footer-right {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 3rem 1.5rem 1.5rem;
  }

  /* Make footer a column and reorder children */
  footer {
    display: flex;
    flex-direction: column;
  }

  /* Hide original copyright inside footer-left */
  .footer-left .copyright {
    display: none;
  }

  /* Show mobile copyright */
  .mobile-copyright {
    display: block;
  }

  /* Footer container becomes a column */
  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Left section (logo, social) appears after the columns */
  .footer-left {
    order: 2;
    width: 100%;
    flex: none;
    margin-top: 2rem;
  }

  /* Right section (columns) appears first */
  .footer-right {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 2rem;
    justify-content: flex-start;
  }

  /* Remove previous flex‑based sizing for columns */
  .footer-column {
    min-width: 0; /* reset min-width */
    width: 100%;
  }

  /* First two columns (Quick Links, Company) – they will naturally fill grid cells */
  .footer-column:nth-child(1),
  .footer-column:nth-child(2) {
    width: auto;
  }

  /* Third column (Media) spans both columns? Actually we want it to start a new row.
     With grid-template-columns: 1fr 1fr, the third item will automatically go to the next row.
     We can optionally make it span both columns if desired, but the user likely wants it below.
     Leave as is – it will occupy the first column of the second row.
     To make it full width, uncomment the following:
  */
  .footer-column:nth-child(3) {
    grid-column: 1 / -1; /* make it span both columns */
    margin-top: 1rem;
  }

  /* Footer bottom (legal links) appears before the mobile copyright */
  .footer-bottom {
    order: 3;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .legal-links {
    order: 1;
    justify-content: center;
    width: 100%;
  }

  .mobile-copyright {
    order: 2;
  }
}

@media (max-width: 480px) {
  .footer-right {
    gap: 1.5rem;
  }
  .footer-column {
    min-width: 100%; /* ensure columns stack on very small screens */
  }
  /* On very small screens, maybe keep legal links centered */
  .legal-links {
    justify-content: center;
    gap: 1rem;
  }
}

/* ---------- MOBILE CONTENT STYLES (PRIVACY PAGE) ---------- */
@media (max-width: 768px) {
  .privacy-content {
    padding: 0 1.5rem;
    margin: 2rem auto;
  }

  .policy-section {
    margin-bottom: 2rem;
  }

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

  .policy-section h3 {
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem;
  }

  .policy-section p,
  .policy-section ul li {
    font-size: 0.95rem;
  }

  .policy-section ul {
    padding-left: 1rem;
  }

  .policy-section ul li::before {
    left: -0.8rem;
  }

  .image-row {
    gap: 1rem;
    margin: 2rem 0;
  }

  .image-row img {
    flex: 1 1 100%;
  }

  .last-updated {
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .privacy-content {
    padding: 0 1rem;
  }

  .policy-section h2 {
    font-size: 1.3rem;
  }

  .policy-section h3 {
    font-size: 1.1rem;
  }

  .policy-section p,
  .policy-section ul li {
    font-size: 0.9rem;
  }
}

/* ---------- MOBILE CONTENT STYLES (TERMS PAGE) ---------- */
@media (max-width: 768px) {
  .hero-terms {
    min-height: 50vh; /* slightly smaller on tablets */
    padding: 4rem 1.5rem; /* add side padding for text */
  }

  .terms-content {
    padding: 0 1.5rem;
    margin: 2rem auto;
  }

  .terms-section {
    margin-bottom: 2rem;
  }

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

  .terms-section h3 {
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem;
  }

  .terms-section p,
  .terms-section ul li {
    font-size: 0.95rem;
  }

  /* Override desktop width: 60% to full width on mobile */
  .terms-section p {
    width: 100%;
  }

  .terms-section ul {
    padding-left: 1rem;
  }

  .terms-section ul li::before {
    left: -0.8rem;
  }

  .last-updated {
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-terms {
    min-height: 40vh; /* further reduced for small phones */
    padding: 3rem 1rem;
  }

  .terms-content {
    padding: 0 1rem;
  }

  .terms-section h2 {
    font-size: 1.3rem;
  }

  .terms-section h3 {
    font-size: 1.1rem;
  }

  .terms-section p,
  .terms-section ul li {
    font-size: 0.9rem;
  }
}