/* ===== HAND-DRAWN STYLE FOUNDATION ===== */
/* SVG filter for hand-drawn look — applied to illustration containers */
.sketch-filter {
  filter: url(#sketch-filter);
}

/* ===== DNA HELIX (Hero) — Double helix with angular bends ===== */
.dna-helix {
  position: relative;
  width: 320px;
  height: 400px;
  flex-shrink: 0;
}

.dna-helix__svg {
  width: 100%;
  height: 100%;
}

.dna-helix__path-1 {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  opacity: 0.16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dna-helix__path-2 {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.8;
  opacity: 0.22;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dna-helix__rung {
  stroke: var(--ink);
  stroke-width: 1.2;
  opacity: 0.2;
  stroke-linecap: round;
}

/* Single traveling dot */
.dna-helix__dot {
  fill: var(--primary);
  opacity: 0;
}

.dna-helix__dot--travel {
  offset-path: path("M270,5 Q280,30 270,55 Q240,90 160,115 Q60,145 45,175 Q35,200 55,225 Q80,255 160,280 Q250,310 270,340 Q280,365 270,395");
  animation: dnaCrawl 12s ease-in-out infinite;
}

@keyframes dnaCrawl {
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 0.9; }
  96%  { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ===== HAND-DRAWN CARD ILLUSTRATIONS ===== */

/* --- Web Dev: Browser with code sketch --- */
.illust-web {
  width: 100%;
  height: 100%;
  position: relative;
}

.illust-web__svg {
  width: 100%;
  height: 100%;
}

/* --- Mobile Dev: Phone sketch --- */
.illust-mobile {
  width: 100%;
  height: 100%;
}

.illust-mobile__svg {
  width: 100%;
  height: 100%;
}

/* --- AI: Neural network sketch --- */
.illust-ai {
  width: 100%;
  height: 100%;
}

.illust-ai__svg {
  width: 100%;
  height: 100%;
}

/* --- SEO: Growth chart sketch --- */
.illust-seo {
  width: 100%;
  height: 100%;
}

.illust-seo__svg {
  width: 100%;
  height: 100%;
}

/* Common sketch stroke style */
.sketch-stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

.sketch-stroke--thin {
  stroke-width: 1;
  opacity: 0.3;
}

.sketch-stroke--thick {
  stroke-width: 2;
  opacity: 0.6;
}

.sketch-fill {
  fill: var(--ink);
  opacity: 0.06;
  stroke: var(--ink);
  stroke-width: 1;
}

.sketch-fill--accent {
  fill: var(--primary);
  opacity: 0.06;
  stroke: var(--primary);
  stroke-width: 1;
  stroke-opacity: 0.3;
}

.sketch-dot {
  fill: var(--ink);
  opacity: 0.4;
}

.sketch-dot--accent {
  fill: var(--primary);
  opacity: 0.25;
}

.sketch-text {
  fill: var(--ink);
  opacity: 0.15;
  font-family: var(--font-family);
  font-size: 9px;
}

/* ===== BROWSER MOCKUP — paper style ===== */
.browser-mockup {
  background: var(--paper-light);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--paper-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.browser-mockup__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--paper-mid);
  border-bottom: 1px solid var(--paper-border);
}

.browser-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--paper-border);
  background: transparent;
}

.browser-mockup__dot:nth-child(1) { border-color: #d4a0a0; }
.browser-mockup__dot:nth-child(2) { border-color: #c4b87a; }
.browser-mockup__dot:nth-child(3) { border-color: #8ab88a; }

.browser-mockup__url {
  flex: 1;
  margin-left: 8px;
  height: 24px;
  background: var(--paper-light);
  border-radius: 4px;
  border: 1px solid var(--paper-border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  color: var(--ink-faint);
}

.browser-mockup__content {
  padding: 1.5rem;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.browser-mockup__line {
  height: 8px;
  border-radius: 4px;
  background: var(--paper-mid);
}

.browser-mockup__line--short { width: 40%; }
.browser-mockup__line--medium { width: 65%; }
.browser-mockup__line--long { width: 90%; }
.browser-mockup__line--accent { background: var(--paper-dark); width: 30%; }

.browser-mockup__code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  opacity: 0.9;
}

.browser-mockup__code-line {
  height: 6px;
  border-radius: 3px;
  opacity: 0.3;
}

.browser-mockup__code-line--blue { background: #7da3cc; width: 50%; }
.browser-mockup__code-line--green { background: #8db88a; width: 70%; }
.browser-mockup__code-line--purple { background: #a090b8; width: 40%; }
.browser-mockup__code-line--orange { background: #c4a06a; width: 60%; }
.browser-mockup__code-line--indent { margin-left: 16px; }

/* ===== PHONE MOCKUP — paper style ===== */
.phone-mockup {
  width: 180px;
  height: 340px;
  background: var(--paper-light);
  border-radius: 28px;
  border: 2px solid var(--paper-border);
  padding: 12px 8px;
  position: relative;
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
}

.phone-mockup__notch {
  width: 60px;
  height: 6px;
  background: var(--paper-mid);
  border: 1px solid var(--paper-border);
  border-radius: 3px;
  margin: 0 auto 12px;
}

.phone-mockup__screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
}

.phone-mockup__header {
  height: 20px;
  background: var(--paper-dark);
  border-radius: 4px;
  border: 1px solid var(--paper-border);
}

.phone-mockup__card {
  background: var(--paper-mid);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--paper-border);
}

.phone-mockup__card-line {
  height: 5px;
  border-radius: 3px;
  background: var(--paper-border);
}

.phone-mockup__card-line--short { width: 50%; }
.phone-mockup__card-line--medium { width: 75%; }

.phone-mockup__button {
  height: 24px;
  background: var(--ink);
  border-radius: 6px;
  margin-top: 4px;
  opacity: 0.15;
}

.phone-mockup__nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
  padding-top: 8px;
}

.phone-mockup__nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--paper-border);
  background: transparent;
}

.phone-mockup__nav-dot--active {
  background: var(--ink);
  opacity: 0.2;
  border-color: transparent;
}

/* ===== NEURAL NETWORK — paper style ===== */
.neural-net {
  position: relative;
  width: 100%;
  height: 220px;
}

.neural-net__node {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper-light);
  opacity: 0.4;
}

.neural-net__node--layer1-1 { left: 10%; top: 20%; }
.neural-net__node--layer1-2 { left: 10%; top: 50%; }
.neural-net__node--layer1-3 { left: 10%; top: 80%; }
.neural-net__node--layer2-1 { left: 40%; top: 10%; }
.neural-net__node--layer2-2 { left: 40%; top: 35%; }
.neural-net__node--layer2-3 { left: 40%; top: 60%; }
.neural-net__node--layer2-4 { left: 40%; top: 85%; }
.neural-net__node--layer3-1 { left: 70%; top: 25%; }
.neural-net__node--layer3-2 { left: 70%; top: 55%; }
.neural-net__node--layer3-3 { left: 70%; top: 85%; }
.neural-net__node--output { left: 92%; top: 50%; background: var(--ink); opacity: 0.15; }

.neural-net__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.neural-net__svg line {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.1;
}

/* ===== GROWTH CHART — paper style ===== */
.growth-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 16px;
}

.growth-chart__bar {
  flex: 1;
  background: var(--paper-dark);
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--paper-border);
  position: relative;
  min-height: 8px;
}

.growth-chart__bar:nth-child(1) { height: 25%; }
.growth-chart__bar:nth-child(2) { height: 35%; }
.growth-chart__bar:nth-child(3) { height: 30%; }
.growth-chart__bar:nth-child(4) { height: 50%; }
.growth-chart__bar:nth-child(5) { height: 45%; }
.growth-chart__bar:nth-child(6) { height: 65%; }
.growth-chart__bar:nth-child(7) { height: 60%; }
.growth-chart__bar:nth-child(8) { height: 80%; }
.growth-chart__bar:nth-child(9) { height: 75%; }
.growth-chart__bar:nth-child(10) { height: 95%; background: var(--ink); opacity: 0.12; border-color: transparent; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .dna-helix {
    width: 240px;
    height: 300px;
  }

  .phone-mockup {
    width: 150px;
    height: 280px;
  }

  .neural-net {
    height: 160px;
  }
}