:root {
  --navy-950: #020b20;
  --navy-900: #061637;
  --navy-850: #081c44;
  --navy-800: #0a2453;

  --blue-700: #1349a0;
  --blue-600: #1c5fd1;
  --blue-500: #2b6df3;

  --orange-700: #d85400;
  --orange-600: #f46900;
  --orange-500: #ff7a00;
  --orange-400: #ff922e;

  --green: #0a9d68;

  --text: #0e1d38;
  --muted: #65738b;

  --border: #dce4ef;
  --border-light: #e8edf5;

  --surface: #f5f8fc;
  --surface-blue: #edf4ff;
  --white: #ffffff;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm:
    0 2px 6px rgba(5, 22, 55, 0.06);

  --shadow:
    0 14px 40px rgba(5, 22, 55, 0.10);

  --max-width: 1440px;
}


/* RESET */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--white);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* GENERAL */

.container {
  width: min(
    calc(100% - 40px),
    var(--max-width)
  );

  margin-inline: auto;
}

.eyebrow {
  display: block;

  color: var(--blue-600);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  margin-bottom: 14px;
}

.eyebrow-light {
  color: #8bbcff;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.14;
}

h2 {
  font-size: clamp(
    2rem,
    4vw,
    3.5rem
  );

  letter-spacing: -0.04em;

  margin-bottom: 14px;
}

.btn {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  padding: 0 24px;

  font-weight: 750;

  border: 1px solid transparent;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--blue-600),
      var(--blue-700)
    );

  box-shadow:
    0 10px 24px rgba(28, 95, 209, 0.22);
}

.btn-secondary {
  border-color: var(--border);

  background: white;

  color: var(--text);
}

.btn-light {
  color: var(--navy-900);
  background: white;
}

.btn-orange {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--orange-500),
      var(--orange-700)
    );
}

.btn-outline-light {
  color: white;

  border-color:
    rgba(255, 255, 255, 0.35);
}


/* TOP BAR */

.topbar {
  background:
    linear-gradient(
      90deg,
      var(--navy-950),
      var(--navy-850)
    );

  color: white;

  font-size: 0.83rem;
}

.topbar-inner {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.topbar p {
  margin: 0;
}

.topbar a {
  color: white;
  font-weight: 700;
}

.topbar-center {
  opacity: 0.85;
}


/* HEADER */

.site-header {
  background:
    rgba(255, 255, 255, 0.98);

  border-bottom:
    1px solid var(--border);

  position: sticky;

  top: 0;

  z-index: 100;

  backdrop-filter: blur(12px);
}

.header-main {
  min-height: 92px;

  display: grid;

  grid-template-columns:
    310px minmax(350px, 1fr) auto;

  align-items: center;

  gap: 30px;
}

.brand {
  display: block;

  max-width: 265px;
}

.brand img {
  width: 100%;
  height: 74px;

  object-fit: contain;

  object-position: left center;
}


/* SEARCH */

.search-box {
  min-height: 54px;

  display: grid;

  grid-template-columns:
    170px minmax(120px, 1fr) 58px;

  border:
    2px solid var(--navy-900);

  border-radius: 14px;

  overflow: hidden;

  background: white;
}

.search-box select,
.search-box input {
  border: 0;
  outline: none;

  background: transparent;

  color: var(--text);
}

.search-box select {
  padding: 0 17px;

  border-right:
    1px solid var(--border);
}

.search-box input {
  padding:
    0 18px;
}

.search-box button {
  border: 0;

  color: white;

  background:
    var(--navy-900);

  cursor: pointer;

  font-size: 1.1rem;
}


/* HEADER ACTIONS */

.header-actions {
  display: flex;

  align-items: center;

  gap: 14px;
}

.header-link {
  display: flex;

  align-items: center;

  gap: 9px;

  font-weight: 700;
}

.header-link small {
  display: block;

  color: var(--muted);

  font-size: 0.68rem;

  font-weight: 600;
}

.action-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--surface-blue);

  color: var(--blue-600);
}

.cart-button {
  min-height: 48px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 18px;

  border-radius: 12px;

  border:
    1px solid var(--border);

  background: white;

  box-shadow:
    var(--shadow-sm);

  font-weight: 750;
}


/* NAV */

.nav-wrap {
  border-top:
    1px solid var(--border-light);
}

.main-nav {
  min-height: 52px;

  display: flex;

  align-items: center;

  gap: 32px;

  font-size: 0.9rem;

  font-weight: 700;
}

.main-nav a {
  transition: color 0.15s ease;
}

.main-nav a:hover {
  color: var(--orange-600);
}

.nav-primary {
  color: var(--blue-600);
}


/* HERO */

.hero {
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 122, 0, 0.09),
      transparent 26%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(43, 109, 243, 0.11),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #f4f8ff,
      #ffffff 58%,
      #fff8f1
    );

  overflow: hidden;
}

.hero-grid {
  min-height: 670px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.88fr);

  align-items: center;

  gap: 70px;

  padding-block: 72px;
}

.hero-copy {
  max-width: 720px;
}

.hero h1 {
  margin:
    0 0 24px;

  color: var(--navy-900);

  font-size:
    clamp(3rem, 6vw, 5.5rem);

  line-height: 0.98;

  letter-spacing: -0.055em;
}

.hero h1 span {
  color: var(--orange-600);
}

.hero-description {
  max-width: 650px;

  color: var(--muted);

  font-size: 1.15rem;

  line-height: 1.8;
}

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;
}

.hero-benefits {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  margin-top: 42px;
}

.hero-benefits div {
  padding: 18px;

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid var(--border-light);

  border-radius: 14px;
}

.hero-benefits strong,
.hero-benefits span {
  display: block;
}

.hero-benefits strong {
  color: var(--navy-900);

  font-size: 1rem;
}

.hero-benefits span {
  color: var(--muted);

  font-size: 0.8rem;
}


/* HERO DEVICE */

.hero-visual {
  position: relative;

  min-height: 500px;

  display: grid;

  place-items: center;
}

.visual-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 121, 0, 0.20),
      rgba(43, 109, 243, 0.08) 45%,
      transparent 70%
    );

  filter: blur(10px);
}

.device-card {
  width:
    min(100%, 510px);

  position: relative;

  z-index: 2;

  background:
    rgba(255, 255, 255, 0.95);

  border:
    1px solid rgba(12, 36, 83, 0.10);

  border-radius: 28px;

  padding: 22px;

  box-shadow:
    0 35px 80px
    rgba(2, 16, 47, 0.16);
}

.device-top {
  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--muted);

  font-size: 0.77rem;

  font-weight: 750;
}

.live-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #12b981;

  box-shadow:
    0 0 0 5px
    rgba(18, 185, 129, 0.12);
}

.online {
  margin-left: auto;

  color: var(--green);

  background:
    #e8fbf4;

  padding:
    5px 9px;

  border-radius:
    999px;
}

.switch-preview {
  min-height: 340px;

  display: grid;

  place-items: center;

  margin-block: 20px;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #edf5ff,
      #fff4e8
    );
}

.smart-switch {
  width: 245px;
  height: 245px;

  padding: 23px;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #eef2f7
    );

  box-shadow:
    0 22px 40px
    rgba(5, 26, 67, 0.16);

  border:
    1px solid white;
}

.switch-brand {
  text-align: center;

  color: var(--navy-800);

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing: 0.1em;

  margin-bottom: 22px;
}

.switch-buttons {
  height: 160px;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 9px;
}

.switch-buttons span {
  border-radius: 13px;

  border:
    1px solid #dfe6ef;

  background:
    linear-gradient(
      145deg,
      #f8fafc,
      #e9edf3
    );

  box-shadow:
    inset 0 0 0 1px white;
}

.switch-buttons span:first-child {
  border-color:
    rgba(255, 122, 0, 0.3);

  box-shadow:
    inset 0 0 0 2px
    rgba(255, 122, 0, 0.08);
}

.device-info {
  display: flex;

  justify-content: space-between;

  gap: 20px;
}

.device-info small,
.device-info strong {
  display: block;
}

.device-info small {
  color: var(--muted);

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.device-info strong {
  color: var(--navy-900);

  font-size: 0.9rem;

  margin-top: 3px;
}

.status-ready {
  color: var(--green) !important;
}


/* SECTION GENERIC */

.categories-section,
.products-section,
.software-section,
.why-section,
.about-section {
  padding:
    95px 0;
}

.section-heading {
  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 40px;

  margin-bottom: 42px;
}

.section-heading p {
  color: var(--muted);

  max-width: 650px;

  margin: 0;
}

.section-heading.center {
  text-align: center;

  justify-content: center;
}

.text-link {
  white-space: nowrap;

  color: var(--blue-600);

  font-weight: 800;
}


/* CATEGORIES */

.categories-section {
  background: white;
}

.category-grid {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 16px;
}

.category-card {
  padding: 26px 22px;

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f9fbff
    );

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.category-card:hover {
  transform: translateY(-5px);

  border-color:
    #a9c7ff;

  box-shadow:
    var(--shadow);
}

.category-icon {
  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background:
    var(--surface-blue);

  color:
    var(--blue-600);

  font-size: 1.2rem;

  font-weight: 900;

  margin-bottom: 22px;
}

.category-card h3 {
  color: var(--navy-900);

  font-size: 1rem;
}

.category-card p {
  min-height: 58px;

  color: var(--muted);

  font-size: 0.83rem;
}

.category-card span {
  color: var(--blue-600);

  font-size: 0.84rem;

  font-weight: 800;
}


/* PRODUCTS */

.products-section {
  background: var(--surface);
}

.product-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;
}

.product-card {
  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    white;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.product-card:hover {
  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow);
}

.product-image {
  height: 240px;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;
}

.smart-switch-image {
  background:
    linear-gradient(
      145deg,
      #ecf4ff,
      #d7e8ff
    );
}

.relay-image {
  background:
    linear-gradient(
      145deg,
      #fff4e8,
      #ffe2c6
    );
}

.sensor-image {
  background:
    linear-gradient(
      145deg,
      #edf9f8,
      #d7f0ed
    );
}

.component-image {
  background:
    linear-gradient(
      145deg,
      #f3efff,
      #e2d9ff
    );
}

.badge {
  position: absolute;

  top: 15px;
  left: 15px;

  padding:
    6px 10px;

  border-radius:
    999px;

  color: white;

  background:
    var(--blue-600);

  font-size:
    0.65rem;

  font-weight: 850;

  letter-spacing:
    0.05em;
}

.badge-orange {
  background:
    var(--orange-600);
}

.product-illustration {
  width: 135px;
  height: 135px;

  display: grid;

  place-items: center;

  border-radius: 30px;

  color: white;

  background:
    linear-gradient(
      145deg,
      var(--navy-800),
      var(--blue-600)
    );

  font-size: 3.7rem;

  box-shadow:
    0 20px 40px
    rgba(8, 28, 68, 0.18);
}

.relay-image .product-illustration,
.component-image .product-illustration {
  background:
    linear-gradient(
      145deg,
      var(--orange-500),
      var(--orange-700)
    );
}

.product-body {
  padding:
    22px;
}

.product-category {
  margin-bottom:
    7px;

  color:
    var(--blue-600);

  font-size:
    0.67rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.product-card h3 {
  min-height:
    48px;

  color:
    var(--navy-900);

  font-size:
    1.02rem;

  margin-bottom:
    6px;
}

.product-sku {
  color:
    #8b97aa;

  font-size:
    0.72rem;
}

.product-rating {
  margin-top:
    13px;

  color:
    #f0a000;

  font-size:
    0.76rem;
}

.product-rating span {
  color:
    var(--muted);

  margin-left:
    5px;
}

.product-footer {
  margin-top:
    21px;

  padding-top:
    18px;

  border-top:
    1px solid var(--border-light);

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    15px;
}

.product-footer small,
.product-footer strong {
  display:
    block;
}

.product-footer small {
  color:
    var(--muted);

  font-size:
    0.68rem;
}

.product-footer strong {
  color:
    var(--navy-900);

  font-size:
    1.1rem;
}

.product-footer a {
  color:
    var(--blue-600);

  font-size:
    0.75rem;

  font-weight:
    800;
}


/* TECHNOLOGY */

.technology-banner {
  padding:
    95px 0;

  color:
    white;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 122, 0, 0.20),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--navy-950),
      var(--navy-800)
    );
}

.technology-grid {
  display:
    grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap:
    90px;

  align-items:
    center;
}

.technology-grid h2 {
  max-width:
    620px;
}

.technology-grid > div:first-child p {
  max-width:
    600px;

  color:
    #bac7dd;

  font-size:
    1.05rem;
}

.solution-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    14px;
}

.solution-grid div {
  padding:
    24px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, 0.06);
}

.solution-grid span {
  display:
    block;

  color:
    var(--orange-400);

  font-size:
    0.75rem;

  font-weight:
    900;

  margin-bottom:
    18px;
}

.solution-grid strong {
  display:
    block;

  font-size:
    1.05rem;

  margin-bottom:
    6px;
}

.solution-grid p {
  margin:
    0;

  color:
    #aebbd2;

  font-size:
    0.82rem;
}


/* SOFTWARE */

.software-section {
  background:
    white;
}

.software-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    center;

  gap:
    90px;
}

.software-card {
  padding:
    40px;

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      #eef5ff,
      #fff6ed
    );
}

.code-window {
  overflow:
    hidden;

  border-radius:
    18px;

  background:
    var(--navy-950);

  color:
    #8bd8ff;

  box-shadow:
    0 25px 50px
    rgba(4, 15, 39, 0.18);
}

.code-top {
  height:
    43px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 16px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.code-top span {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #ff6b61;
}

.code-top span:nth-child(2) {
  background:
    #ffbd38;
}

.code-top span:nth-child(3) {
  background:
    #2ac96d;
}

.code-window pre {
  margin:
    0;

  padding:
    38px;

  overflow:
    auto;

  font:
    600 0.84rem/2
    Consolas,
    monospace;
}

.software-copy p {
  color:
    var(--muted);

  font-size:
    1.03rem;
}

.service-list {
  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    11px;

  margin:
    28px 0;
}

.service-list div {
  padding:
    13px;

  border-radius:
    10px;

  background:
    var(--surface);

  font-size:
    0.83rem;

  font-weight:
    700;
}

.service-list span {
  color:
    var(--green);

  margin-right:
    5px;
}


/* WHY */

.why-section {
  background:
    var(--surface);
}

.why-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    17px;
}

.why-grid article {
  padding:
    30px;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);
}

.why-icon {
  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    var(--blue-600);

  background:
    var(--surface-blue);

  margin-bottom:
    22px;

  font-weight:
    900;
}

.why-grid h3 {
  font-size:
    1rem;
}

.why-grid p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.85rem;
}


/* ABOUT */

.about-section {
  border-top:
    1px solid var(--border-light);
}

.about-grid {
  display:
    grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    100px;

  align-items:
    start;
}

.about-grid p {
  color:
    var(--muted);

  font-size:
    1.03rem;
}


/* CONTACT */

.contact-section {
  padding:
    25px 0 90px;
}

.contact-card {
  min-height:
    270px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  padding:
    50px;

  border-radius:
    24px;

  color:
    white;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 122, 0, 0.28),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--navy-950),
      var(--navy-800)
    );
}

.contact-card h2 {
  font-size:
    clamp(2rem, 4vw, 3.2rem);
}

.contact-card p {
  max-width:
    670px;

  margin:
    0;

  color:
    #c1cce0;
}

.contact-actions {
  display:
    flex;

  gap:
    10px;

  flex-shrink:
    0;
}


/* FOOTER */

.footer {
  padding:
    70px 0 22px;

  color:
    white;

  background:
    var(--navy-950);
}

.footer-grid {
  display:
    grid;

  grid-template-columns:
    1.5fr
    repeat(3, 1fr);

  gap:
    55px;

  padding-bottom:
    55px;
}

.footer-brand img {
  width:
    260px;

  height:
    80px;

  object-fit:
    contain;

  object-position:
    left center;

  margin-bottom:
    14px;

  background:
    rgba(255, 255, 255, 0.96);

  padding:
    5px 12px;

  border-radius:
    10px;
}

.footer-brand p {
  max-width:
    390px;

  color:
    #aab7cc;
}

.footer h3 {
  font-size:
    0.9rem;

  margin-bottom:
    18px;
}

.footer-grid > div:not(.footer-brand) {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    10px;
}

.footer a,
.footer-grid p {
  color:
    #aab7cc;

  font-size:
    0.82rem;
}

.footer a:hover {
  color:
    white;
}

.footer-bottom {
  min-height:
    55px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #8391aa;

  font-size:
    0.75rem;
}

.footer-bottom p {
  margin:
    0;
}

.footer-bottom div {
  display:
    flex;

  gap:
    25px;
}


/* TABLET */

@media (max-width: 1180px) {

  .header-main {
    grid-template-columns:
      230px 1fr;
  }

  .header-actions {
    display:
      none;
  }

  .brand {
    max-width:
      210px;
  }

  .hero-grid {
    gap:
      40px;
  }

  .category-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .product-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* SMALL TABLET */

@media (max-width: 900px) {

  .topbar-center {
    display:
      none;
  }

  .header-main {
    min-height:
      auto;

    grid-template-columns:
      1fr;

    gap:
      14px;

    padding-block:
      14px;
  }

  .brand {
    max-width:
      230px;
  }

  .brand img {
    height:
      58px;
  }

  .main-nav {
    overflow-x:
      auto;

    gap:
      24px;

    white-space:
      nowrap;

    scrollbar-width:
      none;
  }

  .main-nav::-webkit-scrollbar {
    display:
      none;
  }

  .hero-grid {
    grid-template-columns:
      1fr;

    padding-block:
      60px;
  }

  .hero-copy {
    max-width:
      760px;
  }

  .hero-visual {
    min-height:
      430px;
  }

  .technology-grid,
  .software-grid,
  .about-grid {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }

  .contact-card {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* MOBILE */

@media (max-width: 650px) {

  .container {
    width:
      min(calc(100% - 28px), var(--max-width));
  }

  .topbar {
    font-size:
      0.7rem;
  }

  .topbar-inner {
    min-height:
      34px;
  }

  .topbar-inner p:first-child {
    text-align:
      center;

    width:
      100%;
  }

  .topbar a {
    display:
      none;
  }

  .site-header {
    position:
      relative;
  }

  .header-main {
    gap:
      10px;
  }

  .brand {
    max-width:
      205px;
  }

  .brand img {
    height:
      54px;
  }

  .search-box {
    grid-template-columns:
      1fr 50px;

    min-height:
      50px;
  }

  .search-box select {
    display:
      none;
  }

  .search-box input {
    min-width:
      0;
  }

  .main-nav {
    min-height:
      46px;

    font-size:
      0.78rem;
  }

  .hero-grid {
    min-height:
      auto;

    padding-block:
      48px;

    gap:
      40px;
  }

  .hero h1 {
    font-size:
      clamp(2.7rem, 14vw, 4.1rem);
  }

  .hero-description {
    font-size:
      0.98rem;
  }

  .hero-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .hero-actions .btn {
    width:
      100%;
  }

  .hero-benefits {
    grid-template-columns:
      repeat(2, 1fr);

    margin-top:
      30px;
  }

  .hero-visual {
    min-height:
      370px;
  }

  .device-card {
    padding:
      15px;

    border-radius:
      20px;
  }

  .switch-preview {
    min-height:
      275px;
  }

  .smart-switch {
    width:
      190px;

    height:
      190px;
  }

  .switch-buttons {
    height:
      115px;
  }

  .device-info {
    flex-direction:
      column;
  }

  .categories-section,
  .products-section,
  .software-section,
  .why-section,
  .about-section {
    padding:
      70px 0;
  }

  .section-heading {
    display:
      block;
  }

  .text-link {
    display:
      inline-block;

    margin-top:
      20px;
  }

  .category-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .category-card {
    padding:
      20px 16px;
  }

  .category-card p {
    min-height:
      auto;
  }

  .product-grid {
    grid-template-columns:
      1fr;
  }

  .product-image {
    height:
      260px;
  }

  .technology-banner {
    padding:
      70px 0;
  }

  .solution-grid {
    grid-template-columns:
      1fr;
  }

  .software-card {
    padding:
      18px;
  }

  .code-window pre {
    padding:
      22px 18px;

    font-size:
      0.72rem;
  }

  .service-list {
    grid-template-columns:
      1fr;
  }

  .why-grid {
    grid-template-columns:
      1fr;
  }

  .contact-card {
    padding:
      32px 25px;
  }

  .contact-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .footer-grid {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }

  .footer-bottom {
    padding-top:
      20px;

    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* VERY SMALL PHONES */

@media (max-width: 380px) {

  .container {
    width:
      min(calc(100% - 22px), var(--max-width));
  }

  .hero h1 {
    font-size:
      2.6rem;
  }

  .hero-benefits,
  .category-grid {
    grid-template-columns:
      1fr;
  }

  .category-card {
    min-height:
      auto;
  }

}