*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; background: #F2EADE; }

  @keyframes heroRise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes blobA {
    0%,100% { border-radius: 42% 58% 63% 37%/45% 38% 62% 55%; transform: translate(-8%,-6%) scale(1); }
    50%      { border-radius: 60% 40% 38% 62%/55% 62% 38% 45%; transform: translate(6%,8%) scale(1.12); }
  }
  @keyframes blobB {
    0%,100% { border-radius: 55% 45% 40% 60%/55% 45% 55% 45%; transform: translate(6%,4%) scale(1.05); }
    50%      { border-radius: 38% 62% 58% 42%/42% 58% 42% 58%; transform: translate(-7%,-9%) scale(0.92); }
  }
  @keyframes marquee {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

  @keyframes fadeCycle { 0%{opacity:0} 5%{opacity:1} 86%{opacity:1} 95%{opacity:0} 100%{opacity:0} }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
  @keyframes markDraw { 0%{stroke-dashoffset:1} 17%{stroke-dashoffset:0} 100%{stroke-dashoffset:0} }
  @keyframes markFill { 0%{opacity:0} 11%{opacity:0} 25%{opacity:1} 100%{opacity:1} }
  @keyframes wipeWord { 0%{transform:scaleX(0)} 15%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1)} }
  @keyframes wipeAll { 0%{transform:scaleX(0)} 4%{transform:scaleX(0)} 40%{transform:scaleX(1)} 100%{transform:scaleX(1)} }
  @keyframes slideL { 0%{transform:translateX(-72px);opacity:0} 6%{opacity:0} 30%{transform:translateX(0);opacity:1} 100%{transform:translateX(0);opacity:1} }
  @keyframes slideR { 0%{transform:translateX(72px);opacity:0} 6%{opacity:0} 30%{transform:translateX(0);opacity:1} 100%{transform:translateX(0);opacity:1} }

  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #F2EADE;
    font-family: "Outfit", sans-serif;
    --accent: #B55533;
    --ink: #01072B;
  }

  /* ── blobs ── */
  .blob-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .blob-a {
    position: absolute; left: -6%; top: -12%;
    width: 46vw; height: 46vw;
    background: radial-gradient(circle at 50% 50%, rgba(181,85,51,0.34), rgba(181,85,51,0) 68%);
    filter: blur(18px);
    animation: blobA 17s ease-in-out infinite;
  }
  .blob-b {
    position: absolute; right: -10%; bottom: -16%;
    width: 52vw; height: 52vw;
    background: radial-gradient(circle at 50% 50%, rgba(1,7,43,0.20), rgba(1,7,43,0) 66%);
    filter: blur(20px);
    animation: blobB 21s ease-in-out infinite;
  }

  /* ── canvas ── */
  #flow-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 1; display: block;
  }

  /* ── header ── */
  .site-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    display: flex; align-items: center;
    padding: 34px clamp(24px, 5vw, 72px);
    opacity: 0;
    animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
  }
  .site-header svg { height: 38px; width: auto; }

  /* ── hero content ── */
  .hero-body {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 clamp(24px, 5vw, 72px);
  }
  .hero-inner { max-width: 1180px; }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgba(1,7,43,0.18);
    border-radius: 999px;
    font-size: 13px; letter-spacing: .05em;
    color: var(--ink); text-transform: uppercase;
    margin-bottom: 30px;
    opacity: 0;
    animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .25s forwards;
  }
  .hero-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(181,85,51,0.18);
    flex-shrink: 0;
  }

  .hero-h1 {
    font-family: "Candal", sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -0.05em;
    font-size: clamp(35px, 7.5vw, 110px);
    color: var(--ink);
    text-wrap: balance;
}
  .hero-h1 .line { display: block; overflow: hidden;    margin-top: -30px; }
  .hero-h1 .line-2  { margin-top: -35px; }
  .hero-h1 .line span { display: inline-block; opacity: 0; }
  .hero-h1 .line-1 span { animation: heroRise 1s cubic-bezier(.2,.7,.2,1) .30s forwards; }
  .hero-h1 .line-2 span {
    animation: heroRise 1s cubic-bezier(.2, .7, .2, 1) .42s forwards;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: 0;
    text-transform: uppercase;
    border-bottom: 5px solid;
    line-height: 1em;
}
  .hero-h1 .line-3 span { animation: heroRise 1s cubic-bezier(.2,.7,.2,1) .54s forwards; }

  .hero-foot {
    display: flex; flex-wrap: wrap;
    align-items: flex-end; gap: 36px 56px;
    margin-top: 42px;
    opacity: 0;
    animation: heroRise 1s cubic-bezier(.2,.7,.2,1) .7s forwards;
  }
  .hero-para {
    max-width: 440px;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.6;
    color: rgba(1,7,43,0.74);
  }
  .hero-cta {
    display: inline-flex; align-items: center; gap: 14px;
    text-decoration: none;
    color: #F2EADE;
    background: var(--ink);
    padding: 15px 16px 15px 26px;
    border-radius: 999px;
    font-size: 16px; font-weight: 600;
    white-space: nowrap;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s;
  }
  .hero-cta:hover { transform: translateY(-3px); background: #B55533; }
  .hero-cta-arrow {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
  }

  /* ── marquee ── */
  .marquee-strip {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    overflow: hidden;
    border-top: 1px solid rgba(1,7,43,0.12);
    background: rgba(242,234,222,0.5);
    backdrop-filter: blur(2px);
  }
  .marquee-track {
    display: flex; width: max-content;
    animation: marquee 15s linear infinite;
    font-family: "Outfit", sans-serif;
    font-weight: 500; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(1,7,43,0.55); padding: 13px 0;
  }
  .marquee-inner { display: flex; gap: 30px; padding-right: 30px; }
  .marquee-dot { color: #B55533; }

  @media (min-width: 300px) and (max-width: 767px) {
.hero-h1 .line-2 {
    margin-top: -12px;
}
.hero-h1 .line {
    margin-top: -5px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.hero-h1 .line {
    margin-top: -10px;
}
.hero-h1 .line-2 {
    margin-top: -20px;
}
}