/* ==========================================================================
   FREE USE TOOL — CONTACT PAGE
   Dedicated premium page stylesheet
   Official email: freeusetoool@gmail.com
   ========================================================================== */

.fut-contact-page {
  --contact-line: var(--fut-border);
  position:relative;
  isolation:isolate;
  overflow:clip;
}

/* Hero */
.fut-contact-hero {
  position:relative;
  padding:clamp(76px,9vw,118px) 0 86px;
  overflow:hidden;
  border-bottom:1px solid var(--contact-line);
  background:
    radial-gradient(680px 500px at 82% 22%,rgba(14,165,233,.14),transparent 68%),
    radial-gradient(520px 420px at 5% 2%,rgba(56,189,248,.11),transparent 70%),
    var(--fut-page);
}
.fut-contact-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.88fr);
  align-items:center;
  gap:clamp(48px,7vw,100px);
}
.fut-contact-hero-copy { position:relative;z-index:2; }
.fut-contact-hero h1 {
  max-width:760px;
  margin:0 0 22px;
  font-size:clamp(2.7rem,6vw,5.6rem);
  line-height:.95;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.fut-contact-hero .fut-lead {
  max-width:680px;
  margin:0;
  font-size:1.08rem;
  line-height:1.85;
}
.fut-contact-trust {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.fut-contact-trust > div {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px;
  border:1px solid var(--contact-line);
  border-radius:15px;
  background:color-mix(in srgb,var(--fut-surface) 88%,transparent);
  box-shadow:var(--fut-shadow-xs);
}
.fut-contact-trust-icon {
  display:grid;place-items:center;
  width:35px;height:35px;
  border-radius:10px;
  color:var(--fut-primary-700);
  background:var(--fut-primary-50);
  font-weight:900;
}
.fut-contact-trust strong,.fut-contact-trust span:last-child { display:block; }
.fut-contact-trust strong { font-size:.72rem;text-transform:uppercase;letter-spacing:.07em; }
.fut-contact-trust span:last-child { color:var(--fut-text-muted);font-size:.83rem; }

/* 3D contact visual */
.fut-contact-hero-visual {
  position:relative;
  min-height:500px;
  display:grid;
  place-items:center;
  perspective:1500px;
}
.fut-contact-visual-halo {
  position:absolute;
  width:390px;height:390px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.23),rgba(14,165,233,.04) 48%,transparent 72%);
  filter:blur(3px);
}
.fut-contact-visual-orbit {
  position:absolute;
  width:430px;height:430px;
  border:1px solid rgba(14,165,233,.20);
  border-radius:50%;
  transform:rotateX(66deg) rotateZ(15deg);
}
.fut-contact-visual-orbit::after {
  content:"";
  position:absolute;inset:15%;
  border:1px dashed rgba(56,189,248,.25);
  border-radius:50%;
}
.fut-contact-mail-card {
  position:relative;
  z-index:3;
  width:min(100%,400px);
  min-height:310px;
  padding:32px;
  border:1px solid rgba(125,211,252,.65);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(238,248,255,.88));
  box-shadow:0 40px 90px rgba(15,23,42,.15),0 18px 45px rgba(14,165,233,.12),inset 0 1px 0 #fff;
  backdrop-filter:blur(18px);
  transform:rotateY(-9deg) rotateX(4deg);
}
.fut-contact-mail-icon {
  width:68px;height:68px;
  display:grid;place-items:center;
  margin-bottom:25px;
  border:1px solid var(--fut-primary-200);
  border-radius:20px;
  color:var(--fut-primary-700);
  background:linear-gradient(145deg,#fff,var(--fut-primary-50));
  box-shadow:0 16px 32px rgba(14,165,233,.14);
  font-size:1.35rem;
}
.fut-contact-mail-card strong { display:block;margin-bottom:7px;font-size:1.45rem; }
.fut-contact-mail-card p { margin:0;color:var(--fut-text-muted);line-height:1.75; }
.fut-contact-float {
  position:absolute;z-index:4;
  padding:13px 17px;
  border:1px solid rgba(125,211,252,.62);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 50px rgba(15,23,42,.12);
  backdrop-filter:blur(15px);
  font-size:.82rem;font-weight:850;
}
.fut-contact-float--one { right:-2px;top:95px;transform:rotate(5deg); }
.fut-contact-float--two { left:-8px;bottom:70px;transform:rotate(-5deg); }

/* Contact workspace */
.fut-contact-main { padding:clamp(70px,8vw,105px) 0; }
.fut-contact-workspace {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:24px;
  align-items:start;
}
.fut-contact-form-card,
.fut-contact-side {
  border:1px solid var(--contact-line);
  border-radius:26px;
  background:var(--fut-surface);
  box-shadow:var(--fut-shadow-sm);
}
.fut-contact-form-card { padding:clamp(28px,4vw,46px); }
.fut-contact-form-heading { margin-bottom:30px; }
.fut-contact-form-heading h2 { margin:0 0 9px; }
.fut-contact-form-heading p { margin:0;color:var(--fut-text-muted);line-height:1.75; }

/* Real client-side email form */
.fut-contact-form {
  display:grid;
  gap:18px;
}
.fut-contact-form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.fut-contact-field { display:grid;gap:8px; }
.fut-contact-field label {
  color:var(--fut-text);
  font-size:.84rem;
  font-weight:800;
}
.fut-contact-field input,
.fut-contact-field textarea {
  width:100%;
  border:1px solid var(--fut-border-strong);
  border-radius:14px;
  color:var(--fut-text);
  background:var(--fut-surface-soft);
  padding:13px 15px;
  outline:none;
  transition:border-color var(--fut-fast),box-shadow var(--fut-fast),background var(--fut-fast);
}
.fut-contact-field input { min-height:48px; }
.fut-contact-field textarea { min-height:155px;resize:vertical;line-height:1.65; }
.fut-contact-field input:hover,.fut-contact-field textarea:hover { border-color:var(--fut-primary-300); }
.fut-contact-field input:focus,.fut-contact-field textarea:focus {
  border-color:var(--fut-primary-500);
  background:var(--fut-surface);
  box-shadow:0 0 0 4px rgba(14,165,233,.10);
}
.fut-contact-form-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:3px;
}
.fut-contact-form-note {
  margin:0;
  color:var(--fut-text-muted);
  font-size:.84rem;
  line-height:1.65;
}
.fut-contact-status {
  display:none;
  padding:12px 14px;
  border:1px solid var(--fut-primary-200);
  border-radius:13px;
  color:var(--fut-primary-800);
  background:var(--fut-primary-50);
  font-size:.88rem;
  line-height:1.6;
}
.fut-contact-status.is-visible { display:block; }

/* Side information */
.fut-contact-side { padding:10px; }
.fut-contact-info {
  padding:23px;
  border-radius:18px;
}
.fut-contact-info + .fut-contact-info { border-top:1px solid var(--contact-line); }
.fut-contact-info-number {
  display:grid;place-items:center;
  width:35px;height:35px;
  margin-bottom:15px;
  border-radius:11px;
  color:var(--fut-primary-700);
  background:var(--fut-primary-50);
  font-size:.75rem;font-weight:900;
}
.fut-contact-info h3 { margin:0 0 7px;font-size:1.1rem; }
.fut-contact-info p { margin:0;color:var(--fut-text-muted);line-height:1.72; }

/* Guidance */
.fut-contact-guidance {
  padding:clamp(70px,8vw,105px) 0;
  background:var(--fut-page);
}
.fut-contact-guidance-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.fut-contact-guidance-card {
  padding:27px;
  border:1px solid var(--contact-line);
  border-radius:21px;
  background:var(--fut-surface);
  box-shadow:var(--fut-shadow-xs);
}
.fut-contact-guidance-card > span {
  display:grid;place-items:center;
  width:38px;height:38px;
  margin-bottom:18px;
  border-radius:12px;
  color:var(--fut-primary-700);
  background:var(--fut-primary-50);
  font-weight:900;
}
.fut-contact-guidance-card h3 { margin:0 0 8px;font-size:1.12rem; }
.fut-contact-guidance-card p { margin:0;color:var(--fut-text-muted);line-height:1.75; }

/* FAQ */
.fut-contact-faq { padding:clamp(70px,8vw,105px) 0; }
.fut-contact-faq-list { max-width:900px;margin:0 auto; }
.fut-contact-faq-item {
  padding:25px 0;
  border-top:1px solid var(--contact-line);
}
.fut-contact-faq-item:last-child { border-bottom:1px solid var(--contact-line); }
.fut-contact-faq-item h3 { margin:0 0 8px;font-size:1.15rem; }
.fut-contact-faq-item p { margin:0;color:var(--fut-text-muted);line-height:1.8; }

/* CTA */
.fut-contact-cta-section { padding:0 0 90px; }
.fut-contact-cta {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:clamp(34px,5vw,58px);
  overflow:hidden;
  border-radius:30px;
  color:#fff;
  background:
    radial-gradient(360px 260px at 88% 10%,rgba(255,255,255,.17),transparent 70%),
    linear-gradient(135deg,#063b66,#075f9b 48%,#0ea5e9);
  box-shadow:0 30px 80px rgba(3,105,161,.22);
}
.fut-contact-cta h2 { max-width:720px;margin:0 0 10px;color:#fff; }
.fut-contact-cta p { max-width:700px;margin:0;color:rgba(255,255,255,.82); }

/* Dark mode */
html.fut-dark .fut-contact-hero,
html[data-theme="dark"] .fut-contact-hero {
  background:
    radial-gradient(680px 500px at 82% 22%,rgba(14,165,233,.10),transparent 68%),
    radial-gradient(520px 420px at 5% 2%,rgba(56,189,248,.06),transparent 70%),
    var(--fut-page);
}
html.fut-dark .fut-contact-trust > div,
html.fut-dark .fut-contact-float,
html[data-theme="dark"] .fut-contact-trust > div,
html[data-theme="dark"] .fut-contact-float {
  border-color:#294a64;
  background:rgba(14,34,53,.88);
  box-shadow:0 22px 50px rgba(0,0,0,.28);
}
html.fut-dark .fut-contact-mail-card,
html[data-theme="dark"] .fut-contact-mail-card {
  border-color:#315773;
  background:linear-gradient(145deg,#122a43,#0b1c2e);
  box-shadow:0 40px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.045);
}
html.fut-dark .fut-contact-form-card,
html.fut-dark .fut-contact-side,
html.fut-dark .fut-contact-guidance-card,
html[data-theme="dark"] .fut-contact-form-card,
html[data-theme="dark"] .fut-contact-side,
html[data-theme="dark"] .fut-contact-guidance-card {
  border-color:#294a64;
  background:linear-gradient(145deg,#10243a,#0c1d30);
  box-shadow:0 16px 42px rgba(0,0,0,.22);
}
html.fut-dark .fut-contact-field input,
html.fut-dark .fut-contact-field textarea,
html[data-theme="dark"] .fut-contact-field input,
html[data-theme="dark"] .fut-contact-field textarea {
  border-color:#315773;
  background:#0b1c2e;
}
html.fut-dark .fut-contact-field input:focus,
html.fut-dark .fut-contact-field textarea:focus,
html[data-theme="dark"] .fut-contact-field input:focus,
html[data-theme="dark"] .fut-contact-field textarea:focus {
  background:#10263b;
  border-color:#38bdf8;
}
html.fut-dark .fut-contact-status,
html[data-theme="dark"] .fut-contact-status {
  border-color:#315c78;
  color:#a9dfff;
  background:#0d2943;
}

@media (max-width:950px) {
  .fut-contact-hero-grid,.fut-contact-workspace { grid-template-columns:1fr; }
  .fut-contact-hero-visual { min-height:410px; }
  .fut-contact-guidance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .fut-contact-hero { padding-top:58px !important; }
  .fut-contact-hero h1 { font-size:clamp(2.45rem,13vw,3.8rem); }
  .fut-contact-hero-visual { min-height:350px; }
  .fut-contact-mail-card { transform:none; }
  .fut-contact-visual-orbit { width:300px;height:300px; }
  .fut-contact-float--one { right:0;top:35px; }
  .fut-contact-float--two { left:0;bottom:35px; }
  .fut-contact-form-row,.fut-contact-guidance-grid { grid-template-columns:1fr; }
  .fut-contact-cta { align-items:flex-start;flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  .fut-contact-mail-card { transform:none; }
}
