/* ═══════════════════════════════════════════════════════════════
   Heavy Metal Fonts — homepage.css
   Dark red, glassmorphism font-store homepage for metal/band designers
   ═══════════════════════════════════════════════════════════════ */

@keyframes hmf-up      { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes hmf-in      { from{opacity:0} to{opacity:1} }
@keyframes hmf-glow    { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes hmf-flicker {
  0%,100%   { text-shadow:0 0 46px rgba(200,31,60,.45), 0 4px 0 rgba(0,0,0,.65); }
  50%       { text-shadow:0 0 68px rgba(200,31,60,.7),  0 4px 0 rgba(0,0,0,.65); }
  52%       { text-shadow:0 0 30px rgba(200,31,60,.3),  0 4px 0 rgba(0,0,0,.65); }
  54%       { text-shadow:0 0 68px rgba(200,31,60,.7),  0 4px 0 rgba(0,0,0,.65); }
}
@keyframes hmf-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes hmf-shine   { from{transform:translateX(-120%) skewX(-15deg);} to{transform:translateX(220%) skewX(-15deg);} }

[data-reveal]                 { opacity:0; }
[data-reveal].revealed        { animation:hmf-up .6s cubic-bezier(.22,.61,.36,1) forwards; }
[data-reveal="fade"].revealed { animation:hmf-in .55s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].revealed { animation:none !important; opacity:1 !important; }
  * { transition-duration:.01ms !important; }
}

:root {
  /* Base surfaces */
  --hmf-bg:         #080505;
  --hmf-bg-solid-2: #150a0a;
  --hmf-bg-solid-3: #1d0e0e;

  /* Glass panels — translucent, layered over the dark red glow */
  --hmf-glass:       rgba(255,255,255,.045);
  --hmf-glass-2:     rgba(255,255,255,.07);
  --hmf-glass-border: rgba(255,255,255,.10);
  --hmf-blur:        18px;

  /* Text */
  --hmf-text:      #f6ecec;
  --hmf-text-dim:  #bfa6a6;
  --hmf-text-mute: #8a7171;
  --hmf-white:     #ffffff;

  /* Dark red accent system */
  --hmf-red:        #c81f3c;
  --hmf-red-bright: #ef2d51;
  --hmf-red-dark:   #6e0e21;
  --hmf-red-glow:   rgba(200,31,60,.5);
  --hmf-red-border: rgba(200,31,60,.38);

  /* Type */
  --hmf-font-display: 'New Rocker', 'Anton', cursive;
  --hmf-font-body:    'Inter', -apple-system, sans-serif;

  --hmf-radius:    10px;
  --hmf-radius-sm: 6px;
}

.hmf-skip-link {
  position:absolute; top:-100%; left:16px;
  background:var(--hmf-red); color:#fff;
  padding:10px 20px; font-size:13px; font-weight:700;
  text-decoration:none; z-index:10000; transition:top .15s;
}
.hmf-skip-link:focus { top:8px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hmf-page {
  font-family:var(--hmf-font-body); color:var(--hmf-text);
  margin:0; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 60% 45% at 12% -8%,  rgba(200,31,60,.28), transparent 60%),
    radial-gradient(ellipse 55% 45% at 92% 18%,  rgba(120,10,30,.20), transparent 55%),
    radial-gradient(ellipse 65% 55% at 50% 108%, rgba(160,15,40,.22), transparent 60%),
    var(--hmf-bg);
  background-attachment:fixed;
}
.hmf-page * { box-sizing:border-box; }
.hmf-page::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hmf-wrap { max-width:1240px; margin:0 auto; padding:0 32px; }

.hmf-page *:focus-visible { outline:2px solid var(--hmf-red-bright); outline-offset:2px; }

.hmf-eyebrow {
  display:flex; align-items:center; gap:8px;
  font-family:var(--hmf-font-body); font-size:12px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--hmf-red-bright);
  margin-bottom:14px;
}
.hmf-eyebrow::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--hmf-red-bright); box-shadow:0 0 10px var(--hmf-red-glow);
  animation:hmf-glow 2s ease-in-out infinite; flex-shrink:0;
}

/* Small reusable "glass" panel treatment */
.hmf-glass {
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.hmf-btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--hmf-font-body); font-size:14px; font-weight:700;
  padding:14px 26px; text-decoration:none !important; cursor:pointer;
  border:1.5px solid transparent; border-radius:var(--hmf-radius-sm);
  letter-spacing:.02em; transition:all .2s ease;
}
.hmf-btn::after {
  content:''; position:absolute; top:0; left:0; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%) skewX(-15deg); pointer-events:none;
}
.hmf-btn:hover::after { animation:hmf-shine .8s ease forwards; }
.hmf-btn--primary {
  background:linear-gradient(135deg, var(--hmf-red-bright), var(--hmf-red-dark));
  color:#fff !important; box-shadow:0 10px 28px var(--hmf-red-glow);
}
.hmf-btn--primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px var(--hmf-red-glow); filter:brightness(1.08); }
.hmf-btn--outline {
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--hmf-white) !important; border-color:var(--hmf-glass-border);
}
.hmf-btn--outline:hover { border-color:var(--hmf-red-border); background:rgba(200,31,60,.12); }

/* ══════════════════════════════════════════════════ NAV */
.hmf-nav {
  position:sticky; top:0; z-index:999;
  background:rgba(8,4,4,.55);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border-bottom:1px solid var(--hmf-glass-border);
}
.hmf-nav-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; height:76px; gap:24px; }

.hmf-nav-logo { display:flex; flex-direction:column; line-height:1; text-decoration:none !important; transition:transform .2s ease; }
.hmf-nav-logo:hover { transform:scale(1.04); }
.hmf-nav-logo--img { flex-direction:row; align-items:center; }
.hmf-nav-logo--img img { display:block; height:40px; max-height:40px; width:auto; max-width:220px; object-fit:contain; }
.hmf-logo-main {
  font-family:var(--hmf-font-display); font-size:22px; color:var(--hmf-white);
  letter-spacing:.01em; text-transform:uppercase; text-shadow:0 0 18px rgba(200,31,60,.4);
}
.hmf-logo-sub  {
  font-family:var(--hmf-font-body); font-size:10px; font-weight:800; letter-spacing:.3em;
  color:var(--hmf-red-bright); margin-top:4px;
}

.hmf-nav-links { display:flex; align-items:center; gap:34px; justify-self:center; }
.hmf-nav-links a {
  position:relative; font-size:14px; font-weight:600; color:var(--hmf-text-dim); text-decoration:none;
  transition:color .15s; padding-bottom:4px;
}
.hmf-nav-links a::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg, var(--hmf-red-bright), var(--hmf-red-dark));
  transition:width .25s ease; border-radius:2px;
}
.hmf-nav-links a:hover { color:var(--hmf-white); }
.hmf-nav-links a:hover::after { width:100%; }

.hmf-nav-right { display:flex; align-items:center; gap:20px; }
.hmf-nav-search-btn {
  display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--hmf-text-dim);
  cursor:pointer; font-family:var(--hmf-font-body); font-size:13px; padding:0;
}
.hmf-nav-search-btn:hover { color:var(--hmf-white); }
.hmf-search-fake { display:none; }
.hmf-nav-icon { position:relative; color:var(--hmf-text-dim); display:flex; text-decoration:none; }
.hmf-nav-icon:hover { color:var(--hmf-white); }
.hmf-cart-count {
  position:absolute; top:-8px; right:-9px; background:var(--hmf-red-bright); color:#fff;
  font-size:10px; font-weight:800; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 10px var(--hmf-red-glow);
}

/* ══════════════════════════════════════════════════ HERO (full-bleed canvas) */
.hmf-hero { position:relative; min-height:640px; display:flex; align-items:center; overflow:hidden; padding:64px 0; }

/* Full-cover image/canvas layer — fills the entire hero, edge to edge */
.hmf-hero-canvas { position:absolute; inset:0; z-index:0; }
.hmf-hero-canvas-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hmf-hero-canvas-fallback {
  width:100%; height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:6%;
  background:
    radial-gradient(ellipse 70% 55% at 78% 10%, rgba(200,31,60,.35), transparent 60%),
    radial-gradient(ellipse 55% 50% at 5% 95%,  rgba(110,14,33,.4), transparent 60%),
    var(--hmf-bg);
}
.hmf-hero-monument {
  width:100%; max-width:420px; opacity:.9;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65)) drop-shadow(0 0 60px rgba(200,31,60,.25));
  animation:hmf-float 5s ease-in-out infinite;
}

/* Dark gradient overlay so text stays legible over any photo */
.hmf-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(5,3,3,.94) 0%, rgba(5,3,3,.78) 32%, rgba(5,3,3,.32) 62%, rgba(5,3,3,.15) 100%),
    linear-gradient(0deg, rgba(5,3,3,.75) 0%, transparent 30%, transparent 75%, rgba(5,3,3,.5) 100%);
}

/* Hero uses its own full-width container so the text always hugs the
   true left edge of the viewport — the standard 1240px .hmf-wrap would
   center itself and leave a large empty gap on ultra-wide screens. */
.hmf-hero .hmf-wrap {
  max-width:none; width:100%;
  padding-left:clamp(24px, 6vw, 96px);
  padding-right:clamp(24px, 6vw, 96px);
}
.hmf-hero-inner { position:relative; z-index:2; }
.hmf-hero-left { max-width:640px; }

.hmf-hero-h {
  font-family:var(--hmf-font-display); font-weight:400; font-size:clamp(48px,6.4vw,88px);
  line-height:1.05; letter-spacing:.005em; margin:0 0 22px; color:var(--hmf-white);
  text-transform:uppercase;
  text-shadow:0 0 46px rgba(200,31,60,.45), 0 4px 0 rgba(0,0,0,.65);
  animation:hmf-flicker 6s ease-in-out infinite;
}
.hmf-hero-h em {
  font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--hmf-red-bright);
  text-shadow:none;
}
.hmf-hero-sub { font-size:16px; line-height:1.65; color:var(--hmf-text-dim); max-width:440px; margin:0 0 32px; }
.hmf-hero-ctas { display:flex; gap:14px; margin-bottom:44px; }

.hmf-hero-uses-label {
  display:block; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--hmf-red-bright); margin-bottom:14px;
}
.hmf-hero-uses-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:24px; }
.hmf-hero-uses-list li {
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; color:var(--hmf-text-dim);
}
.hmf-hero-uses-list svg { color:var(--hmf-text-mute); flex-shrink:0; }

/* ══════════════════════════════════════════════════ SECTIONS */
.hmf-section { padding:92px 0; border-top:1px solid var(--hmf-glass-border); }
.hmf-section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px; }
.hmf-section-head .hmf-eyebrow { margin-bottom:0; }
.hmf-view-all {
  font-size:13px; font-weight:700; color:var(--hmf-white); text-decoration:none;
  border-bottom:1px solid var(--hmf-red-border); padding-bottom:2px; transition:all .15s;
}
.hmf-view-all:hover { border-color:var(--hmf-red-bright); color:var(--hmf-red-bright); }

/* Shared section heading style — Anton, uppercase, tight */
.hmf-h2 {
  font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  color:var(--hmf-white); letter-spacing:.01em;
}

/* Shared form fields — used on Contact and Enterprise pages */
.hmf-field { margin-bottom:20px; }
.hmf-field label { display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hmf-text-dim); margin-bottom:8px; }
.hmf-field label span { color:var(--hmf-red-bright); }
.hmf-field .hmf-field-opt { color:var(--hmf-text-mute); font-weight:600; text-transform:none; letter-spacing:0; }
.hmf-field input, .hmf-field select, .hmf-field textarea {
  width:100%; background:rgba(0,0,0,.28); border:1px solid var(--hmf-glass-border); border-radius:var(--hmf-radius-sm);
  padding:12px 14px; color:var(--hmf-white); font-family:var(--hmf-font-body); font-size:14px;
}
.hmf-field input::placeholder, .hmf-field textarea::placeholder { color:var(--hmf-text-mute); }
.hmf-field textarea { resize:vertical; min-height:90px; }
.hmf-field input:focus, .hmf-field select:focus, .hmf-field textarea:focus { outline:none; border-color:var(--hmf-red-border); }
.hmf-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23bfa6a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.hmf-field input.hmf-input--error, .hmf-field textarea.hmf-input--error { border-color:var(--hmf-red-bright); box-shadow:0 0 0 1px var(--hmf-red-bright); }

/* ── Featured fonts ──────────────────────────────────────────── */
.hmf-font-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hmf-font-card {
  display:block; background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border); border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  text-decoration:none !important; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hmf-font-card:hover {
  transform:translateY(-4px); border-color:var(--hmf-red-border);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 26px rgba(200,31,60,.2);
}
/* Image sits flush to the card edges — no letterboxing padding. */
.hmf-font-visual {
  position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(200,31,60,.16), transparent 55%),
    rgba(0,0,0,.28);
  border-bottom:1px solid var(--hmf-glass-border); overflow:hidden;
}
.hmf-font-visual img { width:100%; height:100%; object-fit:contain; display:block; }
.hmf-font-specimen {
  font-family:var(--hmf-font-display); font-weight:400; font-size:26px; text-transform:uppercase;
  color:var(--hmf-white); text-align:center; letter-spacing:.01em; line-height:1.25; padding:0 14px;
  text-shadow:0 0 24px rgba(200,31,60,.35);
}
.hmf-font-body { padding:13px 14px 14px; }
.hmf-font-name { font-family:var(--hmf-font-body); font-size:14.5px; font-weight:700; margin:0 0 2px; color:var(--hmf-white); line-height:1.3; }
.hmf-font-sub  { font-size:11.5px; color:var(--hmf-text-mute); margin:0 0 10px; }
.hmf-font-foot { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--hmf-glass-border); }
.hmf-font-price { font-size:15px; font-weight:800; color:var(--hmf-red-bright); letter-spacing:-.01em; }
.hmf-font-cart-btn {
  position:relative; width:28px; height:28px; border-radius:50%; border:1px solid var(--hmf-glass-border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--hmf-text-dim);
  transition:background .15s, color .15s, box-shadow .15s, border-color .15s, transform .12s;
}
.hmf-font-cart-btn[data-product-id] { cursor:pointer; }
.hmf-font-cart-btn[data-product-id]:hover { background:linear-gradient(135deg, var(--hmf-red-bright), var(--hmf-red-dark)); border-color:transparent; color:#fff; box-shadow:0 0 14px var(--hmf-red-glow); }
.hmf-font-cart-btn[data-product-id]:active { transform:scale(.9); }
.hmf-font-card:hover .hmf-font-cart-btn {
  background:linear-gradient(135deg, var(--hmf-red-bright), var(--hmf-red-dark));
  border-color:transparent; color:#fff; box-shadow:0 0 14px var(--hmf-red-glow);
}
/* Icon swap: cart → check when added */
.hmf-cart-btn-check { display:none; }
.hmf-font-cart-btn.is-added { background:linear-gradient(135deg,#2fb45f,#1c8a45); border-color:transparent; color:#fff; box-shadow:0 0 14px rgba(46,204,113,.5); }
.hmf-font-cart-btn.is-added .hmf-cart-btn-cart { display:none; }
.hmf-font-cart-btn.is-added .hmf-cart-btn-check { display:block; }
.hmf-font-cart-btn.is-error { background:#c0392b; border-color:transparent; color:#fff; }
/* Loading spinner */
.hmf-font-cart-btn.is-loading { pointer-events:none; }
.hmf-font-cart-btn.is-loading .hmf-cart-btn-cart { opacity:0; }
.hmf-font-cart-btn.is-loading::after {
  content:''; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:hmf-spin .6s linear infinite;
}
@keyframes hmf-spin { to { transform:rotate(360deg); } }

/* Cart count badge — highlight when it has items */
.hmf-cart-count.has-items { background:var(--hmf-red-bright); color:#fff; }

/* ── Add-to-cart toast (bottom-right) ── */
.hmf-cart-toast {
  position:fixed; right:22px; bottom:22px; z-index:9600; max-width:320px;
  display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:12px;
  background:linear-gradient(150deg,#152012,#0b0f0a); border:1px solid rgba(46,204,113,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.5); color:var(--hmf-text);
  opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.hmf-cart-toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.hmf-cart-toast.is-error { background:linear-gradient(150deg,#2a1010,#140909); border-color:rgba(200,31,60,.4); }
.hmf-cart-toast-ic { flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#2fb45f,#1c8a45); }
.hmf-cart-toast-body { font-size:13px; line-height:1.4; }
.hmf-cart-toast-body strong { color:var(--hmf-white); font-weight:700; }
.hmf-cart-toast-link { margin-left:auto; flex-shrink:0; font-size:12.5px; font-weight:700; color:#8ff0b0; text-decoration:none; white-space:nowrap; }
.hmf-cart-toast-link:hover { text-decoration:underline; }
@media (max-width:640px){ .hmf-cart-toast { right:12px; left:12px; bottom:12px; max-width:none; } }

/* ── Categories ──────────────────────────────────────────────── */
.hmf-cat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.hmf-cat-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:26px 20px; background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border); border-radius:var(--hmf-radius);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  text-decoration:none !important; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.hmf-cat-card:hover {
  transform:translateY(-4px); border-color:var(--hmf-red-border);
  box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 26px rgba(200,31,60,.2);
}
.hmf-cat-icon { color:var(--hmf-red-bright); transition:transform .3s ease; }
.hmf-cat-card:hover .hmf-cat-icon { transform:scale(1.15) rotate(-6deg); }
.hmf-cat-name { font-size:14px; font-weight:700; color:var(--hmf-white); }
.hmf-cat-count { font-size:12px; color:var(--hmf-text-mute); }
.hmf-cat-card--more { background:var(--hmf-glass-2); }

/* ── Trusted-by strip ────────────────────────────────────────── */
.hmf-trusted { padding:56px 0 12px; border-top:1px solid var(--hmf-glass-border); overflow:hidden; }
.hmf-trusted-label {
  text-align:center; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--hmf-text-mute); margin-bottom:28px;
}
.hmf-logo-slider { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.hmf-logo-track { display:flex; gap:64px; width:max-content; animation:hmf-scroll 28s linear infinite; }
@keyframes hmf-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hmf-logo-item span {
  font-family:var(--hmf-font-display); font-weight:400; font-size:22px; color:var(--hmf-text-mute);
  text-transform:uppercase; white-space:nowrap; letter-spacing:.02em;
}
.hmf-logo-item img {
  height:44px; width:auto; max-width:160px; object-fit:contain; display:block;
  opacity:.55; filter:grayscale(1) brightness(1.6); transition:opacity .2s ease, filter .2s ease;
}
.hmf-logo-item img:hover { opacity:1; filter:grayscale(0) brightness(1); }
.hmf-trusted-note { text-align:center; font-size:11px; color:var(--hmf-text-mute); margin:24px 0 0; font-style:italic; }

/* ── Powerful fonts (image + copy) ───────────────────────────── */
.hmf-power-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hmf-power-h {
  font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,3.6vw,42px); line-height:1.1; color:var(--hmf-white); margin:0 0 24px;
  text-shadow:0 0 30px rgba(200,31,60,.3);
}
.hmf-power-list { list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:14px; }
.hmf-power-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--hmf-text-dim); }
.hmf-power-list svg { color:var(--hmf-red-bright); margin-top:2px; flex-shrink:0; }
.hmf-power-visual {
  border-radius:var(--hmf-radius); overflow:hidden; border:1px solid var(--hmf-glass-border);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.hmf-power-img { display:block; width:100%; height:auto; }

/* ── Why choose us ───────────────────────────────────────────── */
.hmf-why-title {
  text-align:center; font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,3.6vw,40px); color:var(--hmf-white); margin:0 0 48px;
  text-shadow:0 0 30px rgba(200,31,60,.3);
}
.hmf-why-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.hmf-why-item {
  text-align:center; padding:28px 18px; border-radius:var(--hmf-radius);
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border);
  box-shadow:0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, border-color .2s ease;
}
.hmf-why-item:hover { transform:translateY(-4px); border-color:var(--hmf-red-border); }
.hmf-why-icon {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, rgba(200,31,60,.25), rgba(110,14,33,.15));
  border:1px solid var(--hmf-red-border);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--hmf-red-bright);
  box-shadow:0 0 22px rgba(200,31,60,.2);
}
.hmf-why-item h3 { font-size:15px; font-weight:700; color:var(--hmf-white); margin:0 0 8px; }
.hmf-why-item p { font-size:13px; line-height:1.6; color:var(--hmf-text-mute); margin:0; }

/* ── Testimonials ────────────────────────────────────────────── */
.hmf-testi-title {
  text-align:center; font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,3.6vw,40px); color:var(--hmf-white); margin:0 0 40px;
  text-shadow:0 0 30px rgba(200,31,60,.3);
}
.hmf-testi-wrap { display:flex; align-items:center; gap:24px; max-width:760px; margin:0 auto; }
.hmf-testi-arrow {
  flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid var(--hmf-glass-border);
  background:var(--hmf-glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--hmf-text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.hmf-testi-arrow:hover { border-color:var(--hmf-red-bright); color:var(--hmf-red-bright); }
.hmf-testi-track {
  position:relative; flex:1; min-height:190px; padding:28px 32px; border-radius:var(--hmf-radius);
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.hmf-testi-slide { display:none; text-align:center; animation:hmf-in .4s ease; }
.hmf-testi-slide.active { display:block; }
.hmf-testi-quote-mark { font-family:var(--hmf-font-display); font-size:48px; color:var(--hmf-red-bright); line-height:1; display:block; opacity:.7; }
.hmf-testi-text { font-size:17px; line-height:1.7; color:var(--hmf-text); margin:8px 0 24px; }
.hmf-testi-person { display:flex; align-items:center; justify-content:center; gap:12px; }
.hmf-testi-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--hmf-red-bright), var(--hmf-red-dark));
  border:1px solid var(--hmf-glass-border);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff;
}
.hmf-testi-person span { display:flex; flex-direction:column; align-items:flex-start; font-size:13px; }
.hmf-testi-person strong { color:var(--hmf-white); }
.hmf-testi-person em { color:var(--hmf-text-mute); font-style:normal; }
.hmf-testi-dots { display:flex; justify-content:center; gap:8px; margin-top:32px; }
.hmf-testi-dot { width:8px; height:8px; border-radius:50%; border:none; background:var(--hmf-glass-border); cursor:pointer; padding:0; transition:background .15s; }
.hmf-testi-dot.active { background:var(--hmf-red-bright); box-shadow:0 0 10px var(--hmf-red-glow); }

/* ── Newsletter ──────────────────────────────────────────────── */
.hmf-newsletter { padding:60px 0; border-top:1px solid var(--hmf-glass-border); }
.hmf-newsletter-inner {
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding:40px; border-radius:var(--hmf-radius);
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.hmf-newsletter-h {
  font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,2.8vw,32px); color:var(--hmf-white); margin:0 0 6px;
}
.hmf-newsletter-sub { font-size:14px; color:var(--hmf-text-mute); margin:0; }
.hmf-newsletter-form { display:flex; gap:12px; }
.hmf-newsletter-form input {
  background:rgba(0,0,0,.25); border:1px solid var(--hmf-glass-border); border-radius:var(--hmf-radius-sm);
  padding:14px 18px; color:var(--hmf-white); font-family:var(--hmf-font-body); font-size:14px; min-width:260px;
}
.hmf-newsletter-form input::placeholder { color:var(--hmf-text-mute); }
.hmf-newsletter-form input:focus { outline:none; border-color:var(--hmf-red-border); }

/* ══════════════════════════════════════════════════ FOOTER */
.hmf-footer { padding:72px 0 28px; }
.hmf-footer-top { display:grid; grid-template-columns:1.3fr 2fr 1.1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--hmf-glass-border); }
.hmf-footer-brand-name {
  font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:22px; color:var(--hmf-white); margin-bottom:14px;
}
.hmf-footer-brand-sub { font-size:13px; line-height:1.7; color:var(--hmf-text-mute); max-width:280px; margin:0 0 22px; }
.hmf-footer-social { display:flex; gap:12px; }
.hmf-footer-social a {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--hmf-glass-border); color:var(--hmf-text-dim);
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .15s;
  background:var(--hmf-glass);
}
.hmf-footer-social a:hover { color:var(--hmf-white); border-color:var(--hmf-red-border); box-shadow:0 0 14px rgba(200,31,60,.25); }

.hmf-footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.hmf-footer-cols h3 { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hmf-white); margin:0 0 18px; }
.hmf-footer-cols ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.hmf-footer-cols a { font-size:13px; color:var(--hmf-text-mute); text-decoration:none; transition:color .15s; }
.hmf-footer-cols a:hover { color:var(--hmf-red-bright); }

.hmf-footer-cta {
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-glass-border); border-radius:var(--hmf-radius);
  box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.hmf-footer-cta h3 { font-size:15px; font-weight:700; color:var(--hmf-white); margin:0; }
.hmf-footer-cta p { font-size:13px; color:var(--hmf-text-mute); margin:0 0 6px; }

.hmf-footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:24px; flex-wrap:wrap; gap:16px; }
.hmf-footer-copy { font-size:12px; color:var(--hmf-text-mute); }
.hmf-footer-pay { display:flex; gap:16px; }
.hmf-footer-pay span { font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--hmf-text-mute); }

/* ══════════════════════════════════════════════════ RESPONSIVE */
@media (max-width: 1080px) {
  .hmf-font-grid { grid-template-columns:repeat(2,1fr); }
  .hmf-cat-grid  { grid-template-columns:repeat(3,1fr); }
  .hmf-footer-top { grid-template-columns:1fr 1fr; }
  .hmf-footer-cta { grid-column:1/-1; }
}
@media (max-width: 900px) {
  .hmf-nav-links { display:none; }
  .hmf-hero { min-height:560px; }
  .hmf-hero-overlay {
    background:
      linear-gradient(180deg, rgba(5,3,3,.55) 0%, rgba(5,3,3,.75) 45%, rgba(5,3,3,.95) 100%);
  }
  .hmf-hero-left { max-width:100%; }
  .hmf-power-inner { grid-template-columns:1fr; }
  .hmf-power-visual { order:-1; }
  .hmf-why-grid { grid-template-columns:repeat(2,1fr); }
  .hmf-newsletter-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px) {
  .hmf-wrap { padding:0 20px; }
  .hmf-font-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .hmf-cat-grid  { grid-template-columns:1fr 1fr; }
  .hmf-footer-top { grid-template-columns:1fr; }
  .hmf-footer-cols { grid-template-columns:1fr 1fr; }
  .hmf-newsletter-form { flex-direction:column; width:100%; }
  .hmf-newsletter-form input { min-width:0; width:100%; }
  .hmf-newsletter-inner { padding:28px; }
  .hmf-section { padding:56px 0; }
  .hmf-testi-wrap { gap:12px; }
}

/* ══════════════════════════════════════════════════ ENTERPRISE / CONTACT CTA
   Shared banner reused on the Contact, About and Licensing pages. */
.hmf-license-cta { padding:56px 0 88px; }
.hmf-license-cta-inner {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:36px 40px; border-radius:var(--hmf-radius);
  background:
    radial-gradient(ellipse 80% 80% at 100% 0%, rgba(200,31,60,.18), transparent 60%),
    var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  border:1px solid var(--hmf-red-border);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.hmf-license-cta-left { display:flex; align-items:center; gap:20px; }
.hmf-license-cta-icon {
  flex-shrink:0; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:var(--hmf-red-bright); background:linear-gradient(135deg, rgba(200,31,60,.25), rgba(110,14,33,.15)); border:1px solid var(--hmf-red-border);
}
.hmf-license-cta-h { font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase; font-size:clamp(20px,2.4vw,26px); color:var(--hmf-white); margin:0 0 6px; line-height:1.2; }
.hmf-license-cta-sub { font-size:14px; color:var(--hmf-text-dim); margin:0; }
.hmf-license-cta-btn {
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--hmf-red-bright), var(--hmf-red-dark)); color:#fff !important;
  font-size:14px; font-weight:700; padding:14px 26px; border-radius:var(--hmf-radius-sm); text-decoration:none !important;
  box-shadow:0 10px 28px var(--hmf-red-glow); transition:transform .2s ease, box-shadow .2s ease;
}
.hmf-license-cta-btn:hover { transform:translateY(-2px); box-shadow:0 14px 36px var(--hmf-red-glow); }

@media (max-width: 640px) {
  .hmf-license-cta-inner { flex-direction:column; align-items:flex-start; text-align:left; }
  .hmf-license-cta-btn { width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════ SMALL PAGE HERO
   Shared compact hero used on Contact and About pages. */
.hmf-page-hero { position:relative; padding:80px 0 56px; text-align:center; overflow:hidden; }
.hmf-page-hero-bg {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 60% at 50% -10%, rgba(200,31,60,.3), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(110,14,33,.28), transparent 60%);
}
.hmf-page-hero-h {
  font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(38px,5vw,64px); line-height:1.06; color:var(--hmf-white); margin:8px 0 18px;
  text-shadow:0 0 40px rgba(200,31,60,.4), 0 4px 0 rgba(0,0,0,.6);
}
.hmf-page-hero-sub { font-size:16px; line-height:1.7; color:var(--hmf-text-dim); max-width:560px; margin:0 auto; }

/* ══════════════════════════════════════════════════ SECTION INTRO HEADING
   Shared centered heading block — used on Licensing and About pages. */
.hmf-lic-head { text-align:center; max-width:640px; margin:0 auto 44px; }
.hmf-lic-head .hmf-eyebrow { justify-content:center; }
.hmf-lic-title {
  font-family:var(--hmf-font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,3.8vw,44px); line-height:1.08; color:var(--hmf-white); margin:6px 0 0;
  text-shadow:0 0 30px rgba(200,31,60,.3);
}
.hmf-lic-lead { font-size:15px; line-height:1.7; color:var(--hmf-text-dim); margin:16px 0 0; }

/* ══════════════════════════════════════════════════ FAQ ACCORDION
   Shared <details> accordion — used on Licensing and Enterprise pages. */
.hmf-lic-faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.hmf-lic-faq-item {
  border-radius:var(--hmf-radius); border:1px solid var(--hmf-glass-border);
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  overflow:hidden; transition:border-color .2s;
}
.hmf-lic-faq-item[open] { border-color:var(--hmf-red-border); }
.hmf-lic-faq-item summary {
  list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; font-size:15px; font-weight:700; color:var(--hmf-white);
}
.hmf-lic-faq-item summary::-webkit-details-marker { display:none; }
.hmf-lic-faq-chev { color:var(--hmf-red-bright); flex-shrink:0; transition:transform .25s ease; }
.hmf-lic-faq-item[open] .hmf-lic-faq-chev { transform:rotate(180deg); }
.hmf-lic-faq-item p { margin:0; padding:0 22px 22px; font-size:14px; line-height:1.7; color:var(--hmf-text-dim); }