/* =========================================
GLOBAL VARIABLES (match tool pages)
========================================= */
:root {
  --color-background: #181022;
  --color-text: #f1f5f9;
  --color-subtitle: #94a3b8;
  --color-primary: #7c2bee;
  --color-primary-light: #9f57ff;
  --color-border-light: rgba(124, 43, 238, 0.2);
  --color-border-lighter: rgba(124, 43, 238, 0.15);
  --color-step-bg: rgba(124, 43, 238, 0.2);
  --color-step-bg-hover: rgba(124, 43, 238, 0.08);
  --color-step-text: #b084ff;
  --color-input-bg: #0f172a;
  --color-input-border: #2d2047;
  --color-input-placeholder: #64748b;
  --color-icon: #a855f7;

  --font-h1: 44px;
  --font-h1-mobile: 34px;
  --font-subtitle: 18px;
  --font-subtitle-mobile: 16px;
  --font-button: 17px;
  --font-label: 12px;
  --font-footer: 14px;
}

/* =========================================
GLOBAL RESET & BODY
========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  flex: 1;
  width: 90%;
  max-width: 720px;
  margin: 80px auto;
  text-align: left;
}

/* =========================================
LANGUAGE SWITCH
========================================= */
.language-switch {
  text-align: right;
  margin-bottom: 24px;
}

.language-switch a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  margin-left: 12px;
}

.language-switch a:hover {
  text-decoration: underline;
}

/* =========================================
HEADER / HERO
========================================= */
header.hero {
  text-align: left;
  margin-bottom: 60px;
}

header.hero h1 {
  font-size: var(--font-h1);
  font-weight: 800;
  margin-bottom: 16px;
}

header.hero p.subtitle {
  font-size: var(--font-subtitle);
  color: var(--color-subtitle);
  margin-bottom: 16px;
}

header.hero .header-accent {
  width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 2px;
  margin-bottom: 40px;
}

/* =========================================
HEADER / HERO LOGO
========================================= */
.site-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2rem;
}

.site-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* =========================================
TOOLS SECTION
========================================= */
section.tools {
  margin-bottom: 60px;
}

.tools-category h2 {
  margin-top: 50px; /* keeps spacing between categories */
  margin-bottom: 16px;
}

.tools-category h3 {
  margin-top: 40px; /* was 8vh */
  margin-bottom: 12px; /* was 2vh */
}

.tools-category h3:first-of-type {
  margin-top: 0;
}

.tools-category p {
  margin-bottom: 20px;
  color: var(--color-subtitle);
}

.buttons-grid {
  display: grid;
  margin-top: 8px; /* optional small spacing */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.tool-button {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border-lighter);
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  text-align: left;
  align-items: center;
  gap: 10px;
}

.tool-button:hover {
  transform: translateY(-2px);
  background: rgba(124, 43, 238, 0.05);
  border-color: var(--color-primary);
}

.tool-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-icon);
}

/* =========================================
ABOUT SECTION
========================================= */
section.about {
  margin-bottom: 60px;
}

section.about h2 {
  font-size: 25px;
  margin-bottom: 16px;
}

section.about p {
  color: var(--color-subtitle);
}

/* =========================================
FOOTER
========================================= */
footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border-lighter);
  padding: 40px 20px;
  text-align: center;
  font-size: var(--font-footer);
  color: var(--color-subtitle);
}

footer a {
  color: var(--color-primary);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* =========================================
MOBILE
========================================= */
@media (max-width: 640px) {
  header.hero h1 {
    font-size: var(--font-h1-mobile);
  }

  header.hero p.subtitle {
    font-size: var(--font-subtitle-mobile);
  }

  .buttons-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
COOKIE CONSENT MODAL
========================================= */

.cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
  z-index: 9999;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);

  justify-content: center;
  align-items: center;
}

.cookie-modal.show {
  display: flex;
}

.cookie-modal-content {
  background: #0f172a;
  border: 1px solid rgba(124, 43, 238, 0.25);
  border-radius: 14px;

  max-width: 520px;
  width: 90%;

  padding: 28px;
  text-align: center;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.cookie-modal-content h3 {
  text-align: center;
  margin-bottom: 20px;
}

.cookie-modal-content p {
  text-align: left;
}

.cookie-modal a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.cookie-modal a:hover {
  text-decoration: underline;
}

.cookie-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.cookie-buttons button {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.cookie-buttons button:hover {
  transform: translateY(-1px);
}

#accept-cookies-modal {
  background: var(--color-primary);
  color: white;
}

#decline-cookies-modal {
  background: #444;
  color: white;
}