/* =========================================================
     nashnova GEO Portal — Perplexity-style content hub
     Design rules:
       - Big whitespace
       - Image-driven cards (no long descriptions)
       - Card = Image + 1-line title + 1-line meta
       - Hero = left big banner card + right title + Read more
     ========================================================= */
  :root {
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --ink: #0f0f12;
    --ink-2: #1f1f24;
    --ink-3: #2c2c33;
    --muted: #6b7280;
    --muted-2: #9aa0a6;
    --line: #ececef;
    --line-2: #e5e5ea;
    --brand: #6e45d8;
    --brand-2: #8a6cf0;
    --brand-soft: #f4f0ff;
    --brand-softer: #faf7ff;
    --max: 1320px;
    --radius: 12px;
    --radius-lg: 18px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-size: 16px;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--brand-soft); color: var(--brand); }
  .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
  .serif { font-family: 'Noto Serif SC', serif; }
  #home-page {
    position: relative;
    background: #11101a;
  }

  /* Anchor offset for sticky header */
  section[id] { scroll-margin-top: 80px; }

  /* =========================================================
     HEADER — minimal, Perplexity-style
     ========================================================= */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
  }
  .site-header.scrolled { border-bottom-color: var(--line); }
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
  }
  .brand {
    display: flex; align-items: center;
    font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  }
  .brand img { height: 22px; width: auto; display: block; }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a { font-size: 14px; color: var(--ink-2); font-weight: 500; }
  .nav-links a:hover { color: var(--brand); }
  .nav-links a.active { color: var(--ink); }
  .nav-cta { display: flex; gap: 12px; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 18px;
    border-radius: 999px; font-size: 14px; font-weight: 500;
    border: 1px solid var(--ink); cursor: pointer;
    transition: all .15s; background: white; color: var(--ink);
  }
  .btn:hover { background: var(--ink); color: white; }
  .btn-primary { background: var(--ink); color: white; }
  .btn-primary:hover { background: var(--brand); border-color: var(--brand); }
  .btn .arrow { transition: transform .15s; }
  .btn:hover .arrow { transform: translateX(2px); }

  /* =========================================================
     HERO — left text block + right big banner image
     Image wrapped in white border + rounded card
     Image has a center fade-in overlay
     ========================================================= */
  .hero {
    padding: 64px 0 104px;
    overflow: clip;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 64px;
    align-items: center;
  }
  .hero-side { padding: 24px 0; }
  .hero-side h1 {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 600;
    margin: 0 0 28px;
    color: var(--ink);
  }
  .hero-side h1 .en {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
  }
  .hero-side p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 36px;
    max-width: 520px;
  }
  .hero-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
  }
  .btn-dark {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }
  .btn-dark:hover { background: var(--brand); border-color: var(--brand); }
  .btn-light {
    background: white;
    color: var(--ink);
    border-color: var(--line);
  }
  .btn-light:hover { background: var(--bg-soft); border-color: var(--ink); }

  /* Right: banner image card with white border + center fade */
  .hero-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    aspect-ratio: 16/8;
  }
  .hero-banner img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* Center fade-in overlay: brighter center, slight dim at edges for focus */
  .hero-banner::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 60% at center,
        rgba(255,255,255,0.0) 0%,
        rgba(255,255,255,0.0) 40%,
        rgba(255,255,255,0.25) 80%,
        rgba(255,255,255,0.55) 100%),
      linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.0) 100%);
    pointer-events: none;
  }
  /* Featured collection caption under the image */
  .hero-banner-cap {
    margin-top: 20px;
    padding: 0 4px;
  }
  .hero-banner-cap .eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .hero-banner-cap h3 {
    font-family: 'Noto Serif SC', serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .hero-banner-cap p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
  }
  #home-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0);
    border-bottom-color: transparent;
    backdrop-filter: saturate(140%) blur(14px);
    transition: background .24s ease, border-color .24s ease, box-shadow .24s ease;
  }
  #home-page .site-header.scrolled {
    background: rgba(255,255,255,0.88);
    border-bottom-color: rgba(93,77,131,0.12);
    box-shadow: 0 12px 36px rgba(81, 68, 100, 0.08);
  }
  #home-page .site-header:not(.scrolled) .brand img {
    filter: brightness(0) invert(1);
  }
  #home-page .site-header:not(.scrolled) .nav-links a,
  #home-page .site-header:not(.scrolled) .nav-links a.active {
    color: rgba(255,255,255,0.72);
  }
  #home-page .site-header:not(.scrolled) .nav-links a:hover {
    color: #fff;
  }
  #home-page .site-header:not(.scrolled) .btn-primary {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.28);
    backdrop-filter: blur(18px);
  }
  #home-page .hero {
    position: relative;
    min-height: 100vh;
    max-height: none;
    display: flex;
    align-items: center;
    padding: clamp(118px, 15vh, 156px) 0 clamp(72px, 11vh, 108px);
    overflow: hidden;
    background: #11101a;
    color: #fff;
    z-index: 0;
  }
  #home-page .hero-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center right;
    transform: scale(1.02);
    filter: saturate(0.96) contrast(1.04);
    z-index: 0;
    pointer-events: none;
  }
  #home-page .hero::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(17,16,26,0.92) 0%, rgba(17,16,26,0.72) 33%, rgba(17,16,26,0.26) 68%, rgba(17,16,26,0.38) 100%),
      linear-gradient(180deg, rgba(17,16,26,0.42) 0%, rgba(17,16,26,0.05) 45%, rgba(17,16,26,0.78) 100%);
    pointer-events: none;
  }
  #home-page .hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  #home-page .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(280px, 0.76fr);
    gap: clamp(36px, 7vw, 92px);
    align-items: center;
  }
  #home-page .hero-grid > div:last-child {
    display: none;
  }
  #home-page .hero-side {
    max-width: 680px;
    padding: 0;
    text-shadow: 0 18px 54px rgba(17, 16, 26, 0.42);
  }
  #home-page .hero-side h1 {
    font-size: clamp(46px, 5.4vw, 74px);
    line-height: 1.05;
    letter-spacing: 0;
    color: #fff;
    margin-bottom: 26px;
  }
  #home-page .hero-side p {
    max-width: 560px;
    font-size: 17px;
    color: rgba(255,255,255,0.76);
    margin-bottom: 34px;
  }
  #home-page .hero .btn-dark {
    background: #fff;
    color: #11101a;
    border-color: rgba(255,255,255,0.88);
    box-shadow: 0 18px 54px rgba(17, 16, 26, 0.18);
  }
  #home-page .hero .btn-dark:hover {
    background: #f6f2ff;
    color: #514464;
    border-color: #f6f2ff;
  }
  #home-page .hero .btn-light {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.26);
    backdrop-filter: blur(18px);
  }
  #home-page .hero .btn-light:hover {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.38);
    color: #fff;
  }
  .cosmic-scroll {
    position: relative;
    min-height: 260vh;
    margin: 0 0 48px;
    color: #fff;
    background: #11101a;
    overflow: clip;
  }
  .cosmic-scroll-pin {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    min-height: 640px;
    overflow: hidden;
    background: #11101a;
  }
  .cosmic-scroll-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    filter: saturate(0.92) contrast(1.04);
  }
  .cosmic-scroll-pin::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(17,16,26,0.86) 0%, rgba(17,16,26,0.54) 36%, rgba(17,16,26,0.18) 72%, rgba(17,16,26,0.52) 100%),
      linear-gradient(180deg, rgba(17,16,26,0.74) 0%, rgba(17,16,26,0.08) 30%, rgba(17,16,26,0.18) 68%, rgba(17,16,26,0.88) 100%);
    pointer-events: none;
  }
  .cosmic-scroll-copy {
    position: relative;
    z-index: 2;
    width: min(100%, 1320px);
    margin: -100vh auto 0;
    padding: 30vh 48px 42vh;
    display: grid;
    gap: 54vh;
    pointer-events: none;
  }
  .cosmic-scroll-panel {
    max-width: 620px;
    text-shadow: 0 18px 54px rgba(17, 16, 26, 0.46);
  }
  .cosmic-scroll-panel:nth-child(2) {
    justify-self: end;
    max-width: 560px;
  }
  .cosmic-scroll-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 22px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .cosmic-scroll-panel h2 {
    margin: 0;
    max-width: 760px;
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(42px, 5.8vw, 78px);
    line-height: 1.05;
    letter-spacing: 0;
    font-weight: 600;
    color: #fff;
  }
  .cosmic-scroll-panel p {
    margin: 24px 0 0;
    max-width: 520px;
    color: rgba(255,255,255,0.76);
    font-size: 17px;
    line-height: 1.75;
  }
  .cosmic-scroll-panel:nth-child(2) p {
    max-width: 500px;
  }
  .cosmic-scroll-rule {
    display: block;
    width: 72px;
    height: 1px;
    margin-top: 28px;
    background: rgba(255,255,255,0.36);
  }
  /* =========================================================
     SECTION HEADER — small eyebrow + big serif title + right link
     ========================================================= */
  .section {
    position: relative;
    z-index: 3;
    padding: 48px 0;
    background: var(--bg);
  }
  .sec-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 32px;
    margin-bottom: 28px;
  }
  .sec-eyebrow {
    font-size: 12px; font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }
  .sec-title {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
  }
  .sec-more {
    font-size: 14px; font-weight: 500;
    color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 4px;
    flex-shrink: 0;
    padding-bottom: 8px;
  }
  .sec-more:hover { color: var(--brand); }
  .sec-more .arrow { transition: transform .15s; }
  .sec-more:hover .arrow { transform: translateX(3px); }

  /* =========================================================
     TOPICS — expandable section + chip row + search
     ========================================================= */
  .topics-bar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 32px 0;
    margin-top: 32px;
  }
  .topics-head {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Noto Serif SC', serif;
    font-size: 22px; font-weight: 600;
    color: var(--ink);
    margin-bottom: 16px;
    cursor: pointer;
  }
  .topics-head .chev { transition: transform .2s; }
  .topics-head.open .chev { transform: rotate(180deg); }
  .topics-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
  }
  .chip {
    display: inline-flex; align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 500;
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
  }
  .chip:hover { background: white; border-color: var(--ink); color: var(--ink); }
  .chip.active { background: var(--ink); color: white; }
  .search {
    width: 100%;
    max-width: 480px;
    height: 44px;
    padding: 0 18px 0 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") 16px center/16px no-repeat;
    color: var(--ink);
    outline: none;
    transition: border-color .15s;
  }
  .search:focus { border-color: var(--brand); }
  .search::placeholder { color: var(--muted-2); }

  /* =========================================================
     ARTICLE GRID — 3 columns, big image cards
     ========================================================= */
  .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .article-card {
    display: block;
    cursor: pointer;
    transition: transform .2s;
  }
  .article-card:hover { transform: translateY(-2px); }
  .article-thumb {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--brand-soft);
    border: 1px solid var(--line);
  }
  .article-thumb-inner {
    position: absolute; inset: 0;
  }
  .article-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }
  .cover-svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  #home-page .article-thumb .cover-svg text {
    display: none;
  }
  .cover-grid-line { stroke: rgba(15,15,18,0.08); stroke-width: 1; }
  .cover-soft-line { stroke: rgba(110,69,216,0.22); stroke-width: 2; fill: none; }
  .cover-card {
    fill: rgba(255,255,255,0.72);
    stroke: rgba(15,15,18,0.08);
    stroke-width: 1;
  }
  /* Floating label on thumb */
  .article-thumb-label {
    position: absolute; left: 16px; bottom: 16px;
    color: white; font-weight: 600; font-size: 14px;
    z-index: 2;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(15,15,18,0.72);
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 4px rgba(0,0,0,0.18);
  }
  .article-title {
    font-family: 'Source Serif 4', 'Noto Serif SC', serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    transition: color .15s;
  }
  .article-card:hover .article-title { color: var(--brand); }
  .article-meta {
    font-size: 13px;
    color: var(--muted);
    display: flex; align-items: center; gap: 8px;
  }
  .article-meta .tag-type { color: var(--ink-2); font-weight: 500; }
  .article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
  .article-meta .tag-cat { color: var(--muted); }

  /* Agent grid — 2-col card layout (avatar + title + tag only, no long desc) */
  .article-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
  }
  .agent-row {
    display: grid;
    grid-template-columns: 80px 1fr 16px;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    cursor: pointer;
    transition: all .2s;
  }
  .agent-row:hover {
    border-color: var(--brand-2);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px -16px rgba(110,69,216,0.18);
  }
  .agent-row:hover .agent-name { color: var(--brand); }
  .agent-row:hover .agent-arrow { color: var(--brand); transform: translateX(3px); }
  .agent-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-soft);
    flex-shrink: 0;
  }
  .agent-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .agent-info { min-width: 0; }
  .agent-name {
    font-family: 'Source Serif 4', 'Noto Serif SC', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    transition: color .15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .agent-tag {
    font-size: 12.5px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .agent-tag .type { color: var(--ink-2); font-weight: 500; }
  .agent-tag .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
  .agent-arrow {
    color: var(--muted-2);
    font-size: 16px;
    transition: all .15s;
  }
  #agents {
    --agents-bg-width: min(calc(100% - 64px), 1180px);
    position: relative;
    z-index: 4;
    min-height: 142vh;
    display: flex;
    align-items: flex-start;
    padding: 18vh 0 24vh;
    overflow: hidden;
    clip-path: inset(0);
    isolation: isolate;
    background: #11101a;
    color: #fff;
  }
  #agents::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('img/img-001.webp');
    background-size: cover;
    background-position: center right;
    filter: saturate(0.94) contrast(1.02);
  }
  #agents::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(17,16,26,0.92) 0%, rgba(17,16,26,0.68) 36%, rgba(17,16,26,0.30) 72%, rgba(17,16,26,0.46) 100%),
      linear-gradient(180deg, rgba(17,16,26,0.72) 0%, rgba(17,16,26,0.10) 38%, rgba(17,16,26,0.86) 100%);
    pointer-events: none;
  }

  /* Agent cards: staggered (interleave) over the fixed bg image */
  #agents .article-grid-2 {
    column-gap: 28px;
    row-gap: 22px;
    align-items: start;
  }
  #agents .article-grid-2 .agent-row:nth-child(even) {
    margin-top: 44px;
  }
  #agents .container {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  #agents .sec-head {
    margin-bottom: 34px;
  }
  #agents .sec-eyebrow {
    color: rgba(255,255,255,0.64);
  }
  #agents .sec-title {
    color: #fff;
    text-shadow: 0 18px 54px rgba(17, 16, 26, 0.46);
  }
  #agents .sec-more {
    color: rgba(255,255,255,0.84);
    text-shadow: 0 12px 36px rgba(17, 16, 26, 0.36);
  }
  #agents .sec-more:hover {
    color: #fff;
  }
  #agents .agent-row {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.10);
    box-shadow: 0 18px 60px rgba(81, 68, 100, 0.18);
    backdrop-filter: blur(18px);
  }
  #agents .agent-row:hover {
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.15);
    box-shadow: 0 24px 72px rgba(81, 68, 100, 0.24);
  }
  #agents .agent-name {
    color: #fff;
  }
  #agents .agent-row:hover .agent-name {
    color: #f6f2ff;
  }
  #agents .agent-avatar {
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.12);
  }
  #agents .agent-tag,
  #agents .agent-arrow {
    color: rgba(255,255,255,0.62);
  }
  #agents .agent-tag .type {
    color: rgba(255,255,255,0.86);
  }
  #agents .agent-tag .dot {
    background: rgba(255,255,255,0.38);
  }

  /* =========================================================
     CHAT PREVIEW — final section
     ========================================================= */
  .chat-section {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, var(--bg) 0%, var(--brand-softer) 100%);
    padding: 96px 0 88px;
  }
  .chat-card {
    max-width: 860px;
    margin: 28px auto 0;
    padding: 36px 0 4px;
    background: transparent;
    border: 0;
    text-align: center;
  }
  .chat-prompt-title {
    margin: 0 0 30px;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 700;
    color: var(--ink);
  }
  .chat-composer {
    position: relative;
    min-height: 58px;
    width: min(100%, 620px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(93, 77, 131, 0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 18px 54px rgba(81, 68, 100, 0.12);
    backdrop-filter: blur(20px);
    padding: 8px 58px 8px 12px;
    text-align: left;
  }
  .chat-mode-pill {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(93, 77, 131, 0.18);
    border-radius: 999px;
    background: rgba(136, 112, 193, 0.10);
    color: var(--brand);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  .chat-composer textarea {
    flex: 1 1 auto;
    width: 100%;
    height: 34px;
    min-height: 34px;
    resize: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 34px;
    color: var(--ink);
    background: transparent;
    overflow: hidden;
  }
  .chat-composer textarea::placeholder { color: #bcb5ca; }
  .chat-send {
    position: absolute;
    right: 7px;
    top: 50%;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .15s, opacity .15s;
  }
  .chat-send:hover {
    transform: translateY(-50%) translateY(-1px);
    opacity: 0.92;
  }
  .chat-send img {
    width: 32px;
    height: 32px;
    display: block;
  }
  .chat-suggestions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }
  .chat-suggestion {
    height: 48px;
    padding: 0 24px;
    border: 1px solid rgba(93, 77, 131, 0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 4px 14px rgba(81, 68, 100, 0.08);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, transform .15s;
  }
  .chat-suggestion:hover {
    border-color: rgba(93, 77, 131, 0.30);
    color: var(--brand);
    transform: translateY(-1px);
  }
  .blog-page .blog-chat-section {
    background: transparent;
    padding: 0 0 82px;
  }
  .blog-page .blog-chat-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .blog-page .blog-chat-section .chat-card {
    margin-top: 28px;
  }
  .blog-page .chat-send span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
  }

  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer {
    position: relative;
    z-index: 3;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 56px 0 32px;
  }
  .foot-top {
    display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 48px; margin-bottom: 40px;
  }
  .foot-brand .brand { margin-bottom: 12px; }
  .foot-brand p { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 320px; }
  .foot-col h4 {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); margin: 0 0 16px;
  }
  .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .foot-col a { font-size: 14px; color: var(--ink-2); }
  .foot-col a:hover { color: var(--brand); }
  .foot-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--line);
    color: var(--muted); font-size: 13px;
  }

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-banner { aspect-ratio: 16/9; }
    #home-page .hero {
      min-height: 74vh;
      max-height: none;
      padding: 118px 0 84px;
    }
    #home-page .hero-grid {
      grid-template-columns: 1fr;
    }
    #home-page .hero-side {
      max-width: 640px;
    }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .article-grid-2 { grid-template-columns: 1fr; }
    #agents .article-grid-2 .agent-row:nth-child(even) { margin-top: 0; }
    .foot-top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .container { padding: 0 20px; }
    .nav-links { display: none; }
    .hero { padding: 32px 0 56px; }
    #home-page .hero {
      min-height: 76vh;
      padding: 108px 0 68px;
    }
    #home-page .hero-bg {
      object-position: 64% center;
      transform: scale(1.05);
    }
    #home-page .hero::after {
      background:
        linear-gradient(90deg, rgba(17,16,26,0.90) 0%, rgba(17,16,26,0.68) 48%, rgba(17,16,26,0.30) 100%),
        linear-gradient(180deg, rgba(17,16,26,0.62) 0%, rgba(17,16,26,0.16) 42%, rgba(17,16,26,0.86) 100%);
    }
    #home-page .hero-side h1 {
      font-size: 42px;
      line-height: 1.12;
    }
    #home-page .hero-side p {
      font-size: 14px;
      line-height: 1.7;
      max-width: 92%;
    }
    #home-page .hero-actions {
      gap: 10px;
    }
    #home-page .hero .btn {
      height: 34px;
      padding: 0 14px;
      font-size: 13px;
    }
    .article-grid { grid-template-columns: 1fr; }
    #agents {
      --agents-bg-width: calc(100% - 32px);
      min-height: auto;
      padding: 72px 0 76px;
    }
    #agents::before {
      inset: 0;
      position: absolute;
      background-position: 60% center;
    }
    #agents::after {
      inset: 0;
    }
    #agents .sec-head {
      align-items: flex-start;
    }
    #agents .agent-row {
      background: rgba(255,255,255,0.12);
    }
    .agent-row { grid-template-columns: 60px 1fr 16px; gap: 14px; }
    .agent-avatar { width: 56px; height: 56px; border-radius: 10px; }
    .agent-name { font-size: 16px; }
    .section { padding: 32px 0; }
    .foot-top { grid-template-columns: 1fr; gap: 32px; }
    .foot-bottom { flex-direction: column; gap: 12px; }
    .chat-section { padding: 56px 0; }
    .chat-card { margin-top: 20px; padding-top: 24px; }
    .chat-prompt-title { margin-bottom: 24px; font-size: 30px; }
    .chat-composer {
      min-height: 54px;
      width: 100%;
      border-radius: 999px;
      padding: 8px 54px 8px 10px;
    }
    .chat-mode-pill {
      height: 30px;
      padding: 0 10px;
      font-size: 12px;
    }
    .chat-composer textarea {
      height: 32px;
      min-height: 32px;
      font-size: 14px;
      line-height: 32px;
    }
    .chat-send {
      right: 7px;
      bottom: auto;
      top: 50%;
      width: 44px;
      height: 44px;
    }
    .chat-suggestions {
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 8px;
      padding-bottom: 4px;
    }
    .chat-suggestion {
      flex: 0 0 auto;
      height: 42px;
      padding: 0 18px;
      font-size: 14px;
    }
  }