/* Product UI mockups in the Gravity UI dark style. A mock is drawn at a fixed
   1280px design width; every size is a fraction of the frame width (--u), so it scales with no JS. */
.gx-fit{position:relative;overflow:hidden;aspect-ratio:1280/780;container-type:inline-size;border-radius:16px;border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 100px -50px rgba(0,0,0,.85),0 0 0 1px rgba(var(--acc-rgb),.06);background:#1d1c21}
.gx{--u:calc(100cqw / 1280);--gx-bg:#1d1c21;--gx-raised:#25242a;--gx-aside:#232227;--gx-line:rgba(255,255,255,.1);--gx-line2:rgba(255,255,255,.16);--gx-t1:rgba(255,255,255,.9);--gx-t2:rgba(255,255,255,.58);--gx-t3:rgba(255,255,255,.4);--gx-acc:#5282ff;--gx-acc-soft:rgba(82,130,255,.22);--gx-red:#ff6b6b;--gx-red-bg:rgba(229,50,93,.28);--gx-yel:#ffc95c;--gx-yel-bg:rgba(255,190,92,.26);--gx-grn:#4dd28e;--gx-grn-bg:rgba(48,170,110,.26);--gx-org:#ff9a52;--gx-org-bg:rgba(255,128,48,.24);--gx-pur:#b58cff;--gx-pur-bg:rgba(143,82,204,.3);--gx-blu-bg:rgba(82,130,255,.24)}
.gx{width:calc(1280*var(--u));height:calc(780*var(--u));display:flex;background:var(--gx-bg);color:var(--gx-t1);font-family:"Inter","Inter Fallback","Helvetica Neue",Arial,sans-serif;font-size:calc(13*var(--u));line-height:calc(18*var(--u));text-align:left;-webkit-font-smoothing:antialiased;overflow:hidden}
.gx *{box-sizing:border-box}
.gx svg{width:calc(16*var(--u));height:calc(16*var(--u));flex:0 0 auto}
.gx b{font-weight:600}
.gx .m{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,Menlo,monospace;font-size:calc(12*var(--u))}
.gx .t2{color:var(--gx-t2)}.gx .t3{color:var(--gx-t3)}
.gx .red{color:var(--gx-red)}.gx .grn{color:var(--gx-grn)}.gx .yel{color:var(--gx-yel)}.gx .org{color:var(--gx-org)}.gx .acc{color:var(--gx-acc)}.gx .pur{color:var(--gx-pur)}
/* aside */
.gx-aside{width:calc(236*var(--u));flex:0 0 calc(236*var(--u));background:var(--gx-aside);border-right:1px solid var(--gx-line);display:flex;flex-direction:column;padding:0 calc(8*var(--u)) calc(8*var(--u))}
.gx-logo{display:flex;align-items:center;gap:calc(10*var(--u));height:calc(56*var(--u));padding:0 calc(8*var(--u));font-size:calc(17*var(--u));font-weight:700;letter-spacing:-.01em}
.gx-logo i svg{width:calc(16*var(--u));height:calc(16*var(--u))}
.gx-logo i{width:calc(28*var(--u));height:calc(28*var(--u));border-radius:calc(8*var(--u));display:grid;place-items:center;background:var(--gx-acc);color:#fff;font-style:normal;font-size:calc(14*var(--u))}
.gx-logo span{color:var(--gx-acc)}
.gx-grp{display:flex;justify-content:space-between;align-items:center;padding:calc(12*var(--u)) calc(10*var(--u)) calc(6*var(--u));color:var(--gx-t2);font-size:calc(12.5*var(--u))}
.gx-grp::after{content:"";width:calc(7*var(--u));height:calc(7*var(--u));border-left:1.5px solid var(--gx-t3);border-top:1.5px solid var(--gx-t3);transform:rotate(45deg);margin-top:calc(4*var(--u))}
.gx-ni{display:flex;align-items:center;gap:calc(12*var(--u));height:calc(34*var(--u));padding:0 calc(10*var(--u));border-radius:calc(8*var(--u));color:var(--gx-t1);font-size:calc(13.5*var(--u))}
.gx-ni svg{width:calc(16*var(--u));height:calc(16*var(--u));flex:0 0 calc(16*var(--u));color:var(--gx-t2)}
.gx-ni.on{background:var(--gx-acc-soft)}
.gx-ni.on svg{color:var(--gx-t1)}
.gx-ni em{margin-left:auto;font-style:normal;font-size:calc(11.5*var(--u));padding:0 calc(7*var(--u));border-radius:calc(6*var(--u));line-height:calc(18*var(--u))}
.gx-ni em.r{background:var(--gx-red-bg);color:#ff9a9a}
.gx-ni em.y{background:var(--gx-yel-bg);color:#ffd88a}
.gx-ni em.n{background:rgba(255,255,255,.1);color:var(--gx-t2)}
.gx-aside .sp{flex:1}
.gx-aside hr{border:0;border-top:1px solid var(--gx-line);margin:calc(6*var(--u)) calc(2*var(--u))}
/* main */
.gx-main{flex:1;min-width:0;display:flex;flex-direction:column}
.gx-head{height:calc(56*var(--u));flex:0 0 calc(56*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));padding:0 calc(20*var(--u));border-bottom:1px solid var(--gx-line)}
.gx-search{flex:0 1 calc(420*var(--u));min-width:0;white-space:nowrap;overflow:hidden;height:calc(34*var(--u));border:1px solid var(--gx-line2);border-radius:calc(10*var(--u));display:flex;align-items:center;gap:calc(10*var(--u));padding:0 calc(10*var(--u));color:var(--gx-t3)}
.gx-search span{overflow:hidden;text-overflow:ellipsis}
.gx-search kbd{flex:0 0 auto;margin-left:auto;font-family:inherit;font-size:calc(11*var(--u));border-radius:calc(5*var(--u));padding:1px calc(6*var(--u));background:rgba(255,255,255,.12);color:var(--gx-t2)}
.gx-hsp{flex:1}
.gx-btn{height:calc(30*var(--u));display:inline-flex;align-items:center;gap:calc(7*var(--u));padding:0 calc(12*var(--u));border-radius:calc(8*var(--u));border:1px solid var(--gx-line2);color:var(--gx-t1);font-size:calc(13*var(--u));white-space:nowrap}
.gx-btn.pr{background:var(--gx-acc);border-color:var(--gx-acc);color:#fff}
.gx-btn.fl{border-color:transparent;color:var(--gx-t2)}
.gx-bell{position:relative;width:calc(18*var(--u));height:calc(18*var(--u));flex:0 0 calc(18*var(--u));color:var(--gx-t2)}
.gx-bell svg{width:calc(18*var(--u));height:calc(18*var(--u))}
.gx-bell b{position:absolute;right:-6px;top:-6px;background:#e5325d;color:#fff;font-size:calc(9.5*var(--u));line-height:calc(15*var(--u));min-width:calc(15*var(--u));text-align:center;border-radius:calc(8*var(--u))}
.gx-user{display:flex;align-items:center;gap:calc(9*var(--u));line-height:calc(15*var(--u));white-space:nowrap}
.gx-ava{width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:var(--gx-acc);display:grid;place-items:center;font-size:calc(12*var(--u));font-weight:600;color:#fff}
.gx-user small{display:block;font-size:calc(11*var(--u));color:var(--gx-t2)}
.gx-body{flex:1;min-height:0;padding:calc(18*var(--u)) calc(20*var(--u)) calc(16*var(--u));display:flex;flex-direction:column;gap:calc(14*var(--u));overflow:hidden}
.gx-ttl{display:flex;align-items:center;gap:calc(10*var(--u))}
.gx-ttl h4{margin:0;font-size:calc(20*var(--u));line-height:calc(26*var(--u));font-weight:600;letter-spacing:-.01em}
.gx-ttl .gx-q{width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;border:1.5px solid var(--gx-t3);color:var(--gx-t3);font-size:calc(10*var(--u));display:grid;place-items:center}
.gx-seg{display:flex;border:1px solid var(--gx-line2);border-radius:calc(8*var(--u));overflow:hidden;height:calc(30*var(--u))}
.gx-seg span{padding:0 calc(11*var(--u));display:grid;place-items:center;border-right:1px solid var(--gx-line2);color:var(--gx-t1)}
.gx-seg span:last-child{border-right:0}
.gx-seg span.on{background:var(--gx-acc-soft);box-shadow:inset 0 0 0 1px var(--gx-acc)}
.gx-tabs{display:flex;gap:calc(26*var(--u));border-bottom:1px solid var(--gx-line);margin-top:-2px}
.gx-tabs span{padding:0 0 calc(9*var(--u));color:var(--gx-t2)}
.gx-tabs span.on{color:var(--gx-t1);box-shadow:inset 0 -2px 0 var(--gx-acc)}
.gx-sec{display:flex;align-items:center;gap:calc(8*var(--u));font-weight:600;font-size:calc(13.5*var(--u))}
.gx-cnt{font-size:calc(11*var(--u));font-weight:600;line-height:calc(17*var(--u));padding:0 calc(6*var(--u));border-radius:calc(6*var(--u));background:var(--gx-red-bg);color:#ff9a9a}
/* cards */
.gx-card{background:var(--gx-raised);border:1px solid var(--gx-line);border-radius:calc(12*var(--u));min-width:0;overflow:hidden}
.gx-card-h{display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(11*var(--u)) calc(14*var(--u));border-bottom:1px solid var(--gx-line);font-weight:600}
.gx-card-h small{font-weight:400;color:var(--gx-t2);font-size:calc(12*var(--u))}
.gx-card-h .r{margin-left:auto;font-weight:400;color:var(--gx-t2);font-size:calc(12.5*var(--u))}
.gx-card-b{padding:calc(12*var(--u)) calc(14*var(--u))}
.gx-g{display:grid;gap:calc(10*var(--u))}
.gx-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.gx-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.gx-g4{grid-template-columns:repeat(4,minmax(0,1fr))}.gx-g5{grid-template-columns:repeat(5,minmax(0,1fr))}.gx-g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gx-attn{display:flex;align-items:center;gap:calc(11*var(--u));padding:calc(11*var(--u)) calc(12*var(--u));border:1px solid var(--gx-line);border-radius:calc(12*var(--u));background:var(--gx-raised);min-width:0}
.gx-attn .gx-ico{width:calc(30*var(--u));height:calc(30*var(--u));flex:0 0 calc(30*var(--u));border-radius:calc(8*var(--u));display:grid;place-items:center}
.gx-attn .gx-ico svg{width:calc(16*var(--u));height:calc(16*var(--u))}
.gx-attn .n{font-size:calc(20*var(--u));font-weight:600;line-height:calc(24*var(--u))}
.gx-attn .tx{min-width:0;line-height:calc(16*var(--u))}
.gx-attn .tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;overflow:hidden}
.gx-attn .tx span{display:block;color:var(--gx-t2);font-size:calc(12*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-attn::after{content:"";margin-left:auto;flex:0 0 calc(7*var(--u));height:calc(7*var(--u));border-right:1.5px solid var(--gx-t3);border-top:1.5px solid var(--gx-t3);transform:rotate(45deg)}
.ic-r{background:var(--gx-red-bg);color:var(--gx-red)}.ic-y{background:var(--gx-yel-bg);color:var(--gx-yel)}.ic-o{background:var(--gx-org-bg);color:var(--gx-org)}.ic-b{background:var(--gx-blu-bg);color:#8fb0ff}.ic-g{background:var(--gx-grn-bg);color:var(--gx-grn)}.ic-p{background:var(--gx-pur-bg);color:var(--gx-pur)}
.gx-kpi{position:relative;overflow:hidden;padding:calc(12*var(--u)) calc(14*var(--u)) calc(34*var(--u));border:1px solid var(--gx-line);border-radius:calc(12*var(--u));background:var(--gx-raised);min-width:0}
.gx-kpi .l{display:flex;gap:calc(7*var(--u));align-items:center;color:var(--gx-t2);font-size:calc(12.5*var(--u))}
.gx-kpi .l svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.gx-kpi .v{font-size:calc(26*var(--u));line-height:calc(32*var(--u));font-weight:600;margin-top:calc(6*var(--u));letter-spacing:-.01em}
.gx-kpi .s{color:var(--gx-t2);font-size:calc(12*var(--u))}
.gx-kpi svg.sp{position:absolute;left:0;right:0;bottom:0;width:100%;height:calc(34*var(--u))}
/* labels */
.gx-lb svg{width:calc(12*var(--u));height:calc(12*var(--u))}
.gx-lb{display:inline-flex;align-items:center;gap:calc(5*var(--u));height:calc(20*var(--u));padding:0 calc(7*var(--u));border-radius:calc(5*var(--u));font-size:calc(12*var(--u));white-space:nowrap}
.gx-lb.r{background:var(--gx-red-bg);color:#ff9a9a}.gx-lb.y{background:var(--gx-yel-bg);color:#ffd88a}.gx-lb.g{background:var(--gx-grn-bg);color:#7fe3ad}.gx-lb.o{background:var(--gx-org-bg);color:#ffb37a}.gx-lb.b{background:var(--gx-blu-bg);color:#a8c1ff}.gx-lb.p{background:var(--gx-pur-bg);color:#d0b3ff}.gx-lb.n{background:rgba(255,255,255,.1);color:var(--gx-t2)}
/* table */
.gx-tb{width:100%;border-collapse:collapse;table-layout:fixed}
.gx-tb th{text-align:left;font-weight:500;font-size:calc(11*var(--u));letter-spacing:.03em;text-transform:uppercase;color:var(--gx-t2);padding:calc(8*var(--u)) calc(10*var(--u));overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--gx-line);white-space:nowrap}
.gx-tb td{padding:calc(7*var(--u)) calc(10*var(--u));border-bottom:1px solid var(--gx-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.gx-tb tr:last-child td{border-bottom:0}
.gx-tb th:first-child,.gx-tb td:first-child{padding-left:calc(14*var(--u))}
.gx-tb td.num,.gx-tb th.num{text-align:right}
.gx-tb td small{display:block;color:var(--gx-t3);font-size:calc(11.5*var(--u));line-height:calc(14*var(--u))}
.gx-tb tr.sel td{background:rgba(82,130,255,.08)}
/* progress + bars */
.gx-pr{height:calc(4*var(--u));border-radius:calc(2*var(--u));background:rgba(255,255,255,.1);overflow:hidden;margin-top:calc(6*var(--u))}
.gx-pr i{display:block;height:100%;border-radius:calc(2*var(--u))}
.gx-row{display:flex;justify-content:space-between;align-items:baseline;gap:calc(10*var(--u))}
.gx-bars{display:flex;align-items:flex-end;gap:calc(7*var(--u));height:calc(112*var(--u));padding:0 calc(4*var(--u));border-bottom:1px solid var(--gx-line);position:relative}
.gx-bars::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 calc(29*var(--u)),rgba(255,255,255,.06) calc(29*var(--u)) calc(30*var(--u)))}
.gx-bars>div{flex:1;display:flex;flex-direction:column-reverse;border-radius:calc(2*var(--u)) calc(2*var(--u)) 0 0;overflow:hidden;position:relative}
.gx-bars i{display:block}
.gx-leg{display:flex;gap:calc(16*var(--u));flex-wrap:wrap;color:var(--gx-t2);font-size:calc(12*var(--u))}
.gx-leg span{display:flex;align-items:center;gap:calc(6*var(--u))}
.gx-leg i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:calc(2*var(--u))}
.gx-big{font-size:calc(34*var(--u));line-height:calc(40*var(--u));font-weight:600;letter-spacing:-.02em}
.gx-big small{font-size:calc(16*var(--u));color:var(--gx-t2)}
/* chat (ENCLAVE) */
.gx-msg{max-width:78%;padding:calc(10*var(--u)) calc(13*var(--u));border-radius:calc(12*var(--u));line-height:calc(19*var(--u))}
.gx-msg.me{align-self:flex-end;background:var(--gx-acc-soft)}
.gx-msg.ai{background:var(--gx-raised);border:1px solid var(--gx-line)}
.gx-msg sup{color:var(--gx-acc);font-weight:600;font-size:calc(10*var(--u));margin-left:1px}
.gx-chip svg{width:calc(13*var(--u));height:calc(13*var(--u))}
.gx-chip{display:inline-flex;align-items:center;gap:calc(6*var(--u));height:calc(24*var(--u));padding:0 calc(9*var(--u));border-radius:calc(12*var(--u));border:1px solid var(--gx-line2);color:var(--gx-t2);font-size:calc(12*var(--u));white-space:nowrap}
.gx-input{height:calc(40*var(--u));border:1px solid var(--gx-line2);border-radius:calc(10*var(--u));display:flex;align-items:center;padding:0 calc(12*var(--u));color:var(--gx-t3);gap:calc(10*var(--u))}
.gx-input .gx-btn{margin-left:auto}
/* timeline (AI-SOC) */
.gx-tl{display:flex;flex-direction:column;gap:0}
.gx-tl>div{display:flex;gap:calc(10*var(--u));position:relative;padding-bottom:calc(12*var(--u))}
.gx-tl>div::before{content:"";position:absolute;left:calc(5*var(--u));top:calc(14*var(--u));bottom:0;width:1px;background:var(--gx-line2)}
.gx-tl>div:last-child::before{display:none}
.gx-tl i{width:calc(11*var(--u));height:calc(11*var(--u));border-radius:50%;flex:0 0 calc(11*var(--u));margin-top:calc(4*var(--u));background:var(--gx-acc);box-shadow:0 0 0 calc(3*var(--u)) rgba(82,130,255,.2)}
/* subtle live motion inside mocks */
.gx .pulse{animation:gxpulse 2.4s ease-in-out infinite}
@keyframes gxpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.gx .pulse{animation:none}}

/* showcase tabs on the home page */
.shots-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0 18px}
.shots-tabs button{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--soft);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.shots-tabs button span{font-weight:400;color:var(--mute);font-size:13px}
.shots-tabs button[aria-selected="true"]{border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.shot-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;color:var(--mute);font-size:14px}
.ui-sec .gx-fit{margin-top:36px}