/* Product playground — a portrait-free, interactive direction. */
:root { --paper:#f7f8fa; --surface:#fff; --ink:#171b23; --muted:#59616d; --navy:#2854c5; --night:#151d2d; --line:#dfe3ea; --serif:var(--sans); }
body { background:var(--paper); }
em { font-family:var(--sans); font-size:1em; font-style:normal; font-weight:500; color:#66748c; }
.site-header { background:#f7f8fae8; backdrop-filter:blur(18px); border-color:#e5e8ee; }
.nav { min-height:76px; }
.brand { font-size:1rem; }
.brand svg { color:var(--ink); }
.nav-links { gap:10px; }
.nav-links a { padding:9px 15px; border-radius:8px; }
.nav-links a:hover,.nav-links a[aria-current] { background:#e9edf4; color:#151d2d; }
.nav-links a::after { display:none; }
.hero { overflow:hidden; padding-top:70px; }
.hero-backdrop { background:radial-gradient(ellipse at 75% 40%,#dce6ff 0,transparent 55%); opacity:.55; filter:none; mask-image:none; }
.hero-grid { grid-template-columns:1fr 1.05fr; gap:0 48px; }
.hero-copy { padding-bottom:20px; position:relative; z-index:2; }
.eyebrow { display:inline-flex; border:1px solid #d4dce9; border-radius:30px; padding:7px 12px; font-size:.72rem; letter-spacing:.02em; margin-bottom:27px; background:#ffffff80; }
.eyebrow span { margin-inline:5px; }
.hero h1 { font-size:clamp(46px,5vw,70px); font-weight:500; letter-spacing:-.065em; line-height:1.04; max-width:13ch; }
.hero h1 em { color:var(--navy); }
.hero-description { font-size:.99rem; max-width:43ch; line-height:1.75; margin-top:26px; }
.hero-actions { gap:18px; margin-top:28px; }
.btn { border-radius:9px; box-shadow:0 2px 3px #152c5a12,inset 0 1px #ffffff25; font-size:.82rem; min-height:48px; }
.hero-actions .text-link { font-size:.81rem; border:0; }
.hero-midra { font-size:.8rem; }
.hero-identity { margin-top:48px; font-size:.78rem; }
.system-stage { position:relative; width:100%; min-width:0; min-height:590px; padding:54px 0 80px; isolation:isolate; }
.system-stage::before { content:""; position:absolute; inset:0 -28px; z-index:-2; background-image:radial-gradient(#91a4c955 .8px,transparent .8px); background-size:16px 16px; mask-image:radial-gradient(ellipse,#000 15%,transparent 72%); }
.flow-lines { position:absolute; inset:0 -45px; width:calc(100% + 90px); height:100%; z-index:-1; overflow:visible; }
.flow-lines path { stroke:url(#flow-color); stroke-width:1.2; stroke-dasharray:5 12; opacity:.5; animation:flow-stream 22s linear infinite; }
.flow-lines path:nth-child(even) { animation-direction:reverse; animation-duration:30s; stroke-dasharray:1 8; }
.stage-topline { display:flex; align-items:center; gap:8px; position:absolute; top:12px; left:16px; right:16px; color:#647084; font-size:.7rem; }
.stage-topline > span:last-child { margin-left:auto; font-variant-numeric:tabular-nums; }
.live-dot { width:5px; height:5px; background:#396beb; border-radius:50%; box-shadow:0 0 0 4px #386beb13; }
.workspace-card { background:#fff; border:1px solid #d9e0eb; border-radius:14px; box-shadow:0 28px 65px -25px #193b6d40,0 2px 5px #122b4b0a; transform:perspective(1400px) rotateY(-5deg) rotateX(3deg); transition:transform .6s var(--ease); position:relative; z-index:2; }
.system-stage:hover .workspace-card { transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-3px); }
.workspace-toolbar { display:flex; align-items:center; gap:9px; padding:14px 17px; border-bottom:1px solid #edf0f5; color:#667084; font-size:.71rem; }
.workspace-logo { background:#1b2539; color:#fff; width:25px; height:25px; display:grid; place-items:center; border-radius:7px; font-weight:600; font-size:18px; }
.window-dots { margin-left:auto; letter-spacing:2px; }
.workspace-tabs { display:flex; padding:11px 15px; gap:5px; background:#fbfcfe; border-bottom:1px solid #edf0f5; border-radius:0; }
.workspace-tabs button { padding:7px 12px; border:1px solid transparent; background:none; border-radius:6px; color:#606b7e; font-size:.73rem; transition:background .2s,box-shadow .2s; }
.workspace-tabs button[aria-selected=true] { background:#fff; box-shadow:0 1px 3px #233c6310; border-color:#dce3ee; color:#214bb0; }
.workspace-heading { padding:25px 23px 18px; }
.workspace-kicker { font-size:.58rem; letter-spacing:.12em; color:#67758b; }
.workspace-heading h2 { font-family:var(--sans); font-size:1.35rem; font-weight:500; letter-spacing:-.04em; margin-top:10px; line-height:1.2; }
.workspace-heading p { font-size:.73rem; color:#637083; line-height:1.6; margin-top:8px; min-height:24px; }
.scope-list { padding:0 14px 15px; }
.scope-item { position:relative; width:100%; display:flex; align-items:center; gap:13px; padding:13px 10px; margin-bottom:5px; background:transparent; border:1px solid transparent; border-radius:8px; text-align:left; transition:background .25s,border-color .25s,transform .25s; }
.scope-item:hover { background:#f5f7fb; transform:translateX(2px); }
.scope-item.selected { background:#edf3ff; border-color:#b9cef8; box-shadow:0 1px 2px #255dca0a; }
.workspace-card.is-changing .scope-item { animation:step-arrive .4s var(--ease) both; }
.workspace-card.is-changing .scope-item:nth-child(2) { animation-delay:50ms; }
.workspace-card.is-changing .scope-item:nth-child(3) { animation-delay:100ms; }
@keyframes step-arrive { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:none; } }
.scope-icon { display:grid; place-items:center; width:32px; height:34px; border:1px solid #dbe2ec; border-radius:7px; background:#fff; color:#596b88; font-size:1.1rem; flex-shrink:0; }
.selected .scope-icon { color:#2854c5; border-color:#b9cef8; }
.scope-item strong { display:block; font-size:.75rem; font-weight:500; }
.scope-item small { display:block; font-size:.66rem; color:#56647d; margin-top:3px; }
.scope-check { color:#365aa1; margin-left:auto; opacity:0; }
.selected .scope-check { opacity:1; }
.workspace-bottom { border-top:1px solid #edf0f5; padding:13px 23px; display:flex; justify-content:space-between; align-items:center; font-size:.66rem; color:#647087; }
.workspace-bottom i { display:inline-block; width:5px; height:5px; margin-right:6px; background:#719282; border-radius:50%; }
.collaboration-card { position:relative; z-index:3; width:86%; margin:-1px 0 0 auto; padding:17px 20px 20px; border:1px solid #3d4a65; border-radius:11px; background:#1c263b; color:#fff; box-shadow:0 18px 35px -12px #1b35674a; transform:translate(18px,18px) rotate(-2deg); animation:card-drift 7s ease-in-out infinite; }
.collab-top { display:flex; gap:9px; align-items:center; font-size:.75rem; }
.collab-symbol { color:#9db8ff; font-size:1.4rem; }
.collab-avatars { display:flex; margin-left:auto; }
.collab-avatars span { display:grid; place-items:center; width:23px; height:23px; border:2px solid #1c263b; border-radius:50%; background:#dbe5fd; color:#254482; font-size:.54rem; }
.collab-avatars span+span { margin-left:-5px; background:#afc2f0; }
.collaboration-card p { color:#c4d0e6; font-size:.75rem; line-height:1.6; margin-top:12px; min-height:39px; }
.collab-progress { display:flex; gap:4px; margin-top:18px; height:13px; align-items:center; }
.collab-progress i { width:6px; height:6px; background:#a0b9ed; border-radius:1px; animation:signal-wave 2s ease-in-out infinite; animation-delay:calc(var(--i,0)*90ms); }
.collab-cursor { position:absolute; bottom:23px; right:18px; color:#98b4ff; font-size:20px; animation:cursor-drift 9s ease-in-out infinite; }
.collab-cursor b { font-size:.55rem; font-weight:400; background:#3765d9; color:white; padding:4px 7px; border-radius:3px; position:relative; top:10px; margin-left:-2px; }
.stage-caption { font-size:.6rem; text-align:center; color:#647084; margin-top:44px; }
.section { padding-block:95px; }
h2 { font-size:clamp(35px,4vw,54px); letter-spacing:-.055em; }
.section-label { font-size:.75rem; }
.section-heading { max-width:750px; }
.project { border-radius:17px; overflow:hidden; }
.project-featured { background:#19253c; border-color:#19253c; position:relative; }
.project-featured::before { content:""; position:absolute; width:350px; height:350px; right:-170px; top:-220px; border:1px solid #8ab1ff40; border-radius:50%; box-shadow:0 0 0 30px #8ab1ff09,0 0 0 60px #8ab1ff07,0 0 0 90px #8ab1ff05; pointer-events:none; }
.workflow-figure { border-radius:12px; }
.workflow-step { border-radius:6px; transition:background .2s,transform .2s,border-color .2s; }
.workflow-step:hover { transform:translateX(5px); border-color:#9fbfff; }
.workflow-step-final { color:#15283e; }
.knowledge-mark { background:#e8edf8; }
.document-lines { animation:document-drift 6s ease-in-out infinite; }
.document-lines:nth-child(2) { animation-delay:-3s; }
.project-compact { transition:transform .3s,box-shadow .3s; }
.project-compact:hover { transform:translateY(-4px); box-shadow:0 12px 35px #2539630c; }
.experience-section { background:#eef1f6; }
.community-card { padding:25px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.recognition-grid article { padding:18px; border-radius:9px; background:#eef1f6; }
.talk-visual { border-radius:13px; }
.contact-section { background:#172239; }
.contact-section em { color:#a9bde7; }
@keyframes flow-stream { to { stroke-dashoffset:-340; } }
@keyframes card-drift { 0%,100% { transform:translate(18px,18px) rotate(-2deg); } 50% { transform:translate(18px,11px) rotate(-1deg); } }
@keyframes signal-wave { 0%,100% { height:4px;opacity:.35; } 50% { height:13px;opacity:1; } }
@keyframes cursor-drift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-16px,-5px); } }
@keyframes document-drift { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-8px) rotate(-4deg); } }
@media(min-width:1500px) { .hero-grid { gap:0 70px; } }
@media(max-width:1050px) { .hero-grid { gap:0 25px; grid-template-columns:.95fr 1.05fr; } .hero h1 { font-size:54px; } .scope-item { gap:8px; padding:12px 7px; } .scope-item strong { font-size:.7rem; } .scope-item small { font-size:.61rem; } .workspace-tabs button { padding:7px 8px; } .workspace-heading { padding:22px 18px 16px; } .collaboration-card { width:92%; } }
@media(max-width:800px) { .hero-grid { grid-template-columns:1fr; } .hero-copy { max-width:600px; } .hero h1 { font-size:clamp(48px,8vw,72px); max-width:14ch; } .hero-description { max-width:50ch; } .system-stage { width:min(100%,540px); justify-self:center; margin-top:30px; } .hero-identity { margin-top:10px; } .hero-backdrop { background:radial-gradient(ellipse at 50% 65%,#dce6ff,transparent 65%); } }
@media(max-width:620px) { .hero { padding-top:43px; } .hero h1 { font-size:clamp(43px,11vw,61px); } .hero-actions { gap:18px; } .hero-actions .text-link { font-size:.8rem; } .system-stage { padding-top:50px; min-height:0; padding-bottom:30px; margin-top:30px; } .workspace-card { transform:none; } .collaboration-card { transform:translate(0,10px) rotate(-1deg); width:92%; animation:none; } .stage-caption { margin-top:32px; font-size:.57rem; } .hero-identity { margin-top:25px; } .nav-links a { border-radius:0; } .section { padding-block:70px; } .project { border-radius:12px; } .workspace-heading h2 { font-size:1.25rem; } .workspace-heading p { font-size:.71rem; } .scope-item { padding:12px 7px; } .scope-item strong { font-size:.71rem; } .scope-item small { font-size:.63rem; } .workspace-tabs button { font-size:.7rem; padding:6px 9px; } .collaboration-card p { font-size:.72rem; } }
@media(prefers-reduced-motion:reduce) { .flow-lines path,.collaboration-card,.collab-progress i,.collab-cursor,.document-lines { animation:none; } .workspace-card,.system-stage:hover .workspace-card { transform:none; } .scope-item:hover,.project-compact:hover { transform:none; } }