/* ─── Nverner — sister to Shshukner ────────────────────────────────────── */

:root {
  --bg:         #0F1938;
  --bg-elev:   #162248;
  --card:      #1D2A5A;
  --border:    #303D70;
  --text:      #E5E7EB;
  --text-sec:  #A0A6C4;
  --text-mute: #6F7497;

  --violet:    #8B5CF6;   /* Shshukner continuity */
  --violet-2:  #A78BFA;
  --gold:      #F59E0B;   /* crypto accent */
  --coral:     #FB7185;   /* gift-cards accent */
  --mint:      #34D399;   /* gifts accent */

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-1: 0 10px 30px -10px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Armenian", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── Language switch ──────────────────────────────────────────────────── */

.lang-switch {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 50;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(22,34,72,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.lang-btn {
  background: transparent;
  border: 0;
  color: var(--text-sec);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all .2s ease;
}
.lang-btn.active {
  background: var(--violet);
  color: #fff;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 92vh;
  padding: 120px 24px 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.hero-inner {
  position: relative;
  max-width: 780px;
  text-align: center;
}

/* Diagonal ribbon background — subtle gift-wrap motif */
.ribbon-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(800px 500px at 80% 90%, rgba(245,158,11,.08), transparent 55%),
    radial-gradient(600px 400px at 15% 60%, rgba(52,211,153,.06), transparent 60%);
}
.ribbon-bg::before,
.ribbon-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.15), transparent);
  left: -50%;
  transform-origin: center;
}
.ribbon-bg::before { top: 30%; transform: rotate(-8deg); }
.ribbon-bg::after  { top: 70%; transform: rotate(-8deg); background: linear-gradient(90deg, transparent, rgba(245,158,11,.12), transparent); }

/* Wordmark */
.wordmark {
  font-size: clamp(64px, 10vw, 112px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  font-family: "Segoe UI", -apple-system, sans-serif;
}
.wm-n {
  background: linear-gradient(135deg, var(--violet) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wm-rest { color: var(--text); }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--violet-2);
  margin: 0 0 14px;
}

.tagline {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--text);
}

.sub {
  font-size: 16px;
  color: var(--text-sec);
  max-width: 540px;
  margin: 0 auto 36px;
}

/* Balance card (placeholder for future sync with Shshukner) */
.balance-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 40px;
  margin-bottom: 32px;
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-elev) 100%);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  min-width: 240px;
}
.balance-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.balance-value {
  font-size: 38px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--violet-2) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 2px 0;
  letter-spacing: -0.02em;
}
.balance-hint {
  font-size: 11px;
  color: var(--text-mute);
}

/* CTA with animated conic border */
.cta {
  position: relative;
  display: inline-block;
  padding: 2px;
  border-radius: var(--r-pill);
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--a, 0deg), var(--violet), var(--gold), var(--coral), var(--mint), var(--violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 8s linear infinite;
}
.cta-inner {
  display: inline-block;
  padding: 14px 32px;
  background: var(--bg);
  border-radius: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin {
  to { --a: 360deg; }
}
/* Fallback for browsers without @property — use simple gradient glow */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .cta::before { display: none; }
  .cta { background: linear-gradient(135deg, var(--violet), var(--gold)); }
  .cta-inner { background: var(--bg); margin: 2px; }
}

/* ─── Sections ─────────────────────────────────────────────────────────── */

.sections {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: grid;
  gap: 28px;
}

.reward {
  position: relative;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.reward::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--section-accent, var(--violet)), transparent);
}
.reward[data-accent="gold"]  { --section-accent: var(--gold); }
.reward[data-accent="coral"] { --section-accent: var(--coral); }
.reward[data-accent="mint"]  { --section-accent: var(--mint); }

.reward:hover {
  transform: translateY(-3px);
  border-color: var(--section-accent);
  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--section-accent) 25%, transparent),
              var(--shadow-1);
}

.reward-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.sec-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--section-accent) 14%, transparent);
  color: var(--section-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sec-icon svg { width: 24px; height: 24px; }

.sec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 2px;
}
.sec-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sec-desc {
  color: var(--text-sec);
  margin: 0 0 24px;
  max-width: 680px;
}

/* Crypto partner card */
.partner-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.partner-logo {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 18%, var(--bg)), var(--card));
  display: grid; place-items: center;
  flex-shrink: 0;
}
.logo-placeholder {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-mute);
}
.partner-info { flex: 1; min-width: 0; }
.partner-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.partner-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  transition: all .2s ease;
}
.contact-chip svg { width: 14px; height: 14px; }
.contact-chip:not(.disabled):not(.soon):hover {
  background: var(--section-accent);
  color: #fff;
  border-color: var(--section-accent);
}
.contact-chip.disabled,
.contact-chip.soon {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Grid placeholder for gift cards / gifts */
.grid-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.slot {
  aspect-ratio: 5 / 3;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--section-accent) 6%, var(--bg-elev)),
      var(--bg-elev));
  border: 1px dashed var(--border);
  position: relative;
  overflow: hidden;
}
.slot.tall { aspect-ratio: 3 / 4; }
.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--section-accent) 8%, transparent) 50%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { transform: translateX(-40%); opacity: .4; }
  50%     { transform: translateX(40%);  opacity: .8; }
}

.placeholder-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
  font-style: italic;
}

/* ─── Footer ───────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
  padding: 40px 20px;
  color: var(--text-mute);
}
.foot-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.foot-brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
}
.foot-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 2px;
}
.foot-links {
  display: flex;
  gap: 18px;
  font-size: 13px;
  flex-wrap: wrap;
  justify-content: center;
}
.foot-links a { color: var(--text-sec); }
.foot-links a:hover { color: var(--violet-2); }
.foot-copy {
  font-size: 12px;
  text-align: right;
  color: var(--text-mute);
}

/* ─── Home: clickable navigation tiles ─────────────────────────────────── */

.nav-tiles {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 20px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  color: var(--text);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  overflow: hidden;
  min-height: 260px;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--section-accent, var(--violet)), transparent 80%);
}
.tile[data-accent="gold"]  { --section-accent: var(--gold); }
.tile[data-accent="coral"] { --section-accent: var(--coral); }
.tile[data-accent="mint"]  { --section-accent: var(--mint); }
.tile:hover {
  transform: translateY(-4px);
  border-color: var(--section-accent);
  box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--section-accent) 30%, transparent),
              var(--shadow-1);
}
.tile-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--section-accent) 14%, transparent);
  color: var(--section-accent);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.tile-icon svg { width: 28px; height: 28px; }
.tile-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.tile-desc {
  color: var(--text-sec);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 24px;
  flex: 1;
}
.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--section-accent);
}
.tile-cta .arrow {
  transition: transform .3s ease;
}
.tile:hover .tile-cta .arrow {
  transform: translateX(4px);
}

/* ─── Sub-page layout (crypto / giftcards / gifts) ─────────────────────── */

.page-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(15,25,56,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: all .2s ease;
}
.back-link:hover {
  color: var(--text);
  border-color: var(--violet-2);
  background: var(--bg-elev);
}
.back-arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--violet-2);
}

.logo-home {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.logo-home .wm-n {
  background: linear-gradient(135deg, var(--violet) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-lang {
  position: static;
  top: auto;
  right: auto;
}

.page-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 20px 80px;
}

.page-title-block {
  text-align: center;
  margin-bottom: 48px;
}
.page-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--section-accent);
  margin: 0 0 12px;
}
.page-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.page-sub {
  color: var(--text-sec);
  font-size: 16px;
  margin: 0;
  max-width: 540px;
  margin-inline: auto;
}

.page-body[data-accent="gold"]  { --section-accent: var(--gold); }
.page-body[data-accent="coral"] { --section-accent: var(--coral); }
.page-body[data-accent="mint"]  { --section-accent: var(--mint); }

.story {
  margin: 40px 0 60px;
}
.story p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-sec);
  margin: 0 0 18px;
}
.story p:first-child::first-letter {
  font-size: 2.4em;
  font-weight: 800;
  float: left;
  line-height: 1;
  padding: 6px 10px 0 0;
  background: linear-gradient(135deg, var(--section-accent), var(--violet-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Big centered credo */
.credo {
  padding: 80px 20px;
  text-align: center;
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--violet-2) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 40px 0;
  position: relative;
}
.credo::before,
.credo::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.credo::before { margin-bottom: 40px; }
.credo::after  { margin-top: 40px; }

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .hero { padding: 90px 16px 60px; }
  .partner-card { flex-direction: column; text-align: center; align-items: flex-start; }
  .foot-inner { grid-template-columns: 1fr; text-align: center; }
  .foot-brand, .foot-copy { text-align: center; }
  .nav-tiles { padding: 40px 16px 60px; }
}