/* ============================================================
   Plaruno — additions on top of the original styles-DIahtPO8.css
   Only contains what the original CSS doesn't have:
   mobile nav drawer, form styling, modal, container, responsive fixes
   ============================================================ */

/* ==================================================================
   Mobile navigation drawer
   ================================================================== */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: oklch(16% .04 262 / 70%);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-nav-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 71;
  height: 100%;
  width: min(88vw, 360px);
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.3);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
}
.mobile-nav-overlay[data-open="true"] .mobile-nav-panel {
  transform: translateX(0);
}
.mobile-nav-close {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--foreground);
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: 1.5rem;
}
.mobile-nav-links a {
  padding: .75rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--muted-foreground);
  transition: background-color .2s ease, color .2s ease;
}
.mobile-nav-links a:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.mobile-nav-links a.is-active {
  background: var(--night);
  color: var(--night-foreground);
}
.mobile-nav-cta { margin-top: 1.5rem; }
body[data-mobile-nav-open="true"] { overflow: hidden; }

/* ==================================================================
   Form — adapts original glass form for PHP signup_form
   ================================================================== */
.signup_form {
  display: grid;
  gap: .75rem;
}

/* Night-section form inputs */
.form-night input[type="text"],
.form-night input[type="email"],
.form-night input[type="tel"] {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid oklch(97% .01 240 / 25%);
  background: oklch(97% .01 240 / 6%);
  padding: .875rem 1rem;
  color: var(--night-foreground);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  font-size: 1rem;
}
.form-night input::placeholder { color: var(--night-muted); }
.form-night input:focus {
  border-color: var(--neon);
  box-shadow: var(--shadow-neon);
}

/* Light-section form inputs */
.form-light input[type="text"],
.form-light input[type="email"],
.form-light input[type="tel"] {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--input);
  background: var(--card);
  padding: .875rem 1rem;
  color: var(--foreground);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  font-size: 1rem;
}
.form-light input::placeholder { color: var(--muted-foreground); }
.form-light input:focus {
  border-color: var(--cyan);
  box-shadow: var(--shadow-cyan);
}

/* Disable fx-hover effects on specific elements */
.fx-hover p.no-hover,
.fx-hover p.no-hover:hover {
  transition: none !important;
  text-shadow: none !important;
}
.fx-hover p.no-hover:hover {
  color: var(--night-foreground) !important;
}
.fx-hover p.no-hover:hover b,
.fx-hover p.no-hover:hover strong {
  background-size: 0% 100% !important;
  color: inherit !important;
}
@supports (color: color-mix(in lab, red, red)) {
  .fx-hover .grid-night p.no-hover:hover,
  .fx-hover .tile-night p.no-hover:hover {
    text-shadow: none !important;
  }
}

/* Form group wrapper — keeps error span inside the grid cell */
.form-group { width: 100%; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] { width: 100%; }

/* Error state */
input.input-error {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244,63,94,.2) !important;
}
span.error {
  font-size: .75rem;
  line-height: 1.4;
  color: #f43f5e;
  display: block;
  margin-top: 4px;
}

/* Submit button — use btn-neon from style.css but allow disabled state */
.signup_form .btn-neon:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: auto;
  min-height: var(--btn-height, 3rem);
}

/* Consent checkbox */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.consent-row-night {
  color: var(--night-muted);
}
.consent-row input[type="checkbox"] {
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--neon);
  width: 1rem;
  height: 1rem;
}
.consent-row a { text-decoration: underline; }

/* ==================================================================
   Scroll-progress bar (driven by main.js)
   ================================================================== */
.scroll-progress-bar {
  background: var(--gradient-neon, linear-gradient(110deg, var(--neon), var(--cyan)));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .1s ease-out;
}

/* ==================================================================
   Spacing overrides
   ================================================================== */
.h-56 { height: calc(var(--spacing) * 56); }

/* ==================================================================
   Responsive safety net
   ================================================================== */
html, body { overflow-x: hidden; }
img:not(.h-full):not(.h-56):not(.h-72), video:not(.h-full) { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
}

@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
}

.iti__country-name { color: #000; }

@media (max-width: 475px) {
  .stat-big { font-size: 18px; }
  .tile.p-5 { padding: 15px; }
}

/* ==================================================================
   Heading size override 768–1024px
   ================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .md\:text-5xl { font-size: 40px; }
}

/* ==================================================================
   Hide dashboard image 600–1023px
   ================================================================== */
@media (min-width: 600px) and (max-width: 1023px) {
  .hide-600-1023 { display: none; }
}

/* ==================================================================
   2-col grid at 55rem breakpoint
   ================================================================== */
.cols2-55rem { display: grid; }
@media (min-width: 55rem) {
  .cols2-55rem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================
   5-col grid at 900px breakpoint
   ================================================================== */
@media (min-width: 900px) {
  .cols5-900 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==================================================================
   Privacy / Terms / Cookie modals
   ================================================================== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: oklch(16% .04 262 / 70%);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: 2rem 1rem;
}
.modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 40rem;
  width: 100%;
  margin: auto;
  position: relative;
  flex-shrink: 0;
}
.modal-content h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.modal-content h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; margin-bottom: .25rem; }
.modal-content p { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); margin-bottom: .5rem; }
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
}
.modal-content h4 { font-size: .875rem; font-weight: 600; margin-top: .75rem; margin-bottom: .25rem; color: var(--foreground); }
.modal-content ul { padding-left: 1.25rem; margin-bottom: .5rem; }
.modal-content ul li { font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); }
.modal-button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  background: var(--gradient-neon, linear-gradient(110deg, var(--neon), var(--cyan)));
  color: var(--night);
}

/* ==================================================================
   Accordion FAQ (native, no Radix) — replicates original chevron pattern
   ================================================================== */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display, var(--font-sans));
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  gap: 1rem;
  transition: color .2s ease;
}
.faq-item:hover .faq-trigger { color: var(--cyan); }
.faq-trigger svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  transition: transform .2s ease;
}
.faq-item.is-open .faq-trigger svg { transform: rotate(180deg); }
.faq-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(.22,1,.36,1);
}
.faq-item.is-open .faq-body { max-height: 600px; }
.faq-body p {
  padding-bottom: 1rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* ==================================================================
   Markets — exchanges grid: center last 2 items in every breakpoint
   ================================================================== */
.exchanges-last-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.exchanges-last-row > article {
  flex: 1 1 0;
  min-width: 0;
}
@media (min-width: 1024px) {
  .exchanges-last-row > article {
    max-width: calc((100% - 2rem) / 3);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .exchanges-grid > *:nth-child(9) { grid-column: 1 / -1; order: 1; }
}
@media (max-width: 767px) {
  .exchanges-last-row { flex-direction: column; }
}

/* ==================================================================
   Footer nav links — 2-col at 375px+, dissolves at md (3-col parent)
   ================================================================== */
.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 375px) {
  .footer-links-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .footer-links-grid { display: contents; }
}

/* ==================================================================
   Remove grid lines, keep dark bg + radial glows
   ================================================================== */
.no-grid-lines {
  background-image:
    radial-gradient(60% 50% at 80% 0%, color-mix(in oklab, var(--cyan) 30%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, color-mix(in oklab, var(--neon) 22%, transparent), transparent 70%) !important;
  background-size: auto !important;
}

/* ==================================================================
   Contact desk image — square on mobile, fixed height on lg
   ================================================================== */
.img-sq-to-landscape {
  aspect-ratio: 1;
  height: auto;
}
@media (min-width: 1024px) {
  .img-sq-to-landscape {
    aspect-ratio: auto;
    height: 360px;
  }
}

/* ==================================================================
   Header — nav centered absolutely
   ================================================================== */
.glass-nav { position: relative; }
.glass-nav > nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ==================================================================
   Footer big text watermark
   ================================================================== */
.footer-wordmark {
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(4rem, 12.5vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .2;
  margin-top: 2.5rem;
}

/* ==================================================================
   Button arrow icons — larger and non-shrinkable on mobile
   ================================================================== */
@media (max-width: 768px) {
  .btn-neon svg,
  .btn-ink svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }
}

/* ==================================================================
   Hyphens for long German compound words (all viewports)
   ================================================================== */
:lang(de) h1,
:lang(de) h2,
:lang(de) h3,
:lang(de) .faq-trigger {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ==================================================================
   360px and below — safe zone for 320px devices
   ================================================================== */
@media (max-width: 360px) {

  /* Tighter horizontal padding on sections and containers */
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .max-w-7xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Headings: scale down and allow hyphenation */
  h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  h1 {
    font-size: clamp(1.25rem, 5.5vw, 1.625rem) !important;
    line-height: 1.25 !important;
  }
  h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
    line-height: 1.3 !important;
  }

  /* Subheading and body text */
  .text-lg { font-size: 0.9375rem; }

  /* Tile padding reductions */
  .tile.p-4   { padding: 0.625rem !important; }
  .tile.p-5   { padding: 0.75rem !important; }
  .tile.p-6   { padding: 0.875rem !important; }
  .tile-night.p-6 { padding: 0.875rem !important; }
  .tile-night.p-7 { padding: 0.875rem !important; }

  /* Stat numbers — more compact */
  .stat-big { font-size: 14px; }

  /* Buttons: allow text wrap, tighter padding, smaller font */
  .btn-neon,
  .btn-ink {
    font-size: 0.8rem;
    padding: 0.625rem 1rem;
    white-space: normal;
    height: auto;
    min-height: 2.75rem;
    line-height: 1.35;
    max-width: 100%;
    text-align: center;
  }
  .btn-neon svg,
  .btn-ink svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  /* Header: hide language label text, keep flag + chevron only */
  .lang-current-text { display: none; }
  .glass-nav { padding-left: 0.5rem; padding-right: 0.5rem; }

  /* Hero form card */
  form.signup_form {
    padding: 1rem !important;
  }

  /* FAQ question text */
  .faq-trigger {
    font-size: 0.875rem;
    gap: 0.5rem;
  }

  /* Section vertical breathing room — slightly reduce */
  .py-16  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .pt-16  { padding-top: 2.5rem; }
  .pb-14  { padding-bottom: 2.5rem; }
  .pb-24  { padding-bottom: 3rem; }

  /* Footer wordmark — keep it on screen */
  .footer-wordmark { font-size: clamp(2rem, 9vw, 4rem); }
}