/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a5f;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --white: #ffffff;
}

html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--gray-900); background: var(--white); }

/* ── Layout ── */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media(min-width:640px){ .container{ padding: 0 1.5rem; } }
@media(min-width:1024px){ .container{ padding: 0 2rem; } }

/* ── Animations ── */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(30px); }  to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft  { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(30px);  } to { opacity:1; transform:translateX(0); } }
@keyframes slideDown   { from { opacity:0; transform:translateY(-100px);}  to { opacity:1; transform:translateY(0); } }
@keyframes scrollBob   { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }

.anim-slide-down  { animation: slideDown   0.5s ease forwards; }
.anim-fade-left   { animation: fadeInLeft  0.8s ease 0.2s both; }
.anim-fade-left-d { animation: fadeInLeft  0.8s ease 0.4s both; }
.anim-fade-left-e { animation: fadeInLeft  0.8s ease 0.6s both; }
.anim-fade-right  { animation: fadeInRight 0.8s ease 0.4s both; }

.reveal       { opacity:0; transform:translateY(30px);   transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-left  { opacity:0; transform:translateX(-30px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-right { opacity:0; transform:translateX(30px);   transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }

.stagger-1 { transition-delay: 0s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.2s; }

/* ── Header ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(4px);
  transition: box-shadow 0.3s;
}
header.scrolled { background: var(--white); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:80px; }

.logo img { height:48px; width:auto; cursor:pointer; transition:transform 0.2s; }
.logo img:hover { transform:scale(1.05); }

nav.desktop { display:flex; align-items:center; gap:2rem; }
nav.desktop button {
  background:none; border:none; cursor:pointer;
  color: var(--gray-700); font-size:1.125rem; font-weight:500;
  position:relative; padding-bottom:2px; transition:color 0.2s;
}
nav.desktop button::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--blue-600); transition:width 0.3s;
}
nav.desktop button:hover { color:var(--blue-600); }
nav.desktop button:hover::after { width:100%; }

.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; border-radius:8px; }
.hamburger:hover { background:var(--gray-100); }
.hamburger svg { width:24px; height:24px; stroke:var(--gray-700); }

nav.mobile { display:none; flex-direction:column; padding:1rem 0; border-top:1px solid var(--gray-200); }
nav.mobile.open { display:flex; }
nav.mobile button {
  background:none; border:none; cursor:pointer; text-align:left;
  width:100%; padding:0.75rem 1rem; font-size:1rem; font-weight:500;
  color:var(--gray-700); transition:background 0.2s, color 0.2s;
}
nav.mobile button:hover { background:var(--blue-50); color:var(--blue-600); }

@media(max-width:767px){ nav.desktop{display:none;} .hamburger{display:block;} }

/* ── Hero ── */
#hero {
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding-top:80px;
  background-image: url('assets/images/hero-bg.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(30,58,95,0.95), rgba(30,64,175,0.9), rgba(30,58,95,0.95));
}
.hero-content { position:relative; z-index:10; width:100%;padding: 2rem 1rem;}
.hero-flex { display:flex; flex-direction:column; align-items:center; gap:3rem; }
@media(min-width:1024px){ .hero-flex{ flex-direction:row; align-items:center; gap:4rem; } #hero{ padding-top:0; } }

.hero-text { width:100%; }
@media(min-width:1024px){ .hero-text{ width:60%; } }
.hero-text h1 { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; color:var(--white); line-height:1.1; margin-bottom:1.5rem; }
.hero-text p  { font-size:clamp(1.1rem,2.5vw,1.4rem); color:#e5e7eb; margin-bottom:2.5rem; max-width:40rem; line-height:1.6; }

.btn-hero {
  display:inline-block; background:var(--blue-600); color:var(--white);
  font-weight:700; font-size:1.125rem; padding:1rem 2.5rem;
  border-radius:9999px; border:none; cursor:pointer;
  box-shadow:0 20px 40px rgba(37,99,235,0.4);
  transition:background 0.3s, transform 0.2s, box-shadow 0.3s;
}
.btn-hero:hover  { background:var(--blue-700); transform:scale(1.05); box-shadow:0 20px 40px rgba(37,99,235,0.6); }
.btn-hero:active { transform:scale(0.97); }

.hero-image-wrap { width:100%; }
@media(min-width:1024px){ .hero-image-wrap{ width:60%; } }
.hero-image-box {
  border-radius:1rem; overflow:hidden;
  border:4px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(4px);
  box-shadow:0 25px 60px rgba(0,0,0,0.4);
}
@media(min-width:1024px){ .hero-image-box img{ height:600px !important; } }
.hero-image-box img { width:100%; height:auto; display:block; transition:transform 0.7s ease; object-fit:cover; }
.hero-image-box:hover img { transform:scale(1.05); }

.scroll-indicator {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:24px; height:40px; border:2px solid white; border-radius:9999px;
  display:flex; align-items:flex-start; justify-content:center; padding:8px;
  animation: scrollBob 1.5s infinite;
}
.scroll-dot { width:4px; height:12px; background:white; border-radius:9999px; }

/* ── Services ── */
#services { padding:6rem 0; background:var(--gray-50); }
.section-header { text-align:center; margin-bottom:4rem; }
.section-header h2 { font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--gray-900); margin-bottom:1rem; }
.section-header p  { font-size:1.25rem; color:var(--gray-600); max-width:40rem; margin:0 auto; }

.category-block { position:relative; overflow:hidden; border-radius:1.5rem; box-shadow:0 25px 60px rgba(0,0,0,0.2); margin-bottom:5rem; }
.category-bg { position:absolute; inset:0; z-index:0; }
.category-bg img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease; }
.category-block:hover .category-bg img { transform:scale(1.05); }
.category-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,58,95,0.95),rgba(30,58,95,0.85),rgba(30,64,175,0.8)); }
.category-inner { position:relative; z-index:10; padding:3rem; }
@media(min-width:768px){ .category-inner{ padding:4rem; } }
@media(min-width:1024px){ .category-inner{ padding:5rem; } }
.category-header { margin-bottom:3rem; }
.category-header h2 { font-size:clamp(1.75rem,4vw,3rem); font-weight:800; color:var(--white); margin-bottom:1rem; }
.category-header p  { font-size:1.125rem; color:#bfdbfe; line-height:1.7; max-width:40rem; }

.services-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }

.service-card {
  background:var(--white); border-radius:0.75rem; padding:1.5rem;
  border:1px solid var(--gray-100); box-shadow:0 4px 16px rgba(0,0,0,0.07);
  display:flex; flex-direction:column;
  transition:transform 0.3s, box-shadow 0.3s;
}
.service-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.15); }
.service-icon { width:56px; height:56px; background:var(--blue-50); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.service-icon svg { width:28px; height:28px; stroke:var(--blue-600); }
.service-card h4 { font-size:1.125rem; font-weight:700; color:var(--gray-900); margin-bottom:0.75rem; }
.service-card p  { font-size:0.875rem; color:var(--gray-600); line-height:1.6; flex:1; }

/* ── Contact ── */
#contact { padding:5rem 0; background:linear-gradient(to bottom, var(--white), var(--gray-50)); }
.contact-grid { display:grid; grid-template-columns:1fr; gap:3rem; max-width:1024px; margin:0 auto; }
@media(min-width:1024px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }

.form-card { background:var(--white); border-radius:0.75rem; box-shadow:0 8px 30px rgba(0,0,0,0.08); padding:2rem; }
.form-group { margin-bottom:1.5rem; }
label { display:block; font-size:0.875rem; font-weight:600; color:var(--gray-700); margin-bottom:0.5rem; }
input, textarea {
  width:100%; padding:0.75rem 1rem; border:1px solid var(--gray-300); border-radius:0.5rem;
  font-size:1rem; color:var(--gray-900); background:var(--white);
  outline:none; transition:border-color 0.2s, box-shadow 0.2s; font-family:inherit;
}
input:focus, textarea:focus { border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
textarea { resize:none; }

.btn-submit {
  width:100%; background:var(--blue-600); color:var(--white); font-weight:700;
  padding:1rem; border:none; border-radius:0.5rem; cursor:pointer; font-size:1rem;
  font-family:inherit; display:flex; align-items:center; justify-content:center; gap:0.5rem;
  box-shadow:0 4px 16px rgba(37,99,235,0.3); transition:background 0.3s, transform 0.2s;
}
.btn-submit:hover:not(:disabled) { background:var(--blue-700); transform:scale(1.02); }
.btn-submit:active { transform:scale(0.98); }
.btn-submit:disabled { opacity:0.5; cursor:not-allowed; }
.btn-submit svg { width:20px; height:20px; stroke:white; }

.info-card { background:var(--white); border-radius:0.75rem; box-shadow:0 8px 30px rgba(0,0,0,0.08); padding:2rem; margin-bottom:2rem; }
.info-card h3 { font-size:1.5rem; font-weight:700; color:var(--gray-900); margin-bottom:1.5rem; }
.info-row { display:flex; align-items:flex-start; margin-bottom:1.5rem; }
.info-row:last-child { margin-bottom:0; }
.info-icon { width:48px; height:48px; min-width:48px; background:var(--blue-100); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; margin-right:1rem; }
.info-icon svg { width:24px; height:24px; stroke:var(--blue-600); }
.info-text p:first-child { font-weight:600; color:var(--gray-900); margin-bottom:0.25rem; }
.info-text a, .info-text p:last-child { color:var(--gray-600); font-size:0.95rem; line-height:1.5; }
.info-text a { color:var(--blue-600); text-decoration:none; display:block; }
.info-text a:hover { color:var(--blue-700); text-decoration:underline; }

.why-card { background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); border-radius:0.75rem; box-shadow:0 8px 30px rgba(37,99,235,0.3); padding:2rem; color:var(--white); }
.why-card h3 { font-size:1.5rem; font-weight:700; margin-bottom:1.25rem; }
.why-item { display:flex; align-items:flex-start; margin-bottom:1rem; }
.why-item:last-child { margin-bottom:0; }
.why-item svg { width:20px; height:20px; stroke:white; margin-right:0.75rem; margin-top:2px; flex-shrink:0; }

/* ── Footer ── */
footer { background:var(--gray-900); color:var(--white); padding:3rem 0; }
.footer-inner { display:flex; flex-direction:column; align-items:center; }
.footer-inner img { height:80px; width:auto; border-radius:0.5rem; margin-bottom:1.5rem; }
.footer-inner > p { color:var(--gray-400); margin-bottom:1rem; }
.footer-meta { display:flex; flex-direction:column; align-items:center; gap:0.5rem; font-size:0.875rem; color:var(--gray-500); }
.footer-meta a { color:var(--gray-500); text-decoration:none; transition:color 0.2s; }
.footer-meta a:hover { color:#60a5fa; }

/* ── Toast ── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.75rem; }
.toast { min-width:280px; max-width:380px; padding:1rem 1.25rem; border-radius:0.75rem; box-shadow:0 8px 30px rgba(0,0,0,0.2); font-size:0.9rem; line-height:1.4; color:var(--white); animation: fadeInUp 0.3s ease both; background:var(--gray-900); }
.toast.error { background:#dc2626; }
.toast-title { font-weight:700; margin-bottom:0.25rem; }
.toast-desc  { opacity:0.9; }