/* ===========================================================
   Marktech Medicals — design tokens
   =========================================================== */
:root{
  --navy: #0E2846;
  --navy-2: #163a63;
  --ink: #16233A;
  --blue: #1965AF;
  --blue-deep: #0E4E88;
  --blue-tint: #EAF2FB;
  --steel: #EEF1F4;
  --paper: #FAFAF9;
  --line: #DCE3EA;
  --signal: #2E9E5B;
  --signal-tint: #E7F6ED;

  --display: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--display);
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
a{ color: var(--blue); text-decoration: none; }
img{ max-width: 100%; display:block; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.eyebrow{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  display:flex; align-items:center; gap:.5em;
  margin-bottom: .9em;
}
.eyebrow::before{ content:"+"; font-weight:700; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

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

/* ===========================================================
   Plus-mark system — the brand mark used as real UI grammar
   =========================================================== */

/* + bullets, drawn from the logo mark rather than a generic dot */
.plus-list{ list-style: none; margin: 0; padding: 0; }
.plus-list li{
  position: relative;
  padding-left: 1.6em;
  margin-bottom: .6em;
  font-family: var(--body);
}
.plus-list li::before{
  content:"+";
  position:absolute; left:0; top:-2px;
  font-family: var(--mono);
  font-weight:700;
  color: var(--blue);
  font-size: 1.05em;
}

/* vitals rule: a section divider that ticks upward into a plus,
   standing in for an ECG-style trace between sections */
.vitals-rule{
  width:100%; height:34px;
  margin: 0 auto;
}
.vitals-rule svg{ width:100%; height:100%; display:block; }
.vitals-rule path{ fill:none; stroke: var(--line); stroke-width:2; }
.vitals-rule .tick{ stroke: var(--blue); }

/* cross mark, built from CSS (echoes the logo) */
.cross-mark{
  position: relative;
  width: 46px; height:46px;
}
.cross-mark::before, .cross-mark::after{
  content:""; position:absolute; background: var(--blue); border-radius:4px;
}
.cross-mark::before{ left:16px; top:0; width:14px; height:46px; }
.cross-mark::after{ left:0; top:16px; width:46px; height:14px; }

/* ===========================================================
   Header / nav
   =========================================================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(250,250,249,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:.7em; }
.brand img{ height: 40px; width:auto; }
.brand-name{ font-family: var(--display); font-weight:700; color:var(--navy); font-size:1.05rem; letter-spacing:-.01em; }

.nav-links{ display:flex; align-items:center; gap:2em; list-style:none; margin:0; padding:0; }
.nav-links a{
  color: var(--ink); font-weight:500; font-size:.95rem;
  padding: 6px 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--blue);
  transition: width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--blue); }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--body); font-weight:600; font-size:.92rem;
  padding: 11px 22px; border-radius: 3px;
  border: 1.5px solid var(--navy);
  color: var(--navy); background: transparent;
  cursor:pointer; transition: all .18s ease;
}
.btn:hover{ background: var(--navy); color:#fff; }
.btn-solid{ background: var(--blue); border-color: var(--blue); color:#fff; }
.btn-solid:hover{ background: var(--blue-deep); border-color: var(--blue-deep); color:#fff; }
.btn-lg{ padding: 14px 28px; font-size: 1rem; }

.nav-toggle{ display:none; }

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  padding: 84px 0 64px;
  background:
    radial-gradient(700px 380px at 88% -10%, var(--blue-tint), transparent 70%),
    var(--paper);
  border-bottom: 1px solid var(--line);
  overflow:hidden;
}
.hero .wrap{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items:center; }
.hero h1{
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  max-width: 12ch;
}
.hero .lede{ font-size: 1.12rem; color:#3a4a5f; max-width: 46ch; margin-bottom: 1.6em; }
.hero-ctas{ display:flex; gap: 14px; flex-wrap:wrap; }

.hero-mark{
  width: 220px; height:220px; margin: 0 auto; position:relative;
}
.hero-mark .arm{
  position:absolute; background: var(--blue); border-radius: 10px;
  animation: growArm .9s cubic-bezier(.2,.8,.2,1) both;
}
.hero-mark .v{ left:50%; top:0; width:64px; height:220px; margin-left:-32px; transform-origin: center; }
.hero-mark .h{ top:50%; left:0; height:64px; width:220px; margin-top:-32px; transform-origin: center; animation-delay: .25s; }
@keyframes growArm{
  from{ transform: scale(0.05); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}
.hero-mark .ring{
  position:absolute; inset:-26px; border:1.5px dashed var(--line); border-radius:50%;
}

/* ===========================================================
   Section scaffolding
   =========================================================== */
section{ padding: 76px 0; }
.section-alt{ background: var(--steel); }
.section-head{ max-width: 62ch; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.section-head p{ color:#4a5a6e; font-size: 1.02rem; }

/* value grid */
.value-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:4px;
  padding: 26px 22px; position:relative;
}
.value-card .cross-mark{ transform: scale(.5); transform-origin: left top; margin-bottom: -6px; }
.value-card h3{ font-size: 1.05rem; margin: 10px 0 8px; }
.value-card p{ font-size: .92rem; color:#52627a; margin:0; }

/* category grid */
.cat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-card{
  background:#fff; border:1px solid var(--line); border-radius: 4px;
  padding: 22px 20px; text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.cat-card:hover{ border-color: var(--blue); transform: translateY(-3px); }
.cat-card::after{
  content:"+"; position:absolute; right:14px; top:10px;
  font-family: var(--mono); color: var(--line); font-size: 1.4rem;
  transition: color .18s ease;
}
.cat-card:hover::after{ color: var(--blue); }
.cat-index{ font-family: var(--mono); font-size:.75rem; color: var(--blue); letter-spacing:.08em; }
.cat-card h3{ font-size: 1rem; margin: 10px 0 6px; }
.cat-card p{ font-size: .86rem; color:#5a6a80; margin:0; }

/* stat strip */
.stat-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  background: var(--navy); border-radius: 6px; padding: 40px 36px; color:#fff;
}
.stat-strip .stat h3{ color:#fff; font-family: var(--mono); font-size: 1.6rem; margin:0 0 6px; }
.stat-strip .stat p{ color:#b9c8db; margin:0; font-size:.92rem; }

/* CTA banner */
.cta-banner{
  background: var(--blue); border-radius: 6px; padding: 48px 44px;
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  color:#fff;
}
.cta-banner h2{ color:#fff; font-size:1.6rem; margin:0 0 6px; }
.cta-banner p{ color:#dbe9fa; margin:0; }
.cta-banner .btn{ border-color:#fff; color:#fff; }
.cta-banner .btn:hover{ background:#fff; color: var(--blue); }
.cta-banner .btn-solid{ background:#fff; color: var(--blue); border-color:#fff; }
.cta-banner .btn-solid:hover{ background: var(--navy); color:#fff; border-color: var(--navy); }

/* ===========================================================
   Floating WhatsApp button
   =========================================================== */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.whatsapp-float svg{ width: 30px; height: 30px; }
.whatsapp-float .wa-ping{
  position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation: waPing 2.2s ease-out infinite;
}
@keyframes waPing{
  0%{ transform: scale(1); opacity:.55; }
  100%{ transform: scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float .wa-ping{ animation: none; display:none; }
}
@media (max-width: 720px){
  .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .whatsapp-float svg{ width:27px; height:27px; }
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ background: var(--navy); color:#c7d3e2; padding: 56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.footer-brand .brand-name{ color:#fff; }
.site-footer img{ height:36px; margin-bottom: 14px; filter: brightness(0) invert(1); opacity:.92; }
.site-footer p{ color:#9fb0c6; font-size:.92rem; }
.footer-col h4{ color:#fff; font-family: var(--body); font-size:.88rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom: 9px; font-size:.92rem; }
.footer-col a{ color:#c7d3e2; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top: 1px solid #24405f; padding-top: 22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:#7f92aa;
}

/* ===========================================================
   Page header (inner pages)
   =========================================================== */
.page-hero{
  padding: 56px 0 48px; border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, var(--blue-tint), var(--paper) 90%);
}
.page-hero h1{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 20ch; }
.page-hero p{ max-width: 58ch; color:#4a5a6e; font-size:1.05rem; }
.breadcrumb{ font-family: var(--mono); font-size:.8rem; color:#5a6a80; margin-bottom:18px; }
.breadcrumb a{ color: var(--blue); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-mark{ order:-1; width:150px; height:150px; }
  .hero-mark .v{ width:44px; height:150px; margin-left:-22px; }
  .hero-mark .h{ height:44px; width:150px; margin-top:-22px; }
  .value-grid, .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-strip{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; inset: 64px 0 0 0; background:#fff;
    flex-direction:column; align-items:flex-start; padding: 30px 28px; gap: 22px;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
  }
  .nav-toggle span{ width:22px; height:2px; background: var(--navy); display:block; }
  .nav .btn-solid{ display:none; }
  .value-grid, .cat-grid{ grid-template-columns: 1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; }
}