/* Reelx Viral — custom vector identity and lightweight, original motion.
   Visual references consulted via the 21st MCP are recorded in reference/21st.md. */
@font-face {
  font-family: Outfit;
  src: url('./assets/fonts/outfit-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root { font-family: Outfit, sans-serif; --ink: #f6f4ff; --muted: #bcb5d1; --line: #c3b0ff21; }
body { isolation: isolate; }
button, input { font-family: inherit; }
.site-shell { max-width: 1392px; }

/* The play counter inside the R and the spark form the new identity. */
.brand { gap: 11px; letter-spacing: 0; }
.brand-symbol { width: 48px; height: 48px; flex: 0 0 auto; filter: drop-shadow(0 6px 16px #8062e51a); transition: transform .4s; }
.brand-wordmark { display: flex; flex-direction: column; gap: 5px; }
.brand-title { display: flex; align-items: baseline; font-size: 30px; font-weight: 640; letter-spacing: -1.2px; line-height: 1; }
.brand-x { color: #af98ff; }
.brand-viral { margin-left: 9px; font-weight: 500; font-size: 10px; letter-spacing: 2.8px; color: #c1afd9; }
.brand-signature { font-size: 6px; font-weight: 400; color: #a39cb6; letter-spacing: 2.1px; }
.brand:hover .brand-symbol { transform: rotate(-6deg) translateY(-2px); }
.header-link { font-family: Outfit, sans-serif; font-size: 12px; letter-spacing: .15px; }

/* Transform-only aurora layers; no canvas or WebGL is required. */
.ambient { background: radial-gradient(ellipse at 85% 35%, #211540 0%, transparent 57%), linear-gradient(135deg, #090d20, #100b1d 80%); }
.aurora-ribbon { position: absolute; width: 165vmax; height: 115vmax; max-width: 2100px; max-height: 1450px; top: -66vmax; left: -28vmax; transform: rotate(-15deg); background: repeating-linear-gradient(105deg, transparent 0% 9%, #596ff56b 13%, #9872f453 17%, transparent 23% 30%, #8f54d84d 36%, transparent 43%); mask-image: radial-gradient(ellipse at 50% 58%, #000 6%, #0009 30%, transparent 63%); filter: blur(30px); opacity: .6; animation: aurora-flow 26s ease-in-out infinite alternate; }
.aurora-ribbon--second { top: -38vmax; left: 18vmax; opacity: .45; transform: rotate(18deg); animation: aurora-return 33s ease-in-out infinite alternate; }
.ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(#c5b3ff07 1px, transparent 1px), linear-gradient(90deg, #c5b3ff07 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse at 70% 25%, #0006, transparent 70%); }
.ambient-stars { position: absolute; inset: 0; background: radial-gradient(circle at 6% 29%, #b2c6ffac 0 1px, transparent 2px), radial-gradient(circle at 48% 12%, #d9c4ff70 0 1px, transparent 2px), radial-gradient(circle at 92% 76%, #d9b4ff80 0 1px, transparent 2px), radial-gradient(circle at 59% 82%, #c5d3ff80 0 1px, transparent 2px); opacity: .55; animation: star-breathe 7s ease-in-out infinite alternate; }
.pointer-glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(500px circle at var(--pointer-x, 70%) var(--pointer-y, 35%), #a08aff0f, transparent 68%); transition: opacity .8s; }
@media (hover: hover) and (pointer: fine) { .pointer-glow { opacity: 1; } }

.hero-copy { animation: arrive .7s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy h1 { font-family: Outfit, sans-serif; font-size: clamp(42px,4.4vw,63px); font-weight: 590; line-height: 1.075; letter-spacing: -2.2px; }
.eyebrow { color: #d3c5f1; font-family: Outfit, sans-serif; font-size: 10px; letter-spacing: 2.1px; }
.eyebrow .status-dot { background: #c2a2ff; box-shadow: 0 0 0 4px #ad86fc0c, 0 0 16px #a88affb3; }
.gradient-text { background-image: linear-gradient(100deg,#a5c8ff 0%,#a6a8ff 30%,#c89aff 65%,#a5c8ff 100%); background-size: 200% 100%; animation: title-flow 10s ease-in-out infinite alternate; }
.subtitle { color: #c0b9d0; font-weight: 350; font-size: 16px; line-height: 1.65; }
.watch-link { font-size: 12px; color: #c9c0de; transition: color .2s; }
.watch-link svg { transition: transform .25s; }
.watch-link:hover svg { transform: translateX(3px); }
.small-note { color: #a49ab9; font-size: 11px; }

/* A moving rim, a passing sheen, pointer lighting and touch ripples. */
.primary-button { --button-x: 50%; --button-y: 40%; isolation: isolate; overflow: hidden; min-height: 58px; font-size: 14px; font-weight: 530; border-radius: 14px; border-color: #c5b8ff61; padding: 0 25px; background: radial-gradient(circle at var(--button-x) var(--button-y), #d0b9ff40, transparent 66%), linear-gradient(115deg,#5869df,#7951dc 62%,#9650d3); box-shadow: inset 0 1px 0 #f5edff4d, 0 6px 30px #6140bf42, 0 0 45px #8d52d514; transition: transform .25s, box-shadow .3s, border-color .3s; }
.primary-button > span, .primary-button > svg { position: relative; z-index: 1; }
.primary-button::before { content: ''; position: absolute; z-index: 2; inset: 0; border: 1px solid transparent; border-radius: inherit; background: conic-gradient(from var(--beam-angle),transparent 25%,#d5c4ff22 47%,#fff 52%,#d5c4ff44 58%,transparent 68%) border-box; mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; animation: rim-turn 6s linear infinite; }
.primary-button::after { content: ''; position: absolute; z-index: 0; inset: -70%; background: linear-gradient(112deg,transparent 38%,#fff0 43%,#e8e2ff38 49%,#fff0 55%,transparent 60%); pointer-events: none; transform: translateX(-70%); animation: button-sheen 7s cubic-bezier(.2,.6,.3,1) infinite; }
.primary-button:hover { border-color: #f0dcff9c; transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff6,0 12px 38px #734ee963,0 0 60px #a879ef24; }
.primary-button:active { transform: translateY(0) scale(.975); }
.primary-button > .tap-ripple { position: absolute; z-index: 0; left: var(--tap-x); top: var(--tap-y); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle,#f9f3ff77,transparent 70%); pointer-events: none; animation: tap-wave .7s ease-out both; }

.demo { animation: arrive .85s .1s cubic-bezier(.2,.8,.2,1) both; }
.video-aura { background: radial-gradient(ellipse,#8e60e83b,transparent 65%); filter: blur(28px); animation: aura-breathe 8s ease-in-out infinite alternate; }
.demo::before { border-color: #b79bf31d; transform: rotate(-25deg); }
.demo::after { border-color: #7197ed17; transform: rotate(28deg); }
.orbit-tag { position: absolute; top: 33px; right: -8px; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid #ccb3ff2b; border-radius: 9px; background: #201733ad; backdrop-filter: blur(15px); color: #d4c3eb; font-size: 7px; letter-spacing: 1.1px; pointer-events: none; animation: tag-float 8s ease-in-out infinite; }
.orbit-tag > span { font-size: 12px; color: #d0aaff; }
.video-shell { border-color: #bfa8fb58; box-shadow: 0 25px 85px #03010f8f,0 0 0 5px #bd9efc05,0 0 80px #9160e91a; }
.video-shell::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 1.2px solid transparent; border-radius: inherit; background: conic-gradient(from var(--beam-angle),transparent 28%,#9aafff44 42%,#e6caffc4 48%,#a897ed55 54%,transparent 70%) border-box; mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); mask-composite: exclude; animation: rim-turn 13s linear infinite; }
.play-circle { position: relative; width: 80px; height: 80px; background: radial-gradient(circle at 30% 20%,#bcbbff88,transparent 60%),linear-gradient(140deg,#6c85ed,#9c5fe2); box-shadow: 0 0 0 10px #b095ff12,0 0 0 23px #a088ff0b,0 10px 40px #21104994; }
.play-circle::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid #d8c0ff44; animation: play-orbit 4s ease-in-out infinite; }
.play-overlay { font-size: 14px; font-weight: 500; }
.overlay-duration { font-size: 10px; color: #eee4fa; }
.demo figcaption { color: #b8a8cd; font-size: 10px; }
.footer { color: #b0a1c3; }
.footer > span:first-child { font-size: 11px; letter-spacing: 1px; font-weight: 500; }
dialog { background: radial-gradient(ellipse at 20% 0%,#6944a72e,transparent 70%),linear-gradient(145deg,#221b37,#121020); }
dialog h2 { font-weight: 500; }

@keyframes aurora-flow { from { transform: translate3d(-3%,-2%,0) rotate(-15deg) scale(1.07); } to { transform: translate3d(4%,7%,0) rotate(5deg) scale(1.16); } }
@keyframes aurora-return { from { transform: translate3d(3%,3%,0) rotate(18deg); } to { transform: translate3d(-6%,-4%,0) rotate(-9deg) scale(1.1); } }
@keyframes rim-turn { to { --beam-angle: 360deg; } }
@keyframes title-flow { to { background-position: 100% 50%; } }
@keyframes star-breathe { to { opacity: .95; } }
@keyframes aura-breathe { to { opacity: .65; transform: scale(.94); } }
@keyframes tag-float { 50% { transform: translateY(-7px); } }
@keyframes play-orbit { 50% { transform: scale(1.09); opacity: .35; } }
@keyframes button-sheen { 0%,25% { transform: translateX(-70%); } 55%,100% { transform: translateX(70%); } }
@keyframes tap-wave { from { opacity: .8; transform: scale(.1); } to { opacity: 0; transform: scale(4); } }
@keyframes arrive { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

@media (hover: hover) and (pointer: fine) {
  .video-shell { transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .35s ease-out; }
  .video-shell:fullscreen { transform: none; }
}
@media (min-width:1000px) and (max-height:760px) {
  .hero-copy h1 { font-size: clamp(40px,4.1vw,59px); }
}
@media (max-width:1100px) {
  .orbit-tag { right: -4px; font-size: 6px; padding: 8px; }
  .hero-actions { gap: 7px 16px; }
  .primary-button { padding: 0 20px; font-size: 13px; }
}

/* Phone layout: safe areas, local font, large tap targets, bounded effects. */
@media (max-width:800px) {
  .site-shell { padding-left: max(24px,env(safe-area-inset-left)); padding-right: max(24px,env(safe-area-inset-right)); }
  .header { min-height: 78px; }
  .hero { padding-top: 31px; gap: 30px; }
  .hero-copy h1 { font-size: clamp(34px,6.8vw,49px); font-weight: 570; letter-spacing: -1.35px; line-height: 1.09; text-wrap: balance; }
  .eyebrow { margin-bottom: 19px; font-size: 9px; letter-spacing: 2px; }
  .subtitle { font-size: 15px; font-weight: 350; margin: 18px auto 22px; }
  .hero-actions { gap: 2px 18px; }
  .primary-button { min-height: 58px; font-size: 15px; }
  .watch-link { font-size: 12px; min-height: 44px; }
  .brand-symbol { width: 43px; height: 43px; }
  .brand-title { font-size: 27px; }
  .brand-viral { font-size: 9px; }
  .brand-signature { font-size: 5px; }
  .demo { max-width: 360px; gap: 16px; }
  .demo figcaption { font-size: 10px; }
  .orbit-tag { display: none; }
  .video-shell { border-radius: 25px; }
  .video-controls { padding: 10px 12px 7px; }
  .icon-button { min-width: 44px; min-height: 44px; }
  .icon-button svg { width: 18px; height: 18px; }
  .seek { height: 28px; }
  .seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; }
  .time { font-size: 11px; }
  .footer { padding-bottom: env(safe-area-inset-bottom); min-height: 70px; }
  .aurora-ribbon { filter: blur(22px); opacity: .48; width: 220vw; height: 150vh; max-height: none; top: -50vh; left: -40vw; animation-duration: 34s; }
  .aurora-ribbon--second { opacity: .32; top: 10vh; left: -25vw; }
  .ambient-grid { background-size: 64px 64px; opacity: .65; }
  .pointer-glow { display: none; }
}
@media (max-width:480px) {
  .site-shell { padding-left: max(21px,env(safe-area-inset-left)); padding-right: max(21px,env(safe-area-inset-right)); }
  .header { min-height: 74px; }
  .brand { gap: 9px; }
  .brand-symbol { width: 42px; height: 42px; }
  .brand-title { font-size: 26px; }
  .brand-signature { letter-spacing: 1.65px; }
  .header-link { min-height: 44px; min-width: 44px; justify-content: flex-end; font-size: 0; }
  .hero { padding-top: 27px; padding-bottom: 31px; gap: 24px; }
  .hero-copy h1 { font-size: clamp(29px,8.2vw,37px); letter-spacing: -.95px; font-weight: 590; line-height: 1.115; }
  .eyebrow { font-size: 8px; margin-bottom: 16px; letter-spacing: 1.8px; }
  .subtitle { font-size: 14px; line-height: 1.55; max-width: 290px; margin: 17px auto 20px; }
  .primary-button { width: 100%; max-width: 335px; min-height: 57px; border-radius: 14px; font-size: 14px; }
  .watch-link { min-height: 44px; font-size: 12px; }
  .demo { max-width: 344px; }
  .play-circle { width: 78px; height: 78px; }
  .play-overlay { gap: 12px; }
  .video-label { font-size: 8px; padding: 8px 10px; }
  .demo figcaption { font-size: 9px; }
  .footer > span:last-child { font-size: 9px; }
  dialog { padding: 38px 25px 25px; }
  dialog h2 { font-size: 29px; }
}
@media (max-width:350px) {
  .site-shell { padding-left: 17px; padding-right: 17px; }
  .hero-copy h1 { font-size: 28px; }
  .controls-row { gap: 0; }
  .time { font-size: 10px; }
  .eyebrow { font-size: 7px; }
}
.effects-paused .ambient *, .effects-paused .primary-button::before, .effects-paused .primary-button::after,
.video-playing .demo::before, .video-playing .demo::after,
.video-playing .video-aura, .video-playing .orbit-tag, .video-playing .gradient-text { animation-play-state: paused; }
.video-playing .video-shell::before, .video-playing .primary-button::before,
.video-playing .primary-button::after { animation-play-state: paused; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pointer-glow, .play-circle::before { display: none; }
  .hero-copy, .demo { opacity: 1; translate: none; }
  .video-shell { transform: none !important; }
  .primary-button::after { opacity: 0; }
}

/* Focused layout: small centered identity, copy, one action and the video. */
.header { min-height: 76px; justify-content: center; border-bottom: 0; }
.header .brand { gap: 8px; min-height: 44px; }
.header .brand-symbol { width: 34px; height: 34px; }
.header .brand-title { font-size: 23px; letter-spacing: -.8px; }
.header .brand-viral { margin-left: 7px; font-size: 8px; letter-spacing: 2px; }
.hero { min-height: calc(100svh - 76px); padding-top: 24px; padding-bottom: 36px; }
.hero-copy .subtitle { max-width: 390px; }
.demo figcaption.method-label {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid #c3a5f33b;
  border-radius: 999px;
  background: linear-gradient(115deg,#37264b70,#20192e80);
  box-shadow: inset 0 1px 0 #e4d2ff0d;
  color: #d4c5e7;
  font-size: 11px;
  font-weight: 350;
  line-height: 1.45;
  letter-spacing: .05px;
  text-align: center;
}
.method-label strong { font-weight: 500; color: #eee2ff; }
.method-label .label-dot { background: #c3a7ef; box-shadow: 0 0 9px #b48af34d; }
@media (min-width:1000px) and (max-height:800px) {
  .video-shell { width: min(100%,calc((100svh - 200px)*.5625)); }
}
@media (max-width:800px) {
  .header { min-height: 66px; }
  .hero { min-height: calc(100svh - 66px); padding-top: 18px; padding-bottom: max(30px,env(safe-area-inset-bottom)); gap: 26px; }
  .hero-copy .subtitle { max-width: 340px; }
}
@media (max-width:480px) {
  .header { min-height: 64px; }
  .header .brand-symbol { width: 32px; height: 32px; }
  .header .brand-title { font-size: 22px; }
  .header .brand-viral { font-size: 7px; }
  .hero { min-height: calc(100svh - 64px); }
  .hero-copy .subtitle { max-width: 300px; }
  .demo figcaption.method-label { padding: 9px 12px; font-size: 11px; }
}

/* Edge auroras leave a quiet center for the copy and the video. */
.ambient { background: linear-gradient(135deg,#090d20,#100b1d 80%); }
.edge-auroras {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .78;
  mask-image: linear-gradient(90deg,#000 0%,#000d 7%,#0006 15%,transparent 28%,transparent 72%,#0006 85%,#000d 93%,#000 100%);
}
.edge-auroras::before, .edge-auroras::after {
  content: '';
  position: absolute;
  /* Keep the light layer beyond the viewport throughout its sideways motion. */
  inset: -12% -8vw;
  pointer-events: none;
  opacity: .8;
  background: radial-gradient(ellipse 22vw 90% at 5vw 35%,#7188ff45,transparent 80%);
  animation: edge-glow-left 11s ease-in-out -3s infinite;
}
.edge-auroras::after {
  background: radial-gradient(ellipse 22vw 90% at calc(100% - 5vw) 65%,#af74ff45,transparent 80%);
  animation: edge-glow-right 14s ease-in-out -8s infinite;
}
.aurora-ribbon {
  top: -15vh;
  left: -20vw;
  right: auto;
  width: min(55vw,680px);
  height: 130vh;
  max-width: none;
  max-height: none;
  opacity: .88;
  filter: blur(26px) brightness(1.1) saturate(1.05);
  background: repeating-linear-gradient(102deg,transparent 4% 10%,#5270edb3 17%,#7770df99 23%,transparent 32%,#8c5adb88 40%,transparent 50%);
  mask-image: radial-gradient(ellipse at 35% 50%,#000 4%,#000c 38%,transparent 76%);
  transform-origin: left center;
  animation: edge-sway-left 12s ease-in-out -4s infinite alternate;
}
.aurora-ribbon--second {
  top: -10vh;
  left: auto;
  right: -20vw;
  opacity: .92;
  background: repeating-linear-gradient(78deg,transparent 4% 10%,#8d59dfa6 17%,#a577e699 23%,transparent 32%,#6273e888 40%,transparent 50%);
  mask-image: radial-gradient(ellipse at 65% 50%,#000 4%,#000c 38%,transparent 76%);
  transform-origin: right center;
  animation: edge-sway-right 15s ease-in-out -9s infinite alternate;
}
.ambient-grid { mask-image: linear-gradient(90deg,#0004,transparent 28% 72%,#0004); }
.pointer-glow { mask-image: linear-gradient(90deg,#000,transparent 28% 72%,#000); }
.video-aura { opacity: .3; animation: none; }
.demo-column { display: flex; flex-direction: column; align-items: center; justify-self: center; gap: 20px; width: 100%; min-width: 0; }
.demo-column .hero-actions { display: flex; justify-content: center; width: 100%; margin: 0; }
.demo-column #access-button { width: min(100%,330px); }
.hero-copy .subtitle { margin-bottom: 0; }
@keyframes edge-sway-left {
  from { transform: translate3d(-12%,-10%,0) rotate(-17deg) scaleY(1.04); }
  to { transform: translate3d(16%,12%,0) rotate(12deg) scaleY(1.15); }
}
@keyframes edge-sway-right {
  from { transform: translate3d(12%,10%,0) rotate(17deg) scaleY(1.04); }
  to { transform: translate3d(-16%,-12%,0) rotate(-12deg) scaleY(1.15); }
}
@keyframes edge-glow-left {
  0%,100% { transform: translate3d(-2vw,-6%,0) scaleY(1.04); opacity: .72; }
  50% { transform: translate3d(3vw,7%,0) scaleY(1.15); opacity: 1; }
}
@keyframes edge-glow-right {
  0%,100% { transform: translate3d(2vw,6%,0) scaleY(1.04); opacity: .72; }
  50% { transform: translate3d(-3vw,-7%,0) scaleY(1.15); opacity: 1; }
}
.effects-paused .edge-auroras::before, .effects-paused .edge-auroras::after { animation-play-state: paused; }
@media (min-width:801px) {
  .video-shell { width: min(100%,clamp(240px,calc((100svh - 280px)*.5625),370px)); }
}
@media (max-width:800px) {
  .demo-column { max-width: 360px; margin: 0 auto; }
  .edge-auroras {
    mask-image: linear-gradient(90deg,#000 0%,#000e 8%,#0006 18%,transparent 29% 71%,#0006 82%,#000e 92%,#000 100%);
  }
  .edge-auroras::before { background: radial-gradient(ellipse 22vw 90% at 5vw 35%,#7188ff94,transparent 80%); }
  .edge-auroras::after { background: radial-gradient(ellipse 22vw 90% at calc(100% - 5vw) 65%,#af74ff94,transparent 80%); }
  .aurora-ribbon { width: 90vw; left: -48vw; filter: blur(20px) brightness(1.25) saturate(1.12); opacity: .94; }
  .aurora-ribbon--second { left: auto; right: -48vw; opacity: .98; }
}

/* Repeat the header identity at the foot of the page at the same scale. */
.compact-brand { gap: 8px; min-height: 44px; }
.compact-brand .brand-symbol { width: 34px; height: 34px; }
.compact-brand .brand-title { font-size: 23px; letter-spacing: -.8px; }
.compact-brand .brand-viral { margin-left: 7px; font-size: 8px; letter-spacing: 2px; }
.hero { padding-bottom: 20px; }
.closing-brand { display: flex; align-items: center; justify-content: center; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
@media (max-width:480px) {
  .compact-brand .brand-symbol { width: 32px; height: 32px; }
  .compact-brand .brand-title { font-size: 22px; }
  .compact-brand .brand-viral { font-size: 7px; }
}

/* Keep embedded mobile browsers clear of notches, toolbars and text autosizing. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.site-shell { padding-top: env(safe-area-inset-top,0px); }
@media (min-width:801px) {
  .site-shell { padding-left: max(64px,env(safe-area-inset-left)); padding-right: max(64px,env(safe-area-inset-right)); }
}
@media (min-width:801px) and (max-width:1100px) {
  .site-shell { padding-left: max(40px,env(safe-area-inset-left)); padding-right: max(40px,env(safe-area-inset-right)); }
}
@media (max-width:1000px) and (max-height:500px) {
  .icon-button { min-width: 44px; min-height: 44px; }
  .seek { height: 28px; }
  .time { font-size: 11px; }
}
dialog { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }
dialog:not([open]) { display: none; }
.dialog-fallback[open] { display: block; position: fixed; z-index: 30; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%,-50%); }
@supports not (mask-composite: exclude) {
  .video-shell::before, .primary-button::before { display: none; }
}
@supports not (height: 100svh) {
  .hero { min-height: calc(100vh - 76px); }
  @media (max-width:800px) { .hero { min-height: calc(100vh - 66px); } }
  @media (max-width:480px) { .hero { min-height: calc(100vh - 64px); } }
}