/* ==========================================================================
   AMSEQ Semiconductor Equipment Website
   --------------------------------------------------------------------------
   Purpose: Presentation website for semiconductor process equipment.
   Notes:   Visual declarations are intentionally preserved from the original
            approved output; this file only organizes styles for maintainability.
   ========================================================================== */

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

    :root {
      --color-bg:       #030432;
      --color-alt1:     #0E285C;
      --color-alt2:     #4F4F6E;
      --color-text:     #FFFFFF;
      --color-accent:   #F2A249;
      --color-muted:    rgba(255,255,255,0.55);
      --color-border:   rgba(255,255,255,0.08);

      --nav-height:     72px;
      --font:           'Aptos', 'Nunito Sans', system-ui, sans-serif;
      --transition:     0.2s ease;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
    }


    /* ============================================================
       NAVIGATION
    ============================================================ */
    .nav {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 100;
      height: var(--nav-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: 52px;
      background: var(--color-bg);
      border-bottom: 1px solid var(--color-border);
      backdrop-filter: blur(18px);
    }

    /* Logo */
    .nav__logo {
      display: flex;
      align-items: center;
      cursor: pointer;
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav__logo img {
      height: 42px;
      width: auto;
      display: block;
    }

    /* Menu */
    .nav__menu {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .nav__item { position: relative; }

    .nav__link {
      display: flex;
      align-items: center;
      gap: 5px;
      height: var(--nav-height);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: color var(--transition);
      background: none;
      border: none;
      font-family: var(--font);
    }
    .nav__link:hover,
    .nav__link--active { color: var(--color-accent); }

    /* Dropdown arrow */
    .nav__arrow {
      font-size: 8px;
      opacity: 0.5;
      transition: transform var(--transition);
      pointer-events: none;
    }
    .nav__item:hover .nav__arrow { transform: rotate(180deg); }

    /* Dropdown */
    .nav__dropdown {
      list-style: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      min-width: 160px;
      background: rgba(3, 4, 50, 0.97);
      border: 1px solid var(--color-border);
      border-top: 2px solid var(--color-accent);
      backdrop-filter: blur(16px);
      padding-block: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition), transform var(--transition);
    }
    .nav__item:hover .nav__dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .nav__dropdown-link {
      display: block;
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 400;
      color: var(--color-muted);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--transition), background var(--transition), padding-left var(--transition);
    }
    .nav__dropdown-link:hover {
      color: var(--color-accent);
      background: rgba(242, 162, 73, 0.06);
      padding-left: 26px;
    }

    /* Mobile hamburger (hidden on desktop) */
    .nav__hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
    }
    .nav__hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--color-text);
      transition: transform var(--transition), opacity var(--transition);
    }


    /* ============================================================
       HERO SECTION
    ============================================================ */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero__canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .hero__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      pointer-events: none;
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(3, 4, 50, 0.78) 0%,
        rgba(14, 40, 92, 0.40) 55%,
        rgba(3, 4, 50, 0.55) 100%
      );
    }

    .hero__content {
      position: relative;
      z-index: 1;
      padding-inline: 80px;
      max-width: 820px;
    }

    .hero__title {
      font-size: clamp(32px, 4.5vw, 60px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.5px;
      color: var(--color-text);
      margin-bottom: 24px;
    }

    .hero__body {
      font-size: clamp(14px, 1.4vw, 17px);
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255, 255, 255, 0.68);
      max-width: 620px;
      margin-bottom: 44px;
    }

    .hero__cta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }


    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 40px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: background var(--transition), transform var(--transition);
    }
    .btn--primary {
      background: var(--color-accent);
      color: var(--color-bg);
    }
    .btn--primary:hover {
      background: #f5b469;
      transform: translateY(-2px);
    }
    .btn--outline {
      background: transparent;
      color: var(--color-text);
      border: 1px solid rgba(255,255,255,0.25);
    }
    .btn--outline:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }


    /* ============================================================
       SCROLL SECTIONS
    ============================================================ */
    .section {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .section--white   { background: #ffffff; }
    .section--dark    { background: var(--color-bg); }
    .section--accent  { background: var(--color-accent); }
    .section--short   { height: 40vh; }

    /* Placeholder label — remove when content is added */
    .section__placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      user-select: none;
      pointer-events: none;
    }
    .section__placeholder-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      opacity: 0.2;
    }
    .section__placeholder-name {
      font-size: clamp(32px, 5vw, 64px);
      font-weight: 800;
      letter-spacing: -2px;
      opacity: 0.07;
    }


    /* ============================================================
       TAB PAGES (Overlay)
    ============================================================ */
    .tab-page {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: var(--color-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .tab-page.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .tab-page__back {
      position: absolute;
      top: calc(var(--nav-height) + 20px);
      left: 52px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 18px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--color-muted);
      border: 1px solid var(--color-border);
      cursor: pointer;
      background: none;
      font-family: var(--font);
      transition: color var(--transition), border-color var(--transition);
    }
    .tab-page__back:hover {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }

    .tab-page__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      user-select: none;
      pointer-events: none;
    }
    .tab-page__label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      opacity: 0.25;
    }
    .tab-page__name {
      font-size: clamp(40px, 6vw, 80px);
      font-weight: 800;
      letter-spacing: -3px;
      opacity: 0.07;
    }


    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1024px) {
      .nav { padding-inline: 32px; }
      .hero__content { padding-inline: 48px; }
    }

    @media (max-width: 768px) {
      .nav { padding-inline: 20px; }

      .nav__menu {
        position: fixed;
        inset-block: var(--nav-height) 0;
        inset-inline-start: 0;
        width: 260px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--color-bg);
        border-right: 1px solid var(--color-border);
        padding-block: 24px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 99;
        overflow-y: auto;
      }
      .nav__menu.is-open { transform: translateX(0); }

      .nav__link { height: auto; padding: 12px 24px; width: 100%; }
      .nav__item { width: 100%; }

      .nav__dropdown {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        background: rgba(14, 40, 92, 0.4);
        border: none;
        border-left: 2px solid var(--color-accent);
        margin-left: 24px;
        width: calc(100% - 24px);
        display: none;
      }
      .nav__item.is-open .nav__dropdown { display: block; }
      .nav__item:hover .nav__dropdown { transform: none; }

      .nav__hamburger { display: flex; }

      .hero__content { padding-inline: 24px; }

      .tab-page__back { left: 20px; }
    }


    /* ============================================================
       CONTACT SECTION
    ============================================================ */
    .contact{height:auto;min-height:100vh;padding-block:calc(var(--nav-height) + 72px) 80px;align-items:flex-start}
    .contact__inner{width:100%;max-width:1200px;margin-inline:auto;padding-inline:52px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
    .contact__tag{font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--color-accent);margin-bottom:12px}
    .contact__title{font-size:clamp(28px,3.5vw,48px);font-weight:700;letter-spacing:-0.5px;color:var(--color-text);margin-bottom:36px}
    .contact__details{display:flex;flex-direction:column;gap:20px;margin-bottom:36px}
    .contact__detail{display:flex;align-items:flex-start;gap:14px}
    .contact__detail-icon{font-size:18px;flex-shrink:0;margin-top:2px;filter:grayscale(1) brightness(1.5)}
    .contact__detail-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--color-accent);margin-bottom:4px}
    .contact__detail-value{font-size:14px;font-weight:300;color:rgba(255,255,255,0.75);line-height:1.6}
    .contact__map{width:100%;height:240px;border:1px solid var(--color-border);overflow:hidden}
    .contact__form{display:flex;flex-direction:column;gap:16px}
    .form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .form__group{display:flex;flex-direction:column;gap:6px}
    .form__label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--color-accent)}
    .form__input{background:rgba(255,255,255,0.04);border:1px solid var(--color-border);color:var(--color-text);padding:12px 16px;font-family:var(--font);font-size:14px;font-weight:300;outline:none;transition:border-color var(--transition),background var(--transition);width:100%;appearance:none}
    .form__input:focus{border-color:var(--color-accent);background:rgba(242,162,73,0.04)}
    .form__input::placeholder{color:rgba(255,255,255,0.25)}
    .form__input option{background:var(--color-bg);color:var(--color-text)}
    .form__input--textarea{min-height:148px;resize:vertical}
    @media(max-width:1024px){.contact__inner{padding-inline:32px;gap:48px}}
    @media(max-width:768px){.contact__inner{grid-template-columns:1fr;padding-inline:24px;gap:40px}.form__row{grid-template-columns:1fr}.contact__map{height:200px}}

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer {
      background: var(--color-accent);
      border-top: 1px solid rgba(242,162,73,0.2);
      padding-block: 64px 0;
    }
    .site-footer__inner {
      max-width: 1200px;
      margin-inline: auto;
      padding-inline: 52px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(3,4,50,0.15);
    }
    .site-footer__logo {
      height: 36px;
      width: auto;
      display: block;
      margin-bottom: 16px;
    }
    .site-footer__tagline {
      font-size: 13px;
      font-weight: 300;
      color: rgba(3,4,50,0.6);
      line-height: 1.7;
      max-width: 240px;
    }
    .site-footer__heading {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--color-bg);
      margin-bottom: 16px;
    }
    .site-footer__links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .site-footer__links li,
    .site-footer__links a {
      font-size: 13px;
      font-weight: 300;
      color: rgba(3,4,50,0.7);
      text-decoration: none;
      transition: color var(--transition);
    }
    .site-footer__links a:hover { color: #030432; font-weight:500; }
    .site-footer__links--plain li { cursor: default; }

    .site-footer__copy {
      display: block;
      font-size: 12px;
      color: rgba(3,4,50,0.55);
      margin-bottom: 12px;
    }
    .site-footer__legal {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .site-footer__legal a {
      font-size: 12px;
      color: rgba(3,4,50,0.55);
      text-decoration: none;
      transition: color var(--transition);
    }
    .site-footer__legal a:hover { color: #030432; font-weight: 500; }

    @media (max-width: 1024px) {
      .site-footer__inner { grid-template-columns: 1fr 1fr; padding-inline: 32px; }
    }
    @media (max-width: 768px) {
      .site-footer__inner { grid-template-columns: 1fr; padding-inline: 24px; gap: 28px; }
    }

    /* ============================================================
       LANDING PAGE COLUMN LAYOUTS
    ============================================================ */
    .lp {
      display: flex;
      width: 100%;
      min-height: 100vh;
    }
    .lp--2col .lp__col  { flex: 1; }
    .lp--2col .lp__col--narrow { flex: 0 0 40%; }
    .lp--2col .lp__col--wide   { flex: 0 0 60%; }
    .lp--3col .lp__col  { flex: 1; }
    .lp--4col .lp__col  { flex: 1; }

    /* Column backgrounds */
    .lp__col { display: flex; flex-direction: column; padding: 60px 40px; gap: 20px; }
    .lp__col--dark   { background: var(--color-bg); }
    .lp__col--white  { background: #ffffff; }
    .lp__col--accent { background: var(--color-accent); }

    /* Labels */
    .lp__label {
      font-size: 10px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: var(--color-accent);
    }
    .lp__label--dark { color: var(--color-bg); }

    /* Title slots */
    .lp__title-slot {
      font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.15);
      border: 1.5px dashed rgba(255,255,255,0.12);
      padding: 16px; border-radius: 4px; letter-spacing: -0.5px;
    }
    .lp__title-slot--dark {
      color: rgba(3,4,50,0.2);
      border-color: rgba(3,4,50,0.15);
    }

    /* Text slots */
    .lp__text-slot {
      font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.2);
      border: 1.5px dashed rgba(255,255,255,0.1);
      padding: 14px; border-radius: 4px; line-height: 1.7; min-height: 60px;
    }
    .lp__text-slot--dark {
      color: rgba(3,4,50,0.25);
      border-color: rgba(3,4,50,0.15);
    }

    /* Image slots */
    .lp__img-slot {
      display: flex; align-items: center; justify-content: center;
      border: 1.5px dashed rgba(255,255,255,0.15);
      border-radius: 4px; color: rgba(255,255,255,0.2);
      font-size: 11px; font-weight: 500; letter-spacing: 1px;
      text-transform: uppercase;
    }
    .lp__col--white  .lp__img-slot,
    .lp__col--accent .lp__img-slot {
      border-color: rgba(3,4,50,0.18); color: rgba(3,4,50,0.25);
    }
    .lp__img-slot--tall   { flex: 1; min-height: 220px; }
    .lp__img-slot--half   { flex: 1; min-height: 140px; }
    .lp__img-slot--square { min-height: 120px; }
    .lp__img-slot--full   { flex: 1; min-height: 180px; }

    /* 2x2 inner grid for lab devices */
    .lp__grid-2 {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px; flex: 1;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .lp { flex-direction: column; }
      .lp--2col .lp__col--narrow,
      .lp--2col .lp__col--wide { flex: unset; }
      .lp__col { padding: 40px 24px; }
    }

    /* ============================================================
       LAB DEVICES SECTION
    ============================================================ */
    .lab-section {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: var(--color-accent);
      display: flex;
      flex-direction: column;
      padding-top: var(--nav-height);
      overflow: hidden;
    }

    .lab-bg-grid {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(3,4,50,0.1) 1px, transparent 1px);
      background-size: 36px 36px;
      pointer-events: none;
      z-index: 0;
    }

    /* Intro */
    .lab-intro {
      position: relative;
      z-index: 1;
      padding: 48px 64px 32px;
      display: flex;
      align-items: baseline;
      gap: 40px;
      flex-wrap: wrap;
      border-bottom: 1px solid rgba(3,4,50,0.1);
    }

    .lab-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(3,4,50,0.5);
      flex-shrink: 0;
    }

    .lab-title {
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1;
      color: var(--color-bg);
      flex-shrink: 0;
    }

    .lab-subtitle {
      font-size: 13px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(3,4,50,0.55);
      max-width: 360px;
    }

    /* Annotated canvas */
    .lab-canvas {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      flex: 1;
      padding: 40px 48px;
      gap: 0;
    }

    /* Image */
    .lab-img-wrap {
      flex: 0 0 55%;
      min-width: 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow:
        0 24px 64px rgba(3,4,50,0.25),
        0 0 0 1px rgba(3,4,50,0.12);
      position: relative;
      z-index: 1;
    }

    .lab-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Annotation columns */
    .lab-annots {
      flex: 0 0 220px;
      display: flex;
      flex-direction: column;
      gap: 40px;
      justify-content: center;
      padding: 0;
      position: relative;
      z-index: 2;
    }

    .lab-annot {
      display: flex;
      align-items: center;
    }

    .lab-annots--left .lab-annot { flex-direction: row; }
    .lab-annots--right .lab-annot { flex-direction: row-reverse; }

    /* Connector: line + dot */
    .lab-annot__connector {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .lab-annots--left .lab-annot__connector { flex-direction: row; }
    .lab-annots--right .lab-annot__connector { flex-direction: row-reverse; }

    .lab-annot__line {
      width: 48px;
      height: 1.5px;
      background: rgba(3,4,50,0.35);
    }

    .lab-annot__dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--color-bg);
      border: 2px solid var(--color-bg);
      box-shadow: 0 0 0 3px rgba(3,4,50,0.15);
      flex-shrink: 0;
      animation: labDotPulse 2.4s ease-in-out infinite;
    }
    .lab-annot:nth-child(2) .lab-annot__dot { animation-delay: 1.2s; }

    @keyframes labDotPulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(3,4,50,0.15); }
      50%       { box-shadow: 0 0 0 7px rgba(3,4,50,0.04); }
    }

    /* Card */
    .lab-annot__card {
      background: var(--color-bg);
      padding: 12px 16px;
      flex: 1;
      min-width: 0;
    }

    .lab-annots--left .lab-annot__card {
      border-right: 3px solid var(--color-accent);
      text-align: right;
    }
    .lab-annots--right .lab-annot__card {
      border-left: 3px solid var(--color-accent);
      text-align: left;
    }

    .lab-annot__card strong {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
    }

    .lab-annot__card span {
      font-size: 11px;
      font-weight: 300;
      color: rgba(255,255,255,0.5);
      line-height: 1.5;
    }

    /* Specs bar */
    .lab-specs-bar {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      background: rgba(3,4,50,0.08);
      border-top: 1px solid rgba(3,4,50,0.12);
      padding: 24px 64px;
      flex-shrink: 0;
    }

    .lab-spec {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 0 36px;
      flex-shrink: 0;
    }

    .lab-spec__value {
      font-size: 24px;
      font-weight: 800;
      color: var(--color-bg);
      letter-spacing: -1px;
      line-height: 1;
    }

    .lab-spec__label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(3,4,50,0.5);
    }

    .lab-spec-divider {
      width: 1px;
      height: 36px;
      background: rgba(3,4,50,0.15);
      flex-shrink: 0;
    }

    .lab-actions {
      display: flex;
      gap: 12px;
      margin-left: auto;
    }

    .lab-section .btn--primary {
      background: var(--color-bg);
      color: var(--color-accent);
    }
    .lab-section .btn--primary:hover { background: #0e285c; color: #fff; }
    .lab-section .btn--outline {
      border-color: rgba(3,4,50,0.35);
      color: var(--color-bg);
    }
    .lab-section .btn--outline:hover { border-color: var(--color-bg); }

    @media (max-width: 1024px) {
      .lab-annots { flex: 0 0 180px; }
      .lab-annot__line { width: 32px; }
      .lab-canvas { padding: 32px 24px; }
      .lab-intro { padding: 40px 32px 24px; }
      .lab-specs-bar { padding: 20px 32px; }
    }
    @media (max-width: 768px) {
      .lab-canvas { flex-direction: column; padding: 24px; gap: 20px; }
      .lab-annots { flex: unset; width: 100%; flex-direction: row; gap: 16px; justify-content: space-between; }
      .lab-annot { flex-direction: column !important; align-items: flex-start; }
      .lab-annot__connector { display: none; }
      .lab-annot__card { border-left: 3px solid var(--color-accent) !important; border-right: none !important; text-align: left !important; }
      .lab-intro { padding: 32px 24px 20px; flex-direction: column; gap: 8px; }
      .lab-specs-bar { flex-wrap: wrap; gap: 16px; padding: 20px 24px; }
      .lab-spec { padding: 0 16px; }
      .lab-actions { width: 100%; margin-left: 0; }
    }

        /* ============================================================
       LAB DEVICES SECTION (diagonal split)
    ============================================================ */
    .ld-section {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: var(--color-bg);
      padding: calc(var(--nav-height) + 60px) 64px 80px;
      overflow: hidden;
    }

    /* Diagonal accent slash (right side big triangle) */
    .ld-diagonal {
      position: absolute;
      top: 0;
      right: 0;
      width: 55%;
      height: 100%;
      background: linear-gradient(135deg, transparent 30%, rgba(242,162,73,0.04) 30%, rgba(242,162,73,0.08) 100%);
      clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
      pointer-events: none;
      z-index: 0;
    }

    /* Subtle dot grid */
    .ld-grid-bg {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      z-index: 0;
    }

    .ld-wrapper {
      position: relative;
      z-index: 1;
      max-width: 1500px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    /* ===== LEFT SIDE ===== */
    .ld-left {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .ld-tag-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .ld-index {
      font-size: 11px;
      font-weight: 800;
      color: var(--color-accent);
      letter-spacing: 1px;
      padding: 4px 10px;
      border: 1px solid var(--color-accent);
      border-radius: 2px;
    }

    .ld-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    .ld-title {
      font-size: clamp(48px, 6vw, 96px);
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -3px;
      color: var(--color-text);
      margin: 0;
    }

    .ld-title-accent {
      color: var(--color-accent);
      font-style: italic;
    }

    .ld-lead {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.6);
      max-width: 520px;
      margin: 0;
    }

    /* Stat blocks */
    .ld-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid rgba(255,255,255,0.1);
      border-bottom: 1px solid rgba(255,255,255,0.1);
      padding: 20px 0;
    }

    .ld-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-right: 16px;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .ld-stat:last-child { border-right: none; }

    .ld-stat__num {
      font-size: clamp(20px, 2vw, 28px);
      font-weight: 800;
      color: var(--color-accent);
      letter-spacing: -0.5px;
      line-height: 1;
    }

    .ld-stat__lbl {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }

    /* Feature list */
    .ld-features {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 4px;
    }

    .ld-feature {
      display: flex;
      gap: 18px;
      align-items: flex-start;
    }

    .ld-feature__num {
      font-size: 11px;
      font-weight: 700;
      color: var(--color-accent);
      flex-shrink: 0;
      padding-top: 2px;
      letter-spacing: 1px;
    }

    .ld-feature strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 4px;
      letter-spacing: -0.2px;
    }

    .ld-feature p {
      font-size: 13px;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.5);
      margin: 0;
    }

    .ld-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 8px;
    }

    /* ===== RIGHT SIDE — visual collage ===== */
    .ld-right {
      position: relative;
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Main big image card (top-right, tilted left) */
    .ld-card--main {
	position: absolute;
	top: 0;
	right: 0;
	width: 78%;
	transform: rotate(-2deg);
	z-index: 2;
    }

    .ld-card--main .ld-card__img-placeholder {
      aspect-ratio: 4/3;
    }

    /* Small mini card (bottom-left, opposite tilt) */
    .ld-card--mini {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50%;
		transform: rotate(3deg);
		z-index: 3;
    }

    .ld-card--mini .ld-card__img-placeholder {
      aspect-ratio: 1/1;
    }

    .ld-card {
      background: #0e285c;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    }

    .ld-card__img-placeholder {
      width: 100%;
      background: linear-gradient(135deg, #1a3a78 0%, #0e285c 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: rgba(255,255,255,0.3);
    }

    .ld-card__img-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ld-ph-icon { font-size: 28px; opacity: 0.4; }
    .ld-ph-text {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .ld-card__caption {
	  display: none;
    }
    .ld-card__caption--sm {
      display: none;
    }
    .ld-card__dot {
      display: none;
    }

    @keyframes ldPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* ISO Badge */
    .ld-badge {
      position: absolute;
      top: 35%;
      right: -20px;
      width: 90px;
      height: 90px;
      background: var(--color-accent);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      color: var(--color-bg);
      transform: rotate(8deg);
      box-shadow: 0 16px 32px rgba(242,162,73,0.3);
      z-index: 4;
    }

    .ld-badge__top {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.5px;
    }

    .ld-badge__big {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1;
    }

    .ld-badge__bot {
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* Live spec card */
    .ld-spec-card {
      position: absolute;
      bottom: 5%;
      right: 0;
      width: 200px;
      background: var(--color-bg);
      border: 1px solid rgba(242,162,73,0.3);
      border-radius: 6px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.5);
      z-index: 5;
    }

    .ld-spec-card__header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 2px;
      color: var(--color-accent);
    }

    .ld-spec-card__dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 6px #4ade80;
      animation: ldPulse 1.4s ease-in-out infinite;
    }

    .ld-spec-card__row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 10px;
    }

    .ld-spec-card__row span {
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-size: 9px;
      font-weight: 600;
    }

    .ld-spec-card__row strong {
      color: var(--color-text);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: -0.3px;
    }

    .ld-spec-card__bar {
      width: 100%;
      height: 3px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 4px;
    }

    .ld-spec-card__bar-fill {
      width: 72%;
      height: 100%;
      background: var(--color-accent);
      border-radius: 2px;
      animation: ldBarFlow 3s ease-in-out infinite;
    }

    @keyframes ldBarFlow {
      0%, 100% { width: 72%; }
      50% { width: 88%; }
    }

    @media (max-width: 1100px) {
      .ld-wrapper { grid-template-columns: 1fr; gap: 60px; }
      .ld-right { min-height: 500px; }
      .ld-section { padding-left: 40px; padding-right: 40px; }
    }
    @media (max-width: 768px) {
      .ld-section { padding: calc(var(--nav-height) + 40px) 24px 60px; }
      .ld-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
      .ld-stat { padding: 8px 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .ld-right { min-height: 420px; }
      .ld-card--main { width: 85%; }
      .ld-card--mini { width: 55%; }
      .ld-badge { width: 70px; height: 70px; right: 0; }
      .ld-badge__big { font-size: 18px; }
      .ld-spec-card { width: 170px; }
    }

    /* ============================================================
       SERVICES SECTION
    ============================================================ */
    .svc-section {
	  position:relative;
      background: #f4f4f6;
      padding: 48px 48px 48px;
      padding-top: calc(var(--nav-height) + 48px);
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    .svc-grid {
      display: grid;
      gap: 16px;
      flex: 1;
    }
    .svc-grid--top    { grid-template-columns: 1fr 2fr 1fr; }
    .svc-grid--bottom { grid-template-columns: repeat(4, 1fr); }
	
	.svc-section-tag{
  position:absolute;
  top:calc(var(--nav-height) + 18px);
  left:48px;

  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;

  color:rgba(3,4,50,0.32);

  z-index:5;
  pointer-events:none;
}

    .svc-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      overflow: hidden;
      height: 100%;
    }

    .svc-card__title {
      font-size: 18px;
      font-weight: 700;
      color: #030432;
      line-height: 1.2;
    }
    .svc-card__sub {
      font-size: 13px;
      font-weight: 300;
      color: rgba(3,4,50,0.5);
    }
    .svc-card__img-area {
      flex: 1;
      min-height: 120px;
      border-radius: 8px;
      background: rgba(3,4,50,0.04);
      border: 1.5px dashed rgba(3,4,50,0.1);
      margin-top: 8px;
    }
    .svc-card--lg .svc-card__img-area { min-height: 180px; }

    @media (max-width: 1024px) {
      .svc-grid--top    { grid-template-columns: 1fr 1fr; }
      .svc-grid--bottom { grid-template-columns: repeat(2, 1fr); }
      .svc-card--lg     { grid-column: span 2; }
    }
    @media (max-width: 768px) {
      .svc-section      { padding: 24px;position:relative; }
      .svc-grid--top    { grid-template-columns: 1fr; }
      .svc-grid--bottom { grid-template-columns: 1fr; }
      .svc-card--lg     { grid-column: span 1; }
	    .svc-section-tag{left:24px;top:calc(var(--nav-height) + 14px);}
    }

    /* ============================================================
       WET ETCHING SECTION
    ============================================================ */
    .we-section {
      display: flex;
      gap: 24px;
      min-height: 100vh;
      background: var(--color-bg);
      padding: 24px;
      padding-left: 48px;
      padding-top: calc(var(--nav-height) + 24px);
      padding-bottom: calc(var(--nav-height) + 24px);
      box-sizing: border-box;
      overflow: hidden;
    }

    /* Left column — image */
    .we-img-col {
      flex: 0 0 48%;
      position: relative;
      background: #ffffff;
      display: flex;
      align-items: stretch;
      border-radius: 24px;
      overflow: hidden;
      margin: 72px 0;
    }
    .we-img-wrap {
      width: 100%;
      height: 100%;
      min-height: 600px;
    }
    .we-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
      padding: 32px;
      box-sizing: border-box;
    }
    .we-img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border: 1.5px dashed rgba(255,255,255,0.12);
    }
    .we-img-placeholder__icon { font-size: 40px; opacity: 0.25; }
    .we-img-placeholder__text {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.2);
    }

    /* Right column — content */
    .we-content-col {
      flex: 1;
      padding: 72px 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 28px;
      overflow-y: auto;
    }

    .we-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    .we-title {
      font-size: clamp(32px, 3.5vw, 52px);
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.05;
      color: var(--color-text);
    }

    .we-lead {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255,255,255,0.6);
      max-width: 480px;
    }

    /* Specs strip */
    .we-specs {
      display: flex;
      gap: 0;
      border: 1px solid var(--color-border);
    }
    .we-spec {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 12px;
      border-right: 1px solid var(--color-border);
      gap: 4px;
    }
    .we-spec:last-child { border-right: none; }
    .we-spec__value {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-accent);
      letter-spacing: -0.5px;
    }
    .we-spec__label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--color-muted);
      text-align: center;
    }

    /* Feature list */
    .we-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .we-feature {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .we-feature__dot {
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-accent);
      margin-top: 6px;
    }
    .we-feature strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 3px;
    }
    .we-feature p {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
      margin: 0;
    }

    /* CTA buttons */
    .we-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 4px;
    }

    @media (max-width: 1024px) {
      .we-content-col { padding: 56px 40px; }
    }
    @media (max-width: 768px) {
      .we-section { flex-direction: column; }
      .we-img-col { flex: unset; min-height: 300px; }
      .we-img-wrap, .we-img-placeholder { min-height: 300px; }
      .we-content-col { padding: 40px 24px; }
      .we-specs { flex-wrap: wrap; }
      .we-spec { flex: 0 0 50%; border-bottom: 1px solid var(--color-border); }
    }

    /* ============================================================
       ELECTROPLATING SECTION
    ============================================================ */
    .ep-section {
      display: flex;
      gap: 12px;
      padding: 12px;
      padding-top: calc(var(--nav-height) + 12px);
      background: #f0f0f5;
      min-height: 100vh;
      box-sizing: border-box;
    }

    .ep-card {
      flex: 1;
      background: #f4f4f8;
      border-radius: 20px;
      padding: 48px 40px 40px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .ep-card__header {
      text-align: center;
      margin-bottom: 36px;
    }

    .ep-card__title {
      font-size: clamp(24px, 2.8vw, 40px);
      font-weight: 700;
      color: #030432;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
    }

    .ep-card__sub {
      font-size: 15px;
      font-weight: 300;
      color: rgba(3,4,50,0.55);
      margin-bottom: 24px;
    }

    .ep-card__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 28px;
      background: var(--color-accent);
      color: #030432;
      font-size: 14px;
      font-weight: 700;
      border-radius: 50px;
      text-decoration: none;
      transition: background var(--transition), transform var(--transition);
    }
    .ep-card__btn:hover {
      background: #f5b469;
      transform: translateY(-2px);
    }

    .ep-card__img-area {
      flex: 1;
      min-height: 280px;
      border-radius: 12px;
      background: rgba(3,4,50,0.05);
      border: 1.5px dashed rgba(3,4,50,0.1);
      margin-top: auto;
    }

    @media (max-width: 768px) {
      .ep-section { flex-direction: column; padding-top: calc(var(--nav-height) + 12px); }
      .ep-card__img-area { min-height: 200px; }
    }