/* ===============================================================
   ToolDuck — homepage
   ===============================================================
   Only what is genuinely unique to the homepage: the hero, the
   hero search, the floating cards and the layout bands that only
   this page is long enough to need.

   Layered on top of main.css, which owns the tokens AND the ambient
   layer — the light field, the band rhythm and the scroll reveal are
   shared with every other page now, so they live there rather than
   here. Nothing in this file redefines a token.

   Order:
     1.  Hero
     2.  Hero search
     3.  Floating tool cards
     4.  Benefit strip
     5.  Popular tools
     6.  Categories
     7.  Mock API feature
     8.  Tool list / developer & image sections
     9.  Privacy
     10. Long-form content
     11. Final call to action
     12. Responsive
     13. Reduced motion
   ============================================================== */

/* ---------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------- */
.hero {
    padding: clamp(2.75rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}

/* A minimum height so the hero fills the first screen on a laptop,
   without forcing a tall empty block on a short window. `svh` avoids
   the mobile browser-chrome jump that `vh` causes. */
.hero--tall {
    min-height: min(calc(100svh - var(--header-h) - 2rem), 760px);
    display: flex;
    align-items: center;
}

.hero--tall .hero__inner { width: 100%; }

.hero__title {
    font-size: clamp(2.05rem, 1.35rem + 3.3vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    margin: 0 auto .9rem;
    max-width: 20ch;
    text-wrap: balance;
}

.hero__sub {
    max-width: 60ch;
    font-size: clamp(1rem, .95rem + .3vw, 1.13rem);
}

/* ---------------------------------------------------------------
   3. Hero search
   -------------------------------------------------------------- */
.hero__search {
    max-width: 620px;
    margin-top: 2rem;
}

.hero__search .tool-search__input {
    padding-block: 1rem;
    padding-left: 2.9rem;
    font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
    min-height: 60px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: var(--shadow-md);
}

.hero__search .tool-search__icon { left: 1rem; }

.hero__search .tool-search__input:focus {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: var(--focus-ring), var(--shadow-md);
}

/* The suggestion list is a hero element, so it is allowed to be wider
   and taller than the compact dropdown in the header. */
.hero__search .tool-search__results {
    border-radius: 16px;
    padding: .45rem;
    max-height: 380px;
}

.hero__search .tool-search__results a { padding: .65rem .7rem; }
.hero__search .tool-search__results .sr-title { font-size: .97rem; }

.hero__hint {
    margin-top: .7rem;
    font-size: .85rem;
}

.hero__actions {
    margin-top: 1.6rem;
    gap: .7rem;
}

.hero__actions .btn {
    min-height: 48px;
    padding-inline: 1.35rem;
    font-size: .97rem;
}

/* The keyboard affordance. Decorative, so it is hidden from screen
   readers, which get the same information from the label. */
.kbd {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .38rem;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 7px;
    background: var(--bg-muted);
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1;
    pointer-events: none;
}

.hero__search .tool-search__input:focus ~ .kbd { opacity: 0; }

/* ---------------------------------------------------------------
   4. Floating tool cards
   ---------------------------------------------------------------
   Decorative snapshots of what the tools produce. Deliberately not
   interactive: nothing here is focusable or clickable, so they cannot
   trap a keyboard user or imply functionality that is not there.
   -------------------------------------------------------------- */
.hero__cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.float-card {
    position: absolute;
    width: 224px;
    padding: .85rem .95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--shadow-lg);
    animation: floatCard 9s ease-in-out infinite;
}

.float-card__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: .45rem;
}

.float-card__label .icon { color: var(--ink-3); }

.float-card__body {
    margin: 0;
    font-family: var(--mono);
    font-size: .76rem;
    line-height: 1.45;
    color: var(--ink-2);
    white-space: pre-line;
}

.float-card__ok { color: var(--ok); font-weight: 600; }
.float-card__method { color: var(--brand-strong); font-weight: 600; }

.float-card--a { top: 16%; left: 1%; animation-duration: 10s; }
.float-card--b { top: 52%; left: 4%; animation-duration: 12s; animation-delay: -3s; }
.float-card--c { top: 20%; right: 1%; animation-duration: 11s; animation-delay: -5s; }
.float-card--d { top: 58%; right: 4%; animation-duration: 13s; animation-delay: -1.5s; }

@keyframes floatCard {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -12px, 0); }
}

/* ---------------------------------------------------------------
   5. Benefit strip
   -------------------------------------------------------------- */
.benefits {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--border);
}

.benefits li {
    display: flex;
    gap: .75rem;
    padding: 1.1rem 1.15rem;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.benefits .icon-tile { flex: none; }

.benefits__title {
    display: block;
    font-size: .95rem;
    font-weight: 650;
    margin-bottom: .15rem;
}

.benefits__text {
    margin: 0;
    font-size: .87rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------
   5. Popular tools
   -------------------------------------------------------------- */
.popular-grid {
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

/* Popular cards carry their category, which the generic tool card does
   not show on the homepage. */
.tool-card__cat {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.tool-card--popular .tool-card__foot { justify-content: space-between; }

/* ---------------------------------------------------------------
   6. Categories
   -------------------------------------------------------------- */
.cat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Categories that have no tools yet are shown, because hiding them
   would make the site look smaller than it is, but they are visibly
   inert: no link, no hover, muted. */
.cat-card--soon {
    opacity: .82;
}

.cat-card--soon .tool-card__cta { color: var(--ink-3); }

.soon-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------
   7. Mock API feature
   ---------------------------------------------------------------
   Inverted in both themes: this is the one section that should stop
   the eye, and a dark panel on a light page does that without adding
   another colour to the palette.
   -------------------------------------------------------------- */
.feature {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
    grid-template-columns: 1fr;
    padding: clamp(1.4rem, 3vw, 2.6rem);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(59, 130, 246, .28) 0%, rgba(59, 130, 246, 0) 55%),
        radial-gradient(120% 140% at 92% 100%, rgba(139, 92, 246, .26) 0%, rgba(139, 92, 246, 0) 55%),
        #0f1117;
    color: #e8eaf0;
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .feature {
    border-color: var(--border);
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(59, 130, 246, .30) 0%, rgba(59, 130, 246, 0) 55%),
        radial-gradient(120% 140% at 92% 100%, rgba(139, 92, 246, .28) 0%, rgba(139, 92, 246, 0) 55%),
        #0c0e14;
}

.feature h2 {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
    color: #f6f7fb;
}

.feature p {
    margin: 0 0 1rem;
    color: #b9c0cf;
    max-width: 52ch;
    line-height: 1.6;
}

.feature .eyebrow {
    border-color: rgba(147, 197, 253, .35);
    background: rgba(147, 197, 253, .10);
    color: #bfdbfe;
}

.feature__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.2rem;
}

.feature__actions .btn--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.feature__actions .btn--primary:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

.feature__actions .btn--ghost {
    color: #cfd6e4;
    border-color: rgba(255, 255, 255, .18);
}

.feature__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* The request/response panel. */
.api-demo {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    background: rgba(6, 8, 14, .72);
    overflow: hidden;
}

.api-demo__bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

.api-demo__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.api-demo__url {
    margin-left: .4rem;
    font-family: var(--mono);
    font-size: .76rem;
    color: #93a4c0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-demo__body {
    margin: 0;
    padding: .9rem 1rem;
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.6;
    color: #cfd8e8;
    overflow-x: auto;
}

.api-demo__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    font-family: var(--mono);
    font-size: .76rem;
}

.api-demo__code {
    padding: .1rem .4rem;
    border-radius: 5px;
    background: rgba(74, 222, 128, .14);
    color: #86efac;
    font-weight: 600;
}

.api-demo__method {
    padding: .1rem .4rem;
    border-radius: 5px;
    background: rgba(147, 197, 253, .16);
    color: #bfdbfe;
    font-weight: 600;
}

.feature__list {
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

.feature__list li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .89rem;
    color: #b9c0cf;
}

.feature__list .icon { color: #86efac; flex: none; margin-top: .15rem; }

/* ---------------------------------------------------------------
   8. Tool list
   -------------------------------------------------------------- */

/* -------------------------------------------------------------
   Small blocks
   -------------------------------------------------------------
   .tool-alert lives in tool.css, which only the tool pages load,
   so the homepage had an unstyled message before this. Defining
   the two variants needed here is cheaper than pulling a whole
   tool stylesheet onto the homepage for one line of text.
   ---------------------------------------------------------- */
.tool-alert {
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-muted);
    color: var(--ink-2);
    font-size: .9rem;
    margin-top: 1rem;
}

.tool-alert[hidden] { display: none; }

.tool-alert--info {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-color: var(--brand-border);
}

/* A bordered note for something that is not a warning but is not
   inline prose either — the "coming next" notice. */
.callout {
    padding: 1rem 1.1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
}

.callout__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .35rem;
    font-weight: 650;
    color: var(--ink);
}

.callout p {
    margin: 0;
    color: var(--ink-2);
    font-size: .92rem;
    line-height: 1.6;
}

.callout a { color: var(--brand-strong); }

.tool-list {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    font-size: .92rem;
}

.tool-list a {
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

.tool-list a:hover { color: var(--brand-strong); }

.tool-list li:hover { border-color: var(--border-strong); }

/* Planned tools: shown for completeness, but not links, and marked as
   such so nobody clicks a dead end. */
.tool-list li.is-planned {
    border-style: dashed;
    background: transparent;
    color: var(--ink-3);
}

.tool-list li.is-planned .soon-note { font-size: .78rem; }

/* A panel for a tool that has a page of its own. It advertises the tool
   and hands the visitor over rather than embedding a second, partial
   copy of it here — which is what the resume drop zone used to do, and
   why it was removed. */
.promo {
    display: grid;
    gap: .9rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 150% at 0% 0%,
            color-mix(in srgb, var(--tile-accent, var(--brand)) 12%, transparent) 0%,
            transparent 60%),
        color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-md);
}

.promo__lead {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.promo__lead .eyebrow { margin-bottom: .3rem; }

.promo__title {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    letter-spacing: -.015em;
}

.promo__text {
    margin: 0;
    max-width: 68ch;
    color: var(--ink-2);
}

.promo__list {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 68ch;
}

.promo__list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .92rem;
    color: var(--ink-2);
}

.promo__list .icon { flex: none; margin-top: .2rem; color: var(--brand); }

.promo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .35rem;
}

/* ---------------------------------------------------------------
   9. Privacy
   -------------------------------------------------------------- */
.privacy-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .9rem;
    margin: 0 auto 1.6rem;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--ink-2);
}

/* The chips are styled with a type selector, which is more specific than
   a single class, so the arrow has to be excluded here rather than reset
   in its own rule below — otherwise the arrows render as empty pills. */
.privacy-flow li:not(.privacy-flow__arrow) {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.privacy-flow li[aria-current="step"] {
    border-color: var(--brand-border);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-weight: 600;
}

.privacy-flow__arrow {
    color: var(--ink-4);
    border: none;
    background: none;
    padding: 0;
}

/* ---------------------------------------------------------------
   10. Long-form content
   ---------------------------------------------------------------
   The typography is shared, from main.css. Only the centring is
   specific to this page: here the heading and the copy are both inside
   the prose block, so the column centres as a unit. On a tool page the
   heading is a sibling of the prose, so there it must stay left. */
.prose { margin-inline: auto; }

/* ---------------------------------------------------------------
   11. Final call to action
   -------------------------------------------------------------- */
.final-cta {
    text-align: center;
    padding: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 4vw, 3rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(90% 130% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 62%),
        color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-md);
}

.final-cta h2 {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}

.final-cta p {
    max-width: 54ch;
    margin: 0 auto 1.4rem;
    color: var(--ink-2);
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}

/* ---------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------- */

/* Floating cards need room either side of the hero copy. Below this
   width they would overlap the heading, so they are not shown at all. */
@media (min-width: 1080px) {
    body.home .hero--tall { position: relative; }
    .hero__cards { display: block; }
    .hero--tall .hero__inner { max-width: 720px; margin-inline: auto; }
}

@media (max-width: 1079px) {
    .hero__cards { display: none; }
}

@media (min-width: 860px) {
    .feature { grid-template-columns: 1.05fr .95fr; }
}

@media (max-width: 600px) {
    .hero--tall { min-height: 0; }

    .hero__title { max-width: none; }

    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }

    .benefits { grid-template-columns: 1fr; }

    .popular-grid,
    .cat-grid,
    .tool-list { grid-template-columns: 1fr; }

    .kbd { display: none; }

    /* The flow reads top-to-bottom on narrow screens. It has to become a
       column as well as rotate the arrows: as a wrapping row, each chip
       filled a line on its own and the arrow was pushed to the trailing
       edge of that line instead of sitting between the steps. */
    .privacy-flow { flex-direction: column; gap: .35rem; }
    .privacy-flow__arrow { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------
   13. Reduced motion
   ---------------------------------------------------------------
   The light field and the scroll reveal are handled in main.css,
   because every page uses them. The floating cards are homepage-only,
   so stopping them belongs here.
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .float-card { animation: none; }
}

/* Printing the homepage is rare but should not produce a grey slab.
   The light field is hidden for every page from main.css. */
@media print {
    .hero__cards, .float-card { display: none !important; }
    .feature, .final-cta { background: #ffffff !important; color: #000000 !important; }
}