/* ─── TOKENS ─── */
:root {
  --bg:        #eef3fc;
  --bg-alt:    #f7f9ff;
  --card:      #ffffff;
  --card-b:    rgba(26, 111, 255, 0.12);
  --card-sh:   0 2px 24px rgba(26, 111, 255, 0.07);
  --card-sh-h: 0 8px 40px rgba(26, 111, 255, 0.14);
  --blue:      #1a6fff;
  --blue-dk:   #0d52d6;
  --blue-lt:   #4d8aff;
  --blue-pale: #dce9ff;
  --cyan:      #0099c8;
  --grad:      linear-gradient(135deg, #1a6fff 0%, #0099c8 100%);
  --wa:        #25D366;
  --text:      #0d1f3c;
  --text2:     #1e3a5f;
  --muted:     #567294;
  --dark:      #081628;
  --white:     #ffffff;
  --r:         16px;
  --nav-h:     72px;
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column;
  animation: pageIn 0.4s ease both;
}
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
img { max-width:100%; display:block; }
a { color:inherit; }
::selection { background:rgba(26,111,255,0.18); color:var(--blue-dk); }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(26,111,255,0.28); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--blue); }

/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
.site-nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(26,111,255,0.1);
  box-shadow:0 1px 24px rgba(26,111,255,0.07);
}
.nav-inner {
  max-width:1440px; margin:0 auto; height:100%;
  display:flex; align-items:center; padding:0 2rem; gap:1rem;
}
.nav-logo { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.nav-logo img { height:44px; width:auto; display:block; border-radius:8px; box-shadow:0 2px 12px rgba(8,22,40,0.18); }

.nav-links { display:flex; list-style:none; gap:2px; flex:1; justify-content:center; flex-wrap:wrap; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:0.8rem; font-weight:500; padding:0.45rem 0.75rem; border-radius:9px; transition:color 0.2s,background 0.2s; white-space:nowrap; }
.nav-links a:hover  { color:var(--blue); background:var(--blue-pale); }
.nav-links a.active { color:var(--blue); background:var(--blue-pale); font-weight:600; }

.nav-wa {
  font-size:0.82rem; font-weight:700; color:var(--wa);
  text-decoration:none; white-space:nowrap;
  border:1px solid rgba(37,211,102,0.3); padding:0.45rem 1rem; border-radius:9px;
  transition:background 0.2s; flex-shrink:0;
  display:inline-flex; align-items:center; gap:0.4rem;
}
.nav-wa:hover { background:rgba(37,211,102,0.09); }
.nav-wa img { flex-shrink:0; }

.nav-cta {
  font-size:0.82rem; font-weight:700; color:var(--white); text-decoration:none; white-space:nowrap;
  background:var(--grad); padding:0.5rem 1.2rem; border-radius:9px;
  transition:opacity 0.2s,box-shadow 0.2s; box-shadow:0 2px 14px rgba(26,111,255,0.3); flex-shrink:0;
}
.nav-cta:hover { opacity:0.9; box-shadow:0 4px 22px rgba(26,111,255,0.45); }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform 0.3s,opacity 0.3s; }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ══════════════════════════════════
   HERO SPLIT
══════════════════════════════════ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 4rem) 2rem 4rem;
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse 70% 80% at 0% 50%,rgba(26,111,255,0.06) 0%,transparent 60%),var(--bg);
}
.hero::before {
  content:''; position:absolute; top:0; right:0; width:50%; height:100%;
  background:radial-gradient(ellipse 80% 70% at 80% 40%,rgba(26,111,255,0.09) 0%,transparent 70%); pointer-events:none;
}
.hero-content { max-width:1440px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 420px; gap:4rem; align-items:center; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:0.6rem; background:var(--blue-pale); border:1px solid rgba(26,111,255,0.22); color:var(--blue); font-size:0.74rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; padding:0.4rem 1rem; border-radius:100px; margin-bottom:1.5rem; }
.hero-badge-dot { width:7px; height:7px; background:var(--blue); border-radius:50%; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.35;transform:scale(1.7);} }

.hero h1 { font-size:clamp(2.5rem,5.5vw,4.8rem); font-weight:900; line-height:1.05; letter-spacing:-0.04em; color:var(--text); margin-bottom:1.25rem; }
.hero h1 .grad { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:1.05rem; color:var(--muted); max-width:540px; line-height:1.75; margin-bottom:2.25rem; }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }

.btn-primary { display:inline-flex; align-items:center; gap:0.5rem; background:var(--grad); color:var(--white); text-decoration:none; font-weight:700; font-size:0.95rem; padding:0.9rem 2.1rem; border-radius:12px; transition:transform 0.25s,box-shadow 0.25s; box-shadow:0 4px 24px rgba(26,111,255,0.3); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(26,111,255,0.45); }
.btn-ghost { display:inline-flex; align-items:center; gap:0.5rem; background:transparent; border:1.5px solid var(--card-b); color:var(--text); text-decoration:none; font-weight:600; font-size:0.95rem; padding:0.9rem 2.1rem; border-radius:12px; transition:border-color 0.25s,background 0.25s,color 0.25s; }
.btn-ghost:hover { border-color:var(--blue); background:var(--blue-pale); color:var(--blue-dk); }

.hero-stats { display:flex; gap:2.5rem; flex-wrap:wrap; padding-top:2.5rem; border-top:1px solid var(--card-b); }
.stat-num { font-size:2rem; font-weight:900; color:var(--text); line-height:1; }
.stat-num .c { color:var(--blue); }
.stat-lbl { font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:0.3rem; }

/* Hero right panel */
.hero-panel { background:var(--grad); border-radius:24px; padding:2.5rem; color:white; box-shadow:0 20px 60px rgba(26,111,255,0.28); position:relative; overflow:hidden; }
.hero-panel::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:rgba(255,255,255,0.07); border-radius:50%; }
.hero-panel::after  { content:''; position:absolute; bottom:-30px; left:-30px; width:150px; height:150px; background:rgba(0,0,0,0.08); border-radius:50%; }
.hp-label { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; margin-bottom:1.5rem; position:relative; z-index:1; }
.hp-title { font-size:1.2rem; font-weight:800; margin-bottom:1.75rem; position:relative; z-index:1; }
.hp-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:0.85rem; position:relative; z-index:1; }
.hp-list li { display:flex; align-items:center; gap:0.75rem; font-size:0.9rem; font-weight:500; padding-bottom:0.85rem; border-bottom:1px solid rgba(255,255,255,0.12); }
.hp-list li:last-child { border-bottom:none; padding-bottom:0; }
.hp-ico { width:36px; height:36px; background:rgba(255,255,255,0.15); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.hp-tel { margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.2); position:relative; z-index:1; }
.hp-tel p { font-size:0.72rem; opacity:0.7; margin-bottom:0.5rem; text-transform:uppercase; letter-spacing:0.08em; }
.hp-tel a { display:flex; align-items:center; gap:0.5rem; font-size:1.1rem; font-weight:800; color:white; text-decoration:none; transition:opacity 0.2s; }
.hp-tel a:hover { opacity:0.85; }
.hp-wa { background:rgba(37,211,102,0.2) !important; border:1px solid rgba(37,211,102,0.4); border-radius:9px; padding:0.6rem 1rem; margin-top:0.75rem; font-size:0.9rem !important; justify-content:center; }

/* ══════════════════════════════════
   PAGE HEADER
══════════════════════════════════ */
.page-hero {
  padding:calc(var(--nav-h) + 3rem) 2rem 3rem; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(ellipse 80% 140% at 50% -20%,rgba(26,111,255,0.12) 0%,transparent 60%),var(--bg);
  border-bottom:1px solid var(--card-b);
}
.page-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(26,111,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(26,111,255,0.03) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at center,black 10%,transparent 68%); }
.page-hero > * { position:relative; z-index:1; }
.breadcrumb { display:inline-flex; align-items:center; gap:0.5rem; margin-bottom:1rem; font-size:0.78rem; color:var(--muted); }
.breadcrumb a { color:var(--blue-lt); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--blue-dk); }
.breadcrumb-sep { color:var(--card-b); }
.page-hero h1 { font-size:clamp(2rem,5vw,3.6rem); font-weight:900; letter-spacing:-0.035em; color:var(--text); margin-bottom:0.75rem; }
.page-hero p { font-size:1.05rem; color:var(--muted); max-width:580px; margin:0 auto; }

/* ══════════════════════════════════
   LAYOUT
══════════════════════════════════ */
.page-body { flex:1; }
.container    { max-width: 960px; margin:0 auto; padding:3.5rem 2rem; }
.container-lg { max-width:1200px; margin:0 auto; padding:3.5rem 2rem; }
.container-xl { max-width:1440px; margin:0 auto; padding:3.5rem 2rem; }
.sec-eyebrow { font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); margin-bottom:0.6rem; }
.sec-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; letter-spacing:-0.03em; color:var(--text); margin-bottom:0.5rem; }
.sec-sub { color:var(--muted); font-size:0.98rem; max-width:520px; margin-bottom:3rem; }

/* ══════════════════════════════════
   SERVICES GRID
══════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:1.25rem; }
.svc-card { background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:2rem; text-decoration:none; position:relative; overflow:hidden; box-shadow:var(--card-sh); transition:transform 0.28s,box-shadow 0.28s,border-color 0.28s; }
.svc-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform 0.35s; }
.svc-card:hover { transform:translateY(-5px); box-shadow:var(--card-sh-h); border-color:rgba(26,111,255,0.25); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-icon { width:52px; height:52px; background:var(--blue-pale); border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem; border:1px solid rgba(26,111,255,0.15); }
.svc-card h3 { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:0.45rem; }
.svc-card p  { font-size:0.85rem; color:var(--muted); line-height:1.65; }
.svc-link { display:flex; align-items:center; gap:0.35rem; font-size:0.8rem; font-weight:600; color:var(--blue); margin-top:1rem; text-decoration:none; transition:gap 0.2s; }
.svc-card:hover .svc-link { gap:0.65rem; }

/* ══════════════════════════════════
   WHY US
══════════════════════════════════ */
.why-section { background:var(--bg-alt); border-top:1px solid var(--card-b); border-bottom:1px solid var(--card-b); }
.why-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:1px; background:var(--card-b); border-radius:var(--r); overflow:hidden; margin-bottom:3.5rem; box-shadow:var(--card-sh); }
.why-stat { background:var(--card); padding:2rem 1.5rem; text-align:center; }
.why-stat-num { font-size:2.4rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:0.5rem; }
.why-stat-lbl { font-size:0.82rem; font-weight:600; color:var(--muted); line-height:1.4; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1.25rem; }
.why-card { background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:2rem; box-shadow:var(--card-sh); transition:transform 0.25s,box-shadow 0.25s; }
.why-card:hover { transform:translateY(-3px); box-shadow:var(--card-sh-h); }
.why-card-icon { width:48px; height:48px; background:var(--blue-pale); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem; }
.why-card h3 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:0.4rem; }
.why-card p  { font-size:0.85rem; color:var(--muted); line-height:1.65; }

/* ══════════════════════════════════
   CTA STRIP
══════════════════════════════════ */
.cta-strip { background:var(--grad); border-radius:24px; padding:3.5rem 2rem; text-align:center; margin:2rem 0; box-shadow:0 8px 40px rgba(26,111,255,0.22); position:relative; overflow:hidden; }
.cta-strip::before { content:''; position:absolute; top:-60px; right:-60px; width:250px; height:250px; background:rgba(255,255,255,0.06); border-radius:50%; }
.cta-strip::after  { content:''; position:absolute; bottom:-40px; left:-40px; width:180px; height:180px; background:rgba(0,0,0,0.07); border-radius:50%; }
.cta-strip > * { position:relative; z-index:1; }
.cta-strip h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:white; letter-spacing:-0.02em; margin-bottom:0.6rem; }
.cta-strip p  { color:rgba(255,255,255,0.82); margin-bottom:2rem; max-width:480px; margin-left:auto; margin-right:auto; }
.btn-white { display:inline-flex; align-items:center; gap:0.5rem; background:white; color:var(--blue-dk); text-decoration:none; font-weight:700; font-size:0.95rem; padding:0.9rem 2.1rem; border-radius:12px; transition:transform 0.25s,box-shadow 0.25s; box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.15); }
.btn-white-ghost { display:inline-flex; align-items:center; gap:0.5rem; background:transparent; border:1.5px solid rgba(255,255,255,0.5); color:white; text-decoration:none; font-weight:600; font-size:0.95rem; padding:0.9rem 2.1rem; border-radius:12px; transition:background 0.25s,border-color 0.25s; }
.btn-white-ghost:hover { background:rgba(255,255,255,0.1); border-color:white; }

/* ══════════════════════════════════
   CONTENT CARDS
══════════════════════════════════ */
.c-card { background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:2.5rem; margin-bottom:1.5rem; box-shadow:var(--card-sh); }
.c-card h2 { font-size:1.5rem; font-weight:800; color:var(--text); letter-spacing:-0.025em; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--card-b); }
.c-card h3 { font-size:1.1rem; font-weight:700; color:var(--blue-dk); margin:1.75rem 0 0.75rem; }
.c-card h4 { font-size:0.95rem; font-weight:700; color:var(--blue-lt); margin:1.25rem 0 0.5rem; }
.c-card p  { color:var(--muted); line-height:1.8; margin-bottom:0.9rem; }
.c-card p strong { color:var(--text); font-weight:600; }
.c-card ul, .c-card ol { padding-left:1.5rem; color:var(--muted); line-height:1.9; margin-bottom:0.9rem; }
.c-card li::marker { color:var(--blue); font-weight:700; }
.c-card img { border-radius:12px; margin:1.5rem auto; border:1px solid var(--card-b); box-shadow:var(--card-sh); }
.c-card hr { border:none; border-top:1px solid var(--card-b); margin:1.5rem 0; }
.badge-cat { display:inline-flex; align-items:center; gap:0.5rem; background:var(--blue-pale); border:1px solid rgba(26,111,255,0.22); color:var(--blue); font-size:0.78rem; font-weight:700; padding:0.4rem 1rem; border-radius:100px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1rem; }
.info-banner { background:#e8f4ff; border:1px solid rgba(26,111,255,0.18); border-radius:12px; padding:1.25rem 1.5rem; margin:1.25rem 0; }
.info-banner p { color:var(--text2); margin:0; }
.hl-box { background:var(--blue-pale); border-left:3px solid var(--blue); padding:1rem 1.5rem; border-radius:0 10px 10px 0; margin:1.25rem 0; }
.hl-box p { color:var(--text); margin:0; font-weight:500; }

/* ══════════════════════════════════
   CHECKLIST
══════════════════════════════════ */
.checklist { list-style:none; padding:0; }
.checklist li { display:flex; align-items:flex-start; gap:0.75rem; padding:0.55rem 0; border-bottom:1px solid rgba(26,111,255,0.06); color:var(--muted); font-size:0.92rem; line-height:1.6; }
.checklist li::before { content:'✓'; color:var(--blue); font-weight:800; flex-shrink:0; }
.checklist-title { font-size:1.05rem; font-weight:700; color:var(--text2); margin:1.75rem 0 0.75rem; }

/* ══════════════════════════════════
   DOC DOWNLOADS
══════════════════════════════════ */
.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:0.9rem; margin:1.25rem 0; }
.doc-link { display:flex; align-items:center; gap:1rem; background:var(--bg-alt); border:1px solid var(--card-b); border-radius:12px; padding:1.1rem 1.4rem; text-decoration:none; transition:transform 0.25s,border-color 0.25s,background 0.25s,box-shadow 0.25s; }
.doc-link:hover { transform:translateX(5px); border-color:rgba(26,111,255,0.3); background:var(--blue-pale); box-shadow:var(--card-sh); }
.doc-ico { width:42px; height:42px; background:var(--blue-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; border:1px solid rgba(26,111,255,0.15); }
.doc-txt { font-size:0.86rem; color:var(--text); font-weight:500; line-height:1.4; }
.doc-txt small { display:block; color:var(--muted); font-size:0.76rem; margin-top:0.15rem; }
.doc-img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:1.5rem; margin-top:1.5rem; }
.doc-img-item { text-align:center; }
.doc-img-item img { border-radius:10px; border:1px solid var(--card-b); box-shadow:var(--card-sh); width:100%; }
.doc-img-item span { display:block; font-size:0.78rem; font-weight:700; color:var(--muted); margin-top:0.5rem; letter-spacing:0.05em; text-transform:uppercase; }

/* ══════════════════════════════════
   CONTACT
══════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:300px 1fr; gap:1.5rem; align-items:start; }
.contact-info-card { background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:2rem; position:sticky; top:calc(var(--nav-h) + 1.5rem); box-shadow:var(--card-sh); }
.contact-info-card h3 { font-size:0.84rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); padding-bottom:1rem; border-bottom:1px solid var(--card-b); margin-bottom:1.5rem; }
.cinfo-item { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1.25rem; }
.cinfo-ico { width:36px; height:36px; background:var(--blue-pale); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; border:1px solid rgba(26,111,255,0.15); }
.cinfo-txt { font-size:0.86rem; line-height:1.5; }
.cinfo-txt strong { display:block; color:var(--text); font-weight:600; margin-bottom:0.15rem; }
.cinfo-txt span { color:var(--muted); display:block; }
.cinfo-txt a { color:var(--blue); text-decoration:none; }
.cinfo-txt a:hover { color:var(--blue-dk); text-decoration:underline; }
.cinfo-wa { background:rgba(37,211,102,0.08); border:1px solid rgba(37,211,102,0.25); border-radius:10px; padding:0.9rem 1rem; display:flex; align-items:center; gap:0.75rem; text-decoration:none; margin-top:0.5rem; transition:background 0.2s; }
.cinfo-wa:hover { background:rgba(37,211,102,0.15); }
.cinfo-wa span { font-size:0.88rem; font-weight:700; color:#1a9e4e; }

.contact-form-card { background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:2.5rem; box-shadow:var(--card-sh); }
.contact-form-card h2 { font-size:1.45rem; font-weight:800; color:var(--text); letter-spacing:-0.025em; margin-bottom:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:0.79rem; font-weight:600; color:var(--text); margin-bottom:0.45rem; }
.form-group label .req { color:var(--blue); }
.form-control { width:100%; background:var(--bg); border:1.5px solid var(--card-b); border-radius:10px; padding:0.75rem 1rem; color:var(--text); font-size:0.9rem; font-family:'Inter',sans-serif; outline:none; transition:border-color 0.2s,background 0.2s,box-shadow 0.2s; }
.form-control:focus { border-color:var(--blue); background:var(--white); box-shadow:0 0 0 3px rgba(26,111,255,0.1); }
.form-control::placeholder { color:rgba(86,114,148,0.5); }
textarea.form-control { resize:vertical; min-height:130px; }
.form-check { display:flex; align-items:flex-start; gap:0.75rem; margin:1.5rem 0; }
.form-check input[type="checkbox"] { width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--blue); cursor:pointer; }
.form-check label { font-size:0.82rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.form-check label a { color:var(--blue); }
.btn-submit { background:var(--grad); color:white; border:none; padding:0.9rem 2.5rem; border-radius:11px; font-size:0.95rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:transform 0.25s,box-shadow 0.25s; box-shadow:0 4px 20px rgba(26,111,255,0.28); }
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(26,111,255,0.42); }

/* ══════════════════════════════════
   MAP & VIDEO
══════════════════════════════════ */
.map-wrap { border-radius:16px; overflow:hidden; border:1px solid var(--card-b); box-shadow:var(--card-sh); margin-top:1.5rem; height:300px; }
.map-wrap iframe { width:100%; height:100%; border:none; display:block; }
.video-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:14px; border:1px solid var(--card-b); box-shadow:var(--card-sh); margin:1.5rem 0; }
.video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* ══════════════════════════════════
   FAB WhatsApp (mobile)
══════════════════════════════════ */
.fab-wa {
  display:none; position:fixed; bottom:1.5rem; right:1.5rem;
  width:58px; height:58px; background:var(--wa); border-radius:50%;
  align-items:center; justify-content:center; z-index:900;
  text-decoration:none; box-shadow:0 6px 24px rgba(37,211,102,0.45);
  transition:transform 0.2s,box-shadow 0.2s;
  animation:waPulse 3s ease-in-out infinite;
}
.fab-wa:hover { transform:scale(1.1); box-shadow:0 10px 36px rgba(37,211,102,0.6); }
@keyframes waPulse { 0%,100%{box-shadow:0 6px 24px rgba(37,211,102,0.45);}50%{box-shadow:0 6px 24px rgba(37,211,102,0.45),0 0 0 10px rgba(37,211,102,0.08);} }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer { background:var(--dark); border-top:3px solid var(--blue); padding:3.5rem 2rem 2rem; margin-top:auto; }
.footer-inner { max-width:1440px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; margin-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.footer-logo img { height:64px; width:auto; display:block; margin-bottom:0.9rem; border-radius:8px; }
.footer-brand > p { color:rgba(255,255,255,0.45); font-size:0.86rem; line-height:1.7; max-width:270px; }
.footer-col h4 { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
.footer-col ul a { color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.87rem; transition:color 0.2s; }
.footer-col ul a:hover { color:#5c9aff; }
.footer-col ul a.wa-link { color:rgba(37,211,102,0.75); }
.footer-col ul a.wa-link:hover { color:var(--wa); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; }
.footer-bottom p { color:rgba(255,255,255,0.35); font-size:0.8rem; }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { color:rgba(255,255,255,0.4); text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
.footer-legal a:hover { color:#5c9aff; }

/* ══════════════════════════════════
   COOKIE
══════════════════════════════════ */
.cookie-banner { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:9999; background:white; border:1px solid var(--card-b); border-radius:18px; padding:1.25rem 1.75rem; max-width:720px; width:calc(100% - 3rem); display:flex; align-items:center; gap:1.5rem; box-shadow:0 12px 50px rgba(26,111,255,0.15); transition:opacity 0.4s,transform 0.4s; }
.cookie-banner p { font-size:0.81rem; color:var(--muted); line-height:1.5; flex:1; }
.cookie-banner a { color:var(--blue); }
.btn-cookie { background:var(--grad); color:white; border:none; padding:0.6rem 1.5rem; border-radius:9px; font-size:0.84rem; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; flex-shrink:0; transition:opacity 0.2s; }
.btn-cookie:hover { opacity:0.9; }

/* ══════════════════════════════════
   PHOTO GRID
══════════════════════════════════ */
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.photo-grid img { width:100%; height:260px; object-fit:cover; border-radius:14px; border:1px solid var(--card-b); box-shadow:var(--card-sh); transition:transform 0.3s,box-shadow 0.3s; }
.photo-grid img:hover { transform:scale(1.02); box-shadow:var(--card-sh-h); }
@media(max-width:768px){ .photo-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .photo-grid { grid-template-columns:1fr; } }

/* WhatsApp icon in buttons */
.wa-ico { flex-shrink:0; vertical-align:middle; }

/* ══════════════════════════════════
   UTILITIES
══════════════════════════════════ */
.divider { height:1px; background:var(--card-b); margin:2rem 0; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:1080px) {
  .hero-content { grid-template-columns:1fr; }
  .hero-panel   { display:none; }
  .footer-top   { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-info-card { position:static; }
  .why-stats    { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  :root { --nav-h:62px; }
  .nav-links, .nav-cta, .nav-wa { display:none; }
  .nav-toggle { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); padding:1.5rem 2rem; border-bottom:1px solid var(--card-b); box-shadow:0 8px 30px rgba(26,111,255,0.08); z-index:998; gap:4px; }
  .nav-links.open a { font-size:0.9rem; padding:0.65rem 1rem; color:var(--text); }
  .fab-wa { display:flex; }
  .fab-wa.fab-up { bottom:5rem; }
  .cookie-banner { flex-direction:column; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:2rem; }
  .why-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .hero h1 { font-size:2.4rem; }
  .hero-ctas { flex-direction:column; }
  .btn-primary, .btn-ghost { justify-content:center; width:100%; }
  .cta-strip { padding:2.5rem 1rem; }
  .c-card, .contact-form-card { padding:1.25rem; }
  .hero-stats { gap:1.25rem; }
  .container, .container-lg, .container-xl { padding-left:1rem; padding-right:1rem; }
  .hero { padding-left:1rem; padding-right:1rem; }
  .page-hero { padding-left:1rem; padding-right:1rem; }
  .why-stat { padding:1.5rem 1rem; }
}

/* ══════════════════════════════════
   HERO PHOTO VARIANT
══════════════════════════════════ */
.hero-photo::before { display:none; }
.hero-photo .hero-badge { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); color:rgba(255,255,255,0.92); }
.hero-photo .hero-badge-dot { background:var(--wa); }
.hero-photo h1 { color:#fff; }
.hero-photo h1 .grad { background:linear-gradient(135deg,#5cb8ff 0%,var(--wa) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-photo .hero-sub { color:rgba(255,255,255,0.72); }
.hero-photo .stat-num { color:#fff; }
.hero-photo .stat-lbl { color:rgba(255,255,255,0.55); }
.hero-photo .hero-stats { border-top-color:rgba(255,255,255,0.12); }
.hero-photo .btn-ghost { border-color:rgba(255,255,255,0.35); color:#fff; }
.hero-photo .btn-ghost:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); }

/* ══════════════════════════════════
   STICKY CONTACT BAR
══════════════════════════════════ */
.sticky-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:950;
  background:rgba(8,22,40,0.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(26,111,255,0.22);
  display:none; align-items:center; justify-content:center; gap:0.9rem;
  padding:0.7rem 1.5rem;
  transform:translateY(100%); transition:transform 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -4px 30px rgba(0,0,0,0.25);
}
.sticky-bar.sb-visible { display:flex; }
.sticky-bar.sb-show { transform:translateY(0); }
.sticky-bar-text { color:rgba(255,255,255,0.5); font-size:0.8rem; white-space:nowrap; margin-right:0.3rem; }
.sticky-bar-phone {
  display:inline-flex; align-items:center; gap:0.45rem;
  background:var(--grad); color:#fff; text-decoration:none;
  font-weight:700; font-size:0.86rem; padding:0.55rem 1.3rem; border-radius:10px;
  transition:opacity 0.2s,transform 0.2s; white-space:nowrap;
}
.sticky-bar-phone:hover { opacity:0.88; transform:translateY(-1px); }
.sticky-bar-wa {
  display:inline-flex; align-items:center; gap:0.45rem;
  background:var(--wa); color:#fff; text-decoration:none;
  font-weight:700; font-size:0.86rem; padding:0.55rem 1.3rem; border-radius:10px;
  transition:opacity 0.2s,transform 0.2s; white-space:nowrap;
}
.sticky-bar-wa:hover { opacity:0.88; transform:translateY(-1px); }
.sticky-bar-close {
  margin-left:0.5rem; background:none; border:none; color:rgba(255,255,255,0.35);
  font-size:1rem; cursor:pointer; padding:0.3rem 0.6rem; border-radius:6px;
  transition:color 0.2s,background 0.2s; line-height:1;
}
.sticky-bar-close:hover { color:#fff; background:rgba(255,255,255,0.1); }
@media(max-width:600px){
  .sticky-bar-text { display:none; }
  .sticky-bar { padding:0.65rem 1rem; }
  .sticky-bar-phone, .sticky-bar-wa { padding:0.55rem 1rem; font-size:0.82rem; }
}
