/* ═══════════════════════════════════════════════
   HOME PAGE — Specific styles
   ═══════════════════════════════════════════════ */

/* HERO */
.hero {
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:flex-start;
  padding-top:5rem; padding-bottom:2rem; overflow-x:clip; overflow-y:visible;
}
.hero__glow {
  position:absolute; bottom:-20%; right:-10%; width:60%; height:70%;
  background:radial-gradient(ellipse at center, rgba(232,88,62,0.06) 0%, transparent 70%);
  pointer-events:none; filter:blur(40px); z-index:1;
}
.hero__bg-web {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
  opacity:0; animation:fadeIn 2s ease forwards; animation-delay:0s;
}
.hero > .container { width:100%; position:relative; z-index:4; }
.hero__layout {
  position:relative; width:100%;
}
.hero__content { position:relative; z-index:2; max-width:640px; text-align:left; }
.hero__overline { margin-bottom:1.5rem; animation:fadeIn 0.8s ease both; animation-delay:0.9s; }
.hero__title {
  font-family:var(--f-display); font-size:var(--fs-hero); font-weight:400;
  line-height:var(--lh-tight); letter-spacing:var(--ls-tight); margin-bottom:2.25rem;
  animation:fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) both; animation-delay:1.05s;
}
.hero__subtitle {
  font-size:clamp(1rem,1.5vw,1.125rem); color:var(--c-text-muted);
  max-width:580px; line-height:1.7; margin-bottom:2.5rem;
  animation:fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) both; animation-delay:1.2s;
}
.hero__actions {
  display:flex; align-items:center; gap:2rem;
  animation:fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) both; animation-delay:1.35s;
}
.hero__teasers {
  display:flex; gap:0; margin-top:4rem;
  animation:fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) both; animation-delay:1.5s;
}
.hero__teaser {
  display:flex; flex-direction:column; gap:0.25rem;
  min-width:140px; padding-right:2rem;
  border-right:1px solid var(--c-border);
}
.hero__teaser:last-child { border-right:none; padding-right:0; padding-left:2rem; }
.hero__teaser:not(:first-child):not(:last-child) { padding-left:2rem; }
.hero__teaser-num {
  font-family:var(--f-mono); font-size:clamp(1.1rem,1.6vw,1.3rem);
  font-weight:700; color:var(--c-text); letter-spacing:-0.02em; white-space:nowrap;
}
.hero__teaser-label {
  font-family:var(--f-mono); font-size:var(--fs-micro);
  color:var(--c-text-dim); letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.hero__visual {
  position:absolute; top:50%; right:-5%; transform:translateY(-50%);
  width:850px; height:auto; aspect-ratio:1.3;
  z-index:3; pointer-events:none;
  animation:fadeIn 1.4s ease both; animation-delay:0.1s;
  opacity:0.5;
}
.hero-viz { width:100%; height:100%; }
.hero-viz__node { fill: var(--c-accent); }
.hero-viz__node--secondary { fill: var(--c-accent-light); }
.hero-viz__node--muted { fill: var(--c-text-dim); }
.hero-viz__link { stroke: var(--c-border-hover); stroke-width: 0.5; opacity: 0; animation: fadeIn 0.8s ease both; }
.hero-viz__link--accent { stroke: rgba(232,88,62,0.2); }
.hero-viz__ring { fill: none; stroke: var(--c-border); stroke-width: 0.5; stroke-dasharray: 4 4; }
.hero-viz__label { font-family: var(--f-mono); font-size: 11px; fill: #d4c9a0; letter-spacing: 0.5px; opacity: 0.5; }
.hero-viz__label--accent { fill: var(--c-accent); opacity: 0.55; }
.hero-viz__link:nth-of-type(1) { animation-delay:0.2s; }
.hero-viz__link:nth-of-type(2) { animation-delay:0.28s; }
.hero-viz__link:nth-of-type(3) { animation-delay:0.36s; }
.hero-viz__link:nth-of-type(4) { animation-delay:0.44s; }
.hero-viz__link:nth-of-type(5) { animation-delay:0.52s; }
.hero-viz__link:nth-of-type(6) { animation-delay:0.6s; }
.hero-viz__link:nth-of-type(7) { animation-delay:0.68s; }
.hero-viz__link:nth-of-type(8) { animation-delay:0.76s; }
.hero-viz__link:nth-of-type(9) { animation-delay:0.84s; }
.hero-viz__link:nth-of-type(10) { animation-delay:0.92s; }
.hero-viz__link:nth-of-type(11) { animation-delay:1.0s; }
.hero-viz__link:nth-of-type(12) { animation-delay:1.08s; }
.hero-viz__link:nth-of-type(13) { animation-delay:1.16s; }
.hero-viz__link:nth-of-type(14) { animation-delay:1.24s; }

.hero__scroll {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
  animation:fadeIn 1s ease both; animation-delay:1.8s;
  z-index:5;
}
.hero__scroll-line { width:2px; height:48px; background:var(--c-border-hover); position:relative; overflow:hidden; }
.hero__scroll-line::after {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:var(--c-accent); transform-origin:top; animation:scrollLine 2.5s ease-in-out infinite;
}
.hero__scroll-text { font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--c-text-dim); }

/* PROBLEMS */
.problems { padding:var(--section-py) 0; }
.problems__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.problem-card {
  padding: clamp(1.75rem,3vw,2.5rem); border-radius: var(--r-lg);
  background: var(--c-glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--c-border); position: relative; overflow: hidden;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.problem-card:hover { border-color: var(--c-border-accent); background: var(--c-glass-hover); transform: translateY(-4px); }
.problem-card__icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 1.5rem;
  background: rgba(232,88,62,0.08); border: 1px solid rgba(232,88,62,0.15);
  display: flex; align-items: center; justify-content: center;
}
.problem-card__icon svg { width: 24px; height: 24px; }
.problem-card__title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 0.75rem; }
.problem-card__desc { font-size: var(--fs-small); color: var(--c-text-muted); line-height: 1.65; flex: 1; }
.problem-card__link {
  margin-top: 1.5rem; font-family: var(--f-mono); font-size: var(--fs-caption);
  color: var(--c-accent); letter-spacing: 0.02em;
  transition: color var(--transition);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.problem-card__link:hover { color: var(--c-accent-light); }

/* COMPARISON */
.comparison { padding:var(--section-py) 0; }
.comparison__table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-border);
}
.comparison__table thead th {
  padding: 1.25rem 1.5rem; font-family: var(--f-mono); font-size: var(--fs-caption);
  font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase;
  text-align: left; border-bottom: 1px solid var(--c-border);
}
.comparison__table thead th:first-child { background: rgba(255,255,255,0.02); color: var(--c-text-dim); }
.comparison__table thead th:last-child { background: rgba(232,88,62,0.05); color: var(--c-accent); }
.comparison__table td {
  padding: 1rem 1.5rem; font-size: var(--fs-small); line-height: 1.55;
  border-bottom: 1px solid var(--c-border); vertical-align: top;
}
.comparison__table tr:last-child td { border-bottom: none; }
.comparison__table td:first-child { color: var(--c-text-muted); background: rgba(255,255,255,0.015); width: 45%; }
.comparison__table td:last-child { color: var(--c-text); background: rgba(232,88,62,0.02); width: 55%; }
.comparison__table td:last-child strong { color: var(--c-accent); font-weight: 600; }
.comparison__icon { display: inline-block; margin-right: 0.5rem; opacity: 0.5; }

/* METRICS */
.metrics { padding:var(--section-py) 0; }
.metrics__grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:var(--gap); }
.metric-card--wide { grid-column:span 2; }
.metric-card--accent .metric-card__number { color:var(--c-accent); }
.metric-card__number { font-family:var(--f-mono); font-size:var(--fs-metric); font-weight:700; line-height:1; letter-spacing:-0.02em; margin-bottom:0.75rem; }
.metric-card__number--strike { text-decoration:line-through; text-decoration-color:var(--c-accent); text-decoration-thickness:3px; }
.metric-card__label { font-size:var(--fs-small); font-weight:600; margin-bottom:0.375rem; }
.metric-card__desc { font-size:var(--fs-small); color:var(--c-text-muted); line-height:1.55; }
.metric-card__visual { margin-top:1.25rem; position:relative; }

.mini-dashboard { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:1rem; }
.mini-dashboard__item { background:rgba(255,255,255,0.03); border:1px solid var(--c-border); border-radius:var(--r-sm); padding:8px; text-align:center; }
.mini-dashboard__val { font-family:var(--f-mono); font-size:var(--fs-caption); font-weight:700; color:var(--c-text); }
.mini-dashboard__lbl { font-size:var(--fs-micro); color:var(--c-text-dim); margin-top:2px; }

.ad-preview { margin-top:1rem; }
.ad-preview__item { padding:8px 10px; margin-bottom:4px; background:rgba(255,255,255,0.025); border:1px solid var(--c-border); border-radius:var(--r-sm); transition: border-color var(--transition); }
.ad-preview__item:hover { border-color:var(--c-border-accent); }
.ad-preview__title { font-family:var(--f-sans); font-size:11px; font-weight:600; color:var(--c-accent); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-preview__url { font-family:var(--f-mono); font-size:9px; color:var(--c-green); margin-bottom:2px; }
.ad-preview__text { font-size:10px; color:var(--c-text-muted); line-height:1.3; }

.gap-bars { display:flex; align-items:flex-end; gap:3px; height:48px; margin-top:1rem; }
.gap-bars__bar { flex:1; border-radius:2px 2px 0 0; transform-origin:bottom; }
.gap-bars__bar--filled { background:var(--c-accent); }
.gap-bars__bar--empty { background:rgba(255,255,255,0.06); }
.is-visible .gap-bars__bar { animation:barGrow 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.is-visible .gap-bars__bar:nth-child(1) { animation-delay:0.1s; }
.is-visible .gap-bars__bar:nth-child(2) { animation-delay:0.14s; }
.is-visible .gap-bars__bar:nth-child(3) { animation-delay:0.18s; }
.is-visible .gap-bars__bar:nth-child(4) { animation-delay:0.22s; }
.is-visible .gap-bars__bar:nth-child(5) { animation-delay:0.26s; }
.is-visible .gap-bars__bar:nth-child(6) { animation-delay:0.3s; }
.is-visible .gap-bars__bar:nth-child(7) { animation-delay:0.34s; }
.is-visible .gap-bars__bar:nth-child(8) { animation-delay:0.38s; }
.is-visible .gap-bars__bar:nth-child(9) { animation-delay:0.42s; }
.is-visible .gap-bars__bar:nth-child(10) { animation-delay:0.46s; }

.states-flow { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--c-border); }
.states-flow__track { display:flex; align-items:center; gap:0; margin-bottom:0.75rem; }
.states-flow__node { width:12px; height:12px; border-radius:50%; flex-shrink:0; border:2px solid; }
.states-flow__node--trigger { border-color:var(--c-accent); background:rgba(232,88,62,0.2); }
.states-flow__node--search { border-color:var(--c-accent-light); background:rgba(244,162,97,0.15); }
.states-flow__node--purchase { border-color:var(--c-green); background:rgba(52,211,153,0.15); }
.states-flow__line { flex:1; height:1px; background:var(--c-border-hover); position:relative; }
.states-flow__line::after { content:''; position:absolute; top:-1px; left:0; height:3px; width:30%; background:var(--c-accent); border-radius:2px; animation: float 2s ease-in-out infinite; }
.states-flow__labels { display:flex; justify-content:space-between; }
.states-flow__label { font-family:var(--f-mono); font-size:9px; letter-spacing:0.05em; text-transform:uppercase; color:var(--c-text-dim); }

.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c-green); margin-right:0.5rem; animation:pulseDot 2s ease-in-out infinite; vertical-align:middle; }
.monitor-viz { margin-top:1rem; }
.monitor-viz__screen { background:rgba(255,255,255,0.02); border:1px solid var(--c-border); border-radius:var(--r-sm); padding:8px; height:56px; position:relative; overflow:hidden; }
.monitor-viz__line { position:absolute; left:8px; right:8px; height:1px; background:var(--c-accent); opacity:0.3; animation: float 3s ease-in-out infinite; }
.monitor-viz__line:nth-child(1) { top:12px; width:60%; animation-delay:0s; }
.monitor-viz__line:nth-child(2) { top:24px; width:80%; animation-delay:-1s; opacity:0.2; }
.monitor-viz__line:nth-child(3) { top:36px; width:45%; animation-delay:-2s; opacity:0.15; }

/* PROCESS */
.process { padding:var(--section-py) 0; }
.process__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap); }
.process-card {
  padding: clamp(1.5rem,3vw,2rem); padding-top:0;
  border-radius:var(--r-lg); background:var(--c-glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--c-border); display:flex; flex-direction:column;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  overflow:hidden;
}
.process-card:hover { border-color:var(--c-border-accent); background:var(--c-glass-hover); transform:translateY(-4px); }
.process-card__illust {
  width:calc(100% + clamp(3rem,6vw,4rem)); margin-left:calc(-1 * clamp(1.5rem,3vw,2rem));
  margin-bottom:1.5rem; height:160px; background:rgba(255,255,255,0.015);
  border-bottom:1px solid var(--c-border); display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.process-card__illust svg { width:80%; height:80%; }
.process-card__num { font-family:var(--f-mono); font-size:var(--fs-caption); font-weight:700; color:var(--c-text-dim); margin-bottom:0.75rem; transition:color var(--transition); }
.process-card:hover .process-card__num { color:var(--c-accent); }
.process-card__title { font-size:var(--fs-h3); font-weight:600; margin-bottom:0.5rem; }
.process-card__desc { font-size:var(--fs-small); color:var(--c-text-muted); line-height:1.6; }
.process-card__toggle { margin-top: 1rem; font-family: var(--f-mono); font-size: var(--fs-caption); color: var(--c-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--transition); user-select: none; }
.process-card__toggle:hover { color: var(--c-accent-light); }
.process-card__toggle-icon { display: inline-block; transition: transform var(--transition); font-size: 10px; }
.process-card__details { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; opacity: 0; }
.process-card__details.open { max-height: 400px; opacity: 1; margin-top: 0.75rem; }
.process-card__details li { font-size: var(--fs-small); color: var(--c-text-muted); line-height: 1.6; padding: 0.25rem 0; padding-left: 1rem; position: relative; }
.process-card__details li::before { content: ''; position: absolute; left: 0; top: 0.7rem; width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); opacity: 0.5; }
.process-card__result { margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: rgba(232,88,62,0.05); border: 1px solid rgba(232,88,62,0.1); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 11px; color: var(--c-accent); opacity: 0.8; }

/* CASE STUDY */
.case-study { padding: var(--section-py) 0; }
.case-study__card { padding: clamp(2rem,4vw,3rem); border-radius: var(--r-lg); background: var(--c-glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--c-border); position: relative; overflow: hidden; }
.case-study__header { margin-bottom: 2.5rem; }
.case-study__niche { font-family: var(--f-mono); font-size: var(--fs-caption); color: var(--c-accent); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: 0.75rem; }
.case-study__title { font-family: var(--f-display); font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 400; line-height: 1.1; margin-bottom: 0.75rem; }
.case-study__desc { font-size: var(--fs-small); color: var(--c-text-muted); line-height: 1.6; max-width: 500px; }
.case-study__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: 2.5rem; }
.case-stat { padding: 1.25rem; background: rgba(255,255,255,0.025); border: 1px solid var(--c-border); border-radius: var(--r-md); text-align: center; }
.case-stat__number { font-family: var(--f-mono); font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; color: var(--c-accent); line-height: 1; margin-bottom: 0.5rem; }
.case-stat__label { font-size: var(--fs-caption); color: var(--c-text-muted); }
.case-study__tree { padding: 1.5rem; background: rgba(255,255,255,0.015); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: 2rem; overflow-x: auto; }
.case-tree__title { font-family: var(--f-mono); font-size: var(--fs-caption); color: var(--c-text-dim); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: 1rem; }
.case-study__cta { text-align: center; padding-top: 2rem; border-top: 1px solid var(--c-border); }
.case-study__cta p { font-size: var(--fs-body); color: var(--c-text-muted); margin-bottom: 1.25rem; }

/* ZERO TEMPLATE VIZ */
.zero-template-viz { margin-top: 1rem; }
.zero-template-viz__line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zero-template-viz__label { font-family: var(--f-mono); font-size: 9px; color: var(--c-text-dim); min-width: 70px; text-align: right; }
.zero-template-viz__bar { height: 6px; border-radius: 3px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.zero-template-viz__bar--muted { background: rgba(255,255,255,0.06); }
.zero-template-viz__bar--accent { background: var(--c-accent); opacity: 0.7; }

/* AD PREVIEW GOOD/BAD */
.ad-preview__item--good { border-left: 2px solid var(--c-green); }
.ad-preview__item--bad { border-left: 2px solid rgba(255,255,255,0.1); opacity: 0.6; }
.ad-preview__badge { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.ad-preview__item--good .ad-preview__badge { color: var(--c-green); }
.ad-preview__item--bad .ad-preview__badge { color: var(--c-text-dim); }

/* STATES FLOW COMPARE NODE */
.states-flow__node--compare { border-color: #a78bfa; background: rgba(167, 139, 250, 0.15); }

/* HOME RESPONSIVE */
@media (max-width:1024px) {
  .hero__visual { width:650px; right:-10%; opacity:0.4; }
  .metrics__grid { grid-template-columns:repeat(2,1fr); }
  .metric-card--wide { grid-column:span 2; }
  .process__grid { grid-template-columns:repeat(2,1fr); }
  .case-study__stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .problems__grid { grid-template-columns:1fr; }
  .comparison__table td, .comparison__table th { padding: 0.75rem 1rem; }
}
@media (max-width:680px) {
  .hero__visual { width:450px; right:-5%; opacity:0.3; }
  .metrics__grid, .process__grid { grid-template-columns:1fr; }
  .metric-card--wide { grid-column:span 1; }
  .case-study__stats { grid-template-columns:repeat(2,1fr); }
  .hero__actions { flex-direction:column; align-items:flex-start; gap:1rem; }
  .hero__teasers { gap:1.5rem; margin-top:2rem; }
  .process-card__illust { height:120px; }
}