/* ── TOKENS ── */
    :root {
      --color-absolute-zero: #000000;
      --color-studio-white: #ffffff;
      --color-soft-gray: #f5f5f5;
      --color-page-light: #f2f5f9;
      --color-page-mid: #e9eef6;
      --color-page-dark: #0b1220;
      --color-page-dark-soft: #111a2b;
      --color-pale-border: #e0e0e0;
      --color-medium-gray: #cdcdcd;
      --color-ghost-gray: #737373;
      --logo-gradient: linear-gradient(270deg, #1b2cff 0%, #7a3cff 52%, #e7477a 100%);
      --logo-gradient-vertical: linear-gradient(0deg, #1b2cff 0%, #7a3cff 52%, #e7477a 100%);
      --logo-gradient-glow: rgba(122,60,255,0.32);

      --font: 'Inter', 'Noto Sans KR', system-ui, -apple-system, sans-serif;

      --text-caption: 13px;
      --text-body: 16px;
      --text-subheading: 18px;
      --text-heading-sm: 21px;
      --text-heading: 32px;
      --text-heading-lg: 40px;
      --text-display: 48px;
      --text-display-lg: 64px;

      --radius-global: 10px;
      --radius-buttons: 80px;
      --radius-navigators: 20px;

      --shadow-lg: rgba(0,0,0,0.25) 0px 0px 24px 0px;
      --shadow-subtle: rgba(0,0,0,0.627) 0px 0px 3px 0px inset, rgb(0,0,0) 0px 0px 3px 0px;

      --max-w: 1440px;
      --pad-x: 80px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      background: var(--color-page-light);
      color: var(--color-absolute-zero);
      font-family: var(--font);
      font-size: var(--text-body);
      line-height: 1.5;
      font-weight: 400;
      word-break: keep-all;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

    .wrap {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--pad-x);
    }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 48px;
      border-radius: var(--radius-buttons);
      font-family: var(--font);
      font-size: var(--text-body);
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .btn-outline-black {
      background: transparent;
      color: var(--color-absolute-zero);
      border-color: var(--color-absolute-zero);
    }
    .btn-outline-black:hover { box-shadow: var(--shadow-subtle); }

    .btn-fill-black {
      background: var(--color-absolute-zero);
      color: var(--color-studio-white);
      border-color: var(--color-absolute-zero);
    }
    .btn-fill-black:hover { background: #1a1a1a; }

    .btn-outline-white {
      background: transparent;
      color: var(--color-studio-white);
      border-color: var(--color-studio-white);
    }
    .btn-outline-white:hover { box-shadow: 0 0 0 1px #fff; }

    /* CTA accents
       - Header 문의하기: filled gradient
       - Other CTA buttons: gradient border only, filled gradient on hover */
    .btn-accent {
      position: relative;
      overflow: hidden;
      color: #fff;
      border: 1px solid transparent;
      border-radius: var(--radius-buttons);
      background:
        linear-gradient(var(--color-absolute-zero), var(--color-absolute-zero)) padding-box,
        var(--logo-gradient) border-box;
      box-shadow: none;
    }

    .btn-accent:hover {
      color: #fff;
      transform: translateY(-1px);
      background:
        var(--logo-gradient) padding-box,
        var(--logo-gradient) border-box;
      box-shadow: 0 14px 34px rgba(122,60,255,0.38);
    }

    .btn-header-gradient {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      color: #fff;
      background: var(--logo-gradient);
      border: 0;
      border-radius: var(--radius-buttons);
      background-clip: padding-box;
      box-shadow: 0 10px 28px var(--logo-gradient-glow);
    }

    .btn-header-gradient::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(0deg, rgba(255,255,255,0.20), rgba(255,255,255,0));
      opacity: 0.55;
      pointer-events: none;
    }

    .btn-header-gradient:hover {
      color: #fff;
      transform: translateY(-1px);
      filter: saturate(1.08) brightness(1.04);
      box-shadow: 0 14px 34px rgba(122,60,255,0.38);
    }

    .btn-sm {
      padding: 13px 34px;
      font-size: 15px;
    }

    /* ── HEADER ── */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;

      /* 기본 상태: 투명 (히어로 비디오 위에 자연스럽게 얹힘) */
      background: transparent;
      border-bottom: 1px solid transparent;

      /* 전환 — background, border, backdrop-filter 모두 부드럽게 */
      transition:
        background 0.35s ease,
        border-color 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease;
    }

    /* 스크롤 후 활성 상태: JS가 .scrolled 클래스 추가 */
    .site-header.scrolled {
      background: rgba(255, 255, 255, 0.92);
      border-bottom-color: var(--color-pale-border);
      backdrop-filter: blur(16px) saturate(1.6);
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      width: 100px;
      height: 44px;
    }

    .logo img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: brightness(0) invert(1);
      transition: filter 0.35s ease;
    }

    .site-header.scrolled .logo img {
      filter: none;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 38px;
      font-size: 17px;
      font-weight: 500;
    }

    .nav a {
      position: relative;
      color: rgba(255, 255, 255, 0.88);           /* 투명 상태: 흰 텍스트 */
      transition: color 0.35s ease;
    }
    .site-header.scrolled .nav a {
      color: var(--color-absolute-zero);          /* 스크롤 후: 검정 텍스트 */
    }

    .nav a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 3px;
      border-radius: 999px;
      background: var(--logo-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.18s ease;
    }

    .nav a:hover::after { transform: scaleX(1); }

    /* 문의하기 버튼 — 투명 상태에서 흰 외곽선 스타일 */
    .site-header:not(.scrolled) .btn-accent-header {
      background:
        linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)) padding-box,
        linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5)) border-box;
      color: #fff;
    }

    /* hero 섹션 — fixed 헤더와 겹침 없이 전체화면 */

    /* ── HERO — dark full-bleed video background ── */
    .hero {
      position: relative;
      background: var(--color-page-dark);
      min-height: calc(100svh - 64px);
      padding: 0;
      overflow: hidden;
      text-align: left;
    }

    .hero .wrap {
      position: relative;
      z-index: 10;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-top: 152px;   /* 72px 헤더 + 80px 여백 */
      padding-bottom: 120px;
    }

    .hero-bg-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background: var(--color-page-dark);
    }

    .hero-bg-video video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.86;
      filter: saturate(1.02) contrast(1.08) brightness(0.92);
    }

    .hero-bg-video::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(6,13,24,0.42) 0%, rgba(6,13,24,0.08) 42%, #07101d 100%),
        linear-gradient(90deg, #07101d 0%, rgba(7,16,29,0.92) 31%, rgba(7,16,29,0.42) 68%, rgba(7,16,29,0.76) 100%);
    }

    .hero-scanlines {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.055) 0%, transparent 17%, transparent 72%, rgba(7,16,29,0.88) 100%);
    }

    .hero-grid-pattern {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.26;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,0.070) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 120px 100%, 100% 120px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
    }

    .hero-tech-bar {
      position: absolute;
      left: var(--pad-x);
      bottom: 80px;
      z-index: 3;
      pointer-events: none;
      width: min(520px, calc(100% - var(--pad-x) * 2));
      height: 1px;
      background: linear-gradient(90deg, rgba(85,182,255,0.88), rgba(255,255,255,0.20), transparent);
    }

    .hero-tech-bar::before {
      content: '';
      position: absolute;
      left: 0;
      top: -3px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #55b6ff;
      box-shadow: 0 0 0 6px rgba(85,182,255,0.12);
    }

    .hero-noise {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    .hero-brand-mark {
      position: absolute;
      right: max(28px, 5vw);
      bottom: 6.5vh;
      z-index: 2;
      pointer-events: none;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.13);
      font-size: 210px;
      font-weight: 700;
      line-height: 0.82;
      letter-spacing: 0;
      opacity: 0.72;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
    }

    .hero-side-note {
      position: absolute;
      right: max(28px, 5vw);
      top: 48%;
      z-index: 3;
      display: grid;
      gap: 8px;
      pointer-events: none;
      transform: translateY(-50%);
      color: rgba(255,255,255,0.58);
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      width: min(100%, 760px);
      animation: heroCopyIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: var(--text-caption);
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.62);
      margin-bottom: 28px;
    }

    .hero-label::before {
      content: '';
      width: 34px;
      height: 1px;
      background: linear-gradient(90deg, #55b6ff, rgba(255,255,255,0.20));
    }

    .hero-title {
      font-size: 72px;
      font-weight: 700;
      line-height: 1.08;
      color: var(--color-studio-white);
      letter-spacing: 0;
      margin-bottom: 26px;
      max-width: 830px;
      text-shadow: 0 22px 64px rgba(0,0,0,0.36);
    }

    .hero-desc {
      font-size: 19px;
      font-weight: 400;
      line-height: 1.76;
      color: rgba(255,255,255,0.70);
      max-width: 620px;
      margin: 0 0 42px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      flex-wrap: wrap;
    }

    .hero-actions .btn {
      min-height: 52px;
      padding-left: 34px;
      padding-right: 34px;
    }

    .hero .btn-outline-white {
      border-color: rgba(255,255,255,0.52);
      background: rgba(255,255,255,0.035);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .hero .btn-outline-white:hover {
      border-color: rgba(255,255,255,0.88);
      background: rgba(255,255,255,0.08);
      box-shadow: 0 16px 42px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }

    .hero-capabilities {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      width: min(100%, 620px);
      margin-top: 56px;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255,255,255,0.18);
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .hero-capabilities li {
      min-height: 74px;
      padding: 17px 20px 17px 0;
      border-right: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.82);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
    }

    .hero-capabilities li:last-child {
      border-right: none;
      padding-right: 0;
      padding-left: 20px;
    }

    .hero-capabilities li:nth-child(2) {
      padding-left: 20px;
    }

    .hero-capabilities span {
      display: block;
      margin-bottom: 9px;
      color: rgba(85,182,255,0.78);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    @keyframes heroCopyIn {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── SECTION BASE ── */
    .section {
      padding: 112px 0;
    }

    .section-gray {
      background: var(--color-page-mid);
    }

    .section-dark {
      background: var(--color-page-dark);
      color: var(--color-studio-white);
    }

    .section-label {
      font-size: var(--text-caption);
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-ghost-gray);
      margin-bottom: 16px;
    }

    .section-dark .section-label { color: rgba(255,255,255,0.4); }

    .section-title {
      font-size: clamp(32px, 3.5vw, var(--text-display));
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.025em;
      margin-bottom: 16px;
    }

    .section-desc {
      font-size: var(--text-subheading);
      font-weight: 400;
      line-height: 1.6;
      color: var(--color-ghost-gray);
      max-width: 560px;
    }

    .section-dark .section-desc { color: rgba(255,255,255,0.55); }

    /* ── ABOUT ── */
    .about-section {
      position: relative;
      overflow: hidden;
      background: #fff;
    }

    /* 우상단 동심원 배경 */
    .about-section::before {
      content: '';
      position: absolute;
      top: -200px; right: -200px;
      width: 640px; height: 640px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.05);
      pointer-events: none;
      z-index: 0;
    }
    .about-section::after {
      content: '';
      position: absolute;
      top: -90px; right: -90px;
      width: 420px; height: 420px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.038);
      pointer-events: none;
      z-index: 0;
    }

    /* 좌하단 도트 그리드 */
    .about-dot-grid {
      position: absolute;
      left: -30px; bottom: 80px;
      width: 260px; height: 260px;
      pointer-events: none;
      z-index: 0;
      background-image: radial-gradient(circle, rgba(0,0,0,0.11) 1.5px, transparent 1.5px);
      background-size: 22px 22px;
      mask-image: radial-gradient(ellipse at 20% 80%, black 30%, transparent 72%);
      -webkit-mask-image: radial-gradient(ellipse at 20% 80%, black 30%, transparent 72%);
    }

    .about-section .wrap { position: relative; z-index: 1; }

    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1fr);
      gap: 88px;
      align-items: start;
    }

    .about-left { position: relative; }

    .about-accent-line {
      position: absolute;
      left: 0;
      top: -24px;
      width: 48px;
      height: 3px;
      border-radius: 999px;
      background: #1a3aff;
    }

    .about-keyword-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 30px;
      max-width: 620px;
    }

    .about-keyword {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1;
      padding: 9px 15px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,0.08);
      color: #5f6673;
      background: rgba(255,255,255,0.78);
      box-shadow: 0 4px 16px rgba(15,23,42,0.035);
      transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
      cursor: default;
    }
    .about-keyword:hover {
      border-color: rgba(26,58,255,0.22);
      color: #1a3aff;
      background: #fff;
      box-shadow: 0 6px 18px rgba(26,58,255,0.08);
    }

    .about-body {
      font-size: var(--text-body);
      line-height: 1.82;
      color: #6c727d;
      max-width: 700px;
      padding-top: 6px;
    }
    .about-body p + p { margin-top: 20px; }

    .about-quote {
      position: relative;
      margin-top: 34px;
      padding: 24px 28px 24px 30px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 8px;
      box-shadow: 0 14px 38px rgba(15,23,42,0.055);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.75;
      color: var(--color-absolute-zero);
    }

    .about-quote::before {
      content: '';
      position: absolute;
      left: 0;
      top: 18px;
      bottom: 18px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: #101828;
    }

    .about-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 64px;
    }

    .about-pillar {
      position: relative;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 8px;
      padding: 32px 30px 34px;
      overflow: hidden;
      min-height: 214px;
      box-shadow: 0 10px 30px rgba(15,23,42,0.045);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }
    .about-pillar:hover {
      transform: translateY(-3px);
      background: #fff;
      border-color: rgba(15,23,42,0.13);
      box-shadow: 0 18px 44px rgba(15,23,42,0.09);
    }

    .about-pillar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 4px;
      opacity: 0.86;
    }
    .about-pillar:nth-child(1)::before { background: linear-gradient(180deg, #1a3aff, #5b7fff); }
    .about-pillar:nth-child(2)::before { background: linear-gradient(180deg, #0a8fff, #00c6ff); }
    .about-pillar:nth-child(3)::before { background: linear-gradient(180deg, #c0392b, #e74c3c); }

    .about-pillar::after {
      content: attr(data-num);
      position: absolute;
      top: 28px;
      right: 28px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      color: #8b929d;
      pointer-events: none;
      letter-spacing: 0.08em;
      user-select: none;
    }

    .about-pillar-icon {
      width: 46px; height: 46px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 26px;
      position: relative; z-index: 1;
      border: 1px solid rgba(15,23,42,0.04);
    }
    .about-pillar:nth-child(1) .about-pillar-icon { background: #eef1ff; }
    .about-pillar:nth-child(2) .about-pillar-icon { background: #e6f4ff; }
    .about-pillar:nth-child(3) .about-pillar-icon { background: #ffeeed; }
    .about-pillar-icon svg { width: 22px; height: 22px; }

    .about-pillar h3 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
      color: var(--color-absolute-zero);
      position: relative; z-index: 1;
    }

    .about-pillar p {
      font-size: 14px;
      line-height: 1.75;
      color: #6c727d;
      position: relative; z-index: 1;
    }

    .stat-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--color-pale-border);
      margin-top: 80px;
      padding-top: 48px;
      gap: 0;
    }

    .stat-item {
      padding-right: 40px;
      border-right: 1px solid var(--color-pale-border);
    }
    .stat-item:last-child { border-right: none; padding-right: 0; padding-left: 40px; }
    .stat-item:nth-child(2) { padding-left: 40px; }

	.stat-num {
	  font-size: 36px;
	  font-weight: 700;
	  line-height: 1;
	  letter-spacing: -0.04em;
	  margin-bottom: 14px;
	}

	.stat-label {
	  font-size: 15px;
	  line-height: 1.65;
	  font-weight: 400;
	  color: var(--color-ghost-gray);
	}

    /* ── SERVICES ── */
    .services-section {
      position: relative;
      overflow: hidden;
      background: var(--color-soft-gray);
    }

    /* 배경 대형 텍스트 워터마크 */
    .services-section::before {
      content: 'SERVICES';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: clamp(80px, 12vw, 160px);
      font-weight: 900;
      letter-spacing: -0.04em;
      color: rgba(0,0,0,0.028);
      white-space: nowrap;
      pointer-events: none;
      z-index: 0;
      user-select: none;
    }

    .services-section .wrap { position: relative; z-index: 1; }

    /* 헤더 영역 */
    .services-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 48px;
      margin-bottom: 56px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--color-pale-border);
    }

    .services-header-left { max-width: 480px; }

    .services-header-right {
      flex-shrink: 0;
      text-align: right;
    }

    .services-count {
      font-size: clamp(48px, 6vw, 80px);
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 1;
      background: var(--logo-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .services-count-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--color-ghost-gray);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 6px;
    }

    /* 서비스 리스트 — 아코디언 스타일 */
    .service-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .service-item {
      position: relative;
      --svc-accent: #1a3aff;
      --svc-accent-end: #5b7fff;
      --svc-accent-soft: #eef1ff;
      background: rgba(255,255,255,0.96);
      border-radius: 8px;
      overflow: hidden;
      transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
      border: 1px solid rgba(15,23,42,0.07);
      box-shadow: 0 10px 30px rgba(15,23,42,0.04);
    }

    .service-item:hover {
      box-shadow: 0 16px 42px rgba(15,23,42,0.09);
      transform: translateY(-2px);
      border-color: rgba(15,23,42,0.12);
    }

    /* 클릭 시 expanded */
    .service-item.is-open {
      background: #fff;
      box-shadow: 0 18px 52px rgba(15,23,42,0.10);
      border-color: rgba(26,58,255,0.14);
    }

    .service-item-header {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      appearance: none;
      -webkit-appearance: none;
      text-align: left;
      display: grid;
      grid-template-columns: 48px 52px minmax(0, 1fr) minmax(180px, max-content) 36px;
      align-items: center;
      gap: 20px;
      padding: 26px 34px;
      cursor: pointer;
      user-select: none;
    }

    .service-item-header:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(26,58,255,0.20);
    }

    /* 번호 */
    .svc-num {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--color-ghost-gray);
      font-feature-settings: 'tnum';
    }

    /* 아이콘 원형 */
    .svc-icon {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: var(--svc-accent-soft);
      border: 1px solid rgba(15,23,42,0.04);
      transition: background 0.22s, transform 0.22s;
    }
    .svc-icon svg { width: 20px; height: 20px; }

    /* 서비스 아이템별 아이콘 배경 */
    .service-item:nth-child(1) { --svc-accent: #1a3aff; --svc-accent-end: #5b7fff; --svc-accent-soft: #eef1ff; }
    .service-item:nth-child(2) { --svc-accent: #0a8fff; --svc-accent-end: #00c6ff; --svc-accent-soft: #e6f4ff; }
    .service-item:nth-child(3) { --svc-accent: #c0392b; --svc-accent-end: #e74c3c; --svc-accent-soft: #ffeeed; }
    .service-item:nth-child(4) { --svc-accent: #1db954; --svc-accent-end: #2ed573; --svc-accent-soft: #edfff4; }
    .service-item:nth-child(5) { --svc-accent: #f39c12; --svc-accent-end: #f8b500; --svc-accent-soft: #fff8e6; }
    .service-item:nth-child(6) { --svc-accent: #8e44ad; --svc-accent-end: #b857d8; --svc-accent-soft: #f3eeff; }

    .service-item:hover .svc-icon,
    .service-item.is-open .svc-icon { transform: translateY(-1px); }

    .svc-title-wrap { min-width: 0; }

    .svc-title {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--color-absolute-zero);
      line-height: 1.2;
    }

    .svc-subtitle {
      font-size: 13px;
      color: var(--color-ghost-gray);
      margin-top: 4px;
      font-weight: 400;
    }

    /* 태그 미리보기 */
    .svc-tags-preview {
      display: flex;
      justify-self: end;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .svc-tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      background: #f7f8fa;
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 999px;
      padding: 4px 12px;
      white-space: nowrap;
    }

    /* 열기/닫기 화살표 */
    .svc-chevron {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(15,23,42,0.12);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.28s ease, background 0.18s, border-color 0.18s;
    }
    .svc-chevron svg {
      width: 14px; height: 14px;
      stroke: var(--color-ghost-gray);
      transition: stroke 0.18s;
    }
    .service-item.is-open .svc-chevron {
      transform: rotate(180deg);
      background: #101828;
      border-color: #101828;
    }
    .service-item.is-open .svc-chevron svg { stroke: #fff; }

    /* 상세 패널 */
    .service-item-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.32s ease;
    }
    .service-item.is-open .service-item-body {
      grid-template-rows: 1fr;
    }

    .service-item-body-inner {
      overflow: hidden;
    }

    .service-item-detail {
      margin: 0 34px 30px 174px;
      padding-top: 22px;
      border-top: 1px solid rgba(15,23,42,0.08);
    }

    .service-item-detail p {
      font-size: 15px;
      line-height: 1.75;
      color: var(--color-ghost-gray);
      max-width: 960px;
    }

    .service-detail-tags {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-start;
      margin-top: 18px;
    }

    .service-detail-tag {
      font-size: 12px;
      font-weight: 600;
      color: var(--color-absolute-zero);
      background: #fff;
      border: 1px solid rgba(15,23,42,0.10);
      border-radius: 999px;
      padding: 6px 14px;
      white-space: nowrap;
    }

    /* 좌측 컬러 포인트 바 */
    .service-item::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, var(--svc-accent), var(--svc-accent-end));
      opacity: 0.18;
      transition: opacity 0.22s;
    }

    .service-item:hover::before,
    .service-item.is-open::before { opacity: 1; }

    /* ── SKILLS — video background ── */

    /* 섹션 자체: 배경 비디오를 담는 컨테이너 */
    .skills-section {
      position: relative;
      overflow: hidden;
      /* section-dark 의 background:#000 을 오버라이드 */
      background: #050b14;
      isolation: isolate;
    }

    .skills-section.section {
      padding-top: 92px;
      padding-bottom: 88px;
    }

    /* 배경 비디오 */
    .skills-video-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .skills-video-bg video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.96;
      filter: saturate(0.96) contrast(1.04) brightness(0.98);
    }

    /* 비디오 위 어두운 오버레이 — 텍스트 가독성 */
    .skills-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(3,8,16,0.54) 0%, rgba(3,8,16,0.24) 44%, rgba(3,8,16,0.64) 100%),
        linear-gradient(90deg, rgba(3,8,16,0.68) 0%, rgba(3,8,16,0.12) 50%, rgba(3,8,16,0.56) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
    }

    /* 콘텐츠는 비디오 위로 */
    .skills-section .wrap {
      position: relative;
      z-index: 2;
    }

    /* 헤더 */
    .skills-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.72fr);
      gap: 76px;
      align-items: end;
      margin-bottom: 44px;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255,255,255,0.13);
    }

    .skills-section .section-label {
      color: rgba(255,255,255,0.44);
    }

    .skills-section .section-title {
      max-width: 820px;
      margin-bottom: 0;
      color: #fff;
      font-weight: 600;
      letter-spacing: -0.02em;
      text-shadow: 0 2px 18px rgba(0,0,0,0.36);
    }

    .skills-section .section-desc {
      max-width: 610px;
      color: rgba(255,255,255,0.58);
      font-size: 17px;
      line-height: 1.8;
    }

    .skills-actions {
      margin-top: 32px;
    }

    .skills-actions .btn {
      min-width: 142px;
      padding: 14px 30px;
      border-color: rgba(255,255,255,0.72);
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .skills-actions .btn:hover {
      background: rgba(255,255,255,0.10);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
    }

    /* 역량 카드 그리드 */
    .cap-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-bottom: 20px;
    }

    .cap-card {
      --cap-accent: #5b7fff;
      background: rgba(12,18,29,0.82);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      padding: 26px 30px 28px;
      min-height: 174px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 48px rgba(0,0,0,0.18);
    }

    .cap-card:nth-child(1) { --cap-accent: #5b7fff; }
    .cap-card:nth-child(2) { --cap-accent: #00c6ff; }
    .cap-card:nth-child(3) { --cap-accent: #e74c3c; }
    .cap-card:nth-child(4) { --cap-accent: #2ed573; }

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

    /* 카드 좌측 컬러 포인트 바 */
    .cap-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--cap-accent);
      opacity: 0.48;
      transition: opacity 0.22s, width 0.22s;
    }

    .cap-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.045), transparent 42%);
      opacity: 0.9;
      pointer-events: none;
    }

    .cap-card:hover {
      background: rgba(16,24,38,0.90);
      border-color: rgba(255,255,255,0.20);
      transform: translateY(-3px);
      box-shadow: 0 22px 56px rgba(0,0,0,0.24);
    }
    .cap-card:hover::before { opacity: 1; width: 4px; }

    /* 카드 아이콘 */
    .cap-card-icon {
      width: 44px; height: 44px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 22px;
    }
    .cap-card-icon svg { width: 20px; height: 20px; }

    .cap-card h3 {
      font-size: 21px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 13px;
      letter-spacing: -0.01em;
    }

    .cap-card p {
      font-size: 14px;
      line-height: 1.75;
      color: rgba(255,255,255,0.58);
      max-width: 650px;
    }

    /* 기술 스택 태그 구름 */
    .skill-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 12px;
      margin-top: 0;
      padding-top: 4px;
    }

    .skill-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 15px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(12,18,29,0.70);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 13px;
      font-weight: 500;
      line-height: 1.2;
      color: rgba(255,255,255,0.68);
      transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
      cursor: default;
    }
    .skill-chip:hover {
      background: rgba(20,29,44,0.88);
      border-color: rgba(255,255,255,0.22);
      color: #fff;
      transform: translateY(-1px);
    }
    .skill-chip-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.055);
    }

    /* ── PROCESS — connected operating pipeline ── */
    .process-intro {
      max-width: 860px;
      margin-bottom: 58px;
    }

    .process-intro .section-title {
      max-width: 820px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .process-desc {
      max-width: 680px;
      font-size: 16px;
      line-height: 1.75;
      color: rgba(255,255,255,0.58);
    }

    .process-flow {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .process-flow::before {
      content: '';
      position: absolute;
      left: 9%;
      right: 9%;
      top: 40px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28) 12%, rgba(255,255,255,0.28) 88%, transparent);
      pointer-events: none;
    }

    .process-card {
      position: relative;
      isolation: isolate;
      min-height: 260px;
      overflow: hidden;
      background: rgba(255,255,255,0.065);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      padding: 26px 22px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 18px 48px rgba(0,0,0,0.14);
      transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    }

    .process-card::before {
      content: attr(data-step);
      position: absolute;
      right: 18px;
      bottom: 18px;
      z-index: -1;
      color: rgba(255,255,255,0.045);
      font-size: clamp(54px, 5vw, 78px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
    }

    .process-card::after {
      content: '';
      position: absolute;
      top: 32px;
      left: 22px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #101828;
      border: 1px solid rgba(255,255,255,0.62);
      box-shadow: 0 0 0 6px rgba(255,255,255,0.055);
    }

    .process-card:hover,
    .process-card.is-accent:hover {
      background: rgba(255,255,255,0.105);
      color: var(--color-studio-white);
      border-color: rgba(255,255,255,0.24);
      transform: translateY(-3px);
      box-shadow: 0 24px 58px rgba(0,0,0,0.22);
    }

    .process-card:hover::before,
    .process-card.is-accent::before,
    .process-card.is-accent:hover::before {
      color: rgba(255,255,255,0.075);
    }

    .process-card:hover::after,
    .process-card.is-accent:hover::after {
      width: 17px;
      height: 17px;
      background:
        linear-gradient(var(--color-studio-white), var(--color-studio-white)) padding-box,
        var(--logo-gradient-vertical) border-box;
      border: 2px solid transparent;
      border-radius: 50%;
      box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 0 20px rgba(122,60,255,0.38);
    }

    .process-card.is-accent {
      background: rgba(255,255,255,0.12);
      color: var(--color-studio-white);
      border-color: rgba(255,255,255,0.24);
      box-shadow: 0 20px 54px rgba(26,58,255,0.16);
    }

    .process-card.is-accent::after {
      background: var(--color-studio-white);
      border-color: var(--color-studio-white);
      box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 0 18px rgba(255,255,255,0.28);
    }

    .process-num {
      position: relative;
      z-index: 1;
      margin-bottom: 74px;
      padding-left: 30px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.52);
      line-height: 1;
    }

    .process-card:hover .process-num,
    .process-card.is-accent .process-num,
    .process-card.is-accent:hover .process-num {
      color: var(--color-studio-white);
      opacity: 1;
    }

    .process-card h3 {
      font-size: 23px;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
      color: var(--color-studio-white);
    }

    .process-card.is-accent h3 {
      background: var(--logo-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      filter: none;
    }

    .process-card.is-accent:hover h3 {
      background: none;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      color: var(--color-studio-white);
      -webkit-text-fill-color: var(--color-studio-white);
      filter: none;
    }

    .process-card p {
      max-width: 220px;
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255,255,255,0.58);
    }

    .process-card:hover p,
    .process-card.is-accent p,
    .process-card.is-accent:hover p {
      color: var(--color-studio-white);
      opacity: 1;
    }

    /* ── HISTORY — field experience timeline ── */
    .history-layout {
      display: grid;
      grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
      gap: clamp(56px, 7vw, 108px);
      align-items: start;
    }

    .history-sticky { position: sticky; top: 96px; }

    .history-desc {
      margin-top: 18px;
      max-width: 470px;
      color: rgba(15,23,42,0.62);
    }

    .history-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 34px;
      max-width: 390px;
    }

    .history-summary div {
      min-height: 96px;
      padding: 20px 22px;
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 6px;
      background: rgba(255,255,255,0.68);
      box-shadow: 0 18px 44px rgba(15,23,42,0.055);
    }

    .history-summary strong {
      display: block;
      margin-bottom: 10px;
      font-size: 28px;
      line-height: 1;
      letter-spacing: -0.035em;
      color: var(--color-absolute-zero);
    }

    .history-summary span {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: rgba(15,23,42,0.54);
    }

    .history-range {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      padding: 9px 13px;
      border: 1px solid rgba(15,23,42,0.10);
      border-radius: 999px;
      background: rgba(255,255,255,0.50);
      color: rgba(15,23,42,0.58);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
    }

    .history-range::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1b2cff;
      box-shadow: 0 0 0 4px rgba(27,44,255,0.12);
    }

    .history-timeline {
      position: relative;
      display: grid;
      gap: 14px;
      padding-left: 38px;
    }

    .history-timeline::before {
      content: '';
      position: absolute;
      left: 12px;
      top: 26px;
      bottom: 26px;
      width: 1px;
      background: linear-gradient(180deg, rgba(27,44,255,0.42), rgba(15,23,42,0.12));
    }

    .history-item {
      position: relative;
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      gap: 28px;
      align-items: start;
      min-height: 136px;
      padding: 26px 30px 28px;
      border: 1px solid rgba(15,23,42,0.075);
      border-radius: 8px;
      background: rgba(255,255,255,0.74);
      box-shadow: 0 22px 58px rgba(15,23,42,0.055);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .history-item::before {
      content: '';
      position: absolute;
      left: -34px;
      top: 36px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(27,44,255,0.42);
      box-shadow: 0 0 0 7px #edf2f8;
    }

    .history-item.is-current {
      border-color: rgba(27,44,255,0.18);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(244,247,252,0.94));
      box-shadow: 0 28px 70px rgba(15,23,42,0.10);
    }

    .history-item.is-current::before {
      background: #1b2cff;
      border-color: transparent;
      box-shadow: 0 0 0 7px #edf2f8, 0 0 0 12px rgba(27,44,255,0.10);
    }

    .history-item:hover {
      transform: translateY(-2px);
      border-color: rgba(15,23,42,0.14);
      box-shadow: 0 32px 78px rgba(15,23,42,0.10);
    }

    .history-year {
      display: block;
      font-size: clamp(36px, 4.8vw, 58px);
      font-weight: 700;
      letter-spacing: -0.045em;
      color: rgba(15,23,42,0.18);
      line-height: 1;
    }

    .history-item.is-current .history-year {
      color: #1b2cff;
      -webkit-text-fill-color: currentColor;
    }

    .history-kicker {
      display: block;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(27,44,255,0.62);
    }

    .history-content h3 {
      font-size: clamp(19px, 1.8vw, 24px);
      font-weight: 700;
      margin-bottom: 9px;
      letter-spacing: -0.02em;
      color: var(--color-absolute-zero);
    }

    .history-content p {
      max-width: 620px;
      font-size: 14px;
      line-height: 1.72;
      color: rgba(15,23,42,0.60);
    }

    .history-item.is-current .history-content p { color: rgba(15,23,42,0.66); }

    /* ── CONTACT — dark ── */
    .contact-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
      gap: clamp(44px, 6vw, 88px);
      align-items: stretch;
    }

    .contact-intro {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }

    .contact-desc {
      margin-top: 18px;
      max-width: 560px;
      color: rgba(255,255,255,0.66);
    }

    .contact-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 34px;
      max-width: 560px;
    }

    .contact-metric {
      min-height: 118px;
      padding: 22px 24px 24px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      box-shadow: 0 22px 54px rgba(0,0,0,0.16);
    }

    .contact-metric strong {
      display: block;
      margin-bottom: 12px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.84);
    }

    .contact-metric span {
      display: block;
      font-size: 14px;
      line-height: 1.68;
      color: rgba(255,255,255,0.58);
    }

    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 38px;
    }

    .contact-panel {
      padding: 32px 34px 30px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
      box-shadow: 0 30px 72px rgba(0,0,0,0.22);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .contact-panel-head {
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      margin-bottom: 8px;
    }

    .contact-panel-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.46);
    }

    .contact-panel-kicker::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #55b6ff;
      box-shadow: 0 0 0 5px rgba(85,182,255,0.10);
    }

    .contact-panel-head h3 {
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.24;
      letter-spacing: -0.02em;
      color: rgba(255,255,255,0.96);
    }

    .contact-info-list {
      list-style: none;
    }

    .contact-info-item {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      font-size: 14px;
      align-items: baseline;
    }

    .contact-info-item:last-child {
      padding-bottom: 6px;
      border-bottom: none;
    }

    .contact-info-label {
      font-size: var(--text-caption);
      font-weight: 500;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .contact-info-value {
      color: rgba(255,255,255,0.76);
      line-height: 1.65;
    }

    .contact-info-value a {
      color: inherit;
      text-decoration: none;
    }

    .contact-info-value a:hover,
    .contact-info-value a:focus-visible {
      color: rgba(255,255,255,0.96);
    }

    .contact-note {
      margin-top: 18px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.10);
    }

    .contact-note strong {
      display: block;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: rgba(255,255,255,0.88);
    }

    .contact-note p {
      font-size: 14px;
      line-height: 1.68;
      color: rgba(255,255,255,0.58);
    }

    /* ── FOOTER ── */
    .footer {
      background: var(--color-page-dark);
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 32px 0;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--text-caption);
    }

    .footer-inner--single {
      justify-content: center;
      text-align: center;
    }

    .footer-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      min-height: 44px;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }

    .footer-logo img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .footer-copy {
      color: rgba(255,255,255,0.25);
    }





    /* ── BACK TO TOP BUTTON ── */
    .back-to-top {
      position: fixed;
      right: 28px;
      bottom: 28px;
      z-index: 350;
      display: inline-flex;
      align-items: center;
      justify-content: center;
	      width: 56px;
	      height: 56px;
	      border-radius: 50%;
	      border: 1px solid rgba(255,255,255,0.18);
	      background: rgba(8,18,34,0.86);
	      background-clip: padding-box;
	      color: var(--color-studio-white);
	      box-shadow: 0 12px 34px rgba(0,0,0,0.24);
	      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease, background 0.18s ease, border-color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .back-to-top svg {
      width: 22px;
      height: 22px;
      display: block;
      stroke: currentColor;
    }

    .back-to-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

	    .back-to-top:hover,
	    .back-to-top:focus-visible {
	      background: rgba(17,26,43,0.94);
	      color: var(--color-studio-white);
	      border-color: rgba(255,255,255,0.34);
	      outline: none;
	    }

    @media (max-width: 580px) {
      .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 48px;
        height: 48px;
      }

      .back-to-top svg {
        width: 20px;
        height: 20px;
      }
    }

    /* ── SIMPLE LOADING / SECTION REVEAL EFFECTS ── */
    .page-loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background: var(--color-page-dark);
      color: var(--color-studio-white);
      transition: opacity 0.45s ease, visibility 0.45s ease;
    }

    .page-loader span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.22em;
      line-height: 1;
      opacity: 0.92;
      animation: loaderPulse 1.05s ease-in-out infinite alternate;
    }

    body.loaded .page-loader {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity 0.72s ease,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes loaderPulse {
      from { opacity: 0.35; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .page-loader,
      .page-loader span,
      .reveal {
        animation: none !important;
        transition: none !important;
      }
      .reveal {
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* ── DIVIDER ── */
    hr.section-rule {
      border: none;
      border-top: 1px solid var(--color-pale-border);
      margin: 0;
    }



    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      :root { --pad-x: 48px; }
      .process-flow { grid-template-columns: repeat(3, 1fr); }
      .process-flow::before { display: none; }
    }

    @media (max-width: 860px) {
      :root { --pad-x: 28px; }
      .about-grid,
      .services-intro,
      .skills-intro,
      .contact-layout { grid-template-columns: 1fr; gap: 40px; }
      .about-body { max-width: none; padding-top: 0; }
      .about-pillars {
        grid-template-columns: 1fr;
        margin-top: 48px;
      }
      .about-pillar { min-height: auto; }
      .about-accent-line { display: none; }
      .services-header { flex-direction: column; align-items: flex-start; gap: 24px; }
      .services-header-right { text-align: left; }
      .service-item-header {
        grid-template-columns: 44px 50px minmax(0, 1fr) 34px;
        gap: 16px;
        padding: 24px 28px;
      }
      .svc-tags-preview { display: none; }
      .service-item-detail {
        margin: 0 28px 26px 154px;
        padding-left: 0;
      }
      .service-detail-tags { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
      .service-grid { grid-template-columns: repeat(2, 1fr); }
      .cap-grid { grid-template-columns: 1fr; }
      .skills-intro {
        align-items: start;
        margin-bottom: 44px;
        padding-bottom: 34px;
      }
      .skills-section .section-desc { max-width: none; }
      .skills-actions { margin-top: 24px; }
      .cap-card {
        min-height: auto;
        padding: 28px 28px 30px;
      }
      .skill-cloud { gap: 8px; }
      .skill-chip { font-size: 12px; padding: 8px 14px; }
      .stat-strip { grid-template-columns: 1fr 1fr; }
      .stat-item:last-child { padding-left: 0; border-right: none; grid-column: 1 / -1; border-top: 1px solid var(--color-pale-border); padding-top: 32px; }
      .history-layout { grid-template-columns: 1fr; gap: 40px; }
      .history-sticky { position: static; }
      .history-timeline { padding-left: 30px; }
      .history-summary { max-width: none; }
      .history-item { grid-template-columns: 108px 1fr; }
      .contact-layout { grid-template-columns: 1fr; gap: 40px; }
      .contact-panel { padding: 28px 28px 26px; }
      .contact-metrics { max-width: none; }
      .process-flow { grid-template-columns: repeat(2, 1fr); }
      .hero .wrap { text-align: center; justify-content: center; }
      .hero-bg-video { inset: 0; }
      .hero-bg-video video { inset: 0; width: 100%; height: 100%; transform: none; opacity: 0.62; object-fit: cover; }
      .hero-bg-video::after { background: linear-gradient(180deg, rgba(7,16,29,0.48) 0%, rgba(7,16,29,0.78) 58%, #07101d 100%); }
      .hero-label { justify-content: center; }
      .hero-title { font-size: 56px; }
      .hero-desc { margin-left: auto; margin-right: auto; }
      .hero-actions { justify-content: center; }
      .hero-capabilities { margin-left: auto; margin-right: auto; }
      .hero-brand-mark { right: 50%; bottom: 8vh; font-size: 128px; transform: translateX(50%); opacity: 0.38; }
      .hero-side-note { display: none; }
      .hero-tech-bar { left: 50%; transform: translateX(-50%); }
    }

    @media (max-width: 580px) {
      :root { --pad-x: 20px; }
      .logo { width: 100px; height: 40px; }
      .header-inner .btn { display: none; }
      .hero .wrap { min-height: 720px; justify-content: center; text-align: center; padding-top: 96px; padding-bottom: 96px; }
      .hero-bg-video { inset: 0; }
      .hero-bg-video video { inset: 0; width: 100%; height: 100%; transform: none; opacity: 0.52; object-fit: cover; }
      .hero-bg-video::after { background: linear-gradient(180deg, rgba(7,16,29,0.58) 0%, rgba(7,16,29,0.82) 52%, #07101d 100%); }
      .hero-content { width: 100%; }
      .hero-label {
        gap: 10px;
        margin-bottom: 22px;
        font-size: 11px;
      }
      .hero-label::before { width: 24px; }
      .hero-title {
        font-size: 40px;
        line-height: 1.16;
        margin-bottom: 20px;
      }
      .hero-desc {
        font-size: 15px;
        line-height: 1.74;
        margin-bottom: 30px;
      }
      .hero-desc { margin-left: auto; margin-right: auto; }
      .hero-actions { justify-content: center; }
      .hero-actions .btn {
        width: 100%;
        min-height: 50px;
      }
      .hero-capabilities {
        grid-template-columns: 1fr;
        margin-top: 34px;
      }
      .hero-capabilities li,
      .hero-capabilities li:nth-child(2),
      .hero-capabilities li:last-child {
        min-height: auto;
        padding: 14px 0;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.10);
      }
      .hero-capabilities li:last-child { border-bottom: none; }
      .hero-brand-mark { font-size: 82px; bottom: 5vh; }
      .hero-tech-bar { bottom: 46px; }
      .section { padding: 72px 0; }
      .about-keyword-strip {
        gap: 8px;
        margin-top: 24px;
      }
      .about-keyword {
        font-size: 11px;
        padding: 8px 12px;
      }
      .about-quote {
        margin-top: 28px;
        padding: 20px 22px 20px 24px;
      }
      .about-pillar {
        padding: 28px 24px 30px;
      }
      .skills-section .section-title {
        font-size: clamp(31px, 10vw, 38px);
      }
      .skills-section .section-desc {
        font-size: 15px;
        line-height: 1.75;
      }
      .cap-grid {
        gap: 12px;
        margin-bottom: 22px;
      }
      .cap-card {
        padding: 24px 22px 26px;
      }
      .cap-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 22px;
      }
      .cap-card h3 { font-size: 19px; }
      .skill-chip {
        min-height: 34px;
        padding: 8px 12px;
      }
      .process-intro {
        margin-bottom: 40px;
      }
      .process-desc {
        font-size: 14px;
        line-height: 1.75;
      }
      .service-grid,
      .skill-grid,
      .process-flow { grid-template-columns: 1fr; }
      .service-item-header {
        grid-template-columns: 44px minmax(0, 1fr) 32px;
        gap: 14px;
        padding: 20px;
      }
      .svc-num { display: none; }
      .svc-icon {
        width: 44px;
        height: 44px;
      }
      .svc-title { font-size: 16px; }
      .svc-subtitle { font-size: 12px; }
      .service-item-detail {
        margin: 0 20px 24px;
        padding-top: 18px;
      }
      .process-flow { gap: 12px; }
      .process-card {
        min-height: 188px;
        padding: 24px 22px 24px;
      }
      .process-card::after {
        top: 28px;
        left: 22px;
      }
      .process-num {
        margin-bottom: 48px;
      }
      .process-card h3 {
        font-size: 22px;
      }
      .hero-actions { flex-direction: column; align-items: center; }
      .stat-strip { grid-template-columns: 1fr; }
      .stat-item { border-right: none !important; padding: 0 0 28px 0 !important; border-bottom: 1px solid var(--color-pale-border); }
      .stat-item:last-child { padding-top: 28px !important; border-bottom: none; }
      .history-summary { grid-template-columns: 1fr; gap: 8px; margin-top: 28px; }
      .history-summary div { min-height: auto; padding: 18px 20px; }
      .contact-metrics { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
      .contact-metric { min-height: auto; padding: 20px 20px 22px; }
      .contact-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 28px;
      }
      .contact-actions .btn {
        width: 100%;
        justify-content: center;
      }
      .contact-panel { padding: 24px 22px; }
      .contact-panel-head { padding-bottom: 18px; }
      .contact-note { margin-top: 18px; padding-top: 18px; }
      .history-timeline { padding-left: 24px; gap: 12px; }
      .history-timeline::before { left: 8px; }
      .history-item { grid-template-columns: 1fr; min-height: auto; padding: 24px 22px; }
      .history-item::before { left: -23px; top: 30px; }
      .history-year { font-size: 40px; margin-bottom: 12px; }
      .contact-info-item { grid-template-columns: 1fr; gap: 4px; }
      .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
    }