astro-component-kit 0.3.0 → 0.4.0

package/src/components/lib/sections/FooterMegaSection.astro

@@ -0,0 +1,155 @@
+---
+/**
+ * FooterMegaSection — Full site footer: brand blurb, newsletter field, four link
+ * columns, social icons, system-status pill and legal row.
+ *
+ * @param {string} brand - Brand name.
+ * @param {string} tagline - Short brand description.
+ * @param {Array<{title: string, links: Array<{label: string, href: string}>}>} columns - Link columns.
+ * @param {Array<{label: string, href: string, icon: 'github'|'x'|'discord'|'youtube'}>} socials - Social links.
+ * @param {string} status - System status text (empty to hide).
+ * @param {string} copyright - Copyright line.
+ * @param {string} variant - Footer style (default|bordered|minimal).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Column { title: string; links: Array<{ label: string; href: string }> }
+interface Social { label: string; href: string; icon: 'github' | 'x' | 'discord' | 'youtube' }
+interface Props {
+  brand?: string;
+  tagline?: string;
+  columns?: Column[];
+  socials?: Social[];
+  status?: string;
+  copyright?: string;
+  variant?: 'default' | 'bordered' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  brand = 'Astro Kit',
+  tagline = 'Accessible, zero-dependency components for building beautiful Astro sites.',
+  columns = [
+    { title: 'Product', links: [{ label: 'Components', href: '#' }, { label: 'Sections', href: '#' }, { label: 'Charts', href: '#' }, { label: 'Changelog', href: '#' }] },
+    { title: 'Resources', links: [{ label: 'Documentation', href: '#' }, { label: 'Installation', href: '#' }, { label: 'Notes', href: '#' }, { label: 'Showcase', href: '#' }] },
+    { title: 'Company', links: [{ label: 'About', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Contact', href: '#' }] },
+    { title: 'Legal', links: [{ label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }, { label: 'License (MIT)', href: '#' }] },
+  ],
+  socials = [
+    { label: 'GitHub', href: '#', icon: 'github' },
+    { label: 'X (Twitter)', href: '#', icon: 'x' },
+    { label: 'Discord', href: '#', icon: 'discord' },
+    { label: 'YouTube', href: '#', icon: 'youtube' },
+  ],
+  status = 'All systems operational',
+  copyright = `© ${new Date().getFullYear()} Astro Kit. All rights reserved.`,
+  variant = 'default',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const icons = {
+  github: '<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.9a3.4 3.4 0 0 0-.9-2.6c3.1-.4 6.4-1.5 6.4-7A5.4 5.4 0 0 0 20 4.8 5 5 0 0 0 19.9 1S18.7.6 16 2.5a13.4 13.4 0 0 0-7 0C6.3.6 5.1 1 5.1 1A5 5 0 0 0 5 4.8a5.4 5.4 0 0 0-1.5 3.7c0 5.4 3.3 6.6 6.4 7a3.4 3.4 0 0 0-.9 2.6V22"/>',
+  x: '<path d="M4 4l16 16M20 4 4 20"/>',
+  discord: '<path d="M8 12h.01M16 12h.01"/><path d="M7.5 7.5c3-1 6-1 9 0M7 16.5c3 1 7 1 10 0"/><path d="M15.5 17l1 3c3-1 5-3 5.5-4.5.5-4-1-8-3-11-1.5-.8-3-1.2-4.5-1.5L14 4.5M8.5 17l-1 3c-3-1-5-3-5.5-4.5-.5-4 1-8 3-11 1.5-.8 3-1.2 4.5-1.5L10 4.5"/>',
+  youtube: '<path d="M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.6 49.6 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.6 49.6 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/>',
+};
+const id = `fms-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<footer class={`fms fms--${variant} fms--${size} ${className}`} aria-labelledby={id}>
+  <h2 id={id} class="fms__sr">Site footer</h2>
+  <div class="fms__inner">
+    <div class="fms__top">
+      <div class="fms__brand">
+        <a class="fms__logo" href="/">
+          <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 3 20h4l5-10 5 10h4z" fill="var(--c-primary-light, #d4a017)" /></svg>
+          {brand}
+        </a>
+        <p class="fms__tagline">{tagline}</p>
+        <form class="fms__news" action="#" method="post">
+          <label for={`${id}-email`} class="fms__news-label">Get product updates</label>
+          <div class="fms__news-field">
+            <input id={`${id}-email`} type="email" name="email" placeholder="you@company.com" autocomplete="email" required />
+            <button type="submit" aria-label="Subscribe to product updates">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+            </button>
+          </div>
+        </form>
+      </div>
+      <nav class="fms__cols" aria-label="Footer">
+        {columns.map((c) => (
+          <div class="fms__col">
+            <h3 class="fms__col-title">{c.title}</h3>
+            <ul>
+              {c.links.map((l) => <li><a href={l.href}>{l.label}</a></li>)}
+            </ul>
+          </div>
+        ))}
+      </nav>
+    </div>
+    <div class="fms__bottom">
+      <p class="fms__copy">{copyright}</p>
+      {status && (
+        <a class="fms__status" href="#">
+          <span class="fms__dot" aria-hidden="true"></span>{status}
+        </a>
+      )}
+      <ul class="fms__socials">
+        {socials.map((s) => (
+          <li>
+            <a href={s.href} aria-label={s.label}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={icons[s.icon]}></svg>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .fms {
+    --fms-py: 4.5rem;
+    padding: var(--fms-py) var(--sp-6, 1.5rem) 2rem;
+    background: var(--c-bg-1, #0a0a0a);
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .fms--sm { --fms-py: 3rem; }
+  .fms--lg { --fms-py: 6rem; }
+  .fms--bordered .fms__inner { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl, 28px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: rgba(255, 255, 255, 0.015); }
+  .fms--minimal { background: transparent; border-top: 0; }
+  .fms--minimal .fms__news { display: none; }
+  .fms__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .fms__inner { max-width: 1180px; margin: 0 auto; }
+  .fms__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(2rem, 6vw, 5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
+  .fms__logo { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text-1, #fff); text-decoration: none; }
+  .fms__tagline { margin: 0.75rem 0 1.75rem; max-width: 320px; font-size: 0.9375rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .fms__news-label { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  .fms__news-field { display: flex; max-width: 340px; border-radius: var(--r-md, 12px); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); overflow: hidden; transition: border-color 0.2s ease; }
+  .fms__news-field:focus-within { border-color: var(--c-primary-light, #d4a017); }
+  .fms__news-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0 0.9rem; border: 0; background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.9375rem; }
+  .fms__news-field input:focus { outline: none; }
+  .fms__news-field input::placeholder { color: var(--c-text-3, #737373); }
+  .fms__news-field button { width: 46px; border: 0; background: rgba(255, 255, 255, 0.06); color: var(--c-text-1, #fff); cursor: pointer; transition: background 0.2s ease; }
+  .fms__news-field button:hover { background: var(--c-primary-light, #d4a017); color: #0a0a0a; }
+  .fms__news-field button:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: -2px; }
+  .fms__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 2rem; }
+  .fms__col-title { margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-1, #fff); }
+  .fms__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
+  .fms__col a, .fms__copy, .fms__status { font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); text-decoration: none; }
+  .fms__col a { display: inline-flex; align-items: center; min-height: 36px; transition: color 0.2s ease; }
+  .fms__col a:hover { color: var(--c-text-1, #fff); }
+  .fms a:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
+  .fms__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; }
+  .fms__copy { margin: 0; font-size: 0.8125rem; }
+  .fms__status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8125rem; }
+  .fms__status:hover { color: var(--c-text-1, #fff); }
+  .fms__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-pos, #34c38f); box-shadow: 0 0 8px var(--chart-pos, #34c38f); }
+  .fms__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
+  .fms__socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--c-text-2, #a3a3a3); transition: color 0.2s ease, background 0.2s ease; }
+  .fms__socials a:hover { color: var(--c-text-1, #fff); background: rgba(255, 255, 255, 0.06); }
+  @media (max-width: 860px) { .fms__top { grid-template-columns: 1fr; } }
+  @media (max-width: 560px) { .fms__bottom { flex-direction: column; align-items: flex-start; } }
+</style>

package/src/components/lib/sections/HeroDashboardPreview.astro

@@ -0,0 +1,180 @@
+---
+/**
+ * HeroDashboardPreview — SaaS hero with headline, CTAs and a live-rendered
+ * product dashboard mockup built from the kit's own SVG charts.
+ *
+ * @param {string} badge - Eyebrow badge.
+ * @param {string} title - Headline.
+ * @param {string} subtitle - Supporting paragraph.
+ * @param {{label: string, href: string}} primary - Primary CTA.
+ * @param {{label: string, href: string}} secondary - Secondary CTA.
+ * @param {string} variant - Mockup frame (browser|floating|flat).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+import LineChart from '../charts/LineChart.astro';
+import KpiStatTile from '../charts/KpiStatTile.astro';
+
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  primary?: { label: string; href: string };
+  secondary?: { label: string; href: string };
+  variant?: 'browser' | 'floating' | 'flat';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  badge = 'Analytics, reimagined',
+  title = 'See every metric that matters, in real time',
+  subtitle = 'Unified revenue, product and infrastructure dashboards. Set up in minutes, no SQL required.',
+  primary = { label: 'Start free trial', href: '#' },
+  secondary = { label: 'Book a demo', href: '#' },
+  variant = 'browser',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `hdp-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<section class={`hdp hdp--${variant} hdp--${size} ${className}`} aria-labelledby={id}>
+  <div class="hdp__glow" aria-hidden="true"></div>
+  <div class="hdp__copy">
+    <span class="hdp__badge">{badge}</span>
+    <h1 id={id} class="hdp__title">{title}</h1>
+    <p class="hdp__subtitle">{subtitle}</p>
+    <div class="hdp__actions">
+      <a class="hdp__btn hdp__btn--primary" href={primary.href}>{primary.label}</a>
+      <a class="hdp__btn hdp__btn--ghost" href={secondary.href}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m10 8 6 4-6 4V8z" fill="currentColor" /></svg>
+        {secondary.label}
+      </a>
+    </div>
+  </div>
+
+  <div class="hdp__mock" role="group" aria-label="Product dashboard preview">
+    {variant === 'browser' && (
+      <div class="hdp__chrome" aria-hidden="true">
+        <span></span><span></span><span></span>
+        <p>app.example.com/overview</p>
+      </div>
+    )}
+    <div class="hdp__screen">
+      <div class="hdp__kpis">
+        <KpiStatTile label="Revenue" value="$128.4k" change={9.2} period="vs last month" size="sm" variant="solid" trend={[80, 84, 90, 88, 96, 102, 110, 118, 128]} />
+        <KpiStatTile label="Active users" value="24,812" change={4.1} period="vs last month" size="sm" variant="solid" trend={[20, 21, 21.5, 22, 22.8, 23.1, 23.9, 24.2, 24.8]} />
+        <KpiStatTile label="Churn" value="2.3%" change={-0.6} invert period="vs last month" size="sm" variant="solid" trend={[3.1, 3, 2.9, 2.8, 2.7, 2.6, 2.5, 2.4, 2.3]} />
+      </div>
+      <LineChart title="Revenue by channel" subtitle="Last 12 weeks" variant="solid" size="sm" height={220} />
+    </div>
+  </div>
+</section>
+
+<style>
+  .hdp {
+    --hdp-py: 5.5rem;
+    position: relative;
+    overflow: hidden;
+    padding: var(--hdp-py) var(--sp-6, 1.5rem) 0;
+    background: var(--c-bg, #050505);
+  }
+  .hdp--sm { --hdp-py: 3.5rem; }
+  .hdp--lg { --hdp-py: 7.5rem; }
+  .hdp__glow {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    width: 900px;
+    height: 600px;
+    transform: translateX(-50%);
+    background: radial-gradient(ellipse, rgba(57, 135, 229, 0.16), transparent 65%);
+    filter: blur(40px);
+    pointer-events: none;
+  }
+  .hdp__copy { position: relative; max-width: 760px; margin: 0 auto 3.5rem; text-align: center; }
+  .hdp__badge {
+    display: inline-block;
+    padding: 0.35rem 0.85rem;
+    border-radius: var(--r-full, 999px);
+    background: rgba(57, 135, 229, 0.12);
+    border: 1px solid rgba(57, 135, 229, 0.3);
+    color: #a9cdf7;
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  .hdp__title {
+    margin: 1.4rem 0 1rem;
+    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
+    font-weight: 800;
+    letter-spacing: -0.035em;
+    line-height: 1.06;
+    color: var(--c-text-1, #fff);
+    text-wrap: balance;
+  }
+  .hdp__subtitle { margin: 0 auto 2rem; max-width: 560px; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .hdp__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
+  .hdp__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 48px;
+    padding: 0 1.5rem;
+    border-radius: var(--r-md, 12px);
+    font-weight: 650;
+    text-decoration: none;
+    transition: transform 0.2s ease, background 0.2s ease;
+  }
+  .hdp__btn:hover { transform: translateY(-1px); }
+  .hdp__btn:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .hdp__btn--primary { background: var(--chart-1, #3987e5); color: #fff; }
+  .hdp__btn--primary:hover { background: #5598e7; color: #fff; }
+  .hdp__btn--ghost { color: var(--c-text-1, #fff); border: 1px solid rgba(255, 255, 255, 0.14); }
+  .hdp__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--c-text-1, #fff); }
+
+  .hdp__mock {
+    position: relative;
+    max-width: 1080px;
+    margin: 0 auto;
+    border-radius: var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 0;
+    background: #0a0a0c;
+    overflow: hidden;
+    mask-image: linear-gradient(to bottom, #000 70%, transparent);
+  }
+  .hdp--floating .hdp__mock {
+    border-radius: var(--r-xl, 24px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: var(--hdp-py);
+    mask-image: none;
+    transform: perspective(1600px) rotateX(8deg);
+    box-shadow: 0 60px 120px -40px rgba(57, 135, 229, 0.35);
+  }
+  .hdp--flat .hdp__mock { background: transparent; border-color: transparent; }
+  .hdp__chrome {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.8rem 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .hdp__chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
+  .hdp__chrome p {
+    margin: 0 auto;
+    padding: 0.25rem 1rem;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.04);
+    font-size: 0.75rem;
+    color: var(--c-text-3, #737373);
+  }
+  .hdp__screen { display: grid; gap: 1rem; padding: 1.25rem; }
+  .hdp__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
+  @media (max-width: 760px) {
+    .hdp__kpis { grid-template-columns: 1fr; }
+    .hdp__kpis > :global(*:nth-child(n + 2)) { display: none; }
+    .hdp--floating .hdp__mock { transform: none; }
+  }
+</style>

package/src/components/lib/sections/HeroMinimalCentered.astro

@@ -0,0 +1,175 @@
+---
+/**
+ * HeroMinimalCentered — Typography-first centered hero with an announcement pill,
+ * two CTAs and a row of trust signals. No imagery, loads instantly.
+ *
+ * @param {string} announcement - Text in the top pill (empty to hide).
+ * @param {string} announcementHref - Link for the pill.
+ * @param {string} title - Main headline. Wrap a word in *asterisks* to highlight it.
+ * @param {string} subtitle - Supporting paragraph.
+ * @param {{label: string, href: string}} primary - Primary CTA.
+ * @param {{label: string, href: string}} secondary - Secondary CTA.
+ * @param {string[]} trust - Short trust signals under the CTAs.
+ * @param {string} variant - Background treatment (default|glow|grid).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  announcement?: string;
+  announcementHref?: string;
+  title?: string;
+  subtitle?: string;
+  primary?: { label: string; href: string };
+  secondary?: { label: string; href: string };
+  trust?: string[];
+  variant?: 'default' | 'glow' | 'grid';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  announcement = 'New: 50 sections & 45 SVG charts',
+  announcementHref = '#',
+  title = 'Build landing pages that *feel* expensive',
+  subtitle = 'Accessible, zero-dependency Astro components with a dark, refined aesthetic. Copy, paste, ship.',
+  primary = { label: 'Browse components', href: '#' },
+  secondary = { label: 'Read the docs', href: '#' },
+  trust = ['MIT licensed', 'WCAG AA', 'No runtime JS required'],
+  variant = 'glow',
+  size = 'lg',
+  className = '',
+} = Astro.props;
+
+const id = `hmc-${Math.random().toString(36).slice(2, 8)}`;
+const parts = title.split(/\*(.+?)\*/);
+---
+
+<section class={`hmc hmc--${variant} hmc--${size} ${className}`} aria-labelledby={id}>
+  <div class="hmc__bg" aria-hidden="true"></div>
+  <div class="hmc__inner">
+    {announcement && (
+      <a class="hmc__pill" href={announcementHref}>
+        <span class="hmc__dot" aria-hidden="true"></span>
+        {announcement}
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+      </a>
+    )}
+    <h1 id={id} class="hmc__title">
+      {parts.map((p, i) => (i % 2 ? <em>{p}</em> : p))}
+    </h1>
+    <p class="hmc__subtitle">{subtitle}</p>
+    <div class="hmc__actions">
+      <a class="hmc__btn hmc__btn--primary" href={primary.href}>{primary.label}</a>
+      <a class="hmc__btn hmc__btn--ghost" href={secondary.href}>{secondary.label}</a>
+    </div>
+    {trust.length > 0 && (
+      <ul class="hmc__trust">
+        {trust.map((t) => (
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+            {t}
+          </li>
+        ))}
+      </ul>
+    )}
+  </div>
+</section>
+
+<style>
+  .hmc {
+    --hmc-py: 6rem;
+    position: relative;
+    overflow: hidden;
+    padding: var(--hmc-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+    text-align: center;
+  }
+  .hmc--sm { --hmc-py: 4rem; }
+  .hmc--lg { --hmc-py: 8rem; }
+  .hmc__bg { position: absolute; inset: 0; pointer-events: none; }
+  .hmc--glow .hmc__bg {
+    background:
+      radial-gradient(ellipse 60% 50% at 50% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.14)), transparent 70%),
+      radial-gradient(ellipse 40% 30% at 50% 100%, rgba(57, 135, 229, 0.08), transparent 70%);
+  }
+  .hmc--grid .hmc__bg {
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+    background-size: 48px 48px;
+    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent);
+  }
+  .hmc__inner { position: relative; max-width: 820px; margin: 0 auto; }
+  .hmc__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 36px;
+    padding: 0.35rem 0.9rem;
+    border-radius: var(--r-full, 999px);
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--c-text-2, #a3a3a3);
+    font-size: 0.8125rem;
+    text-decoration: none;
+    transition: border-color 0.2s ease, color 0.2s ease;
+  }
+  .hmc__pill:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--c-text-1, #fff); }
+  .hmc__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary-light, #d4a017); box-shadow: 0 0 10px var(--c-primary-light, #d4a017); }
+  .hmc__title {
+    margin: 1.75rem 0 1.25rem;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 800;
+    line-height: 1.04;
+    letter-spacing: -0.035em;
+    color: var(--c-text-1, #fff);
+    text-wrap: balance;
+  }
+  .hmc__title em {
+    font-style: normal;
+    background: linear-gradient(120deg, var(--c-accent, #fef3c7), var(--c-primary-light, #d4a017));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .hmc__subtitle {
+    max-width: 600px;
+    margin: 0 auto 2.25rem;
+    font-size: clamp(1rem, 2vw, 1.1875rem);
+    line-height: 1.6;
+    color: var(--c-text-2, #a3a3a3);
+  }
+  .hmc__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
+  .hmc__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    padding: 0 1.5rem;
+    border-radius: var(--r-md, 12px);
+    font-weight: 650;
+    font-size: 0.9375rem;
+    text-decoration: none;
+    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+  }
+  .hmc__btn:hover { transform: translateY(-1px); }
+  .hmc__btn:focus-visible, .hmc__pill:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .hmc__btn--primary { background: var(--c-primary-light, #d4a017); color: #0a0a0a; }
+  .hmc__btn--primary:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; }
+  .hmc__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.14); color: var(--c-text-1, #fff); }
+  .hmc__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--c-text-1, #fff); }
+  .hmc__trust {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem 1.75rem;
+    margin: 2.5rem 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.875rem;
+    color: var(--c-text-2, #a3a3a3);
+  }
+  .hmc__trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
+  .hmc__trust svg { color: var(--chart-pos, #34c38f); }
+  @media (prefers-reduced-motion: reduce) { .hmc__btn { transition: none; } }
+</style>