/* ============================================================
   HYGIENCLOUD IT — PREMIUM REDESIGN LAYER (v2)
   Loaded after style.css/overter.css on every page. Additive —
   overrides visual treatment only, never markup or functionality.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600;700&display=swap');

:root{
  --hc-black:#000000;
  --hc-ink:#05070C;
  --hc-purple:#7C3AED;
  --hc-radius-lg:28px;
  --hc-radius-xl:32px;
  --hc-border-soft:rgba(255,255,255,.1);
  --hc-serif:'Instrument Serif',serif;
  --hc-sans:'Barlow',sans-serif;
}

/* ---------- Typography: editorial headings sitewide ---------- */
h1,h2{font-family:var(--hc-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;}
.section-title h2,.page-hero h1,.hub-hero h1,.home-hero h1{font-family:var(--hc-serif);font-style:italic;font-weight:400;}
.section-title .label,.hub-hero .mini-crumb,.page-hero .crumb{font-family:var(--hc-sans);}
.section-title .label{
  background:transparent;border:none;color:var(--text-light);padding:0;font-weight:600;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;backdrop-filter:none;
}
.transparent .section-title .label{color:rgba(255,255,255,.7);}

/* ---------- Buttons: unified pill + liquid glass ---------- */
.btn{border-radius:999px;font-family:var(--hc-sans);font-weight:500;letter-spacing:.1px;}
.btn-primary{background:#0B0F19;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.btn-primary:hover{box-shadow:0 14px 34px rgba(0,0,0,.35);}
.btn-outline{border-radius:999px;}

/* ---------- Cards: softer, larger, premium ---------- */
.card{border-radius:var(--hc-radius-lg);}
.why-item{border-radius:20px;}
.price-card,.job-row,.benefit-box,.hours-box{border-radius:var(--hc-radius-lg);}
.pill,.tech-pill{border-radius:999px;font-family:var(--hc-sans);}

/* ---------- Nav: dark glass, pill inner bar ----------
   Geometry (fixed, top:0, full width, 70px height) is left exactly as-is
   so no other page's spacing assumptions break — only the skin changes. */
.site-nav{background:transparent !important;box-shadow:none !important;border-bottom:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding:10px 14px 0;}
.nav-inner{height:64px;border-radius:999px;background:rgba(8,10,16,.6);border:1px solid var(--hc-border-soft);
  box-shadow:0 16px 44px rgba(0,0,0,.3);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);padding-left:22px;padding-right:14px;}
.site-nav .nav-link,.site-nav .logo-text .t1{color:rgba(255,255,255,.85);}
.site-nav .logo-text .t2{color:#93C5FD;}
.site-nav .logo-text .t3{color:rgba(255,255,255,.6);}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:#fff;background:rgba(255,255,255,.08);}
.site-nav .nav-dropdown-menu{background:rgba(10,12,20,.92);border:1px solid var(--hc-border-soft);top:calc(100% + 10px);}
.site-nav .nav-dropdown-menu a{color:rgba(255,255,255,.75);}
.site-nav .nav-dropdown-menu a:hover{background:rgba(255,255,255,.06);color:#fff;}
@media (max-width:900px){
  .site-nav{padding:8px 8px 0;}
  .nav-inner{border-radius:20px;}
  .mobile-menu-btn{color:#fff;}
  .mobile-menu{background:#05070C;border:1px solid var(--hc-border-soft);border-radius:20px;margin:6px 8px 0;}
  .mobile-menu a{color:rgba(255,255,255,.85);}
}

/* ---------- Footer: refined typography ---------- */
.footer-grid h4{font-family:var(--hc-sans);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:12.5px;}
.footer-links a{font-family:var(--hc-sans);}
.newsletter-form{border-radius:999px;}

/* ---------- Homepage cinematic hero override ---------- */
.hc-hero-v2{background:radial-gradient(circle at 20% 20%,rgba(124,58,237,.25),transparent 55%),
  radial-gradient(circle at 80% 75%,rgba(37,99,235,.25),transparent 55%),#000 !important;
  animation:none !important;}
.hc-hero-v2 .hero-badge{background:transparent;border:none;box-shadow:none;padding:0;
  font-family:var(--hc-sans);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.6);}
.hc-hero-v2 .accent-text{background:linear-gradient(90deg,#93C5FD,#C4B5FD);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hc-hero-v2 .hero-stats{border-top:1px solid var(--hc-border-soft);padding-top:32px;margin-top:48px;}
.hc-hero-v2 .hero-stats .n{font-family:var(--hc-serif);font-style:italic;font-weight:400;}

/* ---------- Editorial numbered list (services / process) ---------- */
.hc-edit-list{display:flex;flex-direction:column;}
.hc-edit-row{display:grid;grid-template-columns:90px 1fr auto;gap:28px;align-items:center;
  padding:34px 8px;border-top:1px solid var(--border);transition:background .3s ease;}
.hc-edit-list a.hc-edit-row{cursor:pointer;}
.hc-edit-row:hover{background:rgba(37,99,235,.04);}
.hc-edit-list .hc-edit-row:last-child{border-bottom:1px solid var(--border);}
.hc-edit-num{font-family:var(--hc-serif);font-style:italic;font-size:34px;color:var(--text-light);}
.hc-edit-body h3{font-size:clamp(19px,2.2vw,26px);font-weight:700;font-family:'Poppins',sans-serif;margin-bottom:6px;color:var(--text);}
.hc-edit-body p{font-size:14.5px;color:var(--text-light);max-width:560px;line-height:1.6;}
.hc-edit-row .link{font-size:14px;font-weight:600;color:var(--primary);white-space:nowrap;}
@media (max-width:700px){
  .hc-edit-row{grid-template-columns:48px 1fr;}
  .hc-edit-row .link{grid-column:2;}
}

/* ---------- Dark immersive capability sections (AI / Cloud) ---------- */
.hc-dark-section{background:#05070C;color:#fff;position:relative;overflow:hidden;padding:clamp(80px,10vw,130px) 24px;}
.hc-dark-section::before{content:'';position:absolute;inset:0;pointer-events:none;}
.hc-dark-section.hc-ai::before{background:radial-gradient(circle at 20% 20%,rgba(124,58,237,.22),transparent 55%);}
.hc-dark-section.hc-cloud::before{background:radial-gradient(circle at 80% 30%,rgba(37,99,235,.22),transparent 55%);}
.hc-dark-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:900px){.hc-dark-inner{grid-template-columns:1fr;}}
.hc-dark-eyebrow{font-family:var(--hc-sans);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px;display:block;}
.hc-dark-section h2{font-family:var(--hc-serif);font-style:italic;font-size:clamp(2rem,4vw,3.4rem);line-height:1.12;margin-bottom:20px;}
.hc-dark-section p.hc-dark-desc{font-family:var(--hc-sans);font-weight:300;font-size:16px;color:rgba(255,255,255,.7);line-height:1.7;max-width:520px;margin-bottom:28px;}
.hc-dark-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.hc-dark-list li{font-family:var(--hc-sans);font-size:15px;color:rgba(255,255,255,.85);padding-left:24px;position:relative;}
.hc-dark-list li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--hc-purple),#2563EB);}
.hc-dark-visual{position:relative;aspect-ratio:1/1;border-radius:var(--hc-radius-xl);border:1px solid var(--hc-border-soft);
  background:rgba(255,255,255,.02);backdrop-filter:blur(20px);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hc-dark-visual .hc-orb{position:absolute;width:60%;height:60%;border-radius:50%;filter:blur(50px);opacity:.55;animation:hcOrbFloat 8s ease-in-out infinite;}
.hc-ai .hc-orb{background:radial-gradient(circle,var(--hc-purple),transparent 70%);}
.hc-cloud .hc-orb{background:radial-gradient(circle,#2563EB,transparent 70%);}
@keyframes hcOrbFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(10px,-14px) scale(1.06);}}
.hc-dark-visual .hc-ring{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;}
.hc-dark-visual .hc-ring.r1{width:70%;height:70%;animation:hcSpin 22s linear infinite;}
.hc-dark-visual .hc-ring.r2{width:46%;height:46%;animation:hcSpin 16s linear infinite reverse;}
@keyframes hcSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.hc-dark-visual .hc-orb,.hc-dark-visual .hc-ring{animation:none;}}

/* ---------- Tech wall (grouped) ---------- */
.hc-tech-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;margin-top:20px;}
.hc-tech-group h4{font-family:var(--hc-sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-light);margin-bottom:14px;}
.hc-tech-group .pill-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ---------- Case-study rows (portfolio) ---------- */
.hc-case-row{display:grid;grid-template-columns:1fr 2fr auto;gap:24px;align-items:center;padding:30px 8px;
  border-top:1px solid var(--border);text-decoration:none;transition:background .3s;}
.hc-case-row:last-child{border-bottom:1px solid var(--border);}
.hc-case-row:hover{background:rgba(37,99,235,.04);}
.hc-case-thumb{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.12));
  display:flex;align-items:center;justify-content:center;font-size:26px;}
.hc-case-body .tag{font-size:12px;color:var(--text-light);text-transform:uppercase;letter-spacing:1px;}
.hc-case-body h3{font-family:'Poppins',sans-serif;font-size:clamp(17px,2vw,22px);margin-top:4px;color:var(--text);}
@media (max-width:700px){.hc-case-row{grid-template-columns:48px 1fr;}.hc-case-row .link{grid-column:2;}}

/* ============================================================
   HYGIENCLOUD IT — SITEWIDE DARK THEME CONVERSION (v3)
   Theme-only pass: remaining white/light sections -> premium
   dark. No markup, layout, spacing, or component structure
   touched — variable + background/color overrides only.
   ============================================================ */

:root{
  --text:#F5F5F7;
  --text-mid:rgba(255,255,255,.65);
  --text-light:rgba(255,255,255,.45);
  --bg:#0A0A0A;
  --border:rgba(255,255,255,.08);
  --light:rgba(37,99,235,.14);
}

body{background:#000;}
.section-bg{background:#050505;}
.section-bg::before{background:linear-gradient(to bottom,rgba(5,5,5,0),#050505);}

/* ---------- Glass / surface cards ---------- */
.card{background:rgba(255,255,255,.03);border-color:var(--hc-border-soft);
  box-shadow:0 4px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);}
.card:hover{background:rgba(255,255,255,.05);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(56,189,248,.25),inset 0 1px 0 rgba(255,255,255,.06);}
.glass{background:rgba(255,255,255,.04);}
.auth-card{background:rgba(17,17,17,.85);border-color:var(--hc-border-soft);}

/* ---------- Flat white surfaces -> elevated dark (#111) ---------- */
.pill,.faq-item,.job-row,.benefit-box,.price-card,
form input,form select,form textarea{background:#111111;border-color:var(--border);}
.auth-tab.active{background:#181818;}
.mobile-menu{background:#05070C;}

/* ---------- Text sitting on those surfaces ---------- */
form select{color:var(--text-mid);}
.price-card .amount{color:#93C5FD;}

/* ---------- Accent links/icons that need a lighter blue for AA contrast on black ---------- */
.card .link,.hc-edit-row .link,.faq-q .plus,.job-tag,.tag{color:#60A5FA;}
.tag,.job-tag{background:rgba(37,99,235,.14);}

/* ---------- Overter chat widget: bring bubbles/input in line with dark theme ---------- */
.ov-msg.bot .ov-bubble,.ov-typing{background:#141414;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.1);}
.ov-input-bar{background:rgba(10,10,10,.6);}
.ov-input-bar input{background:#111111;color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.14);}

/* ============================================================
   HYGIENCLOUD IT — MOBILE HORIZONTAL OVERFLOW FIX (v4)
   Root cause: several grids use auto-fit/auto-fill with a fixed
   minmax() floor (e.g. minmax(300px,1fr)). On viewports narrower
   than that floor, CSS Grid still enforces the minimum column
   width, forcing the grid wider than the screen and creating
   horizontal scroll / a blank strip on the right. Fix collapses
   those specific grids to a single column below 640px only —
   layout, spacing, and design are untouched at every other size.
   ============================================================ */
html{overflow-x:hidden;}
body{width:100%;}

@media (max-width:640px){
  .grid-2,.grid-3,.grid-wide,.footer-grid,.footer-grid-v2,
  .hc-tech-wall,.ad-cards,.ad-plans,.ov-suggest-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   HYGIENCLOUD IT — GLOBAL LIQUID GLASS SYSTEM (v5)
   Extends the Hero/CTA glass language sitewide by applying a
   3-tier glass hierarchy to the shared component classes already
   used across every page (.card, .pill, .faq-item, .job-row,
   .price-card, form fields, nav, footer). Additive only — no
   HTML touched, no component removed, no layout changed.
   ============================================================ */

:root{
  --glass-2-bg:rgba(255,255,255,.035);
  --glass-2-blur:20px;
  --glass-3-bg:rgba(255,255,255,.05);
  --glass-3-blur:12px;
  --glass-border:rgba(255,255,255,.1);
  --glass-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- Level 1: ambient page background ---------- */
body{
  background:
    radial-gradient(circle at 15% 10%,rgba(37,99,235,.10),transparent 32%),
    radial-gradient(circle at 85% 15%,rgba(124,58,237,.08),transparent 34%),
    radial-gradient(circle at 50% 95%,rgba(37,99,235,.06),transparent 36%),
    #050505;
}
.section-bg{
  background:
    radial-gradient(circle at 80% 15%,rgba(124,58,237,.09),transparent 34%),
    radial-gradient(circle at 20% 85%,rgba(37,99,235,.08),transparent 34%),
    #070707;
}
.section-bg::before{background:linear-gradient(to bottom,rgba(7,7,7,0),#070707);}

/* ---------- Level 3: cards — secondary glass ---------- */
.card{background:var(--glass-2-bg);backdrop-filter:blur(var(--glass-2-blur));-webkit-backdrop-filter:blur(var(--glass-2-blur));
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);position:relative;}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(56,189,248,.18));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.card:hover{background:rgba(255,255,255,.06);border-color:rgba(56,189,248,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(56,189,248,.22),inset 0 1px 0 rgba(255,255,255,.08);}

/* ---------- Level 4: small surfaces — subtle glass ---------- */
.pill,.faq-item,.job-row,.benefit-box,.price-card,.hours-box,.auth-card{
  background:var(--glass-3-bg);backdrop-filter:blur(var(--glass-3-blur));-webkit-backdrop-filter:blur(var(--glass-3-blur));
  border:1px solid var(--glass-border);}
.auth-tab.active{background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}

/* ---------- Form fields as glass, with focus glow ---------- */
form input,form select,form textarea{
  background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;}
form input:focus,form select:focus,form textarea:focus{
  border-color:rgba(56,189,248,.5);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(37,99,235,.15);}

/* ---------- Icon chips: matching subtle glass ---------- */
.why-item .ic,.feat-check,.contact-icon{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);}

/* ---------- Nav: soft glow ring, matches hero glass ---------- */
.nav-inner{box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.03);}

/* ---------- Footer: ambient glow tie-in ---------- */
.site-footer{background:
    radial-gradient(circle at 15% 0%,rgba(37,99,235,.10),transparent 40%),
    radial-gradient(circle at 85% 100%,rgba(124,58,237,.09),transparent 40%),
    linear-gradient(180deg,#0B1220 0%,#0F172A 45%,#0B1220 100%);}
.footer-bottom{border-top-color:var(--glass-border);}

@media (max-width:640px){
  .card,.pill,.faq-item,.job-row,.benefit-box,.price-card,.hours-box,.auth-card,
  form input,form select,form textarea{
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
}

/* ============================================================
   HYGIENCLOUD IT — REAL SHINE LIQUID GLASS (v6)
   Upgrades the flat translucent surfaces from v5 into glass that
   visibly reflects light: diagonal gloss gradient, bright top-edge
   inset highlight, and a moving specular sweep on hover.
   ::before on .card/.hc-liquid-glass already holds the gradient
   border mask from earlier passes, so the shine sweep uses ::after.
   Additive only, no HTML changed — ambient "light behind the glass"
   reuses the radial glows already on body/.section-bg/.site-footer
   from the v5 global-glass pass.
   ============================================================ */

:root{
  --glass-light-bg:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.01) 100%);
  --glass-med-bg:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 35%,rgba(255,255,255,.02) 100%);
  --glass-heavy-bg:linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.03) 100%);
  --glass-shine-sweep:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 58%,transparent 75%);
  --glass-inset-top:inset 0 1px 1px rgba(255,255,255,.24);
  --glass-inset-bottom:inset 0 -1px 1px rgba(255,255,255,.03);
}

/* ---------- Shine sweep (::after), for the "important" glass surfaces ---------- */
.card::after,.hc-liquid-glass::after,.auth-card::after,.price-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--glass-shine-sweep);transform:translateX(-120%);}
.card:hover::after,.hc-liquid-glass:hover::after,.auth-card:hover::after,.price-card:hover::after{
  animation:hcGlassShine 1.4s ease forwards;}
@keyframes hcGlassShine{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}

/* ---------- Medium glass: service / product / solution cards ---------- */
.card{background:var(--glass-med-bg);
  box-shadow:0 10px 40px rgba(0,0,0,.35),var(--glass-inset-top),var(--glass-inset-bottom);}
.card:hover{background:var(--glass-med-bg);border-color:rgba(255,255,255,.28);
  box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 30px rgba(37,99,235,.1),inset 0 1px 1px rgba(255,255,255,.32);}

/* ---------- Heavy glass: hero/CTA button, auth card, pricing card ---------- */
.hc-liquid-glass{background:var(--glass-heavy-bg);
  box-shadow:0 10px 40px rgba(0,0,0,.35),var(--glass-inset-top),var(--glass-inset-bottom);}
.hc-liquid-glass:hover{background:var(--glass-heavy-bg);border-color:rgba(255,255,255,.3);
  box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 26px rgba(124,58,237,.12),inset 0 1px 1px rgba(255,255,255,.34);}
.auth-card,.price-card{position:relative;overflow:hidden;background:var(--glass-heavy-bg);
  box-shadow:0 10px 40px rgba(0,0,0,.35),var(--glass-inset-top),var(--glass-inset-bottom);}

/* ---------- Light glass: nav, pills, tags, chips, footer icons, icon circles ---------- */
.nav-inner,.pill,.faq-item,.job-row,.benefit-box,.hours-box,.tag,.job-tag,.tech-pill,
.footer-social-link,.why-item .ic,.feat-check,.contact-icon{
  background:var(--glass-light-bg);box-shadow:inset 0 1px 1px rgba(255,255,255,.14);}

/* ---------- Form fields: gloss gradient + brighter focus glow ---------- */
form input,form select,form textarea{background:var(--glass-light-bg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14);}
form input:focus,form select:focus,form textarea:focus{
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 0 0 4px rgba(37,99,235,.18),0 0 20px rgba(37,99,235,.12);}

/* ---------- Solid buttons: brighter glow on hover to match the glass family ---------- */
.btn:hover{box-shadow:0 14px 34px rgba(37,99,235,.28);}

@media (max-width:640px){
  /* Keep the gloss look, drop the moving sweep and cut blur cost on mobile */
  .card::after,.hc-liquid-glass::after,.auth-card::after,.price-card::after{display:none;}
}