:root {
  --bg:#020406;
  --glow:0, 200, 255;
  --logo-width:min(360px, 80vw);
  --text:#eef9ff;
  --muted:#8fb6c5;
  --panel:rgba(3, 13, 18, 0.84);
  --line:rgba(var(--glow), 0.32);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body {
  width:100%;
  height:100%;
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  overflow:hidden;
}

/* Background layers */
#fx,
#threeContainer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.flash {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(var(--glow), 0.18), transparent 30vmin);
  opacity:0;
  z-index:1;
  pointer-events:none;
  animation: flashAnim 1.8s ease-out forwards;
  animation-delay:0.85s;
}

.logo-wrapper {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  z-index:2;
  opacity:0;
  pointer-events:none;
  animation: logoWrapperFade 3.1s ease-out forwards;
  animation-delay:0.85s;
}

.logo {
  display:block;
  width:var(--logo-width);
  height:auto;
  background:transparent;
  opacity:0;
  transform:scale(0.86);
  filter:
    brightness(0.35)
    drop-shadow(0 0 0 rgba(var(--glow), 0));
  animation: logoReveal 3.2s cubic-bezier(.2,.7,.28,1) forwards;
  animation-delay:0.85s;
}

.hero-copy {
  position:fixed;
  top:clamp(42px, 9vh, 86px);
  left:50%;
  z-index:3;
  width:min(860px, calc(100vw - 36px));
  color:var(--text);
  text-align:center;
  text-shadow:0 0 22px rgba(var(--glow), 0.2);
  transform:translateX(-50%) translateY(6px);
  opacity:0;
  pointer-events:none;
  animation: heroReveal 1.05s ease-out forwards;
  animation-delay:0.55s;
}

.hero-title {
  margin:0;
  font-size:clamp(1.18rem, 2.7vw, 2.05rem);
  font-weight:600;
  line-height:1.18;
}

.hero-subtitle {
  margin:10px auto 0;
  max-width:780px;
  color:var(--muted);
  font-size:clamp(0.78rem, 1.25vw, 0.95rem);
  line-height:1.45;
  white-space:nowrap;
}

.hero-ethos {
  margin:8px auto 0;
  max-width:620px;
  color:rgba(238, 249, 255, 0.76);
  font-size:clamp(0.76rem, 1.4vw, 0.9rem);
  line-height:1.45;
}

.contact-trigger {
  position:fixed;
  right:clamp(18px, 4vw, 42px);
  bottom:clamp(18px, 4vw, 42px);
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:124px;
  min-height:44px;
  border:1px solid rgba(var(--glow), 0.55);
  border-radius:4px;
  background:linear-gradient(135deg, rgba(0, 20, 28, 0.76), rgba(1, 51, 68, 0.42));
  color:var(--text);
  font:700 0.78rem/1 Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:
    0 0 18px rgba(var(--glow), 0.2),
    inset 0 0 18px rgba(var(--glow), 0.08);
  backdrop-filter:blur(12px);
  opacity:0;
  animation: contactReveal 1s ease-out forwards;
  animation-delay:1s;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.contact-trigger:hover,
.contact-trigger:focus-visible {
  border-color:rgba(var(--glow), 0.9);
  box-shadow:
    0 0 28px rgba(var(--glow), 0.34),
    inset 0 0 22px rgba(var(--glow), 0.14);
  transform:translateY(-2px);
}

.contact-trigger:focus-visible,
.modal-close:focus-visible,
.contact-form :is(input, select, textarea):focus-visible,
.submit-button:focus-visible {
  outline:2px solid rgba(var(--glow), 0.9);
  outline-offset:3px;
}

.modal {
  position:fixed;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--glow), 0.18), transparent 34vmin),
    rgba(0, 4, 7, 0.72);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}

.modal.is-open {
  opacity:1;
  pointer-events:auto;
}

.modal-panel {
  position:relative;
  width:min(760px, 100%);
  max-height:min(820px, calc(100vh - 48px));
  padding:38px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  box-shadow:
    0 0 60px rgba(var(--glow), 0.18),
    inset 0 0 42px rgba(var(--glow), 0.05);
  backdrop-filter:blur(18px);
  transform:translateY(12px) scale(0.98);
  transition:transform 220ms ease;
}

.modal.is-open .modal-panel {
  transform:translateY(0) scale(1);
}

.modal-close {
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border:1px solid rgba(var(--glow), 0.34);
  border-radius:4px;
  background:rgba(0, 15, 22, 0.72);
  color:var(--text);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
}

.modal-title {
  margin:0 42px 8px 0;
  font-size:clamp(1.55rem, 4vw, 2.15rem);
  font-weight:700;
}

.modal-intro {
  margin-bottom:24px;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.55;
}

.modal-intro strong {
  color:var(--text);
  font-weight:600;
}

.contact-form {
  display:grid;
  gap:16px;
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.form-field,
.full-field {
  display:grid;
  gap:7px;
}

.full-field {
  grid-column:1 / -1;
}

.contact-form label {
  color:var(--muted);
  font-size:0.76rem;
  font-weight:700;
  text-transform:uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%;
  border:1px solid rgba(var(--glow), 0.26);
  border-radius:4px;
  background:rgba(0, 8, 12, 0.72);
  color:var(--text);
  font:inherit;
  line-height:1.4;
  padding:12px 13px;
}

.contact-form textarea {
  min-height:160px;
  resize:vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:rgba(143, 182, 197, 0.62);
}

.contact-form :is(input, select, textarea).is-invalid {
  border-color:rgba(255, 150, 150, 0.74);
  box-shadow:
    0 0 0 1px rgba(255, 150, 150, 0.16),
    0 0 18px rgba(255, 70, 70, 0.1);
}

.field-error {
  color:#ffb4b4;
  font-size:0.82rem;
  line-height:1.35;
}

.contact-form select {
  appearance:none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(var(--glow), 0.78) 50%),
    linear-gradient(135deg, rgba(var(--glow), 0.78) 50%, transparent 50%),
    rgba(0, 8, 12, 0.72);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat:no-repeat;
}

.contact-form input[type="file"] {
  padding:10px;
}

.contact-form input[type="file"]::file-selector-button {
  margin-right:12px;
  border:1px solid rgba(var(--glow), 0.42);
  border-radius:4px;
  background:rgba(var(--glow), 0.1);
  color:var(--text);
  font:700 0.72rem/1 Arial, Helvetica, sans-serif;
  padding:10px 12px;
  text-transform:uppercase;
  cursor:pointer;
}

.field-hint {
  color:rgba(143, 182, 197, 0.78);
  font-size:0.82rem;
  line-height:1.45;
}

.character-count {
  justify-self:end;
  color:rgba(143, 182, 197, 0.64);
  font-size:0.76rem;
  line-height:1.25;
}

.character-count.is-low {
  color:#ffd18a;
}

.character-count.is-full {
  color:#ffb4b4;
}

.hidden-field {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.submit-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:4px;
}

.submit-button {
  min-width:130px;
  min-height:44px;
  border:1px solid rgba(var(--glow), 0.62);
  border-radius:4px;
  background:rgba(var(--glow), 0.12);
  color:var(--text);
  font:700 0.8rem/1 Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 0 20px rgba(var(--glow), 0.16);
}

.submit-button:disabled {
  cursor:wait;
  opacity:0.62;
}

.privacy-note {
  color:rgba(143, 182, 197, 0.78);
  font-size:0.78rem;
  line-height:1.5;
}

.site-footer {
  position:fixed;
  left:clamp(18px, 4vw, 42px);
  bottom:clamp(18px, 4vw, 42px);
  z-index:3;
  color:rgba(143, 182, 197, 0.72);
  font-size:0.78rem;
  pointer-events:none;
}

.form-status {
  min-height:1.3em;
  color:var(--muted);
  font-size:0.9rem;
  line-height:1.45;
}

.form-status.is-success {
  color:#9df7d2;
}

.form-status.is-error {
  color:#ffb4b4;
}

@keyframes logoWrapperFade {
  0% {
    opacity:0;
  }

  30% {
    opacity:0.38;
  }

  72% {
    opacity:0.92;
  }

  100% {
    opacity:1;
  }
}

@keyframes logoReveal {
  0% {
    opacity:0;
    transform:scale(0.94);
    filter:
      brightness(0.52)
      drop-shadow(0 0 0 rgba(var(--glow), 0));
  }

  42% {
    opacity:0.58;
    transform:scale(0.975);
    filter:
      brightness(0.82)
      drop-shadow(0 0 10px rgba(var(--glow), 0.16));
  }

  75% {
    opacity:0.9;
    transform:scale(0.995);
    filter:
      brightness(1.03)
      drop-shadow(0 0 18px rgba(var(--glow), 0.26));
  }

  100% {
    opacity:1;
    transform:scale(1);
    filter:
      brightness(1)
      drop-shadow(0 0 18px rgba(var(--glow), 0.3));
  }
}

@keyframes flashAnim {
  0% {
    opacity:0;
  }

  30% {
    opacity:0.38;
  }

  100% {
    opacity:0;
  }
}

@keyframes heroReveal {
  0% {
    opacity:0;
    transform:translateX(-50%) translateY(6px);
  }

  100% {
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

@keyframes contactReveal {
  0% {
    opacity:0;
    transform:translateY(6px);
  }

  100% {
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash {
    display:none;
  }

  .logo-wrapper {
    opacity:1;
    transform:translate(-50%, -50%);
    animation:none;
  }

  .logo {
    opacity:1;
    transform:none;
    animation:none;
  }

  .hero-copy {
    opacity:1;
    transform:translateX(-50%);
    animation:none;
  }

  .contact-trigger {
    opacity:1;
    animation:none;
  }

  .modal,
  .modal-panel,
  .contact-trigger {
    transition:none;
  }
}

@media (max-width:620px) {
  .modal {
    padding:16px;
  }

  .modal-panel {
    padding:28px 20px 22px;
  }

  .form-grid {
    grid-template-columns:1fr;
  }

  .submit-row {
    align-items:stretch;
    flex-direction:column-reverse;
  }

  .submit-button {
    width:100%;
  }

  .site-footer {
    bottom:76px;
  }

  .hero-subtitle {
    white-space:normal;
  }
}

@media (max-height:680px) {
  :root {
    --logo-width:min(320px, 72vw);
  }

  .hero-copy {
    top:24px;
  }

  .hero-title {
    font-size:clamp(1.08rem, 4.2vw, 1.55rem);
  }

  .hero-subtitle {
    margin-top:8px;
    font-size:0.86rem;
    white-space:normal;
  }

  .hero-ethos {
    display:none;
  }
}