:root {
	--bg: #f7f9fc;
	--card: #ffffff;
	--muted: #6b7280;
	--accent: #2563eb;
	--accent-600: #1e40af;
	--success: #16a34a;
	--danger: #dc2626;
	--radius: 10px;
	--max-width: 980px;
	--pad: 18px;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; padding:32px; background:var(--bg); color:#0f172a; -webkit-font-smoothing:antialiased;
  font-family: inherit; line-height:1.45; -webkit-text-size-adjust:100%;
  background-image: url('background.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
body::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('file:///C:/Users/acer%2036/link%20sanpio/background.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
body.bg-fallback::before{ opacity: 1 }

.container{
	max-width:var(--max-width); margin:0 auto; padding:var(--pad);
	position: relative;
	z-index: 1;
}

/* Page header and footer */
.page-header{
	background: linear-gradient(180deg, #000000 0%, #0b0b0b 100%);
	color: #fff; padding:36px 0 28px; margin-bottom:18px; position:relative;
	z-index: 100;
}
.page-header .container{ text-align:center }
.page-header h1{ color:#fff; margin-bottom:6px; font-size:1.35rem }
.page-header h2{ color:rgba(255,255,255,0.85); font-weight:500; font-size:1rem }

/* Logo in header */
.logo-container{ display:flex; justify-content:center; align-items:center; margin-bottom:12px }
.site-logo{ display:block; width:140px; max-width:33%; height:auto; border-radius:8px; box-shadow:0 6px 20px rgba(2,6,23,0.28); background:rgba(255,255,255,0.03); padding:6px }


/* Form area sits on a white card that slightly overlaps the header for a mixed look */
.form-area{ background: linear-gradient(180deg, rgba(250,250,251,0.6), rgba(255,255,255,0.8)); padding:0 0 40px; position: relative; z-index: 1; }
.form-card{ max-width:900px; margin: -32px auto 32px; background:var(--card); border-radius:14px; padding:26px; box-shadow: 0 18px 40px rgba(2,6,23,0.08); border:1px solid rgba(4,17,36,0.04) }

.page-footer{ background: #050505; color: #e6eef8; padding:18px 0; margin-top:28px; position: relative; z-index: 1; }
.page-footer .container{ text-align:center; font-size:0.92rem }

/* Header navigation */
.site-nav{ display:flex; justify-content:center; gap:18px; align-items:center; margin-top:12px }
.site-nav a{ color:rgba(255,255,255,0.9); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600 }
.site-nav a:hover, .site-nav a:focus{ background:rgba(255,255,255,0.04); outline:none }
.nav-cta{ background:linear-gradient(90deg,var(--accent),var(--accent-600)); box-shadow:0 8px 26px rgba(37,99,235,0.12); color:#fff }
.nav-cta:hover{ filter:brightness(.95) }

/* Sticky header behavior */
.page-header.header-sticky{ position:sticky; top:0; z-index:800; box-shadow:0 6px 18px rgba(2,6,23,0.12) }

/* Footer layout */
.footer-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:start }
.footer-grid h4{ margin:0 0 8px 0; color: #fff }
.footer-grid p, .footer-grid a{ color: rgba(230,238,248,0.88); font-size:0.92rem }
.footer-small{ margin-top:12px; font-size:0.86rem; color:rgba(230,238,248,0.7) }

/* Back to top */
.back-top{ position:fixed; right:18px; bottom:78px; background:var(--accent); color:#fff; padding:10px 12px; border-radius:999px; box-shadow:0 8px 30px rgba(2,6,23,0.18); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:1200; opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease }
.back-top.show{ opacity:1; transform:translateY(0) }
.back-top:focus{ outline:none; box-shadow:0 0 0 6px rgba(37,99,235,0.08) }

@media (max-width:720px){
	.footer-grid{ grid-template-columns:1fr; text-align:center }
	.site-nav{ gap:10px; flex-wrap:wrap }
}

/* keep generic form styles but prefer .form-card > form structure */
form{
	background: transparent; border:0; padding:0; width:100%;
}

h1, h2, h3, h4{ margin:0 0 12px 0; color:#0b1220; font-weight:600 }
h1{ font-size:1.25rem; margin-bottom:6px }
h2{ font-size:1rem; color:var(--muted); margin-bottom:18px }
h3{ font-size:0.98rem; margin-top:12px }
h4{ font-size:0.92rem; margin-top:10px }

.field{
	margin-bottom:12px; display:block;
}
label{ display:block; font-size:0.9rem; color:var(--muted); margin-bottom:6px }

input[type="text"], input[type="tel"], input[type="date"], input[type="number"], select, textarea{
	appearance:none; border:1px solid #e6e9ee; background: #fff; padding:10px 12px; border-radius:8px;
	width:100%; font-size:0.95rem; color:#041124; transition:box-shadow .15s ease, border-color .15s ease;
}

input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,0.08) }

.radio-group, .checkbox-group{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.radio-group input, .checkbox-group input{ margin-right:6px }
.radio-group label, .checkbox-group label{ margin:0; font-size:0.92rem; color:#243044 }

.small{ font-size:0.88rem; color:var(--muted) }

.inline-pair{ display:flex; gap:10px }
.inline-pair > *{ flex:1 }

button[type="submit"], button{
	display:inline-block; background:var(--accent); color:#fff; border:none; padding:10px 16px; font-size:0.98rem;
	border-radius:8px; cursor:pointer; transition:background .12s ease, transform .06s ease; box-shadow: 0 6px 14px rgba(37,99,235,0.12);
}
button[type="submit"]:hover{ background:var(--accent-600); transform:translateY(-1px) }

.muted-note{ color:var(--muted); font-size:0.88rem }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

.help{ font-size:0.86rem; color:var(--muted); margin-top:6px }

.error{ border-color:var(--danger) !important }
.success{ border-color:var(--success) !important }

/* Responsive */
@media (max-width:820px){
	.grid-2{ grid-template-columns:1fr }
	body{ padding:20px }
	form{ padding:18px }
}

@media (max-width:420px){
	:root{ --pad:12px }
	h1{ font-size:1.05rem }
	button{ width:100% }
}

/* UI / UX enhancements */
.form-progress{ margin:0 0 16px 0; padding:12px 4px; border-radius:10px; background:linear-gradient(90deg, rgba(37,99,235,0.06), rgba(2,6,23,0.02)); }
.progress-track{ height:10px; background:rgba(2,6,23,0.06); border-radius:999px; overflow:hidden }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-600)); transition:width .4s cubic-bezier(.2,.9,.2,1) }
.progress-meta{ font-size:0.86rem; color:var(--muted); margin-top:8px; text-align:right }

label.required::after{ content:' *'; color:var(--danger); margin-left:3px; font-weight:600 }

.field{ margin-bottom:14px }
.field .help{ margin-top:6px }

.error-message{ color:var(--danger); font-size:0.85rem; margin-top:6px }

/* subtle focus ring for actionable inputs */
input:focus, textarea:focus, select:focus{ box-shadow:0 6px 20px rgba(37,99,235,0.08), 0 0 0 3px rgba(37,99,235,0.06) }

/* two-column responsive grouping helper already exists in .grid-2; add spacing for labels inside grid */
.grid-2 label{ margin-top:0 }

/* small helper for section headings inside card */
.form-card h3{ background:linear-gradient(90deg, rgba(37,99,235,0.04), rgba(2,6,23,0.01)); padding:10px 12px; border-radius:8px; margin-top:18px }

/* toast like submission message */
.toast{
	position:fixed; right:18px; bottom:18px; background:#0b1220; color:#fff; padding:10px 14px; border-radius:8px; box-shadow:0 10px 30px rgba(2,6,23,0.2); z-index:1200; opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease
}
.toast.show{ opacity:1; transform:translateY(0) }

/* Step indicator / breadcrumb */
.step-indicator{ display:flex; justify-content:center; align-items:center; gap:12px; margin:0 0 24px 0; flex-wrap:wrap }
.step{ display:flex; align-items:center; gap:8px; font-size:0.92rem; color:var(--muted) }
.step-number{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:rgba(2,6,23,0.06); border:2px solid rgba(2,6,23,0.12); color:var(--muted); font-weight:600 }
.step.active .step-number{ background:var(--accent); border-color:var(--accent); color:#fff }
.step.active .step-label{ color:#0b1220; font-weight:600 }
.step-label{ color:var(--muted) }
.step-arrow{ color:var(--muted); font-size:1.1rem; margin:0 4px }
.step-arrow:last-child{ display:none }

/* Page fade-in animation */
body{ animation:fadeIn .25s ease-out; transition:opacity .25s ease, transform .25s ease }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } }

/* Card entrance animation */
.form-card{ animation:slideIn .4s cubic-bezier(.2,.9,.2,1) }
@keyframes slideIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } }

/* Fly-down animations for form elements */
@keyframes flyDown{ 
  from{ opacity:0; transform:translateY(-20px) }
  to{ opacity:1; transform:translateY(0) }
}
.form-field-animate{
  animation: flyDown .6s cubic-bezier(.25,.46,.45,.94) backwards;
}
/* Stagger animation delays for cascading effect */
.form-field-animate:nth-child(1){ animation-delay:.1s }
.form-field-animate:nth-child(2){ animation-delay:.15s }
.form-field-animate:nth-child(3){ animation-delay:.2s }
.form-field-animate:nth-child(4){ animation-delay:.25s }
.form-field-animate:nth-child(5){ animation-delay:.3s }
.form-field-animate:nth-child(6){ animation-delay:.35s }
.form-field-animate:nth-child(7){ animation-delay:.4s }
.form-field-animate:nth-child(8){ animation-delay:.45s }
.form-field-animate:nth-child(n+9){ animation-delay:.5s }

/* Utility */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap }

/* Button-like anchor (.btn) */
.btn, a.btn{
	display:inline-block;
	text-decoration:none;
	background:var(--accent);
	color:#fff;
	padding:10px 16px;
	border-radius:8px;
	border: none;
	box-shadow: 0 6px 14px rgba(37,99,235,0.12);
	transition:background .12s ease, transform .06s ease;
}
.btn:hover, a.btn:hover{ background:var(--accent-600); transform:translateY(-1px) }
.btn:focus, a.btn:focus{ outline:none; box-shadow:0 0 0 4px rgba(37,99,235,0.12) }