/* ═══ Gear Vision Variables ══════════════════════════════════════════ */
:root {
  --gv-bg: #0D1B2A;
  --gv-bg2: #12263D;
  --gv-bg3: #1A3450;
  --gv-bg4: #0F2235;
  --gv-accent: #00C9A7;
  --gv-accent2: #4FC3F7;
  --gv-white: #ffffff;
  --gv-offwhite: #E0EAF5;
  --gv-gray: #9BB5CC;
  --gv-divider: #1E4060;
  --gv-ok: #00E676;
  --gv-ng: #FF3D3D;
  --gv-card: #1A3450;
  --gv-card2: #0F2235;
}

.gear-vision-section {
  
  background: var(--gv-bg);
  color: var(--gv-offwhite);
  font-family: 'Segoe UI', Malgun Gothic, 'Apple SD Gothic Neo', sans-serif;
  line-height: 1.6;
}

.gear-vision-section section {
  padding: 80px 2rem;
}

.gear-vision-section .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.gear-vision-section .sec-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gv-accent);
  margin-bottom: .6rem;
}

.gear-vision-section .sec-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--gv-white);
  margin-bottom: .8rem;
}

.gear-vision-section .sec-desc {
  font-size: 1rem;
  color: var(--gv-gray);
  max-width: 680px;
  margin-bottom: 2rem;
}

.gear-vision-section .divider-line {
  width: 60px;
  height: 3px;
  background: var(--gv-accent);
  border-radius: 2px;
  margin: 1rem 0 2rem;
}

/* ═══ Overview Cards ═══════════════════════════════════════ */
#gear-overview {
  background: var(--gv-bg2);
}

.gv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.gv-card {
  background: var(--gv-card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gv-divider);
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

.gv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.gv-card-head {
  padding: .8rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
}

.gv-card.green .gv-card-head {
  background: linear-gradient(90deg, #004D2B, var(--gv-card));
  color: var(--gv-ok);
  border-bottom: 1px solid rgba(0, 230, 118, .2);
}

.gv-card.blue .gv-card-head {
  background: linear-gradient(90deg, #0D2A4A, var(--gv-card));
  color: var(--gv-accent2);
  border-bottom: 1px solid rgba(79, 195, 247, .2);
}

.gv-card-body {
  padding: 1.4rem;
}

.gv-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .55rem;
  align-items: flex-start;
  font-size: .9rem;
}

.gv-key {
  min-width: 65px;
  font-weight: 700;
  color: var(--gv-accent2);
}

.gv-val {
  color: var(--gv-offwhite);
}

.gv-classes {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.gv-cls {
  background: var(--gv-card2);
  border: 1px solid var(--gv-divider);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .78rem;
  color: var(--gv-gray);
}

.gv-cls.active {
  border-color: var(--gv-accent);
  color: var(--gv-accent);
}

/* ═══ Pipeline ════════════════════════════════════════════ */
#gear-pipeline {
  background: var(--gv-bg);
}

.gv-pipe-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-top: 14px;
  padding-bottom: 1rem;
}

.gv-pipe-step {
  flex: 1;
  min-width: 150px;
  background: var(--gv-card);
  border-radius: 12px;
  padding: 1.4rem 1rem;
  text-align: center;
  position: relative;
  border: 1px solid var(--gv-divider);
}

.gv-pipe-step:not(:last-child)::after {
  content: '▶';
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gv-accent);
  font-size: 1rem;
  z-index: 1;
}

.gv-pipe-icon {
  font-size: 2rem;
  margin-bottom: .6rem;
}

.gv-pipe-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--gv-white);
  margin-bottom: .3rem;
}

.gv-pipe-sub {
  font-size: .75rem;
  color: var(--gv-gray);
}

.gv-pipe-num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gv-accent);
  color: var(--gv-bg);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gv-pipe-flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.gv-pipe-flow-card {
  background: var(--gv-card2);
  border-radius: 12px;
  padding: 1.4rem;
  border-left: 3px solid var(--gv-accent);
}

.gv-pipe-flow-card.blue {
  border-left-color: var(--gv-accent2);
}

.gv-pipe-flow-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 1rem;
}

.gv-pipe-flow-title.green {
  color: var(--gv-accent);
}

.gv-pipe-flow-title.blue {
  color: var(--gv-accent2);
}

.gv-pipe-step-list {
  list-style: none;
  padding: 0;
}

.gv-pipe-step-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .4rem 0;
  border-bottom: 1px solid var(--gv-divider);
  font-size: .875rem;
  color: var(--gv-offwhite);
}

.gv-pipe-step-list li:last-child {
  border-bottom: none;
}

.gv-pipe-step-num {
  background: var(--gv-accent);
  color: var(--gv-bg);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .1rem;
}

.gv-pipe-step-num.blue {
  background: var(--gv-accent2);
}

/* ═══ Results Grid ════════════════════════════════════════ */
#gear-results {
  background: var(--gv-bg2);
}

.gv-results-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 1rem;
}

.gv-result-card {
  background: var(--gv-card);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--gv-divider);
  transition: transform .25s, box-shadow .25s;
}

.gv-result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.gv-result-card.ok {
  border-color: rgba(0, 230, 118, .4);
}

.gv-result-card.ng {
  border-color: rgba(255, 61, 61, .35);
}

.gv-result-head {
  padding: .65rem 1rem;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.gv-result-card.ok .gv-result-head {
  background: rgba(0, 77, 43, .6);
  color: var(--gv-ok);
}

.gv-result-card.ng .gv-result-head {
  background: rgba(77, 0, 0, .6);
  color: var(--gv-ng);
}

.gv-ok-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gv-ok);
}

.gv-ng-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gv-ng);
}

.gv-result-img {
  padding: .5rem;
  background: var(--gv-card2);
}

.gv-result-img img {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  aspect-ratio: 3/4;
  background: #111;
}

.gv-result-sub {
  padding: .6rem .9rem;
  font-size: .78rem;
  color: var(--gv-gray);
  text-align: center;
}

/* ═══ Scratch UI ══════════════════════════════════════════ */
#scratch-ui {
  background: var(--gv-bg);
}

.gv-scratch-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.gv-scratch-screenshot {
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(79, 195, 247, .3);
  box-shadow: 0 15px 50px rgba(0, 0, 0, .45);
}

.gv-scratch-screenshot img {
  width: 100%;
}

.gv-feat-list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.gv-feat-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--gv-card);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--gv-accent2);
  transition: transform .2s;
}

.gv-feat-item:hover {
  transform: translateX(4px);
}

.gv-feat-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.gv-feat-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--gv-white);
  margin-bottom: .15rem;
}

.gv-feat-desc {
  font-size: .82rem;
  color: var(--gv-gray);
}

/* ═══ Scratch Results ══════════════════════════════════════ */
#scratch-results {
  background: var(--gv-bg2);
}

.gv-scratch-grid {
  display: grid;
  grid-template-columns: 1fr repeat(4, 1fr);
  gap: .9rem;
}

.gv-sc-card {
  background: var(--gv-card);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--gv-divider);
  transition: transform .25s, box-shadow .25s;
}

.gv-sc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .4);
}

.gv-sc-card.ok {
  border-color: rgba(0, 230, 118, .4);
}

.gv-sc-card.ng {
  border-color: rgba(255, 61, 61, .35);
}

.gv-sc-head {
  padding: .6rem .9rem;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.gv-sc-card.ok .gv-sc-head {
  background: rgba(0, 77, 43, .6);
  color: var(--gv-ok);
}

.gv-sc-card.ng .gv-sc-head {
  background: rgba(77, 0, 0, .6);
  color: var(--gv-ng);
}

.gv-sc-img {
  padding: .4rem;
}

.gv-sc-img img {
  width: 100%;
  border-radius: 6px;
  object-fit: contain;
  aspect-ratio: 1/1;
  background: #111;
}

.gv-sc-score {
  padding: .5rem;
  text-align: center;
  font-size: .78rem;
}

.gv-sc-score span {
  font-weight: 700;
  font-size: .95rem;
}

.gv-sc-score.ok-score span {
  color: var(--gv-ok);
}

.gv-sc-score.ng-score span {
  color: var(--gv-ng);
}

.gv-sc-label {
  font-size: .72rem;
  color: var(--gv-gray);
  margin-top: .1rem;
}

/* ═══ Tech Stack ══════════════════════════════════════════ */
#gear-tech {
  background: var(--gv-bg);
}

.gv-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gv-tech-card {
  background: var(--gv-card);
  border-radius: 12px;
  padding: 1.3rem;
  border: 1px solid var(--gv-divider);
  transition: transform .2s, border-color .2s;
}

.gv-tech-card:hover {
  transform: translateY(-3px);
}

.gv-tech-card:hover.c1 { border-color: var(--gv-accent); }
.gv-tech-card:hover.c2 { border-color: var(--gv-accent2); }
.gv-tech-card:hover.c3 { border-color: #F0A500; }
.gv-tech-card:hover.c4 { border-color: #A78BFA; }

.gv-tech-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.gv-tech-card.c1 .gv-tech-cat { color: var(--gv-accent); }
.gv-tech-card.c2 .gv-tech-cat { color: var(--gv-accent2); }
.gv-tech-card.c3 .gv-tech-cat { color: #F0A500; }
.gv-tech-card.c4 .gv-tech-cat { color: #A78BFA; }

.gv-tech-items {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.gv-tech-item {
  font-size: .875rem;
  color: var(--gv-offwhite);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.gv-tech-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gv-tech-card.c1 .gv-tech-item::before { background: var(--gv-accent); }
.gv-tech-card.c2 .gv-tech-item::before { background: var(--gv-accent2); }
.gv-tech-card.c3 .gv-tech-item::before { background: #F0A500; }
.gv-tech-card.c4 .gv-tech-item::before { background: #A78BFA; }

.gv-metrics-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  background: var(--gv-card2);
  border-radius: 12px;
  padding: 1.2rem;
  border: 1px solid var(--gv-divider);
}

.gv-metric {
  text-align: center;
}

.gv-metric-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gv-accent);
}

.gv-metric-lbl {
  font-size: .75rem;
  color: var(--gv-gray);
  margin-top: .2rem;
}

/* ═══ Benefits ════════════════════════════════════════════ */
#gear-benefits {
  background: var(--gv-bg2);
}

.gv-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gv-benefit-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--gv-card);
  border-radius: 12px;
  padding: 1.2rem;
  border: 1px solid var(--gv-divider);
  transition: transform .2s, border-color .2s;
}

.gv-benefit-item:hover {
  transform: translateY(-3px);
}

.gv-benefit-item:nth-child(odd):hover { border-color: var(--gv-accent); }
.gv-benefit-item:nth-child(even):hover { border-color: var(--gv-accent2); }

.gv-benefit-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.gv-benefit-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--gv-white);
  margin-bottom: .25rem;
}

.gv-benefit-desc {
  font-size: .82rem;
  color: var(--gv-gray);
}

/* ═══ Animations ══════════════════════════════════════════ */
.gear-vision-section .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.gear-vision-section .reveal.visible {
  opacity: 1;
  transform: none;
}

/* ═══ Lightbox ════════════════════════════════════════════ */
.gv-lb-trigger {
  cursor: zoom-in;
  position: relative;
}

.gv-lb-trigger::after {
  content: '🔍';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: .9rem;
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.gv-lb-trigger:hover::after {
  opacity: 1;
}

.gv-lb-trigger img {
  transition: transform .2s, filter .2s;
}

.gv-lb-trigger:hover img {
  transform: scale(1.03);
  filter: brightness(1.1);
}

#gv-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 12, 20, .92);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

#gv-lightbox.open {
  display: flex;
  animation: lbIn .2s ease;
}

@keyframes lbIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gv-lb-content {
  position: relative;
  max-width: min(900px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.gv-lb-img-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--gv-divider);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}

#gv-lb-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  transition: opacity .15s;
}

.gv-lb-caption {
  color: var(--gv-offwhite);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}

.gv-lb-sub {
  color: var(--gv-gray);
  font-size: .8rem;
  text-align: center;
  margin-top: -.5rem;
}

.gv-lb-close {
  position: fixed;
  top: 18px;
  right: 22px;
  background: var(--gv-ng);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  transition: transform .15s, background .15s;
  z-index: 10001;
}

.gv-lb-close:hover {
  transform: scale(1.12);
  background: #cc0000;
}

.gv-lb-nav {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.gv-lb-arrow {
  background: var(--gv-card);
  border: 1px solid var(--gv-divider);
  color: var(--gv-white);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.gv-lb-arrow:hover {
  background: var(--gv-accent);
  border-color: var(--gv-accent);
  color: var(--gv-bg);
}

.gv-lb-counter {
  color: var(--gv-gray);
  font-size: .82rem;
  min-width: 60px;
  text-align: center;
}

/* ═══ Responsive ══════════════════════════════════════════ */
@media(max-width:900px) {
  .gv-grid,
  .gv-scratch-layout,
  .gv-pipe-flows,
  .gv-benefits-grid {
    grid-template-columns: 1fr;
  }
  .gv-results-grid,
  .gv-scratch-grid,
  .gv-tech-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gv-metrics-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .gv-pipe-steps {
    flex-direction: column;
  }
  .gv-pipe-step:not(:last-child)::after {
    content: '▼';
    right: auto;
    bottom: -18px;
    left: 50%;
    top: auto;
  }
}

@media(max-width:600px) {
  .gv-results-grid,
  .gv-scratch-grid,
  .gv-tech-grid,
  .gv-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Animations ══════════════════════════════════════════ */
@keyframes gvFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes gvFadeLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: none; }
}

@keyframes gvBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ═══ Hero Section ════════════════════════════════════════ */
#gv-hero {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gv-bg) 55%, #091520 100%);
    color: var(--gv-offwhite);
}

.gv-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .07;
    background-image: linear-gradient(var(--gv-accent) 1px, transparent 1px),
                      linear-gradient(90deg, var(--gv-accent) 1px, transparent 1px);
    background-size: 60px 60px;
}

.gv-hero-glow {
    position: absolute;
    right: -5%;
    top: 10%;
    width: 55%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(79, 195, 247, .08) 0%, transparent 70%);
    pointer-events: none;
}

.gv-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.gv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(0, 201, 167, .12);
    border: 1px solid rgba(0, 201, 167, .3);
    border-radius: 50px;
    padding: .35rem 1rem;
    font-size: .8rem;
    color: var(--gv-accent);
    margin-bottom: 1.2rem;
    animation: gvFadeUp .6s ease both;
}

.gv-hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gv-white);
    margin-bottom: .8rem;
    animation: gvFadeUp .7s ease both .1s;
}

.gv-hero-title em {
    color: var(--gv-accent);
    font-style: normal;
}

.gv-hero-sub {
    font-size: 1.05rem;
    color: var(--gv-gray);
    margin-bottom: 1.8rem;
    animation: gvFadeUp .7s ease both .2s;
}

.gv-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    animation: gvFadeUp .7s ease both .3s;
}

.gv-tag {
    background: var(--gv-card);
    border: 1px solid var(--gv-divider);
    border-radius: 6px;
    padding: .3rem .8rem;
    font-size: .8rem;
    color: var(--gv-accent2);
}

.gv-hero-img-wrap {
    position: relative;
    animation: gvFadeLeft .8s ease both .2s;
}

.gv-hero-img-wrap img {
    border-radius: 12px;
    border: 2px solid rgba(0, 201, 167, .25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}

.gv-hero-img-badge {
    position: absolute;
    bottom: -14px;
    left: -14px;
    background: var(--gv-bg3);
    border: 1px solid var(--gv-accent);
    border-radius: 10px;
    padding: .6rem 1.1rem;
    font-size: .8rem;
    color: var(--gv-accent);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.gv-hero-scroll {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    animation: gvBounce 2s infinite;
}

.gv-hero-scroll span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gv-gray);
}

.gv-hero-scroll-arrow {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, var(--gv-accent), transparent);
}

@media(max-width:900px) {
    .gv-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 60px;
    }
    .gv-hero-img-wrap {
        display: none;
    }
    .gv-hero-tags {
        justify-content: center;
    }
}