@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --bg: #fff1cb;
    --bg-deep: #f9e2a4;
    --ink: #2b1a12;
    --ink-soft: #7a5a3f;
    --blue: #4c5f6f;
    --pink-soft: #f0839f;
    --gold: #c98a2b;
    --line: rgba(43,26,18,0.18);
}

*{ 
    box-sizing: border-box;
}

html,body {
    margin:0;
    padding:0;
    height:100%;
    background: radial-gradient(120% 140% at 50% 15%, var(--bg-deep) 0%, var(--bg) 55%, var(--bg) 100%);
    color: var(--ink);
    font-family:'Work Sans', sans-serif;
    overflow-x:hidden;
}

.stage {
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 40px 24px;
    isolation:isolate;
}

.seeds {
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}
  .seed{
    position:absolute;
    top:-16px;
    width:7px;
    height:4px;
    border-radius:50%;
    background: var(--gold);
    opacity:0;
    animation: fall linear infinite;
  }
  .seed.alt{ background: var(--pink-soft); }
  @keyframes fall{
    0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
    8%{ opacity:0.85; }
    92%{ opacity:0.6; }
    100%{ transform: translateY(105vh) translateX(var(--drift)) rotate(320deg); opacity:0; }
  }


  h1{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:600;
    font-size: 45px;
    line-height:1.06;
    letter-spacing:-0.01em;
    margin: 0 0 40px;
    color: var(--ink);
    z-index:1;
    max-width: 780px;
  }
  h1 em{
    font-style:normal;
    font-weight:700;
    color: var(--pink);
  }

.tagline {
    font-size: 13px;
    letter-spacing: 0.14em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--ink-soft);
    max-width:520px;
    line-height:1.85;
    margin: 0 0 44px;
    z-index:1;
}

  .divider{
    display:flex;
    gap:8px;
    margin-bottom:36px;
    z-index:1;
  }
  .divider span{
    width:6px;
    height:6px;
    border-radius:50%;
    background: var(--gold);
  }
  .divider span:nth-child(2){ background: var(--blue); }

.status-img {
    width: min(500px, 68vw);
    height: auto;
    display:block;
    margin: 0 auto 34px;
    z-index:1;
}

  .socials{
    display:flex;
    gap:26px;
    z-index:1;
  }
  .socials a{
    font-size:11px;
    letter-spacing:0.18em;
    color: var(--ink-soft);
    text-decoration:none;
    font-weight:600;
    border-bottom:1px solid transparent;
    padding-bottom:3px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .socials a:hover{ color: var(--pink); border-color: var(--pink); }

  .address{
    position:absolute;
    bottom:26px;
    font-size:10.5px;
    letter-spacing:0.12em;
    color: var(--ink-soft);
    opacity:0.7;
    z-index:1;
    text-align:center;
    padding: 0 20px;
  }

  .mark-wrap{
    position:relative;
    width: min(340px, 78vw);
    margin: 0 auto 72px;
    z-index:1;
  }
  .mark-wrap::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:120%;
    height:120%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(253,184,36,0.45) 0%, rgba(253,184,36,0.22) 45%, rgba(253,184,36,0) 72%);
    filter: blur(18px);
    z-index:-1;
    animation: haloPulse 5s ease-in-out infinite;
  }
  @keyframes haloPulse{
    0%,100%{ opacity:0.75; transform: translate(-50%,-50%) scale(0.96); }
    50%{ opacity:1; transform: translate(-50%,-50%) scale(1.05); }
  }

  .logo-img{
    width:100%;
    height:auto;
    display:block;
  }

  @media (prefers-reduced-motion: reduce){
    .seed, .steam span{ animation: none !important; }
  }