/* ============================================================
   Infinity IT Solutions — shared stylesheet (all pages)
   Palette sampled from the client's own ERP product UI.
   ============================================================ */

:root{
  --teal-900:#0b4d54;
  --teal-800:#0d5960;
  --teal-700:#0f626a;
  --teal-600:#147a83;
  --teal-100:#e6f0ef;
  --teal-50:#f4f9f8;
  --teal-border:#cfe3e1;
  --success-bg:#e2f6ea;
  --success-text:#1f8a4c;
  --ink:#16181d;
  --ink-muted:#3d4552;
  --ink-soft:#8a919c;
  --border:#e6e8eb;
  --bg:#ffffff;
  --radius:14px;
  --maxw:1180px;
  --shadow-card:0 1px 2px rgba(16,24,32,.04);
  --shadow-lift:0 12px 32px -12px rgba(11,77,84,.22);

  /* secondary accent chips — used sparingly for color variety */
  --chip-teal-fg:#0f626a;   --chip-teal-bg:#e6f0ef;   --chip-teal-border:#cfe3e1;
  --chip-amber-fg:#a15c07;  --chip-amber-bg:#fbecd6;  --chip-amber-border:#f0d9ac;
  --chip-coral-fg:#b8412f;  --chip-coral-bg:#fbe3de;  --chip-coral-border:#f0c4ba;
  --chip-violet-fg:#5b4bc4; --chip-violet-bg:#ece9fb; --chip-violet-border:#d6d0f5;
  --chip-blue-fg:#1f6fae;   --chip-blue-bg:#e2f0fa;   --chip-blue-border:#c3e0f2;
  --chip-pink-fg:#a83c7c;   --chip-pink-bg:#f8e3ef;   --chip-pink-border:#edc3dd;

  /* brand colors sampled from the Infinity IT Solutions logo (navy/cyan) */
  --brand-navy:#1f346d;
  --brand-navy-deep:#152449;
  --brand-blue:#2f5aa8;
  --brand-cyan:#3fa7dc;
  --brand-cyan-tint:#e6f4fb;

  /* FawtaraX brand colors — sampled directly from their official logo mark */
  --fx-gold:#b28e60;
  --fx-gold-deep:#8a6d3f;
  --fx-dark:#4e5647;
  --fx-cream:#faf6ef;
  --fx-cream-deep:#f2e6d0;

  /* punchier "tile" tints — used for vivid card backgrounds/icon fills (kept out of amber/gold, which reads as FawtaraX's brand color) */
  --tile-teal:#bfe6e2;
  --tile-blue:#bfdcf7;
  --tile-violet:#d6c9f7;
  --tile-coral:#f8c3b3;
  --tile-pink:#f6c0e0;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:'Poppins',system-ui,sans-serif;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
@media (max-width:720px){ .section{padding:56px 0;} }

.eyebrow{font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--teal-700);margin-bottom:14px;}
.section-head p{color:var(--ink-muted);font-size:16px;line-height:1.65;margin-top:14px;max-width:640px;}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:9px;font-size:15px;font-weight:600;white-space:nowrap;border:1px solid transparent;transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--teal-700);color:#fff;}
.btn-primary:hover{background:var(--teal-900);}
.btn-outline{border-color:var(--border);color:var(--ink);background:#fff;}
.btn-outline:hover{border-color:var(--teal-700);color:var(--teal-700);}
.btn-outline-invert{border-color:rgba(255,255,255,.32);color:#fff;background:transparent;}
.btn-outline-invert:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-sm{height:40px;padding:0 18px;font-size:14px;}

.divider{height:1px;background:var(--border);border:none;}

.card{
  position:relative;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  background:linear-gradient(150deg, #ffffff 0%, var(--teal-50) 55%, var(--teal-100) 100%);
  box-shadow:0 26px 52px -22px rgba(15,38,74,.48), 0 4px 16px rgba(15,38,74,.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 380px at 88% -25%, rgba(63,167,220,.22), transparent 70%);
  pointer-events:none;z-index:0;
}
.card > *{position:relative;z-index:1;}
.card h3{font-weight:800;letter-spacing:-.01em;}
.pillar-card:hover,.overview-card:hover,.module-card:hover,.hrms-card:hover{transform:translateY(-6px);box-shadow:0 34px 64px -20px rgba(15,38,74,.5), 0 6px 18px rgba(15,38,74,.16);}
.module-card-icon,.hrms-card-icon{transition:transform .3s ease;}
.module-card:hover .module-card-icon,.hrms-card:hover .hrms-card-icon{transform:scale(1.12) rotate(-4deg);}

.crumb{font-size:13px;color:var(--ink-soft);}
.crumb a:hover{color:var(--teal-700);}

/* ---------------- Header / Nav ---------------- */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.nav-toggle{display:none;}

.nav-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:clamp(10px,1.8vw,18px);padding-bottom:clamp(10px,1.8vw,18px);}
.brand{display:flex;align-items:center;gap:16px;font-family:'Poppins',sans-serif;font-weight:700;color:var(--ink);flex:none;min-width:0;}
/* fluid, scales continuously with viewport width instead of one fixed size + a single breakpoint —
   keeps the header from over-claiming vertical space on a wider-but-shorter display. */
.brand img{height:clamp(52px,5.6vw,96px);width:auto;flex:none;}
.brand-name{display:block;font-size:clamp(24px,2.7vw,40px);line-height:1.08;white-space:nowrap;}
.brand small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:12px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;margin-top:4px;}

.nav-bottom-wrap{border-top:1px solid var(--border);}
.nav-links{display:flex;align-items:center;gap:28px;padding:clamp(8px,1vw,12px) 0;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-muted);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s ease, border-color .15s ease;}
.nav-links a:hover{color:var(--teal-700);}
.nav-links a.active{color:var(--teal-700);border-bottom-color:var(--teal-700);font-weight:600;}

.nav-right{display:flex;align-items:center;gap:16px;flex:none;}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border-radius:8px;cursor:pointer;}
.hamburger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease, opacity .2s ease;transform-origin:center;}
.nav-toggle:checked ~ .nav-top .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle:checked ~ .nav-top .hamburger span:nth-child(2){opacity:0;}
.nav-toggle:checked ~ .nav-top .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:920px){
  .brand{flex:1 1 auto;min-width:0;}
  .brand > div{min-width:0;}
  .brand img{height:56px;}
  .brand-name{font-size:clamp(20px,5.6vw,26px);white-space:normal;overflow-wrap:break-word;}
  .brand small{font-size:10px;letter-spacing:.03em;margin-top:2px;}
  .nav-bottom-wrap{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-top:1px solid var(--border);
    box-shadow:0 16px 24px -18px rgba(16,24,32,.18);
  }
  .nav-links{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 24px 18px;}
  .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid var(--border);}
  .nav-links a.active{border-bottom:1px solid var(--border);}
  .nav-toggle:checked ~ .nav-bottom-wrap{display:block;}
  .hamburger{display:flex;}
  .nav-cta-desktop{display:none;}
}

/* short-viewport safeguard — a wide-but-shorter monitor (common on Windows laptops/desktops,
   e.g. 1366x768 or a browser window without much vertical room) should get a visibly
   more compact header even at desktop widths, not just at narrow widths. */
@media (min-width:921px) and (max-height:820px){
  .brand img{height:clamp(40px,4vw,58px);}
  .brand-name{font-size:clamp(18px,2vw,26px);}
  .nav-top{padding-top:6px;padding-bottom:6px;}
  .nav-links{padding:5px 0;}
}

/* ---------------- Hero — bold dark surface ---------------- */
.hero{
  padding:76px 0 88px;
  background:
    radial-gradient(760px 440px at 88% -12%, rgba(63,167,220,.30), transparent 60%),
    radial-gradient(680px 440px at 6% 8%, rgba(95,215,224,.14), transparent 62%),
    radial-gradient(620px 400px at 30% 115%, rgba(245,166,42,.16), transparent 60%),
    linear-gradient(165deg, var(--brand-navy-deep) 0%, var(--teal-900) 130%);
}
.hero .eyebrow{color:#8fe1ea;}
.hero h1{color:#fff;}
.hero p.lead{color:#d8e6f2;}
.hero .tag-pill{background:#ffffff;border-color:#ffffff;color:var(--brand-navy-deep);font-weight:700;}
.hero .tag-pill.chip-amber{background:#ffb648;border-color:#ffb648;color:#3d2400;font-weight:700;}
.hero .tag-pill.chip-coral{background:#ff8f76;border-color:#ff8f76;color:#4a0f04;font-weight:700;}
.hero .btn-outline{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.06);}
.hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff;}

/* ---------------- Brand wordmark styling (InfiTax / FawtaraX) ---------------- */
.wm{white-space:nowrap;}
.wm-big{font-size:1.16em;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:44px;line-height:1.16;}
.hero p.lead{margin-top:20px;font-size:17px;line-height:1.65;color:#e8f1f9;max-width:560px;}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.hero-tags{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.hero .partner-badge{animation:fadeUp .7s ease both;}
.hero .eyebrow{animation:fadeUp .7s .06s ease both;}
.hero h1{animation:fadeUp .7s .08s ease both;}
.hero p.lead{animation:fadeUp .7s .16s ease both;}
.hero-cta{animation:fadeUp .7s .24s ease both;}
.hero-tags{animation:fadeUp .7s .32s ease both;}
.hero .shot-card{animation:fadeUp .8s .2s ease both;}
.tag-pill{font-size:12.5px;font-weight:600;color:var(--teal-700);background:var(--teal-100);border:1px solid var(--teal-border);padding:6px 12px;border-radius:20px;}
.tag-pill.chip-amber{color:var(--chip-amber-fg);background:var(--chip-amber-bg);border-color:var(--chip-amber-border);}
.tag-pill.chip-coral{color:var(--chip-coral-fg);background:var(--chip-coral-bg);border-color:var(--chip-coral-border);}

/* ---------------- Accent chip helpers (color variety) ---------------- */
.chip-teal{color:var(--chip-teal-fg);}
.chip-amber{color:var(--chip-amber-fg);}
.chip-coral{color:var(--chip-coral-fg);}
.chip-violet{color:var(--chip-violet-fg);}
.chip-blue{color:var(--chip-blue-fg);}
.chip-pink{color:var(--chip-pink-fg);}

.icon-circle{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;}
.icon-circle.chip-teal{background:var(--tile-teal);color:var(--chip-teal-fg);}
.icon-circle.chip-amber{background:var(--chip-amber-bg);color:var(--chip-amber-fg);}
.icon-circle.chip-coral{background:var(--tile-coral);color:var(--chip-coral-fg);}
.icon-circle.chip-violet{background:var(--tile-violet);color:var(--chip-violet-fg);}
.icon-circle.chip-blue{background:var(--tile-blue);color:var(--chip-blue-fg);}
.icon-circle.chip-pink{background:var(--tile-pink);color:var(--chip-pink-fg);}

.card.chip-border-teal{border-top:4px solid var(--chip-teal-fg);box-shadow:0 22px 44px -22px rgba(15,98,106,.38), 0 3px 10px rgba(15,38,74,.10);}
.card.chip-border-amber{border-top:4px solid var(--chip-amber-fg);box-shadow:0 22px 44px -22px rgba(161,92,7,.32), 0 3px 10px rgba(15,38,74,.10);}
.card.chip-border-coral{border-top:4px solid var(--chip-coral-fg);box-shadow:0 22px 44px -22px rgba(184,65,47,.32), 0 3px 10px rgba(15,38,74,.10);}
.card.chip-border-violet{border-top:4px solid var(--chip-violet-fg);box-shadow:0 22px 44px -22px rgba(91,75,196,.32), 0 3px 10px rgba(15,38,74,.10);}
.card.chip-border-blue{border-top:4px solid var(--chip-blue-fg);box-shadow:0 22px 44px -22px rgba(31,111,174,.32), 0 3px 10px rgba(15,38,74,.10);}
.card.chip-border-pink{border-top:4px solid var(--chip-pink-fg);box-shadow:0 22px 44px -22px rgba(168,60,124,.32), 0 3px 10px rgba(15,38,74,.10);}

/* Vivid, distinctly-colored tile backgrounds (amber intentionally excluded — that hue reads as FawtaraX's gold) */
.card.chip-border-teal{background:linear-gradient(145deg, #ffffff 0%, var(--chip-teal-bg) 42%, var(--tile-teal) 145%);}
.card.chip-border-blue{background:linear-gradient(145deg, #ffffff 0%, var(--chip-blue-bg) 42%, var(--tile-blue) 145%);}
.card.chip-border-violet{background:linear-gradient(145deg, #ffffff 0%, var(--chip-violet-bg) 42%, var(--tile-violet) 145%);}
.card.chip-border-coral{background:linear-gradient(145deg, #ffffff 0%, var(--chip-coral-bg) 42%, var(--tile-coral) 145%);}
.card.chip-border-pink{background:linear-gradient(145deg, #ffffff 0%, var(--chip-pink-bg) 42%, var(--tile-pink) 145%);}

.shot-card{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lift);}
.shot-card img{display:block;width:100%;height:auto;}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
}

/* ---------------- Hero — stacked layout (big, prominent product shot) ---------------- */
.hero-copy{max-width:740px;}
.hero-visual{position:relative;margin-top:52px;}
.hero-visual::before{
  content:"";position:absolute;inset:-10% -6% -10% -6%;
  background:
    radial-gradient(560px 300px at 18% 15%, rgba(63,167,220,.22), transparent 65%),
    radial-gradient(560px 300px at 85% 75%, rgba(245,166,42,.16), transparent 65%);
  z-index:0;
  pointer-events:none;
}
.shot-card-lg{
  position:relative;z-index:1;
  max-width:1020px;margin:0 auto;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 34px 70px -24px rgba(11,77,84,.38);
}
.shot-card-lg img{display:block;width:100%;height:auto;}
@media (max-width:720px){
  .hero-visual{margin-top:36px;}
}

/* ---------------- Pillars / Cards grids ---------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
@media (max-width:920px){ .grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
@media (max-width:640px){ .grid-3{grid-template-columns:1fr;} }

.pillar-card .num{font-size:13px;font-weight:700;color:var(--teal-700);margin-bottom:10px;}
.pillar-card p{font-size:14.5px;line-height:1.6;color:var(--ink-muted);}

.tint{background:var(--teal-50);}
.section.tint{
  background:
    radial-gradient(700px 420px at 92% -10%, rgba(63,167,220,.24), transparent 60%),
    radial-gradient(620px 460px at -6% 108%, rgba(95,215,224,.14), transparent 62%),
    linear-gradient(165deg, var(--brand-navy-deep) 0%, var(--teal-900) 130%);
}
.section.tint .section-head .eyebrow{color:#8fe1ea;}
.section.tint h2{color:#fff;}
.section.tint .section-head p{color:#d8e6f2;}
.section.tint .overview-card.cta-dark{
  background:linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-blue) 120%);
  border-color:transparent;
  box-shadow:0 22px 44px -20px rgba(20,60,131,.5), 0 3px 10px rgba(15,38,74,.14);
}
.section.tint .overview-card.cta-dark .learn-more,
.section.tint .overview-card.cta-dark .btn-outline-invert{color:#fff;}

/* ---------------- Brand graphic texture — dot grid + soft blobs + logo watermark ----------------
   Fills previously flat/pale sections (hero, tinted sections, page headers, contact) with a subtle
   graphic treatment in the Infinity IT Solutions brand colors (navy/blue/cyan). */
.hero, .section, .page-header, #contact{position:relative;overflow:hidden;}
.hero > .wrap, .section > .wrap, .page-header > .wrap, #contact > .wrap{position:relative;z-index:1;}
.hero::before, .section::before, .page-header::before, #contact::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(47,90,168,.065) 1.4px, transparent 1.6px);
  background-size:30px 30px;
}
/* dark-surface sections get light dots instead (navy dots would vanish on a dark bg) */
.hero::before, .section.tint::before, .page-header::before, #contact::before{
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.6px);
}
.hero::after, .section.tint::after, .page-header::after, #contact::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  background:url('assets/images/icon.png') no-repeat center/contain;
  opacity:.14;
  filter:brightness(0) invert(1);
}
.hero::after{width:560px;height:560px;right:-120px;top:-100px;}
.section.tint::after{width:480px;height:480px;left:-110px;bottom:-90px;}
.page-header::after{width:320px;height:320px;right:-50px;top:-70px;}
#contact::after{width:400px;height:400px;left:-90px;top:-30px;}
@media (max-width:720px){
  .hero::after{width:340px;height:340px;right:-90px;top:-60px;}
  .section.tint::after{width:300px;height:300px;left:-80px;bottom:-60px;}
  .page-header::after{width:220px;height:220px;right:-40px;top:-40px;}
  #contact::after{width:260px;height:260px;left:-60px;top:-20px;}
}

/* overview cards on Home */
.overview-card{display:flex;flex-direction:column;gap:10px;}
.overview-card .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.08em;}
.overview-card h3{font-size:17.5px;}
.overview-card p{font-size:15.5px;font-weight:500;line-height:1.62;color:var(--ink-muted);}
.learn-more{font-size:13.5px;font-weight:700;color:var(--teal-700);display:inline-flex;align-items:center;gap:5px;margin-top:6px;}
.learn-more svg{transition:transform .15s ease;}
.overview-card:hover .learn-more svg{transform:translateX(3px);}
.overview-card.cta-dark{background:var(--brand-navy);border-color:var(--brand-navy);align-items:flex-start;justify-content:center;}
.overview-card.cta-dark .label{color:#fff;font-size:15px;font-weight:600;}
.overview-card.cta-dark p{color:rgba(255,255,255,.72);}

/* ---------------- Check list ---------------- */
.check-list{display:flex;flex-direction:column;gap:12px;}
.check-item{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;font-weight:500;line-height:1.62;color:#333844;}
.check-item svg{flex:none;margin-top:3px;color:var(--teal-700);}

/* ---------------- Module cards — graphical icon + tick-list treatment ---------------- */
.module-card .tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--teal-700);}
.module-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.module-card-icon{width:48px;height:48px;border-radius:13px;flex:none;box-shadow:0 8px 16px -8px rgba(15,38,74,.35);}
.module-card-icon svg{width:23px;height:23px;}
.module-card h3{font-size:19px;margin-bottom:0;}
.module-card-divider{height:3px;width:38px;border-radius:2px;margin:14px 0 16px;}
.feature-tick-list{display:flex;flex-direction:column;gap:10px;}
.feature-tick-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:500;line-height:1.62;color:var(--ink-muted);}
.feature-tick-list .tick{flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;background:var(--teal-100);color:var(--teal-700);}
.feature-tick-list .tick svg{width:11px;height:11px;}

/* ---------------- Custom Dev spotlight cards (rich colored fill, not plain white) ---------------- */
.customdev-card{border:none;color:#fff;padding:34px 28px;box-shadow:0 28px 54px -20px rgba(15,38,74,.5), 0 4px 16px rgba(15,38,74,.16);}
.customdev-card::after{display:none;}
.customdev-card.chip-border-teal{background:linear-gradient(155deg, var(--brand-navy) 0%, var(--chip-teal-fg) 170%);border-top:none;}
.customdev-card.chip-border-blue{background:linear-gradient(155deg, var(--brand-navy) 0%, var(--chip-blue-fg) 170%);border-top:none;}
.customdev-card.chip-border-violet{background:linear-gradient(155deg, var(--brand-navy) 0%, var(--chip-violet-fg) 170%);border-top:none;}
.customdev-card .icon-circle{background:rgba(255,255,255,.18);color:#fff;}
.customdev-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.customdev-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:28px;color:rgba(255,255,255,.4);}
.customdev-card h3{color:#fff;font-size:19.5px;}
.customdev-card p{color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.65;}

/* ---------------- Stat banner — a unified strip of icon+label+description segments, used in place of separate plain text-box tiles (Home intro points, Fleet stats) ---------------- */
.stat-banner{
  display:flex;flex-wrap:wrap;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg, var(--brand-navy-deep) 0%, var(--teal-900) 130%);
  box-shadow:0 28px 54px -22px rgba(15,38,74,.5), 0 4px 16px rgba(15,38,74,.16);
}
.stat-item{position:relative;flex:1 1 240px;display:flex;gap:16px;align-items:flex-start;padding:32px 28px;}
.stat-item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.18);}
.stat-item:first-child::before{display:none;}
.stat-item-icon{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none;color:#8fe1ea;transition:transform .3s ease;}
.stat-item-icon svg{width:22px;height:22px;}
.stat-item:hover .stat-item-icon{transform:scale(1.12) rotate(-4deg);}
.stat-item-label{font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;color:#fff;margin-bottom:4px;}
.stat-item-desc{font-size:13.5px;line-height:1.55;color:#d8e6f2;}
@media (max-width:820px){ .stat-item::before{display:none;} }

/* ---------------- Numbered list (HRMS) ---------------- */
.numbered-row{
  display:flex;gap:20px;align-items:flex-start;
  padding:22px 24px;margin-bottom:14px;border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(155deg, #ffffff 0%, var(--teal-50) 140%);
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.numbered-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.numbered-row:last-child{margin-bottom:0;}
.numbered-row .idx{width:38px;height:38px;border-radius:9px;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;}
.numbered-row .title{font-size:16px;font-weight:700;margin-bottom:5px;}
.numbered-row p{font-size:14.5px;line-height:1.6;color:var(--ink-muted);}

/* ---------------- Feature image placeholder (used sparingly) ---------------- */
.visual-card{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-card);}
.visual-card img{width:100%;height:auto;display:block;}

.visual-placeholder{
  border-radius:var(--radius);border:1px dashed var(--teal-border);
  background:repeating-linear-gradient(45deg, var(--teal-50), var(--teal-50) 12px, #fff 12px, #fff 24px);
  display:flex;align-items:center;justify-content:center;
  color:var(--teal-700);font-size:14px;font-weight:600;text-align:center;padding:24px;min-height:340px;
}

/* ---------------- Page header (dedicated pages) — bold dark surface ---------------- */
.page-header{
  padding:52px 0 44px;
  background:
    radial-gradient(640px 360px at 92% -20%, rgba(63,167,220,.28), transparent 60%),
    radial-gradient(520px 340px at -6% 100%, rgba(95,215,224,.14), transparent 62%),
    linear-gradient(165deg, var(--brand-navy-deep) 0%, var(--teal-900) 130%);
}
.page-header h1{font-size:38px;max-width:760px;margin-top:14px;color:#fff;}
.page-header p.lead{font-size:16px;line-height:1.65;color:#d8e6f2;max-width:680px;margin-top:16px;}
.page-header .eyebrow{color:#8fe1ea;}
.page-header .crumb{color:rgba(255,255,255,.55);}
.page-header .crumb a:hover{color:#fff;}

/* ---------------- Scroll-reveal (progressive enhancement) ---------------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in-view{opacity:1;transform:none;}
.reveal:nth-child(1){transition-delay:.04s;}
.reveal:nth-child(2){transition-delay:.10s;}
.reveal:nth-child(3){transition-delay:.16s;}
.reveal:nth-child(4){transition-delay:.22s;}
.reveal:nth-child(5){transition-delay:.28s;}
.reveal:nth-child(6){transition-delay:.34s;}

/* ---------------- Final CTA ---------------- */
.cta-band{
  padding:96px 0;
  background:
    radial-gradient(520px 320px at 12% 0%, rgba(245,166,42,.16), transparent 60%),
    linear-gradient(135deg, var(--teal-700), var(--teal-900));
}
.cta-band .wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
.cta-band h2{font-size:32px;color:#fff;}
.cta-band p{font-size:16px;color:rgba(255,255,255,.85);max-width:480px;}

/* ---------------- Contact (home page) — bold dark surface ---------------- */
#contact{
  background:
    radial-gradient(560px 360px at 100% 0%, rgba(63,167,220,.26), transparent 60%),
    radial-gradient(480px 320px at 0% 100%, rgba(95,215,224,.12), transparent 62%),
    linear-gradient(165deg, var(--brand-navy-deep) 0%, var(--teal-900) 130%);
}
#contact .eyebrow{color:#8fe1ea;}
#contact h2{color:#fff;}
#contact .section-head p{color:#d8e6f2;}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-item{
  display:flex;gap:14px;align-items:flex-start;padding:18px;
  border:1px solid var(--border);border-radius:12px;
  background:linear-gradient(155deg, #ffffff 0%, var(--teal-50) 150%);
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.contact-item + .contact-item{margin-top:14px;}
.contact-item .ic{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;}
.contact-item .label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px;}
.contact-item .value{font-size:15px;font-weight:600;}
.contact-form{
  border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  background:linear-gradient(160deg, #ffffff 0%, var(--teal-50) 160%);
  box-shadow:var(--shadow-card);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-muted);margin-bottom:6px;}
.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:9px;padding:11px 12px;font-size:14.5px;font-family:inherit;color:var(--ink);background:#fbfcfc;}
.field input:focus,.field textarea:focus{outline:2px solid var(--teal-600);outline-offset:1px;}
.field{margin-bottom:14px;}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}

/* ---------------- Footer ---------------- */
footer{background:linear-gradient(155deg, var(--teal-900) 55%, var(--brand-navy-deep));color:rgba(255,255,255,.78);padding:64px 0 28px;}
footer .brand-line{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;}
footer .brand-line img{height:46px;}
footer .brand-line small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:2px;}
footer p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);max-width:260px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;}
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-col-title{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;}
.footer-links{display:flex;flex-direction:column;gap:11px;}
.footer-links a{font-size:13.8px;color:rgba(255,255,255,.78);}
.footer-links a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.5);padding-top:28px;margin-top:40px;border-top:1px solid rgba(255,255,255,.12);}

/* ---------------- WhatsApp floating button ---------------- */
.whatsapp-fab{
  position:fixed;right:22px;bottom:22px;z-index:95;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -6px rgba(11,77,84,.45);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:fadeUp .6s .5s ease both;
}
.whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 14px 32px -6px rgba(11,77,84,.5);}
.whatsapp-fab svg{width:28px;height:28px;position:relative;z-index:1;}
.whatsapp-fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.55;
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.5;}
  100%{transform:scale(1.9);opacity:0;}
}
@media (max-width:720px){
  .whatsapp-fab{right:16px;bottom:16px;width:52px;height:52px;}
  .whatsapp-fab svg{width:25px;height:25px;}
}

/* ---------------- Architecture diagram — dark glass/gradient treatment ---------------- */
.arch-diagram-wrap{
  position:relative;border-radius:26px;
  background:
    radial-gradient(620px 360px at 10% 6%, rgba(63,167,220,.30), transparent 60%),
    radial-gradient(560px 380px at 94% 92%, rgba(20,122,131,.34), transparent 62%),
    linear-gradient(160deg, var(--brand-navy-deep), var(--teal-900) 130%);
  padding:40px 24px 30px;
  box-shadow:0 30px 64px -22px rgba(11,36,73,.5);
  overflow-x:auto;
}
.arch-diagram-wrap svg{display:block;margin:0 auto;width:100%;max-width:1040px;height:auto;min-width:680px;}

.arch-outer-rect{stroke:rgba(255,255,255,.16);stroke-width:1.4;}
.arch-outer-pill{fill:url(#gradPill);}
.arch-outer-pill-fill{fill:url(#gradPill);}
.arch-outer-label{fill:#ffffff;font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;}

.arch-core-box{fill:rgba(255,255,255,.07);stroke-width:1.4;filter:url(#archSoftShadow);}
.arch-core-box-teal{stroke:#5fd7e0;}
.arch-core-box-blue{stroke:#7bb9f5;}
.arch-core-box-violet{stroke:#bfa8fb;}
.arch-core-box-amber{stroke:#fbcf6b;}
.arch-core-text{fill:#f3f7fb;font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;}

.arch-invoicing-box{stroke:rgba(255,255,255,.28);stroke-width:1.2;}
.arch-invoicing-text{fill:#ffffff;font-family:'Poppins',sans-serif;font-weight:700;font-size:17px;}
.arch-invoicing-text-sub{fill:rgba(255,255,255,.82);font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;}

.arch-asp-box{stroke:rgba(255,255,255,.28);stroke-width:1.2;}
.arch-asp-eyebrow{fill:rgba(255,255,255,.85);font-family:'Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
.arch-asp-text{fill:#ffffff;font-family:'Poppins',sans-serif;font-weight:700;font-size:17px;}
.arch-asp-text-sub{fill:rgba(255,255,255,.82);font-family:'Inter',sans-serif;font-weight:500;font-size:11px;}

.arch-ota-box{stroke:rgba(63,167,220,.55);stroke-width:1.4;}
.arch-ota-eyebrow{fill:rgba(255,255,255,.85);font-family:'Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
.arch-ota-text{fill:#ffffff;font-family:'Poppins',sans-serif;font-weight:700;font-size:17px;}

.arch-wm-big{font-size:1.15em;}

.arch-badge{stroke:none;}
.arch-badge-teal{fill:rgba(95,215,224,.20);}
.arch-badge-blue{fill:rgba(123,185,245,.20);}
.arch-badge-violet{fill:rgba(191,168,251,.20);}
.arch-badge-amber{fill:rgba(251,207,107,.22);}
.arch-badge-invoicing{fill:rgba(255,255,255,.20);}
.arch-badge-asp{fill:rgba(255,255,255,.20);}
.arch-badge-white{fill:rgba(255,255,255,.20);}

.arch-badge-icon{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.arch-badge-icon-teal{stroke:#5fd7e0;}
.arch-badge-icon-blue{stroke:#7bb9f5;}
.arch-badge-icon-violet{stroke:#bfa8fb;}
.arch-badge-icon-amber{stroke:#fbcf6b;}
.arch-badge-icon-invoicing{stroke:#ffffff;}
.arch-badge-icon-asp{stroke:#ffffff;}
.arch-badge-icon-white{stroke:#ffffff;}

.arch-connector{stroke:#7fdee7;stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:8 8;animation:archFlow 1s linear infinite;}
@keyframes archFlow{ to{ stroke-dashoffset:-32; } }
.arch-connector-arrow{fill:#8fe1ea;}

.arch-legend{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;}
.arch-legend span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:6px 14px;background:rgba(255,255,255,.06);
}
.arch-legend span b{color:#ffffff;font-weight:700;}
.arch-legend span i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;}
.arch-legend span.leg-teal i{background:#5fd7e0;}
.arch-legend span.leg-blue i{background:#7bb9f5;}
.arch-legend span.leg-cyan i{background:#9be8f0;}

/* ---------------- Partnership panel — grounds the FawtaraX partnership copy so it doesn't float on plain white ---------------- */
.partnership-panel{
  position:relative;overflow:hidden;
  border:1px solid #ddc7a3;border-radius:22px;
  padding:44px 46px;
  background:linear-gradient(150deg, var(--fx-cream) 0%, #ffffff 55%, var(--fx-cream-deep) 145%);
  box-shadow:0 30px 58px -26px rgba(120,90,40,.35), 0 4px 14px rgba(15,38,74,.08);
}
.partnership-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 300px at 100% -20%, rgba(178,142,96,.16), transparent 70%);
}
.partnership-panel > *{position:relative;z-index:1;}
@media (max-width:720px){ .partnership-panel{padding:32px 26px;} }

/* ---------------- "Powered by" partner badge — FawtaraX's own brand colors ---------------- */
.partner-badge{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid #ddc7a3;border-radius:12px;
  padding:10px 18px;
  background:linear-gradient(155deg, var(--fx-cream) 0%, var(--fx-cream-deep) 140%);
  box-shadow:0 10px 22px -12px rgba(120,90,40,.4);
}
.partner-badge .pb-mark{height:26px;width:auto;flex:none;}
.partner-badge .pb-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fx-gold-deep);}
.partner-badge .pb-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--fx-dark);}

/* a large standalone rendering of just the FawtaraX mark — no repeated text label */
.partner-mark-xl{width:clamp(140px,16vw,200px);height:auto;filter:drop-shadow(0 22px 40px rgba(120,90,40,.32));}
@media (max-width:720px){ .partner-mark-xl{width:120px;} }