/* FrogeeCodeIDE: page parts on top of the FrogeeSoft design kit (kit.css). Tokens, header, buttons, cards, FAQ,
   contact band and footer come from the kit; only what the kit has no class for lives here. */

.icon { width: 20px; height: 20px; flex: none; }
.s { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f { fill: currentColor; fill-opacity: .08; stroke: none; }

/* Hero: dark in both themes (the kit's header keeps light ink over it), centered like VS Code */
.hero { --text: #f1f5ef; --muted: #98a398; --line: rgba(240, 255, 238, .13); --line-strong: rgba(240, 255, 238, .28); --surface: #111713; --accent: #21aabe; --on-accent: #061316;
  background: #090c0a; color: var(--text); padding: 170px 0 0; overflow: hidden; }
.hero-inner { display: grid; justify-items: center; text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 6.2vw, 6rem); }
.hero h1 span { display: block; }
.hero-lead { max-width: 54ch; margin-top: 28px; color: var(--muted); font-size: 1.15rem; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hero-fine { margin-top: 18px; color: var(--muted); font-size: .92rem; }
.hero-fine a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.hero-fine a:hover { text-decoration-color: var(--accent); }
.hero-shot { width: 100%; margin-top: 72px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; }
.hero-shot img { width: 100%; }

/* Tour: three screens behind a segmented switch */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--radius); }
.tabs button { padding: 10px 18px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; transition: color .2s, background .2s; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.panel[hidden] { display: none; }
.panel-copy h3 { color: var(--accent); margin-bottom: 14px; }
.panel-copy p { color: var(--muted); }
.shot { border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.shot img { width: 100%; }

/* Plugins: copy beside a real plugin file */
.plugins-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.plugins-lead { margin: 22px 0 30px; color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
pre.code { margin: 0; padding: 28px 30px; border-radius: var(--radius); background: var(--surface); overflow: auto; font: 400 .92rem/1.7 "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--text); }
.tk { color: #cf8e6d; } .ts { color: #6aab73; } .tf { color: #56a8f5; } .tc { color: var(--muted); }
[data-theme="light"] .tk { color: #0033b3; } [data-theme="light"] .ts { color: #067d17; } [data-theme="light"] .tf { color: #00627a; }

/* Downloads: kit cards with the system logo and a button at the bottom */
.info-card.dl { display: flex; flex-direction: column; gap: 0; }
.info-card.dl .logo { width: 34px; height: 34px; margin-bottom: 22px; color: var(--text); }
.info-card.dl p { margin-bottom: 26px; }
.info-card.dl .button { margin-top: auto; }

.faq { padding-block: 130px; }
.footer-name { color: var(--text); }

@media (max-width: 820px) {
  .hero { padding-top: 130px; }
  .panel, .plugins-grid { grid-template-columns: 1fr; }
  .hero-shot { margin-top: 48px; }
  .section-head { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq { padding-block: 90px; }
}

/* When the page scrolls under the header, the wordmark gets the same glass plate as the nav pill */
.site-header.is-scrolled .brand { padding: 5px 16px 5px 5px; background: color-mix(in srgb, var(--bg) 72%, transparent); border-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Extensions catalog */
.hero-compact { padding-bottom: 90px; }
.hero-compact h1 { font-size: clamp(2.2rem, 5.6vw, 5.4rem); }
.ext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.ext-card { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.ext-head { display: flex; align-items: center; gap: 16px; }
.ext-icon { width: 56px; height: 56px; border-radius: var(--radius-sm); flex: none; object-fit: cover; }
.ext-card h3 { margin: 0; color: var(--accent); }
.ext-meta { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.ext-desc { color: var(--muted); }
.ext-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ext-tags li { padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 500; }
.ext-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ext-empty { color: var(--muted); }
.ext-more, .make-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; margin-bottom: 18px; font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; color: var(--accent); }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--muted); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }