/* =========================================================
   CLOUDFORGE — MAIN STYLES
   ========================================================= */

/* =========================================================
   1. VARIABLES
   ========================================================= */

   :root {
    --bg-main: #041126;
    --bg-dark: #020a18;
    --bg-deep: #030d1f;
    --bg-card: rgba(8, 27, 57, 0.78);
    --bg-card-strong: rgba(9, 31, 65, 0.94);
    --bg-soft: rgba(12, 39, 77, 0.48);
  
    --text-main: #f3f8ff;
    --text-soft: #c1cee0;
    --text-muted: #8296b4;
    --text-dark: #041126;
  
    --cyan: #16d6ff;
    --cyan-light: #72eaff;
    --blue: #2476ff;
    --blue-light: #5b9cff;
    --purple: #9e5cff;
    --purple-light: #c878ff;
  
    --success: #29df9c;
    --error: #ff5978;
  
    --border: rgba(106, 170, 255, 0.16);
    --border-strong: rgba(45, 193, 255, 0.36);
    --border-purple: rgba(157, 92, 255, 0.35);
  
    --shadow-card:
      0 24px 80px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
  
    --shadow-cyan:
      0 0 18px rgba(22, 214, 255, 0.3),
      0 0 48px rgba(36, 118, 255, 0.18);
  
    --shadow-purple:
      0 0 18px rgba(158, 92, 255, 0.25),
      0 0 42px rgba(158, 92, 255, 0.12);
  
    --container: 1180px;
    --header-height: 84px;
  
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-xl: 34px;
  
    --transition: 220ms ease;
  }
  
  
  /* =========================================================
     2. RESET
     ========================================================= */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
  }
  
  body {
    margin: 0;
    min-width: 320px;
    font-family: "Manrope", sans-serif;
    color: var(--text-main);
    background: var(--bg-main);
    line-height: 1.6;
    overflow-x: hidden;
  }
  
  body.menu-open,
  body.popup-open {
    overflow: hidden;
  }
  
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  
  button,
  input,
  textarea {
    font: inherit;
  }
  
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    border: 0;
  }
  
  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }
  
  h1,
  h2,
  h3 {
    font-family: "Space Grotesk", sans-serif;
    line-height: 1.12;
  }
  
  p:last-child {
    margin-bottom: 0;
  }
  
  ::selection {
    color: #02101d;
    background: var(--cyan-light);
  }
  
  
  /* =========================================================
     3. GLOBAL LAYOUT
     ========================================================= */
  
  .container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
    position: relative;
    z-index: 2;
  }
  
  .section {
    position: relative;
    padding: 112px 0;
    border-top: 1px solid rgba(119, 172, 255, 0.08);
  }
  
  .section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        circle at 20% 10%,
        rgba(29, 133, 255, 0.06),
        transparent 28%
      );
  }
  
  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--cyan-light);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  
  .section-label::before {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan), transparent);
    box-shadow: 0 0 10px rgba(22, 214, 255, 0.5);
  }
  
  .section-heading {
    max-width: 720px;
    margin-bottom: 52px;
  }
  
  .section-heading--center {
    margin-inline: auto;
    text-align: center;
  }
  
  .section-heading--center .section-label {
    justify-content: center;
  }
  
  .section-heading--center .section-label::after {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
  }
  
  .section-heading h2,
  .about__content h2,
  .contact__content h2 {
    margin-bottom: 22px;
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -0.045em;
  }
  
  .section-heading h2 span,
  .about__content h2 span,
  .contact__content h2 span {
    color: var(--cyan);
  }
  
  .section-heading p {
    max-width: 640px;
    margin-inline: auto;
    color: var(--text-soft);
    font-size: 1.04rem;
  }
  
  
  /* =========================================================
     4. BACKGROUND
     ========================================================= */
  
  .site-background {
    position: fixed;
    inset: 0;
    z-index: -5;
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(
        circle at 74% 9%,
        rgba(33, 87, 205, 0.18),
        transparent 32%
      ),
      radial-gradient(
        circle at 12% 40%,
        rgba(13, 180, 255, 0.08),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        #031022 0%,
        #05152f 48%,
        #020b1b 100%
      );
  }
  
  .site-background__grid {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
      linear-gradient(rgba(93, 154, 235, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(93, 154, 235, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 0.25) 70%,
        transparent
      );
  }
  
  .site-background__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.26;
  }
  
  .site-background__glow--one {
    width: 460px;
    height: 460px;
    top: 7%;
    right: -120px;
    background: var(--blue);
  }
  
  .site-background__glow--two {
    width: 380px;
    height: 380px;
    top: 55%;
    left: -180px;
    background: var(--purple);
  }
  
  
  /* =========================================================
     5. HEADER
     ========================================================= */
  
  .header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    min-height: var(--header-height);
    border-bottom: 1px solid rgba(127, 176, 255, 0.08);
    background: rgba(3, 13, 31, 0.72);
    backdrop-filter: blur(20px);
    transition:
      background var(--transition),
      box-shadow var(--transition);
  }
  
  .header.is-scrolled {
    background: rgba(2, 10, 24, 0.92);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  }
  
  .header__inner {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
  
  .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.brand__logo {
    display: block;
    width: 255px;
    height: auto;
    transition: transform .25s ease;
}

.brand:hover .brand__logo {
    transform: scale(1.02);
}

.brand--footer .brand__logo {
    width: 220px;
}
  
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: auto;
  }
  
  .desktop-nav a {
    position: relative;
    color: var(--text-soft);
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color var(--transition);
  }
  
  .desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(22, 214, 255, 0.75);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
  }
  
  .desktop-nav a:hover {
    color: var(--text-main);
  }
  
  .desktop-nav a:hover::after {
    transform: scaleX(1);
  }
  
  .menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(13, 35, 69, 0.78);
    cursor: pointer;
  }
  
  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 10px;
    background: var(--text-main);
    transition:
      transform var(--transition),
      opacity var(--transition);
  }
  
  .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .mobile-nav {
    display: none;
  }
  
  
  /* =========================================================
     6. BUTTONS
     ========================================================= */
  
  .button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      transform var(--transition),
      color var(--transition),
      border-color var(--transition),
      background var(--transition),
      box-shadow var(--transition);
  }
  
  .button svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .button:hover {
    transform: translateY(-2px);
  }
  
  .button--primary,
  .button--header {
    color: #001322;
    background:
      linear-gradient(
        135deg,
        var(--cyan-light),
        var(--cyan) 46%,
        #178cff
      );
    box-shadow:
      0 10px 30px rgba(22, 214, 255, 0.17),
      0 0 0 rgba(22, 214, 255, 0);
  }
  
  .button--primary:hover,
  .button--header:hover {
    box-shadow:
      0 16px 38px rgba(22, 214, 255, 0.24),
      0 0 28px rgba(22, 214, 255, 0.18);
  }
  
  .button--header {
    min-height: 43px;
    padding-inline: 20px;
  }
  
  .button--secondary {
    color: var(--text-main);
    border-color: rgba(91, 156, 255, 0.27);
    background: rgba(10, 34, 70, 0.58);
  }
  
  .button--secondary:hover {
    border-color: rgba(22, 214, 255, 0.48);
    background: rgba(13, 43, 85, 0.88);
  }
  
  
  /* =========================================================
     7. HERO
     ========================================================= */
  
  .hero {
    position: relative;
    min-height: 760px;
    padding: 154px 0 92px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(109, 161, 243, 0.1);
    overflow: hidden;
  }
  
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        circle at 78% 48%,
        rgba(36, 118, 255, 0.13),
        transparent 29%
      ),
      linear-gradient(
        90deg,
        rgba(3, 13, 31, 0.55),
        transparent 65%
      );
  }
  
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(450px, 1.1fr);
    align-items: center;
    gap: 46px;
  }
  
  .hero__content {
    position: relative;
    z-index: 5;
    max-width: 610px;
  }
  
  .hero h1 {
    margin-bottom: 24px;
    font-size: clamp(3rem, 5.5vw, 5.3rem);
    letter-spacing: -0.057em;
    line-height: 0.98;
  }
  
  .hero h1 span {
    display: block;
    margin-top: 10px;
    color: transparent;
    background:
      linear-gradient(
        90deg,
        var(--cyan),
        #42aaff,
        var(--purple-light)
      );
    background-clip: text;
    -webkit-background-clip: text;
  }
  
  .hero__description {
    max-width: 590px;
    margin-bottom: 34px;
    color: var(--text-soft);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
  }
  
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 42px;
  }
  
  .hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }
  
  .hero-feature {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.35;
  }
  
  .hero-feature strong {
    display: block;
    color: var(--text-main);
    font-weight: 700;
  }
  
  .hero-feature__icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(22, 214, 255, 0.22);
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(7, 33, 69, 0.58);
  }
  
  .hero-feature__icon svg {
    width: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  
  /* =========================================================
     8. HERO VISUAL
     ========================================================= */
  
  .hero-visual {
    position: relative;
    min-height: 540px;
    isolation: isolate;
    perspective: 1000px;
  }
  
  .hero-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 55%;
    width: 510px;
    height: 310px;
    border: 1px solid rgba(73, 144, 255, 0.18);
    background:
      linear-gradient(rgba(57, 128, 221, 0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(57, 128, 221, 0.12) 1px, transparent 1px),
      linear-gradient(
        135deg,
        rgba(11, 41, 81, 0.55),
        rgba(4, 20, 47, 0.25)
      );
    background-size: 34px 34px, 34px 34px, auto;
    transform:
      translate(-50%, -50%)
      rotateX(62deg)
      rotateZ(-45deg);
    box-shadow:
      inset 0 0 80px rgba(25, 113, 255, 0.08),
      0 30px 80px rgba(0, 0, 0, 0.3);
    opacity: 0.86;
  }
  
  .hero-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 53%;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: rgba(22, 214, 255, 0.11);
    filter: blur(80px);
    transform: translate(-50%, -50%);
  }
  
  .cloud-core {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 48%;
    width: 260px;
    height: 210px;
    display: grid;
    place-items: center;
    color: var(--cyan-light);
    transform: translate(-50%, -50%);
    filter:
      drop-shadow(0 0 10px rgba(22, 214, 255, 0.65))
      drop-shadow(0 0 40px rgba(31, 101, 255, 0.48));
  }
  
  .cloud-core::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 160px;
    height: 70px;
    border: 1px solid rgba(22, 214, 255, 0.42);
    background:
      linear-gradient(
        135deg,
        rgba(11, 71, 123, 0.92),
        rgba(4, 28, 66, 0.94)
      );
    transform:
      translateX(-50%)
      rotateX(62deg)
      rotateZ(-45deg);
    box-shadow:
      0 0 26px rgba(22, 214, 255, 0.28),
      0 18px 35px rgba(0, 0, 0, 0.4),
      inset 0 0 30px rgba(22, 214, 255, 0.1);
  }
  
  .cloud-core svg {
    position: relative;
    z-index: 3;
    width: 190px;
    overflow: visible;
  }
  
  .cloud-core svg path,
  .cloud-core svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .cloud-core__glow {
    position: absolute;
    inset: 16% 6%;
    border-radius: 50%;
    background:
      radial-gradient(
        circle,
        rgba(22, 214, 255, 0.26),
        rgba(44, 98, 255, 0.1) 45%,
        transparent 70%
      );
    filter: blur(15px);
    animation: cloudPulse 4.5s ease-in-out infinite;
  }
  
  .hero-visual__orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(74, 129, 255, 0.18);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(68deg);
  }
  
  .hero-visual__orbit--one {
    width: 410px;
    height: 250px;
  }
  
  .hero-visual__orbit--two {
    width: 520px;
    height: 330px;
    border-color: rgba(155, 89, 255, 0.15);
  }
  
  .infrastructure-node {
    position: absolute;
    z-index: 7;
    width: 85px;
    min-height: 128px;
    padding: 14px 12px;
    border: 1px solid rgba(79, 152, 255, 0.54);
    border-radius: 7px;
    background:
      linear-gradient(
        145deg,
        rgba(20, 67, 126, 0.95),
        rgba(5, 25, 61, 0.98)
      );
    box-shadow:
      0 0 20px rgba(23, 124, 255, 0.24),
      inset 0 0 26px rgba(22, 214, 255, 0.07),
      10px 18px 45px rgba(0, 0, 0, 0.38);
    transform: skewY(-7deg);
  }
  
  .infrastructure-node::before {
    content: "";
    position: absolute;
    inset: -8px 7px auto;
    height: 14px;
    border: 1px solid rgba(82, 148, 255, 0.48);
    background: rgba(12, 46, 95, 0.96);
    transform: skewY(7deg);
  }
  
  .infrastructure-node span {
    display: block;
    height: 16px;
    margin: 8px 0;
    border: 1px solid rgba(29, 184, 255, 0.38);
    background:
      linear-gradient(
        90deg,
        rgba(22, 214, 255, 0.12),
        rgba(45, 110, 255, 0.42),
        rgba(18, 49, 98, 0.7)
      );
    box-shadow: inset 0 0 8px rgba(22, 214, 255, 0.12);
  }
  
  .infrastructure-node--one {
    left: 7%;
    top: 27%;
  }
  
  .infrastructure-node--two {
    right: 7%;
    top: 17%;
    transform: scale(0.86) skewY(-7deg);
  }
  
  .infrastructure-node--three {
    right: 2%;
    bottom: 7%;
    transform: scale(0.72) skewY(-7deg);
  }
  
  .visual-connector {
    position: absolute;
    z-index: 4;
    height: 1px;
    background:
      linear-gradient(
        90deg,
        transparent,
        var(--blue-light),
        var(--cyan),
        transparent
      );
    box-shadow: 0 0 12px rgba(22, 214, 255, 0.7);
    transform-origin: left;
  }
  
  .visual-connector--one {
    left: 23%;
    top: 45%;
    width: 175px;
    transform: rotate(17deg);
  }
  
  .visual-connector--two {
    left: 54%;
    top: 42%;
    width: 185px;
    transform: rotate(-20deg);
  }
  
  .visual-connector--three {
    left: 52%;
    top: 62%;
    width: 205px;
    transform: rotate(24deg);
    background:
      linear-gradient(
        90deg,
        transparent,
        var(--purple),
        var(--blue-light),
        transparent
      );
  }
  
  .visual-point {
    position: absolute;
    z-index: 9;
    width: 10px;
    height: 10px;
    border: 2px solid var(--cyan-light);
    border-radius: 50%;
    background: var(--bg-main);
    box-shadow:
      0 0 12px rgba(22, 214, 255, 0.85),
      0 0 30px rgba(22, 214, 255, 0.4);
    animation: pointPulse 2.8s ease-in-out infinite;
  }
  
  .visual-point--one {
    left: 21%;
    top: 39%;
  }
  
  .visual-point--two {
    right: 18%;
    top: 34%;
    animation-delay: -0.7s;
  }
  
  .visual-point--three {
    left: 26%;
    bottom: 20%;
    border-color: var(--purple-light);
    animation-delay: -1.4s;
  }
  
  .visual-point--four {
    right: 8%;
    bottom: 17%;
    animation-delay: -2.1s;
  }
  
  
  /* =========================================================
     9. SERVICES
     ========================================================= */
  
  .services {
    background:
      linear-gradient(
        180deg,
        rgba(7, 27, 58, 0.44),
        rgba(3, 13, 31, 0.12)
      );
  }
  
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  
  .service-card {
    position: relative;
    min-height: 320px;
    padding: 32px 28px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background:
      linear-gradient(
        145deg,
        rgba(10, 36, 74, 0.82),
        rgba(4, 19, 43, 0.86)
      );
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition:
      transform var(--transition),
      border-color var(--transition),
      box-shadow var(--transition);
  }
  
  .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        circle at 15% 10%,
        rgba(22, 214, 255, 0.1),
        transparent 35%
      );
    opacity: 0;
    transition: opacity var(--transition);
  }
  
  .service-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background:
      linear-gradient(
        90deg,
        transparent,
        var(--cyan),
        var(--blue),
        transparent
      );
    transform: scaleX(0);
    transition: transform var(--transition);
  }
  
  .service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(22, 214, 255, 0.35);
    box-shadow:
      0 28px 65px rgba(0, 0, 0, 0.32),
      0 0 30px rgba(22, 214, 255, 0.08);
  }
  
  .service-card:hover::before {
    opacity: 1;
  }
  
  .service-card:hover::after {
    transform: scaleX(1);
  }
  
  .service-card__icon {
    position: relative;
    z-index: 2;
    width: 55px;
    height: 55px;
    margin-bottom: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(42, 185, 255, 0.28);
    border-radius: 14px;
    color: var(--cyan);
    background:
      linear-gradient(
        145deg,
        rgba(16, 72, 127, 0.76),
        rgba(8, 34, 76, 0.64)
      );
    box-shadow:
      inset 0 0 18px rgba(22, 214, 255, 0.07),
      0 0 20px rgba(22, 214, 255, 0.06);
  }
  
  .service-card__icon svg {
    width: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .service-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
    font-size: 1.28rem;
  }
  
  .service-card p {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
  }
  
  .service-card__number {
    position: absolute;
    right: 22px;
    bottom: 17px;
    color: rgba(96, 160, 239, 0.16);
    font-family: "Space Grotesk", sans-serif;
    font-size: 3rem;
    font-weight: 700;
  }
  
  
  /* =========================================================
     10. CLIENT NEEDS
     ========================================================= */
  
  .client-needs {
    background:
      linear-gradient(
        180deg,
        rgba(3, 14, 33, 0.4),
        rgba(8, 28, 60, 0.36)
      );
  }
  
  .needs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }
  
  .need-item {
    position: relative;
    min-height: 210px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    padding: 32px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(7, 27, 57, 0.32);
    transition:
      background var(--transition),
      box-shadow var(--transition);
  }
  
  .need-item:hover {
    background: rgba(10, 38, 77, 0.62);
    box-shadow: inset 0 0 40px rgba(22, 214, 255, 0.04);
  }
  
  .need-item__index {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(22, 214, 255, 0.26);
    border-radius: 50%;
    color: var(--cyan);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    background: rgba(8, 37, 75, 0.6);
    box-shadow: 0 0 18px rgba(22, 214, 255, 0.08);
  }
  
  .need-item h3 {
    margin-bottom: 10px;
    font-size: 1.16rem;
  }
  
  .need-item p {
    color: var(--text-soft);
    font-size: 0.91rem;
  }
  
  
  /* =========================================================
     11. EXPERTISE
     ========================================================= */
  
  .expertise {
    overflow: hidden;
  }
  
  .expertise::after {
    content: "";
    position: absolute;
    right: -140px;
    top: 20%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(108, 61, 255, 0.09);
    filter: blur(90px);
    pointer-events: none;
  }
  
  .expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  
  .expertise-card {
    position: relative;
    min-height: 205px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background:
      linear-gradient(
        150deg,
        rgba(9, 35, 73, 0.78),
        rgba(5, 20, 47, 0.68)
      );
    overflow: hidden;
    transition:
      transform var(--transition),
      border-color var(--transition);
  }
  
  .expertise-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background:
      linear-gradient(
        180deg,
        var(--cyan),
        var(--blue),
        var(--purple)
      );
    opacity: 0.75;
  }
  
  .expertise-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -45px;
    bottom: -55px;
    border: 1px solid rgba(57, 136, 255, 0.12);
    border-radius: 50%;
  }
  
  .expertise-card:hover {
    transform: translateY(-5px);
    border-color: rgba(95, 161, 255, 0.35);
  }
  
  .expertise-card h3 {
    margin-bottom: 14px;
    font-size: 1.2rem;
  }
  
  .expertise-card p {
    color: var(--text-soft);
    font-size: 0.92rem;
  }
  
  
  /* =========================================================
     12. PROCESS
     ========================================================= */
  
  .process {
    background:
      linear-gradient(
        180deg,
        rgba(8, 30, 63, 0.38),
        rgba(3, 13, 31, 0.2)
      );
  }
  
  .process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
  }
  
  .process-grid::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 8%;
    right: 8%;
    height: 1px;
    background:
      linear-gradient(
        90deg,
        var(--cyan),
        var(--blue),
        var(--purple),
        var(--purple-light)
      );
    opacity: 0.42;
    box-shadow: 0 0 12px rgba(88, 113, 255, 0.5);
  }
  
  .process-step {
    position: relative;
    z-index: 2;
  }
  
  .process-step__number {
    width: 65px;
    height: 65px;
    margin-bottom: 26px;
    display: grid;
    place-items: center;
    border: 2px solid var(--cyan);
    border-radius: 50%;
    color: var(--cyan-light);
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--bg-main);
    box-shadow:
      0 0 20px rgba(22, 214, 255, 0.28),
      inset 0 0 18px rgba(22, 214, 255, 0.08);
  }
  
  .process-step:nth-child(2) .process-step__number {
    border-color: var(--blue-light);
    color: var(--blue-light);
    box-shadow:
      0 0 20px rgba(91, 156, 255, 0.3),
      inset 0 0 18px rgba(91, 156, 255, 0.08);
  }
  
  .process-step:nth-child(3) .process-step__number {
    border-color: var(--purple);
    color: var(--purple-light);
    box-shadow:
      0 0 20px rgba(158, 92, 255, 0.3),
      inset 0 0 18px rgba(158, 92, 255, 0.08);
  }
  
  .process-step:nth-child(4) .process-step__number {
    border-color: var(--purple-light);
    color: #e1a8ff;
    box-shadow:
      0 0 20px rgba(200, 120, 255, 0.3),
      inset 0 0 18px rgba(200, 120, 255, 0.08);
  }
  
  .process-step h3 {
    margin-bottom: 11px;
    font-size: 1.18rem;
  }
  
  .process-step p {
    color: var(--text-soft);
    font-size: 0.9rem;
  }
  
  
  /* =========================================================
     13. ABOUT
     ========================================================= */
  
  .about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.84fr);
    gap: 80px;
    align-items: center;
  }
  
  .about__content > p {
    max-width: 650px;
    color: var(--text-soft);
    font-size: 1rem;
  }
  
  .about__values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
  }
  
  .about__values span {
    position: relative;
    padding: 10px 14px 10px 34px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-soft);
    background: rgba(9, 34, 69, 0.58);
    font-size: 0.82rem;
  }
  
  .about__values span::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid var(--cyan);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(22, 214, 255, 0.7);
  }
  
  .about-panel {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(76, 153, 255, 0.24);
    border-radius: var(--radius-large);
    background:
      linear-gradient(
        145deg,
        rgba(12, 42, 84, 0.92),
        rgba(4, 18, 43, 0.92)
      );
    box-shadow:
      0 35px 85px rgba(0, 0, 0, 0.28),
      inset 0 0 45px rgba(22, 214, 255, 0.03);
  }
  
  .about-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background:
      linear-gradient(
        135deg,
        rgba(22, 214, 255, 0.28),
        transparent 35%,
        transparent 65%,
        rgba(158, 92, 255, 0.23)
      );
  }
  
  .about-panel__line {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 20px;
    padding: 19px 14px;
    border-bottom: 1px solid rgba(110, 166, 245, 0.12);
  }
  
  .about-panel__line span {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }
  
  .about-panel__line strong {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
  }
  
  .about-panel__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 10px 8px;
    padding: 13px 15px;
    border: 1px solid rgba(41, 223, 156, 0.18);
    border-radius: 10px;
    color: #9cf1ca;
    background: rgba(20, 103, 73, 0.16);
    font-size: 0.82rem;
  }
  
  .about-panel__status span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 13px rgba(41, 223, 156, 0.85);
    animation: statusPulse 2.2s ease-in-out infinite;
  }
  
  
  /* =========================================================
     14. CONTACT
     ========================================================= */
  
  .contact {
    background:
      radial-gradient(
        circle at 15% 40%,
        rgba(19, 138, 255, 0.08),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(7, 28, 59, 0.4),
        rgba(3, 13, 31, 0.5)
      );
  }
  
  .contact__inner {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 72px;
    align-items: start;
  }
  
  .contact__content {
    position: sticky;
    top: 120px;
  }
  
  .contact__content p {
    color: var(--text-soft);
    margin-bottom: 28px;
  }
  
  .contact-email {
    display: inline-flex;
    align-items: center;
    color: var(--cyan-light);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 600;
    word-break: break-word;
    transition:
      color var(--transition),
      text-shadow var(--transition);
  }
  
  .contact-email:hover {
    color: #fff;
    text-shadow: 0 0 18px rgba(22, 214, 255, 0.58);
  }
  
  .contact-form {
    position: relative;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
      linear-gradient(
        145deg,
        rgba(10, 38, 78, 0.9),
        rgba(4, 19, 44, 0.9)
      );
    box-shadow: var(--shadow-card);
  }
  
  .contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  
  .form-field {
    margin-bottom: 18px;
  }
  
  .form-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.035em;
  }
  
  .form-field input,
  .form-field textarea {
    width: 100%;
    border: 1px solid rgba(99, 160, 243, 0.2);
    border-radius: 9px;
    outline: none;
    color: var(--text-main);
    background: rgba(2, 14, 34, 0.58);
    transition:
      border-color var(--transition),
      background var(--transition),
      box-shadow var(--transition);
  }
  
  .form-field input {
    min-height: 50px;
    padding: 0 15px;
  }
  
  .form-field textarea {
    min-height: 180px;
    padding: 14px 15px;
    resize: vertical;
  }
  
  .form-field input:hover,
  .form-field textarea:hover {
    border-color: rgba(87, 162, 255, 0.36);
  }
  
  .form-field input:focus,
  .form-field textarea:focus {
    border-color: var(--cyan);
    background: rgba(3, 19, 44, 0.92);
    box-shadow:
      0 0 0 3px rgba(22, 214, 255, 0.08),
      0 0 22px rgba(22, 214, 255, 0.06);
  }
  
  .form-field input.is-invalid,
  .form-field textarea.is-invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(255, 89, 120, 0.08);
  }
  
  .form-field--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  
  .contact-form__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 6px;
  }
  
  .contact-form__bottom p {
    max-width: 470px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
  }
  
  .form-status {
    min-height: 24px;
    margin-top: 16px;
    font-size: 0.82rem;
  }
  
  .form-status.is-success {
    color: var(--success);
  }
  
  .form-status.is-error {
    color: var(--error);
  }
  
  
  /* =========================================================
     15. FOOTER
     ========================================================= */
  
  .footer {
    position: relative;
    padding: 70px 0 24px;
    border-top: 1px solid rgba(112, 165, 245, 0.12);
    background:
      linear-gradient(
        180deg,
        rgba(2, 11, 27, 0.96),
        #020814
      );
  }
  
  .footer__top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.8fr 0.6fr;
    gap: 40px;
    padding-bottom: 46px;
  }
  
  .brand--footer {
    align-self: start;
  }
  
  .footer h3 {
    margin-bottom: 16px;
    color: var(--text-main);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  
  .footer p,
  .footer a {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
  }
  
  .footer a {
    width: fit-content;
    transition: color var(--transition);
  }
  
  .footer a:hover {
    color: var(--cyan-light);
  }
  
  .footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(108, 159, 239, 0.12);
  }
  
  .footer__bottom p {
    margin: 0;
  }
  
  
  /* =========================================================
     16. FORM POPUP
     ========================================================= */
  
  .form-popup[hidden] {
    display: none;
  }
  
  .form-popup {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 20px;
  }
  
  .form-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 5, 14, 0.82);
    backdrop-filter: blur(9px);
  }
  
  .form-popup__content {
    position: relative;
    z-index: 2;
    width: min(100%, 470px);
    padding: 42px 34px 34px;
    border: 1px solid rgba(66, 171, 255, 0.36);
    border-radius: var(--radius-large);
    text-align: center;
    background:
      linear-gradient(
        150deg,
        rgba(13, 48, 94, 0.98),
        rgba(3, 17, 41, 0.99)
      );
    box-shadow:
      0 35px 90px rgba(0, 0, 0, 0.5),
      0 0 48px rgba(22, 214, 255, 0.1);
    animation: popupIn 250ms ease;
  }
  
  .form-popup__close {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--text-soft);
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition:
      color var(--transition),
      background var(--transition);
  }
  
  .form-popup__close:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
  }
  
  .form-popup__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border: 2px solid var(--success);
    border-radius: 50%;
    color: var(--success);
    box-shadow: 0 0 24px rgba(41, 223, 156, 0.24);
  }
  
  .form-popup__icon::before {
    content: "✓";
    font-size: 2rem;
    font-weight: 700;
  }
  
  .form-popup__icon.is-error {
    border-color: var(--error);
    color: var(--error);
    box-shadow: 0 0 24px rgba(255, 89, 120, 0.2);
  }
  
  .form-popup__icon.is-error::before {
    content: "!";
  }
  
  .form-popup__content h2 {
    margin-bottom: 12px;
    font-size: 1.8rem;
  }
  
  .form-popup__content p {
    margin-bottom: 26px;
    color: var(--text-soft);
  }
  
  
  /* =========================================================
     17. ANIMATIONS
     ========================================================= */
  
  @keyframes cloudPulse {
    0%,
    100% {
      opacity: 0.58;
      transform: scale(0.94);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }
  
  @keyframes pointPulse {
    0%,
    100% {
      transform: scale(0.8);
      opacity: 0.6;
    }
  
    50% {
      transform: scale(1.25);
      opacity: 1;
    }
  }
  
  @keyframes statusPulse {
    0%,
    100% {
      opacity: 0.6;
    }
  
    50% {
      opacity: 1;
    }
  }
  
  @keyframes popupIn {
    from {
      opacity: 0;
      transform: translateY(15px) scale(0.97);
    }
  
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  
  /* =========================================================
     18. LARGE TABLET
     ========================================================= */
  
  @media (max-width: 1080px) {
    :root {
      --container: 940px;
    }
  
    .desktop-nav {
      gap: 20px;
    }
  
    .button--header {
      display: none;
    }
  
    .hero__inner {
      grid-template-columns: minmax(0, 1fr) minmax(390px, 0.92fr);
    }
  
    .hero-visual {
      transform: scale(0.9);
      transform-origin: center right;
    }
  
    .services-grid,
    .expertise-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .about__inner,
    .contact__inner {
      gap: 48px;
    }
  
    .footer__top {
      grid-template-columns: 1.2fr 1fr 0.8fr;
    }
  
    .footer__links {
      grid-column: 2;
    }
  }
  
  
  /* =========================================================
     19. TABLET
     ========================================================= */
  
  @media (max-width: 860px) {
    :root {
      --header-height: 74px;
    }
  
    .container {
      width: min(calc(100% - 32px), var(--container));
    }
  
    .section {
      padding: 88px 0;
    }
  
    .desktop-nav {
      display: none;
    }
  
    .menu-toggle {
      display: block;
    }
  
    .mobile-nav {
      position: fixed;
      top: var(--header-height);
      left: 16px;
      right: 16px;
      display: flex;
      flex-direction: column;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(3, 16, 39, 0.98);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px);
      transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
    }
  
    .mobile-nav.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  
    .mobile-nav a {
      padding: 14px;
      border-bottom: 1px solid rgba(99, 157, 237, 0.1);
      color: var(--text-soft);
      font-size: 0.87rem;
      font-weight: 700;
      text-transform: uppercase;
    }
  
    .mobile-nav a:last-child {
      border-bottom: 0;
    }
  
    .hero {
      min-height: auto;
      padding: 132px 0 70px;
    }
  
    .hero__inner {
      grid-template-columns: 1fr;
    }
  
    .hero__content {
      max-width: 700px;
    }
  
    .hero-visual {
      width: min(100%, 650px);
      min-height: 510px;
      margin-inline: auto;
      transform: none;
    }
  
    .process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 52px;
    }
  
    .process-grid::before {
      display: none;
    }
  
    .about__inner,
    .contact__inner {
      grid-template-columns: 1fr;
    }
  
    .about-panel {
      max-width: 650px;
    }
  
    .contact__content {
      position: static;
      max-width: 650px;
    }
  
    .footer__top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .footer__links {
      grid-column: auto;
    }
  }
  
  
  /* =========================================================
     20. MOBILE
     ========================================================= */
  
  @media (max-width: 640px) {
    .container {
      width: min(calc(100% - 24px), var(--container));
    }
  
    .section {
      padding: 74px 0;
    }
  
    .header__inner {
      gap: 15px;
    }
  
    .brand__logo {
        width: 190px;
    }
    
    .brand--footer .brand__logo {
        width: 180px;
    }
  
    .hero {
      padding-top: 118px;
    }
  
    .hero h1 {
      font-size: clamp(2.7rem, 13vw, 4rem);
    }
  
    .hero__actions {
      flex-direction: column;
      align-items: stretch;
    }
  
    .hero__actions .button {
      width: 100%;
    }
  
    .hero__features {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
  
    .hero-visual {
      min-height: 400px;
      margin-top: -20px;
      transform: scale(0.77);
      transform-origin: top center;
      margin-bottom: -85px;
    }
  
    .hero-visual::before {
      width: 430px;
      height: 270px;
    }
  
    .services-grid,
    .expertise-grid,
    .needs-grid,
    .process-grid {
      grid-template-columns: 1fr;
    }
  
    .service-card {
      min-height: auto;
    }
  
    .need-item {
      grid-template-columns: 55px 1fr;
      padding: 25px 20px;
    }
  
    .process-step {
      padding-left: 84px;
      min-height: 110px;
    }
  
    .process-step__number {
      position: absolute;
      left: 0;
      top: 0;
      width: 60px;
      height: 60px;
      margin: 0;
    }
  
    .about__inner,
    .contact__inner {
      gap: 42px;
    }
  
    .about-panel__line {
      grid-template-columns: 1fr;
      gap: 5px;
    }
  
    .about-panel__line strong {
      text-align: left;
    }
  
    .contact-form {
      padding: 24px 18px;
    }
  
    .contact-form__row {
      grid-template-columns: 1fr;
      gap: 0;
    }
  
    .contact-form__bottom {
      align-items: stretch;
      flex-direction: column;
    }
  
    .contact-form__bottom .button {
      width: 100%;
    }
  
    .footer__top {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    .footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }
  }
  
  
  /* =========================================================
     21. SMALL MOBILE
     ========================================================= */
  
  @media (max-width: 420px) {
    .brand__owner {
      display: none;
    }
  
    .hero h1 {
      font-size: 2.55rem;
    }
  
    .hero__description {
      font-size: 0.95rem;
    }
  
    .hero-visual {
      transform: scale(0.66);
      margin-bottom: -125px;
    }
  
    .section-heading h2,
    .about__content h2,
    .contact__content h2 {
      font-size: 2rem;
    }
  
    .service-card,
    .expertise-card {
      padding: 24px 21px;
    }
  
    .need-item {
      grid-template-columns: 1fr;
    }
  
    .about__values {
      flex-direction: column;
    }
  
    .about__values span {
      width: 100%;
    }
  }
  
  
  /* =========================================================
     22. ACCESSIBILITY
     ========================================================= */
  
  :focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  .desktop-nav a.is-current {
    color: var(--text-main);
  }
  
  .desktop-nav a.is-current::after {
    transform: scaleX(1);
  }
  
  .mobile-nav a.is-current {
    color: var(--cyan-light);
  }