/* ═══════════════════════════════════════════════════════════════════
   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, 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; }
/* The preview cards are offset with a transform rather than `left`.
   Animating `left` moves the element through layout, and the browser counts
   every frame of that as a layout shift - the slider rotating on its own
   was scoring 0.236 CLS on this page with nobody touching it. A transform
   is composited, affects no layout, and is not counted. The geometry is
   identical: left:50% puts the card at 720px on a 1440px viewport, and the
   translate adds the same 300px steps the calc() did. */
.hero-slide-item:nth-child(3) { left: 50%; transform: translate(0, -50%); opacity: 1; z-index: 2; }
.hero-slide-item:nth-child(4) { left: 50%; transform: translate(300px, -50%); opacity: 1; z-index: 2; }
.hero-slide-item:nth-child(5) { left: 50%; transform: translate(600px, -50%); opacity: .5; z-index: 2; }
.hero-slide-item:nth-child(n+6) { left: 50%; transform: translate(900px, -50%); 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; }
/* Each card keeps its own x offset while lifting, or hovering would snap it
   back to the first position. */
.hero-slide-item:nth-child(n+3):hover { box-shadow: 0 20px 30px rgba(255, 255, 255, .12) inset, 0 18px 50px rgba(0, 0, 0, .55); }
.hero-slide-item:nth-child(3):hover { transform: translate(0, calc(-50% - 8px)); }
.hero-slide-item:nth-child(4):hover { transform: translate(300px, calc(-50% - 8px)); }
.hero-slide-item:nth-child(5):hover { transform: translate(600px, calc(-50% - 8px)); }
.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; }
}