:root {
    --bg: #07090d;
    --bg-soft: #0c1017;
    --panel: rgba(255, 255, 255, 0.055);
    --panel-strong: rgba(255, 255, 255, 0.085);
  
    --white: #ffffff;
    --text: #f5f7fb;
    --muted: #9ca6b5;
    --muted-2: #6e7887;
  
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.16);
  
    --green: #7cffb2;
    --green-strong: #3be889;
    --green-dark: #0f9f5d;
  
    --blue: #6da8ff;
    --purple: #a78bfa;
    --cyan: #62e6f3;
    --orange: #ffbe6b;
    --red: #ff7676;
  
    --shadow:
      0 30px 90px rgba(0, 0, 0, 0.48);
  
    --container: 1180px;
    --radius-xl: 36px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    overflow-x: hidden;
  
    color: var(--text);
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(109, 168, 255, 0.08),
        transparent 27%
      ),
      radial-gradient(
        circle at 88% 10%,
        rgba(124, 255, 178, 0.07),
        transparent 28%
      ),
      var(--bg);
  
    font-family:
      Inter,
      "PingFang SC",
      "Microsoft YaHei",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
  
    line-height: 1.7;
    text-rendering: optimizeLegibility;
  }
  
  body::before {
    content: "";
  
    position: fixed;
    inset: 0;
    z-index: -3;
  
    pointer-events: none;
  
    background-image:
      linear-gradient(
        rgba(255, 255, 255, 0.022) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.022) 1px,
        transparent 1px
      );
  
    background-size: 58px 58px;
  
    mask-image:
      linear-gradient(
        to bottom,
        black,
        transparent 88%
      );
  }
  
  body::after {
    content: "";
  
    position: fixed;
    top: -300px;
    left: 50%;
    z-index: -2;
  
    width: 900px;
    height: 900px;
  
    pointer-events: none;
  
    background:
      radial-gradient(
        circle,
        rgba(124, 255, 178, 0.075),
        transparent 66%
      );
  
    transform: translateX(-50%);
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  
  button {
    font: inherit;
  }
  
  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }
  
  h1 {
    max-width: 760px;
  
    margin-bottom: 26px;
  
    font-size: clamp(48px, 6.4vw, 92px);
    line-height: 0.98;
    letter-spacing: -0.067em;
  }
  
  h2 {
    margin-bottom: 16px;
  
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.048em;
  }
  
  h3 {
    margin-bottom: 10px;
  
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: -0.02em;
  }
  
  p {
    color: var(--muted);
  }
  
  :focus-visible {
    outline: 3px solid rgba(124, 255, 178, 0.5);
    outline-offset: 4px;
  }
  
  ::selection {
    color: #06140c;
    background: var(--green);
  }
  
  /* Header */
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  
    width: 100%;
  
    border-bottom: 1px solid transparent;
  
    transition:
      background 180ms ease,
      border-color 180ms ease,
      backdrop-filter 180ms ease;
  }
  
  header.is-scrolled {
    background: rgba(7, 9, 13, 0.78);
    border-color: var(--line);
  
    backdrop-filter: blur(22px);
  }
  
  .nav {
    display: grid;
    grid-template-columns:
      auto
      1fr
      auto;
  
    align-items: center;
  
    width: min(
      calc(100% - 40px),
      var(--container)
    );
  
    min-height: 78px;
  
    margin-inline: auto;
  }
  
  .logo {
    position: relative;
  
    display: inline-flex;
    align-items: center;
  
    color: var(--white);
  
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.04em;
  }
  
  .logo::before {
    content: "";
  
    width: 12px;
    height: 12px;
  
    margin-right: 10px;
  
    background:
      linear-gradient(
        145deg,
        var(--green),
        var(--cyan)
      );
  
    border-radius: 4px;
  
    box-shadow:
      0 0 24px rgba(124, 255, 178, 0.5);
  
    transform: rotate(12deg);
  }
  
  .menu {
    justify-self: center;
  
    display: flex;
    gap: 34px;
  }
  
  .menu a {
    position: relative;
  
    color: #b6becb;
  
    font-size: 14px;
    font-weight: 700;
  }
  
  .menu a::after {
    content: "";
  
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
  
    height: 1px;
  
    background: var(--green);
  
    transform: scaleX(0);
    transform-origin: center;
  
    transition: transform 180ms ease;
  }
  
  .menu a:hover {
    color: var(--white);
  }
  
  .menu a:hover::after {
    transform: scaleX(1);
  }
  
  .nav-btn {
    display: inline-flex;
    min-height: 42px;
  
    align-items: center;
    justify-content: center;
  
    padding: 0 18px;
  
    color: #07120b;
  
    background:
      linear-gradient(
        135deg,
        #b8ffd3,
        var(--green)
      );
  
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
  
    font-size: 13px;
    font-weight: 900;
  
    box-shadow:
      0 12px 35px rgba(59, 232, 137, 0.22);
  
    transition:
      transform 180ms ease,
      box-shadow 180ms ease;
  }
  
  .nav-btn:hover {
    transform: translateY(-2px);
  
    box-shadow:
      0 18px 42px rgba(59, 232, 137, 0.32);
  }
  
  /* Hero */
  
  .hero {
    position: relative;
    isolation: isolate;
  
    display: grid;
    grid-template-columns:
      minmax(0, 0.96fr)
      minmax(430px, 1.04fr);
  
    align-items: center;
  
    gap: 74px;
  
    width: min(
      calc(100% - 40px),
      var(--container)
    );
  
    min-height: 100vh;
  
    margin-inline: auto;
    padding: 140px 0 92px;
  }
  
  .hero::before {
    content: "";
  
    position: absolute;
    top: 5%;
    right: 2%;
    z-index: -1;
  
    width: 520px;
    height: 520px;
  
    background:
      radial-gradient(
        circle,
        rgba(109, 168, 255, 0.14),
        transparent 68%
      );
  
    filter: blur(10px);
  }
  
  .hero-left {
    position: relative;
    z-index: 2;
  }
  
  .tag {
    display: inline-flex;
    align-items: center;
  
    gap: 10px;
  
    margin-bottom: 26px;
    padding: 9px 14px;
  
    color: #b9ffd4;
    background: rgba(124, 255, 178, 0.07);
  
    border: 1px solid rgba(124, 255, 178, 0.18);
    border-radius: 999px;
  
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.13em;
  }
  
  .tag::before {
    content: "";
  
    width: 7px;
    height: 7px;
  
    background: var(--green);
    border-radius: 50%;
  
    box-shadow:
      0 0 0 6px rgba(124, 255, 178, 0.08),
      0 0 18px rgba(124, 255, 178, 0.75);
  }
  
  .hero-left > p {
    max-width: 680px;
  
    margin-bottom: 34px;
  
    font-size: 18px;
  }
  
  .buttons {
    display: flex;
    flex-wrap: wrap;
  
    gap: 14px;
  }
  
  .buttons a {
    display: inline-flex;
    min-height: 54px;
  
    align-items: center;
    justify-content: center;
  
    padding: 0 25px;
  
    border-radius: 14px;
  
    font-weight: 900;
  
    transition:
      transform 180ms ease,
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }
  
  .buttons a:first-child {
    color: #06150d;
  
    background:
      linear-gradient(
        135deg,
        #c6ffda,
        var(--green)
      );
  
    border: 1px solid rgba(255, 255, 255, 0.55);
  
    box-shadow:
      0 18px 48px rgba(59, 232, 137, 0.23);
  }
  
  .buttons a:first-child:hover {
    transform: translateY(-3px);
  
    box-shadow:
      0 24px 58px rgba(59, 232, 137, 0.34);
  }
  
  .buttons .ghost {
    color: var(--white);
  
    background: rgba(255, 255, 255, 0.035);
  
    border: 1px solid var(--line-strong);
  
    backdrop-filter: blur(18px);
  }
  
  .buttons .ghost:hover {
    transform: translateY(-3px);
  
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.28);
  }
  
  /* Hero status panel */
  
  .system-panel {
    position: relative;
    overflow: hidden;
  
    padding: 28px;
  
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.09),
        rgba(255, 255, 255, 0.028)
      );
  
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-xl);
  
    box-shadow: var(--shadow);
  
    backdrop-filter: blur(26px);
  
    transform:
      perspective(1200px)
      rotateY(-4deg)
      rotateX(2deg);
  }
  
  .system-panel::before {
    content: "";
  
    position: absolute;
    top: -140px;
    right: -100px;
  
    width: 320px;
    height: 320px;
  
    background:
      radial-gradient(
        circle,
        rgba(124, 255, 178, 0.15),
        transparent 66%
      );
  }
  
  .system-panel::after {
    content: "";
  
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  
    height: 1px;
  
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(124, 255, 178, 0.7),
        transparent
      );
  }
  
  .panel-title {
    position: relative;
  
    margin-bottom: 26px;
  
    color: #7f8b9c;
  
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
  }
  
  .status {
    position: relative;
  
    display: flex;
    align-items: center;
  
    gap: 11px;
  
    margin-bottom: 28px;
    padding: 17px 18px;
  
    color: #d9ffe6;
    background: rgba(124, 255, 178, 0.06);
  
    border: 1px solid rgba(124, 255, 178, 0.15);
    border-radius: 15px;
  
    font-weight: 850;
  }
  
  .status span {
    width: 10px;
    height: 10px;
  
    background: var(--green);
    border-radius: 50%;
  
    box-shadow:
      0 0 0 7px rgba(124, 255, 178, 0.08),
      0 0 22px rgba(124, 255, 178, 0.8);
  
    animation: pulseStatus 2.2s infinite;
  }
  
  .device {
    position: relative;
  
    display: grid;
    grid-template-columns:
      1fr
      auto;
  
    align-items: center;
  
    min-height: 72px;
  
    padding: 0 17px;
  
    color: #d8dee7;
  
    border-bottom: 1px solid var(--line);
  
    font-size: 14px;
    font-weight: 750;
  }
  
  .device:last-child {
    border-bottom: 0;
  }
  
  .device > div {
    padding: 6px 10px;
  
    color: var(--green);
    background: rgba(124, 255, 178, 0.07);
  
    border: 1px solid rgba(124, 255, 178, 0.14);
    border-radius: 999px;
  
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.1em;
  }
  
  /* Shared sections */
  
  .section,
  .diagnostic,
  .devices,
  .faq,
  .cta {
    position: relative;
  
    width: min(
      calc(100% - 40px),
      var(--container)
    );
  
    margin-inline: auto;
  }
  
  .section,
  .diagnostic,
  .devices,
  .faq {
    padding: 112px 0;
  }
  
  .section > h2,
  .diagnostic > h2,
  .devices > h2,
  .faq > h2 {
    max-width: 760px;
  }
  
  .desc {
    max-width: 680px;
    margin-bottom: 46px;
  }
  
  /* Flow */
  
  .support-process {
    padding-top: 130px;
  }
  
  .flow {
    position: relative;
  
    display: grid;
    grid-template-columns:
      repeat(4, 1fr);
  
    gap: 16px;
  
    margin-top: 46px;
  }
  
  .flow::before {
    content: "";
  
    position: absolute;
    top: 49px;
    right: 10%;
    left: 10%;
    z-index: -1;
  
    height: 1px;
  
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(124, 255, 178, 0.55),
        transparent
      );
  }
  
  .flow > div {
    position: relative;
    overflow: hidden;
  
    min-height: 265px;
  
    padding: 28px;
  
    background:
      linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.075),
        rgba(255, 255, 255, 0.025)
      );
  
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background 220ms ease;
  }
  
  .flow > div::before {
    content: "";
  
    position: absolute;
    top: -60px;
    right: -60px;
  
    width: 160px;
    height: 160px;
  
    background:
      radial-gradient(
        circle,
        rgba(124, 255, 178, 0.11),
        transparent 68%
      );
  }
  
  .flow > div:hover {
    transform: translateY(-8px);
  
    background:
      linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.035)
      );
  
    border-color: rgba(124, 255, 178, 0.28);
  }
  
  .flow span {
    display: grid;
  
    width: 46px;
    height: 46px;
  
    place-items: center;
  
    margin-bottom: 44px;
  
    color: #06150d;
    background: var(--green);
  
    border-radius: 14px;
  
    font-size: 11px;
    font-weight: 950;
  
    box-shadow:
      0 0 0 8px rgba(124, 255, 178, 0.06),
      0 15px 34px rgba(59, 232, 137, 0.2);
  }
  
  .flow h3 {
    font-size: 23px;
  }
  
  .flow p {
    margin-bottom: 0;
  }
  
  /* Diagnostic */
  
  .diagnostic {
    overflow: hidden;
  
    margin-top: 30px;
    padding: 90px 62px;
  
    background:
      radial-gradient(
        circle at 80% 20%,
        rgba(109, 168, 255, 0.12),
        transparent 31%
      ),
      linear-gradient(
        145deg,
        #0d121b,
        #101720
      );
  
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
  
    box-shadow: var(--shadow);
  }
  
  .diagnostic::before {
    content: "SYSTEM DIAGNOSTICS";
  
    position: absolute;
    top: 22px;
    right: 30px;
  
    color: rgba(255, 255, 255, 0.035);
  
    font-size: clamp(42px, 7vw, 100px);
    font-weight: 950;
    letter-spacing: -0.06em;
    white-space: nowrap;
  }
  
  .checks {
    position: relative;
    z-index: 2;
  
    display: grid;
    grid-template-columns:
      repeat(4, 1fr);
  
    gap: 14px;
  
    margin-top: 42px;
  }
  
  .checks > div {
    position: relative;
  
    min-height: 175px;
  
    padding: 25px;
  
    color: var(--green);
  
    background: rgba(255, 255, 255, 0.04);
  
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  
    font-size: 17px;
    font-weight: 900;
  
    transition:
      transform 180ms ease,
      border-color 180ms ease;
  }
  
  .checks > div::after {
    content: "";
  
    position: absolute;
    right: 20px;
    bottom: 20px;
  
    width: 34px;
    height: 34px;
  
    background:
      radial-gradient(
        circle,
        var(--green) 0 11%,
        rgba(124, 255, 178, 0.15) 12% 35%,
        transparent 36%
      );
  }
  
  .checks > div:hover {
    transform: translateY(-5px);
    border-color: rgba(124, 255, 178, 0.28);
  }
  
  .checks p {
    margin: 43px 0 0;
  
    font-size: 13px;
    font-weight: 600;
  }
  
  /* Repair */
  
  .repair-grid {
    display: grid;
    grid-template-columns:
      repeat(2, 1fr);
  
    gap: 18px;
  
    margin-top: 46px;
  }
  
  .repair-grid > div {
    position: relative;
    overflow: hidden;
  
    min-height: 220px;
  
    padding: 34px;
  
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.065),
        rgba(255, 255, 255, 0.025)
      );
  
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  
    transition:
      transform 200ms ease,
      border-color 200ms ease;
  }
  
  .repair-grid > div::before {
    content: "";
  
    position: absolute;
    top: 30px;
    right: 30px;
  
    width: 44px;
    height: 44px;
  
    border: 1px solid var(--line-strong);
    border-radius: 14px;
  }
  
  .repair-grid > div::after {
    content: "+";
  
    position: absolute;
    top: 34px;
    right: 43px;
  
    color: var(--green);
  
    font-size: 24px;
    font-weight: 300;
  }
  
  .repair-grid > div:hover {
    transform: translateY(-7px);
    border-color: rgba(124, 255, 178, 0.25);
  }
  
  .repair-grid h3 {
    max-width: 70%;
    font-size: 27px;
  }
  
  .repair-grid p {
    max-width: 520px;
    margin-bottom: 0;
  }
  
  /* Devices */
  
  .devices {
    overflow: hidden;
  
    padding: 112px 0 120px;
  }
  
  .device-grid {
    display: grid;
    grid-template-columns:
      repeat(5, 1fr);
  
    gap: 14px;
  
    margin-top: 48px;
  }
  
  .device-grid > div {
    position: relative;
  
    min-height: 280px;
  
    padding: 26px 23px;
  
    background:
      linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.07),
        rgba(255, 255, 255, 0.02)
      );
  
    border: 1px solid var(--line);
    border-radius: 22px;
  
    transition:
      transform 220ms ease,
      border-color 220ms ease;
  }
  
  .device-grid > div::before {
    content: "";
  
    display: block;
  
    width: 72px;
    height: 105px;
  
    margin: 10px auto 44px;
  
    border: 3px solid #dfe6ef;
    border-radius: 17px;
  
    box-shadow:
      inset 0 0 0 5px rgba(255, 255, 255, 0.025);
  }
  
  .device-grid > div:nth-child(3)::before {
    width: 105px;
    height: 76px;
  
    margin-top: 24px;
    margin-bottom: 59px;
  
    border-radius: 13px;
  }
  
  .device-grid > div:nth-child(4)::before,
  .device-grid > div:nth-child(5)::before {
    width: 122px;
    height: 78px;
  
    margin-top: 19px;
    margin-bottom: 61px;
  
    border-radius: 9px;
  }
  
  .device-grid > div:nth-child(4)::after,
  .device-grid > div:nth-child(5)::after {
    content: "";
  
    position: absolute;
    top: 105px;
    left: 50%;
  
    width: 72px;
    height: 5px;
  
    background: #dfe6ef;
    border-radius: 999px;
  
    transform: translateX(-50%);
  }
  
  .device-grid > div:hover {
    transform: translateY(-8px);
    border-color: rgba(109, 168, 255, 0.3);
  }
  
  .device-grid h3 {
    margin-bottom: 7px;
    text-align: center;
  }
  
  .device-grid p {
    margin-bottom: 0;
    text-align: center;
    font-size: 13px;
  }
  
  /* FAQ */
  
  .faq {
    max-width: 920px;
  }
  
  .faq h2 {
    margin-bottom: 42px;
  }
  
  .faq details {
    border-top: 1px solid var(--line);
  }
  
  .faq details:last-child {
    border-bottom: 1px solid var(--line);
  }
  
  .faq summary {
    position: relative;
  
    padding: 25px 56px 25px 0;
  
    cursor: pointer;
    list-style: none;
  
    font-size: 18px;
    font-weight: 850;
  }
  
  .faq summary::-webkit-details-marker {
    display: none;
  }
  
  .faq summary::after {
    content: "+";
  
    position: absolute;
    top: 18px;
    right: 5px;
  
    color: var(--green);
  
    font-size: 28px;
    font-weight: 300;
  
    transition: transform 180ms ease;
  }
  
  .faq details[open] summary::after {
    transform: rotate(45deg);
  }
  
  .faq details p {
    max-width: 760px;
    margin-bottom: 0;
    padding: 0 30px 26px 0;
  }
  
  /* CTA */
  
  .cta {
    overflow: hidden;
  
    margin-bottom: 84px;
    padding: 115px 40px;
  
    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(124, 255, 178, 0.16),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        #0c1310,
        #0b1118
      );
  
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
  
    text-align: center;
  
    box-shadow: var(--shadow);
  }
  
  .cta::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background:
      linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.035),
        transparent 70%
      );
  
    transform: translateX(-100%);
  
    animation: ctaSweep 8s infinite;
  }
  
  .cta h2 {
    position: relative;
    z-index: 2;
  
    max-width: 850px;
  
    margin-inline: auto;
  }
  
  .cta p {
    position: relative;
    z-index: 2;
  
    max-width: 650px;
  
    margin: 0 auto 30px;
  
    font-size: 17px;
  }
  
  .cta a {
    position: relative;
    z-index: 2;
  
    display: inline-flex;
    min-height: 56px;
  
    align-items: center;
    justify-content: center;
  
    padding: 0 30px;
  
    color: #06140c;
  
    background:
      linear-gradient(
        135deg,
        #caffdc,
        var(--green)
      );
  
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 15px;
  
    font-weight: 950;
  
    box-shadow:
      0 20px 55px rgba(59, 232, 137, 0.25);
  
    transition:
      transform 180ms ease,
      box-shadow 180ms ease;
  }
  
  .cta a:hover {
    transform: translateY(-4px);
  
    box-shadow:
      0 27px 65px rgba(59, 232, 137, 0.36);
  }
  
  /* Footer */
  
  footer {
    padding: 34px 20px;
  
    color: var(--muted-2);
  
    border-top: 1px solid var(--line);
  
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  
  /* Reveal */
  
  .reveal {
    opacity: 0;
  
    transform: translateY(28px);
  
    transition:
      opacity 700ms ease,
      transform 700ms ease;
  }
  
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .reveal-delay-1 {
    transition-delay: 80ms;
  }
  
  .reveal-delay-2 {
    transition-delay: 160ms;
  }
  
  .reveal-delay-3 {
    transition-delay: 240ms;
  }
  
  /* Animations */
  
  @keyframes pulseStatus {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
  
    50% {
      opacity: 0.7;
      transform: scale(0.82);
    }
  }
  
  @keyframes ctaSweep {
    0%,
    68% {
      transform: translateX(-110%);
    }
  
    82%,
    100% {
      transform: translateX(110%);
    }
  }
  
  /* Tablet */
  
  @media (max-width: 1020px) {
    .hero {
      grid-template-columns: 1fr;
  
      min-height: auto;
      padding-top: 150px;
    }
  
    .hero-left {
      max-width: 850px;
    }
  
    .system-panel {
      max-width: 760px;
  
      transform: none;
    }
  
    .flow {
      grid-template-columns:
        repeat(2, 1fr);
    }
  
    .checks {
      grid-template-columns:
        repeat(2, 1fr);
    }
  
    .device-grid {
      grid-template-columns:
        repeat(3, 1fr);
    }
  }
  
  /* Mobile */
  
  @media (max-width: 760px) {
    .nav {
      grid-template-columns:
        1fr
        auto;
    }
  
    .menu {
      display: none;
    }
  
    .hero,
    .section,
    .diagnostic,
    .devices,
    .faq,
    .cta {
      width: min(
        calc(100% - 28px),
        var(--container)
      );
    }
  
    .hero {
      gap: 48px;
      padding-top: 125px;
    }
  
    h1 {
      font-size: clamp(45px, 15vw, 72px);
    }
  
    .hero-left > p {
      font-size: 16px;
    }
  
    .system-panel {
      padding: 21px;
      border-radius: 26px;
    }
  
    .section,
    .diagnostic,
    .devices,
    .faq {
      padding-top: 82px;
      padding-bottom: 82px;
    }
  
    .diagnostic {
      padding-right: 24px;
      padding-left: 24px;
    }
  
    .flow,
    .checks,
    .repair-grid,
    .device-grid {
      grid-template-columns: 1fr;
    }
  
    .flow::before {
      display: none;
    }
  
    .flow > div {
      min-height: 220px;
    }
  
    .device-grid > div {
      min-height: 245px;
    }
  
    .device-grid > div::before {
      margin-bottom: 28px;
    }
  
    .device-grid > div:nth-child(3)::before,
    .device-grid > div:nth-child(4)::before,
    .device-grid > div:nth-child(5)::before {
      margin-bottom: 34px;
    }
  
    .cta {
      padding: 78px 22px;
    }
  }
  
  @media (max-width: 520px) {
    .nav {
      width: calc(100% - 24px);
      min-height: 68px;
    }
  
    .nav-btn {
      min-height: 38px;
      padding-inline: 14px;
      font-size: 11px;
    }
  
    .hero {
      width: calc(100% - 24px);
    }
  
    .buttons {
      flex-direction: column;
    }
  
    .buttons a {
      width: 100%;
    }
  
    .device {
      grid-template-columns: 1fr;
      gap: 7px;
  
      padding-top: 14px;
      padding-bottom: 14px;
    }
  
    .device > div {
      justify-self: start;
    }
  
    .diagnostic::before {
      display: none;
    }
  
    .checks > div {
      min-height: 150px;
    }
  
    .repair-grid h3 {
      max-width: 100%;
    }
  
    .faq summary {
      padding-right: 42px;
      font-size: 16px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation: none !important;
      transition: none !important;
    }
  
    .reveal {
      opacity: 1;
      transform: none;
    }
  }