/* Grapeleaf marketing site — ported from the "Grapeleaf Site" design canvas artboard.
   The markup keeps the artboard's inline styles verbatim, so everything here that
   restyles an element has to carry !important to outrank them. */

/* ---------------------------------------------------------------- base
   Verbatim from the artboard's <helmet> block. */
html { scroll-behavior:smooth; }
  body { margin:0; background:#0B0713; color:#F2EEF9; -webkit-font-smoothing:antialiased; }
  a { color:#A6F04B; text-decoration:none; }
  a:hover { color:#C6FF7A; }
  input, textarea, button { font-family:inherit; }
  input::placeholder { color:#5F547A; }
  @keyframes gl-a { 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(120px,80px,0) scale(1.18);} }
  @keyframes gl-b { 0%,100%{transform:translate3d(0,0,0) scale(1.1);} 50%{transform:translate3d(-140px,-60px,0) scale(0.9);} }
  @keyframes gl-c { 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(60px,-110px,0);} }
  @keyframes gl-spin { to { transform:rotate(360deg); } }
  @keyframes gl-rise { 0%{opacity:0; transform:translateY(26px);} 100%{opacity:1; transform:translateY(0);} }
  @keyframes gl-marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @keyframes gl-pulse { 0%,100%{opacity:0.35; transform:scale(1);} 50%{opacity:0.9; transform:scale(1.5);} }
  @keyframes gl-fill1 { 0%{width:0;} 22%{width:33%;} 100%{width:33%;} }
  @keyframes gl-fill3 { 0%{width:0;} 30%{width:0;} 58%{width:66%;} 100%{width:66%;} }
  @keyframes gl-fill5 { 0%{width:0;} 62%{width:0;} 92%{width:100%;} 100%{width:100%;} }
  @keyframes gl-sheen { 0%{transform:translateX(-120%);} 60%,100%{transform:translateX(220%);} }
  @keyframes gl-float { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-14px) rotate(3deg);} }
  @keyframes gl-play { from{width:2%;} to{width:100%;} }
  @keyframes gl-rec { 0%,100%{opacity:1;} 50%{opacity:0.25;} }
  @keyframes gl-grain { 0%{transform:translate(0,0);} 25%{transform:translate(-2%,1%);} 50%{transform:translate(1%,-2%);} 75%{transform:translate(2%,2%);} 100%{transform:translate(0,0);} }
  @keyframes gl-blink { 0%,45%{opacity:1;} 50%,95%{opacity:0.15;} 100%{opacity:1;} }
  @keyframes gl-reveal { from{opacity:0; transform:translate3d(0,42px,0) scale(0.985); filter:blur(10px);} to{opacity:1; transform:none; filter:blur(0);} }
  @keyframes gl-reveal-soft { from{opacity:0; transform:translate3d(0,22px,0);} to{opacity:1; transform:none;} }
  @keyframes gl-line { from{transform:scaleX(0);} to{transform:scaleX(1);} }
  @keyframes gl-drift { from{transform:translate3d(0,-90px,0);} to{transform:translate3d(0,90px,0);} }
  @keyframes gl-drift-slow { from{transform:translate3d(0,-40px,0);} to{transform:translate3d(0,50px,0);} }
  @keyframes gl-zoom { from{transform:scale(1.06);} to{transform:scale(1);} }
  @media (prefers-reduced-motion: reduce) { * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; } }

/* ---------------------------------------------------------------- interaction states
   The artboard expressed these as style-hover / style-focus / style-active
   attributes; each distinct declaration becomes one class here. */
.hv-nav-cta:hover        { color:#C6FF7A !important; border-color:#C6FF7A !important; }
.hv-cta-primary:hover    { background:#C6FF7A !important; color:#120A1F !important; transform:translateY(-2px) !important; box-shadow:0 16px 38px rgba(166,240,75,0.3) !important; }
.hv-cta-ghost:hover      { border-color:#A6F04B !important; color:#F2EEF9 !important; background:rgba(166,240,75,0.07) !important; transform:translateY(-2px) !important; }
.hv-cta-flat:hover       { background:#C6FF7A !important; }
.hv-rung:hover           { transform:translateY(-8px) !important; border-color:rgba(166,240,75,0.34) !important; box-shadow:0 30px 70px rgba(0,0,0,0.6) !important; }
.hv-rung-final:hover     { transform:translateY(-8px) !important; border-color:rgba(166,240,75,0.6) !important; box-shadow:0 30px 70px rgba(166,240,75,0.16) !important; }
.hv-pick-investor:hover  { transform:translateY(-8px) !important; border-color:#7B3FE4 !important; box-shadow:0 30px 70px rgba(123,63,228,0.35) !important; }
.hv-pick-founder:hover   { transform:translateY(-8px) !important; border-color:#A6F04B !important; box-shadow:0 30px 70px rgba(166,240,75,0.22) !important; }
.hv-card:hover           { transform:translateY(-8px) !important; border-color:rgba(242,238,249,0.2) !important; box-shadow:0 28px 64px rgba(0,0,0,0.6) !important; }
.hv-rule:hover           { background:#100A1B !important; }
.hv-swap:hover           { color:#A6F04B !important; border-color:#A6F04B !important; }
.hv-submit:hover         { background:#C6FF7A !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(166,240,75,0.28) !important; }
.hv-submit:active        { transform:translateY(0) !important; }

/* Role pills and focus chips are painted inline once selected, so the hover
   state has to stand down or it would wipe the selection while pointing at it. */
.hv-chip:not([data-on]):hover           { border-color:#A6F04B !important; color:#F2EEF9 !important; }
.hv-role-investor:not([data-on]):hover  { border-color:#7B3FE4 !important; color:#F2EEF9 !important; }
.hv-role-both:not([data-on]):hover      { border-color:#C8A96A !important; color:#F2EEF9 !important; }

.gl-input:focus { border-color:#A6F04B !important; box-shadow:0 0 0 3px rgba(166,240,75,0.14) !important; background:#20142F !important; }

:focus-visible { outline:2px solid #A6F04B; outline-offset:3px; }

/* ---------------------------------------------------------------- conditionals
   Stand-ins for the artboard's <sc-if>. display:contents keeps the wrapper out
   of the layout so grid and flex parents still see the real child. */
.dc-if          { display:contents; }
.dc-if[hidden]  { display:none; }

/* ---------------------------------------------------------------- scroll reveals
   The artboard drives its entrance animations with animation-timeline:view().
   Where that is unsupported (Safari, Firefox) every one of them would otherwise
   fire at once on load, so site.js swaps in an IntersectionObserver and these
   rules replace the keyframes with an equivalent transition. */
.no-view-timeline [data-reveal] {
  animation-name: none !important;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .85s cubic-bezier(.16,.84,.24,1), transform .85s cubic-bezier(.16,.84,.24,1);
}
.no-view-timeline [data-reveal].is-in { opacity:1; transform:none; }

/* ---------------------------------------------------------------- responsive
   The artboard is a fixed-width desktop canvas; these are the only additions
   needed to make it hold together down to a phone. */
@media (max-width: 900px) {
  nav, section, footer { padding-left:22px !important; padding-right:22px !important; }
  .gl-hero-grid  { grid-template-columns:1fr !important; gap:36px !important; }
  .gl-hero-title { white-space:normal !important; }
}

@media (max-width: 560px) {
  #top          { padding-top:112px !important; }
  .gl-form-row  { grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .no-view-timeline [data-reveal] { opacity:1; transform:none; transition:none; }
}