:root {
  color-scheme: light;
  --cf-primary: #3e69aa;
  --cf-primary-dark: #0f4c75;
  --cf-accent: #3282b8;
  --cf-accent-light: #bbe1fa;
  --cf-bg: #f0f4f8;
  --cf-card: #ffffff;
  --cf-text: #1e293b;
  --cf-text-secondary: #64748b;
  --cf-text-muted: #94a3b8;
  --cf-border: #e2e8f0;
  --cf-border-focus: #3282b8;
  --cf-success: #059669;
  --cf-success-bg: #ecfdf5;
  --cf-success-border: #a7f3d0;
  --cf-error: #dc2626;
  --cf-error-bg: #fef2f2;
  --cf-error-border: #fecaca;
  --cf-shadow-lg: 0 12px 40px rgba(15,76,117,0.12);
  --cf-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cf-font-display: 'Playfair Display', Georgia, serif;
  --cf-radius: 12px;
  --cf-radius-sm: 8px;
  --cf-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing: border-box; }
.contact-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative; overflow: hidden;
}
.contact-page::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at 20% 30%, rgba(50,130,184,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(62,105,170,0.06) 0%, transparent 50%);
  animation: bgFloat 20s ease-in-out infinite; z-index: -1;
}
@keyframes bgFloat { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-10px,15px)} 66%{transform:translate(10px,-10px)} }
.form-container { width: 100%; max-width: 580px; position: relative; }
.form-card {
  background: var(--cf-card); border-radius: var(--cf-radius); box-shadow: var(--cf-shadow-lg);
  overflow: hidden; animation: cardEnter 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardEnter { from{opacity:0;transform:translateY(24px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.form-card::before {
  content: ''; display: block; height: 4px;
  background: linear-gradient(90deg, var(--cf-primary-dark), var(--cf-accent), var(--cf-accent-light));
  background-size: 200% 100%; animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }
.form-header { text-align: center; padding: 40px 40px 8px; }
.form-header__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--cf-primary-dark), var(--cf-accent));
  margin-bottom: 20px; animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.form-header__icon svg { width: 28px; height: 28px; color: #fff; }
.form-header h1 { font-family: var(--cf-font-display); font-size: 1.75rem; font-weight: 700; color: var(--cf-text); margin: 0 0 8px; }
.form-header p { font-family: var(--cf-font); font-size: 0.95rem; color: var(--cf-text-secondary); margin: 0; line-height: 1.5; }
.form-body { padding: 32px 40px 40px; }
.form-group { margin-bottom: 24px; position: relative; animation: fieldEnter 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.form-group:nth-child(1){animation-delay:.1s} .form-group:nth-child(2){animation-delay:.15s}
.form-group:nth-child(3){animation-delay:.2s} .form-group:nth-child(4){animation-delay:.25s}
@keyframes fieldEnter { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.control-label { display:block; font-family:var(--cf-font); font-size:0.85rem; font-weight:600; color:var(--cf-text); margin-bottom:8px; }
.control-label .required-dot { display:inline-block; width:5px; height:5px; background:var(--cf-accent); border-radius:50%; margin-left:4px; vertical-align:super; }
.form-control {
  display:block; width:100%; padding:14px 16px; font-family:var(--cf-font); font-size:0.95rem;
  color:var(--cf-text); background:var(--cf-card); border:1.5px solid var(--cf-border);
  border-radius:var(--cf-radius-sm); outline:none;
  transition: border-color var(--cf-transition), box-shadow var(--cf-transition), background-color var(--cf-transition);
  -webkit-appearance:none;
}
.form-control::placeholder { color:var(--cf-text-muted); }
.form-control:hover { border-color:#cbd5e1; }
.form-control:focus { border-color:var(--cf-border-focus); box-shadow:0 0 0 3px rgba(50,130,184,0.12); background:#fafcff; }
textarea.form-control { resize:vertical; min-height:120px; line-height:1.6; }
.form-control.is-valid { border-color:var(--cf-success); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:42px; }
.form-control.is-invalid { border-color:var(--cf-error); background-color:var(--cf-error-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:42px; }
textarea.form-control.is-valid, textarea.form-control.is-invalid { background-position:right 14px top 14px; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(2px)} }
.form-group.shake { animation: shake 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both; }
.invalid-feedback { display:block; margin-top:6px; font-family:var(--cf-font); font-size:0.8rem; color:var(--cf-error); font-weight:500; }
.invalid-feedback:empty { margin-top:0; }
.form-captcha { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.form-captcha__image-wrapper { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.form-captcha__image { display:block; border-radius:var(--cf-radius-sm); border:1.5px solid var(--cf-border); height:52px; width:auto; }
.form-captcha__refresh { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--cf-bg); border:1.5px solid var(--cf-border); cursor:pointer; color:var(--cf-text-secondary); transition:all var(--cf-transition); }
.form-captcha__refresh:hover { background:var(--cf-accent-light); border-color:var(--cf-accent); color:var(--cf-primary-dark); transform:rotate(180deg); }
.form-captcha__refresh svg { width:14px; height:14px; }
.form-captcha__input { flex:1; min-width:140px; margin-bottom:0; }
.form-captcha__input .form-control { letter-spacing:4px; font-weight:600; text-align:center; font-size:1.1rem; }
.form-hp { position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; pointer-events:none; }
.form-error { padding:14px 18px; background:var(--cf-error-bg); border:1px solid var(--cf-error-border); border-radius:var(--cf-radius-sm); color:var(--cf-error); font-family:var(--cf-font); font-size:0.88rem; font-weight:500; margin-bottom:20px; animation:slideDown 0.3s ease; }
.form-error::before { content:'⚠ '; }
.form-error_hide { display:none; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.form-submit { margin-top:28px; }
.form-submit button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px 32px; font-family:var(--cf-font); font-size:1rem; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--cf-primary),var(--cf-accent)); border:none; border-radius:var(--cf-radius-sm); cursor:pointer; position:relative; overflow:hidden; transition:all var(--cf-transition); box-shadow:0 4px 15px rgba(50,130,184,0.3); }
.form-submit button::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:left 0.5s ease; }
.form-submit button:hover::before { left:100%; }
.form-submit button:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(50,130,184,0.4); }
.form-submit button:active { transform:translateY(0); }
.form-submit button:disabled { cursor:not-allowed; opacity:0.8; }
.form-submit button:disabled:hover { transform:none; }
.form-submit button svg { width:18px; height:18px; transition:transform var(--cf-transition); }
.form-submit button:hover svg { transform:translateX(3px); }
.btn-spinner { display:inline-block; width:22px; height:22px; border:2.5px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.form-success { text-align:center; padding:52px 40px; animation:successEnter 0.6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes successEnter { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
.form-success_hide { display:none; }
.form-success__checkmark { display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px; margin-bottom:24px; }
.form-success__checkmark-circle { width:80px; height:80px; border-radius:50%; background:var(--cf-success-bg); border:2px solid var(--cf-success-border); display:flex; align-items:center; justify-content:center; animation:checkPulse 2s ease-in-out infinite; }
@keyframes checkPulse { 0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,0.15)} 50%{box-shadow:0 0 0 16px rgba(5,150,105,0)} }
.form-success__checkmark svg { width:36px; height:36px; color:var(--cf-success); }
.form-success h2 { font-family:var(--cf-font-display); font-size:1.5rem; font-weight:700; color:var(--cf-text); margin:0 0 12px; }
.form-success p { font-family:var(--cf-font); font-size:0.95rem; color:var(--cf-text-secondary); margin:0 0 32px; line-height:1.6; }
.form-success__actions { display:flex; flex-direction:column; gap:12px; align-items:center; }
.btn-home { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; font-family:var(--cf-font); font-size:0.95rem; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--cf-primary),var(--cf-accent)); border:none; border-radius:var(--cf-radius-sm); text-decoration:none; cursor:pointer; transition:all var(--cf-transition); box-shadow:0 4px 15px rgba(50,130,184,0.3); }
.btn-home:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(50,130,184,0.4); color:#fff; }
.btn-home svg { width:18px; height:18px; }
.btn-another { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; font-family:var(--cf-font); font-size:0.85rem; font-weight:500; color:var(--cf-text-secondary); background:none; border:1.5px solid var(--cf-border); border-radius:var(--cf-radius-sm); cursor:pointer; transition:all var(--cf-transition); }
.btn-another:hover { border-color:var(--cf-accent); color:var(--cf-accent); }
.form-footer { padding:16px 40px; background:#fafbfc; border-top:1px solid var(--cf-border); text-align:center; }
.form-footer p { font-family:var(--cf-font); font-size:0.78rem; color:var(--cf-text-muted); margin:0; }
.form-footer svg { width:12px; height:12px; vertical-align:-1px; margin-right:2px; color:var(--cf-accent); }
@media (max-width:640px) {
  .contact-page { padding:20px 12px; align-items:flex-start; }
  .form-header { padding:28px 24px 4px; }
  .form-header h1 { font-size:1.4rem; }
  .form-body { padding:24px 24px 32px; }
  .form-captcha { flex-direction:column; }
  .form-captcha__input { min-width:100%; }
  .form-footer { padding:14px 24px; }
  .form-success { padding:36px 24px; }
}