/* The Longevity Council — a team of AI specialists. Premium dark, agent-coloured. */
:root { --cl-teal:#2dd4a7; --cl-ink:#f3f6f5; --cl-soft:#a9b3b8; --cl-faint:#6a747a;
  --cl-line:rgba(255,255,255,.09); --cl-card:rgba(255,255,255,.03); }

body { background:#05070c; }
.cl { color:var(--cl-ink); font-family:"Inter",system-ui,sans-serif; padding-bottom:5rem; position:relative; }
.cl::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60vw 60vw at 12% -10%, rgba(45,212,167,.14), transparent 60%),
             radial-gradient(50vw 50vw at 92% 8%, rgba(124,140,255,.10), transparent 60%); }
.cl > * { position:relative; z-index:1; }

.cl-hero { max-width:820px; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,5vw,2rem) 1rem; text-align:center; }
.cl-kicker { font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cl-teal); font-weight:600; }
.cl-hero h1 { font-family:"Fraunces",Georgia,serif; font-weight:300; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2.4rem,7vw,4.6rem); margin:.7rem 0 1rem; }
.cl-hero h1 em { font-style:italic; color:var(--cl-teal); }
.cl-sub { color:var(--cl-soft); max-width:56ch; margin:0 auto 2rem; font-size:1.04rem; line-height:1.7; }

.cl-ask { display:flex; align-items:center; gap:.5rem; max-width:660px; margin:0 auto; background:rgba(255,255,255,.05); border:1px solid var(--cl-line); border-radius:16px; padding:.5rem .5rem .5rem 1.1rem; transition:border-color .25s, box-shadow .25s; }
.cl-ask:focus-within { border-color:rgba(45,212,167,.5); box-shadow:0 0 0 4px rgba(45,212,167,.1), 0 20px 50px -24px rgba(45,212,167,.5); }
.cl-ask__spark { color:var(--cl-teal); }
.cl-ask input { flex:1; background:none; border:none; outline:none; color:var(--cl-ink); font-size:1.02rem; font-family:inherit; padding:.6rem 0; }
.cl-ask input::placeholder { color:var(--cl-faint); }
.cl-ask button { background:var(--cl-teal); color:#04130d; border:none; font:600 .95rem "Inter"; padding:.7rem 1.2rem; border-radius:11px; cursor:pointer; white-space:nowrap; transition:transform .2s,background .2s; }
.cl-ask button:hover { transform:translateY(-1px); background:#7cf0cf; }
.cl-suggest { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1rem; }
.cl-suggest button { background:none; border:1px solid var(--cl-line); color:var(--cl-soft); font:inherit; font-size:.84rem; padding:.35rem .85rem; border-radius:999px; cursor:pointer; transition:all .2s; }
.cl-suggest button:hover { color:var(--cl-ink); border-color:rgba(45,212,167,.4); }

/* agent grid */
.cl-grid { max-width:1180px; margin:2.4rem auto 0; padding:0 clamp(1.2rem,5vw,2.4rem); display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; align-items:start; }
.cl-card { background:var(--cl-card); border:1px solid var(--cl-line); border-radius:20px; padding:1.3rem 1.4rem; transition:border-color .3s, transform .3s cubic-bezier(.16,.84,.34,1); }
.cl-card.thinking { border-color:color-mix(in srgb, var(--c) 45%, transparent); }
.cl-card.answered { border-color:color-mix(in srgb, var(--c) 30%, transparent); }
.cl-card__head { display:flex; align-items:center; gap:.8rem; }
.cl-orb { flex-shrink:0; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:500; font-size:1.3rem; color:#04130d;
  background:radial-gradient(circle at 32% 28%, #ffffff, var(--c) 72%); box-shadow:0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.cl-card__head h3 { font-family:"Fraunces",serif; font-weight:500; font-size:1.15rem; line-height:1.1; }
.cl-card__head p { font-size:.78rem; color:var(--cl-soft); }
.cl-focus { margin-left:auto; background:none; border:1px solid var(--cl-line); color:var(--cl-soft); width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:.9rem; transition:all .2s; }
.cl-focus:hover { color:var(--cl-ink); border-color:color-mix(in srgb, var(--c) 50%, transparent); }
.cl-stat { margin-top:.7rem; font-size:.76rem; letter-spacing:.02em; color:color-mix(in srgb, var(--c) 75%, #fff); display:inline-flex; align-items:center; gap:.4rem; }
.cl-stat::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); }
.cl-answer { margin-top:.9rem; font-size:.92rem; line-height:1.65; color:var(--cl-ink); max-height:340px; overflow:auto; }
.cl-answer a { color:color-mix(in srgb, var(--c) 70%, #fff); }
.cl-answer.think { color:var(--cl-faint); }
.cl-dots span { display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%; background:var(--c); animation:clDot 1.2s infinite; }
.cl-dots span:nth-child(2){animation-delay:.2s} .cl-dots span:nth-child(3){animation-delay:.4s}
@keyframes clDot { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)} }
.cl-chips { margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.cl-chips button { background:none; border:1px solid var(--cl-line); color:var(--cl-soft); font:inherit; font-size:.78rem; padding:.3rem .6rem; border-radius:999px; cursor:pointer; text-align:left; transition:all .2s; }
.cl-chips button:hover { color:var(--cl-ink); border-color:color-mix(in srgb, var(--c) 50%, transparent); }

.cl-foot { max-width:820px; margin:3rem auto 0; padding:0 1.4rem; text-align:center; font-size:.78rem; color:var(--cl-faint); line-height:1.6; }
.cl-foot a { color:#7cf0cf; }

/* 1:1 modal */
.cl-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1rem; }
.cl-modal[hidden]{ display:none; }
.cl-modal__backdrop { position:absolute; inset:0; background:rgba(3,5,9,.72); backdrop-filter:blur(6px); }
.cl-modal__card { position:relative; width:min(560px,96vw); max-height:86vh; display:flex; flex-direction:column; background:#0b0e14; border:1px solid var(--cl-line); border-radius:22px; overflow:hidden; box-shadow:0 40px 100px -30px #000; }
.cl-modal__head { display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--cl-line); }
.cl-modal__head .cl-x { margin-left:auto; background:none; border:none; color:var(--cl-soft); font-size:1.1rem; cursor:pointer; }
.cl-log { flex:1; overflow:auto; padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.8rem; }
.cl-msg { max-width:88%; padding:.7rem 1rem; border-radius:14px; font-size:.92rem; line-height:1.6; }
.cl-msg--user { align-self:flex-end; background:var(--cl-teal); color:#04130d; }
.cl-msg--bot { align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--cl-line); border-left:2px solid var(--c,#2dd4a7); }
.cl-msg--bot a { color:#7cf0cf; }
.cl-chatform { display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--cl-line); }
.cl-chatform input { flex:1; background:rgba(255,255,255,.05); border:1px solid var(--cl-line); border-radius:12px; color:var(--cl-ink); font:inherit; padding:.7rem .9rem; outline:none; }
.cl-chatform button { width:44px; border:none; border-radius:12px; background:var(--cl-teal); color:#04130d; font-size:1.1rem; font-weight:700; cursor:pointer; }

@media (max-width:520px){ .cl-grid{grid-template-columns:1fr} }