/* FixMobi 4.1 - targeted visual fixes after real device screenshots.
   Overrides only layout, pictograms and the screwdriver position. */
:root { --fm-light-blue: #eaf0ff; --fm-border: #dbe5fa; }

/* Full-bleed gradients: the layout grid remains inside .container,
   but the backdrop must extend right to both viewport edges. */
.hero { isolation: isolate; }
.hero::before {
  content: "";
  position: absolute !important;
  inset: 0 auto 0 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  background:
    radial-gradient(ellipse at 71% 24%, rgba(105,153,255,.18), transparent 55%),
    linear-gradient(180deg,#f8faff 0%,#f5f8ff 100%) !important;
  z-index: -1;
  pointer-events: none;
}
.page-hero { background: transparent !important; isolation: isolate; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 80% 17%,rgba(201,218,255,.58),transparent 50%),
    linear-gradient(180deg,#f8faff 0%,#f3f7ff 100%);
  z-index:-1;
  pointer-events:none;
}
.page-hero > * { position:relative; z-index:1; }

/* Device category tiles: unified pictograms instead of text glyphs. */
.device-grid { align-items: stretch; }
.device-tile { align-items: center; min-width:0; gap:15px; }
.device-tile > span:not(.tile-symbol) { min-width:0; flex:1; }
.device-tile .tile-symbol {
  display:grid; place-items:center;
  width:54px; height:54px; flex:0 0 54px;
  border-radius:15px;
  color:#9cd5ff !important;
  background:linear-gradient(145deg,rgba(95,145,244,.26),rgba(46,93,180,.10)) !important;
  border:1px solid rgba(137,190,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.device-tile .tile-symbol svg {width:29px;height:29px;display:block;stroke-width:1.8}
.device-tile:hover .tile-symbol {color:#e5f7ff !important;border-color:#6cc9ff; background:#365a91 !important;}
.device-tile i {color:#91d4ff !important;font-size:20px;line-height:1;}

/* Consistent illustrated symbols across main/about/repair sections. */
.benefit-icon, .repair-service-icon, .fault-icon, .contact-icon {
  display:grid; place-items:center; flex-shrink:0;
}
.benefit-icon svg {width:25px;height:25px;stroke-width:1.8;display:block;}
.repair-service-icon svg {width:31px;height:31px;stroke-width:1.8;display:block;}
.fault-icon svg {width:28px;height:28px;stroke-width:1.8;display:block;}
.contact-icon svg {width:25px;height:25px;stroke-width:1.9;display:block;}
.benefit-icon {background:#e6edff!important;color:#506dff!important;}
.repair-service-icon {background:#e6edff!important;color:#536dff!important;}
.fault-icon {color:#506dff!important;}

/* Contact cards had literally 0px padding: the icon touched the edge. */
.contact-detail {
  padding:20px 22px !important;
  min-height:120px;
  display:flex;
  align-items:center;
  gap:20px !important;
  box-sizing:border-box;
}
.contact-detail > div {min-width:0;}
.contact-detail a,.contact-detail strong {overflow-wrap:anywhere;}
.contact-icon {
  width:56px !important; height:56px !important; flex:0 0 56px !important;
  border-radius:16px !important;
  background:linear-gradient(145deg,#e7efff,#dce8ff) !important;
  border:1px solid #d7e3ff;
  color:#536dff !important;
}
.contact-detail p {margin-bottom:0;}

/* Data privacy: last line used to sit almost against the section boundary. */
.data-section {padding-bottom:148px !important;}
.data-copy .fine-print {display:block;margin-top:26px;line-height:1.65;}
.data-copy {min-width:0;}

/* About us: make the device artwork substantial instead of floating like a thumbnail. */
.story-art {width:100%;max-width:none!important;}
.story-art .about-device-art {width:100%!important;max-width:560px!important;}
.story-art .about-device-art img {width:100%!important;height:100%!important;object-fit:contain!important;}

/* Stronger, still muted heading contrast. */
.muted-heading {color:#8090ad!important;}

/* Screwdriver shifted right without moving the screw or shield interaction zones. */
.hero-lab-wrap .precision-board .precision-tool {
  left:calc(20.5% + 50px) !important;
}

@media (max-width:1050px) and (min-width:761px) {
  .device-tile {gap:12px;}
  .device-tile .tile-symbol {width:46px;height:46px;flex-basis:46px;}
  .contact-detail {padding:18px!important;}
}
@media (max-width:760px) {
  .hero::before {background:
    radial-gradient(ellipse at 70% 30%,rgba(138,171,255,.17),transparent 62%),
    linear-gradient(180deg,#f7f9ff 0%,#f4f7ff 100%) !important;
  }
  .page-hero {padding-bottom:53px!important;}
  .device-grid {gap:12px!important;}
  .device-tile {gap:13px!important;padding:16px 15px!important;}
  .device-tile .tile-symbol {
    width:47px!important;height:47px!important;flex:0 0 47px!important;
    border-radius:13px!important;
  }
  .device-tile .tile-symbol svg {width:27px;height:27px;}
  .device-tile b {font-size:16px!important;line-height:1.22!important;}
  .device-tile small {font-size:12px!important;line-height:1.35!important;}
  .device-tile i {font-size:17px!important;}
  .data-section {padding-bottom:124px!important;}
  .data-copy .fine-print {margin-top:30px;padding-bottom:6px;}
  .story-layout {padding-top:43px!important;gap:17px!important;}
  .story-art {max-width:none!important;margin-inline:0!important;}
  .story-art .about-device-art {max-width:none!important;width:100%!important;}
  .contact-detail {
    padding:18px!important;
    min-height:116px;
    align-items:center;
    gap:16px!important;
  }
  .contact-icon {
    width:50px!important;height:50px!important;flex:0 0 50px!important;
    border-radius:14px!important;
  }
  .contact-icon svg {width:24px;height:24px;}
  .hero-lab-wrap .precision-board .precision-tool {
    left:calc(19.5% + 43px) !important;
  }
}
@media (max-width:420px) {
  .device-tile {padding:15px!important;}
  .device-tile .tile-symbol {width:44px!important;height:44px!important;flex-basis:44px!important;}
  .device-tile b {font-size:15px!important;}
  .contact-detail {padding:16px!important;gap:13px!important;}
  .contact-icon {width:46px!important;height:46px!important;flex-basis:46px!important;}
}
@media (prefers-reduced-motion: reduce) {
  .device-tile .tile-symbol {transition:none!important;}
}