.fg { margin-bottom: var(--sp-4); }
.fg label {
  display: block;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-ink-2); margin-bottom: var(--sp-2);
}
.fg input[type="text"],
.fg input[type="email"],
.fg input[type="password"],
.fg input[type="number"],
.fg input[type="url"],
.fg input[type="search"],
.fg select,
.fg textarea {
  display: block; width: 100%;
  padding: .65rem var(--sp-4);
  border: 1.5px solid var(--c-cream-3);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: var(--fw-light);
  color: var(--c-ink);
  background: #fff;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(212,85,10,.1);
}
.fg input::placeholder,
.fg textarea::placeholder { color: var(--c-ink-4); font-weight: var(--fw-light); }
.fg select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238C7260' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; }
.fg textarea { resize: vertical; min-height: 90px; line-height: var(--lh-normal); }
.fg select[multiple] { background-image: none; padding-right: var(--sp-4); height: 100px; }

.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.fg-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }

.form-card {
  background: #fff; border-radius: var(--r-xl); padding: var(--sp-8);
  box-shadow: var(--sh-sm); border: 1px solid rgba(212,85,10,.07);
  margin-bottom: var(--sp-6);
}
.form-card h3 {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--c-ink); padding-bottom: var(--sp-4); border-bottom: 1.5px solid var(--c-cream-3);
  margin-bottom: var(--sp-6); display: flex; align-items: center; gap: var(--sp-3);
}
.form-card h3 .form-card-sub {
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-light); color: var(--c-ink-4);
}

.dyn-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dyn-row input { flex: 1; }
.dyn-row .rm-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1.5px solid var(--c-cream-3); border-radius: var(--r-sm);
  background: none; color: var(--c-ink-4); font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t-fast);
}
.dyn-row .rm-btn:hover { border-color: var(--c-error); color: var(--c-error); background: #FEF2F2; }

.add-dyn-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2);
  border: 1.5px dashed rgba(212,85,10,.3); border-radius: var(--r-sm);
  background: none; font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-orange);
  cursor: pointer; margin-top: var(--sp-2);
  transition: all var(--t-fast);
}
.add-dyn-btn:hover { background: var(--c-orange-pale); border-color: var(--c-orange); }

.form-submit {
  width: 100%; padding: 1rem;
  background: var(--c-orange); color: #fff; border: none;
  border-radius: var(--r-md); font-family: var(--font-body);
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  cursor: pointer; letter-spacing: var(--ls-wide);
  transition: all var(--t-base) var(--ease-out);
}
.form-submit:hover { background: var(--c-ink); transform: translateY(-1px); box-shadow: var(--sh-md); }

.char-count { font-size: var(--fs-xs); color: var(--c-ink-4); text-align: right; margin-top: var(--sp-1); }

@media (max-width: 600px) {
  .fg-row, .fg-3 { grid-template-columns: 1fr; }
  .form-card { padding: var(--sp-5); }
}



#js-cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--c-orange); border-radius: var(--r-full);
  pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform .08s linear, width .2s, height .2s;
  mix-blend-mode: multiply;
}
#js-cursor-ring {
  position: fixed; width: 38px; height: 38px;
  border: 1.5px solid var(--c-orange); border-radius: var(--r-full);
  pointer-events: none; z-index: 99998;
  transform: translate(-50%, -50%);
  transition: left .1s var(--ease-out), top .1s var(--ease-out),
              width .22s, height .22s, opacity .22s, border-color .2s;
  opacity: 0;
}
body:hover #js-cursor-ring { opacity: 1; }
@media (hover: none) { #js-cursor, #js-cursor-ring { display: none; } }

.hoverable:hover ~ #js-cursor  { width: 5px; height: 5px; }

#js-page-transition {
  position: fixed; inset: 0; background: var(--c-orange);
  z-index: 88888;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  will-change: transform;
}
#js-page-transition:not(.pt-in) {
  transform: scaleY(0) !important;
  animation: none !important;
}
#js-page-transition.pt-in  { animation: ptIn  0.38s var(--ease-inout) forwards; }
@keyframes ptIn  { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1);transform-origin:bottom} }

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }
.reveal-d5 { transition-delay: .5s; }

#js-particles {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 0; opacity: .3;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { animation: heroFadeUp .9s var(--ease-out) .1s both; }
.hero-anim-2 { animation: heroFadeUp .9s var(--ease-out) .25s both; }
.hero-anim-3 { animation: heroFadeUp .9s var(--ease-out) .4s both; }
.hero-anim-4 { animation: heroFadeUp .9s var(--ease-out) .55s both; }
.hero-anim-5 { animation: heroFadeUp .9s var(--ease-out) .7s both; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-orange-3); display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, rgba(255,255,255,.45), transparent);
  animation: scrollLine 2.2s infinite;
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0ece7 25%, #e8e4de 50%, #f0ece7 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.discover-indicator {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
}

.discover-text {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  writing-mode: vertical-rl;
}

@media (max-width: 768px) {
  .discover-indicator {
    right: 1rem;
  }
}