/* Local Necosmic font */
    @font-face {
      font-family: 'Necosmic';
      src: url('../fonts/Necosmic-PersonalUse.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* ============================================================
       PRELOADER
       ============================================================ */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: all;
    }
    #preloader.is-done { pointer-events: none; }
    #preloader.is-done .preloader__ring,
    #preloader.is-done .preloader__label,
    #preloader.is-done .preloader__made,
    #preloader.is-done .preloader__glow-right,
    #preloader.is-done .preloader__glow-left {
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    /* Two halves that split apart on done */
    .preloader__half {
      position: absolute;
      left: 0; right: 0;
      height: 50%;
      background: #0a0a0a;
      transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
      z-index: 1;
    }
    .preloader__half--top { top: 0; }
    .preloader__half--bot { bottom: 0; }
    #preloader.is-done .preloader__half--top { transform: translateY(-100%); }
    #preloader.is-done .preloader__half--bot { transform: translateY(100%); }

    /* Top-left text */
    .preloader__label {
      position: relative;
      z-index: 3;
      position: absolute;
      top: 24px;
      left: 28px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: #fff;
      line-height: 1.6;
      text-transform: uppercase;
      opacity: 0.7;
    }

    /* Bottom-right text */
    .preloader__made {
      position: relative;
      z-index: 3;
      position: absolute;
      bottom: 24px;
      right: 28px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: #fff;
      line-height: 1.6;
      text-transform: uppercase;
      opacity: 0.5;
      text-align: right;
    }

    /* Circle */
    .preloader__ring {
      position: relative;
      z-index: 3;
      position: relative;
      width: 180px;
      height: 180px;
    }
    .preloader__svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    .preloader__track {
      fill: none;
      stroke: rgba(255,255,255,0.08);
      stroke-width: 2;
    }
    .preloader__progress {
      fill: none;
      stroke: #fe4b00;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 502;
      stroke-dashoffset: 502;
      transition: stroke-dashoffset 0.05s linear;
    }

    /* Counter */
    .preloader__counter {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-mono);
      font-size: 48px;
      font-weight: 300;
      color: #fff;
      letter-spacing: -0.02em;
    }
    .preloader__counter sup {
      font-size: 18px;
      font-weight: 300;
      vertical-align: super;
      margin-left: 2px;
    }

    /* Glows */
    .preloader__glow-right {
      position: absolute;
      width: 700px;
      height: 700px;
      right: -20%;
      top: -20%;
      background: radial-gradient(ellipse at center, rgba(254,75,0,0.22) 0%, rgba(254,75,0,0.06) 50%, transparent 70%);
      pointer-events: none;
    }
    .preloader__glow-left {
      position: absolute;
      width: 600px;
      height: 600px;
      left: -15%;
      bottom: -20%;
      background: radial-gradient(ellipse at center, rgba(254,75,0,0.18) 0%, rgba(254,75,0,0.05) 50%, transparent 70%);
      pointer-events: none;
    }

    /* ── Hero reveal after preloader ── */
    .hero--animated .hero__heading {
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
                  transform 0.9s cubic-bezier(0.22,1,0.36,1);
    }
    .hero--animated .hero__tags {
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: opacity 0.9s 0.12s cubic-bezier(0.22,1,0.36,1),
                  transform 0.9s 0.12s cubic-bezier(0.22,1,0.36,1);
    }
    .hero--animated .hero__left-bottom {
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: opacity 0.9s 0.22s cubic-bezier(0.22,1,0.36,1),
                  transform 0.9s 0.22s cubic-bezier(0.22,1,0.36,1);
    }
    .hero--animated .hero__right {
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: opacity 0.9s 0.3s cubic-bezier(0.22,1,0.36,1),
                  transform 0.9s 0.3s cubic-bezier(0.22,1,0.36,1);
    }
    .hero--animated .hero__watermark {
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: opacity 0.9s 0.4s cubic-bezier(0.22,1,0.36,1),
                  transform 0.9s 0.4s cubic-bezier(0.22,1,0.36,1);
    }

/* ============================================================
       CSS CUSTOM PROPERTIES
       ============================================================ */
    :root {
      --clr-bg:         #0a0a0a;
      --clr-bg2:        #111010;
      --clr-accent:     #fe4b00;
      --clr-accent-glow: rgba(254, 75, 0, 0.35);
      --clr-white:      #ffffff;
      --clr-gray:       #b0b0b0;
      --clr-gray-dim:   #6b6b6b;
      --clr-overlay:    rgba(10, 10, 10, 0.55);

      --ff-display: 'Necosmic', sans-serif;
      --ff-mono:    'IBM Plex Mono', monospace;

      --nav-h: 90px;
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--clr-bg);
      color: var(--clr-white);
      font-family: var(--ff-mono);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { display: block; max-width: 100%; }

    /* ============================================================
       HEADER / NAV
       ============================================================ */
    .header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      /* transparent — just a subtle gradient to keep text readable */
      background: linear-gradient(to bottom,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0) 100%);
    }

    /* ── Logo ── */
    .header__logo {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    .header__logo svg {
      height: auto;
      width: 180px;
    }

    /* ── Nav ── */
    .header__nav { display: flex; align-items: center; gap: 36px; }

    .nav__item {
      font-family: var(--ff-mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--clr-white);
      opacity: 0.85;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s, color 0.2s;
      cursor: pointer;
    }
    .nav__icon {
      width: 14px;
      height: 14px;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.2s, transform 0.2s;
      flex-shrink: 0;
    }
    .nav__item:hover { opacity: 1; color: var(--clr-white); }
    .nav__item:hover .nav__icon { opacity: 1; transform: translateX(0); }
    .nav__item--active { opacity: 1; }
    .nav__item--active .nav__icon { opacity: 1; transform: translateX(0); }

    /* ── CTA Phone Button ── */
    .header__cta {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--clr-accent);
      color: var(--clr-white);
      font-family: var(--ff-mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
      white-space: nowrap;
    }
    .header__cta:hover {
      background: #ff6820;
      box-shadow: 0 0 24px var(--clr-accent-glow);
      transform: translateY(-1px);
    }
    .header__cta .icon { flex-shrink: 0; }

    /* Hamburger (mobile) */
    .header__hamburger {
      display: none;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
      outline: none;
    }
    .header__hamburger span {
      display: block;
      width: 40px;
      height: 2px;
      background: var(--clr-white);
      transition: transform 0.3s, opacity 0.3s;
    }
    

    /* ============================================================
       HERO SECTION
       ============================================================ */
    .hero {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }


    /* ── Background logo mark (overlaps image) ── */
    .hero__logo-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 1200px;
      z-index: 3;
      pointer-events: none;
    }
    .hero__logo-bg img {
      width: 100%;
      height: auto;
      display: block;
    }
    .hero__bg-vid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.9;
    }
    .hero__bg-vid--mobile { display: none; }
    @media (max-width: 992px) {
      .header__nav { display: none; }
      .header__cta { display: none; }
      .header__hamburger { display: flex; }
      .header__logo svg { height: auto; width: 170px; }
      .hero__bg-vid--desktop { display: none; }
      .hero__bg-vid--mobile  { display: block; }
    }
    /* ── Background image ── */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero__bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.82;
    }

    /* Poster image shown behind video until it plays */
    .hero__bg-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      opacity: 0.82;
      z-index: 1;
      transition: opacity 0.8s ease;
    }
    .hero__bg-poster.is-hidden {
      opacity: 0;
      pointer-events: none;
    }
    /* Dark gradient overlays to blend image into layout */
    .hero__bg::after { content: none; }

    /* Orange glow spot behind robot head */
    .hero__glow {
      position: absolute;
      width: 700px;
      height: 700px;
      right: -20%;
      top: -20%;
      background: radial-gradient(
        ellipse at center,
        rgba(254, 75, 0, 0.22) 0%,
        rgba(254, 75, 0, 0.06) 50%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 1;
    }
    .hero__glow--bottom-left {
      position: absolute;
      width: 600px;
      height: 600px;
      left: -5%;
      bottom: -10%;
      background: radial-gradient(
        ellipse at center,
        rgba(254, 75, 0, 0.18) 0%,
        rgba(254, 75, 0, 0.05) 50%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 1;
    }

    /* ── Content grid ── */
    .hero__content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr auto;
      padding: calc(var(--nav-h) + 40px) 40px 40px;
      min-height: 100vh;
      align-items: stretch;
    }

    /* ── LEFT column ── */
    .hero__left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 32px;
      grid-row: 1 / 3;
    }

    /* Big display heading */
    .hero__heading {
      font-family: var(--ff-display);
      font-size: clamp(52px, 7vw, 108px);
      font-weight: normal;
      line-height: 0.92;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--clr-white);
      /* animation */
      opacity: 0; transform: translateY(28px);
    }

    /* Tags row */
    .hero__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
      opacity: 0; transform: translateY(28px);
    }
    .hero__tag {
      font-family: var(--ff-mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #ffffff;
      padding: 4px 10px;
    }

    /* Bottom left content group */
    .hero__left-bottom {
      margin-top: auto;
      opacity: 0; transform: translateY(28px);
    }

    .hero__subheading {
      font-family: var(--ff-mono);
      font-size: clamp(18px, 2.5vw, 36px);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--clr-white);
      max-width: 620px;
      margin-bottom: 16px;
    }

    .hero__desc {
      font-family: var(--ff-mono);
      font-size: clamp(14px, 1.5vw, 20px);
      font-weight: 300;
      line-height: 1.3;
      color: #ffffff;
      max-width: 650px;
      margin-bottom: 50px;
    }

    /* CTA button */
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--clr-accent);
      color: var(--clr-white);
      font-family: var(--ff-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 14px 28px;
      border: none;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.25s, transform 0.15s;
      position: relative;
      overflow: hidden;
    }
    .btn-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transform: translateX(-100%);
      transition: transform 0.45s ease;
    }
    .btn-cta:hover { box-shadow: 0 0 32px var(--clr-accent-glow); transform: translateY(-2px); }
    .btn-cta:hover::before { transform: translateX(100%); }

    /* ── RIGHT column ── */
    .hero__right {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      padding-left: 32px;
      grid-row: 1;
      opacity: 0; transform: translateY(28px);
    }

    .hero__right-block {
      max-width: 340px;
      text-align: right;
    }

    .hero__right-title {
      font-family: var(--ff-mono);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--clr-white);
      margin-bottom: 16px;
      text-align: left;
    }

    .hero__right-text {
      font-family: var(--ff-mono);
      font-size: 13px;
      font-weight: 300;
      line-height: 1.3;
      color: #ffffff;
      text-align: justify;
    }

    /* ── Bottom-right large watermark ── */
    .hero__watermark {
      grid-column: 2;
      grid-row: 2;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      opacity: 0; transform: translateY(28px);
    }

    .hero__watermark-text {
      font-family: var(--ff-display);
      font-size: 112px;
      font-weight: normal;
      line-height: 0.88;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: #fff;
      text-align: right;
      user-select: none;
      pointer-events: none;
      white-space: nowrap;
    }

    /* ============================================================
       ANIMATIONS
       ============================================================ */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ============================================================
       FULLSCREEN MENU OVERLAY
       ============================================================ */
    .mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: #0f0e0e;
      display: flex;
      flex-direction: column;
      pointer-events: none;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
      overflow: hidden;
    }
    .mobile-nav.is-open {
      clip-path: inset(0 0 0% 0);
      pointer-events: all;
    }

    /* Glows */
    .mobile-nav__glow-right {
      position: absolute;
      width: 600px; height: 600px;
      right: -15%; top: -15%;
      background: radial-gradient(ellipse at center, rgba(254,75,0,0.18) 0%, rgba(254,75,0,0.05) 50%, transparent 70%);
      pointer-events: none;
    }
    .mobile-nav__glow-left {
      position: absolute;
      width: 500px; height: 500px;
      left: -10%; bottom: -15%;
      background: radial-gradient(ellipse at center, rgba(254,75,0,0.22) 0%, rgba(254,75,0,0.04) 50%, transparent 70%);
      pointer-events: none;
    }

    /* Header row inside menu */
    .mobile-nav__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      height: 90px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    /* Close button */
    .mobile-nav__close {
      background: none;
      border: none;
      cursor: pointer;
      color: #fff;
      font-size: 28px;
      line-height: 1;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.8;
      transition: opacity 0.2s;
    }
    .mobile-nav__close:hover { opacity: 1; }

    /* Nav list */
    .mobile-nav__list {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 0;
    }

    /* Each nav item row */
    .mobile-nav__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      text-decoration: none;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1),
                  transform 0.5s cubic-bezier(0.22,1,0.36,1),
                  background 0.2s;
      min-height: 80px;
    }
    .mobile-nav__item:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
    .mobile-nav__item:hover { background: rgba(255,255,255,0.03); }

    .mobile-nav__item-text {
      font-family: var(--ff-mono);
      font-size: clamp(26px, 7vw, 40px);
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      letter-spacing: 0.02em;
    }
    .mobile-nav__item-text span {
      color: var(--clr-accent);
    }
    .mobile-nav__item-arrow {
      color: #fff;
      opacity: 0.7;
      flex-shrink: 0;
      transition: transform 0.2s, opacity 0.2s;
    }
    .mobile-nav__item:hover .mobile-nav__item-arrow {
      transform: translateX(4px);
      opacity: 1;
    }

    /* Stagger in */
    .mobile-nav.is-open .mobile-nav__item { opacity: 1; transform: translateY(0); }
    .mobile-nav.is-open .mobile-nav__item:nth-child(1) { transition-delay: 0.15s; }
    .mobile-nav.is-open .mobile-nav__item:nth-child(2) { transition-delay: 0.22s; }
    .mobile-nav.is-open .mobile-nav__item:nth-child(3) { transition-delay: 0.29s; }
    .mobile-nav.is-open .mobile-nav__item:nth-child(4) { transition-delay: 0.36s; }
    .mobile-nav.is-open .mobile-nav__item:nth-child(5) { transition-delay: 0.43s; }

    /* Stagger out */
    .mobile-nav:not(.is-open) .mobile-nav__item {
      opacity: 0;
      transform: translateY(-20px);
      transition-delay: 0s !important;
    }

    /* ============================================================
       RESPONSIVE — TABLET (≤ 1024px)
       ============================================================ */
    @media (max-width: 1024px) {
      .header { padding: 0 24px; }
      .header__nav { gap: 20px; }

      .hero__content {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: calc(var(--nav-h) + 24px) 24px 24px;
        align-items: start;
        gap: 40px;
      }

      .hero__left { grid-row: 1; padding-right: 0; }
      .hero__right { grid-row: 2; grid-column: 1; padding-left: 0; align-items: flex-start; }
      .hero__right-block { text-align: left; }
      .hero__right-text { text-align: left; }
      .hero__watermark { grid-column: 1; grid-row: 3; justify-content: flex-start; }
      .hero__watermark-text { white-space: normal; font-size: clamp(40px, 10vw, 72px); }

      .hero__bg::after { content: none; }
    }

    /* ============================================================
       RESPONSIVE — MOBILE (≤ 768px)
       ============================================================ */
    @media (max-width: 768px) {
      /* Header */
      .header { padding: 0 20px; }

      /* Hero layout: single column, content at bottom */
      .hero__content {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 0 20px 70px;
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
        align-items: end;
        min-height: 100vh;
        min-height: 100dvh;
      }

      /* Left column full width, at bottom */
      .hero__left {
        grid-row: 1;
        grid-column: 1;
        padding-right: 0;
        justify-content: flex-end;
        padding-top: 0;
      }

      /* Hide right block and watermark on mobile */
      .hero__right { display: none; }
      .hero__watermark { display: none; }

      /* Large heading: UI/UX DESIGNER */
      .hero__heading {
        font-size: 14vw;
        line-height: 0.95;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
        width: 100%;
      }

      /* Tags row */
      .hero__tags {
        gap: 4px;
        margin-top: 12px;
        margin-bottom: 20px;
      }
      .hero__tag { font-size: 10px; padding: 3px 6px; }

      /* Subheading */
      .hero__subheading {
        font-size: 24px;
        max-width: 100%;
        margin-bottom: 30px;
      }
      .hero__tags { margin-bottom: 10px; }

      /* Desc hidden on mobile */
      .hero__desc { display: none; }

      /* CTA button full width */
      .btn-cta {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
        font-size: 13px;
        box-sizing: border-box;
      }

      /* Left bottom flush */
      .hero__left-bottom { margin-top: 16px; }

      /* Logo bg */
      .hero__logo-bg {
        width: 225%;
        max-width: 2700px;
      }

      /* Glows */
      .hero__glow {
        width: 500px;
        height: 500px;
        right: -50%;
        top: -30%;
      }
      .hero__glow--bottom-left {
        width: 750px;
        height: 750px;
        left: -95%;
        bottom: -19%;
        background: radial-gradient(ellipse at center, rgb(254 75 0 / 39%) 0%, rgba(254, 75, 0, 0.05) 50%, transparent 70%);
      }
    }

    @media (max-width: 480px) {
      .hero__heading { font-size: 14vw; letter-spacing: -0.02em; }
      .hero__subheading { font-size: clamp(14px, 4vw, 20px); }
    }

    /* ============================================================
       PRELOADER
       ============================================================ */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: all;
    }
    #preloader.is-done { pointer-events: none; }
    #preloader.is-done .preloader__ring,
    #preloader.is-done .preloader__label,
    #preloader.is-done .preloader__made,
    #preloader.is-done .preloader__glow-right,
    #preloader.is-done .preloader__glow-left {
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    /* Two halves that split apart on done */
    .preloader__half {
      position: absolute;
      left: 0; right: 0;
      height: 50%;
      background: #0a0a0a;
      transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
      z-index: 1;
    }
    .preloader__half--top { top: 0; }
    .preloader__half--bot { bottom: 0; }
    #preloader.is-done .preloader__half--top { transform: translateY(-100%); }
    #preloader.is-done .preloader__half--bot { transform: translateY(100%); }

    /* Top-left text */
    .preloader__label {
      position: relative;
      z-index: 3;
      position: absolute;
      top: 24px;
      left: 28px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: #fff;
      line-height: 1.6;
      text-transform: uppercase;
      opacity: 0.7;
    }

    /* Bottom-right text */
    .preloader__made {
      position: relative;
      z-index: 3;
      position: absolute;
      bottom: 24px;
      right: 28px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: #fff;
      line-height: 1.6;
      text-transform: uppercase;
      opacity: 0.5;
      text-align: right;
    }

    /* Circle */
    .preloader__ring {
      position: relative;
      z-index: 3;
      position: relative;
      width: 180px;
      height: 180px;
    }
    .preloader__svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    .preloader__track {
      fill: none;
      stroke: rgba(255,255,255,0.08);
      stroke-width: 2;
    }
    .preloader__progress {
      fill: none;
      stroke: #fe4b00;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 502;
      stroke-dashoffset: 502;
      transition: stroke-dashoffset 0.05s linear;
    }

    /* Counter */
    .preloader__counter {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-mono);
      font-size: 48px;
      font-weight: 300;
      color: #fff;
      letter-spacing: -0.02em;
    }
    .preloader__counter sup {
      font-size: 18px;
      font-weight: 300;
      vertical-align: super;
      margin-left: 2px;
    }

    /* Glows */
    .preloader__glow-right {
      position: absolute;
      width: 700px;
      height: 700px;
      right: -20%;
      top: -20%;
      background: radial-gradient(ellipse at center, rgba(254,75,0,0.22) 0%, rgba(254,75,0,0.06) 50%, transparent 70%);
      pointer-events: none;
    }
    .preloader__glow-left {
      position: absolute;
      width: 600px;
      height: 600px;
      left: -15%;
      bottom: -20%;
      background: radial-gradient(ellipse at center, rgba(254,75,0,0.18) 0%, rgba(254,75,0,0.05) 50%, transparent 70%);
      pointer-events: none;
    }