:root {
  --navy-950: #091126;
  --navy-900: #0d1733;
  --navy-850: #102040;
  --blue-500: #1f67f6;
  --blue-400: #2e7cff;
  --gold-400: #ddb461;
  --surface: #ffffff;
  --surface-soft: #f5f8fd;
  --surface-muted: #eef3fb;
  --line: #dbe5f3;
  --line-soft: #edf2f8;
  --text: #576982;
  --text-strong: #1b2840;
  --muted: #7e8ea7;
  --success: #24904f;
  --shadow-lg: 0 30px 60px rgba(11, 21, 46, 0.16);
  --shadow-md: 0 14px 30px rgba(14, 31, 64, 0.12);
  --shadow-sm: 0 10px 18px rgba(14, 31, 64, 0.08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shell-width: 1240px;
  --mobile-dock-h: 72px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 500px at 50% -10%, rgba(69, 112, 200, 0.08) 0%, rgba(69, 112, 200, 0) 70%), linear-gradient(180deg, #f7f9fc 0%, #f4f7fb 100%);
  padding-bottom: 0;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.landing-frame { max-width: calc(var(--shell-width) + 32px); margin: 0 auto; padding: 18px 16px 30px; }
.hero-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: radial-gradient(900px 420px at 16% 18%, rgba(36, 83, 164, 0.4) 0%, rgba(36, 83, 164, 0) 62%), linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 34%, var(--navy-850) 100%);
  box-shadow: var(--shadow-lg);
}
.hero-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(95, 140, 225, 0.07) 1px, transparent 1px), linear-gradient(rgba(95, 140, 225, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .3;
  pointer-events: none;
}

.site-header { position: relative; z-index: 3; padding: 18px 22px 14px; border-bottom: 1px solid rgba(138, 171, 227, 0.16); }
.header-shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: #fff; font-weight: 800; font-size: 1.1rem; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(255, 220, 134, 0.48), rgba(221, 180, 97, 0.12) 70%);
  border: 1px solid rgba(221, 180, 97, 0.35);
}
.brand-mark img { width: 34px; height: 34px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-copy strong { color: #fff; font-size: 1rem; line-height: 1.1; }
.brand-copy small { color: rgba(226, 234, 248, 0.74); font-size: .76rem; font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: 26px; color: rgba(236, 242, 252, 0.9); font-weight: 600; }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(221, 180, 97, 0.9), rgba(255,255,255,.85)); transform: scaleX(0); transition: transform .18s ease; }
.site-nav a:hover::after { transform: scaleX(1); }

.site-actions, .hero-actions, .detail-actions, .mobile-menu-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(139, 171, 224, 0.2);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .18s ease, background-color .18s ease;
}
.action-btn:hover { transform: translateY(-1px); }
.action-btn-primary { background: linear-gradient(180deg, var(--blue-400) 0%, var(--blue-500) 100%); color: #fff; box-shadow: 0 12px 18px rgba(30, 102, 245, 0.22); }
.action-btn-secondary { background: #fff; color: var(--blue-500); border-color: rgba(255,255,255,.7); }
.action-btn-ghost { background: rgba(255,255,255,.08); color: #edf3ff; }

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(139, 171, 224, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.mobile-menu { display: none; padding: 0 22px 18px; }
.mobile-menu-inner { border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(139, 171, 224, 0.16); padding: 16px; }
.mobile-menu-links { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.mobile-menu-links a { color: #edf3ff; font-weight: 600; }
.hero-shell.menu-open .mobile-menu { display: block; }

.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); align-items: center; gap: 28px; padding: 34px 22px 30px; }
.hero-copy { max-width: 560px; }
.hero-copy h1 { margin: 0 0 12px; color: #fff; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.hero-copy p { margin: 0 0 24px; color: rgba(229, 237, 249, 0.9); font-size: 1.04rem; line-height: 1.75; max-width: 500px; }
.hero-meta { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; color: rgba(230, 238, 251, 0.9); font-size: .88rem; font-weight: 600; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(139,171,224,.14); }

.hero-visual { position: relative; min-height: 320px; }
.visual-grid {
  position: absolute;
  inset: 18px 0 0 20px;
  background: linear-gradient(90deg, rgba(116,155,221,.08) 1px, transparent 1px), linear-gradient(rgba(116,155,221,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.9), rgba(0,0,0,.1));
}
.visual-glow { position: absolute; border-radius: 50%; filter: blur(16px); opacity: .9; }
.visual-glow.one { width: 220px; height: 220px; right: 60px; top: 20px; background: radial-gradient(circle, rgba(74, 133, 255, 0.42) 0%, rgba(74, 133, 255, 0) 70%); }
.visual-glow.two { width: 180px; height: 180px; left: 10px; bottom: 14px; background: radial-gradient(circle, rgba(223, 180, 97, 0.28) 0%, rgba(223, 180, 97, 0) 72%); }
.visual-badge {
  position: absolute;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(147,184,244,.16);
  color: #a8c7ff;
  box-shadow: var(--shadow-md);
}
.visual-badge.one { right: 170px; top: 50px; }
.visual-badge.two { right: 40px; top: 86px; }

.visual-laptop { position: absolute; right: 34px; bottom: 4px; width: min(100%, 430px); }
.visual-screen {
  position: relative;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #101d3b 0%, #14284d 100%);
  border: 1px solid rgba(136,171,231,.18);
  box-shadow: 0 24px 44px rgba(3,11,24,.42);
  transform: rotate(-6deg);
  transform-origin: bottom left;
}
.screen-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.screen-topbar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.46); }
.screen-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; min-height: 220px; }
.screen-map, .screen-card, .phone-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(19,41,77,.84), rgba(15,28,56,.94));
  border: 1px solid rgba(137,170,228,.14);
}
.screen-map::before, .screen-card::before, .phone-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(114,157,230,.1) 1px, transparent 1px), linear-gradient(rgba(114,157,230,.1) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .7;
}
.screen-map { padding: 18px; }
.screen-line { position: absolute; left: 18px; right: 18px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(113,160,241,.95), rgba(255,255,255,0)); }
.screen-line.one { top: 28%; }
.screen-line.two { bottom: 24%; }
.screen-pin {
  position: absolute;
  top: 42%;
  left: 52%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(180deg, #f2c469 0%, #d9a845 100%);
  box-shadow: 0 12px 18px rgba(217,168,69,.3);
}
.screen-pin::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: rgba(16,29,59,.95); }
.screen-stack { display: grid; gap: 12px; }
.screen-card { min-height: 68px; padding: 12px; }
.mini-chart { position: absolute; inset: auto 12px 12px 12px; height: 20px; display: flex; align-items: flex-end; gap: 5px; }
.mini-chart span { flex: 1 1 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #6b9ff0, #3d6fcc); }
.mini-chart span:nth-child(1) { height: 35%; }
.mini-chart span:nth-child(2) { height: 70%; }
.mini-chart span:nth-child(3) { height: 50%; }
.mini-chart span:nth-child(4) { height: 88%; }

.visual-phone {
  position: absolute;
  right: -4px;
  bottom: 12px;
  width: 132px;
  padding: 10px 8px 12px;
  border-radius: 26px;
  background: linear-gradient(180deg, #0b132b 0%, #0d1832 100%);
  border: 2px solid rgba(180,202,241,.18);
  box-shadow: 0 22px 34px rgba(6,12,28,.38);
}
.visual-phone::before { content: ""; display: block; width: 56px; height: 6px; margin: 0 auto 10px; border-radius: 999px; background: rgba(255,255,255,.16); }
.phone-screen { padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #13244a 0%, #101b34 100%); min-height: 220px; }
.phone-brand { height: 24px; margin-bottom: 10px; border-radius: 10px; background: rgba(255,255,255,.1); }
.phone-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.phone-actions span { display: block; height: 28px; border-radius: 10px; background: rgba(255,255,255,.12); }
.phone-list { display: grid; gap: 10px; }
.phone-item { min-height: 46px; padding: 10px; }
.phone-item::after { content: ""; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #f2d39a 0%, #c8993d 100%); }
.phone-item span { position: absolute; left: 36px; right: 16px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.2); }
.phone-item span:first-of-type { top: 13px; width: 58%; }
.phone-item span:last-of-type { top: 26px; width: 74%; }

.content-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.95fr); gap: 18px; margin-top: 18px; }
.panel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head, .detail-top { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-head h2, .detail-panel-head h2 { margin: 0; color: var(--text-strong); font-size: 1.1rem; font-weight: 800; }
.search-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); min-width: min(100%, 280px); }
.search-pill input { width: 100%; border: 0; background: transparent; outline: 0; color: var(--text-strong); font: inherit; }

.contacts-table-wrap { padding-bottom: 8px; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f8fbff; margin-bottom: 0; }
.table thead th { padding: 14px 16px; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line-soft); background: #fff; white-space: nowrap; }
.table tbody td { padding: 16px; border-top: 1px solid var(--line-soft); vertical-align: middle; color: var(--text); }
.name-cell { color: var(--text-strong); font-weight: 700; }
.role-pill, .location-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
}
.role-pill { background: #edf4ff; color: #4f86d1; }
.location-pill { background: #f4f7fb; color: var(--muted); }
.contact-action-stack { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.contact-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
}
.contact-icon-btn.call { background: linear-gradient(180deg, #2c7dff 0%, #165cd8 100%); }
.contact-icon-btn.wa { background: linear-gradient(180deg, #32b059 0%, #1d9444 100%); }

.contact-mobile-list { display: none; padding: 14px; gap: 12px; }
.contact-card-mobile { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-soft); background: #fff; box-shadow: var(--shadow-sm); }
.contact-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1f5fb 0%, #e5edf8 100%);
  color: var(--text-strong);
  font-weight: 800;
  flex-shrink: 0;
}
.contact-card-main { flex: 1 1 auto; min-width: 0; }
.contact-card-main strong { display: block; color: var(--text-strong); font-size: .95rem; font-weight: 800; }
.contact-card-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; color: var(--muted); font-size: .76rem; font-weight: 600; }
.contact-card-phone { margin-top: 8px; color: var(--text); font-size: .84rem; font-weight: 700; }
.contact-card-actions { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.contact-arrow { color: var(--muted); flex-shrink: 0; padding-top: 3px; }

.detail-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); color: var(--text-strong); font-size: .8rem; font-weight: 700; }
.detail-form label { display: block; margin-bottom: 8px; color: var(--text-strong); font-size: .9rem; font-weight: 700; }
.detail-form select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-strong);
  font: inherit;
  outline: 0;
}
.detail-content { padding: 18px 20px 0; }
.primary-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #f6f9ff 0%, #fff 100%); border: 1px solid var(--line-soft); }
.primary-avatar { width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(180deg, #eff5ff 0%, #dde9fb 100%); color: var(--blue-500); font-size: 1.15rem; font-weight: 800; flex-shrink: 0; }
.primary-eyebrow { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.primary-copy strong { display: block; margin-top: 4px; color: var(--text-strong); font-size: 1rem; font-weight: 800; }
.primary-list { margin-top: 10px; display: grid; gap: 8px; font-size: .9rem; }
.primary-list span { color: var(--text-strong); font-weight: 700; }
.contact-subsection { margin-top: 18px; }
.contact-subsection h3 { margin: 0 0 12px; color: var(--text-strong); font-size: .92rem; font-weight: 800; }
.mini-contact-list { display: grid; gap: 10px; }
.mini-contact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-soft); background: #fff; }
.mini-contact-main { flex: 1 1 auto; min-width: 0; }
.mini-contact-main strong { display: block; color: var(--text-strong); font-size: .9rem; font-weight: 700; }
.mini-contact-main span { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; font-weight: 600; }
.empty-state { padding: 18px; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface-soft); color: var(--muted); font-size: .92rem; }

.site-footer { padding: 20px 0 10px; }
.footer-shell { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 0 6px; color: var(--muted); font-size: .85rem; }
.footer-shell strong { color: var(--text-strong); }
.footer-credit { color: var(--blue-500); font-weight: 700; }

.mobile-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.mobile-dock a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 50px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.mobile-dock a i { font-size: 1rem; }
.mobile-dock a.is-active { color: var(--blue-500); }

@media (max-width: 1199.98px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-visual { min-height: 290px; }
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .site-nav, .site-actions { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero-grid { padding-top: 26px; }
  .hero-copy h1 { font-size: clamp(2rem, 8vw, 3rem); }
}

@media (max-width: 767.98px) {
  body { padding-bottom: calc(var(--mobile-dock-h) + 22px); }
  .landing-frame { padding: 14px 12px 24px; }
  .hero-shell { border-radius: 24px; }
  .site-header { padding: 14px 14px 12px; }
  .hero-grid { gap: 20px; padding: 22px 14px 22px; }
  .hero-copy p { font-size: .94rem; line-height: 1.65; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .action-btn { width: 100%; }
  .hero-visual { min-height: 220px; }
  .visual-laptop { right: 36px; width: min(100%, 310px); }
  .visual-screen { padding: 10px; border-radius: 18px; }
  .screen-layout { min-height: 152px; }
  .visual-phone { width: 104px; right: -2px; bottom: 2px; }
  .phone-screen { min-height: 170px; }
  .visual-badge { display: none; }
  .panel-head, .detail-top, .detail-content { padding-left: 14px; padding-right: 14px; }
  .panel-head { flex-direction: column; align-items: stretch; }
  .search-pill { width: 100%; min-width: 0; }
  .contacts-table-wrap { display: none; }
  .contact-mobile-list { display: grid; }
  .primary-card { flex-direction: column; }
  .mobile-dock { display: flex; }
}

@media (max-width: 479.98px) {
  .hero-actions { grid-template-columns: 1fr; }
  .brand-copy small, .profile-copy { display: none; }
}