:root {
      --insta-blue: #0040ff;
      --insta-purple: #7b5cff;
      --insta-pink: #ff4f9a;
      --bg-dark: #050821;
      --card-bg: #0c102b;
      --card-soft: #121735;
      --text-main: #f9fbff;
      --text-muted: #a7b0d8;
      --accent-green: #36e2a4;
      --accent-yellow: #ffc857;
      --radius-lg: 22px;
      --shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.45);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(123, 92, 255, 0.45), transparent 55%),
        radial-gradient(circle at top right, rgba(255, 79, 154, 0.5), transparent 55%),
        radial-gradient(circle at bottom, rgba(0, 64, 255, 0.55), #050821 70%);
      color: var(--text-main);
      /* a footer sáv zárja az oldalt (ne maradjon alatta a főoldal háttérből sáv) */
      padding: 32px 20px 0;
    }

    .page {
      max-width: 1120px;
      margin: 0 auto;
    }

    /* HERO */

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 32px;
    }

    @media (max-width: 800px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .hero-main {
      position: relative;
      background: linear-gradient(135deg, #111633, #161d42);
      border-radius: 26px;
      padding: 26px 26px 26px 26px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .hero-main::before,
    .hero-main::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(18px);
      opacity: 0.6;
      pointer-events: none;
    }

    .hero-main::before {
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(0, 64, 255, 0.9), transparent 70%);
      top: -60px;
      right: -40px;
    }

    .hero-main::after {
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(255, 79, 154, 0.9), transparent 70%);
      bottom: -70px;
      left: -40px;
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      background: rgba(0, 64, 255, 0.1);
      color: #d0dcff;
      border: 1px solid rgba(0, 64, 255, 0.5);
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .hero-pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--accent-green);
    }

    .hero-title {
      position: relative;
      z-index: 1;
      font-size: 30px;
      line-height: 1.3;
      margin-bottom: 14px;
    }

    .hero-title span.highlight {
      background: linear-gradient(90deg, #ffdd63, #ff4f9a);
      -webkit-background-clip: text;
      color: transparent;
      font-weight: 700;
    }

    .hero-sub {
      position: relative;
      z-index: 1;
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
      max-width: 520px;
    }

    .hero-big {
      position: relative;
      z-index: 1;
      margin-top: 18px;
    }

    .hero-big-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #c5d1ff;
      margin-bottom: 6px;
    }

    .hero-big-value {
      font-size: 40px;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    .hero-big-value span {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-muted);
      margin-left: 8px;
    }

    .hero-meta {
      margin-top: 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .hero-meta strong {
      color: var(--accent-green);
      font-weight: 600;
    }

    .hero-secondary {
      position: relative;
      z-index: 1;
      margin-top: 20px;
      font-size: 14px;
      color: var(--text-muted);
    }

    .hero-secondary span {
      color: var(--accent-yellow);
      font-weight: 700;
    }

    .hero-side {
      background: radial-gradient(circle at top, rgba(123, 92, 255, 0.8), transparent 60%),
                  linear-gradient(145deg, #141a3b, #111633);
      border-radius: 26px;
      padding: 22px 22px 24px;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .hero-side-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .hero-side-sub {
      font-size: 13px;
      color: #d1d9ff;
      margin-bottom: 14px;
    }

    .hero-side-total {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .hero-side-note {
      font-size: 14px;
      font-weight: 700;
      color: #f9fbff;
      line-height: 1.5;
      margin-top: 8px;
    }

    .hero-ring {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero-ring-label {
      font-size: 13px;
      color: #d0dcff;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .ring-track {
      width: 240px;
      height: 240px;
      border-radius: 999px;
      border: 14px solid rgba(255, 255, 255, 0.08);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ring-fill {
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      border: 14px solid transparent;
      border-top-color: #ffdd63;
      border-right-color: #ff4f9a;
      border-bottom-color: #0040ff;
      transform: rotate(-90deg);
      animation: spin 9s linear infinite;
      opacity: 0.95;
    }

    .ring-value {
      position: relative;
      font-size: 15px;
      text-align: center;
      color: #f9fbff;
      line-height: 1.45;
      max-width: 160px;
    }

    @keyframes spin {
      from { transform: rotate(-90deg); }
      to   { transform: rotate(270deg); }
    }

    /* STATS GRID */

    .stats-section {
      margin-top: 18px;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
    }

    .stats-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stats-note {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 14px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
    }

    .card {
      position: relative;
      background: var(--card-soft);
      border-radius: var(--radius-lg);
      padding: 26px 18px 16px;
      box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10px;
      padding-left: 78px;
    }

    .card-title {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .card-emoji {
      font-size: 18px;
    }

    .card-tag {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0, 64, 255, 0.1);
      color: #d0dcff;
      border: 1px solid rgba(0, 64, 255, 0.5);
    }

    .card-value {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 6px;
      padding-left: 78px;
    }

    .card-sub {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 12px;
      padding-left: 78px;
    }

    .bar-wrapper {
      margin-top: 6px;
      padding-left: 78px;
    }

    .bar-track {
      width: 100%;
      height: 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #ffc857, #ff4f9a, #00e3ff);
      box-shadow: 0 0 12px rgba(255, 200, 87, 0.8);
      transition: width 1.3s ease-out;
    }

    .bar-label-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    @media (max-width: 768px) {
      body {
        padding: 20px 14px 0;
      }
      .hero-title {
        font-size: 24px;
      }
      .hero-big-value {
        font-size: 32px;
      }
      .ring-track {
        width: 200px;
        height: 200px;
      }
      .story-grid {
        grid-template-columns: 1fr;
      }
    }

    .hero-summary-strip {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 14px;
      margin-top: 6px;
    }

    .hero-summary-item {
      flex: 0 1 auto;
      padding: 8px 12px;
      border-radius: 999px;
      background: radial-gradient(circle at top left, rgba(0, 64, 255, 0.6), transparent 70%),
                  radial-gradient(circle at bottom right, rgba(255, 79, 154, 0.5), transparent 65%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-size: 12px;
    }

    .hero-summary-item-label {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 600;
      color: #e4e8ff;
      opacity: 0.9;
    }

    .hero-summary-item-value {
      font-weight: 700;
      font-size: 13px;
      color: #ffffff;
    }

    .card-hero-icon {
      position: absolute;
      left: 16px;
      top: 18px;
      width: 64px;
      height: 64px;
      border-radius: 20px;
      background: radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 55%),
                  linear-gradient(145deg, rgba(255, 221, 99, 0.15), rgba(0, 64, 255, 0.45));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }

    .card-hero-icon.truck {
      background: radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 55%),
                  linear-gradient(145deg, rgba(54, 226, 164, 0.25), rgba(0, 64, 255, 0.45));
    }

.card-hero-emoji{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  transform: translateY(1px);
}

    /* STORYLINE */

    .storyline {
      margin-top: 14px;
      margin-bottom: 12px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
      border-radius: 26px;
      padding: 18px 18px;
    }

    .story-title {
      font-size: 14px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #d0dcff;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .story-title .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ffc857, #ff4f9a, #00e3ff);
      box-shadow: 0 0 18px rgba(255, 79, 154, 0.55);
    }

    .story-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .story-card {
      background: rgba(12, 16, 43, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 20px;
      padding: 14px 14px;
      position: relative;
      overflow: hidden;
    }

    .story-card::after {
      content: "";
      position: absolute;
      inset: -40px -40px auto auto;
      width: 140px;
      height: 140px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(0, 64, 255, 0.35), transparent 70%);
      filter: blur(18px);
      opacity: 0.8;
    }

    .story-icon {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: radial-gradient(circle at top, rgba(255, 255, 255, 0.20), transparent 55%),
                  linear-gradient(145deg, rgba(123, 92, 255, 0.25), rgba(0, 64, 255, 0.35));
      box-shadow: 0 14px 26px rgba(0,0,0,0.45);
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .story-card h3 {
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 6px;
      position: relative;
      z-index: 1;
    }

    .story-card p {
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-muted);
      position: relative;
      z-index: 1;
    }

	/* BRANDS */
	.brands-grid{
	  margin-top:14px;
	  display:grid;
	  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
	  gap:18px;
	  align-items:start;
	}
	@media (max-width: 980px){ .brands-grid{ grid-template-columns:1fr; } }
	.brands-card{ padding:18px 18px 16px; }
	.brands-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
	.brands-kicker{ font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:#c5d1ff; margin-bottom:6px; }
	.brands-headline{ font-size:18px; font-weight:800; line-height:1.25; }
	.brands-bridge{ font-size:14px; color:var(--text-muted); line-height:1.55; margin-bottom:10px; }
	.brands-table{ display:grid; gap:8px; margin-top:10px; }

	.brand-row{
	  display:grid;
	  grid-template-columns:28px minmax(0,1.2fr) minmax(0,1fr) 64px;
	  gap:10px;
	  align-items:center;
	  padding:10px;
	  border-radius:16px;
	  background:rgba(12,16,43,.55);
	  border:1px solid rgba(255,255,255,.06);
	  overflow:hidden;
	}
	.brand-rank{ font-size:12px; color:#cbd5ff; opacity:.9; text-align:center; }
	.brand-name{ font-size:14px; font-weight:800; letter-spacing:.02em; }
	.brand-meta{ font-size:12px; color:var(--text-muted); display:flex; justify-content:flex-end; white-space:nowrap; }
	.brand-meta strong{ color:#f9fbff; font-weight:800; }
	.brand-share{ font-size:12px; text-align:right; color:#d0dcff; font-weight:800; }
	.brand-bar-track{ grid-column:2/-1; height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:8px; }
	.brand-bar-fill{ height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#ffc857,#ff4f9a,#00e3ff); box-shadow:0 0 10px rgba(255,200,87,.55); transition:width 1.2s ease-out; }

	.wordcloud{
	  margin-top:10px;
	  padding:14px 12px;
	  border-radius:18px;
	  background:rgba(12,16,43,.55);
	  border:1px solid rgba(255,255,255,.06);
	  display:flex;
	  flex-wrap:wrap;
	  gap:10px 12px;
	  align-items:center;
	  justify-content:center;
	  min-height:230px;
	  position:relative;
	  overflow:hidden;
	}
	.cloud-word{
	  position:relative;
	  display:inline-flex;
	  cursor:pointer;
	  user-select:none;
	  padding:2px 6px;
	  border-radius:999px;
	  border:1px solid rgba(255,255,255,0);
	  transition:transform 120ms ease,border-color 120ms ease,background 120ms ease;
	  letter-spacing:.01em;
	}
	.cloud-word:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); }

	.tooltip{
	  position:fixed;
	  z-index:9999;
	  pointer-events:none;
	  background:rgba(10,14,40,.92);
	  border:1px solid rgba(255,255,255,.14);
	  color:#f9fbff;
	  padding:8px 10px;
	  border-radius:12px;
	  box-shadow:0 18px 40px rgba(0,0,0,.55);
	  font-size:12px;
	  line-height:1.35;
	  transform:translate(10px,10px);
	  opacity:0;
	  transition:opacity 120ms ease;
	  max-width:260px;
	}
	.tooltip.visible{ opacity:1; }

	.pill{
	  font-size:11px;
	  padding:4px 10px;
	  border-radius:999px;
	  letter-spacing:.08em;
	  text-transform:uppercase;
	  border:1px solid rgba(255,255,255,.12);
	}

	.pill-muted{
	  color:#d0dcff;
	  background:rgba(255,255,255,.03);
	}

	.other-card {
	  padding-bottom: 12px;
	}

/* --- Harmonizálás: kártyán belüli főcím (age + drive) --- */
	.age-title {
	  font-size: 26px;       /* eddig túl nagy volt */
	  line-height: 1.15;
	  letter-spacing: -0.02em;
	  margin: 6px 0 6px;
	}

	.age-sub {
	  font-size: 14px;
	  line-height: 1.45;
	}

	/* Mobilon még egy fokkal kisebb, hogy ne nyomja össze a layoutot */
	@media (max-width: 640px) {
	  .age-title { font-size: 22px; }
	  .age-sub { font-size: 13px; }
	}

/* Top 3 model podium – finom erősítés */
	#modelTopCard1, #modelTopCard2, #modelTopCard3 {
	  border: 1px solid rgba(255,255,255,0.10);
	  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	}

	#modelTopCard1 h3, #modelTopCard2 h3, #modelTopCard3 h3 {
	  font-size: 18px;
	}

	#modelTopCard1 p, #modelTopCard2 p, #modelTopCard3 p {
	  font-size: 14px;
	}
	.story-icon {
	  font-size: 28px;
	}
/* ================================
   WRAPPED CSÚCSPONT HIERARCHIA PATCH
   Top10 modellek legyen hangsúlyosabb, mint Top10 márkák
   ================================ */

/* --- 1) TOP 10 MÁRKÁK: egy fokkal halkabb --- */
	#topBrandsCard {
	  box-shadow: 0 10px 22px rgba(0,0,0,0.32);      /* kisebb árnyék */
	  border-color: rgba(255,255,255,0.07);          /* visszafogottabb keret */
	}
	#topBrandsCard .brands-headline {
	  font-size: 17px;                                /* picit kisebb cím */
	}

	/* --- 2) TOP 10 MODELLEK: Top3 dobogó kártyák legyenek "hero" --- */
	#modelTopCard1, #modelTopCard2, #modelTopCard3 {
	  background: rgba(12, 16, 43, 0.78);             /* sötétebb, kontrasztosabb */
	  border-color: rgba(255,255,255,0.12);           /* erősebb keret */
	  box-shadow: 0 18px 40px rgba(0,0,0,0.52);       /* erősebb árnyék */
	  padding: 18px 18px;                             /* több levegő */
	}
	#modelTopCard1 h3, #modelTopCard2 h3, #modelTopCard3 h3 {
	  font-size: 18px;                                /* nagyobb cím a kártyán */
	}
	#modelTopCard1 p, #modelTopCard2 p, #modelTopCard3 p {
	  font-size: 14px;                                /* nagyobb meta szöveg */
	}

	/* --- 3) TOP 10 MODELLEK: 4–10 lista kártya legyen "fő blokk" --- */
	/* Modern Chrome támogatja a :has()-t; ha valakinél nem, ettől még nem romlik el semmi */
	.card.brands-card:has(#topModelsTable) {
	  box-shadow: 0 20px 48px rgba(0,0,0,0.58);       /* nagyobb tömbérzet */
	  border-color: rgba(255,255,255,0.12);
	}
	.card.brands-card:has(#topModelsTable) .brands-headline {
	  font-size: 20px;                                 /* hangsúlyosabb cím */
	}

	/* --- 4) Top3 és 4–10 között "összetartás" érzet --- */
	.story-grid {
	  margin-bottom: 10px;                             /* kicsit közelebb a listához */
	}
	/* Top10 modellek – csúcspont tömb */
	.topmodels-hero {
	  box-shadow: 0 26px 70px rgba(0,0,0,0.65);
	  border-color: rgba(255,255,255,0.12);
	}

	.topmodels-podium {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 12px;
	  margin-top: 12px;
	}

	.topmodels-card {
	  border: 1px solid rgba(255,255,255,0.12);
	  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	  padding: 18px;
	  background: rgba(12, 16, 43, 0.68);
	}

	.topmodels-rest-head {
	  margin-top: 16px;
	  padding-top: 12px;
	  border-top: 1px solid rgba(255,255,255,0.08);
	}

	@media (max-width: 900px) {
	  .topmodels-podium { grid-template-columns: 1fr; }
	}


/* --- Model dashboard links (Top10 model list -> model.html) --- */
.bar-wrapper--flush {
  padding-left: 0 !important;
}

.bar-wrapper--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.bar-wrapper--link:hover .bar-track {
  background: rgba(255, 255, 255, 0.09);
}

.bar-wrapper--link:focus-visible {
  outline: 2px solid rgba(0, 64, 255, 0.75);
  outline-offset: 3px;
  border-radius: 16px;
}

/* Clickable Top3 cards */
.topmodels-card.is-link {
  cursor: pointer;
}

.topmodels-card.is-link:hover {
  border-color: rgba(0, 64, 255, 0.28);
}

.topmodels-card.is-link:focus-visible {
  outline: 2px solid rgba(0, 64, 255, 0.75);
  outline-offset: 3px;
}

/* --- Rank pill fix: hogy ne folyjon össze a sorszám a címkével --- */
.rank-pill,
.brand-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  padding: 2px 8px;
  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);

  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;

  color: #d0dcff;

  margin-right: 10px;
  flex-shrink: 0;
}

/* rejtsük el a rendszám-sávot teljesen */
.vehicle-card .plate { 
  display: none !important; 
}


/* Top10 modellek – kattinthatóság jelzése */
.topmodels-clickhint{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(208,220,255,.20);
  background:rgba(12,16,43,.35);
  color:#d0dcff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.topmodels-card{cursor:pointer;}
.topmodels-card:focus{outline:2px solid rgba(0,64,255,.55); outline-offset:3px;}

/* App letöltés CTA */
.download-card{position:relative; overflow:hidden;}
.download-card::before{
  content:"";
  position:absolute;
  inset:-160px -200px auto auto;
  width:520px;
  height:520px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(123,92,255,.28), rgba(0,64,255,.22), transparent 72%);
  filter: blur(10px);
  pointer-events:none;
}
.download-head{position:relative; z-index:1;}
.download-kicker{display:flex; align-items:center; gap:10px; color:#d0dcff; font-weight:800; text-transform:lowercase; letter-spacing:.25px; font-size:12px;}
.download-title{margin-top:8px; font-size:22px; font-weight:900; line-height:1.2;}
.download-sub{margin-top:10px; color:var(--text-muted); line-height:1.55; max-width:860px;}
.download-bullets{display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; position:relative; z-index:1;}
.download-bullet{padding:10px 12px; border-radius:14px; background:rgba(18,23,53,.55); border:1px solid rgba(208,220,255,.10); color:var(--text-main); line-height:1.35;}
.store-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; position:relative; z-index:1;}
.store-badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(208,220,255,.18);
  background:rgba(12,16,43,.55);
  text-decoration:none;
  color:var(--text-main);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.store-badge:hover{transform:translateY(-1px); transition:transform .15s ease;}
.store-logo{display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.08);}
.store-text{display:flex; flex-direction:column; line-height:1.05;}
.store-top{font-size:10px; letter-spacing:.3px; color:#d0dcff; opacity:.9; text-transform:uppercase;}
.store-main{font-size:14px; font-weight:900;}

/* Letöltés – záró sáv */
.download-footer{
  margin-top:40px;
  padding:28px 0;
  padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  margin-left:-20px;
  margin-right:-20px;
  padding-left:20px;
  padding-right:20px;
  background: linear-gradient(90deg, #101880, #2830C0);
  box-shadow: 0 -18px 44px rgba(0,0,0,.35);
}
.download-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.download-footer-copy{
  max-width:760px;
}
.download-footer-title{
  font-weight:900;
  font-size:18px;
  line-height:1.2;
  color:#ffffff;
}
.download-footer-sub{
  margin-top:8px;
  color: rgba(255,255,255,.92);
  line-height:1.55;
}
.download-footer-note{
  margin-top:10px;
  font-size:12px;
  color: rgba(255,255,255,.78);
}
.download-footer-legal{
  margin-top:10px;
  font-size:11px;
  line-height:1.45;
  color: rgba(255,255,255,.70);
  max-width:980px;
}

.download-footer-badges{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.download-footer-badges a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  width:auto;
  line-height:0;
}
.download-footer-badges img{
  height:100%;
  width:auto;
  max-width:100%;
  display:block;
}
.download-footer-badges a{
  overflow:hidden;
  border-radius:12px;
}
.download-footer-badges .badge-google img{
  transform:scale(1.32);
  transform-origin:center;
}

@media (max-width: 768px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
  .download-footer{
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }
}

@media (max-width: 720px) {
  .download-footer{
    padding-top:22px;
    padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  }
}

/* ================================
   SHARE (v2): natív share mobilon + desktop fallback panel
   ================================ */

.share-btn{
  position:absolute;
  top:18px;
  right:18px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  color:#d0dcff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  z-index:2;
}
.share-btn:hover{ background: rgba(255,255,255,.09); }
.share-btn:active{ transform: translateY(1px); }
.share-btn-icon{ font-size:14px; line-height:1; }

.download-footer-share{ margin-top:12px; }
.share-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#d0dcff;
  font-size:12px;
  cursor:pointer;
}
.share-link:hover{ background: rgba(255,255,255,.07); }
.share-link:active{ transform: translateY(1px); }

/* Desktop fallback modal */
.share-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity 140ms ease;
  z-index: 999;
}
.share-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.share-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(380px, calc(100% - 32px));
  background: rgba(12,16,43,.95);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  padding: 14px;
  opacity:0;
  pointer-events:none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 1000;
}
.share-modal.open{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
}

body.share-lock{ overflow:hidden; }

.share-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#d0dcff;
  cursor:pointer;
}
.share-close:hover{ background: rgba(255,255,255,.07); }

.share-title{ font-weight:900; font-size:14px; margin:2px 0 2px; }
.share-sub{ color: rgba(255,255,255,.75); font-size:12px; margin:0 0 10px; line-height:1.45; }

.share-url{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom:10px;
}
.share-url-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.68); }
.share-url-value{ font-size:12px; color: #d0dcff; overflow-wrap:anywhere; }

.share-actions{ display:flex; flex-direction:column; gap:8px; }
.share-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#d0dcff;
  text-decoration:none;
  cursor:pointer;
}
.share-action:hover{ background: rgba(255,255,255,.07); }
.share-action small{ font-size:12px; opacity:.75; }