/* ===== Content Hub — Hero section module =====
   Dynamic values (colours, sizes, padding) arrive as CSS custom
   properties set inline on .chh-hero from module.html.
   font-family is intentionally never declared — inherits the theme font. */

.chh-hero{
  position: relative;
  overflow: hidden;
  padding: var(--chh-pad-top, 96px) 0 var(--chh-pad-bottom, 0px);
  background: var(--chh-bg, #070D17);
  color: #fff;
}
.chh-hero *{ box-sizing: border-box; }

/* ---- background layers ---- */
.chh-hero .chh-blobs{ position:absolute; inset:0; pointer-events:none; }
.chh-hero .chh-blob{ position:absolute; border-radius:50%; filter:blur(85px); }
.chh-hero .chh-blob--a{ top:-200px; left:-120px; width:660px; height:660px;
  background:radial-gradient(circle, rgba(var(--chh-blue-rgb,18,83,131),.7), transparent 65%);
  animation:chhDrift 18s ease-in-out infinite alternate; }
.chh-hero .chh-blob--b{ top:12%; right:-140px; width:600px; height:600px;
  background:radial-gradient(circle, rgba(var(--chh-accent-rgb,209,3,90),.34), transparent 65%);
  animation:chhDrift2 22s ease-in-out infinite alternate; }
.chh-hero .chh-grid{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(#000, transparent 78%);
  mask-image:linear-gradient(#000, transparent 78%); }

/* ---- layout container ---- */
.chh-hero .chh-wrap{ position:relative; max-width:1280px; margin:0 auto; padding:0 36px; }

/* ---- badge ---- */
.chh-hero .chh-badge{ display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:9px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85);
  opacity:0; transform:translateY(24px); animation:chhFadeUp .8s cubic-bezier(.22,1,.36,1) .05s forwards; }
.chh-hero .chh-dot{ width:8px; height:8px; border-radius:50%; background:var(--chh-accent,#D1035A);
  animation:chhPulse 2.2s ease-out infinite; }

/* ---- heading ---- */
.chh-hero .chh-h1{ margin:26px 0 0; font-weight:900; line-height:.98; letter-spacing:-.038em;
  font-size:clamp(46px, 6.4vw, var(--chh-h-size,100px)); max-width:1080px; color:var(--chh-heading,#fff); }
.chh-hero .chh-line{ display:block; overflow:hidden; padding-bottom:.05em; }
.chh-hero .chh-line--2{ padding-bottom:.1em; }
.chh-hero .chh-rise{ display:block; transform:translateY(115%);
  animation:chhRiseUp .9s cubic-bezier(.22,1,.36,1) .15s forwards; }
.chh-hero .chh-line--2 .chh-rise{ animation-delay:.3s; }
.chh-hero .chh-em{ font-style:italic;
  background:linear-gradient(90deg, var(--chh-accent,#D1035A), color-mix(in srgb, var(--chh-accent,#D1035A) 55%, #fff), var(--chh-accent,#D1035A));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:chhShimmer 4s linear infinite; }

/* ---- intro + cta row ---- */
.chh-hero .chh-row{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:end; margin-top:14px; }
.chh-hero .chh-intro{ margin:0; max-width:560px; font-size:var(--chh-body-size,17.5px); color:var(--chh-body,rgba(255,255,255,.72));
  opacity:0; transform:translateY(28px); animation:chhFadeUp .9s cubic-bezier(.22,1,.36,1) .5s forwards; }
.chh-hero .chh-intro strong{ color:#fff; }
.chh-hero .chh-intro p{ margin:0; }
.chh-hero .chh-cta-col{ display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  opacity:0; transform:translateY(28px); animation:chhFadeUp .9s cubic-bezier(.22,1,.36,1) .65s forwards; }
.chh-hero .chh-cta-btns{ display:flex; gap:14px; flex-wrap:wrap; }
.chh-hero .chh-btn{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:14px;
  letter-spacing:.03em; border-radius:4px; text-decoration:none;
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .25s, border-color .25s, box-shadow .25s, color .25s; }
.chh-hero .chh-btn--primary{ background:var(--chh-accent,#D1035A); color:#fff; padding:18px 34px;
  box-shadow:0 14px 40px -10px rgba(var(--chh-accent-rgb,209,3,90),.55); }
.chh-hero .chh-btn--primary:hover{ transform:translateY(-3px); box-shadow:0 20px 50px -12px rgba(var(--chh-accent-rgb,209,3,90),.7); color:#fff; }
.chh-hero .chh-btn--secondary{ color:#fff; font-weight:700; padding:17px 28px; border:1.5px solid rgba(255,255,255,.3); }
.chh-hero .chh-btn--secondary:hover{ transform:translateY(-3px); background:var(--chh-accent,#D1035A); border-color:var(--chh-accent,#D1035A); color:#fff; }
.chh-hero .chh-arrow{ font-size:15px; }
.chh-hero .chh-attr{ margin:0; font-size:11.5px; color:rgba(255,255,255,.42); max-width:440px; }
.chh-hero .chh-attr p{ margin:0; }

/* ---- hero browser mockup ---- */
.chh-hero .chh-frame{ margin-top:64px; opacity:0; transform:translateY(40px);
  animation:chhFadeUp 1s cubic-bezier(.22,1,.36,1) .8s forwards; perspective:1600px; }
.chh-hero .chh-tilt{ border-radius:10px 10px 0 0; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); border-bottom:0; background:#0B1526;
  box-shadow:0 -20px 90px -30px rgba(var(--chh-accent-rgb,209,3,90),.5); transition:transform .5s; transform-style:preserve-3d; will-change:transform; }
.chh-hero .chh-bar{ display:flex; align-items:center; gap:14px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.chh-hero .chh-dots{ display:flex; gap:7px; }
.chh-hero .chh-dots span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.16); }
.chh-hero .chh-dots span:first-child{ background:var(--chh-accent,#D1035A); }
.chh-hero .chh-dots span:nth-child(2){ background:rgba(255,255,255,.28); }
.chh-hero .chh-url{ flex:1; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1);
  border-radius:3px; padding:7px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; color:rgba(255,255,255,.6); }
.chh-hero .chh-bar-tags{ display:flex; gap:8px; }
.chh-hero .chh-tag{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; font-weight:700;
  color:#4B8CBF; border:1px solid rgba(75,140,191,.4); border-radius:3px; padding:4px 10px; }
.chh-hero .chh-shot{ position:relative; aspect-ratio:16 / 6.2; overflow:hidden; background:#0B1526; }
/* aspect-ratio fallback for older browsers so the area never collapses to 0 height */
@supports not (aspect-ratio: 1){ .chh-hero .chh-shot{ min-height:280px; } }
.chh-hero .chh-hero-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.chh-hero .chh-hero-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  color:rgba(255,255,255,.4); font-size:14px; background:#0B1526; }
.chh-hero .chh-shot-grad{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(7,13,23,.1), rgba(7,13,23,.75)); }
.chh-hero .chh-scan{ position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(var(--chh-accent-rgb,209,3,90),.85), transparent);
  animation:chhScanline 7s linear infinite; }

/* ---- stats strip ---- */
.chh-hero .chh-stats{ position:relative; max-width:1280px; margin:0 auto; padding:26px 36px 60px;
  border-top:1px solid rgba(255,255,255,.09);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:24px; }
.chh-hero .chh-stat-num{ font-weight:900; font-size:34px; letter-spacing:-.02em; }
.chh-hero .chh-stat-label{ font-size:12px; color:rgba(255,255,255,.5); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }

/* ---- scroll hint ---- */
.chh-hero .chh-hint{ position:absolute; bottom:16px; left:50%; width:1.5px; height:32px;
  background:linear-gradient(var(--chh-accent,#D1035A), transparent); animation:chhScrollHint 1.8s ease-in-out infinite; }

/* ---- keyframes ---- */
@keyframes chhDrift{ from{ transform:translate(0,0); } to{ transform:translate(60px,40px); } }
@keyframes chhDrift2{ from{ transform:translate(0,0); } to{ transform:translate(-50px,-30px); } }
@keyframes chhPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--chh-accent-rgb,209,3,90),.6); } 70%{ box-shadow:0 0 0 10px rgba(var(--chh-accent-rgb,209,3,90),0); } 100%{ box-shadow:0 0 0 0 rgba(var(--chh-accent-rgb,209,3,90),0); } }
@keyframes chhFadeUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes chhRiseUp{ to{ transform:translateY(0); } }
@keyframes chhShimmer{ to{ background-position:200% center; } }
@keyframes chhScanline{ 0%{ transform:translateY(0); } 100%{ transform:translateY(3000%); } }
@keyframes chhScrollHint{ 0%,100%{ transform:scaleY(1); opacity:.9; } 50%{ transform:scaleY(.55); opacity:.4; } }

/* ---- responsive ---- */
@media (max-width:900px){
  .chh-hero .chh-row{ grid-template-columns:1fr; gap:28px; align-items:start; }
  .chh-hero .chh-frame{ margin-top:44px; }
  .chh-hero .chh-wrap, .chh-hero .chh-stats{ padding-left:22px; padding-right:22px; }
}
@media (max-width:560px){
  .chh-hero .chh-stat-num{ font-size:28px; }
  .chh-hero .chh-btn{ width:100%; justify-content:center; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .chh-hero .chh-badge, .chh-hero .chh-intro, .chh-hero .chh-cta-col, .chh-hero .chh-frame{ opacity:1; transform:none; animation:none; }
  .chh-hero .chh-rise{ transform:none; animation:none; }
  .chh-hero .chh-dot, .chh-hero .chh-em, .chh-hero .chh-blob--a, .chh-hero .chh-blob--b,
  .chh-hero .chh-scan, .chh-hero .chh-hint{ animation:none; }
  .chh-hero .chh-em{ color:var(--chh-accent,#D1035A); -webkit-text-fill-color:var(--chh-accent,#D1035A); }
}