@font-face {
  font-family: 'Tamzwart';
  src: url('/assets/fonts/Tamzwart.ttf') format('truetype');
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #FAF8F4;
  color: #211D17;
}

a {
  color: #C2122F;
  text-decoration: none;
}

a:hover {
  color: #8E0C22;
}

::selection {
  background: rgba(194, 18, 47, 0.16);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #FAF8F4;
  position: relative;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}

.bg-pattern {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/pattern.svg');
  background-size: 440px auto;
  opacity: 0.14;
  pointer-events: none;
}

.bg-fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(56% 50% at 50% 46%, #FAF8F4 18%, rgba(250, 248, 244, 0) 100%);
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(10px, 3vh, 40px) 24px clamp(10px, 3vh, 40px);
  animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.logo {
  width: min(320px, 72vw, 42vh);
  height: auto;
  margin: 0 0 clamp(20px, 9vh, 80px);
}

.title {
  margin: 0 0 2px;
  font-family: 'Tamzwart', 'Noto Sans Tifinagh', sans-serif;
  font-weight: 400;
  font-size: min(clamp(46px, 10.5vw, 92px), 14vh);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #211D17;
}

.subtitle {
  margin: 0 auto clamp(16px, 5vh, 38px);
  max-width: 580px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(33, 29, 23, 0.6);
  text-wrap: pretty;
}

.tagline {
  margin: 0 auto -6px;
  max-width: 620px;
  font-family: 'Tamzwart', 'Noto Sans Tifinagh', sans-serif;
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(33, 29, 23, 0.85);
  text-wrap: pretty;
}

.tagline-latin {
  margin: 0 auto;
  max-width: 560px;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(33, 29, 23, 0.55);
  text-wrap: pretty;
}

.socials {
  display: flex;
  gap: 12px;
  margin-top: clamp(18px, 6.5vh, 52px);
}

.social-link {
  --brand: #C2122F;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(33, 29, 23, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(33, 29, 23, 0.78);
  background: rgba(250, 248, 244, 0.6);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
  background: none;
  transform: translateY(-2px);
}

.social-link--x         { --brand: #000000; }
.social-link--facebook  { --brand: #1877F2; }
.social-link--instagram { --brand: #E4405F; }
.social-link--medium    { --brand: #000000; }

@media (prefers-reduced-motion: reduce) {
  .social-link { transition: none; }
  .social-link:hover,
  .social-link:focus-visible { transform: none; }
}

.footer {
  position: relative;
  z-index: 1;
  padding: 16px 24px 24px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(33, 29, 23, 0.48);
}

.footer span {
  letter-spacing: 0.25px;
}

.footer-name {
  font-family: Tamzwart, "Noto Sans Tifinagh", sans-serif;
}