:root { --ink:#10281f; --paper:#f6f1e6; --line:rgba(16,40,31,.17); --display:"Newsreader",serif; --sans:"Bricolage Grotesque",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:var(--sans); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
a { color:inherit; text-decoration:none; }
header { min-height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1rem,5vw,5rem); border-bottom:1px solid var(--line); }
.hub-brand { font-weight:700; letter-spacing:-.05em; font-size:1.15rem; }.hub-brand span{font-family:var(--display);font-style:italic;font-weight:400}.hub-brand+ p{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#667068}
main { padding:clamp(4rem,8vw,8rem) clamp(1rem,5vw,5rem); }
.hub-intro { display:grid; grid-template-columns:1.35fr .65fr; gap:4rem; align-items:end; margin-bottom:4.5rem; }
.eyebrow { grid-column:1/-1; margin:0; text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:700; }
h1 { margin:0; font-family:var(--display); font-size:clamp(4rem,8vw,8.5rem); font-weight:500; line-height:.78; letter-spacing:-.06em; }h1 em{display:block;color:#607069;font-weight:400}.hub-intro>p:last-child{max-width:430px;font-family:var(--display);font-size:1.3rem;line-height:1.45;color:#657068}
.demo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.demo-card { --brand:#12372a; --accent:#d9ff69; position:relative; min-height:300px; padding:1.6rem; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.38); display:flex; flex-direction:column; overflow:hidden; transition:transform .28s ease,box-shadow .28s ease; }
.demo-card::before { content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:var(--accent); right:-110px; bottom:-140px; opacity:.75; }
.demo-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(16,40,31,.12); }
.card-index { font-family:var(--display);color:#8b928d; }
.card-wordmark { position:relative; margin:auto 0 2rem; color:var(--brand); }
.card-wordmark strong { display:block; font-family:var(--display); font-size:2.45rem; letter-spacing:-.07em; line-height:.9; }
.card-wordmark small { display:block; margin-top:.3rem; text-transform:uppercase; letter-spacing:.15em; font-size:.65rem; font-weight:700; }
.card-meta { position:relative; display:flex; justify-content:space-between; align-items:end; gap:1rem; font-size:.78rem; }.card-meta span:first-child{max-width:210px;color:#687269}.card-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:white;font-size:1rem;flex:0 0 auto}
footer { display:flex;justify-content:space-between;padding:1.5rem clamp(1rem,5vw,5rem);border-top:1px solid var(--line);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#69736b; }
@media(max-width:900px){.demo-grid{grid-template-columns:1fr 1fr}.hub-intro{grid-template-columns:1fr;gap:1.5rem}.hub-intro>p:last-child{margin:0}}
@media(max-width:580px){header p{display:none}main{padding-top:3.5rem}.demo-grid{grid-template-columns:1fr}.demo-card{min-height:250px}footer{flex-direction:column;gap:.6rem}h1{font-size:clamp(3.6rem,18vw,5.3rem)}}