/* ==========================================================================
   Lorem Life Science — stylesheet
   Palette sampled directly from the brand mark (no invented colors):
   --lorem-blue  #008cc7 (sampled from logo triangle)
   --lorem-green #7cb819 (sampled from logo triangle)
   All gradients, shadows and accents below are derived from these two hues.
   ========================================================================== */

:root{
  --lorem-blue: #008cc7;
  --lorem-blue-dark: #004d6d;
  --lorem-green: #7cb819;
  --lorem-green-dark: #4d720f;
  --lorem-navy-1: #002d40;
  --lorem-navy-2: #003b54;
  --lorem-navy-3: #004d6d;
  --ink: #10242f;
  --ink-soft: #4c6572;
  --paper: #f6faf9;
  --paper-alt: #eef5f2;
  --line: #dfe9e6;
  --radius: 14px;
  --shadow-soft: 0 18px 40px -22px rgba(4, 45, 66, .35);
  --shadow-lift: 0 24px 60px -20px rgba(4, 45, 66, .45);
  --ease: cubic-bezier(.22,.8,.3,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

h1, h2, h3, h4, .display-font{
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

p{ color: var(--ink-soft); line-height: 1.75; }

a{ text-decoration: none; }

.container-xl{ max-width: 1240px; }

::selection{ background: var(--lorem-green); color: #fff; }

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

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.top-strip{
  background: var(--ink);
  color: #cfe7ee;
  font-size: .82rem;
  padding: 7px 0;
}
.top-strip a{ color: #cfe7ee; }
.top-strip a:hover{ color: var(--lorem-green); }
.top-strip .divider{ opacity:.35; margin: 0 .6rem; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar-lorem{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  padding: .8rem 0;
  border-bottom: 1px solid transparent;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
}
.navbar-lorem.is-scrolled{
  box-shadow: 0 10px 30px -20px rgba(4,45,66,.5);
  border-bottom-color: var(--line);
  padding: .45rem 0;
}
.navbar-brand-lorem{ display:flex; align-items:center; gap:.6rem; }
.navbar-brand-lorem img{ height: 78px; width:auto; transition: height .3s var(--ease); }
.navbar-lorem.is-scrolled .navbar-brand-lorem img{ height: 58px; }
.navbar-brand-lorem .brand-word{ font-family:"Manrope",sans-serif; font-weight:800; font-size:1.35rem; color: var(--lorem-blue); }
.navbar-brand-lorem .brand-sub{ display:block; font-size:.62rem; letter-spacing:.14em; color: var(--lorem-green-dark); font-weight:700; margin-top:-4px; }

.nav-link-lorem{
  position: relative;
  font-weight: 600;
  color: var(--ink) !important;
  padding: .5rem .95rem !important;
}
.nav-link-lorem::after{
  content:"";
  position:absolute; left: .95rem; right:.95rem; bottom: .28rem; height:2px;
  background: var(--lorem-green);
  transform: scaleX(0); transform-origin:left;
  transition: transform .3s var(--ease);
}
.nav-link-lorem:hover::after,
.nav-link-lorem.active::after{ transform: scaleX(1); }
.nav-link-lorem.active{ color: var(--lorem-blue) !important; }

.btn-enquire{
  background: linear-gradient(135deg, var(--lorem-blue), var(--lorem-blue-dark));
  color:#fff; font-weight:700; border:none; border-radius: 999px;
  padding: .55rem 1.4rem; box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-enquire:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift); color:#fff; }

/* --------------------------------------------------------------------------
   Buttons (general)
   -------------------------------------------------------------------------- */
.btn-lorem-primary{
  background: var(--lorem-green);
  border: none; color:#0c2a0c; font-weight:700; border-radius: 999px; padding:.75rem 1.9rem;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 14px 30px -14px rgba(124,184,25,.65);
}
.btn-lorem-primary:hover{ background: var(--lorem-green-dark); color:#fff; transform: translateY(-3px); }

.btn-lorem-outline{
  border: 1.5px solid rgba(255,255,255,.65); color:#fff; font-weight:700; border-radius:999px; padding:.72rem 1.8rem;
  transition: all .25s var(--ease);
}
.btn-lorem-outline:hover{ background:#fff; color: var(--lorem-blue-dark); border-color:#fff; }

.btn-lorem-ghost{
  border: 1.5px solid var(--line); color: var(--ink); font-weight:700; border-radius:999px; padding:.72rem 1.8rem;
  transition: all .25s var(--ease);
}
.btn-lorem-ghost:hover{ border-color: var(--lorem-blue); color: var(--lorem-blue); background: #eef8fc; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(124,184,25,.22), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(0,140,199,.28), transparent 55%),
    linear-gradient(160deg, var(--lorem-navy-1) 0%, var(--lorem-navy-2) 46%, var(--lorem-navy-3) 100%);
  color:#fff;
  padding: 190px 0 120px;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.25;
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.hero .eyebrow-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  padding:.45rem 1rem; border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.03em;
  color:#dff3ea;
}
.hero .eyebrow-pill .dot{ width:7px;height:7px;border-radius:50%; background: var(--lorem-green); box-shadow:0 0 0 4px rgba(124,184,25,.3); }
.hero h1{
  color:#fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height:1.08; margin: 1.1rem 0 1.2rem;
}
.hero h1 .accent{ color: var(--lorem-green); }
.hero p.lead{ color: #cfe4ec; font-size: 1.12rem; max-width: 34rem; }
.hero-stats{ display:flex; gap: 2.4rem; margin-top: 2.6rem; flex-wrap:wrap; }
.hero-stats .stat-num{ font-family:"Manrope",sans-serif; font-weight:800; font-size:2rem; color:#fff; }
.hero-stats .stat-label{ font-size:.78rem; color:#a9c8d3; text-transform: uppercase; letter-spacing:.08em; }

.hero-art{ position:relative; }
.hero-art .float-card{
  position:absolute; background:#fff; color: var(--ink); border-radius: 16px; padding: .9rem 1.1rem;
  box-shadow: var(--shadow-lift); display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.85rem;
  animation: floaty 5.5s ease-in-out infinite;
}
.hero-art .float-card .ic{ width:34px;height:34px;border-radius:10px; display:flex;align-items:center;justify-content:center; color:#fff; font-size:1.05rem; }
.hero-art .card-a{ top: 6%; left: -4%; animation-delay: 0s; }
.hero-art .card-a .ic{ background: var(--lorem-green); }
.hero-art .card-b{ bottom: 8%; right: -6%; animation-delay: 1.2s; }
.hero-art .card-b .ic{ background: var(--lorem-blue); }
.hero-art img{ border-radius: 22px; box-shadow: var(--shadow-lift); }

@keyframes floaty{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.hero-wave{ display:block; width:100%; height:auto; margin-bottom:-2px; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* --------------------------------------------------------------------------
   Section basics
   -------------------------------------------------------------------------- */
.section{ padding: 96px 0; }
.section-alt{ background: var(--paper-alt); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; color: var(--lorem-blue);
}
.eyebrow::before{ content:""; width: 26px; height: 3px; background: var(--lorem-green); border-radius:2px; display:inline-block; }
.section-title{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin: .6rem 0 .9rem; }
.section-lead{ max-width: 42rem; }

/* --------------------------------------------------------------------------
   Cards — value props / features
   -------------------------------------------------------------------------- */
.value-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.7rem;
  height:100%; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.value-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); border-color: rgba(0,140,199,.25); }
.value-card .icon-wrap{
  width:56px; height:56px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--lorem-blue), var(--lorem-green)); color:#fff; font-size:1.4rem; margin-bottom:1.1rem;
}
.value-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.value-card p{ font-size:.93rem; margin-bottom:0; }

/* --------------------------------------------------------------------------
   Category strip
   -------------------------------------------------------------------------- */
.cat-pill{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.55rem 1.1rem; font-weight:600; font-size:.85rem;
  color: var(--ink-soft); display:inline-flex; align-items:center; gap:.45rem; transition: all .25s var(--ease);
}
.cat-pill span.dotcolor{ width:8px;height:8px;border-radius:50%; background: var(--lorem-green); }
.cat-pill:hover{ border-color: var(--lorem-blue); color: var(--lorem-blue); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.product-toolbar .btn-filter{
  border:1px solid var(--line); background:#fff; color: var(--ink-soft); font-weight:600; font-size:.86rem;
  border-radius:999px; padding:.5rem 1.15rem; transition: all .25s var(--ease);
}
.product-toolbar .btn-filter.active,
.product-toolbar .btn-filter:hover{ background: var(--lorem-blue); border-color: var(--lorem-blue); color:#fff; }

.product-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; height:100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.product-media{ position:relative; background: #f0f6f4; aspect-ratio: 4/3; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.08); }
.product-tag{
  position:absolute; top:.8rem; left:.8rem; background: var(--lorem-green); color:#0c2a0c; font-weight:700;
  font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; padding:.32rem .7rem; border-radius:999px;
}
.product-tag.rx{ background: var(--lorem-blue); color:#fff; }
.product-body{ padding: 1.35rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product-body .p-cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--lorem-green-dark); font-weight:700; }
.product-body h3{ font-size:1.08rem; margin:0; }
.product-body p{ font-size:.87rem; margin-bottom:.2rem; }
.product-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:.6rem; border-top:1px dashed var(--line); }
.product-pack{ font-size:.78rem; color: var(--ink-soft); font-weight:600; }
.product-enquire{ font-size:.82rem; font-weight:700; color: var(--lorem-blue); display:inline-flex; align-items:center; gap:.3rem; }
.product-enquire i{ transition: transform .25s var(--ease); }
.product-card:hover .product-enquire i{ transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Process / timeline
   -------------------------------------------------------------------------- */
.process-row{ position:relative; }
.process-row::before{
  content:""; position:absolute; top:34px; left:6%; right:6%; height:2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
}
.process-step{ text-align:center; position:relative; }
.process-step .num{
  width:68px; height:68px; margin: 0 auto 1rem; border-radius:50%; background:#fff; border:2px solid var(--lorem-blue);
  color: var(--lorem-blue); font-weight:800; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; transition: all .3s var(--ease);
}
.process-step:hover .num{ background: var(--lorem-blue); color:#fff; transform: scale(1.08); }
.process-step h4{ font-size:1rem; margin-bottom:.4rem; }
.process-step p{ font-size:.85rem; }

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.stats-band{
  background: linear-gradient(120deg, var(--lorem-blue-dark), var(--lorem-blue) 55%, var(--lorem-green));
  color:#fff; border-radius: 24px; padding: 3rem 2rem;
}
.stats-band .stat-num{ font-family:"Manrope",sans-serif; font-weight:800; font-size:2.6rem; }
.stats-band .stat-label{ font-size:.85rem; color:#d6ecf3; }

/* --------------------------------------------------------------------------
   Certification / logos strip
   -------------------------------------------------------------------------- */
.cert-badge{
  border:1px solid var(--line); border-radius: 12px; padding: 1rem; background:#fff; text-align:center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cert-badge:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.cert-badge i{ font-size:1.7rem; color: var(--lorem-blue); }
.cert-badge div{ font-weight:700; font-size:.82rem; margin-top:.5rem; }

/* --------------------------------------------------------------------------
   About page specifics
   -------------------------------------------------------------------------- */
.page-header{
  padding: 172px 0 70px; color:#fff; position:relative; overflow:hidden;
  background: linear-gradient(150deg,var(--lorem-navy-1), var(--lorem-navy-2) 55%, var(--lorem-navy-3));
}
.page-header::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 24px 24px; opacity:.2;
}
.page-header .crumbs{ font-size:.85rem; color:#bcdbe6; }
.page-header .crumbs a{ color:#bcdbe6; }
.page-header .crumbs a:hover{ color: var(--lorem-green); }
.page-header h1{ color:#fff; margin-top:.6rem; }

.about-photo-frame{
  position:relative; border-radius: 20px; overflow:hidden; box-shadow: var(--shadow-lift);
}
.about-photo-frame img{ width:100%; display:block; }
.about-badge{
  position:absolute; bottom: -22px; right: -18px; background:#fff; border-radius: 16px; box-shadow: var(--shadow-lift);
  padding: 1rem 1.3rem; display:flex; align-items:center; gap: .8rem;
}
.about-badge .num{ font-weight:800; font-size:1.6rem; color: var(--lorem-blue); font-family:"Manrope",sans-serif; }
.about-badge .txt{ font-size:.72rem; color: var(--ink-soft); line-height:1.2; max-width:7rem; }

.mv-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 2rem; height:100%;
  transition: all .3s var(--ease);
}
.mv-card:hover{ border-color: var(--lorem-green); box-shadow: var(--shadow-soft); transform: translateY(-6px); }
.mv-card i{ font-size:1.6rem; color: var(--lorem-green-dark); }

.value-pill-row .vp{
  display:flex; gap:.9rem; align-items:flex-start; padding: 1rem 0; border-bottom:1px solid var(--line);
}
.value-pill-row .vp:last-child{ border-bottom:none; }
.value-pill-row .vp .vp-ic{
  width:42px;height:42px;flex:0 0 42px; border-radius:11px; background: var(--paper-alt); color: var(--lorem-blue);
  display:flex;align-items:center;justify-content:center; font-size:1.05rem;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-card{
  background:#fff; border-radius: var(--radius); border:1px solid var(--line); padding: 2.2rem;
  box-shadow: var(--shadow-soft);
}
.contact-info-item{ display:flex; gap:1rem; align-items:flex-start; padding: 1.1rem 0; border-bottom:1px dashed var(--line); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .ci-ic{
  width:46px;height:46px;flex:0 0 46px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--lorem-blue), var(--lorem-green)); color:#fff; font-size:1.15rem;
}
.contact-info-item h4{ font-size:.98rem; margin-bottom:.2rem; }
.contact-info-item p, .contact-info-item a{ font-size:.88rem; color: var(--ink-soft); margin-bottom:0; }
.contact-info-item a:hover{ color: var(--lorem-blue); }

.form-floating > label{ color: var(--ink-soft); }
.form-control, .form-select{
  border-radius: 10px; border:1px solid var(--line); padding: .85rem 1rem; font-size:.94rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--lorem-blue); box-shadow: 0 0 0 .2rem rgba(0,140,199,.15);
}

.map-frame{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-soft); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; filter: grayscale(15%); }

.form-status{
  display:none; border-radius: 10px; padding: .85rem 1rem; font-size:.9rem; margin-bottom:1rem;
}
.form-status.show{ display:block; }
.form-status.ok{ background:#eaf7e3; color: #3c6b0e; border:1px solid #cbe8b1; }
.form-status.err{ background:#fdecec; color:#9c2a2a; border:1px solid #f4c6c6; }

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */
.cta-band{
  border-radius: 26px; padding: 3.2rem 2.4rem; color:#fff; position:relative; overflow:hidden;
  background: linear-gradient(125deg, var(--lorem-green-dark), var(--lorem-green) 45%, var(--lorem-blue) 115%);
}
.cta-band::after{
  content:""; position:absolute; width:340px;height:340px;border-radius:50%; background: rgba(255,255,255,.12);
  top:-140px; right:-100px;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,.9); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer-lorem{ background:#001620; color:#a9c6d0; padding: 64px 0 0; }
.footer-lorem h5{ color:#fff; font-family:"Manrope",sans-serif; font-weight:800; font-size:1rem; margin-bottom:1.1rem; }
.footer-lorem .f-logo{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.footer-lorem .f-logo img{ height:52px; background:#fff; border-radius:8px; padding:4px; }
.footer-lorem .f-logo .brand-word{ font-family:"Manrope",sans-serif; font-weight:800; font-size:1.25rem; color:#fff; }
.footer-lorem p{ color:#8fb0bb; font-size:.9rem; }
.footer-lorem a.flink{ color:#a9c6d0; font-size:.9rem; display:block; margin-bottom:.6rem; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer-lorem a.flink:hover{ color: var(--lorem-green); padding-left:4px; }
.footer-social{
  width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.2); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; transition: all .25s var(--ease);
}
.footer-social:hover{ background: var(--lorem-green); border-color: var(--lorem-green); transform: translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top: 2.6rem; padding: 1.2rem 0; font-size:.82rem; color:#7898a3; }
.footer-bottom a{ color:#a9c6d0; }

/* --------------------------------------------------------------------------
   Floating contact buttons
   -------------------------------------------------------------------------- */
.floating-contacts{ position: fixed; right: 20px; bottom: 22px; display:flex; flex-direction:column; gap:.75rem; z-index: 1200; }
.fab{
  width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-size:1.5rem;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position:relative;
}
.fab:hover{ transform: translateY(-4px) scale(1.05); color:#fff; }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background: var(--lorem-blue); animation: pulse-ring 2.6s var(--ease) infinite; }
.fab .fab-tip{
  position:absolute; right: 66px; top:50%; transform: translateY(-50%) translateX(6px);
  background:#10242f; color:#fff; padding:.4rem .7rem; border-radius:8px; font-size:.76rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition: all .25s var(--ease);
}
.fab:hover .fab-tip{ opacity:1; transform: translateY(-50%) translateX(0); }

@keyframes pulse-ring{
  0%{ box-shadow: 0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(0,140,199,.55); }
  70%{ box-shadow: 0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 14px rgba(0,140,199,0); }
  100%{ box-shadow: 0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(0,140,199,0); }
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.back-to-top{
  position: fixed; left: 20px; bottom: 22px; width:46px;height:46px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color: var(--lorem-blue); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .3s var(--ease); z-index: 1150;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--lorem-blue); color:#fff; }

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; background: var(--paper); z-index: 2000; display:flex; align-items:center; justify-content:center;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.preloader.hide{ opacity:0; visibility:hidden; }
.preloader .ring{
  width:46px;height:46px; border-radius:50%; border:4px solid var(--paper-alt); border-top-color: var(--lorem-blue);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */
.count-up{ font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-lorem-blue{ color: var(--lorem-blue) !important; }
.text-lorem-green{ color: var(--lorem-green-dark) !important; }
.bg-lorem-blue{ background: var(--lorem-blue) !important; }
.rounded-xl{ border-radius: var(--radius) !important; }

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px){
  .hero{ padding: 160px 0 90px; text-align:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-stats{ justify-content:center; }
  .hero-art{ margin-top: 3rem; }
  .about-badge{ right: 10px; bottom: -16px; }
  .process-row::before{ display:none; }
}

@media (max-width: 767.98px){
  .section{ padding: 68px 0; }
  .stats-band{ text-align:center; }
  .stats-band .col-6{ margin-bottom: 1.4rem; }
  .cta-band{ text-align:center; padding: 2.4rem 1.4rem; }
  .floating-contacts{ right: 14px; bottom: 16px; }
  .fab{ width:50px;height:50px; font-size:1.3rem; }
  .back-to-top{ left:14px; bottom:16px; width:42px;height:42px; }
}