@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@600;700;800;900&family=Josefin+Sans:wght@600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --dark:#1a2332;
  --dark2:#0f1923;
  --blue:#1e6fb5;
  --blue2:#2980c9;
  --light:#f7f9fc;
  --white:#ffffff;
  --muted:#6b7a8d;
  --border:#dde3eb;
  --text:#2c3e50;
  --text2:#4a5568;
}

body{font-family:'Inter',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;font-size:15px;line-height:1.7}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:68px}
.logo-block{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.logo-lynx-box{border:2px solid var(--blue);padding:7px 11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch}
.logo-lynx-text{font-family:'Outfit',sans-serif;font-size:14px;font-weight:900;color:var(--blue);letter-spacing:3px;line-height:1;text-transform:uppercase}
.logo-words{display:flex;flex-direction:column;line-height:1;justify-content:center;align-items:flex-start}
.logo-line1{font-family:'Josefin Sans',sans-serif;font-size:1.0rem;font-weight:700;color:var(--dark);letter-spacing:2.5px;text-transform:uppercase;white-space:nowrap;display:block}
.logo-line2{font-family:'Outfit',sans-serif;font-size:0.46rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0px;margin-top:5px;display:block;white-space:nowrap;transform-origin:left top}
.nav-links{display:flex;align-items:center;gap:0;list-style:none}
.nav-links > li > a{color:var(--text2);text-decoration:none;font-size:0.82rem;font-weight:500;padding:0.5rem 1rem;display:block;transition:color 0.2s;white-space:nowrap}
.nav-links > li > a:hover,.nav-links > li > a.active{color:var(--blue)}
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--white);min-width:220px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.08);z-index:300;padding:0.4rem 0}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:0.55rem 1.25rem;color:var(--text2);font-size:0.8rem;text-decoration:none;transition:all 0.15s}
.nav-dropdown-menu a:hover{color:var(--blue);background:#f0f7ff}
.nav-cta{display:flex;gap:0.6rem;align-items:center}
.btn-ghost{border:1px solid var(--border);color:var(--text2);padding:0.4rem 1rem;font-size:0.78rem;font-weight:500;text-decoration:none;transition:all 0.2s;white-space:nowrap;background:var(--white)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-solid{background:var(--blue);color:var(--white);padding:0.4rem 1rem;font-size:0.78rem;font-weight:600;text-decoration:none;transition:background 0.2s;white-space:nowrap;border:1px solid var(--blue)}
.btn-solid:hover{background:var(--blue2)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:22px;height:2px;background:var(--dark);display:block}

/* ── MOBILE MENU ── */
.mobile-menu{display:none;position:fixed;top:68px;left:0;right:0;background:var(--white);border-top:1px solid var(--border);z-index:199;flex-direction:column;max-height:calc(100vh - 68px);overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--text2);text-decoration:none;font-size:0.88rem;font-weight:500;padding:0.8rem 1.5rem;border-bottom:1px solid var(--border)}
.mobile-menu a:hover{color:var(--blue);background:#f8faff}
.mobile-menu .mob-head{font-size:0.65rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--blue);padding:1rem 1.5rem 0.3rem;border-bottom:none}

/* ── HERO ── */
.hero{padding-top:68px;background:linear-gradient(135deg,var(--dark2) 0%,var(--dark) 100%);min-height:520px;display:flex;align-items:center}
.hero-inner{max-width:1100px;margin:0 auto;padding:4rem 2.5rem;width:100%}
.hero-tag{display:inline-block;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);font-size:0.72rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:0.3rem 0.9rem;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,0.15)}
.hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;color:var(--white);line-height:1.2;margin-bottom:0.75rem;max-width:680px}
.hero h2{font-size:clamp(1rem,2vw,1.25rem);font-weight:300;color:rgba(255,255,255,0.65);margin-bottom:2rem;max-width:560px}
.hero-btns{display:flex;gap:0.75rem;flex-wrap:wrap}
.hero-btn-white{background:var(--white);color:var(--dark);padding:0.7rem 1.75rem;font-size:0.82rem;font-weight:600;text-decoration:none;transition:all 0.2s;border:1px solid var(--white)}
.hero-btn-white:hover{background:transparent;color:var(--white)}
.hero-btn-outline{background:transparent;color:var(--white);padding:0.7rem 1.75rem;font-size:0.82rem;font-weight:500;text-decoration:none;border:1px solid rgba(255,255,255,0.4);transition:all 0.2s}
.hero-btn-outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.7)}

/* ── SECTIONS ── */
section{padding:5rem 2.5rem}
.section-inner{max-width:1100px;margin:0 auto}
.section-label{font-size:0.7rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:0.75rem}
.section-h{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--dark);line-height:1.25;margin-bottom:0.75rem}
.section-p{color:var(--muted);font-size:0.92rem;line-height:1.8;max-width:580px}

/* ── STATS BAR ── */
.stats-bar{background:var(--dark);padding:2.5rem}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-item{text-align:center;padding:0 1.5rem;border-right:1px solid rgba(255,255,255,0.08)}
.stat-item:last-child{border-right:none}
.stat-n{font-size:2.2rem;font-weight:700;color:var(--white);line-height:1;display:block}
.stat-l{font-size:0.72rem;color:rgba(255,255,255,0.45);letter-spacing:1px;text-transform:uppercase;margin-top:0.35rem;display:block}

/* ── FEATURE GRID ── */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:3rem;background:var(--border)}
.feature-box{background:var(--white);padding:2rem 1.75rem}
.feature-box h3{font-size:0.95rem;font-weight:600;color:var(--dark);margin-bottom:0.6rem}
.feature-box p{font-size:0.83rem;color:var(--muted);line-height:1.75}
.feature-box .f-icon{width:40px;height:40px;background:#eef4fb;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.1rem}

/* ── SERVICE TABS ── */
.service-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:2.5rem;overflow-x:auto}
.service-tab{padding:0.75rem 1.5rem;font-size:0.8rem;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all 0.2s;background:none;border-top:none;border-left:none;border-right:none}
.service-tab.active,.service-tab:hover{color:var(--blue);border-bottom-color:var(--blue)}
.service-panel{display:none;animation:fadeIn 0.3s ease}
.service-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.service-panel h3{font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:1rem}
.service-panel p{font-size:0.88rem;color:var(--muted);line-height:1.8;margin-bottom:1.25rem}
.service-panel ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.service-panel ul li{font-size:0.85rem;color:var(--text2);display:flex;align-items:flex-start;gap:0.6rem}
.service-panel ul li::before{content:'→';color:var(--blue);flex-shrink:0;font-weight:600}
.service-img{background:linear-gradient(135deg,var(--dark2),var(--dark));min-height:280px;display:flex;align-items:center;justify-content:center}
.service-img span{font-size:0.75rem;color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase}

/* ── WHY CARDS ── */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
.why-card{padding:2rem;border:1px solid var(--border);transition:box-shadow 0.2s,border-color 0.2s}
.why-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.07);border-color:#b8ccde}
.why-card h4{font-size:0.92rem;font-weight:600;color:var(--dark);margin-bottom:0.5rem}
.why-card p{font-size:0.83rem;color:var(--muted);line-height:1.75}

/* ── TWO COL ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.two-col-text h2{font-size:1.8rem;font-weight:700;color:var(--dark);margin-bottom:1rem;line-height:1.3}
.two-col-text p{font-size:0.88rem;color:var(--muted);line-height:1.8;margin-bottom:1rem}
.two-col-visual{background:var(--light);min-height:360px;display:flex;align-items:center;justify-content:center;padding:2.5rem}

/* ── STEPS ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.5rem;counter-reset:step}
.step-item{padding:2.5rem 2rem;border-right:1px solid var(--border);counter-increment:step;position:relative}
.step-item:last-child{border-right:none}
.step-item::before{content:counter(step,'0'counter(step));font-size:2.8rem;font-weight:700;color:var(--border);display:block;line-height:1;margin-bottom:1rem}
.step-item h4{font-size:0.92rem;font-weight:600;color:var(--dark);margin-bottom:0.5rem}
.step-item p{font-size:0.82rem;color:var(--muted);line-height:1.7}

/* ── CTA STRIP ── */
.cta-strip{background:var(--dark);padding:4rem 2.5rem}
.cta-strip-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-strip h2{font-size:1.6rem;font-weight:700;color:var(--white);max-width:540px;line-height:1.3}
.cta-strip-btns{display:flex;gap:0.75rem;flex-shrink:0;flex-wrap:wrap}

/* ── PAGE HERO (inner pages) ── */
.page-hero{padding-top:68px;background:linear-gradient(135deg,var(--dark2),var(--dark));padding-bottom:3.5rem;padding-left:2.5rem;padding-right:2.5rem}
.page-hero-inner{max-width:1100px;margin:0 auto;padding-top:3rem}
.page-crumb{font-size:0.7rem;color:rgba(255,255,255,0.45);letter-spacing:1px;text-transform:uppercase;margin-bottom:0.75rem}
.page-crumb a{color:rgba(255,255,255,0.45);text-decoration:none}
.page-crumb a:hover{color:rgba(255,255,255,0.7)}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:var(--white);line-height:1.2;margin-bottom:0.75rem}
.page-hero p{font-size:0.92rem;color:rgba(255,255,255,0.6);max-width:560px;line-height:1.75}

/* ── PROSE ── */
.prose{font-size:0.9rem;color:var(--text2);line-height:1.85}
.prose p{margin-bottom:1rem}
.prose h3{font-size:1rem;font-weight:600;color:var(--dark);margin:1.5rem 0 0.5rem}
.prose ul{list-style:none;margin-bottom:1rem}
.prose ul li{padding:0.3rem 0 0.3rem 1.25rem;position:relative;font-size:0.87rem;color:var(--text2)}
.prose ul li::before{content:'—';position:absolute;left:0;color:var(--blue)}

/* ── MODULE LIST (ERP modules etc) ── */
.module-list{display:flex;flex-direction:column;gap:0.4rem}
.module-item{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 1rem;background:var(--light);border-left:3px solid var(--blue);font-size:0.83rem;color:var(--text2)}

/* ── ROLE CARDS ── */
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:2.5rem}
.role-card{background:var(--white);padding:1.5rem;transition:background 0.2s}
.role-card:hover{background:#f5f9ff}
.role-card h4{font-size:0.85rem;font-weight:600;color:var(--dark);margin-bottom:0.4rem}
.role-card p{font-size:0.78rem;color:var(--muted);line-height:1.6}

/* ── JOBS LIST ── */
.job-list{display:flex;flex-direction:column;gap:0}
.job-item{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;border-bottom:1px solid var(--border);gap:1rem;flex-wrap:wrap}
.job-item:first-child{border-top:1px solid var(--border)}
.job-title{font-size:0.9rem;font-weight:600;color:var(--dark)}
.job-meta{display:flex;gap:1.5rem;margin-top:0.3rem;flex-wrap:wrap}
.job-meta span{font-size:0.75rem;color:var(--muted)}
.job-meta span::before{margin-right:0.3rem}

/* ── CONTACT INFO ── */
.contact-box{padding:2rem;background:var(--light);border:1px solid var(--border)}
.contact-box h3{font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:1.25rem}
.contact-row{display:flex;gap:0.75rem;margin-bottom:0.85rem;align-items:flex-start}
.contact-label{font-size:0.72rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--blue);min-width:60px;padding-top:1px}
.contact-val{font-size:0.85rem;color:var(--text2);line-height:1.5}

/* ── FOOTER ── */
footer{background:var(--dark2);padding:4rem 2.5rem 2rem;border-top:3px solid var(--blue)}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.07)}
.footer-brand{max-width:280px}
.footer-logo-block{display:flex;align-items:center;gap:11px;margin-bottom:1rem;text-decoration:none}
.footer-lynx-box{border:2px solid var(--blue);padding:4px 7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.footer-lynx-text{font-family:'Outfit',sans-serif;font-size:11px;font-weight:900;color:var(--blue);letter-spacing:2px;line-height:1;text-transform:uppercase}
.footer-logo-words{display:flex;flex-direction:column;line-height:1;align-items:flex-start}
.footer-logo-l1{font-family:'Josefin Sans',sans-serif;font-size:0.88rem;font-weight:700;color:var(--white);letter-spacing:2.5px;text-transform:uppercase}
.footer-logo-l2{font-family:'Outfit',sans-serif;font-size:0.44rem;font-weight:700;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:2px;margin-top:3px;display:block}
.footer-brand p{font-size:0.8rem;color:rgba(255,255,255,0.35);line-height:1.7}
.footer-col h4{font-size:0.67rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:1rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-col ul a{color:rgba(255,255,255,0.45);text-decoration:none;font-size:0.8rem;transition:color 0.2s}
.footer-col ul a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:1.75rem;font-size:0.75rem;color:rgba(255,255,255,0.22);flex-wrap:wrap;gap:0.5rem}
.footer-bottom a{color:rgba(255,255,255,0.22);text-decoration:none}
.footer-bottom a:hover{color:rgba(255,255,255,0.6)}

/* ── UTILS ── */
.btn-blue{background:var(--blue);color:var(--white);padding:0.65rem 1.6rem;font-size:0.8rem;font-weight:600;text-decoration:none;display:inline-block;border:1px solid var(--blue);transition:background 0.2s;cursor:pointer}
.btn-blue:hover{background:var(--blue2)}
.btn-line{background:transparent;color:var(--white);padding:0.65rem 1.6rem;font-size:0.8rem;font-weight:500;text-decoration:none;display:inline-block;border:1px solid rgba(255,255,255,0.35);transition:all 0.2s;cursor:pointer}
.btn-line:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.6)}
.btn-blue-outline{background:transparent;color:var(--blue);padding:0.65rem 1.6rem;font-size:0.8rem;font-weight:600;text-decoration:none;display:inline-block;border:1px solid var(--blue);transition:all 0.2s;cursor:pointer}
.btn-blue-outline:hover{background:var(--blue);color:var(--white)}
.tag{display:inline-block;background:#eef4fb;color:var(--blue);font-size:0.68rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:0.25rem 0.7rem}
.divider{border:none;border-top:1px solid var(--border);margin:0}
.bg-light{background:var(--light)}
.bg-white{background:var(--white)}
.bg-dark{background:var(--dark)}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.fade-in{opacity:0;transform:translateY(16px);transition:opacity 0.55s ease,transform 0.55s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:0 1.25rem}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  section{padding:3.5rem 1.25rem}
  .page-hero{padding-left:1.25rem;padding-right:1.25rem}
  .two-col,.service-panel.active{grid-template-columns:1fr;gap:2rem}
  .feature-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .step-item{border-right:none;border-bottom:1px solid var(--border);padding:1.75rem 0}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);padding:1.25rem}
  .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,0.08)}
  .role-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .cta-strip-inner{flex-direction:column;text-align:center}
  .cta-strip-btns{justify-content:center}
}
@media(max-width:480px){
  .role-grid,.footer-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:flex-start}
}

/* ── IMAGES ────────────────────────────────────────────────────────────────── */
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.img-wrap{overflow:hidden;position:relative}
.img-wrap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,17,32,0.55) 0%,rgba(11,17,32,0.2) 100%)}
.hero-img-panel{min-height:420px;position:relative;overflow:hidden}
.about-img{width:100%;height:380px;object-fit:cover;display:block}
.section-img{width:100%;height:300px;object-fit:cover;display:block}