---
import Base from '../layouts/Base.astro';
const main = `<!-- HERO -->
<section class="hero" aria-labelledby="hero-heading">
  <div class="hero-copy">
    <span class="hero-eyebrow">Neue Kollektion · 2024</span>
    <h1 class="hero-headline" id="hero-heading">
      Trag,<br>wer
      <span class="hl-accent">du bist.</span>
      <span class="hl-dim">Aus Leidenschaft.</span>
    </h1>
    <p class="hero-desc">Für die, die früh aufstehen, die richtigen Werkzeuge kennen und am Ende des Tages wissen, was sie geleistet haben. Bio-Baumwolle. Fairtrade. Kein Kompromiss.</p>
    <div class="hero-actions">
      <a href="/shop" class="btn btn-primary btn-lg">Alle Produkte</a>
      <a href="/ueber-uns" class="btn btn-outline">Über PMPNZNG</a>
    </div>
    <div class="hero-trust-mini">
      <span class="trust-mini-item">Bio-Baumwolle</span>
      <span class="trust-mini-item">Fairtrade</span>
      <span class="trust-mini-item">Aus Ahlerstedt</span>
    </div>
  </div>
  <div class="hero-visual" aria-hidden="true">
    <a href="/produkt/hoodie-stick-druck" class="hero-img-main">
      <img src="/product-images/p01-pmpnzng-hoodie-1.jpg" alt="PMPNZNG Hoodie Stick & Druck" width="600" height="750">
    </a>
    <div class="hero-img-sub-row">
      <a href="/produkt/cap-shk" class="hero-img-sub">
        <img src="/product-images/p04-cap-shk-1-freigestellt.png" alt="Cap SHK" width="300" height="140" loading="lazy">
      </a>
      <a href="/produkt/tshirt-pumpenzange" class="hero-img-sub">
        <img src="/product-images/p05-tshirt-pumpenzange-2-freigestellt.png" alt="T-Shirt Pumpenzange" width="300" height="140" loading="lazy">
      </a>
    </div>
    <div class="hero-price-badge">
      <span class="hero-price-badge-val">ab 10,99&nbsp;€</span>
      <span class="hero-price-badge-lbl">Bio · Fairtrade</span>
    </div>
  </div>
</section>

<!-- MARQUEE -->
<div class="marquee-band" aria-hidden="true">
  <div class="marquee-inner">
    <span class="marquee-item">PMPNZNG <span class="marquee-sep"></span> HEIZUNGSBAUERAUSLEIDENSCHAFT <span class="marquee-sep"></span> BIO-BAUMWOLLE <span class="marquee-sep"></span> FAIRTRADE <span class="marquee-sep"></span> AHLERSTEDT · NIEDERSACHSEN <span class="marquee-sep"></span> EST. 2021 <span class="marquee-sep"></span> SHK-COMMUNITY <span class="marquee-sep"></span> DU TRÄGST WAS DU BIST <span class="marquee-sep"></span> MEISTERFACHBETRIEB <span class="marquee-sep"></span></span>
    <span class="marquee-item">PMPNZNG <span class="marquee-sep"></span> HEIZUNGSBAUERAUSLEIDENSCHAFT <span class="marquee-sep"></span> BIO-BAUMWOLLE <span class="marquee-sep"></span> FAIRTRADE <span class="marquee-sep"></span> AHLERSTEDT · NIEDERSACHSEN <span class="marquee-sep"></span> EST. 2021 <span class="marquee-sep"></span> SHK-COMMUNITY <span class="marquee-sep"></span> DU TRÄGST WAS DU BIST <span class="marquee-sep"></span> MEISTERFACHBETRIEB <span class="marquee-sep"></span></span>
  </div>
</div>

<!-- TRUST BAR -->
<div class="trust-bar" role="list" aria-label="Unsere Versprechen">
  <div class="trust-item-bar" role="listitem"><span class="trust-icon" aria-hidden="true">🌿</span> Bio-Baumwolle</div>
  <div class="trust-item-bar" role="listitem"><span class="trust-icon" aria-hidden="true">⚖️</span> Fairtrade-zertifiziert</div>
  <div class="trust-item-bar" role="listitem"><span class="trust-icon" aria-hidden="true">📦</span> Versand DE · AT · CH</div>
  <div class="trust-item-bar" role="listitem"><span class="trust-icon" aria-hidden="true">↩</span> 30 Tage Rückgabe</div>
  <div class="trust-item-bar" role="listitem"><span class="trust-icon" aria-hidden="true">🔒</span> Sicher zahlen via Stripe</div>
</div>

<!-- PRODUCTS -->
<section class="section-wrap" id="produkte" aria-labelledby="products-h">
  <div class="section-container">
    <header class="section-header">
      <div class="section-label">
        <div class="section-label-line" aria-hidden="true"></div>
        <h2 id="products-h">Aktuelle Kollektion</h2>
      </div>
      <a href="/shop" class="section-meta" style="color:var(--c-red-bright);text-decoration:underline;text-underline-offset:3px;">Alle 6 Artikel →</a>
    </header>
    <div class="product-grid" role="list">

      <article class="product-card" role="listitem">
        <div class="card-badge">Bestseller</div>
        <a href="/produkt/hoodie-stick-druck">
          <div class="card-image-wrap">
            <img src="/product-images/p01-pmpnzng-hoodie-1.jpg" alt="PMPNZNG Hoodie Stick & Druck" width="400" height="500" loading="lazy">
            <div class="card-overlay" aria-hidden="true">Jetzt ansehen</div>
          </div>
        </a>
        <div class="card-body">
          <span class="card-cat">Hoodie · XS–3XL</span>
          <h3 class="card-name"><a href="/produkt/hoodie-stick-druck">PMPNZNG Hoodie<br>Stick & Druck</a></h3>
          <p class="card-desc">Besticktes TGA-Wappen, PMPNZNG-Print. Bio-Baumwolle, Fairtrade.</p>
          <div class="card-footer">
            <span class="card-price">49,99&nbsp;€</span>
            <span class="card-sizes">XS · S · M · L · XL</span>
          </div>
        </div>
      </article>

      <article class="product-card" role="listitem">
        <a href="/produkt/cap-elektro">
          <div class="card-image-wrap freigestellt" style="background:#f0ede8;">
            <img src="/product-images/p02-cap-elektro-1-freigestellt.png" alt="Cap Elektro" width="400" height="500" loading="lazy">
            <div class="card-overlay" aria-hidden="true">Jetzt ansehen</div>
          </div>
        </a>
        <div class="card-body">
          <span class="card-cat">Cap · One Size</span>
          <h3 class="card-name"><a href="/produkt/cap-elektro">Cap Elektro</a></h3>
          <p class="card-desc">EST 2022. SnapBack. Für Elektriker, die wissen, was sie tun.</p>
          <div class="card-footer">
            <span class="card-price">19,99&nbsp;€</span>
            <span class="card-sizes">One Size</span>
          </div>
        </div>
      </article>

      <article class="product-card" role="listitem">
        <div class="card-badge">Neu</div>
        <a href="/produkt/warmduscher-beutel">
          <div class="card-image-wrap freigestellt" style="background:#f0ede8;">
            <img src="/product-images/p03-warmduscher-beutel-1-freigestellt.png" alt="Warmduscher Beutel" width="400" height="500" loading="lazy">
            <div class="card-overlay" aria-hidden="true">Jetzt ansehen</div>
          </div>
        </a>
        <div class="card-body">
          <span class="card-cat">Tasche · One Size</span>
          <h3 class="card-name"><a href="/produkt/warmduscher-beutel">Warmduscher Beutel</a></h3>
          <p class="card-desc">Du trägst was du bist. Das perfekte Gegengewicht zur Werkzeugkiste.</p>
          <div class="card-footer">
            <span class="card-price">10,99&nbsp;€</span>
            <span class="card-sizes">One Size</span>
          </div>
        </div>
      </article>

      <article class="product-card" role="listitem">
        <a href="/produkt/cap-shk">
          <div class="card-image-wrap freigestellt" style="background:#f0ede8;">
            <img src="/product-images/p04-cap-shk-1-freigestellt.png" alt="Cap SHK" width="400" height="500" loading="lazy">
            <div class="card-overlay" aria-hidden="true">Jetzt ansehen</div>
          </div>
        </a>
        <div class="card-body">
          <span class="card-cat">Cap · One Size</span>
          <h3 class="card-name"><a href="/produkt/cap-shk">Cap SHK</a></h3>
          <p class="card-desc">SHK vorne, PMPNZNG auf der Rückseite. Statement für die Branche.</p>
          <div class="card-footer">
            <span class="card-price">19,99&nbsp;€</span>
            <span class="card-sizes">One Size</span>
          </div>
        </div>
      </article>

      <article class="product-card" role="listitem">
        <div class="card-badge">Bio</div>
        <a href="/produkt/tshirt-pumpenzange">
          <div class="card-image-wrap freigestellt" style="background:#f0ede8;">
            <img src="/product-images/p05-tshirt-pumpenzange-2-freigestellt.png" alt="T-Shirt Pumpenzange" width="400" height="500" loading="lazy">
            <div class="card-overlay" aria-hidden="true">Jetzt ansehen</div>
          </div>
        </a>
        <div class="card-body">
          <span class="card-cat">T-Shirt · XS–3XL</span>
          <h3 class="card-name"><a href="/produkt/tshirt-pumpenzange">T-Shirt Pumpenzange</a></h3>
          <p class="card-desc">Bio-Baumwolle, Fairtrade. XS bis 3XL. Handwerk hat Haltung.</p>
          <div class="card-footer">
            <span class="card-price">27,99&nbsp;€</span>
            <span class="card-sizes">XS–3XL</span>
          </div>
        </div>
      </article>

      <article class="product-card" role="listitem">
        <div class="card-badge">Bio</div>
        <a href="/produkt/hoodie-pumpenzange">
          <!-- p06: freigestellt, no person -->
          <div class="card-image-wrap freigestellt" style="background:#f0ede8;">
            <img src="/product-images/p06-hoodie-pumpenzange-1-freigestellt.png" alt="Hoodie Pumpenzange" width="400" height="500" loading="lazy">
            <div class="card-overlay" aria-hidden="true">Jetzt ansehen</div>
          </div>
        </a>
        <div class="card-body">
          <span class="card-cat">Hoodie · XS–3XL</span>
          <h3 class="card-name"><a href="/produkt/hoodie-pumpenzange">Hoodie Pumpenzange</a></h3>
          <p class="card-desc">Bio-Baumwolle, Fairtrade. Das Werkzeug, das man trägt.</p>
          <div class="card-footer">
            <span class="card-price">49,99&nbsp;€</span>
            <span class="card-sizes">XS–3XL</span>
          </div>
        </div>
      </article>

    </div>
  </div>
</section>

<!-- FEATURED STRIP -->
<section class="featured-strip" aria-labelledby="featured-h">
  <div class="featured-inner">
    <div class="featured-media">
      <img src="/product-images/p01-pmpnzng-hoodie-2.jpg" alt="PMPNZNG Hoodie – Detail der Stickerei" width="660" height="480" loading="lazy">
    </div>
    <div class="featured-content">
      <p class="featured-label">Featured Produkt</p>
      <h2 class="featured-headline" id="featured-h">TGA Solutions ///<br>Heizungsbauer<br>Aus Leidenschaft</h2>
      <p class="featured-desc">Stick & Druck. Besticktes TGA-Wappen auf der Brust, PMPNZNG groß auf dem Rücken. Unisex, XS bis 3XL. Das Herzstück der Kollektion.</p>
      <div class="featured-tags">
        <span class="tag">Bio-Baumwolle</span>
        <span class="tag">Fairtrade</span>
        <span class="tag">Unisex</span>
        <span class="tag">XS – 3XL</span>
      </div>
      <div class="featured-price-row">
        <span class="featured-price">49,99&nbsp;€</span>
        <span class="featured-price-note">inkl. MwSt.</span>
      </div>
      <a href="/produkt/hoodie-stick-druck" class="btn btn-primary" style="align-self:flex-start;">Jetzt kaufen</a>
    </div>
  </div>
</section>

<!-- MANIFESTO -->
<section class="manifesto" aria-label="Manifest">
  <div class="manifesto-inner">
    <blockquote>„Du trägst<br>was <em>du bist.</em>"</blockquote>
    <cite>— PMPNZNG · Ahlerstedt, Niedersachsen</cite>
  </div>
</section>

<!-- TRUST CARDS -->
<section class="trust-grid-section" aria-labelledby="trust-h">
  <div class="trust-grid">
    <div class="trust-card">
      <div class="trust-card-icon" aria-hidden="true">🌿</div>
      <h3 class="trust-card-title">100% Bio-Baumwolle</h3>
      <p class="trust-card-desc">Kein Kompromiss bei Material. Zertifizierte Bio-Baumwolle für alle Produkte.</p>
    </div>
    <div class="trust-card">
      <div class="trust-card-icon" aria-hidden="true">⚖️</div>
      <h3 class="trust-card-title">Fairtrade-zertifiziert</h3>
      <p class="trust-card-desc">Faire Produktion, faire Preise, faire Bedingungen — überall in der Lieferkette.</p>
    </div>
    <div class="trust-card">
      <div class="trust-card-icon" aria-hidden="true">🔧</div>
      <h3 class="trust-card-title">Für die Branche</h3>
      <p class="trust-card-desc">Von einem Meisterfachbetrieb für SHK-Profis, Elektriker und alle, die Handwerk leben.</p>
    </div>
    <div class="trust-card">
      <div class="trust-card-icon" aria-hidden="true">📦</div>
      <h3 class="trust-card-title">Versand aus DE</h3>
      <p class="trust-card-desc">DE, AT & CH. Direkt aus Ahlerstedt, Niedersachsen. Kostenlos ab 50&nbsp;€.</p>
    </div>
  </div>
</section>

<!-- COMMUNITY -->
<section class="community-strip" id="community" aria-labelledby="community-h">
  <div class="community-inner">
    <p class="community-eyebrow">Community</p>
    <h2 class="community-headline" id="community-h">Mehr als Merch.<br>Eine Haltung.</h2>
    <p class="community-sub">PMPNZNG ist eine Marke der TGA Solutions GmbH — Meisterfachbetrieb für technische Gebäudeausrüstung aus Ahlerstedt. Wir machen Merch für Menschen, die Handwerk nicht als Beruf, sondern als Berufung verstehen.</p>
    <div class="community-links">
      <a href="https://instagram.com/tgasolutions" target="_blank" rel="noopener noreferrer" class="btn btn-outline">@tgasolutions auf Instagram</a>
      <a href="/ueber-uns" class="btn btn-outline">Über PMPNZNG</a>
    </div>
  </div>
</section>

<!-- INSTAGRAM FEED -->
<section class="insta-section" aria-labelledby="insta-h">
  <div class="insta-section-inner">

    <div class="insta-header">
      <div class="insta-title-wrap">
        <span class="insta-eyebrow">Community · Instagram</span>
        <h2 class="insta-title" id="insta-h">Folgst du<br>uns schon?</h2>
        <p class="insta-handle">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
          @tgasolutions
        </p>
      </div>
      <a href="https://instagram.com/tgasolutions" target="_blank" rel="noopener noreferrer" class="insta-follow-btn" aria-label="@tgasolutions auf Instagram folgen">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
        Jetzt folgen
      </a>
    </div>

    <!--
      Echte Instagram-Posts einbinden:
      1. Post auf instagram.com/tgasolutions öffnen
      2. "..." > "Einbetten" > URL kopieren
      3. URL in INSTA_POSTS[] in shop.js eintragen
      → Posts werden dann als offizielle Instagram-Embeds geladen
    -->
        <div class="insta-grid" id="insta-grid" role="list">

      <a href="https://www.instagram.com/tgasolutions/reel/DVgqeRQiNnD/" target="_blank" rel="noopener noreferrer" class="insta-post" role="listitem" aria-label="FOR ALL HANDWERK – TGA zieht um! 🚀">
        <img src="/product-images/p01-pmpnzng-hoodie-1.jpg" alt="FOR ALL HANDWERK – TGA zieht um! 🚀" width="400" height="400" loading="lazy">
        <div class="insta-post-overlay" aria-hidden="true">
          <span class="insta-post-icon">▶</span><span class="insta-post-tag">#forallhandwerk</span>
        </div>
      </a>

      <a href="https://www.instagram.com/tgasolutions/p/DVbxKYwiB30/" target="_blank" rel="noopener noreferrer" class="insta-post" role="listitem" aria-label="Ordnung im Werkzeug – PMPNZNG Hoodie" style="background:#f0ede8;">
        <img src="/product-images/p06-hoodie-pumpenzange-1-freigestellt.png" alt="Ordnung im Werkzeug – PMPNZNG Hoodie" width="400" height="400" loading="lazy" style="object-fit:contain;padding:16px;">
        <div class="insta-post-overlay" aria-hidden="true">
          <span class="insta-post-icon">📷</span><span class="insta-post-tag">#ordnungimwerkzeug</span>
        </div>
      </a>

      <a href="https://www.instagram.com/tgasolutions/reel/DVVazsxiIB8/" target="_blank" rel="noopener noreferrer" class="insta-post" role="listitem" aria-label="PMPNZNG Reel – besten Kompositionen zusammen">
        <img src="/product-images/p01-pmpnzng-hoodie-3.jpg" alt="PMPNZNG Reel – besten Kompositionen zusammen" width="400" height="400" loading="lazy">
        <div class="insta-post-overlay" aria-hidden="true">
          <span class="insta-post-icon">▶</span><span class="insta-post-tag">#handwerkerleben</span>
        </div>
      </a>

      <a href="https://www.instagram.com/tgasolutions/reel/DVMOZMGiDto/" target="_blank" rel="noopener noreferrer" class="insta-post" role="listitem" aria-label="PMPNZNG Hoodie – Lust auf Handwerk?" style="background:#f0ede8;">
        <img src="/product-images/p05-tshirt-pumpenzange-1-freigestellt.png" alt="PMPNZNG Hoodie – Lust auf Handwerk?" width="400" height="400" loading="lazy" style="object-fit:contain;padding:16px;">
        <div class="insta-post-overlay" aria-hidden="true">
          <span class="insta-post-icon">▶</span><span class="insta-post-tag">#pmpnzng</span>
        </div>
      </a>

      <a href="https://www.instagram.com/tgasolutions/reel/DVDX5KQiB8Z/" target="_blank" rel="noopener noreferrer" class="insta-post" role="listitem" aria-label="PMPNZNG auf der Baustelle">
        <img src="/product-images/p01-pmpnzng-hoodie-4.jpg" alt="PMPNZNG auf der Baustelle" width="400" height="400" loading="lazy">
        <div class="insta-post-overlay" aria-hidden="true">
          <span class="insta-post-icon">▶</span><span class="insta-post-tag">#pmpnzng</span>
        </div>
      </a>

      <a href="https://www.instagram.com/tgasolutions/reel/DU_br0OCE35/" target="_blank" rel="noopener noreferrer" class="insta-post" role="listitem" aria-label="Ich bin wieder auf der Baustelle – PMPNZNG" style="background:#f0ede8;">
        <img src="/product-images/p02-cap-elektro-1-freigestellt.png" alt="Ich bin wieder auf der Baustelle – PMPNZNG" width="400" height="400" loading="lazy" style="object-fit:contain;padding:16px;">
        <div class="insta-post-overlay" aria-hidden="true">
          <span class="insta-post-icon">▶</span><span class="insta-post-tag">#baustelle</span>
        </div>
      </a>

    </div>

    <p class="insta-footer">
      <a href="https://instagram.com/tgasolutions" target="_blank" rel="noopener noreferrer">instagram.com/tgasolutions</a>
      &nbsp;·&nbsp; Zeig uns deinen Look: <strong>#PMPNZNG</strong>
    </p>

  </div>
</section>


<!-- NEWSLETTER -->
<aside class="newsletter-strip" aria-labelledby="newsletter-h">
  <div class="newsletter-badge-row" aria-hidden="true">
    <span class="newsletter-badge-pill">Schon Abonnent? Nein?</span>
    <span class="newsletter-badge-offer">— 5 % auf jede Bestellung sparen.</span>
  </div>
  <div class="newsletter-inner">
    <div class="newsletter-copy">
      <h3 id="newsletter-h">Neue Drops. Direkt in dein Postfach.</h3>
      <p>Kein Spam. Nur neue Kollektion, Aktionen und Handwerk-Storys.<br>
      <strong style="color:var(--c-text);">Bonus: 5 % Rabattcode direkt nach der Anmeldung.</strong></p>
    </div>
    <form class="newsletter-form" id="newsletter-form" action="#" method="post" aria-label="Newsletter anmelden">
      <label for="nl-email" class="visually-hidden">E-Mail-Adresse</label>
      <input class="newsletter-input" type="email" id="nl-email" name="email" placeholder="deine@email.de" required autocomplete="email">
      <button type="submit" class="newsletter-submit">5 % sichern →</button>
    </form>
  </div>
</aside>`;
---
<Base title={"PMPNZNG — Heizungsbauerausleidenschaft"} page="home" active="">
  <Fragment set:html={main} />
</Base>

<style is:global>

/* ── Homepage-specific ──────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: clamp(500px, 88vh, 820px);
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp-xl) var(--gutter);
  align-items: center; gap: clamp(32px, 5vw, 72px);
}
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-md); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.32em; color: var(--c-red-bright);
  text-transform: uppercase; font-weight: 700;
}
.hero-eyebrow::before { content:''; display:block; width:28px; height:2px; background:var(--c-red-bright); }
.hero-headline {
  font-family: var(--font-display); font-size: clamp(42px, 6vw, 80px);
  font-weight: 900; line-height: 0.93; letter-spacing: -0.01em; text-transform: uppercase;
}
.hero-headline .hl-accent { display:block; color: var(--c-red-bright); font-style: italic; }
.hero-headline .hl-dim    { display:block; color: var(--c-text-muted); font-weight:400; font-size:0.72em; }
.hero-desc { font-size: clamp(13px, 1.2vw, 15px); color: var(--c-text-muted); line-height: 1.75; max-width: 400px; }
.hero-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.hero-trust-mini { display: flex; gap: 24px; flex-wrap: wrap; }
.trust-mini-item { display:flex; align-items:center; gap:6px; font-size:11px; color: var(--c-text-dim); }
.trust-mini-item::before { content:'✓'; color: var(--c-red-bright); font-weight:900; }

.hero-visual { align-self: stretch; display: flex; flex-direction: column; gap: 4px; }
.hero-img-main { flex:1; background: var(--c-card); overflow: hidden; min-height: 380px; position: relative; }
.hero-img-main img { width:100%; height:100%; object-fit:cover; object-position: center top; transition: transform 0.6s var(--ease-out); }
.hero-img-main:hover img { transform: scale(1.03); }
.hero-img-sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 140px; }
.hero-img-sub { background: var(--c-card-dark); overflow: hidden; }
.hero-img-sub img { width:100%; height:100%; object-fit:cover; object-position: center top; transition: transform 0.5s var(--ease-out); }
.hero-img-sub:hover img { transform: scale(1.06); }
.hero-price-badge {
  position: absolute; bottom: 148px; right: -16px; z-index: 2;
  background: var(--c-red); color: #fff; padding: 12px 16px; text-align: center;
}
.hero-price-badge-val { font-family:var(--font-display); font-size:22px; font-weight:900; line-height:1; display:block; }
.hero-price-badge-lbl { font-size:8px; letter-spacing:0.2em; text-transform:uppercase; opacity:0.8; margin-top:3px; }

.featured-strip { background: var(--c-surface-1); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.featured-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.featured-media { background: var(--c-card); overflow: hidden; }
.featured-media img { width:100%; height:100%; object-fit:cover; object-position: center top; transition: transform 0.6s var(--ease-out); }
.featured-media:hover img { transform: scale(1.03); }
.featured-content { padding: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-sm); }
.featured-label { font-size:9px; letter-spacing:0.3em; color:var(--c-red-bright); text-transform:uppercase; font-weight:700; }
.featured-headline { font-family:var(--font-display); font-size:clamp(22px, 3vw, 38px); font-weight:900; line-height:1.1; text-transform:uppercase; }
.featured-desc { font-size:13px; color:var(--c-text-muted); line-height:1.75; max-width:380px; }
.featured-tags { display:flex; gap:8px; flex-wrap:wrap; }
.tag { border:1px solid var(--c-border-mid); padding:5px 12px; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-text-muted); }
.featured-price-row { display:flex; align-items:baseline; gap:12px; }
.featured-price { font-family:var(--font-display); font-size:36px; font-weight:900; }
.featured-price-note { font-size:11px; color:var(--c-text-muted); }

.manifesto { padding: var(--sp-2xl) var(--gutter); text-align: center; position: relative; overflow: hidden; }
.manifesto::before {
  content:'"'; position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:clamp(140px,24vw,280px); font-weight:900;
  color:var(--c-surface-2); line-height:1; pointer-events:none; z-index:0;
}
.manifesto-inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.manifesto blockquote {
  font-family:var(--font-display); font-size:clamp(26px,5vw,58px); font-weight:900;
  line-height:1.1; text-transform:uppercase; margin-bottom:28px;
}
.manifesto blockquote em { font-style:italic; color:var(--c-red-bright); }
.manifesto cite { font-size:10px; letter-spacing:0.28em; color:var(--c-text-muted); font-style:normal; text-transform:uppercase; }

.trust-grid-section { background: var(--c-surface-1); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); padding: var(--sp-lg) var(--gutter); }
.trust-grid { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-md); }
.trust-card { border:1px solid var(--c-border); padding:var(--sp-md); display:flex; flex-direction:column; gap:10px; transition:border-color 0.2s; }
.trust-card:hover { border-color:var(--c-red); }
.trust-card-icon { font-size:22px; line-height:1; }
.trust-card-title { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.trust-card-desc { font-size:12px; color:var(--c-text-muted); line-height:1.6; }

.community-strip { padding:var(--sp-xl) var(--gutter); text-align:center; }
.community-inner { max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:var(--sp-md); }
.community-eyebrow { font-size:9px; letter-spacing:0.32em; color:var(--c-red-bright); text-transform:uppercase; font-weight:700; }
.community-headline { font-family:var(--font-display); font-size:clamp(20px,3vw,32px); font-weight:900; text-transform:uppercase; line-height:1.15; }
.community-sub { font-size:13px; color:var(--c-text-muted); line-height:1.7; }
.community-links { display:flex; gap:var(--sp-sm); flex-wrap:wrap; justify-content:center; }

.newsletter-strip { background:var(--c-surface-1); border-top:1px solid var(--c-border); padding:0 0 var(--sp-lg); overflow:hidden; }
.newsletter-badge-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px var(--gutter); margin-bottom:var(--sp-md);
  background:var(--c-red); border-bottom:none;
  max-width:100%;
}
.newsletter-badge-pill {
  font-size:10px; font-weight:900; letter-spacing:0.18em; text-transform:uppercase;
  color:#fff; font-family:var(--font-display);
}
.newsletter-badge-offer {
  font-size:12px; color:rgba(255,255,255,.85); letter-spacing:0.06em;
}
.newsletter-inner { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--sp-xl); padding:0 var(--gutter); }
.newsletter-copy h3 { font-family:var(--font-display); font-size:clamp(16px,2vw,22px); font-weight:900; text-transform:uppercase; margin-bottom:6px; }
.newsletter-copy p { font-size:12px; color:var(--c-text-muted); }
.newsletter-form { display:flex; }
.newsletter-input { background:var(--c-bg); border:1px solid var(--c-border-mid); border-right:none; color:var(--c-text); padding:12px 20px; font-size:12px; width:260px; outline:none; transition:border-color 0.2s; }
.newsletter-input:focus { border-color:var(--c-red); }
.newsletter-input::placeholder { color:var(--c-text-dim); }
.newsletter-submit { background:var(--c-red); color:#fff; padding:12px 24px; font-size:10px; font-weight:900; letter-spacing:0.2em; text-transform:uppercase; font-family:var(--font-display); transition:background 0.2s; border:none; cursor:pointer; }
.newsletter-submit:hover { background:var(--c-red-bright); }

@media (max-width:768px) {
  .featured-inner { grid-template-columns:1fr; }
  .featured-media { min-height:300px; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .newsletter-inner { grid-template-columns:1fr; }
  .newsletter-form { flex-direction:column; }
  .newsletter-input { width:100%; border-right:1px solid var(--c-border-mid); border-bottom:none; }
}

</style>