/* =====================================================================
   Techohash — professional theme (Nov 2026)
   Loaded last on every page; overrides the original styles.
   To roll back: remove the <link ... theme.css> line from the pages.
   ===================================================================== */

:root{
  /* Corporate healthcare palette — deep navy + clinical teal (from the logo) */
  --navy:#0B1B36;
  --navy-soft:#13284D;
  --navy-deep:#07122A;
  --accent:#0A7A99;          /* AA contrast with white text */
  --accent-dark:#086580;
  --accent-bright:#21A9C9;   /* for use on dark backgrounds */
  --accent-tint:#EAF5F8;
  --ink:#0F172A;
  --ink-soft:#4B5567;
  --ink-mute:#7A8496;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FA;
  --line:#E2E7EE;
  --radius:10px;
  --max:1200px;
  --display:'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Inter', system-ui, sans-serif;   /* retire the code font site-wide */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 10px 30px -12px rgba(11,27,54,.18);
  --shadow-lg:0 24px 48px -20px rgba(11,27,54,.28);
}

body{color:var(--ink); font-size:16px; line-height:1.7; text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5{font-family:var(--display); letter-spacing:-0.022em; color:var(--ink); font-weight:700;}
h2{font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.2;}
h3{line-height:1.3;}
section{padding:104px 0;}
@media (max-width:720px){section{padding:64px 0;}}

/* Section labels: quiet, corporate small caps instead of code font */
.eyebrow{font-family:var(--body); font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--accent);}
.eyebrow::before{width:18px; height:2px;}
.section-head{max-width:680px; margin-bottom:3.6rem;}
.section-head p{font-size:1.06rem; color:var(--ink-soft);}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy-deep); color:#AAB4C5; font-size:.8rem; letter-spacing:.01em;}
.topbar .wrap{height:38px;}
.topbar a{color:#C9D1DE;}
.topbar a:hover{color:#fff;}
.ti{display:inline-block; width:14px; height:14px; vertical-align:-2px; flex:0 0 14px; color:var(--accent-bright);}
.topbar .left span, .topbar .social a{display:inline-flex; align-items:center; gap:.45rem;}

/* ---------- Header ---------- */
header{background:rgba(255,255,255,.97); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(15,23,42,.02);}
nav.wrap{height:76px;}
.navlinks{gap:2.2rem; font-size:.92rem; font-weight:500;}
.navlinks a{color:#1E293B; position:relative;}
.navlinks > li > a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;}
.navlinks > li > a:hover::after{transform:scaleX(1);}
.navlinks a:hover{color:var(--accent);}
.dropdown{border-radius:10px; border-color:var(--line); box-shadow:var(--shadow-lg); padding:.5rem;}
.dropdown a{border-radius:6px; color:var(--ink-soft);}
.dropdown a:hover{background:var(--accent-tint); color:var(--accent-dark);}
.nav-phone{font-family:var(--body); font-weight:600; font-size:.88rem; color:var(--ink);}
.nav-phone .ic{background:var(--accent-tint); color:var(--accent); width:36px; height:36px;}
.nav-phone .ic .ti{width:16px; height:16px; color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{font-family:var(--body); font-weight:600; letter-spacing:.005em; border-radius:6px; padding:.85rem 1.5rem; border-width:1.5px; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark); box-shadow:0 10px 24px -12px rgba(10,122,153,.6);}
.btn-outline{color:#fff; border-color:rgba(255,255,255,.35);}
.btn-outline:hover{background:rgba(255,255,255,.08); border-color:#fff;}
section:not(.hero):not(.d-hero):not(.cta-band):not(.callback):not(.stats) .btn-outline{color:var(--navy); border-color:#C5CEDB;}
section:not(.hero):not(.d-hero):not(.cta-band):not(.callback):not(.stats) .btn-outline:hover{border-color:var(--navy); background:transparent;}
.btn-dark{background:var(--navy);} .btn-dark:hover{background:var(--navy-soft);}

/* ---------- Hero (home slider) ---------- */
.hero{background:var(--navy); min-height:600px;}
.hero-bg-shape{background:
  linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 45%, #0F2D52 100%);}
.hero-bg-shape::after{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%);}
.slide{padding:96px 0;}
.slide .tag{font-family:var(--body); font-weight:600; font-size:.72rem; letter-spacing:.14em; color:#9FE1F0; background:rgba(33,169,201,.12); border:1px solid rgba(33,169,201,.28); border-radius:4px; padding:.38rem .75rem;}
.slide h1, .slide .slide-title{font-size:clamp(2rem,4.2vw,3.25rem); line-height:1.1; letter-spacing:-0.03em; font-weight:800;}
.slide p.lead{color:#B9C4D6; font-size:1.08rem; line-height:1.7;}
.hero-visual{background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1.6rem 1.8rem; box-shadow:0 30px 60px -30px rgba(0,0,0,.5);}
.hero-visual .row{font-size:.9rem; color:#D5DCE7; padding:1rem 0;}
.hero-visual .chip{font-family:var(--body); font-weight:600; font-size:.7rem; letter-spacing:.02em; background:rgba(33,169,201,.14); color:#8FDDEE; border:1px solid rgba(33,169,201,.25); border-radius:4px;}
.slider-controls button{background:rgba(255,255,255,.25);}
.slider-controls button.active{background:var(--accent-bright);}
.slide-arrow{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}
.slide-arrow:hover{background:var(--accent); border-color:var(--accent);}

/* ---------- Value strip under hero ---------- */
.usp{background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);}
.usp-grid{padding-top:1.5rem; padding-bottom:1.5rem; gap:0;}
.usp-grid > div{padding:0 1.4rem; border-left:1px solid var(--line);}
.usp-grid > div:first-child{border-left:none; padding-left:0;}
.usp-grid b{color:var(--navy); font-size:.95rem; font-weight:700;}
.usp-grid span{color:var(--ink-mute);}
@media (max-width:800px){.usp-grid > div{border-left:none; padding:.4rem 0;}}

/* ---------- Intro / about ---------- */
.intro-visual{background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md);}
.intro-list .ico{font-family:var(--body); font-weight:700; color:var(--accent);}

/* ---------- Stats ---------- */
.stats{background:var(--navy); padding:72px 0; position:relative;}
.stats .wrap{gap:0;}
.stat{padding:0 1rem; border-left:1px solid rgba(255,255,255,.1);}
.stat:first-child{border-left:none;}
.stat .num{color:#fff; font-size:2.8rem; letter-spacing:-0.03em;}
.stat .lab{font-family:var(--body); font-weight:600; font-size:.74rem; color:#8E9BB2; letter-spacing:.12em;}
@media (max-width:760px){.stat{border-left:none; padding:1rem 0;}}

/* ---------- Cards (services, products, departments, etc.) ---------- */
.svc-card, .product-box, .dept-group, .test-card, .price-card, .blog-card, .rel-grid a, .feat, .pain-card, .client-card, .form-card{
  border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.svc-card{padding:2.1rem;}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#C8D9E6;}
.svc-icon{border-radius:8px; background:var(--accent-tint); color:var(--accent);}
.svc-card .more{font-family:var(--body); font-size:.86rem; font-weight:600; color:var(--accent);}
.svc-card .more:hover{color:var(--accent-dark);}

.product-box{transition:transform .2s ease, box-shadow .2s ease;}
.product-box:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.product-thumb{height:96px; background:linear-gradient(135deg, var(--navy) 0%, #12355E 100%) !important; justify-content:flex-start; padding:0 1.3rem;}
.product-thumb::after{content:""; position:absolute; left:1.3rem; bottom:16px; width:28px; height:2px; background:var(--accent-bright);}
.product-thumb span{font-size:1.25rem; letter-spacing:.04em;}

.dept-group{padding:1.6rem;}
.dept-group h3{font-size:.98rem; color:var(--navy); padding-bottom:.7rem; border-bottom:1px solid var(--line); margin-bottom:.8rem;}
.dept-group a:hover{color:var(--accent);}

/* Compare (without / with) */
.compare-card{border-radius:12px; padding:2.2rem;}
.compare-card.old{border:1px solid var(--line); background:var(--bg-alt);}
.compare-card.old li .ico{color:#9AA3B2;}
.compare-card.new{background:var(--navy); box-shadow:var(--shadow-lg);}
.compare-card.new li .ico{color:var(--accent-bright);}

/* Process / timeline */
.process-step .idx{font-family:var(--body); font-weight:700; color:var(--accent); letter-spacing:.06em;}
.process-step::before{background:var(--line); height:2px;}
.process-step::after{top:-4px; width:10px; height:10px; background:#fff; border:2px solid var(--accent);}

/* Testimonials */
.test-card{padding:2.1rem;}
.test-card .stars{color:#E2A400; letter-spacing:.1em;}
.avatar{background:var(--accent-tint); color:var(--accent);}

/* Standards strip */
.standard-badge{font-family:var(--body); font-weight:600; letter-spacing:.04em; color:var(--ink-soft); background:var(--bg-alt); border-color:var(--line); border-radius:6px;}

/* Pricing */
.price-card{padding:2.4rem;}
.price-card.featured{background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow-lg); transform:translateY(-8px);}
.price-card.featured::before{font-family:var(--body); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.64rem; border-radius:4px; background:var(--accent-bright);}
.price-card .tag{font-family:var(--body); font-weight:700;}
@media (max-width:920px){.price-card.featured{transform:none;}}

/* FAQ */
.faq-q{font-family:var(--display); font-weight:600; font-size:1.02rem;}
.faq-q .plus{font-family:var(--body); color:var(--accent);}
.faq-d details{border-radius:8px; box-shadow:var(--shadow-sm);}
.faq-d summary{font-family:var(--display);}
.faq-d summary::after{font-family:var(--body); font-weight:600;}

/* Blog */
.blog-card{transition:transform .2s ease, box-shadow .2s ease;}
a.blog-card:hover, .blog-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.blog-thumb{height:112px; background:linear-gradient(135deg, var(--navy) 0%, #12355E 100%);}
.blog-thumb::after{background:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:22px 22px;}
.blog-date{font-family:var(--body); font-weight:600; font-size:.68rem; border-radius:4px; left:12px; bottom:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(4px);}
.blog-body{padding:1.3rem 1.4rem 1.5rem;}
.blog-body .tag{font-family:var(--body); font-weight:700; letter-spacing:.1em;}
.blog-body h4{font-size:.98rem; line-height:1.4;}

/* Clients marquee */
.client-card{border-radius:10px;}
.client-card img{filter:grayscale(1); opacity:.85; transition:filter .2s, opacity .2s;}
.client-card:hover img{filter:none; opacity:1;}

/* Contact / call-back */
.callback{background:linear-gradient(120deg, var(--navy-deep), var(--navy));}
.callback p{color:#AEB9CB;}
.callback-info .row .ti{width:18px; height:18px; flex-basis:18px; margin-top:3px;}
.form-card{padding:2.2rem; box-shadow:var(--shadow-lg);}
.form-field label{font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.06em; color:var(--ink-soft);}
.form-field input, .form-field textarea, .form-field select{border-radius:6px; border-color:#D3DAE4; background:#FBFCFD;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:3px solid rgba(10,122,153,.18); outline-offset:0; border-color:var(--accent); background:#fff;}

/* ---------- Inner pages ---------- */
.d-hero{background:linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 50%, #0F2D52 100%); padding:80px 0 88px;}
.d-hero::before{background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 60% 90% at 85% 30%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 60% 90% at 85% 30%, #000 20%, transparent 75%);}
.d-hero h1{font-weight:800; letter-spacing:-0.03em; line-height:1.12;}
.d-hero p.lead{color:#B9C4D6;}
.d-hero .tag{font-family:var(--body); font-weight:600; font-size:.72rem; letter-spacing:.14em; color:#9FE1F0; background:rgba(33,169,201,.12); border:1px solid rgba(33,169,201,.28); border-radius:4px;}
.crumbs{color:#8E9BB2;}
.crumbs a{color:#C9D1DE;}
.pain-card{background:#fff;}
.pain-card li::before{color:#9AA3B2; font-family:var(--body);}
.rel-grid a{transition:border-color .15s, box-shadow .15s, transform .15s;}
.rel-grid a:hover{border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.cta-band{background:linear-gradient(120deg, var(--navy-deep), var(--navy));}
.cta-band p{color:#B9C4D6;}
.prose p, .prose li{color:var(--ink-soft);}
.prose h2{margin-top:.4em;}
.prose a{color:var(--accent); text-underline-offset:3px;}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep); color:#8E9BB2;}
footer h5{font-family:var(--body); font-weight:700; letter-spacing:.12em; color:#E6EBF2;}
footer a{color:#A7B2C4;} footer a:hover{color:#fff;}
.footer-bottom{border-top-color:rgba(255,255,255,.08); color:#7D8AA0;}

/* Misc */
.back-top{background:var(--navy); box-shadow:var(--shadow-md);}
.back-top:hover{background:var(--accent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
::selection{background:#CDEBF3; color:var(--navy);}

/* Mobile: keep the top bar to one tidy line */
@media (max-width:700px){
  .topbar .left span:first-child{display:none;}
  .topbar .wrap{height:auto; padding-top:.45rem; padding-bottom:.45rem;}
}
