#marginsPreview{overflow:hidden;background:#f6f5f1;border-top:1px solid var(--gray-100)}
.margins-intro{color:var(--gray-600);margin-bottom:30px}
.margins-preview-list{--pointer-x:74%;--pointer-y:32%;position:relative;max-width:980px;min-height:330px;overflow:hidden;border:1px solid #d8d8d3;background:radial-gradient(circle 520px at var(--pointer-x) var(--pointer-y),#d7deff 0,transparent 78%),#fcfcfa;touch-action:pan-y;transition:background-position .2s ease}
.margins-stage{display:grid;grid-template-columns:86px minmax(0,1fr) 190px;min-height:330px}
.margins-index{display:flex;flex-direction:column;border-right:1px solid #deded8}
.margins-index button{position:relative;flex:1;min-height:54px;border:0;border-bottom:1px solid #e8e8e3;background:transparent;color:#aaa9a4;font:10px var(--mono);cursor:pointer;transition:color .2s ease,background .2s ease}
.margins-index button:last-child{border-bottom:0}
.margins-index button::after{content:"";position:absolute;right:-1px;top:50%;width:1px;height:0;background:var(--accent);transition:height .25s ease,top .25s ease}
.margins-index button:hover,.margins-index button[aria-current="true"]{color:var(--accent);background:#f5f5ff}
.margins-index button[aria-current="true"]::after{top:18%;height:64%}
.margin-preview-card{position:relative;display:flex;min-width:0;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,58px);animation:margin-note-arrive .48s cubic-bezier(.22,.75,.2,1) both}
.margin-preview-kind{display:flex;align-items:center;gap:9px;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.margin-preview-kind::before{content:"";width:22px;height:1px;background:currentColor}
.margin-preview-text{max-width:690px;margin:20px 0 0;color:var(--black);font:clamp(31px,4.2vw,53px)/1.1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.margin-preview-text.is-medium{font-size:clamp(29px,3.6vw,46px);line-height:1.13}
.margin-preview-text.is-long{font-size:clamp(25px,3vw,38px);line-height:1.18;max-width:720px}
.margin-preview-text span{display:inline-block;margin-right:.22em;opacity:0;filter:blur(6px);transform:translateY(12px);animation:margin-word-in .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--word-index) * 35ms)}
.margin-preview-text span:last-child{margin-right:0}
.margin-preview-context{max-width:580px;margin:18px 0 0;color:var(--gray-600);font-size:13px;line-height:1.65;animation:margin-meta-in .35s .22s ease both}
.margin-preview-link{display:inline-flex;align-items:center;gap:10px;width:max-content;margin-top:20px;padding:9px 13px;border:1px solid #cfd4f1;border-radius:99px;background:#f7f8ff;color:var(--accent);font:11px var(--mono);text-decoration:none;animation:margin-meta-in .35s .28s ease both}
.margin-preview-link:hover{background:var(--accent);color:#fff}
.margins-signal{position:relative;display:grid;place-items:center;overflow:hidden;border-left:1px solid #deded8}
.margins-signal::before,.margins-signal::after{content:"";position:absolute;width:160px;aspect-ratio:1;border:1px solid #bfc5ea;border-radius:50%;animation:signal-breathe 4s ease-in-out infinite}
.margins-signal::after{width:94px;animation-delay:-2s}
.margins-signal-core{position:relative;z-index:1;width:13px;aspect-ratio:1;border-radius:50%;background:var(--accent);box-shadow:0 0 0 9px #223cff19,0 0 28px #223cff60;transition:transform .2s ease}
.margins-signal-label{position:absolute;bottom:30px;font:9px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#858580}
.margins-preview-list[data-kind="link"] .margins-signal-core{border-radius:2px;transform:rotate(45deg)}
.margins-preview-list[data-kind="quote"] .margins-signal-core{box-shadow:-9px 0 0 #223cff55,9px 0 0 #223cff55}
.margins-preview-list[data-kind="idea"] .margins-signal-core{animation:signal-spark 1.5s ease-in-out infinite}
.margins-preview-controls{display:flex;align-items:center;gap:16px;max-width:980px;margin-top:14px}
#marginsNext{border:0;background:none;padding:8px 0;color:var(--accent);font:12px var(--mono);cursor:pointer}
#marginsNext:hover:not(:disabled){transform:translateX(4px)}
#marginsNext:disabled{opacity:.45;cursor:default}
#marginsCount{color:var(--gray-400);font:10px var(--mono)}
.margins-open{display:inline-block;margin-top:18px;color:var(--accent);text-underline-offset:5px}
@keyframes margin-note-arrive{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes margin-word-in{to{opacity:1;filter:blur(0);transform:none}}
@keyframes margin-meta-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes signal-breathe{50%{transform:scale(1.12);opacity:.42}}
@keyframes signal-spark{50%{transform:scale(1.7);box-shadow:0 0 0 14px #223cff0c,0 0 34px #223cff70}}
@media(max-width:760px){.margins-preview-list{min-height:360px}.margins-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr 58px;min-height:360px}.margins-index{order:3;flex-direction:row;border-top:1px solid #deded8;border-right:0}.margins-index button{min-height:58px;border-right:1px solid #e8e8e3;border-bottom:0}.margins-index button::after{right:auto;top:-1px;left:50%;width:0;height:1px}.margins-index button[aria-current="true"]::after{top:-1px;left:18%;width:64%;height:1px}.margin-preview-card{padding:34px 28px}.margins-signal{display:none}.margin-preview-text{font-size:clamp(30px,9vw,43px)}}
@media(prefers-reduced-motion:reduce){.margin-preview-card,.margin-preview-text span,.margin-preview-context,.margin-preview-link,.margins-signal::before,.margins-signal::after,.margins-signal-core{animation:none;opacity:1;filter:none;transform:none}}
/* Footer keeps dark contrast, but uses calmer blue and lighter hierarchy. */
#contact{background:#151618!important;color:#f7f4ee!important;padding:clamp(54px,6vw,76px) 0 0!important;border-top:1px solid #292b2f}#contact .section-label{color:#9baeff!important}#contact .section-title{color:#f7f4ee!important;font-size:clamp(38px,4vw,52px);max-width:460px}#contact .contact-lead{font-size:16px;color:#b5b5b2!important;line-height:1.6;margin-bottom:0;max-width:430px}.contact-v2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:clamp(32px,6vw,80px);align-items:start}.contact-primary{display:inline-block;margin-top:22px;padding:12px 18px;background:#3d5ed8;color:#fff;text-decoration:none;border-radius:7px;font:500 14px var(--sans)}.contact-primary:hover{background:#4264dc}.contact-side{border-left:1px solid #4a4c50;padding-left:clamp(24px,4vw,52px);display:flex;flex-direction:column;gap:10px}.contact-side-label{font:10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#9baeff;margin-bottom:4px}.contact-side a{border-bottom:1px solid #4a4c50;padding:9px 0;display:flex;justify-content:space-between;gap:20px;text-decoration:none;font:21px/1.2 var(--serif);color:#f7f4ee}.contact-side a:hover{color:#b9c7ff}.contact-side p{color:#a7a7a4;font-size:12px;margin:4px 0 0}#contact .contact-links{gap:8px;margin:26px 0 28px}#contact .contact-link{color:#d2d2cf;border:1px solid #45474b;padding:8px 13px;background:transparent}#contact .contact-link:hover{background:#252833;border-color:#7088e9;color:#fff}#contact .footer-bar{border-top:1px solid #36383c;padding:18px 0;min-height:0}#contact .footer-copy{color:#9a9a98}.footer-v2-links{display:flex;gap:16px;flex-wrap:wrap}.footer-v2-links a{color:#aaa9a6;font:12px var(--sans);text-decoration:none}.footer-v2-links a:hover{color:#c2ceff;text-decoration:underline}@media(max-width:720px){#contact{padding-top:48px!important}.contact-v2-grid{grid-template-columns:1fr;gap:30px}.contact-side{border-left:0;border-top:1px solid #4a4c50;padding:20px 0 0}}
