@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/vollkorn-v30-greek_latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/vollkorn-v30-greek_latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/vollkorn-v30-greek_latin-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ubuntu-v21-greek_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ubuntu-v21-greek_latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ubuntu-v21-greek_latin-700.woff2') format('woff2');
}

:root {
  --hq-bg: #0c1130;
  --hq-bg-2: #121a40;
  --hq-bg-3: #1a2352;
  --hq-bg-4: #233066;
  --hq-line: #2d3a6e;
  --hq-line-2: #3b4a86;
  --hq-rule: #5a4a24;

  --hq-violet: #8b5cf6;
  --hq-violet-2: #a982ff;
  --hq-violet-dk: #6a3fd6;
  --hq-gold: #e8b64c;
  --hq-gold-2: #f6d27e;
  --hq-gold-dk: #b8862a;
  --hq-cyan: #41cfe6;
  --hq-cyan-dk: #1f9fc0;
  --hq-pink: #f15580;

  --hq-parch: #f3e8cd;
  --hq-parch-2: #e6d5ad;
  --hq-ink: #0b1024;
  --hq-text: #f4eedc;
  --hq-cream: #f6f1e2;
  --hq-soft: #ccc9e6;
  --hq-muted: #9a9ac4;

  --hq-ff-display: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --hq-ff-body: 'Ubuntu', system-ui, -apple-system, sans-serif;
  --hq-fw-body: 500;
  --hq-fw-bd: 700;

  --hq-r-lg: 26px;
  --hq-r: 18px;
  --hq-r-sm: 12px;
  --hq-r-xs: 8px;

  --hq-header-h: 142px;
  --hq-shadow: 0 18px 44px rgba(5, 8, 24, 0.55);
  --hq-glow-v: 0 0 26px rgba(139, 92, 246, 0.45);
  --hq-glow-c: 0 0 26px rgba(65, 207, 230, 0.4);
  --hq-grad-border: linear-gradient(140deg, var(--hq-gold), var(--hq-violet) 52%, var(--hq-cyan));

  --hq-rune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3Cpath d='M12 1.5v6M12 16.5v6M1.5 12h6M16.5 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hq-header-h) + 16px); }

body {
  margin: 0;
  background: var(--hq-bg);
  color: var(--hq-text);
  font-family: var(--hq-ff-body);
  font-weight: var(--hq-fw-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: var(--hq-gold-2); text-decoration: none; }

[hidden] { display: none !important; }

.hq-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
}

.hq-ic {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  flex: none;
}

.hq-h1, .hq-h2, .hq-h3 {
  font-family: var(--hq-ff-display);
  color: var(--hq-text);
  line-height: 1.06;
  margin: 0;
}
.hq-h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.01em; }
.hq-h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); }
.hq-h3 { font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.85rem); }

.hq-p {
  font-family: var(--hq-ff-body);
  font-weight: var(--hq-fw-body);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--hq-soft);
  margin: 0;
}
.hq-p--lg { font-size: 1.26rem; }
.hq-p--sm { font-size: 1.02rem; color: var(--hq-muted); }
.hq-mark { color: var(--hq-gold-2); font-weight: var(--hq-fw-bd); }
.hq-mark--cyan { color: var(--hq-cyan); }

.hq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  height: 56px;
  padding: 0 1.7rem;
  background: linear-gradient(to top, var(--hq-violet-dk), var(--hq-violet) 55%, var(--hq-violet-2));
  color: var(--hq-cream);
  border-radius: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 14px 30px rgba(13, 6, 48, 0.55), var(--hq-glow-v);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--hq-ff-body);
  font-weight: var(--hq-fw-bd);
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hq-btn span {
  font-size: 1.02rem;
  font-weight: var(--hq-fw-bd);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hq-btn__t1 { position: relative; display: inline-block; transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.4s ease; }
.hq-btn__t2 { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(115%); opacity: 0; transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.4s ease; }
.hq-btn:hover .hq-btn__t1 { transform: translateY(-115%); opacity: 0; }
.hq-btn:hover .hq-btn__t2 { transform: translateY(0); opacity: 1; }
.hq-btn--gold {
  background: linear-gradient(to top, var(--hq-gold-dk), var(--hq-gold) 55%, var(--hq-gold-2));
  color: var(--hq-ink);
  box-shadow: 0 14px 30px rgba(13, 6, 48, 0.55), 0 0 26px rgba(232, 182, 76, 0.4);
}
.hq-btn--cyan {
  background: linear-gradient(to top, var(--hq-cyan-dk), var(--hq-cyan) 60%, #8ee9f6);
  color: var(--hq-ink);
  box-shadow: 0 14px 30px rgba(13, 6, 48, 0.55), var(--hq-glow-c);
}
.hq-btn--sm { min-width: 120px; height: 46px; }

.hq-gbtn {
  --gb-bg: var(--hq-bg-2);
  display: inline-flex;
  padding: 0.95em 2.1em;
  border-radius: 50px;
  border: none;
  background: var(--gb-bg);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0.5em 1.6em -0.4em rgba(139, 92, 246, 0.45);
}
.hq-gbtn__content {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  position: relative;
  z-index: 2;
  color: var(--hq-cream);
  font-family: var(--hq-ff-body);
  font-weight: var(--hq-fw-bd);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hq-gbtn__icon {
  width: 1.25em;
  height: 1.25em;
  transition: transform 0.3s ease;
  filter: brightness(0) invert(1);
}
.hq-gbtn:hover .hq-gbtn__icon { transform: translateX(0.25em) rotate(-10deg); }
.hq-gbtn::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  background: conic-gradient(from 0deg, var(--gb-bg) 0deg, var(--hq-violet) 60deg, var(--hq-cyan) 120deg, var(--gb-bg) 180deg, var(--hq-pink) 240deg, var(--hq-violet) 300deg, var(--gb-bg) 360deg);
  border-radius: 50px;
  animation: hq-nebula 4s linear infinite;
  filter: blur(8px);
  opacity: 0.72;
  transition: opacity 0.3s ease;
}
.hq-gbtn:hover::before { opacity: 1; animation-duration: 2s; }
.hq-gbtn::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--gb-bg);
  border-radius: 48px;
  z-index: 1;
}
.hq-gbtn__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 32%, #fff 1px, transparent 1.6px), radial-gradient(circle at 80% 68%, #fff 1px, transparent 1.6px), radial-gradient(circle at 44% 80%, #fff 0.6px, transparent 1.2px);
  background-size: 120% 120%;
  opacity: 0.32;
  transition: opacity 0.3s ease;
}
.hq-gbtn:hover .hq-gbtn__stars { opacity: 0.85; animation: hq-star-drift 5s linear infinite alternate; }
.hq-gbtn--cyan { box-shadow: 0 0.5em 1.6em -0.4em rgba(65, 207, 230, 0.45); }

.hq-card {
  position: relative;
  border: 4px solid transparent;
  border-radius: var(--hq-r);
  background: linear-gradient(158deg, var(--hq-bg-3), var(--hq-bg-2)) padding-box, var(--hq-grad-border) border-box;
  padding: 1.85rem 1.7rem;
  transition: box-shadow 0.32s ease;
}
.hq-card > * { position: relative; z-index: 1; }
.hq-card:hover { box-shadow: var(--hq-glow-v); }

.hq-stitle { max-width: none; }
.hq-stitle--center { margin-inline: auto; text-align: center; }
.hq-stitle__kick {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--hq-ff-body);
  font-weight: var(--hq-fw-bd);
  font-size: 1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hq-cyan);
}
.hq-stitle__kick::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--hq-rune) center / contain no-repeat;
  mask: var(--hq-rune) center / contain no-repeat;
}
.hq-stitle__h {
  font-family: var(--hq-ff-display);
  font-weight: 800;
  font-size: clamp(2.05rem, 4.4vw, 3.35rem);
  line-height: 1.05;
  color: var(--hq-text);
  margin: 0.55rem 0 0;
}
.hq-stitle__h em {
  display: block;
  font-style: italic;
  font-weight: 600;
  color: var(--hq-gold-2);
}
.hq-stitle__sub {
  font-family: var(--hq-ff-body);
  font-weight: var(--hq-fw-bd);
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--hq-soft);
  margin: 0.95rem 0 0;
}
.hq-stitle--center .hq-stitle__sub { margin-inline: auto; }

.hq-seal {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: radial-gradient(circle at 38% 32%, var(--hq-violet-2), var(--hq-violet-dk)) padding-box, var(--hq-grad-border) border-box;
  color: var(--hq-gold-2);
  font-family: var(--hq-ff-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  box-shadow: var(--hq-glow-v), inset 0 0 14px rgba(11, 16, 36, 0.5);
}
.hq-seal--sm { width: 42px; height: 42px; border-width: 2px; font-size: 0.9rem; }

.hq-shead { max-width: none; }
.hq-shead--center { margin-inline: auto; text-align: center; }
.hq-shead__kick { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--hq-ff-body); font-weight: var(--hq-fw-bd); font-size: 1rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hq-cyan); }
.hq-shead__kick::before { content: ""; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--hq-rune) center / contain no-repeat; mask: var(--hq-rune) center / contain no-repeat; }
.hq-shead__h { margin: 0.6rem 0 0; font-family: var(--hq-ff-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.07; color: var(--hq-text); }
.hq-shead__h em { font-style: italic; font-weight: 700; color: var(--hq-gold-2); }
.hq-shead__sub { margin: 0.85rem 0 0; font-family: var(--hq-ff-body); font-weight: var(--hq-fw-body); font-size: 1.14rem; line-height: 1.6; color: var(--hq-soft); }
.hq-shead--center .hq-shead__sub { margin-inline: auto; }

@keyframes hq-nebula { to { transform: rotate(360deg); } }
@keyframes hq-star-drift { from { transform: scale(1); } to { transform: scale(1.1) translate(-2%, -2%); } }
@keyframes hq-settle {
  from { opacity: 0; transform: perspective(900px) rotateX(-16deg) translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes hq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hq-spin { to { transform: rotate(360deg); } }
@keyframes hq-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.45)); } 50% { filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.85)); } }

.hq-reveal { animation: hq-settle 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hq-float { animation: hq-float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .hq-card:hover { transform: none; }
}
