/*
  New Design System: Domain (Unique variant)
  - Typography: Inter (body), Merriweather (headings)
  - Palette: Deep Navy, Slate, Cyan, Violet accents
  - Accessible focus states and reduced motion support
  - Unique class namespace prefix: uq-
*/

/* ----------------------------- Reset & Base ----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.6;
  color: var(--uq-text);
  background: var(--uq-bg);
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

ul, ol { padding-left: 1rem; }

:root {
  /* Core */
  --uq-bg: #0b1220;
  --uq-surface: #0f1629;
  --uq-surface-2: #121b33;
  --uq-text: #e6edf3;
  --uq-text-muted: #c9d4df;
  --uq-border: #23304b;

  /* Brand */
  --uq-primary: #22d3ee;   /* cyan-400 */
  --uq-primary-600: #0891b2; /* cyan-700 */
  --uq-accent: #a78bfa;    /* violet-400 */
  --uq-accent-600: #6d28d9; /* violet-700 */
  --uq-success: #10b981;   /* emerald */
  --uq-danger: #ef4444;    /* red-500 */
  --uq-warning: #f59e0b;   /* amber-500 */

  /* Focus */
  --uq-focus: #7dd3fc; /* sky-300 */

  /* Shadows */
  --uq-shadow-1: 0 8px 20px rgba(2, 6, 23, 0.45);
  --uq-shadow-2: 0 10px 30px rgba(2, 6, 23, 0.55);
}

.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}

a { color: inherit; text-decoration: none; }

/* Focus styles for accessibility */
:where(a, button, [role="button"], input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--uq-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Skip link */
.uq-skip {
  position: absolute;
  left: 8px;
  top: -40px;
  padding: 8px 12px;
  background: var(--uq-primary-600);
  color: #001015;
  border-radius: 6px;
  transition: top .2s ease;
  z-index: 10000;
}
.uq-skip:focus { top: 8px; }

/* Utility */
.uq-link { color: var(--uq-primary); }
.uq-link:hover { color: var(--uq-focus); }

/* Error helper used by JS */
.error-message { color: var(--uq-danger); font-size: .9rem; }
.border-red-500 { border-color: var(--uq-danger) !important; }

/* ----------------------------- Header ----------------------------- */
.uq-header, .hd-top-st {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(9,14,27,0.95), rgba(9,14,27,0.85));
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--uq-border);
  padding: 14px 0;
  z-index: 1000;
  box-shadow: var(--uq-shadow-1);
}

.uq-header__bar, .plot-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.uq-logo, .symbol-graphic {
  width: auto;
  height: 48px;
}

.uq-nav__list, .core-navigation-hub .navigation-elements {
  display: none;
  gap: 28px;
  align-items: center;
  list-style: none;
  padding: 0; margin: 0;
}
@media (min-width: 1200px) {
  .uq-nav__list, .core-navigation-hub .navigation-elements { display: flex; }
}

.uq-nav__link, .portal-anchor {
  position: relative;
  padding: 8px 10px;
  color: var(--uq-text);
  font-weight: 600;
}
.uq-nav__link::after, .portal-anchor::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--uq-primary), var(--uq-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.uq-nav__link:hover::after, .portal-anchor:hover::after { transform: scaleX(1); }

/* Burger */
.uq-burger, .burger {
  width: 36px; height: 28px;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer;
}
.uq-burger::before, .uq-burger::after, .uq-burger span,
.burger::before, .burger::after, .burger span {
  content: "";
  display: block; width: 100%; height: 3px;
  background: var(--uq-text);
  border-radius: 3px;
  transition: transform .35s ease, opacity .2s ease;
}
@media (min-width: 1200px) { .uq-burger, .burger { display: none; } }

/* Mobile panel */
.uq-mobile-panel, .mob-desk-mob {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--uq-surface);
  border-bottom: 1px solid var(--uq-border);
  box-shadow: var(--uq-shadow-2);
}
.uq-mobile-panel.is-open, .mob-desk-mob.is-open { display: block; }
.uq-mobile__list, .portable-nav-collection {
  list-style: none; margin: 0; padding: 18px 0;
  display: grid; gap: 10px; justify-items: center;
}
.uq-mobile__link, .mobile-nav-connection {
  padding: 10px 14px; border-radius: 8px;
  color: var(--uq-text);
}
.uq-mobile__link:hover, .mobile-nav-connection:hover {
  background: rgba(125, 211, 252, 0.1);
}

/* ----------------------------- Sections ----------------------------- */
.main { padding-top: 92px; }

/* Hero */
.uq-hero, .start_section {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,0.18), transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, rgba(167,139,250,0.14), transparent 60%),
              var(--uq-bg);
  padding: clamp(72px, 10vh, 120px) 0;
}
.uq-hero__wrap, .vcup {
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 992px) {
  .uq-hero__wrap, .vcup { grid-template-columns: 1fr 1fr; }
}
.uq-hero__title, .majestic-headline {
  font-family: "Merriweather", Georgia, serif;
  color: var(--uq-text);
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.2;
  margin: 0 0 12px 0;
  letter-spacing: .2px;
}
.uq-hero__lead, .articulate-statement { color: var(--uq-text-muted); }

/* CTA ring button (ellipse) */
.uq-cta__ring, .elipse-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 220px; height: 50px; position: relative;
  color: var(--uq-text); text-align: center;
}
.uq-cta__ring {
  border: 1px solid var(--uq-focus);
  border-radius: 16px;
  transition: all .3s ease;
}
.uq-cta__ring:hover {
  transform: translateY(-4px);
  color: var(--uq-focus);
}
.elipse-link .elipse { border: 1px solid var(--uq-primary); border-radius: 50%; position: absolute; inset: 0; }
.elipse-link .e1 { transform: rotate(-14deg); transition: transform .25s ease; }
.elipse-link .e2 { transform: rotate(6deg); transition: transform .25s ease; }
.uq-cta__ring:hover .e1, .elipse-link:hover .e1 { transform: rotate(-4deg); }
.uq-cta__ring:hover .e2, .elipse-link:hover .e2 { transform: rotate(0deg); }

/* About */
.uq-about.section-f-a, .sivvopst.section-f-a { background: var(--uq-surface); }

.sivvopst  {
  padding: 2rem 0 3rem;
}

.uq-section__title, .dtol, .gdddr, .majestic-section-header, .regal-title, .stately-main-title {
  font-family: "Merriweather", Georgia, serif;
  color: var(--uq-text);
}

/* Cards grid (about + stats) */
.uq-about__grid, .noble-metrics-display { 
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.uq-card, .metric-unit {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--uq-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--uq-shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.uq-card:hover, .metric-unit:hover {
  transform: translateY(-4px);
  box-shadow: var(--uq-shadow-2);
  border-color: var(--uq-primary-600);
}
.uq-card__text, .metric-caption { color: var(--uq-text-muted); }
.uq-metric, .metric-value { font-weight: 800; color: var(--uq-primary); }

/* Stats section */
.uq-stats, .sectionpand {
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(34,211,238,0.12), transparent 60%),
    radial-gradient(1000px 500px at 85% 20%, rgba(167,139,250,0.10), transparent 60%),
    var(--uq-surface-2);
  padding: clamp(54px, 9vh, 110px) 0;
}

/* Benefits section */
.uq-benefits.section-f-a, .sectionzvott12.section-f-a {
  background: linear-gradient(180deg, var(--uq-surface), var(--uq-surface-2));
  padding: clamp(54px, 9vh, 110px) 0;
}
.uq-benefits__grid, .elite-offer-array {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.uq-benefit, .prime-offer-card {
  background: #0f1629;
  border: 1px solid var(--uq-border);
  border-radius: 16px; padding: 18px;
  box-shadow: var(--uq-shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.uq-benefit:hover, .prime-offer-card:hover {
  transform: translateY(-6px);
  border-color: var(--uq-accent-600);
  box-shadow: var(--uq-shadow-2);
}
.uq-benefit__title, .card-headline { color: var(--uq-text); }
.uq-benefit__text, .card-narrative { color: var(--uq-text-muted); }

/* Audience section (who benefits) */
.uq-audience, .showsnowgrow {
  background: var(--uq-bg);
  padding: clamp(54px, 9vh, 110px) 0;
}
.uq-audience__grid, .opulent-service-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.uq-audience__item, .fverrra {
  background: linear-gradient(180deg, rgba(125,211,252,0.08), rgba(167,139,250,0.08));
  border: 1px solid var(--uq-border);
  border-radius: 16px; padding: 18px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.uq-audience__item:hover, .fverrra:hover {
  transform: translateY(-6px);
  border-color: var(--uq-primary);
  box-shadow: var(--uq-shadow-1);
}
.uq-audience__icon, .ig { color: var(--uq-primary); }
.uq-audience__title, .scnewpol { color: var(--uq-text); }
.uq-audience__text, .sntxt { color: var(--uq-text-muted); }

/* Honesty / Accordion */
.uq-honesty.section-f-a, .zicfa.section-f-a { background: var(--uq-surface); }
.uq-honesty__panel, .stately-integrity-panel { text-align: center; }
.accordion-item { border-bottom: 1px dashed var(--uq-border); }
.accordion-summary { color: var(--uq-text); background: transparent; font-size: 1.125rem; }
.accordion-item .accordion-content { color: var(--uq-text-muted); border-left-color: var(--uq-accent-600); }
.prime-accent { color: var(--uq-primary); }

/* Contact & Form */
.uq-contact, .areaost { background: var(--uq-bg); padding: clamp(54px, 9vh, 110px) 0; }
.uq-contact__wrap, .oscrijr { display: grid; gap: 28px; }
@media (min-width: 992px) { .uq-contact__wrap, .oscrijr { grid-template-columns: 1fr 1fr; align-items: start; } }

.uq-form__panel, .formpostje { background: var(--uq-surface); border: 1px solid var(--uq-border); border-radius: 16px; padding: 20px; box-shadow: var(--uq-shadow-1); }
.uq-form__label, .form-caption { color: var(--uq-text); font-weight: 600; }
.uq-input, .form-input-field, .uq-textarea, .form-textarea-field {
  width: 100%;
  color: var(--uq-text);
  background: #0c1324;
  border: 1px solid var(--uq-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.uq-input:focus, .form-input-field:focus, .uq-textarea:focus, .form-textarea-field:focus {
  border-color: var(--uq-focus);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.18);
  outline: none;
}
.uq-form__note, .form-disclaimer { color: var(--uq-text-muted); }

.uq-btn { 
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border-radius: 14px; border: 1px solid transparent;
  padding: 12px 18px; font-weight: 700; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.uq-btn--primary, .form-submit-btn {
  background: linear-gradient(90deg, var(--uq-primary-600), var(--uq-accent-600));
  color: #e8f7fb; border-color: var(--uq-border);
}
.uq-btn--primary:hover, .form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--uq-shadow-2);
}

/* Contact side info */
.uq-contact__title, .stately-main-title { color: var(--uq-text); }
.uq-contact__subtitle, .polished-subtitle, .entry-detail { color: var(--uq-text-muted); }
.uq-contact__icon, .entry-icon { color: var(--uq-primary); }
.noble-contact-list {
  padding-left: 0;
  list-style-type: none;
}
.uq-contact__item {
  display: flex;
  gap: 1rem;
}

.uq-contact__item h3 {
  margin-top: 0;
  line-height: 1;
}

/* Footer */
.uq-footer, .ffblockpanel {
  background: #0a0f1e;
  border-top: 1px solid var(--uq-border);
  padding: clamp(42px, 8vh, 90px) 0;
}
.uq-footer__text, .articulate-disclaimer { color: var(--uq-text-muted); }
.uq-footer__bar, .regal-footer-content {
  display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.uq-footer__nav, .prime-nav-collection { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.uq-footer__link, .distinctive-nav-anchor { color: var(--uq-text); }
.uq-footer__link:hover, .distinctive-nav-anchor:hover { color: var(--uq-primary); }

/* Cookie banner */
.uq-cookie, .elegant-cookie-notice {
  position: fixed; right: 20px; bottom: 20px;
  max-width: 420px; width: calc(100% - 40px);
  background: var(--uq-surface);
  border: 1px solid var(--uq-border);
  border-radius: 16px; box-shadow: var(--uq-shadow-2);
  z-index: 1200;
}
.uq-cookie__title, .prestige-cookie-heading { color: var(--uq-text); }
.uq-cookie__text, .sophisticated-cookie-text { color: var(--uq-text-muted); }
.uq-btn--accept, .luxury-accept-button {
  background: linear-gradient(90deg, var(--uq-success), var(--uq-primary));
  color: #001015; font-weight: 800;
}
.uq-btn--reject, .luxury-reject-button { background: #0c1324; color: var(--uq-text); border: 1px solid var(--uq-border); }
.uq-btn--reject:hover, .luxury-reject-button:hover { border-color: var(--uq-primary); }

/* Generic pages */
.main-content { min-height: 100vh; padding-top: 92px; }
.ptdcftor { background: var(--uq-bg); padding: clamp(46px, 8vh, 70px) 0; }
.ptdcftor-h { font-family: "Merriweather", Georgia, serif; color: var(--uq-text); text-align: center; margin-bottom: 18px; }
.ptdcftor-c { color: var(--uq-text-muted); max-width: 850px; margin: 0 auto; }
.ptdcftor-c h2 { color: var(--uq-text); margin-top: 22px; }
.ptdcftor-c a { color: var(--uq-primary); }
.ptdcftor-c a:hover { color: var(--uq-focus); }

/* ----------------------------- Animations ----------------------------- */
@keyframes uq-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uq-zoom-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

/***** Motion-safe hooks *****/
.uq-hero__wrap, .vcup { animation: uq-fade-up .6s ease both; }
.uq-card, .metric-unit { animation: uq-zoom-in .5s ease both; }
.uq-benefit, .prime-offer-card { animation: uq-zoom-in .5s ease both .05s; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ----------------------------- Legacy safe-guards ----------------------------- */
/* Keep some legacy classes readable until all HTML pages are migrated */
.brand-title { font-family: "Merriweather", Georgia, serif; color: var(--uq-text); }
.mobile-nav-connection { color: var(--uq-text); }
.portal-anchor { color: var(--uq-text); }
.symbol-graphic { filter: drop-shadow(0 2px 8px rgba(2,6,23,.5)); }

/* Ensure body lock works from existing JS if used */
body.lock { overflow: hidden; }