.contact-section {
  max-inline-size: 52rem;
  margin-inline: auto;
}


.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-xl);
  position: relative;
  overflow: hidden;
  animation: formFadeIn 0.8s ease-out;
}
.contact-form::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 6px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan), var(--accent-pink), var(--accent-purple));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow) ease;
  animation: gradientSlide 3s linear infinite;
  pointer-events: none;
}
.contact-form:focus-within::before { transform: scaleX(1); }
.contact-form::after {
  content: '';
  position: absolute;
  inset-block-end: -8rem;
  inset-inline-end: -8rem;
  inline-size: 20rem;
  block-size: 20rem;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-purple), transparent 88%) 0%, transparent 70%);
  pointer-events: none;
  animation: orbRotate 25s linear infinite;
}

@keyframes formFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(20px); filter: blur(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes gradientSlide { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
@keyframes orbRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}


.form-legend {
  font-size: clamp(var(--font-xl), 2vw, var(--font-2xl));
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan), var(--accent-pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-block-end: var(--spacing-xl);
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }


.form-group { margin-block-end: var(--spacing-xl); position: relative; }
.form-label {
  display: block;
  font-weight: 700;
  font-size: var(--font-base);
  margin-block-end: var(--spacing-sm);
  color: var(--ink);
  transition: all var(--transition-base) ease;
  position: relative;
  padding-inline-start: var(--spacing-md);
}
.form-label::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 0.25rem;
  block-size: 0;
  background: linear-gradient(180deg, var(--accent-purple), var(--accent-cyan));
  border-radius: 2px;
  transition: block-size var(--transition-base) ease;
}
.form-group:focus-within .form-label { color: var(--accent-purple); }
.form-group:focus-within .form-label::before { block-size: 100%; }


.form-input,
.form-textarea {
  inline-size: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--bg), transparent 50%);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--font-base);
  transition: all var(--transition-base) ease;
  position: relative;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted); opacity: 0.6; }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-purple);
  background: var(--bg);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--accent-purple), transparent 92%),
    0 8px 24px color-mix(in oklab, var(--accent-purple), transparent 80%),
    inset 0 0 20px color-mix(in oklab, var(--accent-purple), transparent 95%);
  transform: translateY(-3px);
}
.form-input:hover:not(:focus),
.form-textarea:hover:not(:focus) { border-color: color-mix(in oklab, var(--accent-purple), transparent 50%); }
.form-input:valid:not(:placeholder-shown),
.form-textarea:valid:not(:placeholder-shown) { border-color: color-mix(in oklab, var(--accent-cyan), transparent 40%); }
.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) { border-color: var(--accent-red); }

.form-textarea { resize: vertical; min-block-size: 12rem; line-height: 1.6; }


.form-actions { margin-block-start: var(--spacing-xl); display: flex; justify-content: center; }


.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);
  color: white;
  font-weight: 800;
  font-size: var(--font-lg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base) ease;
}
.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  opacity: 0;
  transition: opacity var(--transition-base) ease;
  pointer-events: none;
}
.btn-submit::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-radius: 50%;
  background: white;
  opacity: 0.3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.btn-submit:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 16px 48px color-mix(in oklab, var(--accent-purple), transparent 65%),
    0 0 60px color-mix(in oklab, var(--accent-purple), transparent 80%);
}
.btn-submit:hover::before { opacity: 1; }
.btn-submit:active {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-purple), transparent 70%);
}
.btn-submit:active::after {
  inline-size: 400px;
  block-size: 400px;
  opacity: 0;
  transition: inline-size 0.8s ease, block-size 0.8s ease, opacity 0.8s ease;
}
.btn-submit:focus-visible { outline: 3px solid var(--accent-purple); outline-offset: 6px; }
.btn-submit > * { position: relative; z-index: 1; }


.form-notice {
  text-align: center;
  margin-block-start: var(--spacing-lg);
  padding: var(--spacing-md);
  background: color-mix(in oklab, var(--accent-red), transparent 90%);
  border: 2px dashed color-mix(in oklab, var(--accent-red), transparent 60%);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.form-notice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent-red), transparent 85%), transparent);
  animation: shimmerNotice 2s ease-in-out infinite;
  pointer-events: none;
}
.form-notice small { position: relative; z-index: 1; color: var(--muted); font-size: var(--font-sm); }

@keyframes shimmerNotice { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }


.form-input:focus + .input-indicator,
.form-textarea:focus + .input-indicator { opacity: 1; transform: scale(1); }


.form-group .floating-label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--spacing-lg);
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: all var(--transition-base) ease;
  font-size: var(--font-base);
  background: var(--bg);
  padding-inline: var(--spacing-xs);
}
.form-group .form-input:focus ~ .floating-label,
.form-group .form-input:not(:placeholder-shown) ~ .floating-label,
.form-group .form-textarea:focus ~ .floating-label,
.form-group .form-textarea:not(:placeholder-shown) ~ .floating-label {
  inset-block-start: 0;
  font-size: var(--font-sm);
  color: var(--accent-purple);
}


.form-message {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-block-start: var(--spacing-md);
  font-size: var(--font-sm);
  font-weight: 600;
  text-align: center;
  animation: slideDown 0.4s ease-out;
}
.form-message.success {
  background: color-mix(in oklab, var(--accent-cyan), transparent 88%);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
}
.form-message.error {
  background: color-mix(in oklab, var(--accent-red), transparent 88%);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px);} to { opacity: 1; transform: translateY(0);} }


@media (max-width: 820px) {
  .contact-form { padding: var(--spacing-lg); }
  .form-input, .form-textarea { padding: var(--spacing-sm) var(--spacing-md); }
  .btn-submit { padding: var(--spacing-sm) var(--spacing-lg); }
}
@media (max-width: 480px) {
  .contact-form { padding: var(--spacing-md); }
  .form-legend { font-size: var(--font-xl); }
  .form-group { margin-block-end: var(--spacing-lg); }
  .btn-submit { inline-size: 100%; padding: var(--spacing-md); }
  .form-actions { margin-block-start: var(--spacing-lg); }
}