/* Nana K IT Solutions Consult - production site styles */
:root {
  --navy: #072b62;
  --blue: #0b5ed7;
  --blue-2: #1478f2;
  --teal: #0f9f9a;
  --orange: #f59e0b;
  --ink: #122033;
  --muted: #5f6f83;
  --line: #dce4ed;
  --surface: #ffffff;
  --soft: #f5f8fc;
  --soft-blue: #edf5ff;
  --success: #13795b;
  --danger: #b42318;
  --shadow: 0 16px 40px rgba(8, 42, 88, .10);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--surface); line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(20,120,242,.35); outline-offset: 2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:#fff; padding:.75rem 1rem; z-index:9999; }
.skip-link:focus { left:1rem; top:1rem; }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.section { padding: 4.75rem 0; }
.section-sm { padding: 3rem 0; }
.bg-soft { background: var(--soft); }
.bg-blue { background: linear-gradient(135deg, #06265b, #0b5ed7); color: #fff; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:800; color:var(--teal); }
.eyebrow::before { content:""; width:26px; height:2px; background:currentColor; }
h1,h2,h3,h4 { line-height:1.18; margin:0 0 .8rem; color:inherit; }
h1 { font-size: clamp(2.25rem, 5vw, 4.65rem); letter-spacing:-.04em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing:-.025em; }
h3 { font-size:1.22rem; }
p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color:var(--muted); max-width: 760px; }
.bg-blue .lead { color:#d9e7fb; }
.section-head { display:flex; flex-direction:column; gap:.65rem; max-width:760px; margin-bottom:2rem; }
.center { text-align:center; margin-inline:auto; align-items:center; }
.muted { color:var(--muted); }
.badge { display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .7rem; border-radius:999px; background:var(--soft-blue); color:var(--navy); font-weight:700; font-size:.82rem; }

/* Header */
.site-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.95); backdrop-filter: blur(12px); border-bottom:1px solid rgba(220,228,237,.9); }
.navbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--navy); min-width:max-content; }
.brand img { width:78px; height:52px; object-fit:contain; }
.brand span { display:none; font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.nav-toggle { border:1px solid var(--line); background:#fff; border-radius:10px; width:44px; height:44px; color:var(--navy); }
.nav-links { position:absolute; top:78px; left:0; right:0; display:none; flex-direction:column; gap:.2rem; padding:1rem; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
.nav-links.open { display:flex; }
.nav-links a { color:#32465d; font-weight:700; padding:.7rem .8rem; border-radius:10px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--blue); background:var(--soft-blue); }
.nav-cta { display:none; }

/* Hero */
.hero { overflow:hidden; background:radial-gradient(circle at 86% 15%, rgba(20,120,242,.15), transparent 28%), linear-gradient(180deg, #f8fbff, #fff); }
.hero-grid { min-height:670px; padding:4rem 0; display:grid; align-items:center; gap:2.5rem; }
.hero-copy .lead { margin:1.2rem 0 1.7rem; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:46px; padding:.72rem 1.05rem; border:1px solid transparent; border-radius:11px; font-weight:800; transition:.2s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 9px 22px rgba(11,94,215,.25); }
.btn-primary:hover { background:#084fb7; }
.btn-secondary { background:#fff; color:var(--navy); border-color:#cbd7e5; }
.btn-light { background:#fff; color:var(--navy); }
.btn-ghost { color:#fff; border-color:rgba(255,255,255,.38); }
.hero-card { position:relative; border-radius:28px; overflow:hidden; box-shadow:0 30px 80px rgba(8,42,88,.19); min-height:430px; background:#0b2a55; }
.hero-card img { width:100%; height:100%; min-height:430px; object-fit:cover; opacity:.82; }
.hero-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(3,22,51,.72), transparent 60%); }
.hero-stat { position:absolute; z-index:2; bottom:1rem; left:1rem; right:1rem; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.55); border-radius:14px; padding:1rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.hero-stat strong { color:var(--navy); display:block; font-size:1.15rem; }
.hero-stat span { font-size:.84rem; color:var(--muted); }

/* Cards & grids */
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns:1fr; }
.grid-3 { grid-template-columns:1fr; }
.grid-4 { grid-template-columns:1fr; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:0 8px 26px rgba(8,42,88,.05); }
.card-hover { transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#c8d8ea; }
.icon-box { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--soft-blue); color:var(--blue); font-size:1.15rem; margin-bottom:1rem; }
.feature-list { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; }
.feature-list li { display:flex; align-items:flex-start; gap:.65rem; }
.feature-list i { color:var(--teal); margin-top:.28rem; }
.trust-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; padding:1.15rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 8px 22px rgba(8,42,88,.06); }
.trust-item { text-align:center; padding:.7rem; }
.trust-item strong { display:block; font-size:1.25rem; color:var(--navy); }
.trust-item span { color:var(--muted); font-size:.9rem; }

/* Page hero */
.page-hero { padding:4.2rem 0 3.4rem; background:linear-gradient(180deg,#f1f7ff,#fff); border-bottom:1px solid #edf1f6; }
.breadcrumb { font-size:.9rem; color:var(--muted); margin-bottom:.9rem; }
.breadcrumb a { color:var(--blue); }

/* Images */
.media-card { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; }
.media-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.media-card .body { padding:1.2rem; }
.image-cover { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
.profile-placeholder { min-height:420px; background:linear-gradient(145deg,#dcecff,#f7fbff); display:grid; place-items:center; color:var(--navy); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.profile-placeholder img { width:100%; height:100%; min-height:420px; object-fit:cover; }

/* Filters */
.filter-row { display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.filter-btn { border:1px solid var(--line); background:#fff; color:#40556d; padding:.55rem .85rem; border-radius:999px; font-weight:800; }
.filter-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.tag-row { display:flex; flex-wrap:wrap; gap:.45rem; margin:.85rem 0 0; }
.tag { font-size:.78rem; font-weight:700; background:#f0f4f8; color:#456078; padding:.3rem .55rem; border-radius:999px; }

/* Testimonials */
.stars { color:#f3a712; letter-spacing:.08rem; margin-bottom:.7rem; }
.quote-mark { font-size:2rem; color:#cbd8e6; line-height:1; }

/* Forms */
.form-shell { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.field { display:grid; gap:.4rem; }
.field label { font-weight:800; color:#24384e; }
.field input, .field select, .field textarea { width:100%; border:1px solid #cbd7e5; background:#fff; border-radius:10px; padding:.77rem .82rem; color:var(--ink); min-height:45px; }
.field textarea { min-height:145px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(20,120,242,.12); outline:0; }
.form-status { display:none; margin-top:1rem; padding:.8rem; border-radius:10px; font-weight:700; }
.form-status.show { display:block; }
.form-status.success { color:#0d684f; background:#e8f7f2; border:1px solid #bde7d9; }
.form-status.error { color:#8f1d18; background:#fff0ef; border:1px solid #f4c4c0; }
.honeypot { position:absolute !important; left:-9999px !important; opacity:0 !important; }
.contact-list { list-style:none; padding:0; display:grid; gap:.9rem; }
.contact-list li { display:flex; gap:.75rem; align-items:flex-start; }
.contact-list i { color:var(--blue); margin-top:.28rem; width:20px; }
.map-placeholder { min-height:300px; background:linear-gradient(145deg,#e8eef6,#f8fafc); border:1px dashed #aebdce; border-radius:var(--radius); display:grid; place-items:center; text-align:center; padding:1.5rem; color:var(--muted); }

/* FAQ */
.faq { display:grid; gap:.75rem; }
.faq-item { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.faq-btn { width:100%; border:0; background:#fff; display:flex; justify-content:space-between; align-items:center; text-align:left; padding:1rem 1.1rem; font-weight:850; color:var(--ink); }
.faq-panel { display:none; padding:0 1.1rem 1rem; color:var(--muted); }
.faq-item.open .faq-panel { display:block; }
.faq-item.open .faq-btn i { transform:rotate(180deg); }

/* Article */
.article { max-width:850px; margin:auto; }
.article .meta { display:flex; flex-wrap:wrap; gap:.7rem; color:var(--muted); font-size:.9rem; margin:1rem 0 1.5rem; }
.article-content h2 { margin-top:2rem; font-size:1.65rem; }
.article-content h3 { margin-top:1.5rem; }
.article-content ul, .article-content ol { padding-left:1.25rem; }
.article-content blockquote { margin:1.5rem 0; padding:1rem 1.25rem; border-left:4px solid var(--teal); background:var(--soft); }

/* Tables/status */
.status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:.3rem .6rem; font-size:.8rem; font-weight:800; background:#eef5ff; color:#0b5ed7; }
.portal-box { max-width:520px; margin:auto; }
.notice { border-radius:12px; padding:1rem; background:#fff8e7; border:1px solid #f5d896; color:#694c0a; }

/* CTA */
.cta { border-radius:24px; padding:2rem; display:grid; gap:1.2rem; background:linear-gradient(135deg,#06265b,#0b5ed7 68%,#0f9f9a); color:#fff; box-shadow:0 24px 60px rgba(8,42,88,.18); }
.cta p { color:#d8e7fb; max-width:720px; }

/* Footer */
.site-footer { background:#061a35; color:#d5e2f2; padding:3.5rem 0 1.2rem; }
.footer-grid { display:grid; gap:2rem; }
.footer-brand img { width:110px; max-height:75px; object-fit:contain; background:#fff; border-radius:10px; padding:.35rem; margin-bottom:1rem; }
.site-footer h3 { color:#fff; font-size:1rem; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-links a { color:#d5e2f2; }
.socials { display:flex; gap:.6rem; margin-top:1rem; }
.socials a { width:38px; height:38px; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; border-radius:9px; color:#fff; }
.newsletter-form { display:flex; flex-direction:column; gap:.55rem; }
.newsletter-form input { min-height:44px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; border-radius:9px; padding:.65rem .75rem; }
.newsletter-form input::placeholder { color:#b6c6d9; }
.footer-bottom { margin-top:2.3rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:.6rem; font-size:.85rem; color:#9fb2c8; }

.whatsapp-float { position:fixed; right:1rem; bottom:1rem; z-index:999; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#fff; font-size:1.55rem; box-shadow:0 14px 34px rgba(0,0,0,.22); }

/* Utility */
.split { display:grid; gap:2rem; align-items:center; }
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.kpi { padding:1.1rem; border-radius:14px; background:#fff; border:1px solid var(--line); }
.kpi strong { display:block; color:var(--navy); font-size:1.6rem; }
.timeline { display:grid; gap:1rem; }
.timeline-item { position:relative; padding-left:1.5rem; }
.timeline-item::before { content:""; position:absolute; left:0; top:.35rem; width:10px; height:10px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px #dff7f4; }
.empty-state { padding:2rem; text-align:center; border:1px dashed #b9c7d6; border-radius:14px; color:var(--muted); }
.loading { opacity:.75; }

@media (min-width: 640px) {
  .brand span { display:block; font-size:.88rem; }
  .grid-2, .form-grid.two { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .trust-strip { grid-template-columns:repeat(4,1fr); }
  .cta { padding:2.5rem; grid-template-columns:1fr auto; align-items:center; }
  .footer-grid { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}
@media (min-width: 920px) {
  .nav-toggle { display:none; }
  .nav-links { position:static; display:flex; flex-direction:row; background:transparent; border:0; box-shadow:none; padding:0; align-items:center; gap:.05rem; }
  .nav-links a { font-size:.86rem; padding:.5rem .52rem; }
  .nav-cta { display:inline-flex; }
  .hero-grid { grid-template-columns:1.05fr .95fr; }
  .grid-3 { grid-template-columns:repeat(3,1fr); }
  .grid-4 { grid-template-columns:repeat(4,1fr); }
  .split { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1.4fr .8fr .8fr 1.2fr; }
}
@media (min-width: 1120px) {
  .nav-links a { font-size:.9rem; padding:.55rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}