@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&display=swap');

  :root {
    --gold: #C9A227;
    --gold-light: #E8C460;
    --gold-dim: #7A6015;
    --black: #080808;
    --surface: #111111;
    --surface2: #181818;
    --border: rgba(201,162,39,0.14);
    --text: #EAE6DB;
    --text-muted: #5C5744;
    --ticker-h: 30px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--black);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* TICKER */
  .ticker-wrap {
    background: var(--gold);
    overflow: hidden;
    padding: 7px 0;
    position: relative;
    z-index: 200;
    height: var(--ticker-h);
  }
  .ticker { display: flex; width: max-content; animation: ticker 35s linear infinite; }
  .ticker span {
    color: #0a0800; font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    white-space: nowrap; padding: 0 28px;
  }
  .ticker span::after { content: "·"; margin-left: 28px; opacity: 0.35; }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* NAV — sits below ticker, not fixed over it */
  nav.top-nav {
    position: fixed;
    /* ticker is 30px tall; nav starts right below it */
    top: var(--ticker-h);
    left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    background: linear-gradient(to bottom, rgba(8,8,8,0.97) 60%, transparent 100%);
  }
  .nav-logo { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; color: var(--text); text-decoration: none; }
  .nav-logo em { color: var(--gold); font-style: italic; }
  .nav-links { display: flex; align-items: center; gap: 32px; }
  .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color .2s; }
  .nav-links a:hover { color: var(--text); }
  .nav-cta {
    background: var(--gold) !important; color: #0a0800 !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 10px 22px; border-radius: 100px; text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s !important;
  }
  .nav-cta:hover { background: var(--gold-light) !important; transform: scale(1.03); box-shadow: 0 0 24px rgba(201,162,39,0.35); }

  /* HERO — top padding accounts for ticker (30px) + nav (~56px) + breathing room */
  .hero {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 180px 32px 100px;
    position: relative; overflow: hidden;
  }
  .hero-glow {
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse, rgba(201,162,39,0.10) 0%, transparent 68%);
    animation: breathe 7s ease-in-out infinite; pointer-events: none;
  }
  .hero-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to top, var(--black), transparent); pointer-events: none; }
  @keyframes breathe {
    0%,100% { opacity:.55; transform:translateX(-50%) scale(1); }
    50%      { opacity:1;   transform:translateX(-50%) scale(1.1); }
  }
  .hero-eyebrow {
    font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
    opacity: 0; animation: fadeUp .8s .15s forwards;
  }
  .hero-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(56px, 9vw, 120px); font-weight: 900;
    line-height: 0.93; letter-spacing: -0.025em; color: var(--text);
    opacity: 0; animation: fadeUp .9s .3s forwards;
  }
  .hero-headline em { display: block; font-style: italic; color: var(--gold); }
  .hero-sub {
    font-size: clamp(15px, 1.8vw, 18px); color: var(--text-muted);
    max-width: 460px; margin: 32px auto 0; font-weight: 300; line-height: 1.75;
    opacity: 0; animation: fadeUp .8s .45s forwards;
  }
  .hero-ctas {
    display: flex; gap: 12px; margin-top: 44px; justify-content: center; flex-wrap: wrap;
    opacity: 0; animation: fadeUp .8s .6s forwards;
  }
  .btn-gold {
    background: var(--gold); color: #0a0800; font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em; padding: 15px 30px; border-radius: 100px; text-decoration: none;
    box-shadow: 0 0 48px rgba(201,162,39,0.28); transition: background .2s, transform .15s, box-shadow .2s;
  }
  .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 0 70px rgba(201,162,39,0.45); }
  .btn-outline {
    background: transparent; color: var(--text); font-size: 13px; font-weight: 500;
    padding: 15px 30px; border-radius: 100px; border: 1px solid rgba(201,162,39,0.22); text-decoration: none;
    transition: border-color .2s, color .2s, transform .15s;
  }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
  .scroll-hint {
    margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 10px;
    opacity: 0; animation: fadeUp .8s .85s forwards;
  }
  .scroll-hint span { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
  .scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: lineBreath 2.2s ease-in-out infinite; }
  @keyframes lineBreath { 0%,100% { opacity:.25; } 50% { opacity:1; } }
  @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

  /* SHOWCASE */
  .showcase { padding: 0 32px 96px; max-width: 1100px; margin: 0 auto; }
  .section-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); text-align: center; margin-bottom: 48px; }
  .phones-row { display: flex; justify-content: center; align-items: flex-end; gap: 20px; }
  .ph { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .ph:nth-child(1) { transform: translateY(0px); }
  .ph:nth-child(2) { transform: translateY(-28px); }
  .ph:nth-child(3) { transform: translateY(8px); }
  .ph:nth-child(4) { transform: translateY(-18px); }
  .ph:nth-child(5) { transform: translateY(4px); }
  .ph:nth-child(6) { transform: translateY(-14px); }
  .ph-frame {
    width: 144px; border-radius: 24px; overflow: hidden;
    border: 1.5px solid rgba(201,162,39,0.18);
    box-shadow: 0 32px 72px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity .5s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s;
  }
  .ph-frame.loaded { opacity: 1; }
  .ph:hover .ph-frame {
    transform: scale(1.07) translateY(-8px);
    box-shadow: 0 48px 100px rgba(0,0,0,0.9), 0 0 64px rgba(201,162,39,0.13);
    border-color: rgba(201,162,39,0.5);
  }
  .ph-frame img { width: 100%; height: auto; display: block; }
  .ph-frame picture { display: block; }
  .ph-label { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color .2s; }
  .ph:hover .ph-label { color: var(--gold); }

  /* STATS */
  .stats-bar { max-width: 1000px; margin: 0 auto 96px; padding: 0 32px; }
  .stats-inner {
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
  }
  .stat { padding: 40px 24px; text-align: center; border-right: 1px solid var(--border); }
  .stat:last-child { border-right: none; }
  .stat-val { font-family: 'Playfair Display', serif; font-size: 50px; font-weight: 900; color: var(--gold); line-height: 1; letter-spacing: -0.02em; display: block; }
  .stat-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; display: block; }

  /* FEATURES */
  .features { max-width: 1040px; margin: 0 auto; padding: 0 40px; }
  .feat {
    display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
    align-items: center; padding: 80px 0;
    border-top: 1px solid var(--border);
    opacity: 0; transform: translateY(36px);
    transition: opacity .75s ease, transform .75s ease;
  }
  .feat.vis { opacity: 1; transform: translateY(0); }
  .feat.flip { direction: rtl; }
  .feat.flip > * { direction: ltr; }
  .feat-visual { position: relative; display: flex; justify-content: center; }
  .feat-glow { position: absolute; inset: -80px; background: radial-gradient(ellipse at center, rgba(201,162,39,0.07), transparent 65%); pointer-events: none; }
  .feat-phone {
    width: 204px; border-radius: 28px; overflow: hidden;
    border: 1.5px solid rgba(201,162,39,0.2);
    box-shadow: 0 48px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.4);
    position: relative; z-index: 1;
  }
  .feat-phone img { width: 100%; height: auto; display: block; }
  .feat-phone picture { display: block; }
  .feat-num { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 18px; }
  .feat-title { font-family: 'Playfair Display', serif; font-size: clamp(30px, 3.2vw, 48px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); margin-bottom: 20px; }
  .feat-title em { font-style: italic; color: var(--gold); }
  .feat-body { font-size: 15px; color: var(--text-muted); line-height: 1.8; font-weight: 300; max-width: 380px; }
  .feat-pill { display: inline-block; margin-top: 24px; padding: 6px 16px; border: 1px solid var(--border); border-radius: 100px; font-size: 11px; font-weight: 500; color: var(--gold); letter-spacing: 0.07em; }

  /* HOW */
  .how { padding: 100px 32px; max-width: 960px; margin: 0 auto; text-align: center; }
  .section-title { font-family: 'Playfair Display', serif; font-size: clamp(34px, 5vw, 58px); font-weight: 900; line-height: 1.05; margin-bottom: 56px; color: var(--text); }
  .section-title em { font-style: italic; color: var(--gold); }
  .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--border); border-radius: 18px; overflow: hidden; }
  .step { background: var(--surface); padding: 36px 24px; text-align: left; transition: background .25s; }
  .step:hover { background: var(--surface2); }
  .step-n { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 900; color: rgba(201,162,39,0.10); line-height: 1; margin-bottom: 18px; }
  .step-t { font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 10px; letter-spacing: 0.03em; }
  .step-b { font-size: 13px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }

  /* CTA */
  .cta-section { padding: 0 32px 112px; max-width: 1040px; margin: 0 auto; }
  .cta-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 72px 56px; text-align: center; position: relative; overflow: hidden; }
  .cta-inner::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 500px; height: 240px; background: radial-gradient(ellipse, rgba(201,162,39,0.07), transparent 70%); pointer-events: none; }
  .cta-title { font-family: 'Playfair Display', serif; font-size: clamp(34px, 5vw, 58px); font-weight: 900; line-height: 1.05; color: var(--text); margin-bottom: 14px; }
  .cta-title em { font-style: italic; color: var(--gold); }
  .cta-sub { font-size: 15px; color: var(--text-muted); font-weight: 300; margin-bottom: 40px; }
  .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* FOOTER */
  footer { border-top: 1px solid var(--border); padding: 40px 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  .footer-logo { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; }
  .footer-logo em { color: var(--gold); font-style: italic; }
  .footer-links { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
  .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 12px; transition: color .2s; }
  .footer-links a:hover { color: var(--gold); }
  .footer-copy { font-size: 11px; color: var(--text-muted); white-space: nowrap; }


  /* PLUGINS */
  .plugins { padding: 100px 32px; max-width: 960px; margin: 0 auto; text-align: center; }
  .plugins-intro { font-size: 15px; color: var(--text-muted); font-weight: 300; line-height: 1.8; max-width: 540px; margin: -28px auto 48px; }
  .plugins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
  .plugin-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    padding: 36px 28px; transition: background .25s, border-color .25s;
    display: flex; flex-direction: column; gap: 10px;
  }
  .plugin-card:hover { background: var(--surface2); border-color: rgba(201,162,39,0.28); }
  .plugin-name { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.15; letter-spacing: -0.02em; }
  .plugin-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
  .plugin-card .btn-gold { display: inline-block; margin-top: 14px; align-self: flex-start; padding: 12px 22px; font-size: 12px; box-shadow: 0 0 28px rgba(201,162,39,0.18); }
  .plugins-note { margin-top: 28px; font-size: 12px; color: var(--text-muted); font-weight: 300; line-height: 1.7; }
  .plugins-legal { margin-top: 14px; }
  .plugins-legal a { color: var(--gold); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .2s; }
  .plugins-legal a:hover { color: var(--gold-light); }

  /* RESPONSIVE */
  @media (max-width: 860px) {
    nav.top-nav { padding: 14px 24px; }
    .nav-links { display: none; }
    .hero { padding: 160px 24px 80px; }
    .phones-row { gap: 10px; }
    .ph-frame { width: 96px; border-radius: 16px; }
    .ph:nth-child(n) { transform: none; }
    .ph:nth-child(even) { transform: translateY(-12px); }
    .stats-inner { grid-template-columns: repeat(2,1fr); }
    .stat:nth-child(2) { border-right: none; }
    .stat:nth-child(3) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
    .stat:nth-child(4) { border-top: 1px solid var(--border); }
    .feat { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; }
    .feat.flip { direction: ltr; }
    .feat-body { max-width: none; }
    .feat-phone { width: 175px; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .plugins-grid { grid-template-columns: 1fr; }
    .plugins { padding: 72px 24px; }
    .cta-inner { padding: 48px 28px; }
    footer { grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; }
  }
  @media (max-width: 520px) {
    .ph-frame { width: 72px; border-radius: 12px; }
    .ph-label { font-size: 9px; }
    .ph { gap: 10px; }
    .steps-grid { grid-template-columns: 1fr; }
    .showcase { padding: 0 16px 72px; }
    .features { padding: 0 20px; }
    .stats-bar { padding: 0 20px; }
    .cta-section { padding: 0 20px 80px; }
    .plugins { padding: 64px 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .ph-frame { opacity: 1 !important; }
    .feat { opacity: 1 !important; transform: none !important; }
  }

  /* ============ MOBILE + A11Y FIXES ============ */

  /* 1. Reduce Motion: hero used opacity:0 + animation to reveal.
        The reduced-motion block killed the animation but never restored
        opacity, so the whole hero stayed invisible. Restore it. */
  @media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .hero-headline,
    .hero-sub,
    .hero-ctas,
    .scroll-hint {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* 2. Showcase row overflowed the viewport on phones:
        6 x 72px + gaps + padding = ~514px inside a 390px screen.
        justify-content:center split the overflow, clipping the first
        and last card (body has overflow-x:hidden). Wrap to 3 x 2. */
  @media (max-width: 520px) {
    .phones-row { flex-wrap: wrap; gap: 14px 10px; }
    .ph-frame   { width: 100px; border-radius: 14px; }
    .ph         { transform: none !important; }
  }
  @media (max-width: 360px) {
    .ph-frame   { width: 88px; }
  }


/* ===== Cropper official 3D identity + shared pages ===== */
.brand-link {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}
.brand-link img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(201,162,39,.17));
}
.footer-logo.brand-link img { width: 30px; height: 30px; }
.hero-logo {
  width: clamp(92px, 11vw, 132px);
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 24px 42px rgba(201,162,39,.18));
  opacity: 0;
  animation: fadeUp .8s .05s forwards;
}
.plugin-card-head { display:flex; align-items:center; gap:16px; margin-bottom:4px; }
.plugin-card-logo { width:58px; height:58px; object-fit:contain; flex:0 0 auto; }
.plugin-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; }
.text-link {
  color: var(--gold);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.text-link:hover { color: var(--gold-light); }
@media (prefers-reduced-motion: reduce) {
  .hero-logo { opacity:1 !important; transform:none !important; }
}

/* Shared interior pages */
.site-header {
  position: sticky; top: 0; z-index: 200;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 34px;
  border-bottom:1px solid var(--border);
  background:rgba(8,8,8,.94);
  backdrop-filter:blur(18px);
}
.site-header .brand-link { color:var(--text); text-decoration:none; font-family:'Playfair Display',serif; font-weight:700; font-size:19px; }
.site-header .brand-link em { color:var(--gold); font-style:italic; }
.site-nav { display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:flex-end; }
.site-nav a { color:var(--text-muted); text-decoration:none; font-size:12px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--gold); }
.page-shell { min-height:70vh; }
.page-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 34px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 470px);
  gap: 72px;
  align-items: center;
}
.page-hero.compact { padding-bottom:26px; }
.page-hero-logo {
  width: min(470px, 40vw);
  height: auto !important;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  justify-self: end;
  filter: drop-shadow(0 42px 72px rgba(201,162,39,.20));
}
.page-kicker { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px; }
.page-title { font-family:'Playfair Display',serif; font-size:clamp(42px,6vw,74px); line-height:.98; letter-spacing:-.025em; }
.page-title em { color:var(--gold); font-style:italic; }
.page-lead { max-width:720px; margin-top:22px; color:#8b866f; font-weight:300; line-height:1.8; font-size:16px; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.content-wrap { max-width:1040px; margin:0 auto; padding:20px 34px 90px; }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.info-card {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:28px; min-width:0;
}
.info-card h2, .info-card h3 { font-family:'Playfair Display',serif; color:var(--text); line-height:1.15; }
.info-card h2 { font-size:28px; margin-bottom:12px; }
.info-card h3 { font-size:21px; margin-bottom:9px; }
.info-card p, .info-card li { color:#8b866f; font-size:14px; line-height:1.8; }
.info-card ul { padding-left:18px; }
.info-card a, .prose a { color:var(--gold); text-decoration:none; }
.info-card a:hover, .prose a:hover { color:var(--gold-light); }
.prose { max-width:860px; }
.prose h2 { font-family:'Playfair Display',serif; font-size:29px; margin:34px 0 10px; color:var(--text); }
.prose h3 { font-size:17px; margin:24px 0 7px; color:var(--gold); }
.prose p, .prose li { color:#8b866f; line-height:1.85; font-size:14px; }
.prose ul, .prose ol { padding-left:20px; margin:8px 0 16px; }
.prose strong { color:var(--text); }
.notice {
  margin:22px 0; padding:18px 20px; border:1px solid rgba(201,162,39,.26);
  border-radius:14px; background:rgba(201,162,39,.05); color:#a59d7c; font-size:13px;
}
.link-hub { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.link-hub a {
  border:1px solid var(--border); color:var(--gold); text-decoration:none;
  border-radius:100px; padding:8px 13px; font-size:11px; font-weight:600;
}
.link-hub a:hover { border-color:var(--gold); }
.small-meta { color:var(--text-muted); font-size:11px; margin-top:10px; }
.site-footer {
  border-top:1px solid var(--border); padding:34px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
}
.site-footer-links { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.site-footer-links a { color:var(--text-muted); font-size:11px; text-decoration:none; }
.site-footer-links a:hover { color:var(--gold); }
.site-footer-copy { color:var(--text-muted); font-size:10px; white-space:nowrap; }

.faq details { border-top:1px solid var(--border); padding:18px 0; }
.faq details:first-child { border-top:0; }
.faq summary { cursor:pointer; color:var(--text); font-weight:600; }
.faq details p { margin-top:10px; }
.code-pill { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; border:1px solid var(--border); padding:2px 7px; border-radius:7px; color:var(--gold); }

@media (max-width:760px) {
  .site-header { padding:12px 20px; }
  .site-nav { gap:12px; }
  .site-nav a:nth-child(n+5) { display:none; }
  .page-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 58px 22px 38px;
  }
  .product-hero-visual {
    min-height: 0;
    order: -1;
  }
  .page-hero-logo {
    width: min(330px, 82vw);
    height: auto !important;
    justify-self: center;
  }
  .content-wrap { padding:16px 22px 70px; }
  .card-grid { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; padding:28px 22px; }
  .site-footer-links { justify-content:flex-start; }
}

.plugin-price{font-family:'Playfair Display',serif;font-size:22px;font-weight:900;color:var(--gold);margin-top:4px}.plugin-price span{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:var(--text-muted)}


.product-hero-copy { position: relative; z-index: 1; }
.product-hero-visual {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-hero-visual::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  max-width: 110%;
  max-height: 110%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.10) 0%, rgba(201,162,39,.035) 38%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}
.product-hero-visual .page-hero-logo {
  position: relative;
  z-index: 1;
}
.product-price-line {
  margin-top: 20px;
  color: #a79e7a;
  font-size: 13px;
  letter-spacing: .02em;
}
.product-price-line strong { color: var(--gold); }
.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #aaa387;
  background: rgba(255,255,255,.015);
  font-size: 11px;
  font-weight: 600;
}
.product-badge strong { color: var(--gold); font-weight: 700; }
.product-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  margin: 52px 0 20px;
  color: var(--text);
}
.product-section-title em { color: var(--gold); font-style: italic; }