:root {
  --bg:#f7f8fb; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --accent:#1f6feb; --accent-soft:#eef2ff; --brand:#1f2a44;
  --brand-2:#0ea5e9; --brand-3:#10b981; --surface:#ffffff;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
header { position: sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:100; }
.topbar { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 0; position:relative; }
.brand { font-weight:700; }
/* Hide nav on mobile (will be shown in hamburger menu) */
nav { order:2; min-height:20px; }
/* Hamburger button - positioned on the right */
.menu-toggle { display:flex; flex-direction:column; gap:4px; padding:8px; background:none; border:none; cursor:pointer; z-index:101; order:3; margin-left:auto; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--brand); transition:all 0.3s ease; border-radius:2px; }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(6px, 6px); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(6px, -6px); }
/* Mobile first: menu hidden by default */
nav ul { display:none; list-style:none; padding:0; margin:0; gap:0; flex-direction:column; }
/* Mobile menu overlay */
.menu-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:98; pointer-events:none; }
.menu-overlay.active { display:block; pointer-events:auto; }
nav.mobile-open ul { display:flex; position:fixed; top:0; right:0; width:280px; max-width:85vw; height:100vh; background:#fff; box-shadow:-2px 0 8px rgba(0,0,0,0.1); overflow-y:auto; padding-top:60px; padding-bottom:80px; flex-direction:column; z-index:100; }
nav.mobile-open .subnav { position:fixed; bottom:0; right:0; width:280px; max-width:85vw; padding:16px; border-top:1px solid var(--line); background:#fff; z-index:101; }
nav.mobile-open .subnav ul { position:static; display:flex; flex-direction:column; width:100%; height:auto; box-shadow:none; padding:0; background:transparent; gap:8px; }
nav.mobile-open .subnav .subnav-link { display:block; padding:12px 16px; border:1px solid #e2e8f0; background:#f8fafc; border-radius:8px; margin-bottom:8px; text-align:center; }
nav a { display:block; padding:12px 16px; border:1px solid transparent; color:var(--brand); background:#fff; text-decoration:none; border-bottom:1px solid var(--line); font-size:16px; cursor:pointer; pointer-events:auto; }
nav a:hover { background:var(--accent-soft); border-color:#c7d2fe; }
nav .btn { margin:8px 16px; text-align:center; }
/* secondary nav */
.subnav { font-size: 12px; color:#64748b; display:none; }
.subnav .subnav-link { padding:4px 8px; border:1px dashed #e2e8f0; background:#f8fafc; border-radius:6px; color:#475569; text-decoration:none; }
/* Show subnav at bottom of mobile menu */
nav.mobile-open .subnav { display:block; }
main section { padding:28px 0; border-bottom:1px solid var(--line); }
.block { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; color:#374151; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.stack { display:grid; gap:12px; }
/* Mobile first: grids start as single column */
.grid-2 { display:grid; grid-template-columns: 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns: 1fr; gap:12px; }
.grid-4 { display:grid; grid-template-columns: 1fr; gap:12px; }
.hero { padding:0; background:#000; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero-video-container { position:relative; width:100%; min-height:400px; display:flex; align-items:center; justify-content:center; }
.hero-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-video-desktop { display:none; }
.hero-video-mobile { display:block; }
.hero-content { position:relative; z-index:2; padding:40px 20px; text-align:center; color:#fff; max-width:800px; margin:0 auto; }
.hero-content h1 { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero-content p { color:rgba(255,255,255,.95); text-shadow:0 1px 4px rgba(0,0,0,.2); }
.hero .block { min-height:160px; display:grid; place-items:center; font-weight:600; color:#1f2937; }
.hero .grid-2 { align-items:center; }
.hero-illus { height:260px; border-radius:16px; border:1px solid #e5e7eb; background:
  radial-gradient(80px 80px at 20% 30%, #e0f2fe 0, transparent 60%),
  radial-gradient(100px 100px at 80% 20%, #fee2e2 0, transparent 60%),
  radial-gradient(80px 80px at 70% 80%, #dcfce7 0, transparent 60%),
  linear-gradient(180deg, #f8fafc, #fff);
  box-shadow:0 6px 20px rgba(2,6,23,.06);
}
.cta { display:flex; gap:10px; flex-wrap:wrap; }
.btn { padding:10px 14px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; transition:transform .04s ease, box-shadow .2s ease; box-shadow:0 1px 2px rgba(2,6,23,.06); }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(2,6,23,.10); }
.btn.secondary { background:var(--accent-soft); color:var(--brand); border-color:#c7d2fe; }
.badge { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#e2e8f0; color:#334155; font-size:12px; }
footer { background:#0f172a; border-top:1px solid rgba(255,255,255,.06); padding:36px 0 18px; color:#cbd5e1; }
footer a { color:#e2e8f0; text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer .footer-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:20px; align-items:start; }
footer h4 { margin:0 0 10px; font-size:14px; letter-spacing:.02em; color:#e2e8f0; }
footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
footer .footer-copy { margin:8px 0 12px; color:#94a3b8; }
footer .footer-meta { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); color:#94a3b8; font-size:13px; }
footer .social-links { display:flex; gap:10px; }
footer .social { width:28px; height:28px; border-radius:999px; background:#1f2a44; display:inline-block; border:1px solid rgba(255,255,255,.1); }
footer .social::before { content:""; display:block; width:100%; height:100%; background:#e2e8f0; -webkit-mask-size: 60%; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; mask-size:60%; mask-position:center; mask-repeat:no-repeat; }
footer .social-linkedin::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 8.98h4v12H3v-12zM14.5 9c3.04 0 5.5 2.46 5.5 5.5v6.48h-4V15.1c0-1.31-1.06-2.37-2.37-2.37s-2.13.96-2.13 2.27v6.98h-4v-12h4v1.64C12.1 9.63 13.27 9 14.5 9z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 8.98h4v12H3v-12zM14.5 9c3.04 0 5.5 2.46 5.5 5.5v6.48h-4V15.1c0-1.31-1.06-2.37-2.37-2.37s-2.13.96-2.13 2.27v6.98h-4v-12h4v1.64C12.1 9.63 13.27 9 14.5 9z"/></svg>'); }
footer .social-instagram::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm5.75-.75a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm5.75-.75a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>'); }
footer .social-x::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M3 3h4.6l5 6.7L17.7 3H21l-7 8.9 7.7 10.1h-4.6l-5.3-7-5.4 7H3l7.3-9.4L3 3z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M3 3h4.6l5 6.7L17.7 3H21l-7 8.9 7.7 10.1h-4.6l-5.3-7-5.4 7H3l7.3-9.4L3 3z"/></svg>'); }
.
/* CTA band */
.cta-band { padding:0; background:linear-gradient(135deg, #eef2ff 0%, #ffffff 60%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-band .wrap { display:grid; gap:16px; align-items:center; justify-items:center; text-align:center; padding-top:96px; padding-bottom:96px; }
.cta-band h2 { margin:0; font-size:44px; line-height:1.08; color:#0f172a; font-weight:800; letter-spacing:-.012em; }
.cta-band p { margin:0; color:#334155; font-size:22px; }
.cta-band .cta { margin-top:28px; gap:22px; }
.cta-band .cta .btn { padding:16px 26px; border-radius:14px; box-shadow:0 10px 28px rgba(2,6,23,.14); font-size:18px; }
.cta-band .cta .btn.secondary { background:#ffffff; border-color:#e5e7eb; color:var(--brand); box-shadow:0 4px 14px rgba(2,6,23,.08); }
.cta-band .cta .btn.secondary:hover { background:#f8fafc; }

.faq-list { display:grid; gap:10px; }
.faq-item { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.faq-q { width:100%; text-align:left; background:#f8fafc; border:none; padding:12px 14px; font:inherit; border-bottom:1px dashed var(--line); cursor:pointer; }
.faq-a { padding:12px 14px; color:#475569; display:none; line-height:1.6; }
.faq-item.open .faq-a { display:block; }
.faq-link { display:inline-block; margin-top:8px; color:var(--accent); text-decoration:none; font-size:14px; font-weight:500; }
.faq-link:hover { text-decoration:underline; }
.faq-link::after { content: " →"; }

/* FAQ Categories */
.faq-category { margin-bottom:16px; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; }
.faq-category-header { width:100%; text-align:left; background:#f8fafc; border:none; padding:16px 18px; font:inherit; font-weight:600; font-size:18px; color:#0f172a; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:background 0.2s ease; }
.faq-category-header:hover { background:#f1f5f9; }
.faq-category-header::after { content:"▼"; font-size:12px; color:#64748b; transition:transform 0.2s ease; }
.faq-category.open .faq-category-header::after { transform:rotate(180deg); }
.faq-category-content { display:none; padding:20px 18px; border-top:1px solid #e5e7eb; }
.faq-category.open .faq-category-content { display:block; }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; padding: 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#0f172a;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c7d2fe; outline-offset: 1px; }

/* Cards with icons */
.cards .card { display:flex; gap:12px; align-items:flex-start; }
.icon { width:28px; height:28px; border-radius:8px; background:var(--accent-soft); display:inline-block; flex:0 0 28px; border:1px solid #c7d2fe; }
.icon.mask { -webkit-mask-size: 60%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-size:60%; mask-position:center; mask-repeat:no-repeat; background-color:#1f2a44; background-image:none; background:#1f2a44; }

/* Simple icon set via data-URI masks */
.icon-calendar { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zm13 8H4v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9zM9 3v1h6V3H9z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zm13 8H4v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9zM9 3v1h6V3H9z"/></svg>'); }
.icon-pill { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M8.5 3A5.5 5.5 0 0 1 14 8.5V15H8.5A5.5 5.5 0 1 1 8.5 3zM15 9h.5A5.5 5.5 0 1 1 15 20.5V14h-5.5A5.5 5.5 0 1 1 15 9z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M8.5 3A5.5 5.5 0 0 1 14 8.5V15H8.5A5.5 5.5 0 1 1 8.5 3zM15 9h.5A5.5 5.5 0 1 1 15 20.5V14h-5.5A5.5 5.5 0 1 1 15 9z"/></svg>'); }
.icon-chat { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M4 4h16v10a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M4 4h16v10a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z"/></svg>'); }
.icon-map { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>'); }

/* Thumbnail placeholders */
.thumb { background:#f1f5f9; border:1px solid #e5e7eb; border-radius:12px; min-height:120px; box-shadow:inset 0 0 0 1px rgba(2,6,23,.02); }
.thumb.badge { width:56px; height:56px; border-radius:14px; }

/* Mobile first: base styles are for mobile */
/* Tablet and up: 2 columns */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  /* Hide hamburger, show normal menu on desktop */
  .menu-toggle { display:none !important; }
  .menu-overlay { display:none !important; }
  nav ul { display:flex !important; flex-direction:row; gap:12px; position:static !important; width:auto !important; height:auto !important; background:transparent !important; box-shadow:none !important; padding:0 !important; }
  nav a { display:inline-block !important; padding:8px 12px; border-radius:8px; font-size:inherit; border-bottom:none; }
  nav .btn { margin:0; }
  nav .subnav { display:block !important; position:static; margin-top:6px; padding:0; border-top:none; }
  nav .subnav ul { display:flex !important; flex-direction:row; position:static !important; width:auto !important; height:auto !important; background:transparent !important; box-shadow:none !important; padding:0 !important; }
  nav .subnav .subnav-link { display:inline-block; padding:4px 8px; border:1px dashed #e2e8f0; background:#f8fafc; border-radius:6px; margin-bottom:0; text-align:left; }
  nav.mobile-open ul { position:static !important; width:auto !important; max-width:none !important; height:auto !important; padding:0 !important; }
  nav.mobile-open .subnav { position:static; margin-top:6px; padding:0; border-top:none; }
  nav.mobile-open .subnav ul { flex-direction:row; }
  .hero-video-container { min-height:500px; }
  .hero-content { padding:60px 20px; }
  .hero-content h1 { font-size:48px; }
}

/* Desktop: 3 and 4 columns + video switch */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .hero-video-desktop { display:block; }
  .hero-video-mobile { display:none; }
  .hero-video-container { min-height:600px; }
  .hero-content { padding:80px 20px; }
  .hero-content h1 { font-size:56px; }
}