:root {
        --bg: #0a1020;
        --panel: #131c33;
        --line: #24324f;
        --accent: #e3af7d;
        --text: #f4efe9;
        --muted: #a6afc4;
        --copper: #e3af7d;
        --head: "Montserrat", "Segoe UI", Arial, sans-serif;
        --body: "DM Sans", "Segoe UI", Arial, sans-serif;
        box-sizing: border-box;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 84px;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font: 400 1.05rem/1.65 var(--body);
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 4px;
      }
      .wrap {
        width: min(1120px, 100% - 2.5rem);
        margin-inline: auto;
      }
      h1,
      h2,
      h3 {
        font-family: var(--head);
        line-height: 1.1;
        margin: 0;
        letter-spacing: -0.02em;
      }
      h2 {
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        font-weight: 800;
        max-width: 18ch;
      }
      p {
        margin: 0;
      }
      .logo-blend {
        mix-blend-mode: lighten;
      }

      /* header */
      header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(10, 16, 32, 0.72);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid transparent;
        transition: border-color 0.3s;
      }
      header.scrolled {
        border-color: var(--line);
      }
      .bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font: 800 1.05rem var(--head);
        letter-spacing: 0.14em;
        color: var(--copper);
      }
      .brand img {
        height: 40px;
        width: auto;
      }
      nav ul {
        display: flex;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
      }
      nav a {
        font-size: 0.95rem;
        color: var(--muted);
        transition: color 0.2s;
      }
      nav a:hover {
        color: var(--text);
      }
      .btn {
        display: inline-block;
        background: var(--accent);
        color: #1a1008;
        font: 700 0.95rem var(--head);
        padding: 0.85rem 1.5rem;
        border-radius: 999px;
        border: 0;
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
      }
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(227, 175, 125, 0.3);
      }
      .btn.ghost {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--line);
      }
      .btn.ghost:hover {
        border-color: var(--accent);
        box-shadow: none;
      }
      nav .btn {
        color: #1a1008;
        padding: 0.6rem 1.2rem;
      }
      .menu {
        display: none;
        background: none;
        border: 1px solid var(--line);
        color: var(--text);
        border-radius: 10px;
        padding: 0.5rem 0.8rem;
        font: 600 0.9rem var(--head);
        cursor: pointer;
      }

      /* submenus */
      .has-sub {
        position: relative;
      }
      .sub-toggle {
        background: none;
        border: 0;
        color: var(--muted);
        font: inherit;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0;
        transition: color 0.2s;
      }
      .sub-toggle svg {
        width: 11px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s;
      }
      .has-sub:hover .sub-toggle,
      .has-sub.open .sub-toggle {
        color: var(--accent);
      }
      .has-sub.open .sub-toggle svg {
        transform: rotate(180deg);
      }
      .sub a {
        display: flex;
        gap: 0.9rem;
        align-items: center;
        padding: 0.65rem 0.75rem;
        border-radius: 10px;
        color: var(--text);
      }
      .sub a:hover {
        background: rgba(227, 175, 125, 0.1);
      }
      .si {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: var(--accent);
        border: 1px solid var(--line);
        background: linear-gradient(145deg, #1f2f5c, #101a38);
      }
      .si svg {
        width: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .sub b {
        display: block;
        font: 600 0.95rem var(--head);
        line-height: 1.25;
      }
      .sub small {
        display: block;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.35;
        margin-top: 0.1rem;
      }
      @media (min-width: 861px) {
        .bar {
          position: relative;
        }
        .sub-toggle {
          height: 72px;
        }
        .sub {
          position: absolute;
          top: 100%;
          left: -1rem;
          min-width: 370px;
          background: #101830;
          border: 1px solid var(--line);
          border-bottom: 2px solid var(--accent);
          border-radius: 14px;
          padding: 0.55rem;
          box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
          opacity: 0;
          visibility: hidden;
          transform: translateY(8px);
          transition:
            opacity 0.2s,
            transform 0.2s,
            visibility 0.2s;
        }
        .has-sub.wide {
          position: static;
        }
        .sub.wide {
          left: auto;
          right: 0;
          min-width: 0;
          width: min(660px, 100%);
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .has-sub.open .sub {
          opacity: 1;
          visibility: visible;
          transform: none;
        }
      }
      @media (min-width: 861px) and (hover: hover) {
        .has-sub:hover .sub,
        .has-sub:focus-within .sub {
          opacity: 1;
          visibility: visible;
          transform: none;
        }
      }
      @media (max-width: 860px) {
        .has-sub {
          width: 100%;
        }
        .sub {
          display: none;
          padding: 0.4rem 0 0;
        }
        .has-sub.open .sub {
          display: block;
        }
      }
      /* hero */
      .hero {
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem);
        background:
          radial-gradient(ellipse at 18% 8%, #1c2b58 0, transparent 55%),
          radial-gradient(ellipse at 88% 35%, #2b2145 0, transparent 50%),
          linear-gradient(180deg, #0a1020, #0d1630);
      }
      .hero .wrap {
        position: relative;
        z-index: 1;
      }
      .orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(
          circle at 35% 30%,
          rgba(227, 175, 125, 0.35),
          rgba(227, 175, 125, 0.04)
        );
        animation: float 9s ease-in-out infinite;
      }
      .orb.b {
        background: radial-gradient(
          circle at 35% 30%,
          rgba(120, 150, 255, 0.32),
          rgba(120, 150, 255, 0.04)
        );
        animation-duration: 12s;
      }
      @keyframes float {
        50% {
          transform: translateY(-16px);
        }
      }
      .pill {
        display: inline-block;
        border: 1px solid var(--line);
        background: rgba(19, 28, 51, 0.6);
        border-radius: 999px;
        padding: 0.55rem 1.5rem;
        font-size: 0.95rem;
        color: var(--text);
      }
      h1 {
        font-size: clamp(2.1rem, 5vw, 3.6rem);
        font-weight: 800;
        max-width: 24ch;
        margin: 2.2rem auto 0;
      }
      .hero p.lead {
        margin: 1.5rem auto 0;
        max-width: 62ch;
        color: var(--muted);
        font-size: 1.1rem;
      }
      .offer {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
        margin: 3rem auto 0;
        max-width: 1000px;
      }
      .offer div {
        display: grid;
        justify-items: center;
        gap: 0.25rem;
      }
      .offer .ic {
        width: 88px;
        height: 88px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        margin-bottom: 0.8rem;
        color: var(--accent);
        background:
          radial-gradient(
            circle at 50% 30%,
            rgba(227, 175, 125, 0.25),
            transparent 70%
          ),
          linear-gradient(145deg, #1f2f5c, #101a38);
        border: 1px solid var(--line);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
      }
      .offer svg {
        width: 46px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .offer b {
        font: 700 1rem var(--head);
      }
      .offer span {
        font-size: 0.88rem;
        color: var(--muted);
      }
      .cta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin-top: 3rem;
      }
      .emblem {
        position: relative;
        width: 170px;
        margin: 0 0 1.4rem;
      }
      .emblem img {
        width: 100%;
        border-radius: 50%;
        -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%);
        mask-image: radial-gradient(circle, #000 62%, transparent 71%);
      }
      .emblem::after {
        content: "";
        position: absolute;
        inset: 8%;
        border: 1px solid var(--line);
        border-radius: 50%;
        animation: spin 40s linear infinite;
        border-top-color: var(--accent);
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .fab {
        position: fixed;
        right: 1.25rem;
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        z-index: 30;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--accent);
        color: #1a1008;
        display: grid;
        place-items: center;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        transition: transform 0.2s;
      }
      .fab:hover {
        transform: scale(1.08);
      }
      .fab svg {
        width: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* marquee strip of facts */
      .facts {
        border-block: 1px solid var(--line);
        background: var(--panel);
      }
      .facts .wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        padding-block: 1.6rem;
      }
      .facts strong {
        display: block;
        font: 800 1.15rem var(--head);
        color: var(--accent);
      }
      .facts span {
        color: var(--muted);
        font-size: 0.95rem;
      }

      section {
        padding: clamp(4rem, 9vw, 7.5rem) 0;
      }
      .intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: end;
        margin-bottom: 3.5rem;
      }
      .intro p {
        color: var(--muted);
        max-width: 46ch;
      }

      /* services as rows */
      .rows {
        border-top: 1px solid var(--line);
      }
      .row {
        display: grid;
        grid-template-columns: 0.9fr 1.4fr auto;
        gap: 2rem;
        align-items: center;
        padding: 1.9rem 0.5rem;
        border-bottom: 1px solid var(--line);
        transition:
          background 0.25s,
          padding 0.25s;
      }
      .row:hover {
        background: var(--panel);
        padding-inline: 1.2rem;
      }
      .row h3 {
        font-size: 1.35rem;
        font-weight: 700;
      }
      .row p {
        color: var(--muted);
      }
      .row .tag {
        font-size: 0.85rem;
        color: var(--accent);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.3rem 0.8rem;
        white-space: nowrap;
      }

      .ind {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.2rem;
      }
      .tile {
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: var(--panel);
        transition:
          border-color 0.25s,
          transform 0.25s;
      }
      .tile:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
      }
      .tile .art {
        aspect-ratio: 4/3;
        display: grid;
        place-items: center;
        color: var(--accent);
        background:
          radial-gradient(
            circle at 50% 42%,
            rgba(227, 175, 125, 0.2),
            transparent 65%
          ),
          linear-gradient(135deg, #1a2848, #0c1428);
      }
      .tile svg {
        width: 28%;
        min-width: 50px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .tile h3 {
        font-size: 1rem;
        font-weight: 700;
        padding: 1rem 1.1rem;
        letter-spacing: -0.01em;
      }
      @media (max-width: 860px) {
        .ind {
          grid-template-columns: repeat(2, 1fr);
        }
        .tile h3 {
          font-size: 0.92rem;
          padding: 0.8rem 0.9rem;
        }
      }
      /* services accordion */
      .eyebrow {
        display: block;
        margin-bottom: 0.9rem;
        font: 600 0.95rem var(--head);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .acc {
        display: flex;
        border-top: 1px solid var(--line);
        margin-top: 1rem;
      }
      .pan {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        border-left: 1px solid var(--line);
        transition: flex-grow 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
      }
      .pan:first-child {
        border-left: 0;
      }
      .pan.on {
        flex-grow: 3.6;
      }
      .pan:not(.on) {
        cursor: pointer;
      }
      .pan:not(.on):hover {
        background: rgba(19, 28, 51, 0.7);
      }
      .pan.on::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        border-left: 1px solid var(--text);
        border-bottom: 1px solid var(--text);
      }
      .ph {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: 0;
        color: inherit;
        font: inherit;
        cursor: pointer;
        padding: 1.6rem 1.3rem 0;
      }
      .ph .n {
        display: block;
        font: 500 1rem var(--head);
        color: var(--muted);
        transition: font-size 0.4s;
      }
      .ph .t {
        display: block;
        margin-top: 2rem;
        font: 700 1.05rem/1.25 var(--head);
        overflow-wrap: break-word;
        transition: font-size 0.4s;
      }
      .t em {
        font-style: normal;
        color: var(--accent);
      }
      .pan.on .n {
        font-size: 2.3rem;
        color: var(--text);
      }
      .pan.on .t {
        font-size: 1.9rem;
        margin-top: 0.6rem;
      }
      .pb {
        min-width: 520px;
        padding: 1.5rem 1.3rem 2.2rem;
        display: grid;
        grid-template-columns: 1fr 1.25fr;
        gap: 1.5rem 2rem;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.25s,
          visibility 0.25s;
      }
      .pan.on .pb {
        opacity: 1;
        visibility: visible;
        transition:
          opacity 0.4s 0.3s,
          visibility 0s 0.3s;
      }
      .bl {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 1.1rem;
      }
      .bl li {
        position: relative;
        padding-left: 1.1rem;
      }
      .bl li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.7em;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
      }
      .art {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 4/3;
        border-radius: 18px;
        overflow: hidden;
        color: var(--accent);
        background:
          radial-gradient(
            circle at 50% 45%,
            rgba(227, 175, 125, 0.3),
            transparent 62%
          ),
          linear-gradient(135deg, #1f2f5c, #0c1428);
      }
      .big {
        width: 32%;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .go {
        position: absolute;
        right: 0.7rem;
        bottom: 0.7rem;
        width: 52px;
        height: 52px;
        border-radius: 15px;
        background: var(--accent);
        color: #1a1008;
        display: grid;
        place-items: center;
        transition: transform 0.2s;
      }
      .art:hover .go {
        transform: translate(2px, -2px);
      }
      .go svg {
        width: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .pd {
        grid-column: 1/-1;
        margin-top: 0.8rem;
        color: var(--muted);
        font-size: 0.97rem;
        max-width: 62ch;
      }
      @media (max-width: 860px) {
        .acc {
          flex-direction: column;
        }
        .pan,
        .pan.on {
          flex: none;
          border-left: 0;
          border-bottom: 1px solid var(--line);
        }
        .ph {
          display: flex;
          gap: 1rem;
          align-items: baseline;
          padding: 1.3rem 0.2rem;
        }
        .ph .t,
        .pan.on .t {
          margin-top: 0;
          font-size: 1.15rem;
        }
        .pan.on .n {
          font-size: 1.2rem;
        }
        .pb {
          min-width: 0;
          display: none;
          grid-template-columns: 1fr;
          padding: 0 0.2rem 1.6rem;
        }
        .pan.on .pb {
          display: grid;
        }
        .pan.on::after {
          display: none;
        }
      }
      /* credentials */
      .cred {
        padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
        border-bottom: 1px solid var(--line);
        background:
          radial-gradient(
            ellipse at 50% 90%,
            rgba(227, 175, 125, 0.14),
            transparent 60%
          ),
          radial-gradient(
            ellipse at 8% 0,
            rgba(120, 150, 255, 0.14),
            transparent 50%
          ),
          linear-gradient(180deg, #0d1630, #0a1020);
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .stat {
        padding: 0.2rem 0 0.2rem 1.5rem;
        border-left: 1px solid var(--line);
      }
      .stat strong {
        display: block;
        font: 500 clamp(2rem, 3.4vw, 2.7rem)/1.1 var(--head);
      }
      .stat strong small {
        font-size: 0.45em;
        font-weight: 500;
        color: var(--muted);
        margin-left: 0.35rem;
      }
      .stat span {
        color: var(--muted);
        font-size: 0.95rem;
      }
      .cert {
        text-align: center;
        margin-top: clamp(3rem, 6vw, 4.5rem);
      }
      .cert .tag {
        font: 700 1rem var(--head);
      }
      .cert h2 {
        max-width: 30ch;
        margin: 1rem auto 0;
        font-size: clamp(1.6rem, 3.4vw, 2.6rem);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.01em;
      }
      .badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.4rem 3.2rem;
        margin-top: 3rem;
      }
      .badge {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        text-align: left;
        color: var(--muted);
      }
      .badge i {
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: rgba(19, 28, 51, 0.7);
        color: var(--accent);
      }
      .badge svg {
        width: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .badge b {
        display: block;
        font: 600 1rem var(--head);
        color: var(--text);
      }
      .badge small {
        font-size: 0.85rem;
      }
      @media (max-width: 860px) {
        .stats {
          grid-template-columns: 1fr 1fr;
          gap: 1.8rem 0;
        }
        .stat {
          padding-left: 1.1rem;
        }
      }
      /* brands */
      .brands {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 88% 22%,
            rgba(227, 175, 125, 0.2),
            transparent 42%
          ),
          radial-gradient(
            circle at 4% 92%,
            rgba(120, 150, 255, 0.16),
            transparent 38%
          );
      }
      .brands .head {
        position: relative;
        z-index: 1;
        text-align: center;
        margin-bottom: 3rem;
      }
      .brands h2 {
        margin-inline: auto;
      }
      .brands .head p {
        margin: 1rem auto 0;
        color: var(--muted);
        max-width: 48ch;
      }
      .mq {
        position: relative;
        z-index: 1;
        overflow: hidden;
        padding-block: 0.6rem;
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #000 12%,
          #000 88%,
          transparent
        );
        mask-image: linear-gradient(
          90deg,
          transparent,
          #000 12%,
          #000 88%,
          transparent
        );
      }
      .tr {
        display: flex;
        gap: 1.2rem;
        width: max-content;
        animation: mq 45s linear infinite;
      }
      .mq.rev .tr {
        animation-direction: reverse;
        animation-duration: 55s;
      }
      .mq:hover .tr {
        animation-play-state: paused;
      }
      @keyframes mq {
        to {
          transform: translateX(calc(-50% - 0.6rem));
        }
      }
      .bc {
        flex: none;
        width: 230px;
        height: 120px;
        display: grid;
        place-items: center;
        border-radius: 20px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.08),
          rgba(255, 255, 255, 0.02)
        );
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(6px);
        color: var(--text);
        font: 800 1.2rem var(--head);
        letter-spacing: 0.06em;
        text-align: center;
        padding: 1rem;
        transition:
          border-color 0.25s,
          transform 0.25s;
      }
      .bc:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
      }
      .bc img {
        max-width: 70%;
        max-height: 50%;
        object-fit: contain;
      }
      .mq + .mq {
        margin-top: 1.2rem;
      }
      /* process */
      .process {
        background: var(--panel);
      }
      .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        counter-reset: s;
        margin-top: 3rem;
        position: relative;
      }
      .step {
        padding: 0 1.5rem 0 0;
        position: relative;
      }
      .step::before {
        counter-increment: s;
        content: counter(s);
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--bg);
        border: 1px solid var(--accent);
        color: var(--accent);
        font: 700 1rem var(--head);
        margin-bottom: 1.3rem;
        position: relative;
        z-index: 1;
      }
      .step::after {
        content: "";
        position: absolute;
        top: 22px;
        left: 44px;
        right: 0;
        height: 1px;
        background: var(--line);
      }
      .step:last-child::after {
        display: none;
      }
      .step h3 {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
      }
      .step p {
        color: var(--muted);
        font-size: 0.97rem;
      }

      /* about */
      .about {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }
      .about p + p {
        margin-top: 1rem;
      }
      .about p {
        color: var(--muted);
      }
      .values {
        display: grid;
        gap: 1rem;
      }
      .value {
        border-left: 2px solid var(--accent);
        padding: 0.2rem 0 0.2rem 1.2rem;
      }
      .value h3 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
      }
      .value p {
        font-size: 0.97rem;
      }

      /* contact modal */
      [hidden] {
        display: none !important;
      }
      .modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        padding: 1rem;
        background: rgba(4, 8, 18, 0.78);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.25s,
          visibility 0.25s;
      }
      .modal.show {
        opacity: 1;
        visibility: visible;
      }
      .dlg {
        position: relative;
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        width: min(1040px, 100%);
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow: auto;
        border-radius: 20px;
        background: #131c33;
        border: 1px solid var(--line);
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
        transform: translateY(16px) scale(0.98);
        transition: transform 0.25s;
      }
      .modal.show .dlg {
        transform: none;
      }
      .dl {
        background: #0b1226;
        padding: 2.3rem 2rem;
      }
      .dr {
        padding: 2.3rem 2.3rem 2rem;
      }
      .dl h2 {
        font-size: 1.7rem;
        max-width: none;
        font-weight: 700;
      }
      .dl h3 {
        font-size: 1.35rem;
        margin: 0 0 0.4rem;
      }
      .dl p {
        color: var(--text);
        margin-top: 0.7rem;
      }
      .dl hr {
        border: 0;
        border-top: 1px solid var(--line);
        margin: 1.6rem 0;
      }
      .crow {
        display: flex;
        gap: 0.9rem;
        align-items: center;
        margin-top: 1rem;
      }
      .si.l {
        width: 46px;
        height: 46px;
        background: transparent;
      }
      .si.l svg {
        stroke-width: 1.8;
        width: 22px;
      }
      .nx {
        display: flex;
        gap: 0.9rem;
        align-items: center;
        padding: 0.85rem;
        background: #1a2542;
        border-radius: 12px;
        margin-top: 0.7rem;
      }
      .nx b {
        display: block;
        font: 600 0.98rem var(--head);
      }
      .nx small {
        color: var(--muted);
        font-size: 0.85rem;
      }
      .social {
        display: flex;
        gap: 0.8rem;
      }
      .x {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 2;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #131c33;
        border: 1px solid var(--line);
        color: var(--text);
        cursor: pointer;
        display: grid;
        place-items: center;
      }
      .x:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .x svg {
        width: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
      }
      .field {
        display: grid;
        gap: 0.4rem;
        margin-bottom: 0.9rem;
      }
      .field > label,
      legend {
        font: 600 0.98rem var(--body);
        padding: 0;
      }
      legend small {
        font-weight: 400;
        color: var(--muted);
      }
      em {
        color: #ff8a8a;
        font-style: normal;
      }
      .field input,
      .field textarea {
        width: 100%;
        font: inherit;
        color: var(--text);
        background: #1b2646;
        border: 1px solid #2b3a5e;
        border-radius: 10px;
        padding: 0.85rem 1rem;
      }
      .field input::placeholder,
      .field textarea::placeholder {
        color: #7f8aa8;
      }
      .field input:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(227, 175, 125, 0.2);
      }
      .field textarea {
        min-height: 120px;
        resize: vertical;
      }
      .two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .err {
        color: #ff8a8a;
        font-size: 0.84rem;
        min-height: 1.1em;
      }
      fieldset {
        border: 0;
        margin: 0 0 0.6rem;
        padding: 0;
        min-width: 0;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin: 0.6rem 0 0.3rem;
      }
      .chip {
        position: relative;
        cursor: pointer;
      }
      .chip input {
        position: absolute;
        opacity: 0;
        inset: 0;
        margin: 0;
        cursor: pointer;
      }
      .chip span {
        display: block;
        border: 1px solid #2b3a5e;
        border-radius: 10px;
        padding: 0.6rem 1rem;
        color: var(--muted);
        font-size: 0.95rem;
        transition: all 0.2s;
      }
      .chip:hover span {
        border-color: var(--accent);
      }
      .chip input:checked + span {
        background: rgba(227, 175, 125, 0.16);
        border-color: var(--accent);
        color: var(--accent);
      }
      .chip input:focus-visible + span {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .dsoc {
        grid-column: 1/-1;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.1rem 2rem;
        border-top: 1px solid var(--line);
        background: #0b1226;
      }
      .dsoc a {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        color: var(--muted);
        font-size: 0.95rem;
        transition: color 0.2s;
      }
      .dsoc a:hover {
        color: var(--accent);
      }
      .dsoc .si.l {
        width: 38px;
        height: 38px;
      }
      .dsoc .si.l svg {
        width: 18px;
      }
      @media (max-width: 860px) {
        .dsoc {
          order: 2;
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding: 1.1rem 1.4rem;
        }
      }
      .done {
        display: grid;
        justify-items: start;
        gap: 1rem;
        align-content: center;
        min-height: 320px;
      }
      .done h3 {
        font-size: 1.8rem;
      }
      .done p {
        color: var(--muted);
        max-width: 44ch;
      }
      @media (max-width: 860px) {
        .dlg {
          grid-template-columns: 1fr;
        }
        .dr {
          order: -1;
          padding: 2rem 1.4rem 1.5rem;
        }
        .dl {
          padding: 1.8rem 1.4rem;
        }
        .two {
          grid-template-columns: 1fr;
        }
        .modal {
          padding: 0.5rem;
        }
      }
      /* footer */
      footer {
        position: relative;
        background: linear-gradient(180deg, #0a1020, #070c19);
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.95rem;
      }
      .fgrid {
        display: grid;
        grid-template-columns: 0.75fr 2fr;
        gap: 3rem;
        padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
      }
      .fbrand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font: 800 1.2rem var(--head);
        letter-spacing: 0.14em;
        color: var(--copper);
      }
      .fbrand img {
        height: 48px;
        width: auto;
      }
      .ftag {
        margin: 0.9rem 0 1.8rem;
        max-width: 28ch;
      }
      footer address {
        font-style: normal;
        line-height: 1.7;
      }
      footer h3 {
        font: 700 1.05rem var(--head);
        margin: 0 0 1rem;
        color: var(--text);
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--line);
      }
      .ccard {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.1rem 1.2rem;
        border-radius: 14px;
        background: linear-gradient(145deg, #16213f, #101934);
        border: 1px solid var(--line);
        transition:
          transform 0.2s,
          border-color 0.2s;
      }
      .ccard:hover {
        transform: translateY(-3px);
        border-color: var(--accent);
      }
      .ccard .si {
        width: 48px;
        height: 48px;
      }
      .ccard .si svg {
        stroke-width: 1.8;
        width: 24px;
      }
      .ccard small {
        display: block;
        font-size: 0.85rem;
      }
      .ccard b {
        display: block;
        font: 700 1.05rem var(--head);
        color: var(--text);
        word-break: break-word;
      }
      .flinks {
        display: grid;
        grid-template-columns: 0.8fr 1fr 1.7fr auto;
        gap: 2.2rem;
        margin-top: 2.2rem;
      }
      footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.65rem;
      }
      footer ul.two {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
      }
      footer li a {
        transition: color 0.2s;
      }
      footer li a:hover {
        color: var(--accent);
      }
      footer .social a:hover {
        background: var(--accent);
        color: #1a1008;
        border-color: var(--accent);
      }
      .fbar {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        padding-block: 1.4rem;
        border-top: 1px solid var(--line);
        font-size: 0.9rem;
      }
      .fbar a:hover {
        color: var(--accent);
      }
      .mark {
        font: 800 clamp(3rem, 12vw, 10rem)/0.85 var(--head);
        letter-spacing: 0.06em;
        text-align: center;
        color: transparent;
        -webkit-text-stroke: 1px rgba(227, 175, 125, 0.2);
        user-select: none;
        overflow: hidden;
        white-space: nowrap;
        padding-bottom: 0.5rem;
      }
      @media (max-width: 1000px) {
        .fgrid {
          grid-template-columns: 1fr;
        }
        .flinks {
          grid-template-columns: 1fr 1fr;
        }
        .find {
          grid-column: 1/-1;
        }
      }
      @media (max-width: 700px) {
        .cards {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 860px) {
        .menu {
          display: block;
        }
        nav {
          position: absolute;
          left: 0;
          right: 0;
          top: 72px;
          background: var(--bg);
          border-bottom: 1px solid var(--line);
          display: none;
        }
        nav.open {
          display: block;
        }
        nav ul {
          flex-direction: column;
          align-items: flex-start;
          padding: 1.2rem 1.25rem 1.6rem;
          gap: 1.1rem;
        }
        .intro,
        .about,
        .contact .grid {
          grid-template-columns: 1fr;
        }

        .row {
          grid-template-columns: 1fr;
          gap: 0.6rem;
        }
        .row .tag {
          justify-self: start;
        }
        .steps {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .step::after {
          display: none;
        }
        .facts .wrap {
          grid-template-columns: 1fr;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
        }
        html {
          scroll-behavior: auto;
        }
      }

      /* team page */
      #team-view:not([hidden]) {
        animation: fadein 0.45s ease both;
      }
      @keyframes fadein {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      .thero {
        position: relative;
        overflow: hidden;
        padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
        background:
          radial-gradient(ellipse at 18% 8%, #1c2b58 0, transparent 55%),
          radial-gradient(ellipse at 88% 35%, #2b2145 0, transparent 50%),
          linear-gradient(180deg, #0a1020, #0d1630);
      }
      .thero .wrap {
        position: relative;
        z-index: 1;
      }
      .thero h1 {
        margin: 1rem 0 0;
        max-width: 16ch;
        font-size: clamp(2.4rem, 6vw, 4.4rem);
        text-align: left;
      }
      .thero .lead {
        margin-top: 1.5rem;
        max-width: 56ch;
        color: var(--muted);
        font-size: 1.12rem;
      }
      .crumb {
        display: flex;
        gap: 0.6rem;
        font-size: 0.92rem;
        color: var(--muted);
      }
      .crumb a:hover {
        color: var(--accent);
      }
      .crumb [aria-current] {
        color: var(--text);
      }
      .sh {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        max-width: none;
      }
      .lgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem;
        margin-top: 2rem;
      }
      .lc {
        display: grid;
        grid-template-columns: 190px 1fr;
        gap: 1.6rem;
        align-items: center;
        padding: 1.5rem;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: linear-gradient(145deg, #16213f, #101934);
        transition:
          border-color 0.25s,
          transform 0.25s;
      }
      .lc:hover,
      .mc:hover {
        border-color: var(--accent);
        transform: translateY(-4px);
      }
      .av {
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 16px;
        color: var(--accent);
        background:
          radial-gradient(
            circle at 50% 35%,
            rgba(227, 175, 125, 0.28),
            transparent 65%
          ),
          linear-gradient(145deg, #1f2f5c, #0c1428);
      }
      .av svg {
        width: 50%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .role {
        display: block;
        color: var(--accent);
        font: 600 0.82rem var(--head);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .lc h3,
      .mc h3 {
        font-size: 1.3rem;
        margin: 0.45rem 0 0.5rem;
        font-weight: 700;
      }
      .lc p,
      .mc p {
        color: var(--muted);
        font-size: 0.95rem;
      }
      .tsoc {
        margin-top: 1rem;
        gap: 0.5rem;
      }
      .tsoc a {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--muted);
        transition: all 0.2s;
      }
      .tsoc a:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #1a1008;
      }
      .tsoc svg {
        width: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .tmem {
        background: var(--panel);
      }
      .tmhead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.2rem;
        margin-bottom: 2.2rem;
      }
      .fl {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
      }
      .fl button {
        font: inherit;
        font-size: 0.95rem;
        color: var(--muted);
        background: none;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.55rem 1.1rem;
        cursor: pointer;
        transition: all 0.2s;
      }
      .fl button:hover {
        border-color: var(--accent);
      }
      .fl button[aria-pressed="true"] {
        background: rgba(227, 175, 125, 0.16);
        border-color: var(--accent);
        color: var(--accent);
      }
      .mgrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.3rem;
      }
      .mc {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--bg);
        transition:
          border-color 0.25s,
          transform 0.25s;
      }
      .mc .av {
        border-radius: 0;
      }
      .mb {
        padding: 1.2rem 1.3rem 1.4rem;
      }
      .tjoin .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding: clamp(2rem, 5vw, 3.5rem);
        border: 1px solid var(--line);
        border-radius: 26px;
        background:
          radial-gradient(
            circle at 92% 8%,
            rgba(227, 175, 125, 0.22),
            transparent 50%
          ),
          linear-gradient(145deg, #16213f, #0e1730);
      }
      .tjoin h2 {
        font-size: clamp(1.6rem, 3.4vw, 2.4rem);
        max-width: 24ch;
        font-weight: 700;
      }
      @media (max-width: 1000px) {
        .mgrid {
          grid-template-columns: repeat(2, 1fr);
        }
        .lgrid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 520px) {
        .lc {
          grid-template-columns: 1fr;
        }
        .lc .av {
          max-width: 200px;
        }
      }
      @media (max-width: 380px) {
        .mgrid {
          grid-template-columns: 1fr;
        }
      }
      /* ===== responsive: tablet and mobile ===== */
      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      header {
        top: env(safe-area-inset-top, 0px);
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0 0 auto;
        height: env(safe-area-inset-top, 0px);
        z-index: 10;
        background: rgba(10, 16, 32, 0.92);
        backdrop-filter: blur(14px);
      }
      .offer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.6rem 1rem;
      }
      .offer > div {
        flex: 0 0 150px;
      }
      @media (min-width: 1181px) {
        .ph {
          padding: 1.6rem 1rem 0;
        }
        .ph .t {
          font-size: 1rem;
        }
      }

      /* tablet and below: stacked accordion, 3-col industries, 2-col steps, footer */
      @media (max-width: 1180px) {
        .acc {
          flex-direction: column;
        }
        .pan,
        .pan.on {
          flex: none;
          border-left: 0;
          border-bottom: 1px solid var(--line);
        }
        .ph {
          display: flex;
          gap: 1rem;
          align-items: baseline;
          padding: 1.3rem 0.2rem;
        }
        .ph .t,
        .pan.on .t {
          margin-top: 0;
          font-size: 1.2rem;
        }
        .pan.on .n {
          font-size: 1.25rem;
        }
        .pb {
          min-width: 0;
          display: none;
          padding: 0 0.2rem 1.8rem;
        }
        .pan.on .pb {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
        }
        .pan.on::after {
          display: none;
        }
        .pan:not(.on):hover {
          background: none;
        }
      }
      @media (max-width: 1000px) {
        .ind {
          grid-template-columns: repeat(3, 1fr);
        }
        .steps {
          grid-template-columns: 1fr 1fr;
          gap: 2.2rem 1.5rem;
        }
        .step::after {
          display: none;
        }
        .ccard {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.8rem;
        }
        .fgrid {
          gap: 2.2rem;
        }
      }
      /* mobile menu */
      @media (max-width: 860px) {
        nav {
          max-height: calc(100vh - 72px - env(safe-area-inset-top, 0px));
          max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
          overflow-y: auto;
        }
        nav li {
          width: 100%;
        }
        nav a {
          font-size: 1rem;
        }
        .sub-toggle {
          width: 100%;
          justify-content: space-between;
          font-size: 1.02rem;
          padding: 0.55rem 0;
        }
        .sub a {
          padding: 0.55rem 0.2rem;
        }
        nav .btn {
          display: block;
          text-align: center;
          padding: 0.85rem 1.2rem;
        }
        section {
          padding-block: clamp(3rem, 9vw, 4.5rem);
        }
        .intro {
          gap: 1.2rem;
          margin-bottom: 2.2rem;
        }
      }
      /* phones and small tablets */
      @media (max-width: 700px) {
        .cards {
          grid-template-columns: 1fr;
        }
        .ccard {
          flex-direction: row;
          align-items: center;
          gap: 1rem;
        }
      }
      @media (max-width: 600px) {
        .steps {
          grid-template-columns: 1fr;
        }
        .pan.on .pb {
          grid-template-columns: 1fr;
        }
        .bc {
          width: 170px;
          height: 90px;
          font-size: 1rem;
        }
        .badges {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1.2rem 1rem;
          justify-items: start;
        }
        .badge b {
          font-size: 0.92rem;
        }
        .flinks {
          gap: 1.8rem 1.2rem;
        }
        .find ul.two {
          grid-template-columns: 1fr;
        }
        .fbar {
          flex-direction: column;
          align-items: flex-start;
        }
        .mark {
          font-size: clamp(2.2rem, 14vw, 4rem);
        }
      }
      @media (max-width: 560px) {
        .offer > div {
          flex: 0 0 calc(50% - 0.5rem);
        }
        .hero .orb {
          opacity: 0.5;
        }
        .cta .btn {
          width: 100%;
          text-align: center;
        }
      }
      @media (max-width: 520px) {
        .ind {
          grid-template-columns: repeat(2, 1fr);
          gap: 0.8rem;
        }
      }
      @media (max-width: 480px) {
        .pill {
          font-size: 0.82rem;
          padding: 0.5rem 1rem;
          border-radius: 18px;
          line-height: 1.4;
        }
        .dr {
          padding: 2.6rem 1.1rem 1.2rem;
        }
        .dl {
          padding: 1.5rem 1.1rem;
        }
        .chip span {
          padding: 0.5rem 0.8rem;
          font-size: 0.9rem;
        }
        .dsoc {
          padding: 1rem 1.1rem;
        }
        .brand {
          font-size: 0.95rem;
          letter-spacing: 0.1em;
        }
        .brand img {
          height: 34px;
        }
        .fab {
          width: 52px;
          height: 52px;
        }
      }
      /* ===== mega menu ===== */
      .mega .mi {
        width: min(1120px, 100% - 2.5rem);
        margin: 0 auto;
        padding: 1.6rem 0 1.9rem;
      }
      .mega .mt {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-bottom: 1.4rem;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid var(--line);
      }
      .mega .mt i {
        flex: none;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: var(--c, #0b78d4);
        color: #fff;
      }
      .mega .mt i svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .mega .mt b {
        display: block;
        font: 700 1.3rem/1.2 var(--head);
        color: var(--text);
      }
      .mega .mt small {
        display: block;
        color: var(--muted);
        font-size: 0.92rem;
        margin-top: 0.15rem;
      }
      .mega .mg {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem 2.5rem;
      }
      .mega .grp.span {
        grid-column: 1 / -1;
      }
      .mega .mh {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        margin-bottom: 0.7rem;
        font: 800 0.95rem var(--head);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .mega .mh::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        flex: none;
      }
      .mega .mh span {
        background: linear-gradient(90deg, #5b8cff, #b04fd6 55%, #ff5a7a);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .mega .ls {
        display: grid;
        gap: 0.1rem;
      }
      .mega .ls.c2 {
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
      }
      .mega .ls.c3 {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2.5rem;
      }
      .mega .ls a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.5rem;
        border-radius: 8px;
        color: var(--text);
        font: 400 0.95rem/1.3 var(--body);
      }
      .mega .ls a:hover {
        background: rgba(227, 175, 125, 0.1);
        color: var(--accent);
      }
      .mega .ls a svg {
        width: 20px;
        height: 20px;
        flex: none;
        fill: none;
        stroke: #5aa2ff;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      @media (min-width: 861px) {
        .bar {
          position: static;
        }
        .has-sub,
        .has-sub.wide {
          position: static;
        }
        .sub.mega {
          display: block;
          left: 0;
          right: 0;
          top: 100%;
          width: auto;
          min-width: 0;
          padding: 0;
          max-height: calc(100vh - 100px);
          overflow-y: auto;
          background: #0e1730;
          border: 0;
          border-top: 1px solid var(--line);
          border-bottom: 2px solid var(--accent);
          border-radius: 0 0 18px 18px;
        }
      }
      @media (max-width: 860px) {
        .mega .mi {
          width: 100%;
          padding: 0.4rem 0 0.8rem;
        }
        .mega .mt {
          margin-bottom: 1rem;
          padding-bottom: 0.8rem;
        }
        .mega .mg {
          grid-template-columns: 1fr;
          gap: 1.2rem;
        }
        .mega .ls.c2,
        .mega .ls.c3 {
          grid-template-columns: 1fr;
        }
      }
      /* compact desktop nav so five menus plus the button fit on small laptops and tablets */
      @media (min-width: 861px) and (max-width: 1120px) {
        nav ul {
          gap: 1.1rem;
        }
        .sub-toggle {
          font-size: 0.88rem;
        }
        nav .btn {
          padding: 0.55rem 1rem;
          font-size: 0.88rem;
        }
        .brand {
          font-size: 0;
          gap: 0;
        }
      }
      /* ===== portfolio page ===== */
      .pcount {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 1.8rem;
      }
      .pcount span {
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.45rem 1rem;
        font-size: 0.92rem;
        color: var(--muted);
        background: rgba(19, 28, 51, 0.6);
      }
      .pcount b {
        color: var(--accent);
        margin-right: 0.35rem;
      }
      .pgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem;
      }
      .pempty {
        text-align: center;
        color: var(--muted);
        margin-top: 2rem;
      }
      .pc {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(160deg, #141f3d, #0e1730);
        cursor: pointer;
        transition:
          transform 0.25s,
          border-color 0.25s,
          box-shadow 0.25s;
      }
      .pc:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
        box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
      }
      .pm {
        position: relative;
        aspect-ratio: 4/3;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 50% 40%,
            rgba(227, 175, 125, 0.22),
            transparent 62%
          ),
          linear-gradient(135deg, #1c2a55, #0a1128);
      }
      .pm img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .pm .art {
        transition: transform 0.5s;
      }
      .pm .art.app {
        height: 86%;
        width: auto;
      }
      .pm .art.web {
        width: 78%;
        height: auto;
      }
      .pc:hover .art {
        transform: scale(1.05) translateY(-3px);
      }
      .ptag {
        position: absolute;
        left: 0.9rem;
        top: 0.9rem;
        z-index: 1;
        font: 600 0.76rem var(--head);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.35rem 0.75rem;
        border-radius: 999px;
        background: rgba(10, 16, 32, 0.75);
        border: 1px solid var(--line);
        color: var(--accent);
        backdrop-filter: blur(6px);
      }
      .pb2 {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: 1.3rem 1.4rem 1.5rem;
        flex: 1;
      }
      .pb2 h3 {
        font-size: 1.2rem;
        font-weight: 700;
      }
      .pb2 p {
        color: var(--muted);
        font-size: 0.95rem;
      }
      .tech {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: auto;
        padding-top: 0.3rem;
      }
      .tech i {
        font-style: normal;
        font-size: 0.78rem;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 0.2rem 0.55rem;
      }
      .more {
        align-self: flex-start;
        margin-top: 0.4rem;
        background: none;
        border: 0;
        padding: 0;
        color: var(--accent);
        font: 600 0.95rem var(--head);
        cursor: pointer;
      }
      .pc:hover .more {
        text-decoration: underline;
      }
      .pd .dl {
        padding: 1.6rem;
        display: grid;
        align-content: center;
      }
      .pd .pm {
        border-radius: 16px;
        aspect-ratio: 1/1.05;
      }
      .pd .dr {
        padding-top: 2.6rem;
      }
      .pd h2 {
        font-size: clamp(1.6rem, 3vw, 2.1rem);
        max-width: none;
        margin: 0.5rem 0 1rem;
        font-weight: 800;
      }
      .pd h3 {
        font-size: 1rem;
        margin: 1.5rem 0 0.8rem;
      }
      .pdesc {
        color: var(--muted);
      }
      .plinks {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 1.6rem;
      }
      @media (max-width: 1000px) {
        .pgrid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 860px) {
        .pd .dr {
          order: 0;
        }
        .pd .dl {
          padding: 1.2rem 1.2rem 0;
        }
      }
      @media (max-width: 640px) {
        .pgrid {
          grid-template-columns: 1fr;
        }
      }