/* ═══════════════════════════════════════════════════════════════════
   Home · Signal — the parts that only this page has.

   Tokens, layout primitives and the shared components live in signal.css,
   which must be loaded first. Everything below is either the hero slider,
   which is this page's signature and keeps its original mechanics, or a
   small component the system does not already cover.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   Hero slider
   Positional: the second <li> is the active panel, the third onward are
   preview cards, and the script rotates the list rather than moving a
   track. Deliberately unchanged in behaviour — only the type and colour
   now come from the design system.
   ═══════════════════════════════════════════════════════════════════ */
.hm-hero { position: relative; width: 100%; height: 85vh; min-height: 550px; max-height: 850px; overflow: hidden; background: linear-gradient(135deg, var(--bg) 0%, #072a20 50%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.hm-slider { list-style: none; padding: 0; margin: 0; width: 100%; height: 100%; position: relative; }

.hero-slide-item {
    width: 280px; height: 380px; list-style-type: none; position: absolute; top: 50%;
    transform: translateY(-50%); z-index: 1; border-radius: var(--r); opacity: 0;
    box-shadow: 0 20px 30px rgba(255, 255, 255, .12) inset, 0 10px 40px rgba(0, 0, 0, .45);
    transition: all .6s cubic-bezier(.4, 0, .2, 1);
    backface-visibility: hidden; will-change: transform, left, width, height, opacity;
}
/* The slide image is an element rather than a background so it can carry
   srcset, lazy loading and a fetch priority. It sits under the scrim. */
.hero-slide-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; z-index: 0; }

.hero-slide-item:nth-child(1),
.hero-slide-item:nth-child(2) { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; opacity: 1; }
.hero-slide-item:nth-child(1) { z-index: 0; }
.hero-slide-item:nth-child(2) { z-index: 1; }
.hero-slide-item:nth-child(3) { left: 50%; opacity: 1; z-index: 2; }
.hero-slide-item:nth-child(4) { left: calc(50% + 300px); opacity: 1; z-index: 2; }
.hero-slide-item:nth-child(5) { left: calc(50% + 600px); opacity: .5; z-index: 2; }
.hero-slide-item:nth-child(n+6) { left: calc(50% + 900px); opacity: 0; z-index: 0; pointer-events: none; }

.hero-slide-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(4, 7, 12, .88) 0%, rgba(4, 7, 12, .55) 40%, transparent 72%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s ease; }
.hero-slide-item:nth-child(2)::before { opacity: 1; }
.hero-slide-item:nth-child(n+3)::before { display: none; }

.hero-slide-content { width: min(38vw, 520px); position: absolute; top: 50%; left: clamp(1.5rem, 5vw, 5rem); transform: translateY(-50%); color: var(--ink); opacity: 0; display: none; z-index: 10; }
.hero-slide-item:nth-of-type(2) .hero-slide-content { display: block; animation: hm-slide-in .6s cubic-bezier(.4, 0, .2, 1) .2s forwards; }
@keyframes hm-slide-in { 0% { filter: blur(8px); transform: translateY(calc(-50% + 40px)); opacity: 0; } 100% { opacity: 1; filter: blur(0); transform: translateY(-50%); } }

.hero-slide-kicker { margin: 0 0 .9rem; color: var(--green); font: 600 .66rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.hero-slide-title { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.hero-slide-description { margin: 1rem 0 1.6rem; max-width: 34rem; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }

.hm-hero-nav { position: absolute; bottom: 2.5rem; left: clamp(1.5rem, 5vw, 5rem); z-index: 10; display: flex; gap: .6rem; user-select: none; }
.hm-nav-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.hm-nav-btn:hover { border-color: rgba(52, 211, 153, .6); background: rgba(52, 211, 153, .12); transform: translateY(-2px); }
.hm-nav-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.hm-hero-dots { position: absolute; bottom: 3.2rem; right: clamp(1.5rem, 4vw, 3rem); display: flex; gap: .5rem; z-index: 10; }
.hm-hero-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--line-2); cursor: pointer; transition: all .3s; }
.hm-hero-dots button.is-active { background: var(--green); border-color: var(--green); transform: scale(1.25); }
.hm-hero-dots button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Autoplay progress. The bar is the only thing on the page that says how
   long a slide has left, so it also doubles as the pause indicator: when
   autoplay stops, so does the fill. */
.hm-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 11; background: rgba(148, 163, 184, .12); overflow: hidden; }
.hm-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); transform: scaleX(0); transform-origin: left; }
.hm-progress.is-running i { animation: hm-progress var(--hm-autoplay, 6s) linear forwards; }
.hm-progress.is-paused i { animation-play-state: paused; }
@keyframes hm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* A very slow drift on the active panel. It restarts by itself, because a
   slide only matches :nth-child(2) once it has rotated into place. */
.hero-slide-item:nth-child(2) .hero-slide-media { animation: hm-drift 14s ease-out forwards; }
@keyframes hm-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* The preview cards advance the slider, so they read as controls. */
.hero-slide-item:nth-child(n+3) { cursor: pointer; }
.hero-slide-item:nth-child(n+3):hover { transform: translateY(calc(-50% - 8px)); box-shadow: 0 20px 30px rgba(255, 255, 255, .12) inset, 0 18px 50px rgba(0, 0, 0, .55); }
.hero-slide-card-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.2rem .9rem .8rem; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(transparent, rgba(4, 7, 12, .92)); color: var(--ink); font: 600 .72rem/1.3 var(--body); opacity: 0; transition: opacity .25s; }
.hero-slide-item:nth-child(n+3):hover .hero-slide-card-label { opacity: 1; }
.hero-slide-item:nth-child(-n+2) .hero-slide-card-label { display: none; }

.hero-slide-item.sliding { transition: all .5s cubic-bezier(.25, .46, .45, .94); }

@media (max-width: 900px) {
    /* Below this the text column spans most of the viewport and the preview
       cards paint over the headline — measured at 400px, two cards covered
       about 44% of the text. Narrow screens get the active slide alone. */
    .hero-slide-item:nth-child(n+3) { opacity: 0; pointer-events: none; }
    .hero-slide-content { width: calc(100% - 3rem); }
    /* With the text spanning the full width there is no clear side to hide in,
       so the scrim carries more of the contrast. */
    .hero-slide-item::before { background: linear-gradient(90deg, rgba(4, 7, 12, .93) 0%, rgba(4, 7, 12, .78) 55%, rgba(4, 7, 12, .5) 100%); }
}
@media (max-width: 650px) {
    .hm-hero { height: 78vh; min-height: 500px; }
    .hm-hero-dots { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Free-tools strip
   ═══════════════════════════════════════════════════════════════════ */
.hm-strip { border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(52, 211, 153, .1), rgba(103, 232, 249, .06) 50%, rgba(52, 211, 153, .1)); }
.hm-strip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding-block: 1.3rem; }
.hm-strip p { color: var(--muted); font-size: .94rem; line-height: 1.5; max-width: 42rem; }
.hm-strip b { color: var(--ink); font-weight: 600; }
.hm-strip-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.hm-strip .sg-btn { padding: .7rem 1.2rem; font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════════════
   Tools
   ═══════════════════════════════════════════════════════════════════ */
.hm-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.hm-tool { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; transition: border-color .25s, transform .25s; }
.hm-tool::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .5; transition: opacity .25s; }
.hm-tool:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-3px); }
.hm-tool:hover::after { opacity: 1; }
.hm-tool-top { display: flex; align-items: center; gap: .8rem; }
.hm-tool-icon { flex: none; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: .85rem; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .1); color: var(--accent); font-size: 1.1rem; }
.hm-tool h3 { flex: 1; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.hm-tool-flag { color: var(--accent); font: 700 .56rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: .3rem .45rem; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 999px; }
.hm-tool p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.hm-tool .sg-tags { margin-top: auto; padding-top: .4rem; }
.hm-tool-go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; color: var(--accent); font: 600 .84rem/1 var(--body); text-decoration: none; }
.hm-tool-go:hover { text-decoration: underline; text-underline-offset: 4px; }
.hm-tool-go::after { content: '→'; transition: transform .2s; }
.hm-tool:hover .hm-tool-go::after { transform: translateX(3px); }
.hm-tool-soon { border-style: dashed; background: transparent; }
.hm-tool-soon .hm-tool-icon { color: var(--dim); border-color: var(--line); background: transparent; }
.hm-tool-soon h3 { color: var(--muted); }
.hm-tool-soon::after { display: none; }
.hm-sub { margin: 2.6rem 0 1rem; color: var(--dim); font: 600 .64rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.hm-foot-link { margin-top: 1.8rem; color: var(--muted); font-size: .9rem; }
.hm-foot-link a { color: var(--green-2); text-decoration: none; }
.hm-foot-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   Writing
   ═══════════════════════════════════════════════════════════════════ */
.hm-writing { border-top: 1px solid var(--line); background: var(--bg-2); }
.hm-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hm-art-media { aspect-ratio: 16 / 9; background: #0b1220; overflow: hidden; border-bottom: 1px solid var(--line); }
.hm-art-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sg-tile:hover .hm-art-media img { transform: scale(1.04); }
.hm-art-blank { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(52, 211, 153, .14), transparent 65%); color: rgba(52, 211, 153, .5); font-size: 1.8rem; }
.hm-art-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.hm-art-title a { color: var(--ink); text-decoration: none; }
.hm-art-title a:hover { color: var(--green-2); }
.hm-art-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: .3rem; color: var(--dim); font: 600 .58rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hm-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.4rem; }
.hm-cat { display: inline-flex; align-items: baseline; gap: .45rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .84rem; text-decoration: none; transition: color .2s, border-color .2s, transform .2s; }
.hm-cat:hover { color: var(--ink); border-color: rgba(52, 211, 153, .5); transform: translateY(-2px); }
.hm-cat span { color: var(--dim); font: 600 .6rem/1 var(--mono); }

/* ═══════════════════════════════════════════════════════════════════
   Community
   ═══════════════════════════════════════════════════════════════════ */
.hm-community { border-top: 1px solid var(--line); }
.hm-qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.hm-lede { margin-top: 0; }
.hm-qa-points { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: .9rem; }
.hm-qa-points li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; color: var(--muted); line-height: 1.6; }
.hm-qa-points i { color: var(--green); font-style: normal; }
.hm-panel { border: 1px solid var(--line-2); border-radius: var(--r); background: linear-gradient(160deg, var(--panel-2), var(--panel)); overflow: hidden; }
.hm-panel-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--dim); font: 600 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.hm-panel-bar a { color: var(--green); text-decoration: none; }
.hm-q { display: grid; gap: .5rem; padding: 1.1rem; border-bottom: 1px solid var(--line); }
.hm-q:last-child { border-bottom: 0; }
.hm-q-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--dim); font: 600 .58rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hm-q-meta b { color: var(--green); font-weight: 600; }
.hm-q h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.hm-q h3 a { color: var(--ink); text-decoration: none; }
.hm-q h3 a:hover { color: var(--green-2); }
.hm-q-stats { display: flex; gap: 1.2rem; color: var(--dim); font-size: .76rem; }
.hm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.hm-stat { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.hm-stat b { display: block; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; }
.hm-stat span { display: block; margin-top: .5rem; color: var(--muted); font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════════════
   Levels — the page's one pale section, on .sg-notes
   ═══════════════════════════════════════════════════════════════════ */
.hm-levels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hm-levels > li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.hm-levels span { color: #8b6636; font: 700 .72rem/1.9 var(--mono); }
.hm-levels h3 { font-size: 1.3rem; }
.hm-levels ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.hm-levels ul li { color: var(--muted); font-size: .92rem; line-height: 1.55; padding-left: 1rem; position: relative; }
.hm-levels ul li::before { content: ''; position: absolute; left: 0; top: .6rem; width: .3rem; height: .3rem; border-radius: 50%; background: #8b6636; }

/* ═══════════════════════════════════════════════════════════════════
   Newsletter
   ═══════════════════════════════════════════════════════════════════ */
.hm-news { border-top: 1px solid var(--line); background: radial-gradient(ellipse at 15% 0%, rgba(52, 211, 153, .12), transparent 55%), var(--bg); }
.hm-news-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hm-form { display: grid; gap: .8rem; margin-top: 1.8rem; max-width: 34rem; }
.hm-form-row { display: flex; gap: .6rem; }
.hm-form input[type="email"] { flex: 1; min-width: 0; padding: .95rem 1.2rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--ink); font: 400 .95rem/1 var(--body); outline: none; transition: border-color .2s, box-shadow .2s; }
.hm-form input[type="email"]:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .15); }
.hm-form input[type="email"]::placeholder { color: var(--dim); }
.hm-form small { color: var(--dim); font-size: .78rem; }
.hm-join { padding: clamp(1.8rem, 3vw, 2.4rem); border-radius: var(--r); border: 1px solid rgba(52, 211, 153, .3); background: linear-gradient(150deg, rgba(52, 211, 153, .14), var(--panel) 65%); display: grid; gap: .8rem; justify-items: start; }
.hm-join p { color: var(--muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .hm-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hm-qa, .hm-news-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hm-articles { grid-template-columns: minmax(0, 1fr); }
    .hm-form-row { flex-direction: column; }
    .hm-levels > li { grid-template-columns: 1fr; gap: .3rem; }
    .hm-strip-in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    /* No drift, and no bar implying a countdown that is not running. */
    .hero-slide-item:nth-child(2) .hero-slide-media { animation: none; }
    .hm-progress { display: none; }
}