:root {
  --navy: #1B4960; --navy-dark: #122F40; --navy-deeper: #0D2330;
  --orange: #E85220; --orange-dark: #C8421A;
  --grey: #8C9296; --grey-light: #D8DBDD;
  --bg: #F7F8F9; --bg-alt: #EFF1F2; --white: #FFFFFF;
  --ink: #16222B; --ink-soft: #3D4A53;
  --font-display: "Archivo","Arial Narrow",sans-serif;
  --font-body: "Inter",-apple-system,"Segoe UI",sans-serif;
  --font-mono: "JetBrains Mono","Consolas",monospace;
  --max-width: 1180px; --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(13,35,48,.08);
  --shadow-md: 0 8px 24px rgba(13,35,48,.12);
  --transition: 180ms ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block} a{color:var(--navy);text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy-dark);font-weight:800;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem)} h2{font-size:clamp(1.6rem,3vw,2.3rem)} h3{font-size:1.25rem}
p{color:var(--ink-soft)}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all var(--transition);text-align:center}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--white);color:var(--white)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--grey-light)}
.btn-ghost:hover{border-color:var(--navy)}
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--grey-light)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo-link{display:flex;align-items:center} .logo-link img{height:38px;width:auto}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{font-weight:600;font-size:.92rem;color:var(--ink);padding:6px 0}
.main-nav a:hover{color:var(--navy)} .main-nav a.active{color:var(--orange)}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:100%;left:-16px;background:var(--white);box-shadow:var(--shadow-md);border-radius:var(--radius);padding:10px;min-width:230px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all var(--transition)}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-menu a{display:block;padding:9px 12px;border-radius:4px;font-weight:500;font-size:.88rem}
.nav-dropdown-menu a:hover{background:var(--bg);color:var(--orange)}
.nav-cta{display:flex;align-items:center;gap:16px}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.mobile-toggle span{width:24px;height:2px;background:var(--navy);display:block}
.hero{background:linear-gradient(135deg,var(--navy-deeper) 0%,var(--navy) 55%,var(--navy-dark) 100%);color:var(--white);position:relative;overflow:hidden;padding:90px 0 100px}
.hero-network{position:absolute;top:0;right:-5%;width:60%;height:100%;opacity:.5;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:680px}
.hero h1{color:var(--white);margin:18px 0 20px}
.hero p.lead{color:rgba(255,255,255,.82);font-size:1.15rem;max-width:560px;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.trust-strip{background:var(--white);border-bottom:1px solid var(--grey-light);padding:36px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.trust-stat .num{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--orange);display:block}
.trust-stat .label{font-size:.85rem;color:var(--ink-soft);font-weight:500;margin-top:4px}
.section{padding:84px 0} .section-alt{background:var(--white)}
.section-head{max-width:640px;margin-bottom:48px}
.section-head h2{margin-top:14px} .section-head p{font-size:1.05rem;margin-top:14px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card{background:var(--white);border:1px solid var(--grey-light);border-radius:var(--radius);padding:28px 24px;transition:all var(--transition);display:flex;flex-direction:column}
.service-card:hover{border-color:var(--orange);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.service-icon{width:46px;height:46px;margin-bottom:16px}
.service-card h3{margin-bottom:8px;font-size:1.08rem}
.service-card p{font-size:.92rem;flex-grow:1;margin-bottom:14px}
.service-card .card-link{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:.06em}
.industries-strip{background:var(--navy-dark);padding:50px 0}
.industries-strip .section-head h2{color:var(--white)}
.industries-strip .section-head p{color:rgba(255,255,255,.7)}
.industry-pills{display:flex;gap:12px;flex-wrap:wrap}
.industry-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--white);padding:10px 20px;border-radius:30px;font-size:.9rem;font-weight:500}
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.process-step{position:relative;padding-top:8px}
.process-step .step-num{font-family:var(--font-display);font-size:2.4rem;font-weight:800;color:var(--grey-light);display:block;margin-bottom:8px}
.process-step h3{font-size:1.05rem;margin-bottom:8px} .process-step p{font-size:.9rem}
.node-grid{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px}
.node-tag{font-family:var(--font-mono);font-size:.84rem;font-weight:500;background:var(--white);border:1.5px solid var(--grey-light);color:var(--navy-dark);padding:8px 16px;border-radius:30px;transition:all var(--transition)}
.node-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;margin-right:8px}
.node-tag:hover{border-color:var(--orange);background:#FFF7F4}
.capability-block{background:var(--white);border:1px solid var(--grey-light);border-radius:var(--radius);padding:30px 32px;margin-bottom:20px}
.capability-block h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin-bottom:6px}
.capability-block h3::before{content:"";width:10px;height:10px;background:var(--orange);border-radius:2px;display:inline-block}
.capability-block .desc{font-size:.95rem;margin-bottom:4px}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.stat-callout{background:var(--bg-alt);border-left:4px solid var(--orange);padding:22px 26px;border-radius:0 var(--radius) var(--radius) 0;margin:28px 0;font-size:.95rem;color:var(--ink-soft)}
.stat-callout strong{color:var(--navy)}
.page-hero{background:var(--navy-dark);color:var(--white);padding:56px 0 64px}
.page-hero .breadcrumb{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.page-hero .breadcrumb a{color:rgba(255,255,255,.6)} .page-hero .breadcrumb a:hover{color:var(--orange)}
.page-hero h1{color:var(--white);margin:10px 0 14px;font-size:clamp(1.9rem,3.6vw,2.6rem)}
.page-hero p.lead{color:rgba(255,255,255,.78);max-width:620px;font-size:1.05rem}
.cta-band{background:linear-gradient(120deg,var(--orange) 0%,var(--orange-dark) 100%);padding:60px 0;text-align:center;color:var(--white)}
.cta-band h2{color:var(--white);margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.9);max-width:540px;margin:0 auto 28px}
.site-footer{background:var(--navy-deeper);color:rgba(255,255,255,.7);padding:60px 0 28px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px}
.footer-grid h4{color:var(--white);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;font-family:var(--font-mono)}
.footer-grid a{display:block;color:rgba(255,255,255,.65);margin-bottom:10px}
.footer-grid a:hover{color:var(--orange)}
.footer-logo img{height:34px;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{margin-bottom:18px} .form-group.full{grid-column:1/-1}
label{display:block;font-size:.85rem;font-weight:600;color:var(--navy-dark);margin-bottom:6px}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--grey-light);border-radius:var(--radius);font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:var(--white);transition:border-color var(--transition)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy)}
textarea{resize:vertical;min-height:120px}
.form-success{padding:32px;background:var(--bg-alt);border-radius:var(--radius);border-left:4px solid var(--orange)}
.form-success h3{margin-bottom:8px}
@media(max-width:900px){
  .main-nav,.nav-cta .btn-ghost{display:none} .mobile-toggle{display:flex}
  .trust-grid,.service-grid,.process-row{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .hero{padding:60px 0 70px} .hero-network{display:none}
}
@media(max-width:560px){
  .service-grid,.trust-grid,.process-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .hero-ctas{flex-direction:column} .hero-ctas .btn{width:100%;justify-content:center}
}

/* ============ SERVICE DETAIL CARDS (Daxfo-style) ============ */
.svc-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.svc-detail-card{background:var(--white);border:1px solid var(--grey-light);border-radius:var(--radius);padding:28px 24px;transition:all var(--transition);position:relative;overflow:hidden}
.svc-detail-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--orange)}
.svc-detail-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.svc-detail-card .svc-num{font-family:var(--font-display);font-size:2.8rem;font-weight:800;color:var(--grey-light);line-height:1;margin-bottom:10px;display:block}
.svc-detail-card h3{font-size:1.1rem;margin-bottom:8px}
.svc-detail-card p{font-size:.9rem;margin-bottom:14px}

/* ============ PLATFORM HERO BAND ============ */
.platform-band{background:var(--navy-deeper);padding:28px 0;border-bottom:3px solid var(--orange)}
.platform-band-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.platform-band-label{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);white-space:nowrap}
.platform-band-tags{display:flex;gap:10px;flex-wrap:wrap}
.platform-band-tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--font-mono);font-size:.82rem;padding:7px 16px;border-radius:4px;font-weight:600}
.platform-band-tag.featured{background:var(--orange);border-color:var(--orange)}

/* ============ INDUSTRY CARD GRID ============ */
.industry-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.industry-card{background:var(--white);border:1px solid var(--grey-light);border-radius:var(--radius);padding:16px 18px;font-size:.88rem;font-weight:600;color:var(--navy-dark);transition:all var(--transition);display:flex;align-items:center;gap:8px}
.industry-card::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.industry-card:hover{border-color:var(--orange);background:#FFF7F4}

/* ============ SOLUTION CARDS (product listing) ============ */
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.solution-card{background:var(--bg-alt);border-radius:var(--radius);padding:22px 20px;border:1px solid var(--grey-light);transition:all var(--transition)}
.solution-card:hover{border-color:var(--navy);background:var(--white)}
.solution-card .sol-label{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);font-weight:700;margin-bottom:6px}
.solution-card h3{font-size:1rem;margin-bottom:6px}
.solution-card p{font-size:.87rem}

/* ============ HIGHLIGHT CALLOUT ============ */
.highlight-callout{background:linear-gradient(135deg,var(--navy-dark),var(--navy));border-radius:var(--radius);padding:36px 40px;color:#fff;margin:40px 0}
.highlight-callout h3{color:#fff;font-size:1.4rem;margin-bottom:12px}
.highlight-callout p{color:rgba(255,255,255,.82);font-size:.98rem;max-width:680px}

/* ============ CLOUD SERVICES SPECIFIC ============ */
.cloud-service-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.cloud-svc-card{background:var(--white);border:1px solid var(--grey-light);border-radius:var(--radius);padding:26px 24px;transition:all var(--transition)}
.cloud-svc-card:hover{border-color:var(--orange);box-shadow:var(--shadow-md)}
.cloud-svc-card h3{font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.cloud-svc-card h3::before{content:"";width:10px;height:10px;background:var(--orange);border-radius:2px;flex-shrink:0}
.cloud-svc-card p{font-size:.9rem}

@media(max-width:900px){
  .svc-detail-grid{grid-template-columns:1fr 1fr}
  .industry-card-grid{grid-template-columns:repeat(2,1fr)}
  .solution-grid{grid-template-columns:1fr 1fr}
  .cloud-service-row{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svc-detail-grid,.solution-grid{grid-template-columns:1fr}
  .industry-card-grid{grid-template-columns:1fr 1fr}
}

/* ============ MOBILE RESPONSIVE — COMPREHENSIVE FIXES ============ */

/* Base touch improvements */
* { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* Mobile nav open state */
@media (max-width: 900px) {
  .main-nav {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--orange);
    padding: 16px 24px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 200;
    box-shadow: var(--shadow-md);
  }
  .main-nav.mobile-open {
    display: flex;
  }
  .main-nav a {
    font-size: 1rem;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px solid var(--grey-light);
  }
  .main-nav a:last-child { border-bottom: none; }

  /* Mobile dropdown — always visible when menu open */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 4px 0 4px 16px;
    min-width: auto;
    background: var(--bg);
    border-radius: var(--radius);
    margin: 4px 0;
  }
  .nav-dropdown-menu a {
    border-bottom: none;
    padding: 8px 12px;
    font-size: .92rem;
  }
  .nav-cta .btn-primary { display: none; }
  .nav-cta .btn-ghost { display: none; }
}

/* Fluid typography — prevents text overflow on small screens */
body { overflow-x: hidden; }
h1 { font-size: clamp(1.75rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1rem, 3vw, 1.25rem); }
p  { font-size: clamp(.88rem, 2.5vw, 1rem); }

/* Container padding on very small screens */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .hero { padding: 48px 0 56px; }
  .page-hero { padding: 40px 0 48px; }
  .section { padding: 56px 0; }
  .btn { padding: 12px 20px; font-size: .88rem; }
}

/* Hero CTA buttons stack on mobile */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: center; text-align: center; }
  .platform-band-inner { flex-direction: column; gap: 12px; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .trust-stat .num { font-size: 1.6rem; }
}

/* Service cards — full width on small mobile */
@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr !important; }
  .svc-detail-grid { grid-template-columns: 1fr !important; }
  .solution-grid { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; gap: 20px !important; }
  .process-row { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .methodology-row { grid-template-columns: 1fr !important; }
  .cloud-service-row { grid-template-columns: 1fr !important; }
  .erp-platform-grid { grid-template-columns: 1fr !important; }
  .differentiator-grid { grid-template-columns: 1fr !important; }
  .how-grid { grid-template-columns: 1fr !important; }
  .why-us-grid { grid-template-columns: 1fr !important; }
  .home-erp-grid { grid-template-columns: 1fr !important; }
}

/* Tables / grids that use inline style grid — override for mobile */
@media (max-width: 560px) {
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 700px) {
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Node tags wrap naturally — already flex-wrap but ensure on tiny screens */
.node-grid { gap: 8px; }
.node-tag { font-size: .78rem; padding: 6px 12px; }

/* Industry card grid */
@media (max-width: 560px) {
  .industry-card-grid { grid-template-columns: 1fr 1fr !important; }
  .promise-grid { grid-template-columns: 1fr 1fr !important; }
  .svc-type-grid { grid-template-columns: 1fr !important; }
}

/* Capability blocks inside two-col on mobile */
@media (max-width: 560px) {
  .capability-block { padding: 20px 18px; }
  .highlight-callout { padding: 24px 20px; }
  .stat-callout { padding: 16px 18px; }
}

/* Platform band tags wrap cleanly */
.platform-band-tags { gap: 8px; }
.platform-band-tag { font-size: .75rem; padding: 5px 12px; }

/* Footer bottom on mobile */
@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .footer-grid { gap: 28px; }
  .site-footer { padding: 40px 0 20px; }
}

/* CTA band on mobile */
@media (max-width: 560px) {
  .cta-band { padding: 40px 0; }
  .cta-band .btn { width: 100%; justify-content: center; }
}

/* Page hero breadcrumb on mobile */
@media (max-width: 560px) {
  .page-hero .breadcrumb { font-size: .78rem; }
  .page-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.6rem); }
}

/* Trust strip on very small screens */
@media (max-width: 360px) {
  .trust-grid { grid-template-columns: 1fr !important; }
}

/* Salesforce colour accent */
.sf-accent { color: #00A1E0; }
.sf-badge { background: #00A1E0 !important; }
