/* ============================================================
     HERO: pitkä otsikko, tekstilinkki ja mainos → sivu -kuvitus
     ============================================================ */
  .hero-page h1 {
    font-size: clamp(36px, 4.6vw, 62px);
    line-height: 1.06;
    text-wrap: balance;
  }
  .hero-hook { font-size: clamp(19px, 1.6vw, 22px); text-wrap: pretty; }
  .hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 6px;
    color: rgba(255,255,255,.86);
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.22);
    transition: color .2s, border-color .2s;
  }
  .hero-text-link:hover, .hero-text-link:focus-visible { color: #fff; border-color: var(--orange-soft); }
  .hero-text-link svg { transition: transform .25s cubic-bezier(.22,1,.36,1); }
  .hero-text-link:hover svg { transform: translateY(3px); }

  /* Campaign imagery */
  .campaign-hero-figure { position: relative; display: block; margin: 0; padding-top: 8px; }
  .campaign-browser { overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; box-shadow: var(--sh-lg); background: #111d38; }
  .campaign-browser-bar { display: flex; align-items: center; gap: 18px; padding: 15px 18px; background: #f1f2f6; }
  .campaign-window-dots { display: flex; gap: 5px; }
  .campaign-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #adb3c5; }
  .campaign-address { color: var(--navy-dark); font-size: 11px; }
  .campaign-preview { position: relative; min-height: 390px; isolation: isolate; }
  .campaign-preview img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; border-radius: 0; z-index: -1; mask-image: linear-gradient(to bottom, transparent, #000 18%); }
  .campaign-preview-copy { padding: 30px; color: #fff; }
  .campaign-preview-label { display: block; color: var(--orange-soft); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 12px; }
  .campaign-preview-copy strong { display: block; font-size: clamp(28px, 2.5vw, 38px); font-weight: 900; line-height: 1.06; letter-spacing: -.035em; }
  .campaign-preview-copy p { margin-top: 12px; color: #d5daed; font-size: 12px; }
  .campaign-preview-button { display: inline-flex; gap: 28px; align-items: center; margin-top: 20px; border-radius: 6px; background: var(--orange); color: #17213e; padding: 11px 17px; font-size: 12px; font-weight: 800; }
  .campaign-preview-footer { display: flex; gap: 16px; padding: 16px 20px 36px; font-size: 9px; color: #d5daed; border-top: 1px solid rgba(255,255,255,.15); }
  .campaign-order-check { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; background: #e8f4ee; color: #23744d; border-radius: 50%; font-weight: 800; }
  .campaign-notifications { position: absolute; top: 112px; right: -24px; z-index: 1; list-style: none; display: grid; gap: 8px; width: 228px; margin: 0; }
  .campaign-notification { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--sh-lg); }
  .campaign-notification strong { display: block; color: var(--navy-dark); font-size: 14px; line-height: 1.3; }
  .campaign-notification div > span { display: block; color: var(--text-muted); font-size: 11px; margin-top: 3px; }
  .campaign-order-number { margin-left: auto; color: var(--text-muted); font-size: 11px; }
  .campaign-notifications.in .campaign-notification { animation: campaignOrderArrival .55s cubic-bezier(.22,1,.36,1) both; }
  .campaign-notifications.in .campaign-notification:nth-child(2) { animation-delay: .75s; }
  .campaign-notifications.in .campaign-notification:nth-child(3) { animation-delay: 1.5s; }
  .campaign-notifications.in .campaign-notification:nth-child(4) { animation-delay: 2.25s; }
  @keyframes campaignOrderArrival {
    from { opacity: 0; transform: translateY(14px) translateX(12px) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .campaign-notifications.in .campaign-notification { animation: none; }
  }
  .campaign-hero-figure figcaption {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,.7);
  }

  /* Mainoskortti, josta kävijä saapuu */
  .campaign-hero-figure { padding-top: 64px; padding-left: 40px; }
  .campaign-notifications { top: 176px; }
  .campaign-ad {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 210px;
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: #fff;
    color: var(--navy-dark);
    box-shadow: 0 18px 40px -12px rgba(8, 12, 40, .55);
    transform: rotate(-4deg);
    animation: campaignAdFloat 6s ease-in-out infinite;
  }
  .campaign-ad-meta { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
  .campaign-ad-meta i { width: 18px; height: 18px; border-radius: 50%; background: var(--grad-tilt); }
  .campaign-ad strong { display: block; margin: 10px 0 12px; font-size: 16px; line-height: 1.2; font-weight: 900; letter-spacing: -.02em; }
  .campaign-ad-cta { display: block; padding: 8px 10px; border-radius: 7px; background: var(--navy-50); color: var(--navy-dark); font-size: 11px; font-weight: 800; text-align: center; }
  .campaign-ad-link {
    position: absolute;
    top: 96px;
    left: 150px;
    z-index: 2;
    width: 120px;
    height: 90px;
    overflow: visible;
    fill: none;
    stroke: var(--orange-soft);
    stroke-width: 2;
    stroke-dasharray: 5 6;
    stroke-linecap: round;
    animation: campaignAdDash 1.4s linear infinite;
  }
  @keyframes campaignAdFloat {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-6px); }
  }
  @keyframes campaignAdDash { to { stroke-dashoffset: -22; } }
  @media (prefers-reduced-motion: reduce) {
    .campaign-ad, .campaign-ad-link { animation: none; }
  }

  @media (max-width: 1100px) {
    .campaign-hero-figure { width: 100%; max-width: 640px; margin-inline: auto; }
  }
  @media (max-width: 600px) {
    .campaign-hero-figure { padding-top: 70px; padding-left: 0; }
    .campaign-ad { width: 176px; left: -4px; padding: 11px 12px 12px; }
    .campaign-ad strong { font-size: 14px; margin: 8px 0 10px; }
    .campaign-ad-link { display: none; }
    .campaign-notifications { top: 280px; right: -8px; width: 180px; gap: 6px; }
    .campaign-notification { padding: 8px; gap: 8px; border-radius: 9px; }
    .campaign-notification .campaign-order-check { width: 24px; height: 24px; font-size: 12px; }
    .campaign-notification strong { font-size: 12px; }
    .campaign-notification div > span, .campaign-order-number { font-size: 10px; }
    .campaign-preview { min-height: 355px; }
    .campaign-preview-copy { padding: 24px 20px; }
    .campaign-preview-copy strong { font-size: 30px; }
    .campaign-preview-button { margin-top: 14px; }
    .campaign-preview-footer span:last-child { display: none; }
  }