/* Homepage, Nova-style (founder 2026-10-08: "Make the website clean like novaaiops.com. Don't change the themes ... try the vertical line and add the best websites on it"):
   bigger, tighter section headings, outlined section labels with fine lines, more room between sections, and the
   "best websites built in our Code Lab" vertical line (featured-line.js). Theme and colours unchanged; hero size unchanged (the map sits beside it). */
/* Headings: bigger, bolder, tighter, like novaaiops.com */
.hero h1 { letter-spacing: -0.03em !important; } /* hero size kept: the map sits beside it */
.section-head h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.05 !important; margin-bottom: 18px !important; }
.section-head > p { font-size: 1.125rem !important; line-height: 1.65 !important; max-width: 720px !important; }
/* Section labels: an outlined pill with thin lines either side ("THE PLATFORM" style) */
.section-head .eyebrow, .section-head .light-eyebrow, .tbx-eyebrow { display: inline-flex !important; align-items: center; gap: 10px; padding: 9px 18px !important; border: 1px solid var(--border, rgba(96,165,250,.25)); border-radius: 4px; background: color-mix(in srgb, var(--accent, #3b82f6) 6%, transparent); font-size: .74rem !important; letter-spacing: .24em !important; font-weight: 700 !important; position: relative; margin-bottom: 26px !important; }
.section-head .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.nv-lines { display: flex; align-items: center; justify-content: center; gap: 22px; }
.nv-lines::before, .nv-lines::after { content: ""; flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--border, rgba(96,165,250,.35))); }
.nv-lines::after { background: linear-gradient(270deg, transparent, var(--border, rgba(96,165,250,.35))); }
@media (min-width: 900px) { .section { padding-top: 112px !important; padding-bottom: 112px !important; } }

/* ===== The vertical line ===== */
.vt-sec { padding: 112px 0 40px; position: relative; }
.vt-sec .section-head { margin-bottom: 64px; }
/* Wider than the normal container (founder 2026-10-18: "make the description container longer so 'Built by
   Dr. Daniel Tanimawo in the free Code Lab' fits in one row"), in the same spirit as #learning-paths (1380) and
   .hero (1480). The two columns must stay EQUAL: the glowing line is at left:50% and the dots/connectors are
   centred on it, so an uneven split would push the line onto a panel. Widening the whole rail is the lever. */
.vt { position: relative; max-width: 1420px; margin: 0 auto; padding: 0 24px; }
.vt::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(180deg, transparent, var(--accent, #3b82f6) 6%, #22d3ee 50%, var(--accent, #3b82f6) 94%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #3b82f6) 55%, transparent); }
.vt-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; margin: 0 0 110px; }
.vt-item::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--bg, #020617); border: 3px solid #22d3ee; box-shadow: 0 0 0 6px color-mix(in srgb, #22d3ee 18%, transparent), 0 0 18px #22d3ee; }
.vt-item:nth-child(even) .vt-card { order: 2; }
/* Connectors (founder 2026-10-11: "Also connect the one at the homepage of the website"): a glowing bar from the website card
   through the dot on the line to the text, a bright end where it meets each side, and a light running along it. */
.vt-item::before { content: ""; position: absolute; left: calc(50% - 54px); top: 50%; width: 108px; height: 12px; margin-top: -6px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 6px 50%, #e0fbff 0 3px, #22d3ee 4px, transparent 6px), radial-gradient(circle at calc(100% - 6px) 50%, #e0fbff 0 3px, #22d3ee 4px, transparent 6px), linear-gradient(90deg, var(--accent, #3b82f6), #22d3ee 50%, var(--accent, #3b82f6)) center / 100% 2px no-repeat, linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) 0 50% / 26% 2px no-repeat;
  filter: drop-shadow(0 0 6px #22d3ee); animation: vt-flow 2.8s linear infinite; }
.vt-item::after { z-index: 2; }
/* the text side is a panel too, so the connector joins two containers */
.vt-text { position: relative; padding: 34px 30px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #3b82f6) 7%, #05080f), #05080f); border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent); border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.vt-text p:last-of-type { margin-bottom: 22px; }
@keyframes vt-flow { from { background-position: 0 50%, 0 50%, center, -40% 50%; } to { background-position: 0 50%, 0 50%, center, 140% 50%; } }
@media (prefers-reduced-motion: reduce) { .vt-item::before { animation: none; } }
.vt-card { display: block; background: #05080f; border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.vt-card:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px #22d3ee; }
.vt-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #070b14; border-bottom: 1px solid rgba(255,255,255,.06); }
.vt-dots { display: flex; gap: 6px; } .vt-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; } .vt-dots i:nth-child(2) { background: #f59e0b; } .vt-dots i:nth-child(3) { background: #22c55e; }
.vt-url { flex: 1; min-width: 0; font: 600 .8rem ui-monospace, Menlo, monospace; color: #cbd5e1; background: #0b1220; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-live { font: 800 .7rem/1 system-ui; letter-spacing: .12em; color: #22c55e; border: 1px solid #166534; background: rgba(34,197,94,.1); padding: 7px 10px; border-radius: 4px; }
.vt-live::before { content: "● "; }
.vt-pic { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: #0b1220; }
.vt-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: #000; padding: 16px 10px; }
.vt-stats div { text-align: center; border-left: 1px solid rgba(255,255,255,.1); } .vt-stats div:first-child { border-left: 0; }
.vt-stats b { display: block; color: #fff; font: 800 1.35rem/1.1 var(--font-head, system-ui); letter-spacing: -.02em; }
.vt-stats b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 8px; vertical-align: middle; }
.vt-stats small { color: #94a3b8; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
/* (.vt-tag badge removed 2026-10-18 - the card now has one subtitle row; rules deleted as dead code) */
/* One row wherever it fits (founder 2026-10-18) - featured-line.js shrinks only the titles that would wrap.
   balance makes the 2-3 rows that genuinely need it break evenly instead of leaving a one-word last line. */
.vt-text h3 { font-family: var(--font-head, inherit); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0 0 14px; color: var(--text, #fff); text-wrap: balance; }
/* The one subtitle row (founder 2026-10-18: "all the subtitles ... in one row ... not 2"). max-width: none beats
   the 520px cap that .vt-text p sets below, so the credit line is not squeezed to 520px. */
.vt-text .vt-by { font-size: 1.05rem; font-weight: 700; color: var(--text, #fff); margin: 0 0 14px; max-width: none; }
/* From here the rail is wide enough to hold the longest credit on ONE row (~488px of text width at 1240px,
   ~578px at 1420px, for a line that needs ~450px), so stop it wrapping. Deliberately NOT below 1240px: the
   50/50 grid is too narrow there and nowrap would spill the text out of the panel instead of wrapping. */
@media (min-width: 1240px) { .vt-text .vt-by { white-space: nowrap; } }
.vt-text p { font-size: 1.08rem; line-height: 1.7; color: var(--text-muted, #94a3b8); margin: 0 0 24px; max-width: 520px; }
.vt-text .vt-quote { font-style: italic; }
.vt-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #7cc4ff; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.vt-end { text-align: center; padding: 10px 0 0; }

/* ===== Ultra-premium description panel (founder 2026-10-18: "I want this section to be ultra premium glow") =====
   Smoked-glass panel + a living hairline ring + a gradient title + a glowing pill CTA.
   Rules:
   - Effects hang off .vt-text::after ONLY. ::before is the mobile connector (see the 860px block below).
   - Horizontal padding stays 30px: widening it would undo the one-row credit fit above.
   - The 1px ring in box-shadow is the FALLBACK edge, so the panel still reads as a container if the
     conic ring (@property / mask-composite) is unsupported. Keep it. */
   - NO border-radius here: nginx injects square.css on every page, which forces border-radius:0 !important
     site-wide (founder 2026-10-06, "Remove border radius from any button or panel that doesn't need it").
     Sharp corners are the house style, so the glow has to carry the premium feel, not rounding. */
@property --vt-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vt-text {
  padding: 44px 30px;
  border: 0; /* the ring draws the edge now */
  background:
    radial-gradient(130% 95% at 0% 0%, color-mix(in srgb, var(--accent, #3b82f6) 20%, transparent), transparent 62%),
    radial-gradient(95% 85% at 100% 100%, color-mix(in srgb, #22d3ee 14%, transparent), transparent 64%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent, #3b82f6) 10%, rgba(5, 8, 15, .82)), rgba(5, 8, 15, .92));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    inset 0 -56px 70px -48px color-mix(in srgb, #22d3ee 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent, #3b82f6) 34%, transparent),
    0 40px 90px rgba(0, 0, 0, .55),
    0 0 110px -18px color-mix(in srgb, #22d3ee 55%, transparent);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
/* Desktop-only second layer: a diagonal sheen that sweeps across on hover. Safe on ::before because the
   mobile connector below lives in a mutually exclusive @media (max-width: 860px) block. */
@media (min-width: 861px) {
  .vt-text::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .10) 48%, rgba(34, 211, 238, .16) 52%, transparent 62%);
    background-size: 260% 100%; background-position: 140% 0;
    transition: opacity .35s ease;
  }
  .vt-text:hover::before { opacity: 1; animation: vt-sheen 1.1s cubic-bezier(.3, .7, .3, 1) forwards; }
}
@keyframes vt-sheen { from { background-position: 140% 0; } to { background-position: -60% 0; } }
/* The living hairline: a conic sweep masked down to the 1px edge. Guarded, because without mask-composite
   the ::after would paint a solid sheet over the whole panel. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .vt-text::after {
    content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none; opacity: 1;
    background: conic-gradient(from var(--vt-ang),
      color-mix(in srgb, var(--accent, #3b82f6) 80%, transparent), #22d3ee 25%, rgba(255, 255, 255, .85) 38%,
      #22d3ee 52%, color-mix(in srgb, var(--accent, #3b82f6) 80%, transparent) 75%, color-mix(in srgb, var(--accent, #3b82f6) 80%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: vt-ring 9s linear infinite;
  }
}
@keyframes vt-ring { to { --vt-ang: 360deg; } }
.vt-text:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -40px 60px -40px color-mix(in srgb, #22d3ee 30%, transparent),
    0 0 0 1px color-mix(in srgb, #22d3ee 55%, transparent),
    0 50px 110px rgba(0, 0, 0, .6),
    0 0 90px -14px color-mix(in srgb, #22d3ee 60%, transparent);
}
/* Title: polished metal, white falling into the accent. color: transparent only where clipping works. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .vt-text h3 {
    background-image: linear-gradient(176deg, #fff 32%, color-mix(in srgb, var(--accent, #3b82f6) 42%, #fff));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.vt-text .vt-by { color: #d7e7fb; text-shadow: 0 0 22px color-mix(in srgb, #22d3ee 28%, transparent); }
/* CTA: a glowing pill instead of an underlined link */
.vt-go {
  margin-top: 8px; padding: 13px 24px;
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 55%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent, #3b82f6) 55%, transparent); /* beats the underline rule above */
  padding-bottom: 12px;
  color: #e9f5ff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #3b82f6) 26%, transparent), color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px -12px color-mix(in srgb, var(--accent, #3b82f6) 70%, transparent);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease;
}
.vt-go:hover {
  transform: translateY(-1px);
  border-color: #22d3ee; border-bottom-color: #22d3ee;
  background: linear-gradient(180deg, color-mix(in srgb, #22d3ee 30%, transparent), color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 26px -4px color-mix(in srgb, #22d3ee 75%, transparent), 0 14px 34px -12px color-mix(in srgb, var(--accent, #3b82f6) 80%, transparent);
}
/* Must come after the animation above to win (same specificity, later rule). */
@media (prefers-reduced-motion: reduce) {
  .vt-text::after { animation: none; }
  .vt-text, .vt-go { transition: none; }
  .vt-text:hover, .vt-go:hover { transform: none; }
}

@media (max-width: 860px) {
  .vt::before { left: 22px; } .vt { padding-left: 52px; }
  .vt-item { grid-template-columns: 1fr; gap: 22px; margin-bottom: 64px; }
  .vt-item::after { left: 24px; top: 24px; margin-left: -9px; }
  .vt-item:nth-child(even) .vt-card { order: 0; }
  .vt-item { margin-left: 0; } .vt-item::after { left: -28px; }
  .vt-item::before { left: -28px; top: 24px; width: 34px; margin-top: -6px; background: radial-gradient(circle at calc(100% - 6px) 50%, #e0fbff 0 3px, #22d3ee 4px, transparent 6px), linear-gradient(90deg, #22d3ee, var(--accent, #3b82f6)) center / 100% 2px no-repeat; animation: none; }
  .vt-text { padding: 24px 20px; }
  .vt-text::before { content: ""; position: absolute; left: -28px; top: 34px; width: 34px; height: 12px; margin-top: -6px; pointer-events: none; filter: drop-shadow(0 0 6px #22d3ee); background: radial-gradient(circle at 6px 50%, #22d3ee 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 6px) 50%, #e0fbff 0 3px, #22d3ee 4px, transparent 6px), linear-gradient(90deg, #22d3ee, var(--accent, #3b82f6)) center / 100% 2px no-repeat; }
  .vt-stats b { font-size: 1.1rem; }
}

/* NEW flag on a showcase card (featured-line.js NEW_SLUGS). Sits beside LIVE
   INSIDE the browser-chrome bar, so it reads as part of the card, not an overlay.
   It must stay inside .vt-bar: as a sibling between the bar and the picture it is
   an inline box on a line of its own, which opened a dark band across the card and
   pushed the screenshot down (founder 2026-10-20: "Move the thumbnail here up so
   nothing gets hidden"). Spacing comes from the bar's own flex gap, not a margin. */
.vt-new{
  padding:2px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.1em;
  color:#2a0b1d;background:linear-gradient(120deg,#ff9ecb,#ff3d8b 55%,#a855f7);
  box-shadow:0 2px 10px -2px rgba(255,61,139,.75);
}