/* ============================================================
   INK LABORATORY — inklab.css
   Editorial magazine-style design
   ============================================================ */

/* ── navbar accent ── */
.nav-link-lab { color: var(--c-secondary) !important; font-weight: var(--fw-bold) !important; }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.ilab-hero {
  position: relative;
  background: #060c1a;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 140px 0 80px;
}

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

/* subtle grid lines */
.ilab-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.ilab-hero-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* breadcrumb */
.ilab-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.ilab-breadcrumb a,
.ilab-breadcrumb .sep,
.ilab-breadcrumb span { color: rgba(255,255,255,0.4); font-size: var(--sz-xs); }
.ilab-breadcrumb a:hover { color: rgba(255,255,255,0.75); }
.ilab-breadcrumb .sep { font-size: 0.55em; }

/* eyebrow */
.ilab-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-5);
}
.ilab-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 12px #3b82f6;
  animation: ilab-pulse 2s infinite;
}
@keyframes ilab-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.8); }
}

/* big title */
.ilab-hero-h1 {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--sp-7);
  line-height: 1.0;
}
.ilab-h1-sub {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.ilab-h1-main {
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: var(--fw-extrabold);
  color: white;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ilab-h1-accent {
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: var(--fw-extrabold);
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
  line-height: 1.15;
  padding-bottom: 0.1em;
}

.ilab-hero-p {
  font-size: var(--sz-base);
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: var(--sp-9);
}
.ilab-hero-p em { color: rgba(255,255,255,0.85); font-style: normal; }

/* hero CTAs */
.ilab-hero-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-10); }
.ilab-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 16px 32px;
  background: #3b82f6;
  color: white;
  border-radius: var(--r-xl);
  font-weight: var(--fw-bold);
  font-size: var(--sz-base);
  text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 8px 24px rgba(59,130,246,0.45);
  white-space: nowrap;
}
.ilab-cta-primary:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(59,130,246,0.6); }
.ilab-cta-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 16px 32px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.8);
  border-radius: var(--r-xl);
  font-weight: var(--fw-semibold);
  font-size: var(--sz-base);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.ilab-cta-ghost:hover { background: rgba(255,255,255,0.13); color: white; border-color: rgba(255,255,255,0.35); }

/* splash stat cards */
.ilab-splash-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--sp-3);
}
.ilab-splash-card {
  border-radius: var(--r-2xl);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  min-height: 120px;
  overflow: hidden;
}
.ilab-sc-1 { background: rgba(99,102,241,0.18); }
.ilab-sc-2 { background: rgba(59,130,246,0.18); }
.ilab-sc-3 { background: rgba(16,185,129,0.18); }
.ilab-sc-4 { background: rgba(245,158,11,0.18); }
.ilab-sc-num {
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: var(--fw-extrabold);
  color: white;
  line-height: 1;
  white-space: nowrap;
}
.ilab-sc-icon {
  font-size: 2.8rem;
  color: #fbbf24;
  line-height: 1;
}
.ilab-sc-label {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.6);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════
   COMMON SECTION WRAPPER
══════════════════════════════════════════════ */
.ilab-sec {
  padding: var(--sp-20) 0;
  background: var(--c-bg);
}
.ilab-sec-alt {
  background: var(--c-surface);
}
.ilab-sec-dark {
  background: #0f172a;
}

.ilab-sec-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--sz-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: var(--sp-6);
}
.ilab-sec-tag span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  background: var(--c-secondary);
  color: white;
  font-size: 0.7rem;
}
.ilab-sec-tag-light { color: rgba(255,255,255,0.5); }
.ilab-sec-tag-light span { background: rgba(255,255,255,0.15); color: white; }

.ilab-sec-h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-10);
}
.ilab-sec-h2 em { color: var(--c-secondary); font-style: normal; }
.ilab-h2-white { color: white; }


/* ══════════════════════════════════════════════
   SECTION 01 — WHAT IS / diagram + text
══════════════════════════════════════════════ */
.ilab-split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--sp-12);
  align-items: start;
}
.ilab-split-rev { grid-template-columns: 360px 1fr; }

.ilab-diagram {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-6);
  position: relative;
}
.ilab-diag-title {
  font-size: var(--sz-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.ilab-diag-steps { display: flex; flex-direction: column; }
.ilab-dstep {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  position: relative;
  min-width: 0;
}
.ilab-dstep-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.ilab-dstep-body { padding: 2px 0 2px; flex: 1; min-width: 0; }
.ilab-dstep-body strong { display: block; font-size: var(--sz-sm); font-weight: var(--fw-bold); color: var(--c-text); margin-bottom: 3px; line-height: 1.35; word-break: break-word; }
.ilab-dstep-body span  { font-size: var(--sz-xs); color: var(--c-text-muted); line-height: 1.55; display: block; word-break: break-word; }
.ilab-dstep-arrow {
  position: absolute;
  left: 13px;
  bottom: -14px;
  color: var(--c-border-mid);
  font-size: 0.8rem;
  z-index: 1;
}
.ilab-dstep { margin-bottom: var(--sp-5); }
.ilab-dstep:last-child { margin-bottom: 0; }

.ilab-text-side .ilab-sec-h2 { margin-bottom: var(--sp-6); }
.ilab-text-side p {
  font-size: var(--sz-base);
  color: var(--c-text-2);
  line-height: 1.8;
  margin-bottom: var(--sp-8);
}
.ilab-text-side strong { color: var(--c-text); }

.ilab-print-types { margin-top: var(--sp-2); }
.ilab-pt-label {
  font-size: var(--sz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}
.ilab-pt-grid { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ilab-pt-chip {
  padding: 7px 16px;
  border-radius: var(--r-full);
  font-size: var(--sz-xs);
  font-weight: var(--fw-bold);
}
.ilab-pt-active {
  box-shadow: 0 0 0 2px currentColor;
}


/* ══════════════════════════════════════════════
   SECTION 02 — APPLICATIONS mosaic
══════════════════════════════════════════════ */
.ilab-apps-header { margin-bottom: var(--sp-12); }
.ilab-apps-sub {
  font-size: var(--sz-base);
  color: rgba(255,255,255,0.5);
  max-width: 580px;
  line-height: 1.7;
}

/* uniform 6-col grid */
.ilab-apps-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
.ilab-app-lg, .ilab-app-md, .ilab-app-sm { grid-column: span 1; grid-row: span 1; }

.ilab-app-tile {
  border-radius: var(--r-2xl);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: transform var(--dur-normal), border-color var(--dur-normal), background var(--dur-normal);
}
.ilab-app-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, var(--ac, #3b82f6) 0%, transparent 65%);
  opacity: 0.15;
  transition: opacity var(--dur-normal);
}
.ilab-app-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
}
.ilab-app-tile:hover::before { opacity: 0.28; }

.ilab-app-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--r-2xl);
  background: var(--ac, #3b82f6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ac, #3b82f6) 50%, transparent);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.ilab-app-tile:hover .ilab-app-icon-wrap { transform: scale(1.1); }

.ilab-app-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.ilab-app-label {
  font-size: var(--sz-sm);
  font-weight: var(--fw-extrabold);
  color: white;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.ilab-app-fact {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ilab-app-tile:hover .ilab-app-fact { color: rgba(255,255,255,0.75); }


/* ══════════════════════════════════════════════
   SECTION 03 — VERDICT grid
══════════════════════════════════════════════ */
.ilab-verdict-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}
.ilab-verdict-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  padding-top: calc(var(--sp-6) + 4px);
  position: relative;
  transition: transform var(--dur-normal), box-shadow var(--dur-normal);
}
.ilab-verdict-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.ilab-vc-num {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-border);
  line-height: 1;
  pointer-events: none;
}
.ilab-vc-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--c-secondary) 12%, transparent);
  color: var(--c-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: var(--sp-4);
}
.ilab-vc-title {
  font-size: var(--sz-sm);
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.ilab-vc-desc {
  font-size: var(--sz-xs);
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* trade-offs */
.ilab-tradeoff {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-8);
}
.ilab-tradeoff-label {
  font-size: var(--sz-sm);
  font-weight: var(--fw-extrabold);
  color: #92400e;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ilab-tradeoff-items { display: flex; flex-direction: column; gap: var(--sp-2); }
.ilab-tradeoff-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--sz-sm);
  color: #78350f;
}
.ilab-tradeoff-item i { color: #d97706; margin-top: 3px; flex-shrink: 0; }


/* ══════════════════════════════════════════════
   SECTION 04 — TIMELINE
══════════════════════════════════════════════ */
.ilab-tl { display: flex; flex-direction: column; gap: 0; }
.ilab-tl-row {
  display: grid;
  grid-template-columns: 140px 48px 1fr;
  gap: 0;
  position: relative;
}
.ilab-tl-left {
  text-align: right;
  padding: var(--sp-2) var(--sp-5) var(--sp-8) 0;
}
.ilab-tl-era {
  font-size: var(--sz-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ilab-tl-year {
  font-size: var(--sz-xl);
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  line-height: 1;
}

.ilab-tl-dot-col { display: flex; flex-direction: column; align-items: center; }
.ilab-tl-dot-wrap { flex-shrink: 0; padding: var(--sp-3) 0; }
.ilab-tl-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-border);
  border: 3px solid var(--c-bg);
  box-shadow: 0 0 0 2px var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: white;
}
.ilab-tl-dot-star {
  width: 26px;
  height: 26px;
  background: var(--c-secondary);
  box-shadow: 0 0 0 3px var(--c-secondary), 0 0 20px rgba(var(--c-secondary-rgb, 21,101,192),0.4);
  font-size: 0.65rem;
}
.ilab-tl-line {
  flex: 1;
  width: 2px;
  background: var(--c-border);
  min-height: 20px;
}

.ilab-tl-right {
  padding: var(--sp-2) 0 var(--sp-8) var(--sp-6);
}
.ilab-tl-jujo .ilab-tl-right {
  background: color-mix(in srgb, var(--c-secondary) 4%, transparent);
  border-radius: var(--r-2xl);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
  border: 1px solid color-mix(in srgb, var(--c-secondary) 20%, transparent);
}
.ilab-tl-title {
  font-size: var(--sz-base);
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.ilab-tl-desc {
  font-size: var(--sz-sm);
  color: var(--c-text-2);
  line-height: 1.7;
  margin: 0;
  max-width: 600px;
}


/* ══════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════ */
.ilab-cta-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1e40af 100%);
  padding: var(--sp-20) 0;
}
.ilab-cta-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.ilab-cta-eyebrow {
  font-size: var(--sz-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ilab-cta-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: var(--fw-extrabold);
  color: white;
  line-height: 1.2;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.02em;
}
.ilab-cta-text p {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.ilab-cta-btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
  margin-left: auto;
  min-width: 200px;
}


/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .ilab-hero-wrap { grid-template-columns: 1fr; }
  .ilab-hero-right { display: none; }
  .ilab-split { grid-template-columns: 320px 1fr; gap: var(--sp-8); }
  .ilab-verdict-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .ilab-split { grid-template-columns: 1fr; }
  .ilab-diagram { position: static; }
  .ilab-apps-mosaic { grid-template-columns: repeat(4, 1fr); }
  .ilab-verdict-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ilab-hero { min-height: auto; padding: 120px 0 60px; }
  .ilab-h1-main, .ilab-h1-accent { font-size: clamp(2.5rem, 8vw, 3.5rem); }
  .ilab-apps-mosaic { grid-template-columns: repeat(3, 1fr); }
  .ilab-verdict-grid { grid-template-columns: 1fr 1fr; }
  .ilab-tl-row { grid-template-columns: 80px 36px 1fr; }
  .ilab-tl-year { font-size: var(--sz-lg); }
  .ilab-cta-inner { flex-direction: column; text-align: center; }
  .ilab-cta-btns { margin-left: 0; justify-content: center; }
}
@media (max-width: 480px) {
  .ilab-apps-mosaic { grid-template-columns: repeat(2, 1fr); }
  .ilab-verdict-grid { grid-template-columns: 1fr; }
  .ilab-tl-row { grid-template-columns: 70px 28px 1fr; }
  .ilab-hero-ctas { flex-direction: column; }
}