/* =========================================================
   ITInfosoft — Redesign Prototype
   Design language: borrows the real visual grammar of a
   search-results page (blue link titles, green URL breadcrumbs,
   grey meta text, "Ad" + rank badges) since search visibility
   is literally the product being sold.
   ========================================================= */

:root{
  --paper: #F4F7FA;
  --paper-alt: #FFFFFF;
  --ink: #101C2C;
  --muted: #526174;
  --line: #DFE3E8;
  --line-soft: #EBEEF1;

  --teal: #13B8A6;
  --accent: var(--teal);
  --teal-dark: #0F9387;
  --teal-light: #72E4D8;
  --icon-ink: #203B59;

  --blue: #1A56DB;
  --blue-dark: #123FA6;
  --green: #0B7B4B;
  --amber: #13B8A6;
  --amber-dark: #0F9387;

  --dark: #101C2C;
  --dark-2: #17283B;
  --ink-inverse: #F4F7FA;
  --muted-inverse: #B4C0CF;

  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --container: 1180px;
  --section-pad: clamp(3.5rem, 7vw, 6.5rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
body, button, input, select, textarea { font-family: var(--font-sans); }
button, .btn, input[type=submit] { font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 640px) { h1 { letter-spacing: -0.02em; } }
h3,h4{ font-weight: 600; }
p{ margin: 0; }

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

:focus-visible{
  outline: 2.5px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
}

h1{ font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.15; }
h3{ font-size: 1.1rem; }

.lede{
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--amber);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.btn-primary:hover{ background: var(--amber-dark); box-shadow: 0 6px 16px rgba(245,158,11,0.28); }
.btn-secondary{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost-light{
  background: transparent;
  color: var(--ink-inverse);
  border-color: rgba(255,255,255,0.35);
}
.btn-ghost-light:hover{ background: rgba(255,255,255,0.1); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,248,250,0.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
  gap: 1.5rem;
}
.logo{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo img{
  height: 34px;
  width: auto;
  display: block;
}
.footer-about .logo img{ height: 42px; }

.main-nav{
  display: flex;
  align-items: center;
  gap: 1.9rem;
  flex-wrap: wrap;
}
.main-nav a{
  font-size: 0.93rem;
  color: var(--muted);
  font-weight: 500;
  position: relative;
  padding: 0.3rem 0;
}
.main-nav a:hover, .main-nav a.active{ color: var(--ink); }
.main-nav a.active::after{
  content:"";
  position: absolute; left:0; right:0; bottom: -2px;
  height: 2px; background: var(--amber);
}
.nav-services{ position: relative; }
.nav-services > button{
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.93rem; font-weight: 500;
  color: var(--muted); display: flex; align-items: center; gap: 4px;
  padding: 0.3rem 0;
}
.nav-services:hover > button{ color: var(--ink); }
.nav-services .dropdown{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  min-width: 240px;
  box-shadow: 0 12px 30px rgba(20,24,28,0.1);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: all 0.15s ease;
}
.nav-services:hover .dropdown, .nav-services:focus-within .dropdown{
  opacity: 1; visibility: visible; translate: 0 0;
}
.dropdown a{
  display: block; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; color: var(--ink);
}
.dropdown a:hover{ background: var(--paper); color: var(--teal); }
.dropdown a small{ display:block; color: var(--muted); font-weight: 400; font-size: 0.78rem; margin-top:2px; }

.header-cta{ display: flex; align-items: center; gap: 1.2rem; }
.nav-toggle{ display: none; }

@media (max-width: 900px){
  .main-nav{ display: none; }
  .nav-toggle{
    display: inline-flex; background: none; border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; cursor: pointer;
  }
  .header-cta .btn-primary{ padding: 0.6rem 0.9rem; font-size: 0.82rem; }
}

/* ---------- Hero shell ---------- */
.hero-copy > * + *{ margin-top: 1.25rem; }
.hero-actions{ display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem !important; }

/* ---------- SERP mock component (signature element) ---------- */
.serp-mock{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(20,24,28,0.08);
  overflow: hidden;
}
.serp-searchbar{
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.serp-searchbar svg{ flex-shrink: 0; color: var(--muted); }
.serp-searchbar .query{
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
}
.serp-searchbar .query .cursor{
  display: inline-block; width: 2px; height: 1em; background: var(--amber);
  margin-left: 2px; vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

.serp-results{ padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 1.15rem; }
.serp-result{ display: flex; gap: 0.8rem; }
.serp-rank{
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.serp-result-body{ min-width: 0; }
.serp-breadcrumb{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--green);
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.serp-tag{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber-dark);
  border: 1px solid var(--amber);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  text-transform: uppercase;
}
.serp-title{
  font-family: var(--font-mono);
  color: var(--blue);
  font-size: 1.02rem;
  font-weight: 600;
  margin-top: 0.15rem;
}
.serp-desc{ color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }
.serp-stars{ color: var(--amber-dark); font-size: 0.82rem; letter-spacing: 1px; }
.serp-divider{ border-top: 1px dashed var(--line); margin: 0; }

.serp-note{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0.7rem 1.1rem;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}

/* floating callout chips used on some hero variants */
.chip-float{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--dark);
  color: var(--ink-inverse);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 10px 24px rgba(20,24,28,0.18);
}
.chip-float .lbl{ color: var(--muted-inverse); font-weight: 500; }
.chip-row{ display: flex; gap: 0.6rem; flex-wrap: wrap; padding: 0 1.1rem 1.1rem; }

/* ---------- Browser-window mock (design/dev pages) ---------- */
.browser-mock{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(20,24,28,0.08);
  overflow: hidden;
}
.browser-bar{
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.browser-bar .url-pill{
  flex: 1;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}
.browser-body{ padding: 1.4rem; }

/* code editor mock (development page) */
.code-mock{
  background: var(--dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(20,24,28,0.25);
}
.code-bar{
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted-inverse);
}
.code-body{
  padding: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.75;
  color: #C7D4DC;
  overflow-x: auto;
}
.code-body .tag{ color: #7AB8FF; }
.code-body .attr{ color: var(--amber); }
.code-body .str{ color: #8FD19E; }
.code-body .cmt{ color: var(--muted-inverse); }

/* ---------- Generic sections ---------- */
section{ padding: var(--section-pad) 0; }
.section-head{ max-width: 62ch; margin-bottom: 2.75rem; }
.section-head > * + *{ margin-top: 0.9rem; }
.section-alt{ background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-dark{ background: var(--dark); color: var(--ink-inverse); }
.section-dark .muted{ color: var(--muted-inverse); }
.section-dark h2, .section-dark h3{ color: var(--ink-inverse); }

/* stat strip */
.stat-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-alt);
}
.stat-strip .stat{
  padding: 1.6rem 1.2rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat-strip .stat:last-child{ border-right: none; }
.stat .num{ font-family: var(--font-sans); font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 700; color: var(--teal-dark); }
.stat .lbl{ font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
@media (max-width: 720px){
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
  .stat-strip .stat:nth-child(2){ border-right:none; }
}

/* process / breadcrumb steps */
.process{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.process-step{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  position: relative;
}
.process-step .step-crumb{
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--green);
}
.process-step h3{ margin-top: 0.6rem; }
.process-step p{ margin-top: 0.6rem; color: var(--muted); font-size: 0.93rem; }
@media (max-width: 880px){ .process{ grid-template-columns: 1fr; } }

/* services grid (snippet-card style) */
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 980px){ .service-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .service-grid{ grid-template-columns: 1fr; } }

.service-card{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(20,24,28,0.09);
  border-color: var(--teal);
}
.service-card .icon-badge{
  width: 72px; height: 72px;
  display: block;
}
.service-card .crumb{ font-family: var(--font-mono); font-size: 0.74rem; color: var(--green); }
.service-card .title{ font-family: var(--font-sans); color: var(--icon-ink); font-weight: 600; font-size: 1.04rem; }
.service-card p.desc{ color: var(--muted); font-size: 0.92rem; }
.service-card .go{
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
  color: var(--ink); display: inline-flex; align-items: center; gap: 0.35rem;
}
.service-card:hover .go{ color: var(--amber-dark); }

/* value props — large badge-style icon (single self-contained SVG), centered, matching reference */
.value-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
@media (max-width: 980px){ .value-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }
.value-card{ padding: 0.3rem 0; text-align: center; }
.value-card .icon-badge{
  width: 84px; height: 84px;
  display: block;
  margin: 0 auto 1.2rem;
}
.value-card h3{ margin-top: 0.5rem; font-size: 1.05rem; color: var(--icon-ink); }
.value-card p{ margin-top: 0.6rem; color: var(--muted); font-size: 0.92rem; max-width: 26ch; margin-left: auto; margin-right: auto; }

/* checklist "what's included" */
.checklist{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem 1.6rem; }
@media (max-width: 700px){ .checklist{ grid-template-columns: 1fr; } }
.checklist li{
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.checklist li svg{ flex-shrink: 0; color: var(--green); margin-top: 3px; }
.checklist li span{ font-size: 0.94rem; }
.checklist li strong{ display:block; font-family: var(--font-sans); font-weight: 600; font-size: 0.94rem; margin-bottom: 0.15rem; }

/* problem / solution two-up */
.two-up{ display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px){ .two-up{ grid-template-columns: 1fr; } }
.two-up .card{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.two-up .card .tag{
  font-family: var(--font-sans); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.two-up .card.problem .tag{ color: var(--amber-dark); }
.two-up .card.solution .tag{ color: var(--green); }
.two-up .card h3{ margin-top: 0.7rem; }
.two-up .card p{ margin-top: 0.9rem; color: var(--muted); font-size: 0.95rem; }
.two-up .card ul{ margin-top: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.two-up .card li{ font-size: 0.92rem; color: var(--muted); padding-left: 1.1rem; position: relative; }
.two-up .card li::before{ content:"—"; position: absolute; left: 0; color: var(--ink); }

/* testimonials */
.testimonial-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media (max-width: 780px){ .testimonial-grid{ grid-template-columns: 1fr; } }
.testimonial{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}
.testimonial .stars{ color: var(--amber-dark); letter-spacing: 2px; font-size: 0.9rem; }
.testimonial p.quote{ margin-top: 0.9rem; font-size: 1rem; color: var(--ink); }
.testimonial .who{ margin-top: 1rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }

/* video testimonials */
.video-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.video-grid.video-grid-preview{ grid-template-columns: repeat(3,1fr); max-width: 1100px; margin: 0 auto 2.5rem; }
@media (max-width: 860px){ .video-grid.video-grid-preview{ grid-template-columns: repeat(2,1fr); max-width: 620px; } }
@media (max-width: 560px){ .video-grid.video-grid-preview{ grid-template-columns: 1fr; } }
@media (max-width: 980px){ .video-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .video-grid{ grid-template-columns: 1fr; } }
.video-testimonial{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dark);
}
.video-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-caption{ padding: 1.1rem 1.3rem; }
.video-caption strong{ display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--icon-ink); }
.video-caption span{ display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.85rem; }

/* CTA band */
.cta-band{
  background: var(--dark);
  color: var(--ink-inverse);
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cta-band h2{ color: var(--ink-inverse); }
.cta-band p{ color: var(--muted-inverse); margin-top: 0.5rem; }
.cta-actions{ display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* contact */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info-list{ display:flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem; }
.contact-info-list li{ display:flex; gap: 0.8rem; align-items: flex-start; }
.contact-info-list strong{ display:block; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; }
.contact-info-list span{ color: var(--muted); font-size: 0.9rem; }
.form{ display: flex; flex-direction: column; gap: 1rem; }
.form label{ font-family: var(--font-sans); font-weight: 500; font-size: 0.85rem; color: var(--muted); display:block; margin-bottom: 0.4rem; }
.form input, .form textarea, .form select{
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-alt);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus{ border-color: var(--teal); }
.form textarea{ resize: vertical; min-height: 110px; }
.form-status{
  display: none;
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
}
.form-status.is-success{ background: rgba(11,123,79,0.08); border-color: var(--green); color: var(--green); }
.form-status.is-error{ background: rgba(217,96,6,0.08); border-color: var(--amber-dark); color: var(--amber-dark); }

/* footer */
.site-footer{
  background: var(--dark);
  color: var(--ink-inverse);
  padding: 3.5rem 0 1.75rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 820px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-inverse); margin-bottom: 1rem; }
.footer-grid ul{ display: flex; flex-direction: column; gap: 0.65rem; }
.footer-grid a{ font-size: 0.9rem; color: var(--ink-inverse); opacity: 0.85; }
.footer-grid a:hover{ opacity: 1; color: var(--amber); }
.footer-about p{ color: var(--muted-inverse); font-size: 0.9rem; margin-top: 0.9rem; max-width: 32ch; }
.footer-bottom{
  padding-top: 1.75rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p{ font-size: 0.8rem; color: var(--muted-inverse); }
.footer-note{
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-inverse);
  border: 1px dashed rgba(255,255,255,0.2); border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
}

/* =========================================================
   Overlay header + full-bleed hero slider
   ========================================================= */

/* Header now lives on top of a colored hero: transparent until
   scrolled, then a solid dark bar. It stays dark-themed always,
   since after the hero the header floats above light content. */
.site-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-solid{
  position: fixed;
  background: rgba(20,24,28,0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.site-header .logo{ color: var(--ink-inverse); }
.site-header .logo .suffix{ color: var(--muted-inverse); }
.site-header .main-nav a{ color: var(--ink-inverse); opacity: 0.82; }
.site-header .main-nav a:hover, .site-header .main-nav a.active{ opacity: 1; color: var(--ink-inverse); }
.site-header .main-nav a.active::after{ background: var(--amber); }
.nav-services > button{ color: var(--ink-inverse); opacity: 0.82; }
.nav-services:hover > button{ opacity: 1; }
.nav-services .dropdown{
  background: var(--dark-2);
  border-color: rgba(255,255,255,0.1);
}
.dropdown a{ color: var(--ink-inverse); }
.dropdown a small{ color: var(--muted-inverse); }
.dropdown a:hover{ background: rgba(255,255,255,0.06); color: var(--teal-light); }
.nav-toggle{ color: var(--ink-inverse); border-color: rgba(255,255,255,0.4); }

@media (max-width: 900px){
  .main-nav{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--dark-2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;
  }
  .main-nav.is-open{ display: flex; }
  .main-nav a{ width: 100%; padding: 0.75rem 0; opacity: 1; }
  .nav-services{ width: 100%; }
  .nav-services > button{ width: 100%; justify-content: space-between; padding: 0.75rem 0; }
  .nav-services .dropdown{
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; display: none; min-width: 0; margin-bottom: 0.5rem;
  }
  .nav-services:hover .dropdown{ display: block; }
}

/* Full-bleed colored hero used as slider (home) or static banner (service pages) */
.hero-full{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 85% 20%, rgba(23,182,167,0.35), transparent 60%),
    linear-gradient(135deg, #101C2C 0%, #123B4A 55%, #13B8A6 100%);
  color: var(--ink-inverse);
}
.hero-decor{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-decor span{
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}
.hero-decor span.d1{ width: 10px; height: 10px; background: var(--amber); top: 14%; left: 8%; }
.hero-decor span.d2{ width: 8px; height: 8px; background: var(--teal-light); top: 68%; left: 5%; }
.hero-decor span.d3{ width: 12px; height: 12px; background: #FFFFFF; opacity:0.25; top: 22%; right: 10%; }
.hero-decor span.d4{ width: 14px; height: 14px; border-radius: 3px; background: var(--amber); opacity: 0.35; bottom: 12%; right: 16%; transform: rotate(45deg); }

.hero-full .eyebrow{ color: var(--teal-light); }
.hero-full .lede{ color: var(--muted-inverse); }
.hero-full h1{ color: #FFFFFF; }
.hero-full .btn-secondary{ color: var(--ink-inverse); border-color: rgba(255,255,255,0.45); }
.hero-full .btn-secondary:hover{ background: rgba(255,255,255,0.12); color: var(--ink-inverse); }

.slider{ position: relative; }
.slider-track{ position: relative; }
.slide{
  display: none;
  padding: calc(72px + 40px) 0 40px;
}
.slide.is-active{ display: block; animation: fadeSlide 0.5s ease; }
@keyframes fadeSlide{ from{ opacity: 0; transform: translateY(8px);} to{ opacity: 1; transform: translateY(0);} }

.slide .container{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.slide.slide-centered .container{
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 760px;
}
.slide.slide-centered .hero-actions{ justify-content: center; }
.slide.slide-centered .lede{ max-width: none; margin-left: auto; margin-right: auto; }
.slide .hero-copy > * + *{ margin-top: 1.25rem; }
.slide .hero-title{ font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.slide .hero-actions{ display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem !important; }
.slide .hero-visual img{
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 880px){
  .slide .container{ grid-template-columns: 1fr; }
  .slide .hero-visual{ order: -1; max-width: 380px; margin: 0 auto; }
}

.slider-arrow{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  z-index: 5;
}
.slider-arrow:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.slider-arrow.prev{ left: clamp(0.5rem, 2vw, 1.5rem); }
.slider-arrow.next{ right: clamp(0.5rem, 2vw, 1.5rem); }

.slider-dots{
  position: absolute;
  bottom: 1.5rem; left: 50%;
  translate: -50% 0;
  display: flex; gap: 0.5rem;
  z-index: 5;
}
.slider-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.slider-dot.is-active{ background: var(--amber); transform: scale(1.15); }

@media (max-width: 620px){
  .slider-arrow{ display: none; }
}

/* breadcrumb-style page kicker used at top of service pages */
.page-crumb{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--green);
  padding-top: 1.6rem;
  display: flex; gap: 0.4rem; align-items: center;
}
.page-crumb a{ color: var(--muted); }
.page-crumb a:hover{ color: var(--teal); }

/* related services */
.related-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
@media (max-width: 880px){ .related-grid{ grid-template-columns: 1fr; } }
.related-card{
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem; background: var(--paper-alt);
  font-family: var(--font-mono); font-size: 0.88rem; color: var(--teal-dark);
  display:flex; justify-content: space-between; align-items:center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.related-card:hover{ border-color: var(--teal); background: var(--paper); }

/* =========================================================
   Blog — listing grid + single-post typography
   ========================================================= */
.blog-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .blog-grid{ grid-template-columns: 1fr; } }

.blog-card{
  display: block;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.blog-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(20,24,28,0.09);
  border-color: var(--teal);
}
.blog-card-image{
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--paper);
}
.blog-card-image-placeholder{
  background: linear-gradient(135deg, var(--dark) 0%, var(--teal-dark) 100%);
}
.blog-card-body{ padding: 1.3rem 1.4rem; }
.blog-card-date{ font-family: var(--font-mono); font-size: 0.76rem; color: var(--teal-dark); }
.blog-card-body h3{ font-family: var(--font-sans); font-weight: 600; font-size: 1.08rem; color: var(--icon-ink); margin-top: 0.5rem; }
.blog-card-body p{ color: var(--muted); font-size: 0.9rem; margin-top: 0.6rem; }
.blog-card-readmore{
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--ink);
}
.blog-card:hover .blog-card-readmore{ color: var(--amber-dark); }

/* single-post typography — driven entirely by the admin's raw HTML,
   so these rules give sensible defaults for every standard tag */
.post-content{ font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.post-content > * + *{ margin-top: 1.2rem; }
.post-content h2{ font-size: 1.5rem; font-weight: 700; margin-top: 2rem; }
.post-content h3{ font-size: 1.2rem; font-weight: 600; margin-top: 1.6rem; }
.post-content p{ color: var(--ink); }
.post-content a{ color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.post-content strong{ font-weight: 700; }
.post-content ul, .post-content ol{ padding-left: 1.4rem; }
.post-content li{ margin-top: 0.4rem; }
.post-content blockquote{
  border-left: 3px solid var(--teal);
  padding: 0.3rem 0 0.3rem 1.2rem;
  color: var(--muted);
  font-style: italic;
}
.post-content code{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.post-content pre{
  background: var(--dark);
  color: #C7D4DC;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.post-content img{ width: 100%; border-radius: var(--radius-md); }

/* WordPress-style single blog layout */
.single-post-layout{display:grid;grid-template-columns:minmax(0, 1fr) 320px;gap:3rem;align-items:start}
.single-post-main{min-width:0;max-width:none}
.single-post-featured-image{display:block;width:100%;height:auto;border-radius:var(--radius-lg);margin-bottom:2rem}
.blog-sidebar{display:grid;gap:1.25rem;position:sticky;top:2rem}
.sidebar-cta,.sidebar-widget{padding:1.5rem;border:1px solid var(--line, #e5e7eb);border-radius:var(--radius-lg);background:var(--surface, #fff);box-shadow:0 8px 26px rgba(20,35,50,.05)}
.sidebar-cta{background:var(--ink, #12202d);color:#fff}
.sidebar-cta h3,.sidebar-widget h3{font-size:1.15rem;line-height:1.35;margin:.5rem 0 .8rem}
.sidebar-cta p{color:rgba(255,255,255,.78);margin-bottom:1rem}
.sidebar-widget blockquote{margin:.7rem 0;color:var(--ink);font-style:italic;line-height:1.65}
.sidebar-testimonial-name{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.sidebar-widget ul{list-style:none;margin:0;padding:0}
.sidebar-widget li{padding:.65rem 0;border-bottom:1px solid var(--line, #e5e7eb);line-height:1.45}
.sidebar-widget li:last-child{border-bottom:0;padding-bottom:0}
.sidebar-widget li a{font-weight:500;color:var(--ink);text-decoration:none}
.sidebar-widget li a:hover{color:var(--teal-dark)}
.post-taxonomy{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line, #e5e7eb);font-size:.92rem}
.post-taxonomy a{color:var(--teal-dark);text-decoration:none}
.post-tag{display:inline-block;margin:.25rem .25rem .25rem 0;padding:.25rem .6rem;border-radius:999px;background:var(--surface-alt,#f2f4f5);font-size:.82rem}
@media(max-width:900px){.single-post-layout{grid-template-columns:minmax(0,1fr) 280px;gap:1.5rem}}
@media(max-width:700px){.single-post-layout{grid-template-columns:1fr}.blog-sidebar{position:static;grid-template-columns:1fr}.single-post-featured-image{margin-bottom:1.25rem}}


/* Modern, compact single article header */
.single-post-hero{position:relative;overflow:hidden;padding:clamp(3.25rem,7vw,5.5rem) 0 clamp(2.75rem,5vw,4rem);background:radial-gradient(ellipse at 90% 0%,rgba(23,182,167,.22),transparent 48%),linear-gradient(135deg,#0b1917 0%,#104f49 58%,#087f75 100%);color:#fff}
.single-post-hero:after{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-100px;bottom:-210px;box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 75px rgba(255,255,255,.02);pointer-events:none}
.single-post-hero-inner{position:relative;z-index:1;max-width:1000px}
.single-post-hero-meta{display:flex;gap:.65rem;align-items:center;justify-content:center;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700;color:#8ce4d8;margin-bottom:1.15rem}
.single-post-hero-meta a{color:#8ce4d8;text-decoration:none}.single-post-hero-meta a:hover{color:#fff}
.single-post-hero h1{max-width:900px;margin:0 auto;text-align:center;color:#fff;font-size:clamp(2rem,4.5vw,3.65rem);line-height:1.08;letter-spacing:-.045em;font-weight:800;text-wrap:balance}
.single-post-hero p{max-width:760px;margin:1.15rem auto 0;text-align:center;color:rgba(255,255,255,.78);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.75}
.single-post-section{padding:2rem 0 5rem;background:#f7f8fa}
.single-post-section .container{max-width:1200px}
.single-post-section .page-crumb{padding-top:0}
.single-post-layout{grid-template-columns:minmax(0, min(100%, 780px)) minmax(260px,320px);justify-content:space-between;gap:clamp(1.5rem,3vw,3rem);margin-top:1.5rem}
.single-post-main{background:#fff;border:1px solid #e9edf0;border-radius:18px;padding:clamp(1rem,2.5vw,2rem);box-shadow:0 12px 40px rgba(22,38,48,.045)}
.single-post-featured-image{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:12px;margin:0 0 2rem;background:#edf1f2}
.single-post-featured-image[src=""]{display:none}
.blog-sidebar{gap:1rem;top:1.25rem}
.sidebar-cta,.sidebar-widget{border-radius:16px;padding:1.35rem;box-shadow:0 10px 28px rgba(22,38,48,.055)}
.sidebar-cta{background:linear-gradient(145deg,#17252a,#20282e);border:0}
.sidebar-cta .btn{display:inline-flex;align-items:center;justify-content:center}
.sidebar-widget{background:#fff}
.post-content{font-size:1.04rem;line-height:1.85;color:#34414a;overflow-wrap:anywhere}
.post-content h2{font-size:clamp(1.45rem,2.5vw,1.85rem);line-height:1.25;letter-spacing:-.025em;color:#17252a;margin-top:2.2rem}
.post-content h3{font-size:1.3rem;line-height:1.35;color:#17252a;margin-top:1.7rem}
.post-content img{height:auto;object-fit:contain}
@media(max-width:900px){.single-post-layout{grid-template-columns:minmax(0,1fr) 280px}.single-post-main{padding:1.25rem}}
@media(max-width:700px){.single-post-hero{padding:3rem 0 2.75rem}.single-post-layout{grid-template-columns:1fr}.blog-sidebar{grid-template-columns:1fr;position:static}.single-post-section{padding:1.5rem 0 3rem}.single-post-featured-image{aspect-ratio:16/10;margin-bottom:1.5rem}}

/* Sidebar post thumbnails and compact editorial lists */
.sidebar-post-list{list-style:none;margin:0;padding:0}
.sidebar-widget .sidebar-post-list li{padding:.8rem 0;border-bottom:1px solid var(--line,#e5e7eb)}
.sidebar-post-link{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.8rem;align-items:center;font-size:.88rem;line-height:1.4}
.sidebar-post-link img,.sidebar-post-thumb-placeholder{display:block;width:76px;height:62px;object-fit:cover;border-radius:8px;background:#edf2f2}
.sidebar-post-thumb-placeholder{display:flex;align-items:center;justify-content:center;color:#0b8278;font-weight:800;letter-spacing:.06em}
.sidebar-post-link span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-testimonial-widget blockquote{font-size:.93rem}

/* ===== ITInfosoft homepage refresh: static hero, capability showcase, shared chrome ===== */
:root{--navy:#101C2C;--teal:#13B8A6;--cloud:#F4F7FA;--ink:#152235;--muted:#526174;--accent:#13B8A6;--accent-dark:#0d9488;--font-heading:'Plus Jakarta Sans',sans-serif;--font-sans:'Inter',sans-serif}
.site-header{background:rgba(16,28,44,.97);backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(16,28,44,.10)}
.site-header .nav a,.site-header nav a{transition:color .2s ease,opacity .2s ease}
.site-header a:hover{color:var(--teal)}
.home-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(5rem,9vw,8.5rem) 0 clamp(4rem,7vw,6.5rem);color:#fff;background:radial-gradient(ellipse at 85% 20%,rgba(19,184,166,.24),transparent 38%),linear-gradient(120deg,#101C2C 0%,#102d3a 58%,#123f47 100%)}
.home-hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000 65%)}
.home-hero-glow{position:absolute;width:420px;height:420px;border-radius:50%;right:12%;top:5%;background:rgba(19,184,166,.16);filter:blur(80px);z-index:-1}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);align-items:center;gap:clamp(2.5rem,6vw,6rem)}
.home-hero-copy{max-width:650px}.home-hero .eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:#65e5d7;font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.home-hero .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 18px rgba(19,184,166,.8)}
.home-hero h1{font-size:clamp(2.8rem,5.1vw,4.7rem);line-height:1.04;letter-spacing:-.055em;margin:1.25rem 0 1.4rem;max-width:720px}.home-hero h1 span{color:#55dfd0}.home-hero .lede{color:#c6d4df;font-size:clamp(1rem,1.25vw,1.13rem);line-height:1.8;max-width:570px}.home-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}.home-hero .btn-primary{background:var(--teal);color:#062c2a;border:1px solid var(--teal);box-shadow:0 10px 30px rgba(19,184,166,.18)}.home-hero .btn-primary:hover{background:#48d8c9;transform:translateY(-2px)}.home-hero .btn-secondary{color:#fff;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04)}.home-hero .btn-secondary:hover{border-color:var(--teal);background:rgba(19,184,166,.08)}.hero-proof{display:flex;align-items:center;gap:.65rem;margin-top:1.7rem;color:#a9bdc9;font-size:.83rem}.proof-dot{width:8px;height:8px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 5px rgba(19,184,166,.13)}
.home-hero-art{position:relative;min-height:400px;display:grid;place-items:center}.hero-art-label{position:absolute;top:2%;right:2%;font-size:.65rem;font-weight:800;letter-spacing:.12em;color:#b5d7d8;display:flex;align-items:center;gap:.5rem}.art-status{width:7px;height:7px;border-radius:50%;background:var(--teal)}.hero-browser{position:relative;width:min(100%,510px);border:1px solid rgba(255,255,255,.22);border-radius:17px;background:#f7fafc;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.32);transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);z-index:2}.browser-top{height:39px;background:#e8edf2;display:flex;align-items:center;gap:6px;padding:0 14px}.browser-top>span{width:7px;height:7px;border-radius:50%;background:#9aa9b8}.browser-top i{margin-left:auto;font-size:9px;color:#738397;font-style:normal}.browser-content{padding:clamp(1.2rem,3vw,2rem);color:var(--navy);background:linear-gradient(135deg,#fff,#edf7f7)}.browser-kicker{font-size:8px;letter-spacing:.15em;color:#0b9489;font-weight:800}.browser-title{font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1.12;letter-spacing:-.045em;font-weight:500;margin:12px 0}.browser-title b{color:#078e85}.browser-lines{display:grid;gap:6px;margin:12px 0}.browser-lines span{height:5px;border-radius:5px;background:#d9e3e9;width:82%}.browser-lines span:nth-child(2){width:66%}.browser-lines span:nth-child(3){width:48%}.browser-cta{width:92px;height:22px;border-radius:5px;background:var(--teal);margin:15px 0}.browser-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.dash-card{min-height:95px;border:1px solid #dce6eb;background:#fff;border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:8px}.dash-card small{font-size:7px;letter-spacing:.1em;color:#758596}.dash-card b{font-size:22px;color:#0b9489}.dash-chart{height:18px;border-bottom:2px solid #13b8a6;clip-path:polygon(0 80%,15% 55%,28% 70%,44% 22%,58% 48%,72% 10%,88% 35%,100% 0,100% 100%,0 100%);background:rgba(19,184,166,.15)}.dash-two span{font-size:8px;color:#738397}.node-row{display:flex;align-items:center;gap:20px;padding:8px 0}.node-row i{width:17px;height:17px;border-radius:5px;border:2px solid #13b8a6;position:relative}.node-row i+i:before{content:"";position:absolute;width:20px;border-top:1px solid #9ebdbf;left:-22px;top:6px}.floating-chip{position:absolute;z-index:3;padding:12px 15px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(18,42,55,.88);box-shadow:0 15px 35px rgba(0,0,0,.18);font-size:.78rem;font-weight:700;color:#e9ffff;backdrop-filter:blur(12px)}.floating-chip span{color:#55dfd0;margin-right:6px}.chip-top{top:17%;left:-3%}.chip-bottom{bottom:12%;right:-1%}.hero-orbit{position:absolute;border:1px solid rgba(85,223,208,.25);border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:112%;height:68%;}.orbit-two{width:125%;height:80%;border-color:rgba(85,223,208,.12)}
.portfolio-section{background:#fff}.portfolio-head{max-width:720px}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.portfolio-card{overflow:hidden;border:1px solid #e0e8ee;border-radius:17px;background:#fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.portfolio-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(16,28,44,.1);border-color:rgba(19,184,166,.55)}.portfolio-featured{grid-column:1/-1;display:grid;grid-template-columns:1.12fr .88fr}.portfolio-visual{min-height:235px;position:relative;overflow:hidden;display:grid;place-items:center}.portfolio-web{background:radial-gradient(circle at 75% 25%,rgba(19,184,166,.28),transparent 35%),linear-gradient(135deg,#101c2c,#1d4854)}.mock-window{width:78%;border-radius:10px;overflow:hidden;background:#f8fbfc;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:rotate(-2deg)}.mock-bar{height:23px;background:#e4ebef;display:flex;gap:5px;align-items:center;padding:0 10px}.mock-bar i{width:5px;height:5px;border-radius:50%;background:#9aabb7}.mock-web-body{display:grid;grid-template-columns:1fr .8fr;gap:12px;padding:22px 18px;min-height:155px}.mock-copy span{font-size:6px;letter-spacing:.1em;color:#0d9488;font-weight:800}.mock-copy b{display:block;color:#101c2c;font-size:clamp(13px,2vw,22px);line-height:1.2;margin:9px 0}.mock-copy i{display:block;width:75%;height:4px;background:#dce5e9;border-radius:4px;margin:6px 0}.mock-image-block{border-radius:6px;background:linear-gradient(145deg,#c8e8e3,#13b8a6 60%,#176c70);display:flex;align-items:flex-end;justify-content:flex-end;padding:9px;color:#fff;font-size:10px;font-weight:800}.portfolio-app{background:linear-gradient(135deg,#e7f7f5,#c9eeea)}.phone-mock{position:relative;z-index:1;width:116px;height:205px;border:5px solid #101c2c;border-radius:22px;background:#101c2c;padding:5px;box-shadow:0 18px 30px rgba(16,28,44,.2);transform:rotate(7deg)}.phone-speaker{position:absolute;z-index:2;top:5px;left:42px;width:25px;height:4px;border-radius:4px;background:#101c2c}.phone-screen{height:100%;border-radius:14px;background:#f8fbfc;padding:19px 9px 8px;color:#101c2c}.phone-label{font-size:6px;color:#718393;letter-spacing:.1em}.phone-screen>b{display:block;font-size:15px;line-height:1.15;margin:8px 0 13px}.phone-stat{padding:8px;background:#fff;border:1px solid #e2eaee;border-radius:7px;display:grid;gap:5px}.phone-stat small{font-size:6px;color:#718393}.phone-stat strong{font-size:12px;color:#078e85}.phone-stat i{height:19px;background:linear-gradient(160deg,transparent 35%,rgba(19,184,166,.18) 36%),linear-gradient(20deg,transparent 45%,#13b8a6 46%,#13b8a6 49%,transparent 50%)}.phone-nav{display:flex;justify-content:space-around;margin-top:14px}.phone-nav i{width:9px;height:9px;border-radius:3px;background:#13b8a6}.app-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-a{width:125px;height:125px;background:rgba(19,184,166,.23);right:15%;top:10%}.orb-b{width:65px;height:65px;background:rgba(16,28,44,.08);left:18%;bottom:9%}.portfolio-growth{background:radial-gradient(circle at 80% 20%,rgba(19,184,166,.22),transparent 30%),linear-gradient(135deg,#101c2c,#193a4a)}.growth-panel{width:78%;border:1px solid rgba(255,255,255,.17);border-radius:10px;background:rgba(255,255,255,.07);padding:18px;color:#fff;box-shadow:0 18px 35px rgba(0,0,0,.18)}.growth-panel>span{font-size:7px;letter-spacing:.12em;color:#6de3d7}.growth-number{font-size:clamp(15px,2vw,23px);font-weight:800;line-height:1.2;margin:12px 0 20px}.growth-bars{height:67px;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid rgba(255,255,255,.2)}.growth-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(#55dfd0,#13b8a6);height:25%}.growth-bars i:nth-child(2){height:40%}.growth-bars i:nth-child(3){height:32%}.growth-bars i:nth-child(4){height:58%}.growth-bars i:nth-child(5){height:48%}.growth-bars i:nth-child(6){height:75%}.growth-bars i:nth-child(7){height:65%}.growth-bars i:nth-child(8){height:95%}.growth-legend{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:8px;color:#c6d4df}.growth-legend i{width:7px;height:7px;border-radius:50%;background:#55dfd0}.growth-legend b{margin-left:auto;color:#55dfd0}.portfolio-info{padding:clamp(1.25rem,2.5vw,2rem)}.portfolio-type{color:#078e85;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}.portfolio-info h3{font-size:clamp(1.15rem,2vw,1.55rem);margin:.65rem 0}.portfolio-info p{font-size:.94rem;line-height:1.75;color:#526174;margin:0 0 1rem}.text-link{font-size:.88rem;font-weight:800;color:#087f78;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}.text-link:hover{color:#101c2c}.portfolio-note{font-size:.76rem;color:#718092;margin:1rem 0 0}
.site-footer{background:#101c2c;color:#d0d9e4}.site-footer h4{color:#fff}.site-footer p,.site-footer li,.site-footer .footer-note{color:#a9b7c5}.site-footer a{transition:color .2s ease}.site-footer a:hover{color:#55dfd0}.footer-bottom{border-top-color:rgba(255,255,255,.13)}
@media(max-width:900px){.home-hero-grid{grid-template-columns:1fr;gap:3rem}.home-hero-copy{max-width:760px}.home-hero-art{min-height:350px;width:min(100%,620px);margin:0 auto}.hero-art-label{right:4%}.chip-top{left:0}.chip-bottom{right:0}.portfolio-featured{grid-template-columns:1fr}.portfolio-featured .portfolio-visual{min-height:260px}}
@media(max-width:600px){.home-hero{padding:4.5rem 0 3.5rem}.home-hero h1{font-size:clamp(2.45rem,11vw,3.5rem)}.home-hero .hero-actions{align-items:stretch;flex-direction:column}.home-hero .hero-actions .btn{justify-content:center}.home-hero-art{min-height:300px}.hero-browser{width:94%;transform:none}.floating-chip{font-size:.68rem;padding:9px 10px}.chip-top{top:7%;left:-1%}.chip-bottom{bottom:5%;right:-1%}.hero-art-label{top:-1%;font-size:.55rem}.portfolio-grid{grid-template-columns:1fr}.portfolio-featured{grid-column:auto}.portfolio-visual{min-height:220px}.portfolio-featured .portfolio-visual{min-height:220px}.mock-web-body{min-height:140px}.site-footer .footer-grid{gap:2rem}}


/* Header logo contrast and sizing fix — ITInfosoft navy header */
.site-header .logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 210px;
}
.site-header .logo img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}
.footer-about .logo img {
  width: auto;
  max-width: 190px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .site-header .logo { max-width: 155px; }
  .site-header .logo img { max-width: 150px; max-height: 44px; }
}

/* About page — ITInfosoft brand system */
.about-page{overflow:hidden;background:#fff;color:#101C2C}
.about-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 25%,rgba(19,184,166,.22),transparent 36%),linear-gradient(120deg,#101C2C 0%,#102b38 58%,#0c514f 100%);color:#fff;padding:clamp(4.5rem,8vw,7.5rem) 0 clamp(4rem,7vw,6rem)}
.about-hero-glow{position:absolute;z-index:-1;width:520px;height:520px;right:-150px;top:-230px;border-radius:50%;background:rgba(19,184,166,.13);filter:blur(12px)}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);align-items:center;gap:clamp(2.5rem,6vw,6rem)}
.about-hero-copy{max-width:680px}.about-hero .eyebrow,.about-page .eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:#13B8A6;font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.about-hero h1{margin:1.2rem 0 1.35rem;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.65rem,5vw,4.7rem);line-height:1.04;letter-spacing:-.055em;max-width:13ch}.about-hero h1 span{color:#52dfd0}.about-hero .lede{max-width:59ch;color:#d4e1e8;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.8}.about-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}.about-hero .btn-secondary{border-color:rgba(255,255,255,.35);color:#fff}.about-hero .btn-secondary:hover{background:rgba(255,255,255,.1)}.about-hero-note{display:flex;align-items:center;gap:.65rem;margin-top:1.6rem;color:#c2d6df;font-size:.9rem}.about-hero-note span{width:9px;height:9px;border-radius:50%;background:#13B8A6;box-shadow:0 0 0 5px rgba(19,184,166,.14)}
.about-visual{position:relative;min-height:390px;display:flex;align-items:center;justify-content:center}.about-orbit{position:absolute;border:1px solid rgba(82,223,208,.22);border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:430px;height:300px}.orbit-two{width:500px;height:360px;transform:rotate(25deg)}.about-window{position:relative;width:min(100%,500px);overflow:hidden;border:1px solid rgba(255,255,255,.65);border-radius:18px;background:#f9fcfd;color:#101C2C;box-shadow:0 30px 90px rgba(0,0,0,.28);transform:rotate(-1deg)}.about-window-bar{height:42px;display:flex;align-items:center;gap:6px;padding:0 15px;background:#e8eef2;border-bottom:1px solid #dce5e9}.about-window-bar i{width:7px;height:7px;background:#9aabb7;border-radius:50%}.about-window-bar span{margin-left:auto;color:#718594;font-size:.62rem}.about-window-body{padding:clamp(1.4rem,3vw,2rem)}.about-mini-label{font-size:.65rem;font-weight:800;letter-spacing:.12em;color:#0d9d91}.about-window-body h2{margin:.8rem 0 1.2rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.12;letter-spacing:-.045em}.about-window-body h2 em{font-style:normal;color:#0b9d91}.about-lines{display:grid;gap:8px;margin-bottom:1.4rem}.about-lines b{height:7px;border-radius:9px;background:#dce7eb}.about-lines b:nth-child(2){width:82%}.about-lines b:nth-child(3){width:58%}.about-mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.about-mini-cards>div{padding:1rem;border:1px solid #dce7eb;border-radius:12px;background:#fff}.about-mini-cards small{display:block;color:#7b8e9b;font-size:.58rem;letter-spacing:.08em;font-weight:800}.about-mini-cards strong{display:block;margin:.5rem 0;color:#101C2C;font-size:.9rem}.mini-bar{display:block;width:90%;height:5px;border-radius:6px;background:#13B8A6}.mini-bar.short{width:65%}.about-float{position:absolute;z-index:2;display:flex;align-items:center;gap:.55rem;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.17);border-radius:12px;background:#203a46;color:#f5ffff;font-size:.78rem;font-weight:700;box-shadow:0 12px 28px rgba(0,0,0,.2)}.about-float span{color:#52dfd0;font-size:1.05rem}.float-top{left:-2%;top:23%}.float-bottom{right:-2%;bottom:15%}
.about-breadcrumb{background:#f4f7fa;border-bottom:1px solid #e3eaf0}.about-breadcrumb .container{display:flex;gap:.65rem;align-items:center;padding-top:1rem;padding-bottom:1rem;font-size:.8rem;color:#647487}.about-breadcrumb a{color:#087e78;text-decoration:none}.about-breadcrumb a:hover{text-decoration:underline}.section-pad{padding:clamp(4rem,7vw,6.5rem) 0}.about-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,7rem);align-items:start}.about-intro h2,.about-commitment h2{margin-top:1rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.13;letter-spacing:-.045em}.about-intro-copy p{margin:0 0 1rem;color:#526174;line-height:1.85}.about-page .section-head{max-width:760px;margin-bottom:2.5rem}.about-page .section-head h2{margin-top:.8rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,3.3vw,3rem);line-height:1.15;letter-spacing:-.04em}.about-page .section-head p{margin-top:1rem;color:#526174;line-height:1.75;max-width:65ch}.about-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}.about-process-card{position:relative;padding:clamp(1.4rem,2.5vw,2rem);border:1px solid #e0e8ed;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(16,28,44,.035)}.about-step{position:absolute;right:1.5rem;top:1.35rem;color:#9aabb7;font-family:'IBM Plex Mono',monospace;font-size:.8rem}.about-process-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e1faf6;color:#087e78;font-size:1.55rem;font-weight:700}.about-process-card h3{margin:1.2rem 0 .65rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem}.about-process-card p,.about-process-card li{color:#526174;font-size:.94rem;line-height:1.7}.about-process-card ul{display:grid;gap:.35rem;margin:1rem 0 0;padding-left:1.1rem}.about-process-card li::marker{color:#13B8A6}.about-capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.about-capability{display:flex;flex-direction:column;min-height:220px;padding:1.5rem;border:1px solid #e0e8ed;border-radius:16px;background:#fff;color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.about-capability:hover{transform:translateY(-4px);border-color:#8edfd6;box-shadow:0 14px 32px rgba(16,28,44,.08)}.about-capability>span{color:#0c9d91;font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:700}.about-capability h3{margin:1rem 0 .55rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem}.about-capability p{margin:0 0 1.2rem;color:#526174;font-size:.92rem;line-height:1.7}.about-capability b{margin-top:auto;color:#087e78;font-size:.82rem}.about-commitment{background:#101C2C;color:#fff}.about-commitment-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,7vw,7rem)}.about-commitment h2{max-width:12ch;color:#fff}.about-commitment-items{display:grid;gap:1.2rem}.about-commitment-items>div{display:grid;grid-template-columns:48px 1fr;gap:1rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.13)}.about-commitment-items>div:last-child{border-bottom:0}.about-commitment-items span{color:#52dfd0;font-family:'IBM Plex Mono',monospace;font-size:.85rem}.about-commitment-items p{margin:0;color:#c7d6df;line-height:1.7}.about-commitment-items strong{display:block;margin-bottom:.25rem;color:#fff;font-family:'Plus Jakarta Sans',sans-serif}.about-final-cta{padding:clamp(3rem,6vw,5rem) 0;background:#f4f7fa}.about-final-cta .cta-band{background:linear-gradient(120deg,#101C2C,#123b43);border:1px solid rgba(19,184,166,.22)}.about-final-cta .cta-band h2{color:#fff}.about-final-cta .cta-band p{color:#d0dfe5}.about-final-cta .btn-secondary{border-color:rgba(255,255,255,.4);color:#fff}
@media(max-width:900px){.about-hero-grid,.about-intro-grid,.about-commitment-grid{grid-template-columns:1fr}.about-hero-grid{gap:2.5rem}.about-hero-copy{max-width:760px}.about-visual{min-height:340px}.about-process-grid{grid-template-columns:1fr}.about-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-commitment h2{max-width:18ch}}
@media(max-width:560px){.about-hero{padding:3.5rem 0}.about-hero h1{font-size:clamp(2.45rem,12vw,3.5rem)}.about-visual{min-height:285px}.about-window{width:95%}.about-window-body{padding:1.1rem}.about-window-body h2{font-size:1.5rem}.about-float{padding:.6rem .7rem;font-size:.68rem}.float-top{left:-1%;top:10%}.float-bottom{right:-1%;bottom:5%}.about-capability-grid{grid-template-columns:1fr}.about-capability{min-height:unset}.about-hero .hero-actions{align-items:stretch;flex-direction:column}.about-hero .hero-actions .btn{justify-content:center}}


/* =========================================================
   ITInfosoft Service Page Refresh — Navy / Teal design system
   Scoped to service pages to preserve homepage and blog styling.
   ========================================================= */
.service-hero {
  background: radial-gradient(ellipse at 82% 30%, rgba(19,184,166,.22), transparent 38%),
              linear-gradient(118deg, #101C2C 0%, #102C3A 58%, #0E4B4B 100%);
  overflow: hidden;
  position: relative;
}
.service-hero .hero-copy { max-width: 650px; }
.service-hero .eyebrow { color: #5CE3D3; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.service-hero h1 { color: #FFFFFF; max-width: 12ch; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.service-hero .lede { color: #D5E2EA; max-width: 58ch; line-height: 1.75; }
.service-hero .hero-visual img { border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.service-hero .slider-arrow, .service-hero .slider-dots { display: none !important; }
.service-hero .btn-primary { background: #13B8A6; border-color: #13B8A6; color: #082B2B; font-weight: 750; }
.service-hero .btn-primary:hover { background: #5CE3D3; border-color: #5CE3D3; transform: translateY(-2px); }
.service-hero .btn-secondary { border-color: rgba(255,255,255,.36); color: #FFFFFF; background: rgba(255,255,255,.04); }
.service-proof-band { background: #F4F7FA; border-bottom: 1px solid #E1E8EE; }
.service-proof-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.service-proof-grid > div { display:flex; align-items:center; gap:12px; min-width:0; padding: 8px 16px; }
.service-proof-number { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:12px; color:#087F78; background:rgba(19,184,166,.13); font-weight:800; font-size:13px; }
.service-proof-grid strong { display:block; color:#101C2C; font-size:14px; }
.service-proof-grid small { display:block; margin-top:3px; color:#526174; font-size:12px; }
.service-hero + .service-proof-band + .container { padding-top: 28px; }
.service-final-cta { background: #F4F7FA; }
.service-final-cta h2 { color:#101C2C; }
.service-final-cta .btn-primary { background:#13B8A6; color:#082B2B; border-color:#13B8A6; }
@media (max-width: 760px) {
  .service-hero h1 { font-size: clamp(2.25rem, 9vw, 3.4rem); }
  .service-proof-grid { grid-template-columns: 1fr; gap: 4px; padding-top: 14px; padding-bottom: 14px; }
  .service-proof-grid > div { padding: 8px 2px; }
  .service-hero .hero-visual img { border-radius: 16px; }
}


/* Homepage redesign: global IT positioning and refined card system */
.home-hero{padding:clamp(3.8rem,6.4vw,5.7rem) 0 clamp(3.4rem,5vw,4.8rem);background:radial-gradient(ellipse at 83% 18%,rgba(19,184,166,.30),transparent 39%),linear-gradient(120deg,#0d1b2a 0%,#102d3a 55%,#06484b 100%)}
.home-hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none;background-image:radial-gradient(circle,rgba(73,223,210,.9) 1px,transparent 1.5px);background-size:9px 9px;mask-image:radial-gradient(ellipse at 78% 38%,#000 0%,transparent 47%)}
.home-hero h1{font-size:clamp(2.65rem,4.35vw,4.1rem);max-width:650px;line-height:1.055;margin:1rem 0 1.15rem}
.home-hero .lede{line-height:1.68;max-width:560px}
.home-hero-art{min-height:360px}
.hero-browser{width:min(100%,480px);border-radius:15px;box-shadow:0 28px 70px rgba(0,0,0,.28)}
.browser-content{padding:clamp(1.1rem,2.3vw,1.7rem)}
.floating-chip{border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.23)}
.stat-strip{margin-top:-.3rem;position:relative;z-index:2;border:1px solid #e1edf2;border-radius:18px;box-shadow:0 12px 34px rgba(16,28,44,.07);background:rgba(255,255,255,.96);padding:1.15rem .8rem}
.stat-strip .num{font-size:clamp(1.1rem,2vw,1.65rem);letter-spacing:-.035em}
.process{gap:1.1rem}
.process-step,.service-card,.value-card,.portfolio-card,.video-testimonial{border:1px solid #e6edf2;border-radius:16px;box-shadow:0 7px 24px rgba(16,28,44,.045);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.process-step:hover,.service-card:hover,.value-card:hover,.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,28,44,.09);border-color:rgba(19,184,166,.45)}
.service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.service-card{padding:1.35rem 1.25rem;background:#fff;min-height:265px}
.service-card .icon-badge{width:58px;height:58px;padding:10px;background:#e8f9f8;border-radius:50%;margin-bottom:.7rem}
.service-card .title{font-size:1.08rem;line-height:1.25}
.service-card p.desc{font-size:.88rem;line-height:1.6}
.value-grid{gap:1rem}
.value-card{padding:1.5rem 1.2rem;background:#fff}
.value-card .icon-badge{width:62px;height:62px;padding:7px;background:#f0f8fa;border-radius:17px}
#testimonials{background:linear-gradient(180deg,#f4f8fb 0%,#fff 100%)}
.video-grid-preview{gap:1rem}
.video-testimonial{overflow:hidden;background:#fff}
.video-caption{padding:1rem 1.1rem 1.2rem}
.video-caption strong{font-size:1rem}
.cta-band{border-radius:18px;background:radial-gradient(ellipse at 85% 20%,rgba(19,184,166,.18),transparent 40%),linear-gradient(115deg,#101c2c,#102d3a);box-shadow:0 18px 45px rgba(16,28,44,.15)}
@media(max-width:980px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero-art{min-height:340px}}
@media(max-width:600px){.home-hero{padding:3.4rem 0 2.8rem}.home-hero h1{font-size:clamp(2.35rem,10vw,3.25rem)}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.stat-strip{padding:.7rem}.home-hero-art{min-height:290px}}


/* Approved global IT homepage visual-match refinements */
.home-hero{padding:clamp(2.9rem,5vw,4.2rem) 0 clamp(2.5rem,4.2vw,3.7rem);background:radial-gradient(ellipse at 79% 30%,rgba(19,184,166,.32),transparent 40%),linear-gradient(112deg,#0b1b2b 0%,#102d3a 55%,#075054 100%)}
.home-hero:before{opacity:.12;background-size:44px 44px}
.home-hero h1{font-size:clamp(2.45rem,4vw,3.65rem);line-height:1.06;max-width:570px;margin:.95rem 0 1rem}
.home-hero .lede{font-size:clamp(.96rem,1.12vw,1.06rem);line-height:1.65;max-width:510px}
.home-hero .hero-actions{margin-top:1.45rem;gap:.7rem}
.home-hero .hero-proof{margin-top:1.2rem;font-size:.78rem;flex-wrap:wrap}
.home-hero-art-real{min-height:0!important;display:block!important;width:100%;max-width:690px;margin-inline:auto;position:relative}
.global-hero-illustration{display:block;width:100%;height:auto;max-height:490px;object-fit:contain;filter:drop-shadow(0 22px 35px rgba(0,0,0,.13))}
.home-hero-art-real .floating-chip{font-size:.72rem;padding:10px 13px;background:rgba(9,30,43,.88);border-color:rgba(103,232,218,.28)}
.home-hero-art-real .chip-top{top:18%;left:-1%}.home-hero-art-real .chip-bottom{right:-1%;bottom:10%}
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;margin-top:-.15rem;padding:1.15rem .75rem;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(16,28,44,.07)}
.stat-strip .stat{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.3rem 1rem;border-right:1px solid #e8eef2}
.stat-strip .num{font-size:clamp(1rem,1.65vw,1.45rem);font-weight:800;color:#087f78;letter-spacing:-.04em}
.stat-strip .lbl{font-size:.72rem;line-height:1.4;color:#657587;margin-top:.25rem}
.section-alt{background:#f3f7fa}
.section-head{max-width:760px;margin-bottom:2rem}
.section-head h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.13;letter-spacing:-.045em;margin-top:.55rem}
.section-head .lede{max-width:66ch;color:#536477;font-size:.96rem;line-height:1.7;margin-top:.75rem}
.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem}
.process-step{position:relative;padding:1.45rem 1.45rem 1.55rem;min-height:205px;background:rgba(255,255,255,.92);border:1px solid #e3ebf0;border-radius:17px;box-shadow:0 8px 24px rgba(16,28,44,.045)}
.process-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#e0f8f5;color:#078f86;font-size:1.8rem;font-weight:700;margin-bottom:1rem}
.step-number{position:absolute;right:1.25rem;top:1.25rem;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f0f5f8;color:#122b3a;font-size:.72rem;font-weight:800}
.process-step .step-crumb{font-size:.62rem;letter-spacing:.13em;color:#078f86;font-weight:800}
.process-step h3{font-size:1.1rem;margin:.45rem 0 .55rem}
.process-step p{font-size:.88rem;line-height:1.65}
.service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.service-card{position:relative;min-height:260px;padding:1.25rem 1.15rem 1.2rem;border-radius:15px;background:#fff;border:1px solid #e6edf2;box-shadow:0 7px 22px rgba(16,28,44,.045)}
.service-card .icon-badge{width:52px;height:52px;padding:8px;border-radius:16px;background:#e9f8f7;margin-bottom:.65rem}
.service-card .crumb{display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:#078f86;font-weight:800;margin-bottom:.35rem}
.service-card .title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;line-height:1.3;font-weight:800;color:#142b3a}
.service-card .desc{font-size:.82rem;line-height:1.6;color:#5d6c7b;margin:.55rem 0 .9rem}
.service-card .go{font-size:.78rem;font-weight:800;color:#087f78;margin-top:auto}
.value-grid{gap:1rem}.value-card{padding:1.4rem 1.2rem;border-radius:16px;background:#fff;text-align:left}.value-card .icon-badge{width:55px;height:55px;padding:8px;border-radius:16px;background:#e9f8f7;margin-bottom:.7rem}.value-card h3{font-size:1rem;line-height:1.35}.value-card p{font-size:.84rem;line-height:1.65}
.portfolio-grid{gap:1rem}.portfolio-card{border-radius:16px;box-shadow:0 7px 22px rgba(16,28,44,.045)}
.video-grid.video-grid-preview{gap:1rem}.video-testimonial{overflow:hidden;border-radius:15px;background:#fff}.video-caption{padding:1rem 1.1rem 1.15rem}.video-caption strong{font-size:.9rem}.video-caption span{font-size:.75rem;line-height:1.5}
.cta-band{padding:clamp(1.5rem,3vw,2.4rem);border-radius:17px;background:radial-gradient(ellipse at 85% 20%,rgba(19,184,166,.2),transparent 42%),linear-gradient(115deg,#101c2c,#102d3a);box-shadow:0 18px 45px rgba(16,28,44,.13)}
.site-footer{background:#0d1b2a}.site-footer .footer-about p{max-width:33ch;line-height:1.7}
@media(max-width:980px){.home-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:1.8rem}.home-hero-art-real{min-height:0!important}.home-hero-art-real .chip-top{left:-2%}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process{gap:.8rem}}
@media(max-width:720px){.home-hero-grid{grid-template-columns:1fr}.home-hero-copy{max-width:680px}.home-hero-art-real{width:min(100%,600px);margin-top:.2rem}.global-hero-illustration{max-height:none}.home-hero-art-real .chip-top{left:0;top:14%}.home-hero-art-real .chip-bottom{right:0;bottom:8%}.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.stat-strip .stat:nth-child(2){border-right:0}.stat-strip .stat:nth-child(-n+2){border-bottom:1px solid #e8eef2}.process{grid-template-columns:1fr}.process-step{min-height:0}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.home-hero{padding:3rem 0 2.2rem}.home-hero h1{font-size:clamp(2.25rem,10vw,3rem)}.home-hero-art-real .floating-chip{font-size:.62rem;padding:8px 9px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.stat-strip .stat{padding:.7rem .35rem}.stat-strip .lbl{font-size:.66rem}}


/* Targeted refinements: complete service thumbnails, trust-strip icons and reference-style capabilities layout */
.stat-strip .stat{position:relative;gap:.12rem}
.stat-icon{display:grid;place-items:center;width:36px;height:36px;margin:0 auto .35rem;border-radius:12px;background:#e5f8f7;color:#078f9e;font-size:1.35rem;font-weight:800;line-height:1}
.stat-strip .num{white-space:nowrap}
.service-card{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}
.service-thumb{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;width:100%;height:94px;margin:0 0 1rem;border-radius:11px;background:linear-gradient(135deg,#e0f8f5,#f3f7fa)}
.service-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.service-card:hover .service-thumb img{transform:scale(1.045)}
.service-thumb-code,.service-thumb-commerce,.service-thumb-enterprise{font-family:'Plus Jakarta Sans',sans-serif;font-size:2.2rem;font-weight:800;color:#087f78;letter-spacing:-.08em}
.service-thumb-code{background:radial-gradient(circle at 75% 25%,rgba(19,184,166,.25),transparent 40%),linear-gradient(135deg,#e5f8f7,#f5f8fb)}
.service-thumb-commerce{background:radial-gradient(circle at 70% 30%,rgba(19,184,166,.25),transparent 42%),linear-gradient(135deg,#edf4ff,#e3faf6)}
.service-thumb-enterprise{background:radial-gradient(circle at 25% 70%,rgba(19,184,166,.24),transparent 40%),linear-gradient(135deg,#e6f8f6,#f4f7fa)}
.service-card .icon-badge{width:42px;height:42px;padding:6px;border-radius:12px;margin-bottom:.6rem}
.service-card .crumb{font-size:.58rem}
.service-card .desc{margin:.5rem 0 .85rem}
.portfolio-grid-reference{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}
.portfolio-grid-reference .portfolio-card{display:grid;grid-template-rows:210px 1fr;overflow:hidden;min-width:0;background:#fff}
.portfolio-grid-reference .portfolio-featured{grid-column:1/-1;grid-template-columns:1.05fr .95fr;grid-template-rows:minmax(230px,1fr);min-height:250px}
.portfolio-grid-reference .portfolio-visual{display:flex;align-items:center;justify-content:center;min-height:0;height:100%;overflow:hidden}
.portfolio-grid-reference .portfolio-featured .portfolio-visual{min-height:250px}
.portfolio-grid-reference .portfolio-info{padding:1.35rem 1.5rem 1.45rem;display:flex;flex-direction:column;align-items:flex-start}
.portfolio-grid-reference .portfolio-featured .portfolio-info{justify-content:center;padding:clamp(1.3rem,3vw,2.2rem)}
.portfolio-grid-reference .portfolio-info h3{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.25;letter-spacing:-.035em;margin:.55rem 0}
.portfolio-grid-reference .portfolio-info p{font-size:.88rem;line-height:1.65;color:#5d6c7b}
.portfolio-grid-reference .portfolio-info .text-link{margin-top:auto;padding-top:.55rem}
.portfolio-grid-reference .portfolio-web{background:linear-gradient(130deg,#dff7f4,#c8ece9 55%,#102c3a 55%,#102c3a)}
.portfolio-grid-reference .portfolio-featured .mock-window{width:84%;transform:rotate(-2deg);box-shadow:0 18px 36px rgba(16,28,44,.2)}
.portfolio-grid-reference .portfolio-app{background:radial-gradient(circle at 80% 15%,rgba(19,184,166,.3),transparent 34%),linear-gradient(135deg,#e4f8f5,#bdebe6)}
.portfolio-grid-reference .portfolio-growth{background:linear-gradient(135deg,#102331,#123f48)}
.portfolio-grid-reference .portfolio-note{font-size:.72rem;color:#758493;margin-top:1rem}
@media(max-width:760px){
 .stat-strip .stat{padding:.7rem .35rem}
 .stat-icon{width:30px;height:30px;font-size:1.15rem}
 .portfolio-grid-reference{grid-template-columns:1fr}
 .portfolio-grid-reference .portfolio-featured{grid-column:auto;grid-template-columns:1fr;grid-template-rows:210px auto}
 .portfolio-grid-reference .portfolio-featured .portfolio-visual{min-height:210px}
 .portfolio-grid-reference .portfolio-card{grid-template-rows:190px 1fr}
 .portfolio-grid-reference .portfolio-info{padding:1.15rem}
}
@media(max-width:480px){
 .service-thumb{height:112px}
 .stat-strip .num{font-size:.95rem}
 .stat-strip .lbl{font-size:.64rem}
}

/* Reference-match refinement: real service imagery and editorial capability cards */
.portfolio-grid-reference .portfolio-photo{position:relative;background:#101c2c;min-height:0}
.portfolio-grid-reference .portfolio-photo>img{display:block;width:100%;height:100%;min-height:210px;object-fit:cover;transition:transform .45s ease;filter:saturate(.92)}
.portfolio-grid-reference .portfolio-card:hover .portfolio-photo>img{transform:scale(1.035)}
.portfolio-grid-reference .portfolio-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,25,40,.04) 35%,rgba(9,25,40,.74) 100%);pointer-events:none}
.portfolio-grid-reference .visual-label{position:absolute;z-index:1;left:1.1rem;bottom:1rem;display:flex;align-items:center;gap:.55rem;color:#fff;font-size:.68rem;letter-spacing:.12em;font-weight:800}
.portfolio-grid-reference .visual-label span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#13b8a6;color:#101c2c;letter-spacing:0;font-size:.72rem}
.portfolio-grid-reference .portfolio-featured .portfolio-photo>img{min-height:250px}
.service-card .service-thumb{height:112px;border-radius:12px;background:#eaf5f6}
.service-card .service-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){
 .portfolio-grid-reference{grid-template-columns:1fr}
 .portfolio-grid-reference .portfolio-featured{grid-column:auto;grid-template-columns:1fr;grid-template-rows:190px auto}
 .portfolio-grid-reference .portfolio-featured .portfolio-photo{min-height:190px}
 .portfolio-grid-reference .portfolio-photo>img,.portfolio-grid-reference .portfolio-featured .portfolio-photo>img{min-height:190px}
}

/* Reference-matched “Digital solutions built around real business goals” section */
.business-goals-section{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3.2rem,6vw,5.3rem) 0;background:linear-gradient(105deg,#f7fbfc 0%,#f4f9fa 48%,#eaf3f5 100%)}
.business-goals-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:clamp(1.8rem,4vw,3.8rem);max-width:1280px}
.business-goals-copy{position:relative;z-index:2}.business-goals-head{max-width:620px;margin:0 0 1.65rem}.business-goals-head .eyebrow{display:flex;align-items:center;gap:.45rem;margin-bottom:.7rem}.eyebrow-arrow{font-size:1.1rem;color:#13b8a6}.business-goals-head h2{font-size:clamp(1.85rem,3.2vw,2.65rem);line-height:1.08;letter-spacing:-.045em;max-width:590px;margin:0 0 .8rem;color:#101c2c}.business-goals-head .lede{font-size:clamp(.94rem,1.15vw,1.04rem);line-height:1.55;color:#566778;max-width:560px;margin:0}.business-goals-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;border-radius:13px;overflow:hidden;box-shadow:0 8px 28px rgba(16,28,44,.06)}.business-benefit-card{min-height:144px;background:rgba(255,255,255,.96);padding:1.1rem 1.2rem 1.05rem;transition:transform .2s ease,box-shadow .2s ease;position:relative}.business-benefit-card:hover{z-index:1;transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,28,44,.08)}.benefit-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:.55rem;border-radius:12px;background:linear-gradient(145deg,#dff8f5,#c8efeb);color:#087f86}.benefit-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.business-benefit-card h3{font-size:1rem;line-height:1.25;margin:0 0 .35rem;color:#172637;letter-spacing:-.02em}.business-benefit-card p{font-size:.85rem;line-height:1.45;color:#5e6b78;margin:0;max-width:260px}.business-goals-visual{position:relative;min-height:390px;align-self:stretch;display:flex;align-items:center;justify-content:center;background:linear-gradient(110deg,rgba(244,249,250,.05),rgba(213,231,234,.12)),url('../images/website-development-img.jpg') center/cover no-repeat;border-radius:4px 18px 18px 4px;overflow:hidden}.business-goals-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,250,251,.38),rgba(238,246,247,.02) 45%,rgba(13,33,47,.06));}.goals-office-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 76% 18%,rgba(255,255,255,.7),transparent 40%)}.goals-laptop{position:relative;z-index:1;width:min(88%,490px);margin:2rem 0 0 1rem;filter:drop-shadow(0 22px 18px rgba(16,28,44,.2));transform:perspective(900px) rotateY(-4deg)}.goals-screen{position:relative;min-height:260px;overflow:hidden;border:9px solid #111d29;border-bottom-width:13px;border-radius:12px 12px 4px 4px;background:radial-gradient(circle at 80% 18%,rgba(19,184,166,.18),transparent 35%),#0d1c2c;padding:1.4rem 1.5rem;color:white;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.goals-screen-brand{display:block;color:#13b8a6;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:1.1rem}.goals-screen strong{display:block;position:relative;z-index:2;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.08;letter-spacing:-.035em;max-width:220px}.goals-screen-arrow{position:absolute;right:1.2rem;top:1.1rem;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#13b8a6;color:#fff;font-size:2rem;font-weight:400}.goals-chart{position:absolute;right:1.2rem;bottom:2.4rem;width:58%;height:105px;opacity:.95}.goals-chart svg{width:100%;height:100%;overflow:visible}.goals-bars{position:absolute;right:1.4rem;bottom:0;height:70px;width:58%;display:flex;align-items:flex-end;gap:7px}.goals-bars i{flex:1;background:linear-gradient(180deg,#19c9b6,#087d89);height:28%;border-radius:2px 2px 0 0}.goals-bars i:nth-child(2){height:40%}.goals-bars i:nth-child(3){height:35%}.goals-bars i:nth-child(4){height:56%}.goals-bars i:nth-child(5){height:50%}.goals-bars i:nth-child(6){height:78%}.goals-bars i:nth-child(7){height:94%}.goals-laptop-base{height:15px;margin:0 -4.5%;background:linear-gradient(#cbd4da,#71818d 55%,#dce4e8);clip-path:polygon(2% 0,98% 0,100% 70%,88% 100%,12% 100%,0 70%);border-radius:0 0 9px 9px}.goals-plant{position:absolute;z-index:2;left:2%;bottom:10%;width:76px;height:150px}.goals-plant:before{content:"";position:absolute;bottom:0;left:15px;width:48px;height:48px;background:linear-gradient(90deg,#e6e8e4,#fff,#c9d2d0);clip-path:polygon(8% 0,92% 0,80% 100%,20% 100%);box-shadow:0 7px 12px #0002}.goals-plant i{position:absolute;bottom:35px;left:38px;width:16px;height:80px;background:linear-gradient(90deg,#25634d,#5b9877);border-radius:100% 0 100% 0;transform-origin:bottom;transform:rotate(-32deg)}.goals-plant i:nth-child(2){transform:rotate(27deg);height:95px;left:36px}.goals-plant i:nth-child(3){transform:rotate(-8deg);height:110px;left:33px}.goals-plant i:nth-child(4){transform:rotate(49deg);height:72px;left:37px}
@media(max-width:900px){.business-goals-layout{grid-template-columns:1fr}.business-goals-visual{min-height:340px;order:-1}.business-goals-head{max-width:760px}.goals-laptop{width:min(76%,500px)}}
@media(max-width:600px){.business-goals-section{padding:2.8rem 0}.business-goals-head h2{font-size:2rem}.desktop-break{display:none}.business-goals-benefits{gap:4px}.business-benefit-card{padding:.9rem;min-height:150px}.business-benefit-card h3{font-size:.91rem}.business-benefit-card p{font-size:.8rem}.benefit-icon{width:38px;height:38px}.business-goals-visual{min-height:270px}.goals-screen{min-height:205px;padding:1rem;border-width:7px}.goals-screen strong{font-size:1.35rem}.goals-screen-arrow{width:36px;height:36px;font-size:1.5rem}.goals-chart{height:75px}.goals-bars{height:52px}.goals-plant{transform:scale(.7);transform-origin:bottom left;left:0}}

/* =========================================================
   Client testimonials page layout — restored component styles
   ========================================================= */
.testimonials-page{color:var(--ink);overflow:hidden}
.testimonials-page .testimonials-hero{position:relative;padding:clamp(3.5rem,7vw,6rem) 0 0;background:linear-gradient(135deg,#f4f7fa 0%,#eef5f7 58%,#f8fafc 100%);isolation:isolate}
.testimonials-hero-glow{position:absolute;z-index:-1;width:36rem;height:36rem;right:-10rem;top:-13rem;border-radius:50%;background:radial-gradient(circle,rgba(19,184,166,.14),rgba(19,184,166,0) 68%);pointer-events:none}
.testimonials-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:center;gap:clamp(2rem,6vw,5rem);padding-bottom:4rem}
.testimonials-hero-copy>*+*{margin-top:1.1rem}
.testimonials-kicker,.testimonials-section-label{display:inline-flex;align-items:center;gap:.55rem;color:var(--teal-dark);font-size:.82rem;font-weight:700;letter-spacing:.04em}
.testimonials-kicker>span{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(19,184,166,.13)}
.testimonials-hero h1{max-width:850px;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.05;letter-spacing:-.045em}
.testimonials-hero h1 em{font-style:italic;color:var(--teal-dark)}
.testimonials-hero-copy>p{max-width:62ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.8}
.testimonials-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}
.testimonials-text-link{font-weight:650;color:var(--ink);padding:.7rem .2rem}
.testimonials-text-link:hover{color:var(--teal-dark)}
.testimonials-proofline{display:flex;align-items:center;gap:.8rem;color:var(--muted);padding-top:.5rem}
.testimonials-proof-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--dark);color:#fff;font-size:.8rem;flex-shrink:0}
.testimonials-proofline strong,.testimonials-proofline small{display:block}
.testimonials-proofline strong{color:var(--ink);font-size:.9rem}
.testimonials-proofline small{margin-top:.15rem;font-size:.82rem}
.testimonials-hero-note{position:relative;overflow:hidden;padding:2.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(16,28,44,.08);min-height:270px}
.testimonials-note-mark{font-family:Georgia,serif;font-size:5rem;line-height:.85;color:var(--teal)}
.testimonials-hero-note p{position:relative;z-index:1;margin:1rem 0 1.4rem;font-family:var(--font-heading);font-weight:650;font-size:1.3rem;line-height:1.45}
.testimonials-note-rule{height:3px;width:52px;background:var(--teal);margin-bottom:1rem;border-radius:4px}
.testimonials-hero-note>span{font-size:.85rem;color:var(--muted)}
.testimonials-note-orbit{position:absolute;border:1px solid rgba(19,184,166,.18);border-radius:50%;pointer-events:none}
.testimonials-note-orbit.orbit-one{width:180px;height:180px;right:-95px;top:-80px}
.testimonials-note-orbit.orbit-two{width:130px;height:130px;right:-70px;top:-55px}
.testimonials-hero-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem max(1.25rem,calc((100vw - var(--container))/2 + 2.5rem));border-top:1px solid rgba(16,28,44,.09);color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em}
.testimonials-breadcrumb{display:flex;align-items:center;gap:.7rem;padding-top:1.3rem;padding-bottom:1.3rem;color:var(--muted);font-size:.82rem}
.testimonials-breadcrumb a:hover{color:var(--teal-dark)}
.testimonials-video-section,.testimonials-written-section{padding:clamp(3.5rem,6vw,5.5rem) 0}
.testimonials-video-section{background:#fff}
.testimonials-section-intro{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.3rem}
.testimonials-section-intro h2{margin-top:.55rem;max-width:650px;font-size:clamp(1.8rem,3.5vw,2.7rem);line-height:1.15}
.testimonials-section-intro>p{max-width:430px;color:var(--muted);line-height:1.75;font-size:.95rem}
.testimonials-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.testimonials-video-card{overflow:hidden;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 28px rgba(16,28,44,.045);transition:transform .18s ease,box-shadow .18s ease}
.testimonials-video-card:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(16,28,44,.1)}
.testimonials-page .video-embed{position:relative;width:100%;aspect-ratio:16/9;background:var(--dark);overflow:hidden}
.testimonials-page .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card-index{position:absolute;left:.75rem;top:.75rem;padding:.3rem .5rem;border-radius:5px;background:rgba(16,28,44,.82);color:#fff;font-family:var(--font-mono);font-size:.7rem}
.testimonials-video-caption{display:flex;flex-direction:column;align-items:flex-start;gap:.28rem;padding:1.15rem 1.25rem 1.35rem}
.video-caption-label{color:var(--teal-dark);font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.testimonials-video-caption strong{font-family:var(--font-heading);font-size:1.02rem}
.testimonials-video-caption>span:last-child{color:var(--muted);font-size:.82rem;line-height:1.5}
.testimonials-written-section{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testimonials-written-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.testimonials-written-card{padding:1.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 25px rgba(16,28,44,.04)}
.written-quote-mark{font-family:Georgia,serif;font-size:3.3rem;line-height:.8;color:var(--teal)}
.testimonials-written-card>p{margin:1rem 0 1.4rem;color:var(--muted);line-height:1.75}
.written-client{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--line-soft);padding-top:1rem}
.written-client-avatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:rgba(19,184,166,.14);color:var(--teal-dark);font-weight:750}
.written-client strong,.written-client div>span{display:block}
.written-client strong{font-size:.9rem}
.written-client div>span{margin-top:.2rem;color:var(--muted);font-size:.78rem}
.testimonials-final-cta{padding:clamp(3rem,6vw,5rem) 0}
.testimonials-cta-panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(2rem,5vw,3.5rem);background:var(--dark);color:var(--ink-inverse);border-radius:var(--radius-lg)}
.testimonials-cta-panel>div{position:relative;z-index:1;max-width:720px}
.testimonials-cta-panel .testimonials-section-label{color:var(--teal-light)}
.testimonials-cta-panel h2{margin:.7rem 0;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.15;color:#fff}
.testimonials-cta-panel p{color:var(--muted-inverse);line-height:1.7}
.testimonials-cta-panel .btn{position:relative;z-index:1;flex-shrink:0;background:var(--teal);color:#fff}
.testimonials-cta-panel .btn:hover{background:var(--teal-dark)}
.testimonials-cta-decoration{position:absolute;right:7%;bottom:-4rem;font-size:14rem;font-weight:800;line-height:1;color:rgba(255,255,255,.035);pointer-events:none}
@media(max-width:900px){.testimonials-hero-grid{grid-template-columns:1fr}.testimonials-hero-note{max-width:600px}.testimonials-video-grid,.testimonials-written-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.testimonials-section-intro{align-items:flex-start;flex-direction:column;gap:.8rem}}
@media(max-width:600px){.testimonials-hero-grid{padding-bottom:2.5rem}.testimonials-hero h1{font-size:clamp(2.35rem,11vw,3.4rem)}.testimonials-hero-bottom{font-size:.58rem}.testimonials-video-grid,.testimonials-written-grid{grid-template-columns:1fr}.testimonials-hero-note{padding:1.5rem;min-height:0}.testimonials-cta-panel{align-items:flex-start;flex-direction:column}.testimonials-section-intro h2{font-size:1.85rem}}


/* Refined homepage process section: clean editorial layout, no oversized decorative effects */
#about.section-alt{position:relative;overflow:hidden;background:#f4f7fa;background-image:none;border-top:1px solid #e3ebf0;padding-top:clamp(3.75rem,6vw,5.25rem);padding-bottom:clamp(3.75rem,6vw,5.25rem)}
#about.section-alt:before{content:none}
#about.section-alt .container{position:relative;z-index:1}
#about.section-alt .section-head{max-width:790px;margin:0 auto 2.35rem;text-align:center}
#about.section-alt .section-head .eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:0;border:0;border-radius:0;background:transparent;color:#087e78;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
#about.section-alt .section-head .eyebrow:after{content:"";display:block;width:28px;height:3px;border-radius:3px;background:#13b8a6}
#about.section-alt .section-head h2{max-width:680px;margin:.9rem auto .85rem;color:#101c2c;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,3.6vw,3rem);font-weight:750;line-height:1.12;letter-spacing:-.045em}
#about.section-alt .section-head .lede{max-width:660px;margin:0 auto;color:#586b7f;font-size:1rem;line-height:1.8}
#about .process{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem;align-items:stretch}
#about .process:before{content:"";position:absolute;left:16%;right:16%;top:2.15rem;height:1px;background:#cbd9e1;z-index:0}
#about .process-step{position:relative;z-index:1;min-height:0;padding:1.65rem 1.55rem 1.7rem;background:#fff;border:1px solid #e0e8ee;border-radius:14px;box-shadow:0 5px 18px rgba(16,28,44,.035);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#about .process-step:before{content:none}
#about .process-step:hover{transform:translateY(-3px);border-color:#a5ded8;box-shadow:0 12px 26px rgba(16,28,44,.075)}
#about .process-icon{width:42px;height:42px;margin:0 0 1.25rem;border:1px solid #b9eae4;border-radius:12px;background:#e7f8f6;color:#078f86;font-size:1.45rem}
#about .step-number{position:absolute;top:1.65rem;right:1.55rem;color:#a4b2bf;font-family:'IBM Plex Mono',monospace;font-size:.82rem;font-weight:700;letter-spacing:.04em}
#about .process-step .step-crumb{display:block;margin-bottom:.5rem;color:#078f86;font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.12em;font-weight:700}
#about .process-step h3{margin:.4rem 0 .6rem;color:#14283b;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;line-height:1.35;letter-spacing:-.025em}
#about .process-step p{margin:0;color:#586b7f;font-size:.92rem;line-height:1.75}
@media(max-width:720px){#about.section-alt .section-head{text-align:left;margin-bottom:1.8rem}#about.section-alt .section-head h2{margin-left:0;font-size:clamp(1.9rem,7vw,2.45rem)}#about.section-alt .section-head .lede{margin-left:0}#about .process{grid-template-columns:1fr;gap:.85rem}#about .process:before{content:none}#about .process-step{padding:1.3rem 1.25rem}#about .process-icon{margin-bottom:1rem}#about .step-number{top:1.3rem;right:1.25rem}}


/* ---------- Homepage written testimonials ---------- */
#testimonials .home-written-testimonials{margin:clamp(3rem,6vw,5rem) auto 0;max-width:1120px}
#testimonials .home-written-heading{text-align:center;max-width:700px;margin:0 auto 1.8rem}
#testimonials .home-written-heading h3{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.2;margin:.65rem 0 .7rem;color:var(--ink)}
#testimonials .home-written-heading p{color:var(--muted);font-size:.98rem}
#testimonials .home-written-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:stretch}
#testimonials .home-written-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:1.65rem 1.5rem 1.4rem;background:#fff;border:1px solid #e1e8ed;border-radius:16px;box-shadow:0 8px 28px rgba(16,28,44,.055);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:hidden}
#testimonials .home-written-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--teal),rgba(19,184,166,.18))}
#testimonials .home-written-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,28,44,.1);border-color:rgba(19,184,166,.45)}
#testimonials .home-written-card-featured{background:linear-gradient(160deg,#fff 0%,#f5fbfa 100%);border-color:rgba(19,184,166,.35)}
#testimonials .home-quote-mark{display:block;height:2.3rem;font-family:Georgia,serif;font-size:3.8rem;line-height:1;color:var(--teal);opacity:.9}
#testimonials .home-written-card>p{flex:1;margin:.45rem 0 1.4rem;color:#526174;font-size:.91rem;line-height:1.8}
#testimonials .home-written-author{display:flex;align-items:center;gap:.75rem;border-top:1px solid #e9eef1;padding-top:1rem}
#testimonials .home-written-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#e3f8f5;color:#087d73;font-size:.82rem;font-weight:800;letter-spacing:.02em}
#testimonials .home-written-author strong,#testimonials .home-written-author div span{display:block}
#testimonials .home-written-author strong{font-size:.92rem;color:var(--ink)}
#testimonials .home-written-author div span{margin-top:.15rem;font-size:.76rem;color:var(--muted)}
#testimonials .home-written-note{text-align:center;margin:1rem auto 0;max-width:760px;font-size:.72rem;color:#718096}
#testimonials .home-testimonial-actions{text-align:center;margin-top:1.8rem}
@media(max-width:900px){#testimonials .home-written-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#testimonials .home-written-card:last-child{grid-column:1/-1}}
@media(max-width:600px){#testimonials .home-written-grid{grid-template-columns:1fr}#testimonials .home-written-card:last-child{grid-column:auto}#testimonials .home-written-card{padding:1.4rem 1.25rem}}
@media(prefers-reduced-motion:reduce){#testimonials .home-written-card{transition:none}}


/* Homepage service cards use the image as their only visual; hide decorative icon badges. */
#services .service-card .icon-badge{display:none!important}

/* ITInfosoft testimonials hero: compact, illustration-led refinement.
   Append this file's contents to the END of css/style.css. */
.testimonials-page .testimonials-hero{
  padding:clamp(2rem,4vw,3.35rem) 0 0;
  background:linear-gradient(115deg,#f5f8fb 0%,#edf7f7 58%,#f8fafc 100%);
}
.testimonials-page .testimonials-hero-grid{
  gap:clamp(1.5rem,4vw,3.6rem);
  padding-bottom:clamp(1.7rem,3vw,2.4rem);
}
.testimonials-page .testimonials-hero-copy>*+*{margin-top:.8rem}
.testimonials-page .testimonials-hero h1{
  max-width:760px;
  font-size:clamp(2.15rem,4.3vw,3.65rem);
  line-height:1.07;
  letter-spacing:-.045em;
}
.testimonials-page .testimonials-hero-copy>p{
  max-width:58ch;
  font-size:clamp(.96rem,1.2vw,1.06rem);
  line-height:1.65;
}
.testimonials-page .testimonials-hero-actions{gap:.7rem}
.testimonials-page .testimonials-proofline{padding-top:.2rem}
.testimonials-page .testimonials-hero-note{
  min-height:225px;
  padding:1.55rem 1.6rem 1.4rem;
  border-radius:22px;
  box-shadow:0 16px 42px rgba(16,28,44,.075);
  background:linear-gradient(145deg,#fff 0%,#fbfefe 100%);
}
.testimonials-page .testimonials-note-mark{font-size:3.8rem;line-height:.72}
.testimonials-page .testimonials-hero-note p{
  max-width:88%;
  margin:.65rem 0 .85rem;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.38;
}
.testimonials-page .testimonials-note-rule{margin-bottom:.65rem;width:42px;height:3px}
.testimonials-page .testimonials-hero-note>span{display:block;max-width:72%;font-size:.78rem;line-height:1.45}
.testimonials-page .testimonials-hero-note:after{
  content:"";
  position:absolute;
  right:-4px;
  bottom:-12px;
  width:44%;
  max-width:205px;
  aspect-ratio:420/300;
  background:url('../images/testimonial-clipart.svg') center/contain no-repeat;
  pointer-events:none;
  opacity:.98;
}
.testimonials-page .testimonials-note-orbit{opacity:.45}
.testimonials-page .testimonials-note-orbit.orbit-one{width:145px;height:145px;right:-88px;top:-70px}
.testimonials-page .testimonials-note-orbit.orbit-two{width:105px;height:105px;right:-62px;top:-48px}
.testimonials-page .testimonials-hero-bottom{padding-top:.75rem;padding-bottom:.75rem;font-size:.64rem}
@media(max-width:900px){
  .testimonials-page .testimonials-hero-grid{grid-template-columns:minmax(0,1fr) minmax(230px,.72fr);gap:1.5rem}
  .testimonials-page .testimonials-hero h1{font-size:clamp(2.1rem,4.4vw,3rem)}
  .testimonials-page .testimonials-hero-note{min-height:210px}
}
@media(max-width:700px){
  .testimonials-page .testimonials-hero{padding-top:2rem}
  .testimonials-page .testimonials-hero-grid{grid-template-columns:1fr;padding-bottom:1.7rem}
  .testimonials-page .testimonials-hero h1{font-size:clamp(2.15rem,8vw,3rem)}
  .testimonials-page .testimonials-hero-note{min-height:190px;max-width:none;padding:1.35rem}
  .testimonials-page .testimonials-hero-note p{max-width:76%;font-size:1.1rem}
  .testimonials-page .testimonials-hero-note:after{width:40%;max-width:165px}
  .testimonials-page .testimonials-hero-bottom{gap:.6rem;font-size:.58rem}
}
@media(max-width:420px){
  .testimonials-page .testimonials-hero-note>span{max-width:68%}
  .testimonials-page .testimonials-hero-note:after{width:42%;right:-10px;bottom:-4px}
  .testimonials-page .testimonials-hero-bottom span:nth-child(3){display:none}
}

/* ITInfosoft Contact page — compact clip-art hero override.
   Append this file's contents to the bottom of css/style.css. */
body:has(.contact-grid) .hero-full {
  min-height: 0;
  background:
    radial-gradient(38rem 18rem at 88% 12%, rgba(19,184,166,.18), transparent 68%),
    linear-gradient(120deg, #101C2C 0%, #123044 64%, #164b54 100%);
  isolation: isolate;
}
body:has(.contact-grid) .hero-full .hero-decor { opacity: .45; }
body:has(.contact-grid) .hero-full .slider-arrow,
body:has(.contact-grid) .hero-full .slider-dots { display: none !important; }
body:has(.contact-grid) .hero-full .slide {
  padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(2rem, 3.5vw, 2.8rem);
}
body:has(.contact-grid) .hero-full .slide .container {
  display: block;
  max-width: 920px;
  position: relative;
  z-index: 1;
  text-align: center;
}
body:has(.contact-grid) .hero-full .hero-copy {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
body:has(.contact-grid) .hero-full .hero-copy > * + * { margin-top: .85rem; }
body:has(.contact-grid) .hero-full .hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem;
  border: 1px solid rgba(92,227,211,.34);
  border-radius: 999px;
  background: rgba(19,184,166,.10);
  color: #79f0e0;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body:has(.contact-grid) .hero-full .hero-copy h1 {
  max-width: 17ch;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
body:has(.contact-grid) .hero-full .hero-copy .lede {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  color: #d5e2ea;
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  line-height: 1.7;
}
/* Low-contrast vector illustration adds personality without competing with the heading. */
body:has(.contact-grid) .hero-full::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: clamp(1rem, 5vw, 5rem);
  bottom: -.5rem;
  width: clamp(110px, 15vw, 190px);
  aspect-ratio: 1;
  background: url('../images/contact-clipart.svg') center / contain no-repeat;
  opacity: .72;
  pointer-events: none;
}
@media (max-width: 700px) {
  body:has(.contact-grid) .hero-full .slide { padding: 2rem 0 2.4rem; }
  body:has(.contact-grid) .hero-full .hero-copy h1 { max-width: 14ch; font-size: clamp(1.9rem, 8vw, 2.5rem); }
  body:has(.contact-grid) .hero-full .hero-copy .lede { max-width: 40ch; }
  body:has(.contact-grid) .hero-full::after { width: 88px; right: .35rem; bottom: -.35rem; opacity: .28; }
}