:root{
  --bg:#ffffff;
  --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-100:#f1f5f9;

  --brand:#0F3D89;
  --accent:#2F7DF6;
  --accent2:#22C55E;
  --accent3:#A855F7;

  --radius:18px;
  --shadow:0 6px 18px rgba(15,23,42,.06);
  --shadow-sm:0 4px 10px rgba(15,23,42,.05);
  --ring:0 0 0 3px rgba(47,125,246,.25);

  --grad: linear-gradient(135deg, var(--accent), var(--accent2));
  --grad-soft: linear-gradient(180deg, var(--ink-100), #fff);

  --about-photo: url('../images/about-main.jpg');
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--ink-700); background:var(--bg); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.bg-canvas{position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 50% at 50% 8%, rgba(47,125,246,.20), transparent 60%),radial-gradient(70% 55% at 28% 78%, rgba(34,197,94,.18), transparent 62%),radial-gradient(65% 60% at 78% 35%, rgba(168,85,247,.12), transparent 62%),linear-gradient(180deg, #f4f9ff 0%, #ffffff 45%, #f4fff7 100%); filter:saturate(1.05)}
.header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(160%) blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--ink-100)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; color:var(--ink-900); letter-spacing:-0.01em}
.brand-badge{width:32px;height:32px; border-radius:12px; display:grid; place-items:center; background:var(--brand); color:#fff; box-shadow:var(--shadow-sm)}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{color:var(--ink-700); letter-spacing:-0.01em; font-size:15px}
.nav-links a:hover{color:var(--brand)}
.nav-links a:focus-visible{outline:none; box-shadow:var(--ring); border-radius:10px; padding:2px 6px}
.burger{display:none}
.mobile{display:none;}
@media (max-width:860px){
  .nav-right{display:none}
  .burger{display:inline-flex; border:1px solid var(--ink-200); border-radius:12px; padding:8px}
  .mobile{position:absolute; inset:54px 0 auto 0; background:#fff; border-bottom:1px solid var(--ink-100)}
  .mobile.open{display:block}
  .mobile .wrap{padding:16px 20px 20px}
  .mobile a{display:block; padding:10px 0; color:var(--ink-700)}
}
section{padding:56px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.section-title{font-size:28px; color:var(--ink-900); margin:0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:580px){ .grid-3{grid-template-columns:1fr} }
.muted{color:var(--ink-600); font-size:14px}
.card, .about-panel, .mock, .cta{background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border:1px solid transparent; border-radius:18px}
.card{padding:18px}
.card:hover{box-shadow:var(--shadow-sm)}
.about-panel, .mock{padding:22px; box-shadow:var(--shadow)}
.about{position:relative; overflow:hidden; background:var(--grad-soft); padding:72px 0}
.about::before{content:""; position:absolute; inset:-10%; background:radial-gradient(60% 55% at 30% 30%, rgba(47,125,246,.20), transparent 60%),radial-gradient(60% 55% at 75% 35%, rgba(34,197,94,.18), transparent 62%),radial-gradient(60% 55% at 55% 80%, rgba(168,85,247,.12), transparent 62%); z-index:0; pointer-events:none}
.about-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center}
.about h1{font-size:44px; line-height:1.12; margin:0; color:var(--ink-900)}
.about h1 .accent-underline{background: linear-gradient(180deg, transparent 65%, rgba(47,125,246,.25) 65%); border-radius:8px; padding:0 .12em}
.about p.lead{font-size:18px; color:var(--ink-600); margin:14px 0 0}
.about-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px}
.about-cards .k{border:1px solid var(--ink-200); border-radius:16px; padding:14px; background:#fff}
.about-cards dt{font-size:13px; color:var(--ink-500)}
.about-cards dd{margin:4px 0 0; font-weight:800; font-size:18px; color:var(--ink-900)}
.about-photo{position:relative; aspect-ratio: 5 / 4; border-radius:22px; overflow:hidden; background:var(--about-photo) center/cover no-repeat, linear-gradient(180deg, #eef5ff, #eefbf3); box-shadow:var(--shadow); isolation:isolate}
.about-photo::before{content:""; position:absolute; inset:0; padding:2px; border-radius:22px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none}
.about-photo .overlay{position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(180deg, transparent, rgba(15,61,137,.18))}
.about-photo .caption{position:absolute; left:16px; bottom:14px; right:16px; color:#fff; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.35)}
@media (max-width:980px){ .about-grid{grid-template-columns:1fr} .about-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .about h1{font-size:36px} .about-cards{grid-template-columns:1fr 1fr} .about-photo{aspect-ratio:4/3} }
.hero{padding:36px 0 0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero h2{font-size:36px; line-height:1.15; margin:0; color:var(--ink-900)}
.headline-gradient{background: linear-gradient(135deg, var(--ink-900), #0b2a66 35%, var(--brand) 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{font-size:18px; color:var(--ink-600); margin:14px 0 0}
.kpis{margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{border:1px solid var(--ink-200); border-radius:16px; padding:14px; background:#fff}
.kpi dt{font-size:13px; color:var(--ink-500)}
.kpi dd{margin:4px 0 0; font-weight:800; font-size:18px; color:var(--ink-900)}
.mock-inner{height:320px; border-radius:18px; background:radial-gradient(60% 80% at 30% 20%, rgba(15,61,137,.12), transparent 60%),radial-gradient(60% 80% at 80% 70%, rgba(47,125,246,.10), transparent 60%),linear-gradient(180deg, #fff, var(--ink-100)); display:grid; place-items:center; color:var(--ink-600); font-weight:700}
.timeline{display:grid; gap:14px; margin-top:18px}
.step{display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start}
.dot{width:34px;height:34px;border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; box-shadow:0 2px 6px rgba(47,125,246,.25)}
.step h4{margin:2px 0 4px; font-size:16px; color:var(--ink-900)}
.badge{display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; color:#0b2455; background:linear-gradient(180deg, #e9f1ff, #e8fff1); border:1px solid rgba(47,125,246,.25)}
.faq{margin-top:20px}
.faq details{border:1px solid var(--ink-200); border-radius:16px; padding:14px 16px; background:#fff}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer; font-weight:700; color:var(--ink-900); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.form{display:grid; gap:12px; margin-top:18px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:680px){ .row{grid-template-columns:1fr} }
label{font-size:14px; color:var(--ink-600)}
input, select, textarea{ width:100%; padding:12px; border:1px solid var(--ink-200); border-radius:12px; background:#fff; color:var(--ink-900)}
input:focus, select:focus, textarea:focus{outline:none; box-shadow:var(--ring); border-color:var(--accent)}
.note{font-size:12px; color:var(--ink-500)}
.cta{padding:22px}
.footer{border-top:1px solid var(--ink-100); padding:24px 0; font-size:14px; color:var(--ink-600)}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{position:static; width:auto; height:auto; padding:8px 12px; background:var(--ink-100); border-radius:10px}



/* === Added by ChatGPT: image backgrounds for right-hand cards === */
.about-photo{
  background-image: url("../images/about-operations-hub.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep existing gradient/border effect on .mock by adding the image as the first layer */
.mock{
  background-image:
      url("../images/dashboard-sla.jpg"),
      linear-gradient(#fff,#fff),
      var(--grad-surface, radial-gradient(120% 120% at 100% 0%, #d9e8ff, #fff));
  background-origin: border-box, padding-box, border-box;
  background-clip: border-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, auto, auto;
}



/* Make the overlay in .about-photo subtle so the photo is visible */
.about-photo .overlay{
  background: rgba(255,255,255,0.0);
}



/* Ensure the image in the second block is visible */
.mock{ min-height: 360px; }
.mock .mock-inner{ display: none; }