:root{
  --brand:#2e3094;
  --brand-2:#6063ac;
  --ink:#1f2352;
  --text:#34384c;
  --muted:#666c82;
  --paper:#ffffff;
  --soft:#f5f6ff;
  --soft-2:#eef1ff;
  --line:rgba(46,48,148,.16);
  --shadow:0 18px 48px rgba(16,19,49,.10);
  --header-h:76px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  padding-top:var(--header-h);
  background:#ffffff;
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
.container{ width:min(1160px, 92%); margin-inline:auto; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:.45rem .7rem;
  border-radius:8px;
  background:var(--brand);
  color:#ffffff;
  z-index:10001;
  outline:none;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10000;
  background:#ffffff;
  border-bottom:1px solid #eceef7;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-scrolled{
  border-bottom-color:rgba(46,48,148,.14);
  box-shadow:0 10px 30px rgba(16,19,49,.11);
}
.nav-rail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--header-h);
  gap:1rem;
  padding:.35rem 0;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.logo-img{
  display:block;
  width:auto;
  max-width:min(210px, 62vw);
  max-height:64px;
  object-fit:contain;
}
.primary-nav{ display:block; }
.nav-list{
  position:relative;
  list-style:none;
  margin:0;
  padding:0 10px;
  display:flex;
  flex-wrap:nowrap;
  gap:.35rem;
  align-items:center;
  border-radius:12px;
  background:#f7f8ff;
  white-space:nowrap;
  overflow:visible;
}
.nav-list > li{ position:relative; z-index:2; margin:0; padding:0; }
.nav-list a,
.nav-submenu-toggle{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-height:42px;
  padding:.45rem .7rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#333333;
  text-decoration:none;
  font:inherit;
  font-size:.95rem;
  font-weight:800;
  cursor:pointer;
}
.nav-list a:hover,
.nav-submenu-toggle:hover{ color:var(--brand); }
.nav-list a.active,
.nav-submenu-toggle.active{
  color:#ffffff;
  background:var(--brand);
  box-shadow:0 10px 24px rgba(46,48,148,.22);
}
.nav-caret{ font-size:.78em; line-height:1; }
.nav-submenu{
  position:absolute;
  top:calc(100% + .55rem);
  left:50%;
  width:min(360px, 92vw);
  display:grid;
  grid-template-columns:1fr;
  gap:.18rem;
  padding:.55rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 20px 48px rgba(16,19,49,.16);
  transform:translateX(-50%) translateY(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-item--has-submenu:hover .nav-submenu,
.nav-item--has-submenu:focus-within .nav-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-submenu a{
  display:flex;
  justify-content:flex-start;
  width:100%;
  min-height:44px;
  padding:.65rem .7rem;
  border-radius:10px;
  white-space:normal;
  color:var(--ink);
  font-size:.9rem;
}
.nav-submenu a:hover{ background:var(--soft); color:var(--brand); }
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
.btn{
  display:inline-flex;
  min-height:46px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:.78rem 1rem;
  border:1px solid transparent;
  text-decoration:none;
  font:inherit;
  font-weight:900;
  line-height:1.1;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn--primary{ background:var(--brand); color:#ffffff; box-shadow:0 14px 30px rgba(46,48,148,.20); }
.btn--ghost{ background:#ffffff; color:var(--ink); border-color:#dfe3fb; box-shadow:0 8px 20px rgba(16,19,49,.07); }
.btn:focus-visible,
.nav-list a:focus-visible,
.nav-submenu-toggle:focus-visible,
.mobile-menu a:focus-visible{
  outline:3px solid rgba(96,99,172,.38);
  outline-offset:3px;
}
.nav-toggle-btn{
  display:none;
  width:44px;
  height:40px;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nav-toggle-btn span{ width:24px; height:2px; background:var(--brand); display:block; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.mobile-drawer{ display:none; position:fixed; top:var(--header-h); left:0; right:0; z-index:9999; background:#ffffff; border-top:1px solid #eceef7; box-shadow:0 18px 36px rgba(16,19,49,.10); }
.mobile-drawer.open{ display:block; }
.mobile-menu{ display:flex; flex-direction:column; padding:.6rem; }
.mobile-menu a{ min-height:44px; padding:.72rem .8rem; color:#333333; text-decoration:none; border-radius:10px; font-weight:850; }
.mobile-menu a:hover{ color:var(--brand); background:#f5f6ff; }
.mobile-menu a[aria-current="page"]{ color:var(--brand); background:var(--soft); }
.mobile-menu .mobile-sub{
  margin:.15rem 0 .35rem .7rem;
  padding-left:.7rem;
  border-left:3px solid rgba(46,48,148,.14);
}
.mobile-menu .mobile-sub a{
  min-height:40px;
  padding:.58rem .7rem;
  font-size:.92rem;
  font-weight:750;
}

.hero{
  position:relative;
  padding:clamp(44px, 7vw, 92px) 0 clamp(34px, 6vw, 76px);
  background:
    radial-gradient(700px 260px at 12% 0%, rgba(46,48,148,.13), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .72fr);
  gap:clamp(1.4rem, 4vw, 3.2rem);
  align-items:center;
}
.kicker{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  justify-content:center;
  margin-bottom:.8rem;
  padding:.34rem .76rem;
  border-radius:999px;
  background:var(--brand);
  color:#ffffff;
  font-size:.76rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 10px 22px rgba(46,48,148,.16);
}
h1,h2,h3{ color:var(--ink); margin:0; letter-spacing:0; }
h1{ font-size:clamp(2.25rem, 6vw, 4.15rem); line-height:1.02; font-weight:950; }
h2{ font-size:clamp(1.75rem, 4.4vw, 2.75rem); line-height:1.08; font-weight:950; }
h3{ font-size:clamp(1.08rem, 2vw, 1.35rem); line-height:1.15; font-weight:900; }
p{ margin:0; }
.lead{ color:#3f4358; font-size:clamp(1.02rem, 1.6vw, 1.18rem); line-height:1.65; }
.hero .lead{ margin-top:1rem; max-width:720px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.35rem; }
.hero-card{
  border:1px solid var(--line);
  border-radius:22px;
  background:#ffffff;
  box-shadow:var(--shadow);
  padding:1rem;
  overflow:hidden;
}
.hero-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px;
  transition:transform .5s cubic-bezier(.2,.75,.25,1);
}
.trust-list{
  display:grid;
  gap:.7rem;
  margin-top:1rem;
}
.trust-item{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  gap:.75rem;
  align-items:start;
  padding:.85rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:#ffffff;
}
.trust-item strong{ display:block; color:var(--ink); line-height:1.15; }
.trust-item span{ display:block; color:var(--muted); margin-top:.12rem; font-size:.95rem; line-height:1.4; }
.trust-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:14px;
  background:var(--soft-2);
  color:var(--brand);
  font-weight:950;
  font-size:.9rem;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(46,48,148,.10);
}

.section{ padding:clamp(46px, 7vw, 82px) 0; }
.section.alt{ background:linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%); }
.section-head{ max-width:820px; margin:0 auto clamp(1.5rem, 3vw, 2.25rem); text-align:center; }
.section-head .lead{ margin-top:.75rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; align-items:start; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; align-items:start; }
.card{
  border:1px solid var(--line);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,1)),
    radial-gradient(420px 140px at 0% 0%, rgba(46,48,148,.07), transparent 64%);
  box-shadow:0 14px 34px rgba(16,19,49,.07);
  padding:1.1rem;
}
.card p{ margin-top:.45rem; color:#4b5064; line-height:1.55; }
.card ul{ display:grid; gap:.48rem; margin:.8rem 0 0; padding:0; list-style:none; }
.card li{ position:relative; padding-left:1.25rem; color:#3f4358; }
.card li::before{ content:""; position:absolute; left:0; top:.58em; width:.45rem; height:.45rem; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(46,48,148,.09); }

.visual-proof{
  border:1px solid rgba(46,48,148,.14);
  border-radius:26px;
  padding:clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(104,149,255,.12), transparent 62%),
    linear-gradient(180deg, #ffffff, #f8f9ff);
  box-shadow:0 18px 48px rgba(16,19,49,.08);
}
.visual-proof .section-head{ margin-bottom:1.15rem; }
.visual-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
  align-items:start;
}
.visual-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#ffffff;
  box-shadow:0 14px 30px rgba(16,19,49,.07);
}
.visual-card img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:#eef1ff;
}
.visual-card img.is-screenshot{
  object-fit:contain;
  padding:.8rem;
  background:#f2f4fa;
}
.visual-card--diagram{
  align-self:stretch;
}
.visual-diagram{
  aspect-ratio:4 / 3;
  display:grid;
  align-content:center;
  gap:.7rem;
  padding:1.1rem;
  background:linear-gradient(145deg, #f0f2ff, #ffffff);
  border-bottom:1px solid var(--line);
}
.diagram-row{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  gap:.7rem;
  align-items:center;
  padding:.7rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:14px;
  background:#ffffff;
  color:var(--ink);
  font-weight:850;
  box-shadow:0 8px 20px rgba(16,19,49,.06);
}
.diagram-row b{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--brand);
  color:#ffffff;
  line-height:1;
}
.visual-card div{ padding:1rem; }
.visual-card h3{ font-size:1.05rem; line-height:1.14; }
.visual-card p{ margin-top:.38rem; color:#4b5064; line-height:1.5; }

.comparison{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:1rem;
  align-items:start;
}
.path-panel{
  border-radius:22px;
  padding:1.2rem;
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow);
}
.path-panel.primary{
  background:linear-gradient(135deg, var(--brand), #1f2352);
  color:#ffffff;
}
.path-panel.primary h2,
.path-panel.primary h3,
.path-panel.primary p{ color:#ffffff; }
.path-panel p{ color:#4b5064; margin-top:.55rem; }
.step-list{ display:grid; gap:.7rem; margin-top:1rem; }
.step{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  gap:.7rem;
  align-items:start;
  padding:.85rem;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(46,48,148,.11);
}
.primary .step{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
.step b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  background:var(--brand);
  color:#ffffff;
  font-size:.95rem;
  line-height:normal;
  text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 10px 22px rgba(46,48,148,.18);
}
.primary .step b{ background:#ffffff; color:var(--brand); }
.step strong{ display:block; color:inherit; line-height:1.15; }
.step span{ display:block; color:inherit; opacity:.82; line-height:1.45; margin-top:.14rem; }

.service-links{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.75rem;
}
.related-section{
  padding:clamp(34px, 5vw, 58px) 0;
  background:#f7f8ff;
  border-top:1px solid rgba(46,48,148,.10);
}
.related-section .section-head{
  margin-bottom:1.1rem;
}
.related-section .section-head h2{
  font-size:clamp(1.6rem, 3.4vw, 2.25rem);
}
.service-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  min-height:64px;
  padding:.85rem .95rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  box-shadow:0 12px 28px rgba(16,19,49,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-link span:last-child{ color:var(--brand); }

.faq{ display:grid; gap:.75rem; max-width:920px; margin-inline:auto; }
.faq details{
  border:1px solid var(--line);
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 12px 28px rgba(16,19,49,.06);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.1rem;
  color:var(--ink);
  font-weight:900;
}
.faq summary:focus-visible{
  outline:3px solid rgba(96,99,172,.34);
  outline-offset:-3px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  float:right;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.8rem;
  border-radius:50%;
  background:var(--soft-2);
  color:var(--brand);
  font-weight:950;
}
.faq details[open] summary::after{ content:"–"; }
.faq details[open]{
  border-color:color-mix(in srgb, var(--accent, var(--brand)) 32%, white);
  box-shadow:0 16px 34px rgba(16,19,49,.09);
}
.faq details p{ padding:0 1.1rem 1rem; color:#4b5064; }

.cta{
  padding:clamp(42px, 7vw, 76px) 0;
  background:#101331;
  color:#ffffff;
}
.cta-panel{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:1.2rem;
  align-items:center;
}
.cta h2{ color:#ffffff; }
.cta p{ max-width:760px; margin-top:.75rem; color:rgba(255,255,255,.82); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.cta .btn--ghost{ background:#ffffff; color:var(--ink); }

.footer{
  background:#101331;
  color:#ffffff;
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer strong{ display:block; }
.footer span,
.footer p{ color:rgba(255,255,255,.72); }
.footer-links{ display:flex; flex-wrap:wrap; gap:.45rem; }
.footer-links a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:.5rem .72rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ffffff;
  text-decoration:none;
  font-weight:800;
  font-size:.9rem;
}

.mobile-floating-contact{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9998;
  display:none;
  gap:.55rem;
}
.mobile-floating-contact a{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--brand);
  color:#ffffff;
  box-shadow:0 12px 28px rgba(46,48,148,.28);
}
.mobile-floating-contact svg{ width:23px; height:23px; fill:currentColor; }
.mobile-floating-contact .email{ background:#1f2352; }

.back-to-services{
  position:fixed;
  left:50%;
  right:auto;
  bottom:18px;
  z-index:9997;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:46px;
  padding:.72rem .95rem;
  border:1px solid rgba(46,48,148,.18);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  line-height:1;
  box-shadow:0 14px 34px rgba(16,19,49,.16);
  backdrop-filter:blur(10px);
  transform:translateX(-50%);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.back-to-services span{
  color:var(--brand);
  font-size:1.15rem;
  line-height:1;
}
.back-to-services:hover{
  color:var(--brand);
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 18px 38px rgba(16,19,49,.20);
}
.back-to-services:focus-visible{
  outline:3px solid rgba(96,99,172,.38);
  outline-offset:3px;
}

@media (min-width:1200px){
  :root{ --header-h:124px; }
  .logo-img{ max-width:240px; max-height:112px; }
}
@media (max-width:1080px){
  .primary-nav,.nav-actions{ display:none; }
  .nav-toggle-btn{ display:flex; }
  .hero-grid,.comparison,.cta-panel{ grid-template-columns:1fr; }
  .hero-card{ max-width:620px; }
  .grid-3,.service-links,.visual-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  body{ padding-bottom:72px; }
  .container{ width:min(100% - 28px, 1160px); }
  .hero{ padding-top:32px; }
  .hero-actions,.cta-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn,.cta-actions .btn{ width:100%; }
  .grid-2,.grid-3,.service-links,.visual-grid{ grid-template-columns:1fr; }
  .card,.path-panel{ border-radius:16px; padding:.95rem; }
  .visual-proof{ border-radius:20px; padding:.85rem; }
  .visual-card{ border-radius:16px; }
  .visual-card div{ padding:.85rem; }
  .visual-diagram{ padding:.75rem; }
  .diagram-row{ grid-template-columns:38px minmax(0, 1fr); padding:.6rem; font-size:.92rem; }
  .diagram-row b{ width:38px; height:38px; }
  .trust-item{ grid-template-columns:40px minmax(0, 1fr); padding:.72rem; }
  .trust-icon{ width:40px; height:40px; }
  .footer-inner{ display:grid; gap:.8rem; }
  .footer-links{ display:grid; grid-template-columns:1fr 1fr; }
  .footer-links a{ justify-content:center; }
  .mobile-floating-contact{
    display:flex;
    flex-direction:column;
    align-items:center;
    bottom:76px;
  }
  .back-to-services{
    left:50%;
    right:auto;
    bottom:14px;
    min-height:52px;
    width:max-content;
    max-width:calc(100vw - 28px);
    padding:.75rem .9rem;
    transform:translateX(-50%);
  }
  .back-to-services:hover{ transform:translateX(-50%) translateY(-2px); }
}

/* Service landing pages use one brand system with distinct page compositions. */
.service-page{
  --accent:#2e3094;
  --accent-soft:#eef1ff;
}
.service-slow{ --accent:#2e3094; --accent-soft:#eef0ff; }
.service-printer{ --accent:#2854a2; --accent-soft:#edf4ff; }
.service-wifi,.service-wifiprint{ --accent:#1f4f91; --accent-soft:#eaf3ff; }
.service-virus,.service-scam{ --accent:#3849a4; --accent-soft:#eef0ff; }
.service-newpc{ --accent:#2e3094; --accent-soft:#eff0ff; }
.service-email{ --accent:#1767a4; --accent-soft:#eaf4fc; }
.service-backup{ --accent:#3f54a8; --accent-soft:#eef1ff; }
.service-business{ --accent:#315f96; --accent-soft:#eaf3fb; }
.service-onsite{ --accent:#4a4da3; --accent-soft:#f0f0ff; }
.service-senior{ --accent:#3659a0; --accent-soft:#edf3ff; }
.service-smart{ --accent:#285aa0; --accent-soft:#edf4ff; }

.service-page .kicker{ background:var(--accent); }
.service-page .hero{
  background:
    linear-gradient(120deg, var(--accent-soft), rgba(255,255,255,.98) 46%, #f7f8ff 100%);
}
.service-page .hero-card{
  padding:.65rem;
  border-color:color-mix(in srgb, var(--accent) 22%, white);
  border-radius:18px;
  background:#ffffff;
}
.service-page .hero-card img{
  border-radius:12px;
  aspect-ratio:4/3;
}
.service-page .hero-actions .btn--primary{ background:var(--accent); }

.service-help{ overflow:hidden; }
.help-layout{ display:grid; gap:1rem; align-items:start; }
.help-intro{ max-width:780px; }
.help-intro .lead{ margin-top:.75rem; }
.help-points{ display:grid; gap:.75rem; }
.help-point{
  padding:1rem 1.05rem;
  border-left:4px solid var(--accent);
  background:#ffffff;
  box-shadow:0 10px 28px rgba(16,19,49,.06);
}
.help-point h3{ color:var(--ink); }
.help-point p{ margin-top:.35rem; color:#4b5064; line-height:1.5; }
.help-list{
  padding:1.05rem;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 18%, white);
}
.help-list h3{ color:var(--ink); }
.help-list ul{ display:grid; gap:.5rem; margin:.8rem 0 0; padding:0; list-style:none; }
.help-list li{ position:relative; padding-left:1.2rem; color:#34384c; }
.help-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:var(--accent);
}

.service-page .visual-proof{
  border:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.service-page .visual-card{ border-radius:12px; }
.service-page .visual-card img{ border-radius:0; }
.service-page .visual-diagram{
  background:var(--accent-soft);
  place-items:center;
  text-align:center;
}
.visual-symbol{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--accent);
  color:#ffffff;
  font-size:1.7rem;
  font-weight:900;
}
.visual-diagram strong{ color:var(--ink); font-size:1.08rem; }
.visual-diagram small{ color:var(--muted); font-size:.9rem; }
.service-page .related-section{ border-top:4px solid var(--accent); }
.service-page .service-link span:last-child{ color:var(--accent); }
.service-page .faq summary::after{ color:var(--accent); background:var(--accent-soft); }

.service-page.motion-ready [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .52s ease var(--reveal-delay, 0ms),
    transform .52s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms);
}
.service-page.motion-ready [data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (hover:hover) and (pointer:fine){
  .service-page .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(46,48,148,.24);
  }
  .service-page .hero-card:hover img{ transform:scale(1.025); }
  .service-page .visual-card:hover,
  .service-page .service-text-card:hover,
  .service-page .help-point:hover,
  .service-page .trust-item:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(16,19,49,.10);
  }
  .service-page .service-link:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--accent) 30%, white);
    box-shadow:0 16px 34px rgba(16,19,49,.10);
  }
}

.service-page .visual-card,
.service-page .service-text-card,
.service-page .help-point,
.service-page .trust-item{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-page .btn.is-pressing,
.service-page .service-link.is-pressing,
.mobile-floating-contact a.is-pressing{
  transform:scale(.96);
}

.service-text-section{ background:#ffffff; }
.service-text-section .section-head{ margin-bottom:1.25rem; }
.service-text-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  align-items:stretch;
}
.service-text-card{
  position:relative;
  min-width:0;
  padding:1.15rem;
  border:1px solid rgba(46,48,148,.16);
  border-top:4px solid var(--accent);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,var(--accent-soft));
  box-shadow:0 12px 28px rgba(16,19,49,.07);
}
.service-text-card h3{ color:var(--ink); }
.service-text-card p{ margin-top:.45rem; color:#4b5064; line-height:1.55; }
.service-card-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:30px;
  margin-bottom:.75rem;
  padding:0 .65rem;
  border-radius:999px;
  background:var(--accent);
  color:#ffffff;
  font-weight:900;
  line-height:1;
}
.is-numbered .service-text-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:.75rem;
  align-items:center;
}
.is-numbered .service-card-number{ margin-bottom:0; }
.is-numbered .service-text-card p{ grid-column:2; }

.smart-home-hero{ overflow:hidden; }
.smart-home-illustration{
  position:relative;
  min-height:420px;
  display:grid;
  align-content:end;
  padding:4.6rem 1rem 1rem;
  background:linear-gradient(180deg,#eaf2ff 0%,#f9fbff 58%,#dce9ff 100%);
  border-radius:12px;
}
.smart-home-roof{
  position:absolute;
  top:2rem;
  left:50%;
  width:72%;
  height:120px;
  background:#2e3094;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  transform:translateX(-50%);
}
.smart-home-body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  width:86%;
  margin-inline:auto;
  padding:1rem;
  border:2px solid rgba(46,48,148,.18);
  background:#ffffff;
  box-shadow:0 18px 36px rgba(31,35,82,.12);
}
.smart-home-wifi{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.75rem;
  background:#eef1ff;
  color:var(--ink);
  font-weight:900;
}
.smart-home-wifi img{ width:42px; height:42px; object-fit:contain; }
.smart-device-tile{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:.6rem;
  min-height:64px;
  padding:.65rem;
  border:1px solid rgba(46,48,148,.14);
  background:#f9faff;
  color:var(--ink);
  font-size:.82rem;
  font-weight:850;
}
.smart-device-tile img{ width:42px; height:42px; object-fit:contain; }
.speaker-shape{
  display:block;
  width:28px;
  height:42px;
  margin-inline:auto;
  border-radius:14px 14px 9px 9px;
  background:linear-gradient(180deg,#6275bf,#20275f);
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.18);
}
.speaker-shape--wide{ width:42px; height:26px; border-radius:8px; }
.service-page .smart-home-hero img{ aspect-ratio:auto; border-radius:0; }

@media (min-width:1081px){
  .variant-a .hero-grid{ grid-template-columns:minmax(0, 1fr) minmax(360px, .78fr); }
  .variant-a .help-layout{ grid-template-columns:.92fr 1.08fr; }
  .variant-a .help-intro{ position:sticky; top:calc(var(--header-h) + 24px); }
  .variant-a .help-list{ grid-column:2; }

  .variant-b .hero-grid{ grid-template-columns:minmax(360px, .82fr) minmax(0, 1fr); }
  .variant-b .hero-card{ order:-1; transform:rotate(-1deg); }
  .variant-b .help-layout{ grid-template-columns:1fr 1.15fr .85fr; }
  .variant-b .help-intro{ grid-column:1 / -1; text-align:center; margin-inline:auto; }
  .variant-b .help-points{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-column:1 / -1; }
  .variant-b .help-list{ grid-column:1 / -1; }
  .variant-b .help-list ul{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .variant-b .visual-grid{ grid-template-columns:1.25fr .875fr .875fr; }

  .variant-c .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .variant-c .hero-grid > div{ max-width:850px; margin-inline:auto; }
  .variant-c .hero .lead{ margin-inline:auto; }
  .variant-c .hero-actions{ justify-content:center; }
  .variant-c .hero-card{ width:min(760px,100%); margin-inline:auto; }
  .variant-c .help-layout{ grid-template-columns:.8fr 1.2fr; }
  .variant-c .help-intro{ grid-column:1; grid-row:1 / span 2; }
  .variant-c .help-list{ grid-column:2; }
  .variant-c .visual-grid{ grid-template-columns:1.1fr .9fr; }
  .variant-c .visual-card:nth-child(3){ grid-column:1 / -1; display:grid; grid-template-columns:.9fr 1.1fr; }
  .variant-c .visual-card:nth-child(3) img{ aspect-ratio:16/8; height:100%; }

  .variant-d .hero-grid{ grid-template-columns:1fr .88fr; }
  .variant-d .hero-grid > div{
    padding:2rem;
    border-left:8px solid var(--accent);
    background:rgba(255,255,255,.76);
  }
  .variant-d .help-layout{ grid-template-columns:1fr 1fr; }
  .variant-d .help-intro{ grid-column:1 / -1; }
  .variant-d .help-points{ grid-column:1; }
  .variant-d .help-list{ grid-column:2; position:sticky; top:calc(var(--header-h) + 24px); }
  .variant-d .visual-grid{ gap:1.25rem; }
  .variant-d .visual-card{ border:0; box-shadow:none; border-bottom:4px solid var(--accent); }

  .variant-e .hero-grid{ grid-template-columns:1fr 1fr; }
  .variant-e .hero-card{ box-shadow:none; outline:1px solid var(--accent); outline-offset:10px; margin:12px; }
  .variant-e .help-layout{ grid-template-columns:1.05fr .95fr; }
  .variant-e .help-intro{ grid-column:1 / -1; max-width:920px; }
  .variant-e .help-points{ grid-column:1; }
  .variant-e .help-list{ grid-column:2; }
  .variant-e .help-point{ border-left:0; border-bottom:2px solid var(--accent); box-shadow:none; padding-inline:0; }
  .variant-e .visual-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
  .variant-e .visual-card:nth-child(1){ grid-column:1 / span 5; }
  .variant-e .visual-card:nth-child(2){ grid-column:6 / span 7; }
  .variant-e .visual-card:nth-child(3){ grid-column:3 / span 8; }
}

@media (max-width:1080px){
  .service-page .hero-grid,.help-layout{ grid-template-columns:1fr; }
  .service-page .hero-card{ width:min(680px,100%); margin-inline:auto; order:initial; transform:none; }
  .help-intro{ text-align:left; }
  .help-points{ grid-template-columns:1fr; }
  .help-list{ position:static; }
  .service-text-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:680px){
  .service-page .hero{ padding-top:24px; }
  .service-page .hero-grid{ gap:1.15rem; }
  .service-page .hero-card{ padding:.4rem; border-radius:14px; }
  .service-page .hero-card img{ border-radius:10px; }
  .service-help{ padding-block:38px; }
  .help-point,.help-list{ border-radius:10px; }
  .service-page .visual-grid{ display:grid; grid-template-columns:1fr; }
  .service-page .visual-card{ display:block; grid-column:auto; }
  .service-page .visual-card img{ width:100%; height:auto; aspect-ratio:4/3; }
  .service-page .faq details{ border-radius:12px; }
  .service-page .related-section{ padding-block:34px; }
  .service-text-grid{ grid-template-columns:1fr; }
  .service-text-card{ padding:1rem; }
  .smart-home-illustration{ min-height:360px; padding-top:4rem; }
  .smart-home-body{ width:94%; }
  .smart-device-tile{ grid-template-columns:36px minmax(0,1fr); }
  .smart-device-tile img{ width:36px; height:36px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .site-header,
  .btn,
  .hero-card img,
  .service-link,
  .faq details,
  .service-page [data-reveal]{
    transition:none !important;
  }
  .service-page.motion-ready [data-reveal]{
    opacity:1;
    transform:none;
  }
}