@font-face {
      font-family: "Estedad";
      src: url("fonts/Estedad-Regular.woff2") format("woff2");
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: "Estedad";
      src: url("fonts/Estedad-Bold.woff2") format("woff2");
      font-weight: 700 900;
      font-display: swap;
    }

    :root {
      --ink: #f7fbff;
      --muted: #8799ad;
      --bg: #020711;
      --panel: rgba(5, 15, 31, .78);
      --panel-strong: rgba(6, 17, 36, .96);
      --line: rgba(38, 174, 255, .24);
      --line-hot: rgba(148, 82, 255, .45);
      --cyan: #20c7ff;
      --blue: #1687ff;
      --violet: #9358ff;
      --rose: #d95cff;
      --lime: #26d9b7;
      --amber: #ffc65c;
      --red: #ff5577;
      --radius: 18px;
      --shadow: 0 22px 80px rgba(0, 0, 0, .42);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% 0, rgba(18, 95, 214, .18), transparent 30%),
        linear-gradient(180deg, #030814 0, #020711 45%, #01040b 100%);
      font-family: "Estedad", Tahoma, Arial, sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(24, 216, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 216, 255, .06) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(#000 0 58%, transparent 92%);
      z-index: -3;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(2, 7, 17, .06), rgba(2, 7, 17, .48) 45%, rgba(2, 7, 17, .94) 78%),
        radial-gradient(circle at 73% 12%, rgba(147, 88, 255, .14), transparent 24%),
        radial-gradient(circle at 18% 56%, rgba(32, 199, 255, .12), transparent 28%);
      z-index: -2;
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    .wrap { width: min(1380px, calc(100% - 44px)); margin: 0 auto; }
    .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
    .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
    #neuralCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: .8; }

    .site-loader {
      position: fixed;
      inset: 0;
      z-index: 999;
      min-height: 100vh;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 24px;
      padding: 28px;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% 38%, rgba(32, 199, 255, .18), transparent 22%),
        radial-gradient(circle at 42% 46%, rgba(147, 88, 255, .18), transparent 30%),
        linear-gradient(180deg, #020711 0, #030814 52%, #01040b 100%);
      transition: opacity .55s ease, visibility .55s ease, transform .55s ease;
    }

    .site-loader::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(24, 216, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 216, 255, .07) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(circle at 50% 44%, #000 0 38%, transparent 72%);
    }

    .site-loader::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(32, 199, 255, .07), transparent);
      transform: translateY(-100%);
      animation: loaderScan 1.8s ease-in-out infinite;
    }

    .site-loader.is-hidden {
      opacity: 0;
      visibility: hidden;
      transform: scale(1.02);
      pointer-events: none;
    }

    .loader-core {
      width: clamp(172px, 38vw, 260px);
      aspect-ratio: 1;
      position: relative;
      display: grid;
      place-items: center;
      filter: drop-shadow(0 0 34px rgba(32, 199, 255, .2));
    }

    .loader-core::before,
    .loader-core::after {
      content: "";
      position: absolute;
      inset: 20%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(32, 199, 255, .18), rgba(147, 88, 255, .08) 52%, transparent 70%);
      animation: loaderPulse 1.7s ease-in-out infinite;
    }

    .loader-core::after {
      inset: 34%;
      background: rgba(32, 199, 255, .12);
      animation-delay: -.55s;
    }

    .loader-orbit {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(32, 199, 255, .22);
      animation: loaderSpin 4.6s linear infinite;
    }

    .loader-orbit::before {
      content: "";
      position: absolute;
      top: 11%;
      right: 18%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 22px var(--cyan);
    }

    .orbit-two {
      inset: 10%;
      border-color: rgba(147, 88, 255, .34);
      animation-duration: 3.4s;
      animation-direction: reverse;
      transform: rotate(28deg);
    }

    .orbit-two::before {
      top: 72%;
      right: 10%;
      background: var(--violet);
      box-shadow: 0 0 22px var(--violet);
    }

    .orbit-three {
      inset: 22%;
      border-style: dashed;
      border-color: rgba(38, 217, 183, .38);
      animation-duration: 5.8s;
    }

    .orbit-three::before {
      top: 8%;
      right: 62%;
      background: var(--lime);
      box-shadow: 0 0 22px var(--lime);
    }

    .loader-logo {
      width: 112px;
      height: 62px;
      z-index: 1;
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 199, 255, .28);
      border-radius: 18px;
      background: rgba(2, 7, 17, .72);
      box-shadow: inset 0 0 28px rgba(24, 216, 255, .08), 0 18px 48px rgba(0, 0, 0, .34);
      backdrop-filter: blur(12px);
    }

    .loader-logo img {
      width: 86px;
      height: 42px;
      object-fit: contain;
      filter: drop-shadow(0 0 12px rgba(32, 199, 255, .45));
    }

    .loader-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 3px;
      text-align: center;
    }

    .loader-copy strong {
      font-size: clamp(22px, 4vw, 34px);
      line-height: 1.35;
      font-weight: 900;
    }

    .loader-copy span {
      color: #b9cbe0;
      direction: ltr;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .loader-bar {
      position: relative;
      z-index: 1;
      width: min(320px, 72vw);
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      box-shadow: inset 0 0 14px rgba(0, 0, 0, .32);
    }

    .loader-bar i {
      display: block;
      width: 42%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
      box-shadow: 0 0 18px rgba(32, 199, 255, .68);
      animation: loaderBar 1.15s ease-in-out infinite;
    }

    @keyframes loaderSpin {
      to { transform: rotate(360deg); }
    }

    @keyframes loaderPulse {
      50% { transform: scale(1.12); opacity: .72; }
    }

    @keyframes loaderScan {
      50%, 100% { transform: translateY(100%); }
    }

    @keyframes loaderBar {
      0% { transform: translateX(145%); }
      50% { transform: translateX(0); }
      100% { transform: translateX(-145%); }
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 60;
      width: 100%;
      height: 3px;
      pointer-events: none;
      background: linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
      box-shadow: 0 0 18px rgba(32, 199, 255, .72);
      transform-origin: right center;
      transform: scaleX(var(--scroll-progress, 0));
    }

    .nav {
      position: sticky;
      top: 12px;
      z-index: 20;
      width: min(1440px, calc(100% - 28px));
      min-height: 70px;
      margin: 12px auto 0;
      padding: 0 18px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(2, 6, 14, .76);
      box-shadow: var(--shadow), inset 0 0 34px rgba(24, 216, 255, .05);
      backdrop-filter: blur(18px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      flex-direction: row-reverse;
      gap: 12px;
      direction: rtl;
      font-weight: 900;
      min-width: 0;
    }

    .mark {
      width: 74px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 0;
      color: #06101c;
      background: transparent;
      border: 0;
      box-shadow: none;
      direction: ltr;
      overflow: visible;
    }

    .mark span { font-size: 26px; }
    .logo-mark img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
      transform: none;
      filter: drop-shadow(0 0 10px rgba(32, 199, 255, .28));
    }
    .brand-text { display: grid; line-height: 1.05; text-align: right; min-width: 0; }
    .brand-text strong,
    .brand-text small {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .brand-text small { color: #cbd8ee; font-size: 12px; letter-spacing: 0; }

    .links { display: flex; justify-content: center; gap: 6px; color: #d7e5f8; font-size: 14px; }
    .links a { padding: 9px 13px; border-radius: 999px; transition: .2s ease; }
    .links a:hover, .links a.active { color: var(--cyan); background: rgba(24, 216, 255, .08); }

    .actions { display: flex; align-items: center; gap: 10px; }
    .btn {
      --btn-x: 0px;
      --btn-y: 0px;
      --btn-lift: 0px;
      min-height: 46px;
      padding: 10px 18px;
      border: 1px solid transparent;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--ink);
      cursor: pointer;
      font-weight: 900;
      white-space: nowrap;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      transform: translate3d(var(--btn-x), var(--btn-y), 0) translateY(var(--btn-lift));
    }

    .btn:hover {
      --btn-lift: -2px;
      border-color: rgba(32, 199, 255, .34);
      box-shadow: 0 14px 36px rgba(0, 0, 0, .24), 0 0 26px rgba(32, 199, 255, .18);
    }
    .primary {
      background: linear-gradient(100deg, var(--violet), var(--blue) 48%, var(--cyan));
      box-shadow: 0 0 28px rgba(24, 216, 255, .3);
    }
    .ghost { background: rgba(7, 17, 34, .6); border-color: var(--line); }
    .menu {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      background: rgba(7, 17, 34, .76);
      cursor: pointer;
    }

    .hero {
      min-height: 660px;
      position: relative;
      display: grid;
      align-items: center;
      padding: 34px 0 34px;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: -80px 0 -20px;
      background:
        radial-gradient(circle at 26% 48%, rgba(32, 199, 255, .2), transparent 32%),
        radial-gradient(circle at 60% 20%, rgba(147, 88, 255, .16), transparent 23%),
        linear-gradient(180deg, transparent 72%, var(--bg));
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(360px, .86fr) minmax(420px, 1fr);
      align-items: start;
      gap: 34px;
      padding-top: clamp(34px, 5vh, 58px);
    }

    .hero-copy { position: relative; z-index: 2; max-width: 720px; min-width: 0; justify-self: start; padding-top: 8px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(8, 19, 39, .68);
      color: #d9ecff;
      font-size: 13px;
      font-weight: 900;
    }

    .spark {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 7px rgba(101, 242, 169, .12), 0 0 24px var(--lime);
      animation: pulse 1.7s ease-in-out infinite;
    }

    @keyframes pulse {
      50% { box-shadow: 0 0 0 12px rgba(101, 242, 169, .03), 0 0 30px var(--lime); }
    }

    h1 {
      margin: 20px 0 14px;
      font-size: clamp(38px, 5vw, 70px);
      line-height: 1.13;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .grad {
      color: transparent;
      background: linear-gradient(90deg, #ffffff 0 18%, var(--cyan) 36%, var(--violet) 74%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      filter: drop-shadow(0 0 20px rgba(24, 216, 255, .22));
    }

    .lead { max-width: 700px; margin: 0 0 28px; color: #c3d2e6; font-size: 18px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 2px; }

    .tech-row {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chip {
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 999px;
      color: #d8e9ff;
      background: rgba(255, 255, 255, .045);
      font-size: 12px;
      direction: ltr;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mini-tech {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 8px rgba(32, 199, 255, .32));
    }

    .hero-media {
      --hero-rx: 0deg;
      --hero-ry: 0deg;
      --hero-img-x: 0px;
      --hero-img-y: 0px;
      --hero-ring-x: 0px;
      --hero-ring-y: 0px;
      --scroll-y: 0px;
      min-height: 0;
      aspect-ratio: 1.42;
      width: min(100%, 790px);
      position: relative;
      z-index: 1;
      align-self: start;
      justify-self: start;
      margin-top: 8px;
      isolation: isolate;
      overflow: hidden;
      border-radius: 26px;
      mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .6) 90%, transparent 100%);
      perspective: 1100px;
      transform-style: preserve-3d;
      transform: translateY(var(--scroll-y)) rotateX(var(--hero-rx)) rotateY(var(--hero-ry));
      transition: transform .16s ease, box-shadow .25s ease;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 255, 255, .04);
    }

    .hero-media::before {
      content: "";
      position: absolute;
      inset: 8% 6% 0 2%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(32, 199, 255, .3), rgba(147, 88, 255, .16) 42%, transparent 68%);
      filter: blur(26px);
      opacity: .72;
      z-index: -1;
      animation: glowBreath 4.8s ease-in-out infinite;
    }

    .hero-media::after {
      content: "";
      position: absolute;
      right: 1%;
      left: 1%;
      bottom: 26px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(24, 216, 255, .78), rgba(167, 92, 255, .66), transparent);
      box-shadow: 0 0 28px rgba(24, 216, 255, .5);
      opacity: .78;
    }

    .hero-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: left center;
      filter: saturate(1.02) contrast(1.08) drop-shadow(0 26px 54px rgba(0, 0, 0, .42));
      transform: translate3d(var(--hero-img-x), var(--hero-img-y), 44px) scale(1.055);
      animation: heroFloat 6s ease-in-out infinite;
      transition: transform .18s ease;
    }

    .depth-ring {
      position: absolute;
      z-index: 1;
      border: 1px solid rgba(32, 199, 255, .26);
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
      transform-style: preserve-3d;
      animation: ringDrift 9s ease-in-out infinite;
    }

    .depth-ring::before,
    .depth-ring::after {
      content: "";
      position: absolute;
      inset: 8%;
      border: 1px solid rgba(147, 88, 255, .2);
      border-radius: inherit;
    }

    .ring-a {
      width: 54%;
      aspect-ratio: 1;
      right: 7%;
      top: 11%;
      box-shadow: 0 0 34px rgba(32, 199, 255, .18);
      transform: translate3d(var(--hero-ring-x), var(--hero-ring-y), 82px) rotateX(64deg) rotateZ(-14deg);
    }

    .ring-b {
      width: 36%;
      aspect-ratio: 1;
      left: 14%;
      bottom: 14%;
      border-color: rgba(255, 198, 92, .2);
      animation-delay: -2.2s;
      transform: translate3d(var(--hero-ring-x), var(--hero-ring-y), 64px) rotateX(68deg) rotateZ(22deg);
    }

    .ring-c {
      width: 70%;
      aspect-ratio: 1;
      left: -12%;
      top: -18%;
      opacity: .48;
      animation-delay: -4.6s;
      transform: translate3d(var(--hero-ring-x), var(--hero-ring-y), 30px) rotateX(72deg) rotateZ(8deg);
    }

    .scan-line {
      position: absolute;
      right: 18%;
      left: 6%;
      top: 12%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(24, 216, 255, .72), transparent);
      box-shadow: 0 0 18px rgba(24, 216, 255, .7);
      animation: scan 4.6s ease-in-out infinite;
    }

    .hero-chip {
      position: absolute;
      z-index: 2;
      min-width: 92px;
      padding: 8px 11px;
      border: 1px solid rgba(24, 216, 255, .24);
      border-radius: 14px;
      color: #dff8ff;
      background: rgba(3, 11, 26, .66);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 0 20px rgba(24, 216, 255, .05);
      backdrop-filter: blur(12px);
      direction: ltr;
      font-size: 12px;
      font-weight: 900;
      animation: float 4.8s ease-in-out infinite;
    }

    .hero-chip small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .hero-chip.ai { right: 18%; top: 9%; color: var(--cyan); }
    .hero-chip.sec { right: 4%; bottom: 25%; color: var(--blue); animation-delay: -1.4s; }
    .hero-chip.code { left: 8%; top: 24%; color: var(--rose); animation-delay: -2.2s; }
    @keyframes heroFloat { 50% { transform: translate3d(var(--hero-img-x), calc(var(--hero-img-y) - 8px), 44px) scale(1.07); } }
    @keyframes glowBreath { 50% { opacity: .98; transform: scale(1.05); } }
    @keyframes scan {
      0%, 100% { transform: translateY(0); opacity: .2; }
      48% { transform: translateY(330px); opacity: .9; }
    }

    @keyframes float { 50% { transform: translateY(-14px) scale(1.04); } }
    @keyframes ringDrift { 50% { filter: hue-rotate(18deg); opacity: .86; } }

    .metrics {
      position: relative;
      z-index: 2;
      margin-top: -22px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .metric, .service, .skill-card, .project, .phase, .testimonial-card, .article-card, .contact-card, .footer-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(7, 20, 43, .82), rgba(3, 10, 22, .94));
      box-shadow: inset 0 0 30px rgba(24, 216, 255, .04), 0 16px 46px rgba(0, 0, 0, .24);
    }

    .motion-card {
      --mx: 50%;
      --my: 50%;
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      position: relative;
      transform-style: preserve-3d;
      transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--card-lift, 0));
      transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
      will-change: transform;
    }

    .motion-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(circle at var(--mx) var(--my), rgba(32, 199, 255, .2), transparent 34%);
      transition: opacity .2s ease;
    }

    .motion-card > * { position: relative; z-index: 1; }

    .motion-card:hover {
      --card-lift: -5px;
      border-color: rgba(32, 199, 255, .48);
      box-shadow: inset 0 0 34px rgba(24, 216, 255, .08), 0 24px 62px rgba(0, 0, 0, .36), 0 0 28px rgba(32, 199, 255, .12);
    }

    .motion-card:hover::after { opacity: 1; }

    .metric {
      min-height: 130px;
      padding: 22px;
      position: relative;
      overflow: hidden;
    }

    .metric::after {
      content: attr(data-k);
      position: absolute;
      left: 18px;
      bottom: -10px;
      color: transparent;
      -webkit-text-stroke: 1px rgba(24, 216, 255, .38);
      font-size: 64px;
      font-weight: 900;
      direction: ltr;
      opacity: .7;
    }

    .metric b { color: var(--cyan); font-size: 34px; line-height: 1; direction: ltr; display: inline-block; }
    .metric span { display: block; margin-top: 9px; color: var(--muted); font-size: 14px; }

    section { padding: 42px 0; position: relative; }
    .section-title { max-width: 820px; margin: 0 auto 30px; text-align: center; }
    .section-title h2 { margin: 0; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.25; }
    .section-title p { margin: 10px 0 0; color: var(--muted); }

    .services {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }

    .service {
      min-height: 260px;
      padding: 22px 18px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .service::before, .project::before, .testimonial-card::before, .article-card::before, .contact-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent, rgba(255, 255, 255, .07), transparent);
      transform: translateX(120%);
      transition: transform .62s ease;
      pointer-events: none;
    }

    .service:hover, .project:hover, .skill-card:hover, .phase:hover, .testimonial-card:hover, .article-card:hover {
      transform: translateY(-6px);
      border-color: rgba(24, 216, 255, .5);
      box-shadow: 0 22px 70px rgba(0, 0, 0, .32), 0 0 34px rgba(24, 216, 255, .08);
    }

    .service:hover::before, .project:hover::before, .testimonial-card:hover::before, .article-card:hover::before, .contact-card:hover::before { transform: translateX(-120%); }
    .service-icon {
      width: 76px;
      height: 76px;
      margin: 0 auto 18px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(24, 216, 255, .35);
      border-radius: 19px;
      color: var(--cyan);
      background: rgba(24, 216, 255, .065);
      box-shadow: 0 0 28px rgba(24, 216, 255, .18);
      position: relative;
      overflow: hidden;
      font-size: 36px;
    }

    .service-icon::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px dashed currentColor;
      border-radius: 15px;
      opacity: .35;
      animation: counterSpin 8s linear infinite;
    }

    .service:nth-child(2n) .service-icon { color: var(--violet); border-color: rgba(167, 92, 255, .42); }
    .service:nth-child(3n) .service-icon { color: var(--lime); border-color: rgba(101, 242, 169, .36); }
    .service-icon::after {
      content: "";
      position: absolute;
      inset: -30px;
      background: conic-gradient(from 90deg, transparent, currentColor, transparent 34%);
      opacity: .24;
      animation: spin 5.4s linear infinite;
    }

    .service-icon .icon { position: relative; z-index: 1; font-size: 42px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes counterSpin { to { transform: rotate(-360deg); } }
    .service h3, .project h3, .phase h3 { margin: 0 0 9px; font-size: 18px; }
    .service p, .project p, .phase p { margin: 0; color: var(--muted); font-size: 14px; }
    .service .go { display: inline-flex; margin-top: 18px; color: var(--cyan); font-weight: 900; direction: ltr; }

    .skill-zone { display: block; }

    .skills-showcase {
      display: grid;
      grid-template-columns: minmax(260px, .88fr) minmax(0, 1.55fr);
      gap: 18px;
      align-items: stretch;
    }

    .skill-summary,
    .skill-group {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background:
        radial-gradient(circle at 14% 8%, rgba(32, 199, 255, .16), transparent 34%),
        linear-gradient(180deg, rgba(9, 26, 53, .78), rgba(3, 10, 23, .95));
      box-shadow: inset 0 0 34px rgba(24, 216, 255, .04), 0 18px 46px rgba(0, 0, 0, .22);
    }

    .skill-summary {
      min-height: 100%;
      padding: 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
    }

    .skill-summary h3 {
      margin: 10px 0 12px;
      color: #eef8ff;
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.55;
    }

    .skill-summary p { margin: 0; color: var(--muted); line-height: 2; }

    .skill-stats {
      display: grid;
      gap: 10px;
    }

    .skill-stats span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(24, 216, 255, .14);
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      color: var(--muted);
      font-size: 13px;
    }

    .skill-stats b {
      color: var(--cyan);
      direction: ltr;
      font-size: 12px;
      letter-spacing: 0;
    }

    .skill-groups {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .skill-group {
      min-height: 190px;
      padding: 18px;
      transition: .24s ease;
    }

    .skill-group-head {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 16px;
    }

    .skill-group h3 {
      margin: 0;
      color: #eef8ff;
      font-size: 17px;
      line-height: 1.6;
    }

    .skill-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .skill-chips span {
      padding: 7px 10px;
      border: 1px solid rgba(24, 216, 255, .14);
      border-radius: 999px;
      background: rgba(24, 216, 255, .07);
      color: #dff8ff;
      direction: ltr;
      font-size: 12px;
      white-space: nowrap;
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(230px, 1fr));
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(3, 10, 23, .62);
      box-shadow: inset 0 0 40px rgba(24, 216, 255, .04);
      overflow: hidden;
    }

    .skill-card {
      padding: 18px;
      transition: .24s ease;
      min-height: 118px;
    }

    .skill-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
    .skill-name { display: flex; align-items: center; gap: 13px; font-weight: 900; color: #eef8ff; }
    .badge {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: #06101c;
      background: linear-gradient(135deg, var(--cyan), var(--blue) 55%, var(--violet));
      direction: ltr;
      font-size: 12px;
      font-weight: 900;
    }

    .badge svg {
      width: 25px;
      height: 25px;
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, .22));
    }

    .percent { color: var(--cyan); direction: ltr; font-weight: 900; }
    .bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
    .bar i {
      display: block;
      width: var(--v);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--violet), var(--blue), var(--cyan));
      box-shadow: 0 0 18px rgba(24, 216, 255, .45);
      animation: loadbar 1.2s cubic-bezier(.2, .9, .2, 1) both;
    }

    @keyframes loadbar { from { width: 0; } to { width: var(--v); } }

    .projects {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .project { overflow: hidden; position: relative; transition: .24s ease; }
    .project-visual {
      height: 154px;
      position: relative;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 18% 22%, rgba(255, 198, 92, .26), transparent 24%),
        linear-gradient(180deg, rgba(2, 7, 17, .02), rgba(2, 7, 17, .58)),
        url("portfolio-thumbnails.jpg");
      background-size: auto, auto, 800% 145%;
      background-position: 0% 50%;
      overflow: hidden;
    }

    .project:nth-child(2) .project-visual { background-position: center, center, 14% 50%; }
    .project:nth-child(3) .project-visual { background-position: center, center, 28% 50%; }
    .project:nth-child(4) .project-visual { background-position: center, center, 42% 50%; }
    .project:nth-child(5) .project-visual { background-position: center, center, 56% 50%; }
    .project:nth-child(6) .project-visual { background-position: center, center, 70% 50%; }
    .project:nth-child(7) .project-visual { background-position: center, center, 84% 50%; }
    .project:nth-child(8) .project-visual { background-position: center, center, 100% 50%; }

    .project-visual::before {
      content: attr(data-icon);
      position: absolute;
      inset: 18px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(24, 216, 255, .24);
      border-radius: 14px;
      background:
        radial-gradient(circle, rgba(2, 7, 17, .2), rgba(2, 7, 17, .66)),
        linear-gradient(rgba(24, 216, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 216, 255, .08) 1px, transparent 1px);
      background-size: auto, 22px 22px, 22px 22px;
      color: rgba(223, 248, 255, .9);
      direction: ltr;
      font-size: 40px;
      font-weight: 900;
      text-shadow: 0 0 22px rgba(32, 199, 255, .7);
      pointer-events: none;
    }

    .project-visual::after {
      content: attr(data-label);
      position: absolute;
      right: 16px;
      bottom: 14px;
      padding: 4px 9px;
      border: 1px solid rgba(24, 216, 255, .34);
      border-radius: 999px;
      color: #dff8ff;
      background: rgba(2, 5, 12, .68);
      direction: ltr;
      font-size: 11px;
    }

    .project-body { padding: 18px; }
    .meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
    .meta span { padding: 4px 8px; border-radius: 999px; background: rgba(24, 216, 255, .08); color: #d8f6ff; font-size: 11px; direction: ltr; }

    .projects-shell {
      position: relative;
      overflow: hidden;
    }

    .projects-shell::before,
    .projects-shell::after {
      content: "";
      position: absolute;
      top: 62px;
      bottom: 30px;
      z-index: 2;
      width: 72px;
      pointer-events: none;
    }

    .projects-shell::before {
      right: 0;
      background: linear-gradient(90deg, transparent, rgba(2, 7, 17, .94));
    }

    .projects-shell::after {
      left: 0;
      background: linear-gradient(270deg, transparent, rgba(2, 7, 17, .94));
    }

    .slider-controls {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 16px;
    }

    .slider-btn {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(24, 216, 255, .28);
      border-radius: 14px;
      background: rgba(3, 10, 23, .82);
      color: #eef8ff;
      font: inherit;
      font-size: 30px;
      line-height: 1;
      cursor: pointer;
      transition: .2s ease;
    }

    .slider-btn:hover,
    .slider-btn:focus-visible {
      color: var(--cyan);
      border-color: rgba(24, 216, 255, .56);
      box-shadow: 0 0 24px rgba(24, 216, 255, .16);
      outline: 0;
    }

    .projects {
      display: flex;
      grid-template-columns: none;
      gap: 18px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 2px;
      padding: 2px 2px 16px;
      scrollbar-width: thin;
      scrollbar-color: rgba(24, 216, 255, .42) rgba(255, 255, 255, .06);
    }

    .projects::-webkit-scrollbar { height: 8px; }
    .projects::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 999px; }
    .projects::-webkit-scrollbar-thumb { background: rgba(24, 216, 255, .42); border-radius: 999px; }

    .projects .project {
      flex: 0 0 clamp(290px, 32vw, 405px);
      scroll-snap-align: start;
    }

    .slider-hint {
      display: none;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .skill-zone > .skills-showcase:not(.refined-skills) { display: none; }

    .refined-skills {
      grid-template-columns: minmax(280px, .9fr) minmax(0, 1.65fr);
      gap: 20px;
      align-items: stretch;
    }

    .skill-command,
    .skill-lane {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(32, 199, 255, .18);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(9, 27, 53, .8), rgba(3, 10, 23, .96)),
        radial-gradient(circle at 14% 8%, rgba(32, 199, 255, .15), transparent 40%);
      box-shadow: inset 0 0 34px rgba(24, 216, 255, .045), 0 18px 46px rgba(0, 0, 0, .24);
    }

    .skill-command {
      min-height: 100%;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
    }

    .skill-command h3 {
      margin: 10px 0 12px;
      color: #eef8ff;
      font-size: clamp(23px, 2.15vw, 32px);
      line-height: 1.65;
    }

    .skill-command p {
      margin: 0;
      color: var(--muted);
      line-height: 2.05;
    }

    .capability-list {
      display: grid;
      gap: 10px;
    }

    .capability-list span {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 11px 13px;
      border: 1px solid rgba(32, 199, 255, .14);
      border-radius: 14px;
      background: rgba(255, 255, 255, .045);
      color: #d9ebff;
      font-size: 13px;
    }

    .capability-list b {
      flex: 0 0 auto;
      color: var(--cyan);
      direction: ltr;
      font-size: 12px;
    }

    .skill-lanes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .skill-lane {
      min-height: 235px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 13px;
      transition: .24s ease;
    }

    .skill-lane::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(32, 199, 255, .12), transparent 38%, rgba(167, 92, 255, .08));
      opacity: .55;
      pointer-events: none;
    }

    .skill-lane::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(270deg, rgba(3, 10, 23, .94) 0%, rgba(3, 10, 23, .72) 44%, rgba(3, 10, 23, .18) 100%),
        url("generated-skills-sprite.png");
      background-size: auto, 600% 100%;
      background-position: center, 0% 50%;
      opacity: .46;
      filter: saturate(1.12) contrast(1.06);
      pointer-events: none;
    }

    .skill-lane:nth-child(2)::after { background-position: center, 20% 50%; }
    .skill-lane:nth-child(3)::after { background-position: center, 40% 50%; }
    .skill-lane:nth-child(4)::after { background-position: center, 80% 50%; }
    .skill-lane:nth-child(5)::after { background-position: center, 60% 50%; }
    .skill-lane:nth-child(6)::after { background-position: center, 100% 50%; }

    .skill-lane > * { position: relative; z-index: 1; }

    .skill-lane-head {
      display: flex;
      align-items: flex-start;
      gap: 13px;
    }

    .skill-lane-head small {
      display: block;
      margin-bottom: 4px;
      color: var(--cyan);
      direction: ltr;
      font-size: 11px;
      font-weight: 900;
    }

    .skill-lane h3 {
      margin: 0;
      color: #eef8ff;
      font-size: 17px;
      line-height: 1.65;
    }

    .skill-lane p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.95;
      flex: 1;
    }

    .skill-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .skill-stack span {
      padding: 6px 9px;
      border: 1px solid rgba(32, 199, 255, .15);
      border-radius: 999px;
      background: rgba(32, 199, 255, .075);
      color: #dff8ff;
      direction: ltr;
      font-size: 11px;
      white-space: nowrap;
    }

    .skill-meter {
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .09);
      overflow: hidden;
    }

    .skill-meter i {
      display: block;
      width: var(--level);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--violet), var(--blue), var(--cyan));
      box-shadow: 0 0 18px rgba(32, 199, 255, .42);
    }

    .project-visual {
      height: 250px;
      background:
        radial-gradient(circle at 18% 22%, rgba(32, 199, 255, .22), transparent 24%),
        linear-gradient(180deg, rgba(2, 7, 17, .02), rgba(2, 7, 17, .44)),
        url("generated-projects-sprite.png");
      background-size: auto, auto, 800% 100%;
      background-position: center, center, 0% 50%;
    }

    .project-visual::before {
      inset: auto 16px 16px auto;
      width: 58px;
      height: 58px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 30% 20%, rgba(32, 199, 255, .28), transparent 38%),
        rgba(2, 7, 17, .68);
      background-size: auto;
      font-size: 20px;
      backdrop-filter: blur(10px);
    }

    .projects-shell {
      padding: 18px;
      border: 1px solid rgba(32, 199, 255, .16);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(8, 21, 43, .72), rgba(2, 7, 17, .72)),
        radial-gradient(circle at 20% 0, rgba(32, 199, 255, .12), transparent 38%);
      box-shadow: inset 0 0 44px rgba(32, 199, 255, .035), 0 22px 60px rgba(0, 0, 0, .24);
    }

    .projects {
      gap: 22px;
      padding: 8px 6px 20px;
      scrollbar-width: none;
    }

    .projects::-webkit-scrollbar { display: none; }

    .projects .project {
      flex-basis: clamp(315px, 37vw, 470px);
      scroll-snap-align: center;
      opacity: .68;
      transform: scale(.96);
      transition: opacity .24s ease, transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .projects .project.is-active {
      opacity: 1;
      transform: translateY(-4px) scale(1);
      border-color: rgba(32, 199, 255, .48);
      box-shadow: 0 22px 54px rgba(0, 0, 0, .32), 0 0 28px rgba(32, 199, 255, .12);
    }

    .projects .project.is-active .project-visual::before {
      border-color: rgba(32, 199, 255, .42);
      text-shadow: 0 0 28px rgba(32, 199, 255, .82);
    }

    .slider-controls {
      position: relative;
      z-index: 4;
      align-items: center;
      margin-bottom: 12px;
    }

    .slider-btn {
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(11, 31, 59, .92), rgba(3, 10, 23, .92));
    }

    .slider-dots {
      position: relative;
      z-index: 4;
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      direction: ltr;
    }

    .slider-dots button {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .28);
      cursor: pointer;
      transition: .2s ease;
    }

    .slider-dots button.active {
      width: 28px;
      background: linear-gradient(90deg, var(--blue), var(--cyan));
      box-shadow: 0 0 18px rgba(32, 199, 255, .38);
    }

    .phases { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
    .phases::before {
      content: "";
      position: absolute;
      top: 36px;
      right: 6%;
      left: 6%;
      border-top: 1px dashed rgba(24, 216, 255, .32);
    }
    .phase { min-height: 170px; padding: 18px; transition: .24s ease; position: relative; overflow: hidden; z-index: 1; text-align: center; background: transparent; box-shadow: none; border-color: transparent; }
    .phase small { color: var(--cyan); direction: ltr; font-weight: 900; }
    .phase h3 { margin-top: 16px; }
    .phase::after {
      content: "";
      position: absolute;
      left: 16px;
      bottom: 16px;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      border: 1px solid rgba(24, 216, 255, .22);
      background: linear-gradient(135deg, rgba(24, 216, 255, .16), rgba(255, 75, 216, .08));
    }

    .team-layout {
      display: grid;
      grid-template-columns: 1.15fr repeat(2, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    .why-card, .member-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(10, 24, 49, .8), rgba(3, 10, 23, .9));
      box-shadow: inset 0 0 30px rgba(24, 216, 255, .04), 0 16px 46px rgba(0, 0, 0, .24);
      overflow: hidden;
    }

    .why-card { padding: 22px; }
    .why-card h3 { margin: 0 0 14px; font-size: 20px; }
    .why-card ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; color: #d5e6fb; }
    .why-card li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .why-card li::after { content: "\25C7"; color: var(--cyan); }

    .member-card { position: relative; transition: .24s ease; }
    .member-card:hover { transform: translateY(-5px); border-color: rgba(24, 216, 255, .5); }
    .member-photo {
      height: 178px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 28%, rgba(32, 199, 255, .2), transparent 34%),
        linear-gradient(145deg, rgba(5, 18, 38, .92), rgba(2, 7, 17, .96));
      border-bottom: 1px solid rgba(24, 216, 255, .14);
      overflow: hidden;
    }

    .member-card:nth-child(3) .member-photo,
    .member-card:nth-child(4) .member-photo,
    .member-card:nth-child(5) .member-photo { background-position: center; }

    .member-photo .avatar-shape { display: grid; place-items: center; }

    .avatar-shape {
      width: 112px;
      height: 112px;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(32, 199, 255, .2), rgba(147, 88, 255, .12)),
        rgba(2, 7, 17, .55);
      border: 1px solid rgba(32, 199, 255, .34);
      box-shadow: 0 0 34px rgba(24, 216, 255, .16);
      position: relative;
    }

    .avatar-shape::before {
      content: "</>";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--cyan);
      direction: ltr;
      font-size: 28px;
      font-weight: 900;
      text-shadow: 0 0 20px rgba(32, 199, 255, .55);
    }

    .avatar-shape.woman {
      background:
        radial-gradient(circle at 50% 31%, #e4b797 0 21%, transparent 22%),
        linear-gradient(145deg, #05080f 0 58%, #111a2c 59% 100%);
      border-radius: 54px 54px 18px 18px;
    }

    .member-body { padding: 14px 16px; }
    .member-body h3 { margin: 0; font-size: 16px; }
    .member-body p { margin: 4px 0 12px; color: var(--muted); font-size: 12px; }
    .member-body a { color: var(--cyan); direction: ltr; font-size: 13px; }

    .articles-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
      min-width: 0;
    }

    .article-card {
      position: relative;
      overflow: hidden;
      padding: 0;
      min-height: 420px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      transition: .24s ease;
    }

    .article-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, transparent 42%, rgba(2, 7, 17, .64)),
        radial-gradient(circle at 82% 8%, rgba(32, 199, 255, .16), transparent 28%);
      opacity: .9;
    }

    .article-card > *:not(.article-card-media) {
      position: relative;
      z-index: 1;
      margin-inline: 22px;
    }

    .article-card-media {
      height: 178px;
      flex: 0 0 auto;
      display: block;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(32, 199, 255, .2);
      background: rgba(32, 199, 255, .08);
    }

    .article-card-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transform: scale(1.02);
      filter: saturate(1.08) contrast(1.08);
      transition: transform .45s ease, filter .45s ease;
    }

    .article-card:hover .article-card-media img {
      transform: scale(1.08);
      filter: saturate(1.18) contrast(1.12);
    }

    .article-kicker {
      width: fit-content;
      margin-top: 20px;
      margin-bottom: 14px;
      padding: 5px 10px;
      border: 1px solid rgba(32, 199, 255, .3);
      border-radius: 999px;
      color: var(--cyan);
      background: rgba(32, 199, 255, .08);
      font-size: 12px;
      font-weight: 900;
    }

    .article-card h3 {
      margin: 0 0 12px;
      font-size: 20px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .article-card h3 a {
      transition: color .2s ease;
    }

    .article-card h3 a:hover {
      color: var(--cyan);
    }

    .article-card p {
      flex: 1;
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 14px;
      overflow-wrap: anywhere;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      color: #b8c9df;
      font-size: 12px;
    }

    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 14px;
      margin-bottom: 22px;
      direction: ltr;
      justify-content: flex-end;
    }

    .article-tags span {
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(24, 216, 255, .08);
      color: #d8f6ff;
      font-size: 11px;
      overflow-wrap: anywhere;
    }

    .article-page {
      padding: 30px 0 68px;
    }

    .article-breadcrumb {
      max-width: 1080px;
      min-height: 42px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      color: #9fb3cc;
      font-size: 13px;
    }

    .article-breadcrumb a {
      color: #d8e6f5;
      transition: color .2s ease;
    }

    .article-breadcrumb a:hover { color: var(--cyan); }
    .article-breadcrumb strong { color: var(--cyan); font-weight: 900; }

    .article-hero {
      max-width: 1080px;
      margin: 0 auto 26px;
      padding: 30px;
      border: 1px solid rgba(32, 199, 255, .2);
      border-radius: 26px;
      background:
        linear-gradient(145deg, rgba(12, 31, 62, .88), rgba(3, 10, 24, .96) 58%, rgba(4, 13, 28, .94)),
        radial-gradient(circle at 18% 0, rgba(32, 199, 255, .18), transparent 40%),
        radial-gradient(circle at 85% 12%, rgba(147, 88, 255, .18), transparent 32%);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }

    .article-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(32, 199, 255, .06) 1px, transparent 1px),
        linear-gradient(rgba(32, 199, 255, .05) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(#000 0 38%, transparent 82%);
      opacity: .65;
    }

    .article-hero > * {
      position: relative;
      z-index: 1;
    }

    .article-hero h1 {
      margin: 12px 0;
      font-size: clamp(30px, 4vw, 52px);
      line-height: 1.25;
    }

    .article-hero p {
      max-width: 780px;
      margin: 0;
      color: #c4d4e8;
      font-size: 17px;
    }

    .article-hero-media {
      margin: 24px 0 0;
      min-height: 260px;
      overflow: hidden;
      border: 1px solid rgba(32, 199, 255, .22);
      border-radius: 22px;
      background: rgba(32, 199, 255, .08);
      box-shadow: inset 0 0 32px rgba(32, 199, 255, .05), 0 20px 55px rgba(0, 0, 0, .28);
    }

    .article-hero-media img {
      width: 100%;
      height: min(48vw, 430px);
      min-height: 260px;
      display: block;
      object-fit: cover;
      filter: saturate(1.08) contrast(1.08);
    }

    .article-shell {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 310px;
      gap: 24px;
      align-items: start;
    }

    .article-content {
      min-width: 0;
      margin: 0;
      padding: 28px;
      border: 1px solid rgba(32, 199, 255, .16);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(5, 15, 31, .82), rgba(2, 7, 17, .86)),
        radial-gradient(circle at 8% 0, rgba(32, 199, 255, .09), transparent 34%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 58px rgba(0, 0, 0, .24);
    }

    .article-content h2 {
      margin: 32px 0 12px;
      font-size: clamp(22px, 2.4vw, 32px);
      line-height: 1.35;
    }

    .article-content h2:first-child { margin-top: 0; }
    .article-content p,
    .article-content li {
      color: #d8e6f5;
      font-size: 16px;
      line-height: 2;
    }

    .article-content ul,
    .article-content ol {
      padding-right: 22px;
      margin: 10px 0 20px;
    }

    .article-content li { margin-bottom: 8px; }

    .article-content a {
      color: var(--cyan);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .key-takeaways {
      margin: 0 0 26px;
      padding: 20px;
      border: 1px solid rgba(38, 217, 183, .24);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(38, 217, 183, .12), rgba(32, 199, 255, .08)),
        rgba(3, 10, 22, .76);
    }

    .key-takeaways span {
      display: inline-flex;
      margin-bottom: 10px;
      color: var(--lime);
      font-weight: 900;
    }

    .key-takeaways ul {
      margin: 0;
      padding-right: 20px;
    }

    .key-takeaways li {
      color: #dff9f5;
      line-height: 1.9;
    }

    .article-cta {
      margin-top: 28px;
      padding: 20px;
      border: 1px solid rgba(32, 199, 255, .22);
      border-radius: 18px;
      background: linear-gradient(100deg, rgba(147, 88, 255, .14), rgba(32, 199, 255, .1));
    }

    .article-cta p { margin-top: 0; }

    .article-sidebar {
      position: sticky;
      top: 94px;
      display: grid;
      gap: 14px;
    }

    .sidebar-card {
      padding: 18px;
      border: 1px solid rgba(32, 199, 255, .18);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(7, 20, 43, .82), rgba(3, 10, 22, .94)),
        radial-gradient(circle at 20% 0, rgba(32, 199, 255, .12), transparent 40%);
      box-shadow: inset 0 0 26px rgba(32, 199, 255, .04), 0 14px 42px rgba(0, 0, 0, .22);
    }

    .sidebar-card h2 {
      margin: 0 0 12px;
      font-size: 16px;
      line-height: 1.55;
    }

    .sidebar-card a:not(.btn) {
      min-height: 34px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      color: #c7d9ee;
      font-size: 13px;
      line-height: 1.6;
      transition: color .2s ease, transform .2s ease;
    }

    .sidebar-card a:not(.btn):hover {
      color: var(--cyan);
      transform: translateX(-3px);
    }

    .sidebar-card p {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.85;
    }

    .sidebar-card .btn {
      width: 100%;
      min-height: 42px;
      padding: 8px 12px;
      font-size: 13px;
    }

    .sidebar-card.accent {
      border-color: rgba(38, 217, 183, .28);
      background:
        linear-gradient(145deg, rgba(38, 217, 183, .16), rgba(32, 199, 255, .08)),
        rgba(3, 10, 22, .92);
    }

    .sidebar-card.related a:last-child,
    .sidebar-card a:last-child { border-bottom: 0; }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .faq-item {
      padding: 20px;
      border: 1px solid rgba(32, 199, 255, .18);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(7, 20, 43, .72), rgba(3, 10, 22, .9)),
        radial-gradient(circle at 20% 0, rgba(32, 199, 255, .1), transparent 42%);
    }

    .faq-item h3 {
      margin: 0 0 10px;
      font-size: 17px;
      line-height: 1.6;
    }

    .faq-item p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 20px;
      align-items: stretch;
    }

    .contact-card { padding: 24px; position: relative; overflow: hidden; }
    .contact-card h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 38px); line-height: 1.28; }
    .contact-card p { margin: 0 0 18px; color: var(--muted); }
    .info-row {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      color: #dcecff;
      direction: ltr;
      justify-content: flex-end;
    }

    .contact-icon,
    .social svg {
      width: 21px;
      height: 21px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .info-row span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .field { display: grid; gap: 7px; color: #dcecff; font-size: 13px; font-weight: 800; }
    .field.full { grid-column: 1 / -1; }
    input, textarea, select {
      width: 100%;
      border: 1px solid rgba(24, 216, 255, .18);
      border-radius: 13px;
      padding: 12px 13px;
      color: var(--ink);
      background: rgba(2, 7, 17, .74);
      outline: none;
    }
    textarea { min-height: 122px; resize: vertical; }
    input:focus, textarea:focus, select:focus { border-color: rgba(24, 216, 255, .55); box-shadow: 0 0 0 4px rgba(24, 216, 255, .08); }
    .form .btn { grid-column: 1 / -1; width: max-content; justify-self: start; }
    .form .btn:disabled { cursor: wait; opacity: .72; transform: none; }
    .form-status {
      grid-column: 1 / -1;
      min-height: 24px;
      margin: 0;
      color: var(--lime);
      font-size: 13px;
      font-weight: 800;
    }
    .form-status.error { color: var(--red); }

    .cta-strip {
      margin-top: 22px;
      min-height: 130px;
      padding: 22px 30px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px;
      align-items: center;
      border: 1px solid rgba(24, 216, 255, .28);
      border-radius: 20px;
      background:
        linear-gradient(90deg, rgba(24, 216, 255, .12), rgba(255, 75, 216, .08), rgba(2, 7, 17, .75)),
        url("ai-hero.jpg") left 46% / 640px auto no-repeat;
      box-shadow: 0 0 40px rgba(24, 216, 255, .1);
      overflow: hidden;
    }

    .cta-strip h2 { margin: 0 0 4px; font-size: clamp(22px, 2.8vw, 34px); }
    .cta-strip p { margin: 0; color: #bccde0; }

    footer { padding: 40px 0 26px; }
    .footer {
      display: grid;
      grid-template-columns: 1.3fr repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid rgba(24, 216, 255, .14);
      border-bottom: 1px solid rgba(24, 216, 255, .14);
      background: linear-gradient(180deg, rgba(3, 10, 23, .44), rgba(3, 10, 23, .18));
    }

    .footer-card {
      border-width: 0 0 0 1px;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding: 24px;
    }

    .footer-card:first-child { border-right: 0; }
    .footer-card h3 { margin: 0 0 14px; font-size: 16px; }
    .footer-card p, .footer-card a { color: var(--muted); font-size: 14px; }
    .footer-card a { display: block; margin: 8px 0; transition: color .2s ease; }
    .footer-card a:hover { color: var(--cyan); }
    .footer-contact a {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      direction: ltr;
      overflow-wrap: anywhere;
    }
    .social { display: flex; gap: 9px; margin-top: 16px; direction: ltr; justify-content: flex-start; }
    .social a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: #dff7ff;
      background: rgba(24, 216, 255, .06);
      margin: 0;
    }
    .copy { margin-top: 18px; text-align: center; color: #73849b; direction: ltr; font-size: 13px; }
    .top {
      position: fixed;
      left: 22px;
      bottom: 22px;
      z-index: 10;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #03101c;
      background: var(--cyan);
      box-shadow: 0 0 26px rgba(24, 216, 255, .36);
      font-weight: 900;
    }

    .reveal { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }
    .js-ready .reveal { opacity: 0; transform: translateY(22px); }
    .reveal.show { opacity: 1; transform: translateY(0); }

    .project,
    .skill-card,
    .why-card,
    .member-card,
    .contact-card,
    .metric {
      border-color: rgba(32, 199, 255, .22);
      background:
        linear-gradient(145deg, rgba(12, 31, 62, .88), rgba(3, 10, 24, .96) 55%, rgba(7, 16, 34, .92)),
        radial-gradient(circle at 30% 0, rgba(32, 199, 255, .12), transparent 38%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 0 36px rgba(32, 199, 255, .045),
        0 18px 54px rgba(0, 0, 0, .34);
    }

    .service::after,
    .project::after,
    .member-card::after,
    .phase::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(32,199,255,.08));
      opacity: .72;
    }

    .service {
      min-height: 260px;
      padding: 22px 18px;
      border-radius: 18px;
    }

    .service-icon {
      width: 76px;
      height: 76px;
      margin-bottom: 18px;
      border-radius: 19px;
      background: rgba(24, 216, 255, .065);
      background-image: none;
      border: 1px solid rgba(24, 216, 255, .35);
      box-shadow: 0 0 28px rgba(24, 216, 255, .18);
    }

    .service-icon .icon { display: block; }
    .service-icon::before,
    .service-icon::after { display: block; }

    .badge {
      width: 70px;
      height: 70px;
      flex: 0 0 70px;
      border-radius: 20px;
      background: rgba(2, 7, 17, .28);
      box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 26px rgba(32,199,255,.14);
      overflow: hidden;
    }

    .badge img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .32));
    }

    .badge svg { display: none; }

    .badge.tech-text {
      color: #dff8ff;
      font-size: 16px;
      letter-spacing: 0;
      text-transform: uppercase;
      background:
        radial-gradient(circle at 30% 20%, rgba(32, 199, 255, .32), transparent 34%),
        linear-gradient(135deg, rgba(147, 88, 255, .24), rgba(2, 7, 17, .42));
      border: 1px solid rgba(32, 199, 255, .26);
    }

    .project {
      border-radius: 18px;
      min-height: 100%;
    }

    .project-visual {
      height: 220px;
      background-size: auto, auto, 800% 128%;
    }

    .project-body {
      padding: 18px 18px 20px;
      min-height: 184px;
      display: flex;
      flex-direction: column;
    }

    .project-body p { flex: 1; }

    .projects {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }

    .phases {
      gap: 18px;
      align-items: stretch;
    }

    .phases::before {
      top: 54px;
      border-top: 1px solid rgba(32, 199, 255, .34);
      box-shadow: 0 0 18px rgba(32, 199, 255, .24);
    }

    .phase {
      min-height: 220px;
      padding: 22px 16px 20px;
      border: 1px solid rgba(32, 199, 255, .2);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(9, 26, 53, .84), rgba(3, 10, 23, .96)),
        radial-gradient(circle at 50% 0, rgba(147, 88, 255, .14), transparent 44%);
      box-shadow: inset 0 0 28px rgba(32, 199, 255, .04), 0 16px 44px rgba(0, 0, 0, .26);
    }

    .phase small {
      width: 58px;
      height: 58px;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 199, 255, .34);
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(147, 88, 255, .2), rgba(32, 199, 255, .12));
      box-shadow: 0 0 28px rgba(32, 199, 255, .16);
    }

    .phase h3 { margin-top: 0; }
    .phase::after { display: none; }

    .testimonials-layout {
      display: grid;
      grid-template-columns: minmax(320px, 1.12fr) repeat(2, minmax(220px, .94fr));
      gap: 18px;
      align-items: stretch;
    }

    .testimonial-card {
      min-height: 320px;
      padding: 24px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
      border-color: rgba(32, 199, 255, .22);
      background:
        linear-gradient(145deg, rgba(12, 31, 62, .86), rgba(3, 10, 24, .96) 56%, rgba(7, 16, 34, .94)),
        radial-gradient(circle at 22% 0, rgba(38, 217, 183, .12), transparent 38%);
    }

    .testimonial-card.featured {
      min-height: 360px;
      background:
        radial-gradient(circle at 18% 10%, rgba(32, 199, 255, .2), transparent 34%),
        linear-gradient(145deg, rgba(15, 38, 76, .92), rgba(4, 12, 28, .98) 58%, rgba(9, 20, 42, .94));
    }

    .testimonial-card p {
      margin: 0;
      color: #dce8f8;
      font-size: 15px;
      line-height: 2;
      position: relative;
      z-index: 1;
    }

    .testimonial-card.featured p {
      font-size: clamp(17px, 1.45vw, 21px);
      color: #f2f8ff;
    }

    .quote-mark {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 199, 255, .34);
      border-radius: 18px;
      color: var(--cyan);
      background: rgba(24, 216, 255, .08);
      font-size: 48px;
      line-height: 1;
      box-shadow: 0 0 28px rgba(32, 199, 255, .14);
    }

    .stars {
      color: var(--amber);
      direction: ltr;
      letter-spacing: 0;
      font-size: 18px;
      text-shadow: 0 0 18px rgba(255, 198, 92, .24);
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .author-avatar {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 199, 255, .3);
      border-radius: 15px;
      color: var(--cyan);
      background:
        radial-gradient(circle at 35% 20%, rgba(32, 199, 255, .25), transparent 38%),
        rgba(2, 7, 17, .58);
      font-weight: 900;
    }

    .testimonial-author h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
    }

    .testimonial-author small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }

    .trust-strip {
      margin-top: 18px;
      min-height: 78px;
      padding: 14px 18px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      align-items: center;
      border: 1px solid rgba(32, 199, 255, .24);
      border-radius: 20px;
      background:
        linear-gradient(90deg, rgba(32, 199, 255, .1), rgba(147, 88, 255, .08), rgba(2, 7, 17, .76));
      box-shadow: inset 0 0 30px rgba(32, 199, 255, .04), 0 16px 44px rgba(0, 0, 0, .24);
    }

    .trust-strip span {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #d7e5f8;
      text-align: center;
      border-left: 1px solid rgba(255, 255, 255, .08);
    }

    .trust-strip span:last-child { border-left: 0; }
    .trust-strip b { color: var(--cyan); font-size: 21px; line-height: 1; }

    .team-layout {
      grid-template-columns: minmax(260px, .9fr) repeat(2, minmax(220px, 1fr));
      gap: 20px;
    }

    .why-card {
      min-height: 360px;
      padding: 26px;
      border-radius: 20px;
    }

    .why-card li::after { content: "\25C7"; color: var(--cyan); }

    .member-card {
      border-radius: 20px;
      min-height: 360px;
    }

    .member-photo {
      height: 258px;
      background-size: 400% 108%;
    }

    .member-body {
      min-height: 100px;
      padding: 17px 18px;
    }

    .member-body h3 { font-size: 18px; }

    @media (max-width: 1180px) {
      .services { grid-template-columns: repeat(3, 1fr); }
      .articles-grid { grid-template-columns: 1fr; }
      .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .article-shell { grid-template-columns: 1fr; }
      .article-sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hero-grid, .skill-zone, .contact-layout { grid-template-columns: 1fr; }
      .skills-showcase { grid-template-columns: 1fr; }
      .refined-skills { grid-template-columns: 1fr; }
      .hero-grid { padding-top: 0; align-items: center; }
      .hero-copy { justify-self: stretch; }
      .hero-media { order: -1; aspect-ratio: 1.9; width: min(100%, 760px); justify-self: center; margin-top: 0; mask-image: none; }
      .hero-art { width: 100%; transform: none; object-position: center; animation: none; }
      .metrics { margin-top: 0; }
      .metrics, .phases, .skills-grid { grid-template-columns: repeat(2, 1fr); }
      .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .team-layout { grid-template-columns: repeat(2, 1fr); }
      .testimonials-layout { grid-template-columns: 1fr; }
      .why-card { grid-column: 1 / -1; }
      .project-visual { height: 250px; }
      .member-photo { height: 300px; }
      .phases::before { display: none; }
    }

    @media (max-width: 850px) {
      .wrap { width: min(100% - 28px, 720px); }
      #neuralCanvas { display: none; }
      .site-loader {
        gap: 18px;
        background:
          radial-gradient(circle at 50% 40%, rgba(32, 199, 255, .16), transparent 32%),
          linear-gradient(180deg, #020711 0, #030814 55%, #01040b 100%);
      }
      .site-loader::before { background-size: 40px 40px; opacity: .72; }
      .loader-core { width: min(58vw, 210px); }
      .loader-logo { width: 96px; height: 56px; }
      .loader-logo img { width: 76px; height: 38px; }
      .nav { grid-template-columns: auto auto; justify-content: space-between; border-radius: 22px; }
      .brand-text strong { max-width: 170px; }
      .brand-text small { max-width: 170px; }
      .links {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(2, 6, 14, .94);
      }
      .links.open { display: flex; }
      .actions .ghost { display: none; }
      .menu { display: grid; place-items: center; }
      .hero { min-height: auto; padding-top: 44px; }
      .hero-grid { gap: 24px; }
      .hero-media { aspect-ratio: 1.35; }
      .depth-ring { opacity: .48; }
      .hero-chip { display: none; }
      .scan-line { right: 8%; left: 8%; }
      .metrics, .services, .skills-grid, .phases, .team-layout, .form, .footer, .cta-strip, .trust-strip { grid-template-columns: 1fr; }
      .skill-groups { grid-template-columns: 1fr; }
      .skill-lanes { grid-template-columns: 1fr; }
      .phases::before { display: none; }
      .service { min-height: auto; padding: 22px 18px; }
      .service-icon { width: 92px; height: 92px; }
      .badge { width: 62px; height: 62px; flex-basis: 62px; border-radius: 18px; }
      .projects-shell::before,
      .projects-shell::after { width: 34px; }
      .projects .project { flex-basis: min(88vw, 420px); }
      .project-visual { height: 230px; }
      .project-body { min-height: auto; }
      .testimonial-card,
      .testimonial-card.featured { min-height: auto; padding: 20px; }
      .trust-strip span {
        justify-content: flex-start;
        text-align: right;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
      }
      .trust-strip span:last-child { border-bottom: 0; }
      .phase { min-height: auto; text-align: right; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
      .phase small { margin: 0; grid-row: span 2; }
      .phase p { grid-column: 2; }
      .member-card { min-height: auto; }
      .member-photo { height: 360px; background-size: 400% 112%; }
      .why-card { min-height: auto; }
      .articles-grid { gap: 14px; }
      .article-card {
        min-height: auto;
        border-radius: 18px;
        transform: none !important;
        will-change: auto;
      }
      .article-card::after {
        background: linear-gradient(180deg, transparent 58%, rgba(2, 7, 17, .5));
      }
      .article-card > *:not(.article-card-media) { margin-inline: 16px; }
      .article-card-media {
        height: auto;
        aspect-ratio: 16 / 9;
      }
      .article-kicker { margin-top: 16px; margin-bottom: 10px; }
      .article-card h3 { font-size: 17px; line-height: 1.65; }
      .article-card p { flex: initial; margin-bottom: 14px; font-size: 13px; }
      .article-meta { gap: 6px 10px; font-size: 11px; }
      .article-tags {
        justify-content: flex-start;
        direction: rtl;
        margin-top: 12px;
        margin-bottom: 16px;
      }
      .footer-card { border-left: 0; border-bottom: 1px solid rgba(24, 216, 255, .12); }
      .cta-strip { background-size: 520px auto; }
      .form .btn { width: 100%; }
    }

    @media (max-width: 560px) {
      .wrap { width: min(100% - 22px, 520px); }
      body::before { background-size: 42px 42px; opacity: .45; }
      .article-hero,
      .article-content { padding: 18px; border-radius: 16px; }
      .article-page { padding-top: 18px; }
      .article-breadcrumb { margin-bottom: 10px; font-size: 12px; }
      .article-sidebar { grid-template-columns: 1fr; }
      .sidebar-card { padding: 16px; border-radius: 16px; }
      .key-takeaways { padding: 16px; border-radius: 16px; }
      .faq-grid { grid-template-columns: 1fr; }
      .nav { min-height: 62px; padding: 0 12px; width: min(100% - 18px, 520px); }
      .brand-text strong { max-width: 145px; font-size: 13px; }
      .brand-text small { display: none; }
      .mark { width: 58px; height: 30px; border-radius: 0; }
      .actions .primary { display: none; }
      h1 { font-size: clamp(31px, 9vw, 43px); }
      .lead { font-size: 15px; }
      .hero-actions .btn { width: 100%; }
      .hero-media { aspect-ratio: 1.05; border-radius: 18px; }
      .hero-media { transform: none !important; }
      .depth-ring { display: none; }
      .tech-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
      .chip { flex: 0 0 auto; }
      .metric { min-height: 112px; padding: 18px; }
      .metric b { font-size: 28px; }
      .section-title { margin-bottom: 20px; }
      .section-title h2 { font-size: 27px; }
      #articles .section-title p { font-size: 13px; }
      .article-card { border-radius: 16px; }
      .article-card > *:not(.article-card-media) { margin-inline: 14px; }
      .article-card-media img {
        transform: none;
        filter: none;
      }
      .article-card:hover .article-card-media img {
        transform: none;
        filter: none;
      }
      .article-kicker {
        max-width: 100%;
        white-space: normal;
        font-size: 11px;
      }
      .article-card h3 { font-size: 16px; }
      .article-tags span { font-size: 10px; }
      .skills-grid { padding: 12px; gap: 10px; }
      .skills-showcase { gap: 12px; }
      .skill-summary,
      .skill-group { border-radius: 16px; }
      .skill-summary { padding: 18px; }
      .skill-command { padding: 18px; border-radius: 16px; }
      .skill-command h3 { font-size: 23px; }
      .capability-list span { align-items: flex-start; flex-direction: column; gap: 5px; }
      .skill-lane { min-height: auto; padding: 16px; border-radius: 16px; }
      .skill-lane-head { gap: 10px; }
      .skill-stats span { align-items: flex-start; flex-direction: column; gap: 4px; }
      .skill-group { min-height: auto; padding: 16px; }
      .skill-chips { gap: 7px; }
      .skill-chips span { white-space: normal; }
      .skill-card { padding: 14px; min-height: 104px; }
      .skill-top { gap: 10px; }
      .skill-name { gap: 10px; }
      .badge { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
      .slider-controls { justify-content: center; }
      .slider-hint { display: block; }
      .projects-shell { padding: 12px; border-radius: 18px; }
      .projects { gap: 12px; padding-inline: 3px; }
      .projects .project { flex-basis: calc(100vw - 58px); }
      .projects .project:not(.is-active) { opacity: .78; transform: scale(.98); }
      .project-visual { height: 205px; }
      .project-body { padding: 16px; }
      .phase { grid-template-columns: 1fr; text-align: center; }
      .phase small { margin: 0 auto 12px; grid-row: auto; }
      .phase p { grid-column: auto; }
      .member-photo { height: 300px; }
      .cta-strip { padding: 18px; gap: 14px; }
      .top { left: 14px; bottom: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
      #neuralCanvas { display: none; }
      .scroll-progress { display: none; }
      .hero-media, .hero-art, .motion-card, .btn { transform: none !important; }
      .site-loader { transition: opacity .2s ease, visibility .2s ease; }
    }

    @media (hover: none), (pointer: coarse) {
      #neuralCanvas { display: none; }
      .motion-card {
        transform: none !important;
        transition: border-color .2s ease, box-shadow .2s ease;
        will-change: auto;
      }
      .motion-card:hover,
      .service:hover,
      .project:hover,
      .skill-card:hover,
      .phase:hover,
      .testimonial-card:hover,
      .article-card:hover {
        transform: none;
      }
      .service::before,
      .project::before,
      .testimonial-card::before,
      .article-card::before,
      .contact-card::before {
        display: none;
      }
      .hero-art,
      .article-card-media img,
      .article-hero-media img {
        filter: none;
      }
    }

    .project-visual {
      background:
        radial-gradient(circle at 18% 22%, rgba(32, 199, 255, .22), transparent 24%),
        linear-gradient(180deg, rgba(2, 7, 17, .02), rgba(2, 7, 17, .44)),
        url("generated-projects-sprite.png") !important;
      background-size: auto, auto, 800% 100% !important;
      background-position: center, center, 0% 50% !important;
    }

    .project:nth-child(2) .project-visual { background-position: center, center, 14% 50% !important; }
    .project:nth-child(3) .project-visual { background-position: center, center, 28% 50% !important; }
    .project:nth-child(4) .project-visual { background-position: center, center, 42% 50% !important; }
    .project:nth-child(5) .project-visual { background-position: center, center, 56% 50% !important; }
    .project:nth-child(6) .project-visual { background-position: center, center, 70% 50% !important; }
    .project:nth-child(7) .project-visual { background-position: center, center, 84% 50% !important; }
    .project:nth-child(8) .project-visual { background-position: center, center, 100% 50% !important; }

    .projects .project .project-visual {
      background:
        linear-gradient(180deg, rgba(2, 7, 17, .02), rgba(2, 7, 17, .34)),
        var(--project-image) !important;
      background-size: auto, cover !important;
      background-position: center, center !important;
    }

    .projects .project:nth-child(1) { --project-image: url("project-trading-lms.png"); }
    .projects .project:nth-child(2) { --project-image: url("project-club-system.png"); }
    .projects .project:nth-child(3) { --project-image: url("project-remote-auction.png"); }
    .projects .project:nth-child(4) { --project-image: url("project-skate-shop.png"); }
    .projects .project:nth-child(5) { --project-image: url("project-ai-restaurant.png"); }
    .projects .project:nth-child(6) { --project-image: url("project-swiss-cabins.png"); }
    .projects .project:nth-child(7) { --project-image: url("project-pool-website.png"); }
    .projects .project:nth-child(8) { --project-image: url("project-remote-keyless.png"); }

    .refined-skills .skill-lane .badge {
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(9, 27, 53, .12), rgba(3, 10, 23, .12)),
        url("generated-skill-icons.png") !important;
      background-size: auto, 600% auto !important;
      background-position: center, 0% 50% !important;
      color: transparent !important;
      border: 1px solid rgba(32, 199, 255, .3);
      box-shadow: inset 0 0 16px rgba(32, 199, 255, .08), 0 0 20px rgba(32, 199, 255, .12);
    }

    .refined-skills .skill-lane .badge img { display: none; }
    .refined-skills .skill-lane:nth-child(2) .badge { background-position: center, 20% 50% !important; }
    .refined-skills .skill-lane:nth-child(3) .badge { background-position: center, 40% 50% !important; }
    .refined-skills .skill-lane:nth-child(4) .badge { background-position: center, 60% 50% !important; }
    .refined-skills .skill-lane:nth-child(5) .badge { background-position: center, 80% 50% !important; }
    .refined-skills .skill-lane:nth-child(6) .badge { background-position: center, 100% 50% !important; }

    .refined-skills .skill-lane .badge {
      color: var(--cyan) !important;
      background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .2), transparent 28%),
        linear-gradient(145deg, rgba(32, 199, 255, .18), rgba(147, 88, 255, .12)),
        rgba(2, 7, 17, .78) !important;
      border: 1px solid rgba(32, 199, 255, .38);
      box-shadow: inset 0 0 16px rgba(32, 199, 255, .1), 0 0 24px rgba(32, 199, 255, .14);
    }

    .refined-skills .skill-lane .badge::before {
      content: "";
      width: 28px;
      height: 28px;
      display: block;
      background: currentColor;
      filter: drop-shadow(0 0 10px rgba(32, 199, 255, .55));
      mask: var(--skill-icon) center / contain no-repeat;
      -webkit-mask: var(--skill-icon) center / contain no-repeat;
    }

    .refined-skills .skill-lane:nth-child(1) { --skill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M7 8h4M7 12h10M7 16h6M16 8h1'/%3E%3C/svg%3E"); }
    .refined-skills .skill-lane:nth-child(2) { --skill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='7' rx='2'/%3E%3Crect x='5' y='14' width='14' height='7' rx='2'/%3E%3Cpath d='M8 7h.01M8 18h.01M12 10v4'/%3E%3C/svg%3E"); }
    .refined-skills .skill-lane:nth-child(3) { --skill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='7' ry='3'/%3E%3Cpath d='M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
    .refined-skills .skill-lane:nth-child(4) { --skill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7v5c0 5-3.4 8-8 9-4.6-1-8-4-8-9V7l8-4Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
    .refined-skills .skill-lane:nth-child(5) { --skill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a5 5 0 0 0-5 5v1a5 5 0 0 0 10 0V8a5 5 0 0 0-5-5Z'/%3E%3Cpath d='M8 14v2a4 4 0 0 0 8 0v-2M12 18v3M6 9H4M20 9h-2M7 5 5.5 3.5M17 5l1.5-1.5'/%3E%3C/svg%3E"); }
    .refined-skills .skill-lane:nth-child(6) { --skill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h2l2 9h9l2-6H8'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M14 5h6v4'/%3E%3Cpath d='m20 5-6 6'/%3E%3C/svg%3E"); }

    .phases {
      gap: 20px;
      padding: 16px;
      border: 1px solid rgba(32, 199, 255, .14);
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(7, 20, 43, .48), rgba(2, 7, 17, .72)),
        linear-gradient(rgba(32, 199, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 199, 255, .045) 1px, transparent 1px);
      background-size: auto, 28px 28px, 28px 28px;
      box-shadow: inset 0 0 44px rgba(32, 199, 255, .035), 0 20px 60px rgba(0, 0, 0, .22);
    }

    .phases::before {
      top: 50%;
      right: 5%;
      left: 5%;
      border-top: 1px solid rgba(32, 199, 255, .36);
      box-shadow: 0 0 22px rgba(32, 199, 255, .22);
    }

    .phase {
      min-height: 250px;
      padding: 24px 18px 22px;
      border: 1px solid rgba(32, 199, 255, .2);
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 0, rgba(32, 199, 255, .18), transparent 42%),
        linear-gradient(180deg, rgba(9, 26, 53, .9), rgba(3, 10, 23, .96));
      box-shadow: inset 0 0 30px rgba(32, 199, 255, .05), 0 16px 44px rgba(0, 0, 0, .24);
      text-align: right;
    }

    .phase small {
      width: 64px;
      height: 64px;
      margin: 0 0 18px auto;
      display: grid;
      place-items: center;
      border-radius: 20px;
      border: 1px solid rgba(32, 199, 255, .42);
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .2), transparent 26%),
        linear-gradient(145deg, rgba(32, 199, 255, .2), rgba(147, 88, 255, .16));
      color: #eef8ff;
      box-shadow: 0 0 28px rgba(32, 199, 255, .18);
    }

    .phase h3 {
      margin: 0 0 10px;
      font-size: 18px;
      color: #eef8ff;
    }

    .phase p {
      line-height: 1.9;
    }

    .phase::after {
      display: block;
      content: "";
      position: absolute;
      left: 16px;
      top: 18px;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(32, 199, 255, .28);
      border-radius: 12px;
      background:
        radial-gradient(circle, rgba(32, 199, 255, .5), rgba(32, 199, 255, .05) 60%, transparent 62%),
        rgba(2, 7, 17, .5);
      box-shadow: 0 0 22px rgba(32, 199, 255, .18);
    }

    @media (max-width: 850px) {
      .phases {
        padding: 12px;
        gap: 12px;
      }

      .phases::before { display: none; }

      .phase {
        min-height: auto;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 18px;
      }

      .phase small {
        margin: 0;
        grid-row: span 2;
      }

      .phase p { grid-column: 2; }
    }

    @media (max-width: 560px) {
      .refined-skills .skill-lane .badge {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
      }

      .phase {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .phase small {
        margin: 0 auto 12px;
        grid-row: auto;
      }

      .phase p { grid-column: auto; }
      .phase::after { display: none; }
    }