/* MIKRON reference-match layer — 2026-08-24
   Purpose: make the visual difference unmistakable and closer to the supplied light-green/white reference.
   Loaded AFTER styles.css on all 117 public pages. */

/* =========================
   LIGHT THEME — GLOBAL LOOK
   ========================= */
:root[data-theme="light"]{
  --accent:#92d32f !important;
  --accent-2:#b9ec72 !important;
  --accent-dim:#74b524 !important;
  --bg:#eef5e8 !important;
  --bg-soft:#e6f0de !important;
  --surface:#f8fbf5 !important;
  --surface-2:#edf5e7 !important;
  --fg:#102718 !important;
  --fg-muted:#536158 !important;
  --fg-dim:#748077 !important;
  --border:rgba(83,126,54,.18) !important;
}

:root[data-theme="light"] body{
  color:#102718 !important;
  background:
    radial-gradient(900px 680px at -6% 2%,rgba(169,224,88,.46),transparent 66%),
    radial-gradient(850px 600px at 103% 9%,rgba(198,232,144,.44),transparent 70%),
    radial-gradient(920px 620px at 52% 58%,rgba(181,221,119,.17),transparent 72%),
    linear-gradient(135deg,#edf5e8 0%,#e7f1df 44%,#f3f7ef 100%) !important;
  background-attachment:fixed !important;
}

:root[data-theme="light"] main{
  background:transparent !important;
}

:root[data-theme="light"] .wrap{
  position:relative;
}

/* pale glass cards from the reference instead of flat white */
:root[data-theme="light"] body :where(
  .card,.panel,.box,.glass,.device-card,.service-card,.review-card,.feature-card,.model-card,
  .article-card,.blog-card,.stat-card,.icon-tile,.loc-panel,.contact-card-v3,.repair-form,
  .price-ref-card,.price-ref-bottom,.about-orbit-benefit
){
  background:
    radial-gradient(280px 160px at 12% 0%,rgba(175,220,110,.14),transparent 72%),
    linear-gradient(145deg,rgba(253,255,251,.94),rgba(239,247,234,.91)) !important;
  border-color:rgba(78,119,53,.16) !important;
  box-shadow:0 16px 34px rgba(45,72,38,.075), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* common section backgrounds — visibly green-white, not plain white */
:root[data-theme="light"] main > section:not(.hero):not(#about):not(#prices):not(#contact),
:root[data-theme="light"] .section:not(#about):not(#prices):not(#contact){
  background:
    radial-gradient(700px 460px at 5% 5%,rgba(187,228,124,.28),transparent 70%),
    radial-gradient(700px 460px at 95% 92%,rgba(165,213,94,.18),transparent 72%),
    linear-gradient(135deg,rgba(244,249,240,.93),rgba(231,241,224,.93)) !important;
}

/* =========================
   HEADER / NAV
   ========================= */
:root[data-theme="light"] .nav,
:root[data-theme="light"] header .nav,
:root[data-theme="light"] .site-header{
  background:rgba(246,251,241,.83) !important;
  border:1px solid rgba(99,143,66,.13) !important;
  box-shadow:0 10px 30px rgba(53,82,45,.07) !important;
  backdrop-filter:blur(18px) saturate(1.1) !important;
}
:root[data-theme="light"] .logo-badge{
  background:rgba(255,255,255,.64) !important;
  border-color:rgba(83,126,54,.13) !important;
}

/* =========================
   HERO — pale green-white reference panel
   ========================= */
:root[data-theme="light"] .hero,
:root[data-theme="light"] #hero,
:root[data-theme="light"] section.hero{
  background:
    radial-gradient(680px 580px at 3% 2%,rgba(192,231,132,.43),transparent 68%),
    radial-gradient(720px 560px at 92% 22%,rgba(173,219,104,.31),transparent 71%),
    linear-gradient(135deg,#f6faf2 0%,#ecf5e6 52%,#e1efd7 100%) !important;
  border-bottom:1px solid rgba(87,132,57,.14) !important;
}
:root[data-theme="light"] .hero::before{
  border-color:rgba(137,195,63,.20) !important;
  opacity:.9 !important;
}
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .hero-title{
  color:#0d2a17 !important;
  text-shadow:none !important;
}
:root[data-theme="light"] .hero h1 em,
:root[data-theme="light"] .hero .accent{
  color:#77bd20 !important;
}
:root[data-theme="light"] .hero-sub{color:#4c5b51 !important;}
:root[data-theme="light"] .hero-tag,
:root[data-theme="light"] .hero-meta>span,
:root[data-theme="light"] .hero-meta>a,
:root[data-theme="light"] .hero-calc-link,
:root[data-theme="light"] .hero-price{
  background:rgba(250,253,247,.84) !important;
  border-color:rgba(83,127,53,.16) !important;
  box-shadow:0 10px 26px rgba(57,84,47,.075) !important;
}
:root[data-theme="light"] .device-ring{
  border-color:rgba(116,180,34,.25) !important;
  box-shadow:0 0 0 18px rgba(148,210,65,.025),0 0 38px rgba(143,210,53,.10) !important;
}

/* =========================
   “WHAT WE REPAIR” — fresh lime/white area
   ========================= */
:root[data-theme="light"] #services{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(760px 520px at 0% 0%,rgba(179,226,105,.50),transparent 70%),
    radial-gradient(680px 480px at 100% 100%,rgba(201,234,150,.37),transparent 72%),
    linear-gradient(132deg,#edf7e6 0%,#f8fbf5 48%,#e3f1d9 100%) !important;
  border-block:1px solid rgba(91,139,58,.13) !important;
}
:root[data-theme="light"] #services::after{
  content:"";
  position:absolute;
  width:560px;height:560px;
  right:-250px;top:-285px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 0 0 72px rgba(255,255,255,.18),0 0 0 144px rgba(255,255,255,.09);
  pointer-events:none;
  opacity:.75;
}
:root[data-theme="light"] #services .section-head h2{color:#12301b !important;}
:root[data-theme="light"] #services .section-head .desc{color:#536358 !important;}
:root[data-theme="light"] #services .icon-tiles{position:relative;z-index:2;}
:root[data-theme="light"] #services .icon-tile{
  min-height:145px !important;
  background:
    radial-gradient(180px 120px at 18% 0%,rgba(166,219,87,.18),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,247,233,.91)) !important;
  border-color:rgba(92,139,56,.17) !important;
}
:root[data-theme="light"] #services .icon-tile .tile-ico{
  background:linear-gradient(145deg,#d8f1bb,#eff9e4) !important;
  color:#6dad22 !important;
  border-color:rgba(110,165,54,.25) !important;
  box-shadow:0 0 0 7px rgba(160,216,88,.06),0 10px 22px rgba(64,98,49,.08) !important;
}

/* =========================
   PRICE — directly inspired by reference top-right panel
   ========================= */
:root[data-theme="light"] #prices.price-ref-exact{
  padding:74px 0 82px !important;
  background:
    radial-gradient(820px 590px at 85% 8%,rgba(170,219,103,.34),transparent 67%),
    radial-gradient(620px 480px at 4% 94%,rgba(196,232,142,.26),transparent 72%),
    linear-gradient(135deg,#eef7e8 0%,#f8fbf5 46%,#e5f1dc 100%) !important;
  border-block:1px solid rgba(92,139,57,.14) !important;
}
:root[data-theme="light"] #prices.price-ref-exact::after{
  content:"";
  position:absolute;
  width:620px;height:620px;
  right:-205px;top:-285px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.80);
  box-shadow:0 0 0 60px rgba(255,255,255,.18),0 0 0 122px rgba(255,255,255,.08);
  pointer-events:none;
}
:root[data-theme="light"] .price-ref-copytop h2{
  color:#11311b !important;
  font-size:clamp(46px,5vw,72px) !important;
  line-height:.98 !important;
}
:root[data-theme="light"] .price-ref-copytop h2 br + *{color:#79bb24 !important;}
:root[data-theme="light"] .price-ref-eyebrow{color:#72b81f !important;}
:root[data-theme="light"] .price-ref-line{
  background:linear-gradient(90deg,#95db36,rgba(149,219,54,0)) !important;
  box-shadow:0 0 16px rgba(149,219,54,.22) !important;
}
:root[data-theme="light"] .price-ref-orbits,
:root[data-theme="light"] .price-ref-orbits::before,
:root[data-theme="light"] .price-ref-orbits::after,
:root[data-theme="light"] .price-ref-orbits i{
  border-color:rgba(255,255,255,.78) !important;
}
:root[data-theme="light"] .price-ref-tabs a{
  background:rgba(252,254,249,.85) !important;
  border-color:rgba(88,132,58,.14) !important;
  box-shadow:0 7px 16px rgba(54,82,45,.045) !important;
}
:root[data-theme="light"] .price-ref-tabs a.is-active{
  background:linear-gradient(135deg,#a8e43f,#8fd22e) !important;
  color:#163013 !important;
  border-color:rgba(110,165,47,.38) !important;
  box-shadow:0 10px 23px rgba(101,155,45,.15) !important;
}
:root[data-theme="light"] .price-ref-grid{gap:18px !important;}
:root[data-theme="light"] .price-ref-card{
  min-height:184px !important;
  border-radius:20px !important;
  background:
    radial-gradient(300px 180px at 16% 0%,rgba(176,221,111,.17),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(239,246,233,.94)) !important;
  border-color:rgba(86,130,55,.15) !important;
  box-shadow:0 16px 34px rgba(52,79,45,.07) !important;
}
:root[data-theme="light"] .price-ref-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(116,178,45,.30) !important;
  box-shadow:0 22px 44px rgba(54,82,45,.11),0 0 24px rgba(149,218,57,.07) !important;
}
:root[data-theme="light"] .price-ref-cat,
:root[data-theme="light"] .price-ref-price,
:root[data-theme="light"] .price-ref-arrow{color:#74b824 !important;}
:root[data-theme="light"] .price-ref-icon{
  background:linear-gradient(145deg,#39591c,#18350f) !important;
  color:#a8e53a !important;
  border-color:rgba(121,181,52,.25) !important;
  box-shadow:0 12px 22px rgba(39,68,23,.15), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
:root[data-theme="light"] .price-ref-bottom{
  background:rgba(251,254,248,.86) !important;
  border-color:rgba(88,132,56,.14) !important;
  box-shadow:0 12px 28px rgba(51,78,43,.06) !important;
}

/* =========================
   CONTACT + FORM — light, creamy, no dark-green form
   ========================= */
:root[data-theme="light"] #contact,
:root[data-theme="light"] .contact-section,
:root[data-theme="light"] .global-contact-ref-final{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(820px 620px at 1% 0%,rgba(176,224,105,.43),transparent 69%),
    radial-gradient(760px 560px at 100% 100%,rgba(201,235,149,.34),transparent 71%),
    linear-gradient(135deg,#eef6e8 0%,#f8fbf5 49%,#e4f1da 100%) !important;
  border-block:1px solid rgba(91,137,57,.13) !important;
}
:root[data-theme="light"] #contact .contact-ref-title{color:#11301a !important;}
:root[data-theme="light"] #contact .contact-ref-title span{color:#79bd27 !important;}
:root[data-theme="light"] #contact .contact-ref-desc{color:#526158 !important;}
:root[data-theme="light"] #contact .repair-form,
:root[data-theme="light"] .contact-ref-right .repair-form{
  background:
    radial-gradient(420px 240px at 10% 0%,rgba(177,221,116,.15),transparent 70%),
    linear-gradient(145deg,#fbfdf9,#eff6ea) !important;
  border:1px solid rgba(84,128,53,.16) !important;
  box-shadow:0 18px 40px rgba(49,75,42,.09), inset 0 1px 0 #fff !important;
}
:root[data-theme="light"] #contact .repair-form input,
:root[data-theme="light"] #contact .repair-form select,
:root[data-theme="light"] #contact .repair-form textarea{
  background:rgba(255,255,255,.83) !important;
  border-color:rgba(92,137,60,.18) !important;
  color:#16271b !important;
}
:root[data-theme="light"] #contact .contact-card-v3{
  background:linear-gradient(145deg,rgba(255,255,255,.87),rgba(239,247,234,.88)) !important;
  border-color:rgba(91,136,58,.14) !important;
}
:root[data-theme="light"] #contact .contact-ref-map{
  border:1px solid rgba(88,133,57,.16) !important;
  box-shadow:0 16px 34px rgba(48,74,41,.08) !important;
}

/* =========================
   SOFT LIME, NOT ACID GREEN
   ========================= */
:root[data-theme="light"] body :where(
  .eyebrow,.price-ref-eyebrow,.contact-ref-eyebrow,.about-key,.price-ref-cat,.rating,.stars,
  .device-label,.service-label,.category,.category-label
){color:#72b720 !important;}

:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] button[type="submit"],
:root[data-theme="light"] .cta-primary{
  background:linear-gradient(135deg,#abe63f,#91d52d) !important;
  color:#153012 !important;
  border-color:rgba(108,160,46,.35) !important;
  box-shadow:0 11px 24px rgba(94,145,43,.15) !important;
}

/* =========================
   ANIMATIONS — bright lime used only as glow / particles
   ========================= */
:root[data-theme="light"] .hero-tag .dot,
:root[data-theme="light"] .hero-calc-link .dot,
:root[data-theme="light"] .contact-particle,
:root[data-theme="light"] .orbit-particle,
:root[data-theme="light"] [class*="glow-dot"]{
  background:#b9ff4f !important;
  box-shadow:0 0 12px rgba(185,255,79,.95),0 0 30px rgba(185,255,79,.47) !important;
  animation:refLimePulse 1.85s ease-in-out infinite !important;
}
:root[data-theme="light"] .contact-orbit,
:root[data-theme="light"] .about-orbit-ring,
:root[data-theme="light"] .price-ref-orbits{
  border-color:rgba(174,239,80,.32) !important;
}
:root[data-theme="light"] .contact-ref-line,
:root[data-theme="light"] .about-orbit-line,
:root[data-theme="light"] .section-head h2::after{
  background:linear-gradient(90deg,#b8ff4e,rgba(184,255,78,0)) !important;
  box-shadow:0 0 16px rgba(184,255,78,.38) !important;
}
@keyframes refLimePulse{
  0%,100%{opacity:.42;transform:scale(.72)}
  50%{opacity:1;transform:scale(1.34)}
}

/* =========================
   DARK THEME — ENGINEERS BLOCK
   obvious corner glows + white orbit system
   ========================= */
:root[data-theme="dark"] #about.about-orbit-v2,
:root:not([data-theme="light"]) #about.about-orbit-v2{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(560px 440px at -3% 102%,rgba(172,237,82,.25),transparent 64%),
    radial-gradient(560px 430px at 102% -3%,rgba(186,243,105,.20),transparent 66%),
    radial-gradient(760px 520px at 54% 48%,rgba(48,109,60,.14),transparent 70%),
    linear-gradient(135deg,#082414 0%,#0a2b18 48%,#0a2315 100%) !important;
}
:root[data-theme="dark"] #about.about-orbit-v2::before,
:root:not([data-theme="light"]) #about.about-orbit-v2::before{
  content:"" !important;
  position:absolute !important;
  width:760px !important;
  height:760px !important;
  right:-250px !important;
  top:-300px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 0 0 74px rgba(255,255,255,.11),
    0 0 0 150px rgba(255,255,255,.065),
    0 0 0 228px rgba(255,255,255,.035) !important;
  opacity:.75 !important;
  pointer-events:none !important;
  animation:engineerWhiteOrbit 15s ease-in-out infinite !important;
  z-index:0 !important;
}
:root[data-theme="dark"] #about.about-orbit-v2::after,
:root:not([data-theme="light"]) #about.about-orbit-v2::after{
  content:"" !important;
  position:absolute !important;
  width:540px !important;
  height:540px !important;
  left:-265px !important;
  bottom:-310px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 0 0 60px rgba(255,255,255,.085),0 0 0 122px rgba(255,255,255,.042) !important;
  opacity:.68 !important;
  pointer-events:none !important;
  animation:engineerWhiteOrbit 18s ease-in-out infinite reverse !important;
  z-index:0 !important;
}
:root[data-theme="dark"] #about.about-orbit-v2 .wrap,
:root:not([data-theme="light"]) #about.about-orbit-v2 .wrap{z-index:2 !important;}
:root[data-theme="dark"] #about .about-orbit-ring,
:root:not([data-theme="light"]) #about .about-orbit-ring{
  border-color:rgba(211,255,147,.29) !important;
}
:root[data-theme="dark"] #about .about-orbit-center,
:root:not([data-theme="light"]) #about .about-orbit-center{
  color:#baff4f !important;
  border-color:rgba(202,255,129,.39) !important;
  box-shadow:0 0 0 18px rgba(190,255,106,.04),0 0 44px rgba(185,255,82,.22) !important;
}
:root[data-theme="dark"] #about .about-orbit-stat,
:root:not([data-theme="light"]) #about .about-orbit-stat{
  background:linear-gradient(145deg,rgba(24,62,36,.88),rgba(12,39,23,.94)) !important;
  border-color:rgba(191,244,118,.28) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.18),0 0 24px rgba(187,244,109,.055) !important;
}
@keyframes engineerWhiteOrbit{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.62}
  50%{transform:translate3d(-14px,14px,0) scale(1.035);opacity:.88}
}

/* =========================
   MOBILE — reference feel without crop/overflow
   ========================= */
@media(max-width:900px){
  :root[data-theme="light"] .hero{
    background:
      radial-gradient(560px 460px at 98% 3%,rgba(174,222,101,.35),transparent 69%),
      linear-gradient(150deg,#f5faf1,#e7f2df) !important;
  }
  :root[data-theme="light"] #services,
  :root[data-theme="light"] #prices.price-ref-exact,
  :root[data-theme="light"] #contact{
    background:linear-gradient(145deg,#f5faf1,#e4f1da) !important;
  }
  :root[data-theme="light"] #services::after,
  :root[data-theme="light"] #prices.price-ref-exact::after{
    width:380px;height:380px;right:-250px;top:-210px;opacity:.55;
  }
}

@media(max-width:620px){
  :root[data-theme="light"] body{
    background:linear-gradient(145deg,#edf6e7,#e2efda) !important;
  }
  :root[data-theme="light"] #services .icon-tile{min-height:122px !important;}
  :root[data-theme="light"] .price-ref-card{min-height:166px !important;}
  :root[data-theme="dark"] #about.about-orbit-v2::before,
  :root:not([data-theme="light"]) #about.about-orbit-v2::before{
    width:480px !important;height:480px !important;right:-315px !important;top:-160px !important;
    opacity:.58 !important;
  }
  :root[data-theme="dark"] #about.about-orbit-v2::after,
  :root:not([data-theme="light"]) #about.about-orbit-v2::after{display:none !important;}
}

@media(prefers-reduced-motion:reduce){
  :root[data-theme="light"] .contact-particle,
  :root[data-theme="light"] .orbit-particle,
  :root[data-theme="light"] [class*="glow-dot"],
  :root[data-theme="dark"] #about.about-orbit-v2::before,
  :root[data-theme="dark"] #about.about-orbit-v2::after{animation:none !important;}
}

/* Homepage reference-specific typography + real phone visual */
:root[data-theme="light"] #services .services-title-two-lines span:last-child{
  color:#78bc26 !important;
}
:root[data-theme="light"] .price-ref-copytop h2 span{
  color:#78bc26 !important;
}
.hero-phone-reference{display:none;}
:root[data-theme="light"] .hero-phone-reference{
  display:block;
  position:absolute;
  z-index:3;
  width:min(470px,86%);
  height:auto;
  object-fit:contain;
  transform:rotate(-6deg) translateY(4px);
  filter:drop-shadow(0 30px 34px rgba(30,58,25,.20)) drop-shadow(0 0 24px rgba(137,204,52,.16));
  animation:heroRefPhoneFloat 5.8s ease-in-out infinite;
}
:root[data-theme="light"] .hero-visual > .device.shape-phone{
  opacity:0 !important;
  pointer-events:none !important;
}
@keyframes heroRefPhoneFloat{
  0%,100%{transform:rotate(-6deg) translateY(4px)}
  50%{transform:rotate(-4.5deg) translateY(-10px)}
}
@media(max-width:900px){
  :root[data-theme="light"] .hero-phone-reference{width:min(390px,76vw);}
}
@media(max-width:620px){
  :root[data-theme="light"] .hero-phone-reference{width:min(310px,74vw);transform:rotate(-4deg);}
}


/* =========================================================
   ENGINEERS MAX FX — 2026-08-24
   Larger/brighter light fields, rotating rings, pulsing nodes,
   lime arcs and vector-like lines. Homepage #about only.
   ========================================================= */
#about.about-orbit-v2{
  min-height:760px;
  padding-top:118px !important;
  padding-bottom:118px !important;
}
#about.about-orbit-v2 .engineer-fx{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
#about.about-orbit-v2 .engineer-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  mix-blend-mode:screen;
  opacity:.92;
  will-change:transform,opacity;
  animation:engineerGlowBreath 5.8s ease-in-out infinite;
}
#about.about-orbit-v2 .glow-a{
  width:820px;height:820px;left:-360px;bottom:-430px;
  background:radial-gradient(circle,rgba(226,255,181,.54) 0%,rgba(191,255,100,.32) 24%,rgba(163,245,62,.12) 50%,transparent 72%);
}
#about.about-orbit-v2 .glow-b{
  width:900px;height:900px;right:-410px;top:-470px;
  background:radial-gradient(circle,rgba(243,255,222,.58) 0%,rgba(200,255,116,.34) 27%,rgba(170,249,75,.13) 52%,transparent 73%);
  animation-delay:-2.1s;
}
#about.about-orbit-v2 .glow-c{
  width:650px;height:650px;left:42%;top:12%;
  background:radial-gradient(circle,rgba(204,255,124,.22),rgba(169,244,73,.08) 44%,transparent 70%);
  animation-delay:-3.6s;
}

#about.about-orbit-v2 .engineer-rotor{
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(236,255,213,.62);
  box-shadow:0 0 24px rgba(202,255,116,.18),inset 0 0 26px rgba(198,255,106,.06);
  transform-origin:center;
  will-change:transform;
}
#about.about-orbit-v2 .rotor-a{
  width:720px;height:720px;right:5%;top:1%;
  animation:engineerSpin 18s linear infinite;
}
#about.about-orbit-v2 .rotor-b{
  width:970px;height:570px;right:-10%;top:17%;
  border-color:rgba(190,255,88,.52);
  animation:engineerSpinReverse 24s linear infinite;
}
#about.about-orbit-v2 .rotor-c{
  width:540px;height:540px;left:-230px;bottom:-240px;
  border-color:rgba(255,255,255,.48);
  animation:engineerSpin 15s linear infinite;
}
#about.about-orbit-v2 .engineer-pulse{
  position:absolute;
  width:13px;height:13px;
  border-radius:50%;
  background:#c7ff41;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 8px #d9ff72,0 0 24px #baff25,0 0 48px rgba(186,255,37,.75);
  animation:engineerNodePulse 1.55s ease-in-out infinite;
}
#about.about-orbit-v2 .p-a{left:9%;top:20%}
#about.about-orbit-v2 .p-b{right:7%;bottom:24%;animation-delay:-.75s}
#about.about-orbit-v2 .p-c{left:20%;bottom:4%;animation-delay:-1.15s}
#about.about-orbit-v2 .p-d{right:17%;top:7%;animation-delay:-.35s}
#about.about-orbit-v2 .p-e{right:10%;top:23%;animation-delay:-.95s}

#about.about-orbit-v2 .engineer-arc{
  position:absolute;
  border-radius:50%;
  border:2px solid transparent;
  filter:drop-shadow(0 0 10px rgba(187,255,39,.66));
  opacity:.92;
}
#about.about-orbit-v2 .arc-a{
  width:980px;height:650px;right:-250px;top:-120px;
  border-top-color:#baff27;
  border-left-color:rgba(190,255,52,.78);
  transform:rotate(14deg);
}
#about.about-orbit-v2 .arc-b{
  width:620px;height:620px;left:-350px;bottom:-310px;
  border-top-color:rgba(216,255,102,.94);
  border-right-color:#baff27;
  transform:rotate(-26deg);
}
#about.about-orbit-v2 .arc-c{
  width:520px;height:320px;left:43%;bottom:-130px;
  border-top-color:rgba(188,255,39,.82);
  transform:rotate(8deg);
}
#about.about-orbit-v2 .engineer-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg,transparent,#c7ff3f 20%,rgba(218,255,131,.95) 56%,transparent);
  box-shadow:0 0 8px rgba(190,255,39,.82),0 0 22px rgba(190,255,39,.34);
  transform-origin:center;
  opacity:.82;
  animation:engineerLineFloat 6s ease-in-out infinite;
}
#about.about-orbit-v2 .line-a{width:440px;right:4%;top:26%;transform:rotate(-18deg)}
#about.about-orbit-v2 .line-b{width:360px;left:4%;bottom:19%;transform:rotate(21deg);animation-delay:-2.7s}

/* Make the original central orbit system more vivid and visibly rotating. */
#about.about-orbit-v2 .about-orbit-ring{
  border-width:1.5px !important;
  box-shadow:0 0 18px rgba(196,255,83,.13) !important;
  transform-origin:center !important;
}
#about.about-orbit-v2 .about-orbit-ring.ring-a{animation:engineerSpin 17s linear infinite !important}
#about.about-orbit-v2 .about-orbit-ring.ring-b{animation:engineerSpinReverse 23s linear infinite !important}
#about.about-orbit-v2 .about-orbit-ring.ring-c{animation:engineerSpin 29s linear infinite !important}
#about.about-orbit-v2 .orbit-particle{
  width:12px !important;height:12px !important;
  background:#c8ff46 !important;
  border:2px solid rgba(255,255,255,.9) !important;
  box-shadow:0 0 10px #dfff86,0 0 25px #baff28,0 0 48px rgba(186,255,40,.62) !important;
  animation:engineerNodePulse 1.6s ease-in-out infinite !important;
}

/* Much larger, brighter corner fields in dark mode. */
:root[data-theme="dark"] #about.about-orbit-v2,
:root:not([data-theme="light"]) #about.about-orbit-v2{
  background:
    radial-gradient(820px 680px at -8% 108%,rgba(201,255,112,.42),transparent 62%),
    radial-gradient(860px 720px at 108% -10%,rgba(214,255,137,.39),transparent 63%),
    radial-gradient(720px 560px at 69% 48%,rgba(123,210,50,.15),transparent 68%),
    linear-gradient(135deg,#071f12 0%,#092a17 50%,#071d11 100%) !important;
}
:root[data-theme="dark"] #about.about-orbit-v2::before,
:root:not([data-theme="light"]) #about.about-orbit-v2::before{
  width:980px !important;height:980px !important;right:-360px !important;top:-420px !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:0 0 0 94px rgba(255,255,255,.145),0 0 0 192px rgba(222,255,178,.09),0 0 0 292px rgba(190,255,95,.055) !important;
  opacity:.95 !important;
  animation:engineerSpin 32s linear infinite !important;
}
:root[data-theme="dark"] #about.about-orbit-v2::after,
:root:not([data-theme="light"]) #about.about-orbit-v2::after{
  width:760px !important;height:760px !important;left:-360px !important;bottom:-410px !important;
  border-color:rgba(255,255,255,.64) !important;
  box-shadow:0 0 0 80px rgba(255,255,255,.12),0 0 0 164px rgba(210,255,142,.075),0 0 0 245px rgba(181,255,69,.045) !important;
  opacity:.9 !important;
  animation:engineerSpinReverse 27s linear infinite !important;
}

/* Light theme keeps the same motion language, but softer. */
:root[data-theme="light"] #about.about-orbit-v2 .engineer-glow{opacity:.5;mix-blend-mode:multiply}
:root[data-theme="light"] #about.about-orbit-v2 .engineer-rotor{border-color:rgba(113,180,28,.28);box-shadow:none}
:root[data-theme="light"] #about.about-orbit-v2 .engineer-arc{opacity:.48;filter:none}
:root[data-theme="light"] #about.about-orbit-v2 .engineer-line{opacity:.42;box-shadow:none}

@keyframes engineerSpin{to{transform:rotate(360deg)}}
@keyframes engineerSpinReverse{to{transform:rotate(-360deg)}}
@keyframes engineerNodePulse{
  0%,100%{transform:scale(.68);opacity:.55;filter:brightness(.9)}
  48%{transform:scale(1.55);opacity:1;filter:brightness(1.35)}
}
@keyframes engineerGlowBreath{
  0%,100%{transform:scale(.96);opacity:.68}
  50%{transform:scale(1.12);opacity:1}
}
@keyframes engineerLineFloat{
  0%,100%{opacity:.45;filter:brightness(.95)}
  50%{opacity:1;filter:brightness(1.35)}
}

/* Reviews: there are three visible reviews, so decorative arrow circles/dots are removed. */
.reviews-reference .reviews-side,
.reviews-reference .reviews-dots{display:none !important}

@media(max-width:900px){
  #about.about-orbit-v2{min-height:auto;padding-top:88px !important;padding-bottom:92px !important}
  #about.about-orbit-v2 .rotor-a{width:610px;height:610px;right:-300px;top:-100px}
  #about.about-orbit-v2 .rotor-b{width:730px;height:430px;right:-420px;top:28%}
  #about.about-orbit-v2 .glow-a{width:620px;height:620px;left:-390px;bottom:-260px}
  #about.about-orbit-v2 .glow-b{width:660px;height:660px;right:-400px;top:-230px}
  #about.about-orbit-v2 .line-a{right:-160px}.about-orbit-v2 .line-b{left:-150px}
}
@media(max-width:620px){
  #about.about-orbit-v2{padding-top:72px !important;padding-bottom:76px !important}
  #about.about-orbit-v2 .engineer-fx{opacity:.82}
  #about.about-orbit-v2 .rotor-b,#about.about-orbit-v2 .arc-c,#about.about-orbit-v2 .line-b{display:none}
  #about.about-orbit-v2 .rotor-a{width:500px;height:500px;right:-350px;top:-50px}
  #about.about-orbit-v2 .rotor-c{width:390px;height:390px;left:-250px;bottom:-180px}
  :root[data-theme="dark"] #about.about-orbit-v2::before,
  :root:not([data-theme="light"]) #about.about-orbit-v2::before{width:620px !important;height:620px !important;right:-450px !important;top:-150px !important;opacity:.72 !important}
  :root[data-theme="dark"] #about.about-orbit-v2::after,
  :root:not([data-theme="light"]) #about.about-orbit-v2::after{display:block !important;width:480px !important;height:480px !important;left:-350px !important;bottom:-210px !important;opacity:.6 !important}
}
@media(prefers-reduced-motion:reduce){
  #about.about-orbit-v2 .engineer-glow,
  #about.about-orbit-v2 .engineer-rotor,
  #about.about-orbit-v2 .engineer-line,
  #about.about-orbit-v2 .about-orbit-ring,
  #about.about-orbit-v2 .orbit-particle{animation:none !important}
}

/* ==========================================================
   2026-08-24 — PRICE PHONE SHARPNESS + 4/3 SERVICES STAGGER
   ========================================================== */

/* Price visual: make the phone feel cleaner, sharper and more premium */
#prices.price-ref-exact .price-ref-phone-img{
  width:min(640px,98%) !important;
  max-height:380px !important;
  object-fit:contain !important;
  transform:rotate(-8deg) scale(1.045) !important;
  image-rendering:auto !important;
  filter:
    contrast(1.08)
    saturate(1.08)
    brightness(1.035)
    drop-shadow(0 30px 34px rgba(19,46,14,.24))
    drop-shadow(0 0 14px rgba(162,232,65,.18)) !important;
  backface-visibility:hidden;
  transform-origin:center;
}

:root[data-theme="light"] #prices.price-ref-exact .price-ref-visual{
  min-height:390px !important;
}

:root[data-theme="light"] #prices.price-ref-exact .price-ref-visual::before{
  opacity:.78 !important;
}

/* What we repair: larger cards, 4 on top + 3 offset below */
@media (min-width:1081px){
  body:has(#services) #services .icon-tiles{
    display:grid !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:22px 18px !important;
    align-items:stretch !important;
  }

  body:has(#services) #services .icon-tile{
    grid-column:span 2 !important;
    min-height:290px !important;
    padding:38px 26px !important;
    border-radius:26px !important;
  }

  body:has(#services) #services .icon-tile:nth-child(5){grid-column:2 / span 2 !important;}
  body:has(#services) #services .icon-tile:nth-child(6){grid-column:4 / span 2 !important;}
  body:has(#services) #services .icon-tile:nth-child(7){grid-column:6 / span 2 !important;}

  body:has(#services) #services .tile-ico{
    width:92px !important;
    height:92px !important;
    border-radius:24px !important;
  }

  body:has(#services) #services .tile-ico svg{
    width:48px !important;
    height:48px !important;
  }

  body:has(#services) #services .icon-tile > span:last-child{
    font-size:19px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
  }
}

@media (min-width:681px) and (max-width:1080px){
  body:has(#services) #services .icon-tiles{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
  }
  body:has(#services) #services .icon-tile{
    min-height:235px !important;
    padding:28px 20px !important;
  }
}

@media (max-width:680px){
  #prices.price-ref-exact .price-ref-phone-img{
    width:min(520px,94%) !important;
    max-height:285px !important;
    transform:rotate(-7deg) scale(1.02) !important;
  }
  :root[data-theme="light"] #prices.price-ref-exact .price-ref-visual{
    min-height:270px !important;
  }
}

/* ==========================================================
   2026-08-24 — PREMIUM HORIZONTAL “WHAT WE REPAIR” CARDS
   ========================================================== */
#services .icon-tiles{
  position:relative;
  z-index:3;
}

#services .icon-tile{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:18px !important;
  min-width:0;
  border-radius:24px !important;
  backdrop-filter:blur(18px) saturate(1.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.16);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, background .35s ease !important;
}

#services .icon-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(180px 120px at 10% 10%,rgba(193,255,83,.22),transparent 68%),
    radial-gradient(210px 140px at 100% 100%,rgba(151,225,47,.12),transparent 72%);
  opacity:.9;
}

#services .icon-tile::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:130px;
  height:130px;
  right:-56px;
  top:-62px;
  border-radius:50%;
  border:1px solid rgba(190,255,85,.28);
  box-shadow:
    0 0 0 18px rgba(183,255,50,.035),
    0 0 42px rgba(183,255,50,.14);
  pointer-events:none;
  transition:transform .5s var(--ease),opacity .35s ease;
}

#services .icon-tile:hover{
  transform:translateY(-7px) scale(1.015) !important;
  border-color:rgba(183,255,50,.48) !important;
  box-shadow:
    0 24px 54px rgba(16,40,19,.18),
    0 8px 20px rgba(102,160,38,.12),
    inset 0 1px 0 rgba(255,255,255,.58),
    0 0 34px rgba(183,255,50,.12) !important;
}

#services .icon-tile:hover::after{
  transform:scale(1.12) rotate(12deg);
  opacity:1;
}

#services .icon-tile .tile-ico{
  flex:0 0 auto !important;
  width:72px !important;
  height:72px !important;
  border-radius:21px !important;
  border:1px solid rgba(184,255,70,.28) !important;
  box-shadow:
    0 16px 30px rgba(79,126,31,.15),
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 24px rgba(183,255,50,.13) !important;
}

#services .icon-tile .tile-ico svg{
  width:36px !important;
  height:36px !important;
}

#services .icon-tile > span:last-child{
  position:relative;
  z-index:2;
  max-width:none !important;
  font-size:17px !important;
  line-height:1.25 !important;
  font-weight:850 !important;
  letter-spacing:-.01em;
}

:root[data-theme="light"] #services .icon-tile{
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(246,251,241,.68)) !important;
  border:1px solid rgba(119,169,71,.22) !important;
  box-shadow:
    0 20px 44px rgba(44,87,32,.09),
    0 4px 12px rgba(43,81,33,.055),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(126,179,76,.07) !important;
}

:root[data-theme="light"] #services .icon-tile .tile-ico{
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.95),transparent 35%),
    linear-gradient(145deg,rgba(221,247,188,.95),rgba(240,251,225,.88)) !important;
  color:#68aa20 !important;
}

:root[data-theme="dark"] #services .icon-tile{
  background:
    linear-gradient(135deg,rgba(31,43,34,.82),rgba(18,27,21,.72)) !important;
  border:1px solid rgba(183,255,50,.20) !important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 28px rgba(183,255,50,.06) !important;
}

@media (min-width:1081px){
  body:has(#services) #services .icon-tiles{
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:20px 18px !important;
  }
  body:has(#services) #services .icon-tile{
    grid-column:span 2 !important;
    min-height:150px !important;
    padding:28px 24px !important;
  }
  body:has(#services) #services .icon-tile:nth-child(5){grid-column:2 / span 2 !important;}
  body:has(#services) #services .icon-tile:nth-child(6){grid-column:4 / span 2 !important;}
  body:has(#services) #services .icon-tile:nth-child(7){grid-column:6 / span 2 !important;}
}

@media (min-width:681px) and (max-width:1080px){
  body:has(#services) #services .icon-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
  }
  body:has(#services) #services .icon-tile{
    min-height:142px !important;
    padding:24px 20px !important;
  }
}

@media (max-width:680px){
  #services .icon-tiles{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  #services .icon-tile{
    min-height:112px !important;
    padding:18px 17px !important;
    gap:15px !important;
    border-radius:20px !important;
  }
  #services .icon-tile .tile-ico{
    width:62px !important;
    height:62px !important;
    border-radius:18px !important;
  }
  #services .icon-tile .tile-ico svg{
    width:31px !important;
    height:31px !important;
  }
  #services .icon-tile > span:last-child{
    font-size:16px !important;
  }
}

/* 2026-08-24 — centered 4+3 service grid, readable 22px labels */
@media (min-width:1081px){
  body:has(#services) #services .icon-tiles{
    width:min(100%,1240px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:20px 18px !important;
    justify-content:center !important;
  }
  body:has(#services) #services .icon-tile{
    grid-column:span 2 !important;
    min-height:150px !important;
    padding:28px 24px !important;
  }
  body:has(#services) #services .icon-tile:nth-child(5){grid-column:2 / span 2 !important;}
  body:has(#services) #services .icon-tile:nth-child(6){grid-column:4 / span 2 !important;}
  body:has(#services) #services .icon-tile:nth-child(7){grid-column:6 / span 2 !important;}
  #services .icon-tile > span:last-child{
    font-size:22px !important;
    line-height:1.18 !important;
    font-weight:850 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    color:var(--text) !important;
    text-shadow:none !important;
  }
  :root[data-theme="dark"] #services .icon-tile > span:last-child{
    color:#fff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.32) !important;
  }
}