.fixed-header,
    .fixed-footer {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      width: min(100vw, 1448px);
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 0 clamp(22px, 7.4vw, 102px);
      background: rgba(2,6,12,.94);
      border-color: rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
      box-shadow: 0 0 28px rgba(0,0,0,.45);
    }
    .fixed-header { top: 0; height: clamp(62px, 5.3vw, 76px); border-bottom: 1px solid rgba(255,255,255,.08); }
    .fixed-footer { bottom: 0; min-height: clamp(60px, 5vw, 76px); border-top: 1px solid rgba(255,255,255,.08); }
    .fixed-brand {
      display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
      color: #fff; text-decoration: none; font-size: clamp(15px, 1.32vw, 20px);
      font-weight: 900; letter-spacing: -.03em; white-space: nowrap;
      text-shadow: 0 2px 12px rgba(0,0,0,.9);
    }
    .fixed-brand img {
      width: clamp(36px, 3.6vw, 52px); height: clamp(36px, 3.6vw, 52px);
      object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,174,255,.7));
    }
    .fixed-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 4.2vw, 62px); }
    .fixed-nav a {
      color: rgba(255,255,255,.86); text-decoration: none; font-size: clamp(12px, .93vw, 14px);
      font-weight: 900; white-space: nowrap; transition: color .2s, text-shadow .2s;
    }
    .fixed-nav a:hover { color: #1a8cff; text-shadow: 0 0 12px rgba(26,140,255,.65); }
    .fixed-copy {
      flex: 1 1 auto; min-width: 240px; color: #8b96a6; text-align: center;
      font-size: clamp(11px, .86vw, 13px); font-weight: 700; line-height: 1.4;
    }

    .stage {
      width: min(100vw, 1448px);
      aspect-ratio: 1448 / 1040;
      position: relative;
      overflow: hidden;
      background: url("../images/webcraft-reference-text-fixed.png?v=2") center / 100% 100% no-repeat;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04);
    }

    .stage-footer-cover {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 8.4%;
      z-index: 8;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(2,6,12,.64) 0%, #02060c 30%, #02060c 100%);
    }

    .logo-mask {
      position: absolute;
      background: radial-gradient(circle at 0 50%, rgba(0,112,255,.16), transparent 55%), linear-gradient(90deg, #02060c 0%, #02060c 76%, rgba(2,6,12,.72) 100%);
      pointer-events: none;
    }
    .logo-mask.header { left: 6.75%; top: .99%; width: 16.9%; height: 5.03%; }
    .logo-mask.footer { left: 3.92%; top: 93.37%; width: 16.8%; height: 5.07%; }

    .brand-logo {
      position: absolute; display: flex; align-items: center; gap: .78vw;
      color: #fff; font-weight: 900; letter-spacing: -.03em; line-height: 1;
      text-shadow: 0 2px 12px rgba(0,0,0,.9); white-space: nowrap; z-index: 2; pointer-events: none;
    }
    .brand-logo.header { left: 7.04%; top: 1.16%; font-size: min(1.24vw,18px); }
    .brand-logo.footer { left: 4.28%; top: 94.09%; font-size: min(1.04vw,15px); }
    .brand-logo img { width: min(3.6vw,52px); height: min(3.6vw,52px); object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,174,255,.7)); }
    .brand-logo.footer img { width: min(3vw,43px); height: min(3vw,43px); }

    .hotspot {
      position: absolute; display: block; z-index: 3; border-radius: .6vw;
      border: 0; background: transparent; color: transparent; cursor: pointer;
      overflow: hidden; padding: 0; text-indent: -999px;
    }
    .hotspot:focus-visible { outline: 2px solid #1a8cff; outline-offset: 2px; background: rgba(0,132,255,.12); }

    .nav-home    { left: 34.7%;  top: 2.47%; width: 4.15%; height: 2.72%; }
    .nav-services{ left: 41.2%;  top: 2.47%; width: 5.6%;  height: 2.72%; }
    .nav-portfolio{left: 48.7%;  top: 2.47%; width: 6.6%;  height: 2.72%; }
    .nav-about   { left: 56.95%; top: 2.47%; width: 8.1%;  height: 2.72%; }
    .nav-contact { left: 65%;    top: 2.47%; width: 5.6%;  height: 2.72%; }

    .cta-start    { left: 7.64%;  top: 33.22%; width: 15.36%; height: 4.44%; }
    .cta-portfolio{ left: 24.46%; top: 33.22%; width: 13.55%; height: 4.44%; }

    .project-shockmok{ left: 4.15%;  top: 62.15%; width: 20.45%; height: 18.6%; }
    .project-interior{ left: 39.2%;  top: 77.63%; width: 4.55%;  height: 2.42%; }
    .project-glow    { left: 57.6%;  top: 77.63%; width: 7.1%;   height: 2.42%; }

    .messenger{ left: 28.45%; top: 84.44%; width: 11.65%; height: 5.97%; }
    .facebook { left: 40.68%; top: 84.44%; width: 11.45%; height: 5.97%; }
    .instagram{ left: 52.76%; top: 84.44%; width: 11.55%; height: 5.97%; }
    .whatsapp { left: 65.16%; top: 84.44%; width: 11.38%; height: 5.97%; }
    .phone    { left: 77.28%; top: 84.44%; width: 16.2%;  height: 5.97%; }

    .footer-home    { left: 58.6%; top: 94.99%; width: 4.3%; height: 2.3%; }
    .footer-services{ left: 65.2%; top: 94.99%; width: 5.5%; height: 2.3%; }
    .footer-portfolio{left: 73.7%; top: 94.99%; width: 6.2%; height: 2.3%; }
    .footer-about   { left: 81.8%; top: 94.99%; width: 7.7%; height: 2.3%; }
    .footer-contact { left: 90.6%; top: 94.99%; width: 5%;   height: 2.3%; }

    .copyright-mask {
      position: absolute; left: 17.2%; top: 94.05%; width: 39.2%; height: 3.3%; z-index: 4;
      display: flex; align-items: center; justify-content: center; color: #7f8896;
      text-align: center; background: #02060c; font-size: min(.86vw,12px); font-weight: 600; pointer-events: none;
    }
    .stage .logo-mask.footer,
    .stage .brand-logo.footer,
    .stage .copyright-mask,
    .stage .footer-home,
    .stage .footer-services,
    .stage .footer-portfolio,
    .stage .footer-about,
    .stage .footer-contact { display: none; }

    /* NAV HOVER UNDERLINE */
    .nav-home, .nav-services, .nav-portfolio, .nav-about, .nav-contact { overflow: visible; }
    .nav-home::after, .nav-services::after, .nav-portfolio::after, .nav-about::after, .nav-contact::after {
      content: ''; position: absolute; bottom: 1px; left: 0; right: 0;
      height: 2px; background: #1a8cff; box-shadow: 0 0 8px rgba(26,140,255,.7);
      border-radius: 1px; transform: scaleX(0); transform-origin: center;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    .nav-home:hover::after, .nav-services:hover::after, .nav-portfolio:hover::after,
    .nav-about:hover::after, .nav-contact:hover::after { transform: scaleX(1); }

    /* FLOATING SOCIALS */
    .floating-socials { position: fixed; right: 16px; bottom: 96px; z-index: 20; display: flex; flex-direction: column; gap: 12px; }
    .floating-social {
      width: 52px; height: 52px; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; text-decoration: none;
      border: 1px solid rgba(0,150,255,.95);
      background:
        radial-gradient(circle at 35% 28%, rgba(74,214,255,.34), rgba(0,102,255,.18) 42%, rgba(3,11,24,.96) 72%),
        rgba(2,8,18,.92);
      box-shadow:
        0 0 0 1px rgba(66,190,255,.2) inset,
        0 0 14px rgba(0,132,255,.7),
        0 0 28px rgba(0,132,255,.28),
        0 8px 18px rgba(0,0,0,.52);
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }
    .floating-social:hover {
      transform: scale(1.1);
      border-color: #63d8ff;
      box-shadow:
        0 0 0 1px rgba(117,222,255,.42) inset,
        0 0 20px rgba(0,172,255,.95),
        0 0 38px rgba(0,132,255,.45),
        0 10px 22px rgba(0,0,0,.56);
    }
    .floating-social svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 0 8px rgba(0,174,255,.6)); }
    @media (max-width: 600px) {
      .floating-socials { right: 10px; bottom: 92px; gap: 8px; }
      .floating-social { width: 44px; height: 44px; }
      .floating-social svg { width: 24px; height: 24px; }
    }

    /* CONTACT MODAL */
    .contact-modal { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: rgba(0,5,12,.56); backdrop-filter: blur(4px); }
    .contact-modal.open { display: flex; }
    .contact-panel {
      width: min(430px, calc(100vw - 32px)); border: 1px solid rgba(0,132,255,.75); border-radius: .8vw;
      background: linear-gradient(180deg, rgba(9,18,31,.97), rgba(2,7,14,.98));
      box-shadow: 0 0 34px rgba(0,132,255,.34), 0 22px 60px rgba(0,0,0,.62); padding: min(1.8vw,24px); color: #fff;
    }
    .contact-panel header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .contact-panel h2 { margin: 0; font-size: clamp(18px,1.45vw,22px); line-height: 1.25; }
    .modal-close { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; }
    .modal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .modal-link {
      min-height: 46px; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
      border: 1px solid rgba(0,132,255,.62); border-radius: 8px; background: rgba(0,132,255,.11);
      color: #fff; font-size: clamp(12px,.94vw,14px); font-weight: 800; text-decoration: none;
      padding: 8px 14px; cursor: pointer; font-family: inherit;
    }
    .modal-link:hover { background: rgba(0,132,255,.22); box-shadow: 0 0 18px rgba(0,132,255,.22); }
    .modal-link.phone-link { grid-column: 1 / -1; }
    .modal-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; }
    .modal-icon svg { width: 30px; height: 30px; display: block; }
    .copy-status { min-height: 18px; margin: 10px 0 0; color: #34d5ff; font-size: 12px; font-weight: 800; text-align: center; }

    /* SERVICE PRICE BADGES */
    .srv-price-badge {
      position: absolute; z-index: 5;
      background: rgba(0,195,110,.15); border: 1px solid rgba(0,210,110,.55);
      border-radius: 20px; color: #3dffa0; font-size: min(.78vw,11px); font-weight: 900;
      padding: 3px 10px; pointer-events: none; white-space: nowrap; line-height: 1;
      display: grid; place-items: center;
    }
    .spb-1 { left: 20.5%; top: 44.5%; }
    .spb-2 { left: 43.5%; top: 44.5%; }
    .spb-3 { left: 66.3%; top: 44.5%; }
    .spb-4 { left: 89.2%; top: 44.5%; }

    /* SERVICE CARD HOTSPOTS */
    .srv-hotspot { position: absolute; z-index: 6; border: 0; background: transparent; cursor: pointer; padding: 0; }
    .srv-hs-1 { left: 3.8%;  top: 44%; width: 22.2%; height: 14.5%; }
    .srv-hs-2 { left: 26.8%; top: 44%; width: 22.2%; height: 14.5%; }
    .srv-hs-3 { left: 49.8%; top: 44%; width: 22.2%; height: 14.5%; }
    .srv-hs-4 { left: 72.8%; top: 44%; width: 22.2%; height: 14.5%; }

    /* SERVICE DROPDOWNS */
    .srv-drop {
      position: absolute; z-index: 9; top: 59%; width: 22.2%;
      background: linear-gradient(160deg, rgba(9,18,35,.98), rgba(2,7,20,.99));
      border: 1px solid rgba(26,140,255,.55); border-radius: .6vw;
      box-shadow: 0 6px 32px rgba(26,140,255,.2), 0 16px 40px rgba(0,0,0,.6);
      padding: min(1.4vw,16px); display: none; flex-direction: column; gap: min(.7vw,8px); color: #fff;
    }
    .srv-drop.open { display: flex; }
    .srv-drop-1 { left: 3.8%; }  .srv-drop-2 { left: 26.8%; }
    .srv-drop-3 { left: 49.8%; } .srv-drop-4 { left: 72.8%; }
    .srv-drop-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .srv-drop-name { font-size: min(1vw,13px); font-weight: 900; color: #fff; line-height: 1.2; }
    .srv-drop-price { flex-shrink: 0; background: rgba(0,210,110,.14); border: 1px solid rgba(0,210,110,.4); border-radius: 20px; padding: 2px 9px; font-size: min(.78vw,10px); font-weight: 900; color: #3dffa0; white-space: nowrap; }
    .srv-drop-desc { font-size: min(.82vw,11px); color: rgba(155,190,235,.75); line-height: 1.55; }
    .srv-drop-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 2px; background: rgba(26,140,255,.18); border: 1px solid rgba(26,140,255,.45); border-radius: 6px; color: #69c0ff; font-size: min(.78vw,10px); font-weight: 800; font-family: inherit; padding: 4px 11px; cursor: pointer; text-decoration: none; transition: background .2s; }
    .srv-drop-btn:hover { background: rgba(26,140,255,.32); }
    .srv-drop-close { position: absolute; top: min(.5vw,6px); right: min(.5vw,7px); width: 18px; height: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }

    .content-section {
      width: min(100vw, 1448px);
      padding: clamp(56px, 7vw, 92px) clamp(18px, 7.4vw, 104px);
      color: #fff;
      background:
        radial-gradient(circle at 14% 12%, rgba(0,132,255,.15), transparent 34%),
        linear-gradient(180deg, #02060c 0%, #06101d 100%);
      border-top: 1px solid rgba(0,132,255,.16);
      scroll-margin-top: 96px;
    }
    .content-section.alt {
      background:
        radial-gradient(circle at 86% 8%, rgba(0,210,255,.12), transparent 32%),
        linear-gradient(180deg, #06101d 0%, #02060c 100%);
    }
    .section-kicker {
      margin: 0 0 12px;
      color: #178cff;
      font-size: clamp(15px, 1.1vw, 18px);
      font-weight: 900;
    }
    .content-section h2 {
      margin: 0 0 18px;
      font-size: clamp(30px, 3.1vw, 46px);
      line-height: 1.15;
      letter-spacing: 0;
      text-shadow: 0 0 20px rgba(0,132,255,.22);
    }
    .section-lead {
      max-width: 920px;
      margin: 0 0 30px;
      color: rgba(226,236,250,.78);
      font-size: clamp(15px, 1.15vw, 18px);
      line-height: 1.8;
    }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .info-card {
      min-height: 100%;
      padding: clamp(18px, 1.6vw, 24px);
      border: 1px solid rgba(0,132,255,.35);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(10,20,34,.84), rgba(5,12,22,.9));
      box-shadow: 0 14px 34px rgba(0,0,0,.32);
    }
    .info-card h3 {
      margin: 0 0 10px;
      font-size: clamp(17px, 1.28vw, 22px);
      line-height: 1.35;
    }
    .info-card p {
      margin: 0;
      color: rgba(226,236,250,.72);
      font-size: clamp(13px, .96vw, 15px);
      line-height: 1.7;
    }
    .price {
      display: inline-flex;
      margin: 0 0 14px;
      color: #3dffa0;
      font-weight: 900;
      font-size: clamp(13px, 1vw, 16px);
    }
    .project-meta {
      margin-top: 14px;
      display: grid;
      gap: 6px;
      color: rgba(226,236,250,.72);
      font-size: clamp(12px, .9vw, 14px);
      line-height: 1.55;
    }
    .project-meta strong { color: #fff; }
    .testimonial-card {
      max-width: 980px;
      position: relative;
      padding: clamp(22px, 2.4vw, 34px);
      border: 1px solid rgba(0,132,255,.44);
      border-radius: 8px;
      background:
        radial-gradient(circle at 8% 0%, rgba(0,132,255,.2), transparent 34%),
        linear-gradient(180deg, rgba(9,18,32,.92), rgba(3,9,18,.96));
      box-shadow: 0 0 28px rgba(0,132,255,.16), 0 16px 40px rgba(0,0,0,.42);
    }
    .testimonial-card::before {
      content: "“";
      position: absolute;
      top: 8px;
      left: 22px;
      color: #178cff;
      font-size: clamp(52px, 5vw, 78px);
      font-weight: 900;
      line-height: 1;
      opacity: .9;
    }
    .testimonial-card h3 {
      margin: 0 0 14px;
      padding-left: clamp(28px, 3.4vw, 48px);
      font-size: clamp(20px, 1.55vw, 26px);
      line-height: 1.25;
    }
    .testimonial-card p {
      margin: 0;
      color: rgba(226,236,250,.78);
      font-size: clamp(14px, 1.05vw, 17px);
      line-height: 1.8;
    }
    .testimonial-author {
      display: block;
      margin-top: 18px;
      color: #fff;
      font-weight: 900;
      font-size: clamp(14px, 1.05vw, 16px);
    }
    .section-note {
      margin: 30px 0 0;
      color: #fff;
      font-size: clamp(17px, 1.35vw, 22px);
      font-weight: 900;
    }
    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }
    .contact-actions a,
    .contact-actions button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 18px;
      border: 1px solid rgba(0,132,255,.62);
      border-radius: 8px;
      background: rgba(0,132,255,.12);
      color: #fff;
      text-decoration: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }
    .contact-actions a:hover,
    .contact-actions button:hover { background: rgba(0,132,255,.24); }
    .contact-action-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: grid;
      place-items: center;
    }
    .contact-action-icon svg {
      width: 30px;
      height: 30px;
      display: block;
    }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    @media (max-width: 860px) {
      .fixed-header, .fixed-footer { padding: 0 16px; gap: 14px; }
      .fixed-nav { gap: 16px; }
      .fixed-copy { min-width: 180px; }
      .fixed-footer { flex-wrap: wrap; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
      .fixed-footer .fixed-nav { flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
      .fixed-footer .fixed-copy { order: 3; flex-basis: 100%; min-width: 0; }
    }
    @media (max-width: 640px) {
      .fixed-header { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
      .fixed-footer { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
      .fixed-brand span { display: none; }
      .fixed-nav { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 6px 12px; min-width: 0; }
      .fixed-nav a { font-size: 11px; }
      .fixed-copy { order: 3; flex-basis: 100%; min-width: 0; }
      .info-grid { grid-template-columns: 1fr; }
      .content-section { padding-left: 18px; padding-right: 18px; }
    }