:root{
    --indigo-deep:#0a0a26;
    --indigo-mid:#151047;
    --indigo-royal:#1f1660;
    --temple-gold:#e8ac2e;
    --temple-gold-bright:#ffc94a;
    --ember-orange:#ff7a3d;
    --star-white:#f4f0ff;
    --text-soft:#cfc9ea;
  }

  .hero{
    position:relative;
    width:100%;
    min-height:150px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 60% 90% at 8% 15%, rgba(255,122,61,0.16), transparent 60%),
      radial-gradient(ellipse 70% 100% at 92% 85%, rgba(232,172,46,0.14), transparent 60%),
      linear-gradient(135deg, var(--indigo-deep) 0%, var(--indigo-mid) 45%, var(--indigo-royal) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 15px;
    isolation:isolate;
  }

  .hero::before{
    /* subtle vignette to keep text readable over the animation */
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 75% 100% at 50% 50%, rgba(10,10,38,0.15) 0%, rgba(10,10,38,0.55) 100%);
    z-index:2;
    pointer-events:none;
  }

  canvas#astro-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    display:block;
  }

  .zodiac-ring-layer{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }

  .zodiac-ring{
    position:absolute;
    top:50%;
    left:50%;
    opacity:0.16;
    transform-origin:center;
  }

  .ring-a{ width:520px; height:520px; margin:-260px 0 0 -260px; animation:spin-cw 140s linear infinite; }
  .ring-b{ width:340px; height:340px; margin:-170px 0 0 -170px; opacity:0.22; animation:spin-ccw 100s linear infinite; }
  .ring-far-left{ width:300px; height:300px; top:10%; left:-6%; margin:0; opacity:0.14; animation:spin-cw 180s linear infinite; }
  .ring-far-right{ width:420px; height:420px; top:60%; left:96%; margin:-210px 0 0 -210px; opacity:0.14; animation:spin-ccw 200s linear infinite; }

  @keyframes spin-cw{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  @keyframes spin-ccw{ from{ transform:rotate(0deg);} to{ transform:rotate(-360deg);} }

  .content{
    position:relative;
    z-index:3;
    text-align:center;
    max-width:960px;
  }

  .eyebrow-mark{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:var(--temple-gold);
    font-family:'Manrope', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;position: absolute;
    opacity:0.9;top: -20px;
  }

  .eyebrow-mark svg{
    width:14px;
    height:14px;
    animation:twinkle-pulse 2.4s ease-in-out infinite;
  }

  @keyframes twinkle-pulse{
    0%,100%{ opacity:0.5; transform:scale(0.9);}
    50%{ opacity:1; transform:scale(1.1);}
  }

  .hero h2{
   
    font-weight:800;
     font-size:clamp(18px, 4.2vw, 32px);
    line-height:1.15;
    margin:0 0 14px 0;
    background:linear-gradient(100deg, var(--temple-gold-bright) 0%, var(--temple-gold) 45%, var(--ember-orange) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 34px rgba(232,172,46,0.25);
  }

  p.subhead{
    
    font-weight:500;
    font-size:clamp(13px, 1.6vw, 17px);
    color:var(--text-soft);
    margin:0;
    letter-spacing:0.01em;
  }

  /* live status dot next to eyebrow */
  .live-dot{
    position:relative;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5be27a;
    margin-right:2px;
    box-shadow:0 0 6px rgba(91,226,122,0.8);
  }

  .live-dot::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:1px solid rgba(91,226,122,0.6);
    animation:ping-ring 1.8s ease-out infinite;
  }

  @keyframes ping-ring{
    0%{ transform:scale(0.5); opacity:0.9; }
    100%{ transform:scale(1.8); opacity:0; }
  }

  @media (max-width:640px){
    .hero{ padding:40px 18px; min-height:190px; }
    .ring-far-left, .ring-far-right{ display:none; }
    .ring-a{ width:380px; height:380px; margin:-190px 0 0 -190px; }
    .ring-b{ width:250px; height:250px; margin:-125px 0 0 -125px; }
  }

  @media (prefers-reduced-motion: reduce){
    .zodiac-ring{ animation:none !important; }
    .eyebrow-mark svg{ animation:none !important; }
    .live-dot::after{ animation:none !important; display:none; }
  }