.prj-hero{ position:relative; overflow-x:clip; padding:clamp(110px, 9.27vw, 178px) 0 clamp(64px, 7.8vw, 150px); }
.prj-hero__decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.prj-hero__glow{ position:absolute; border-radius:50%; --blur:260px; }
.prj-hero__glow--signal{ left:61.5%; top:-24%; width:52%; height:52%; --gc:rgba(233, 80, 6, 0.3); animation:prj-breathe 9s var(--ease-in-out) infinite alternate; }
.prj-hero__glow--slate{ left:-19.8%; top:30%; width:57%; height:52%; --gc:rgba(52, 81, 99, 0.55); animation:prj-breathe 11s var(--ease-in-out) infinite alternate-reverse; }
@keyframes prj-breathe{ from{ transform:scale(0.92); opacity:0.75; } to{ transform:scale(1.08); opacity:1; } }
.prj-hero__grid, .prj-hero__marks{ position:absolute; left:50%; transform:translateX(-50%); width:min(100% - var(--gutter) * 2, var(--container)); padding:0; display:flex; justify-content:space-between; }
.prj-hero__grid{ top:0; bottom:0; }
.prj-hero__grid i{ width:1px; height:100%; background:rgba(187, 205, 218, 0.07); }
.prj-hero__marks{ top:144px; height:13px; }
.prj-hero__marks b{ position:relative; width:13px; height:13px; margin-left:-6px; }
.prj-hero__marks b:nth-child(2){ margin-left:0; }
.prj-hero__marks b:last-child{ margin-right:-6px; }
.prj-hero__marks b::before, .prj-hero__marks b::after{ content:""; position:absolute; background:rgba(187, 205, 218, 0.35); }
.prj-hero__marks b::before{ left:0; right:0; top:6px; height:1px; }
.prj-hero__marks b::after{ top:0; bottom:0; left:6px; width:1px; }
.prj-hero__strip{ display:none; }
.prj-hero__inner{ position:relative; z-index:1; }

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:15px; font-weight:500; line-height:20px; color:rgba(187, 205, 218, 0.7); }
.crumbs a{ transition:color var(--dur-fast); }
.crumbs a:hover{ color:var(--white); }
.crumbs > span[aria-hidden]{ color:rgba(187, 205, 218, 0.35); }
.crumbs [aria-current]{ color:var(--white); }

.prj-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.prj-tags li{ display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:99px; background:rgba(255, 255, 255, 0.08); font-size:14px; font-weight:500; color:var(--white); }
.prj-hero__head{ display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:24px; }
.prj-hero__h1{ margin-left:-0.06em; font-size:clamp(40px, 5.42vw, 104px); font-weight:600; line-height:1; letter-spacing:-0.04em; color:var(--white); }
.prj-hero__live{ flex:none; margin-top:8px; }
.prj-hero__intro{ margin-top:28px; max-width:620px; font-size:clamp(16px, 0.99vw, 19px); line-height:1.55; color:rgba(187, 205, 218, 0.85); }

.prj-data{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:64px; }
.prj-data__item{ padding-left:28px; border-left:1px solid rgba(255, 255, 255, 0.12); }
.prj-data__item:first-child{ padding-left:0; border-left:0; }
.prj-data dt{ font-size:14px; font-weight:500; line-height:18px; color:rgba(187, 205, 218, 0.7); }
.prj-data dd{ margin:6px 0 0; font-size:18px; font-weight:500; line-height:23px; color:var(--white); }
.prj-shot{ position:relative; margin-top:80px; }
.prj-shot::before{ content:""; position:absolute; z-index:0; left:50%; width:100vw; transform:translateX(-50%); top:62.2%; bottom:calc(-1 * clamp(64px, 7.8vw, 150px)); background:var(--paper); }
.prj-shot::after{ content:""; position:absolute; z-index:0; left:50%; width:100vw; transform:translateX(-50%); top:62.2%; bottom:calc(-1 * clamp(64px, 7.8vw, 150px)); background-image:var(--noise); background-size:160px 160px; opacity:0.05; pointer-events:none; }
.prj-shot__browser{ position:relative; z-index:1; overflow:hidden; border-radius:20px; background:#0e151b; border:1px solid rgba(255, 255, 255, 0.12); box-shadow:0 40px 90px rgba(5, 10, 13, 0.5); transform-origin:50% 0; will-change:transform; }
.prj-shot__bar{ position:relative; display:flex; align-items:center; gap:7px; height:44px; padding-left:20px; background:rgba(255, 255, 255, 0.05); }
.prj-shot__bar i{ width:11px; height:11px; border-radius:50%; background:rgba(255, 255, 255, 0.25); }
.prj-shot__bar span{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(280px, 40%); height:24px; border-radius:12px; background:rgba(255, 255, 255, 0.08); font-size:12px; line-height:24px; text-align:center; color:rgba(255, 255, 255, 0.7); overflow:hidden; white-space:nowrap; }
.prj-shot__img{ position:relative; overflow:hidden; aspect-ratio:1500 / 856; }
.prj-shot__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; will-change:transform; }
.prj-shot__img img.is-cover{ object-position:center; }
.prj-shot__phone{
  position:absolute; z-index:2; left:82%; top:27.78%; width:20%; aspect-ratio:300 / 620; padding:clamp(5px, 0.52vw, 10px);
  border-radius:clamp(22px, 2.3vw, 44px); background:var(--ink); border:1px solid rgba(255, 255, 255, 0.16);
  box-shadow:0 40px 80px rgba(5, 10, 13, 0.55); will-change:transform;
}
.prj-shot__phone img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:clamp(17px, 1.875vw, 36px); }
.prj-task{ position:relative; padding:40px 0 clamp(56px, 6.25vw, 120px); }
.prj-task-gap{ height:40px; }
.prj-task__cols{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.prj-task__title{ margin-top:18px; max-width:680px; font-size:clamp(26px, 0.9vw + 19px, 36px); font-weight:600; line-height:1.15; letter-spacing:-0.02em; }
.prj-task__text{ margin-top:18px; max-width:680px; font-size:18px; line-height:1.6; color:var(--muted); }
.prj-feats{ margin-top:64px; }
.prj-feats__label{ display:block; }
.prj-feats__list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:17px; }
.prj-feats__list li{ display:inline-flex; align-items:center; height:38px; padding:0 14px; border-radius:99px; background:var(--white); border:1px solid rgba(6, 10, 13, 0.08); font-size:15px; font-weight:500; transition:border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .prj-feats__list li:hover{ border-color:rgba(6, 10, 13, 0.35); transform:translateY(-2px); }
}
.prj-live{ padding:clamp(48px, 5vw, 96px) 0 clamp(56px, 6.25vw, 120px); }
.prj-live__head{ margin-bottom:clamp(28px, 3.2vw, 56px); }
.prj-live__head .sec-head__label{ padding-top:1.5em; }
.prj-live__head .h2{ --hw:14.5em; }
.prj-live__lead{ max-width:400px; font-size:17px; line-height:1.6; }
.prj-live__grid{ display:grid; grid-template-columns:minmax(0, 980fr) minmax(0, 496fr); gap:24px; align-items:start; }
.prj-live__side{ display:grid; gap:24px; }
.prj-live__note{ margin-top:14px; font-size:12px; color:var(--muted); }
.lviewer{ position:relative; display:block; overflow:hidden; border-radius:20px; background:#0e151b; border:1px solid rgba(6, 10, 13, 0.1); box-shadow:0 30px 70px rgba(5, 10, 13, 0.18); color:var(--white); isolation:isolate; }
.lviewer__view{ position:relative; display:block; overflow:hidden; aspect-ratio:16 / 10; background:#fff; }
.lviewer__page{ position:absolute; inset:0; opacity:0; transform:translateY(18px) scale(0.985); transition:opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out); }
.lviewer__page.is-on{ opacity:1; transform:none; z-index:1; }
.lviewer__page img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.lviewer__page.is-full img{ height:auto; will-change:transform; }
.lviewer__scroll{ position:absolute; z-index:3; right:6px; top:8px; bottom:8px; width:5px; border-radius:3px; background:rgba(6, 10, 13, 0.1); transition:opacity 0.4s; }
.lviewer__scroll i{ position:absolute; left:0; right:0; top:0; height:18%; border-radius:3px; background:rgba(6, 10, 13, 0.45); }
[data-lviewer].is-sub .lviewer__scroll{ opacity:0; }
.lviewer__open{ position:absolute; z-index:4; right:20px; bottom:20px; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 18px; border-radius:99px; background:var(--ink); font-size:15px; font-weight:600; color:var(--white); box-shadow:0 14px 30px rgba(5, 10, 13, 0.35); transition:transform 0.35s var(--ease-out), background-color 0.25s; }
.lviewer__open svg{ width:30px; height:30px; padding:7px; border-radius:50%; background:var(--signal); color:var(--white); transition:transform 0.35s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .lviewer:hover .lviewer__open{ background:var(--signal); transform:translateY(-3px); }
  .lviewer:hover .lviewer__open svg{ background:var(--white); color:var(--signal); transform:rotate(45deg); }
}
.lviewer:focus-visible{ outline:3px solid var(--signal); outline-offset:4px; }
.lpages{ padding:10px; border-radius:24px; background:var(--white); border:1px solid rgba(6, 10, 13, 0.08); }
.lpages__title{ padding:12px 12px 8px; font-size:14px; font-weight:500; color:var(--muted); }
.lpages__list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.lpages__item{ position:relative; display:flex; align-items:center; gap:6px; border-radius:16px; transition:background-color 0.25s; }
.lpages__item::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:2px; background:var(--signal); transform:scaleY(0); transition:transform 0.35s var(--ease-out); }
.lpages__item.is-on{ background:var(--paper); }
.lpages__item.is-on::before{ transform:scaleY(1); }
.lpages__pick{ flex:1; min-width:0; display:grid; gap:3px; padding:12px 6px 12px 16px; text-align:left; background:none; border:0; cursor:pointer; color:inherit; font:inherit; border-radius:16px; }
.lpages__pick.is-static{ cursor:default; }
.lpages__name{ font-size:16px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.lpages__path{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }
.lpages__go{ flex:none; display:grid; place-items:center; width:44px; height:44px; margin-right:6px; border-radius:50%; background:rgba(6, 10, 13, 0.05); color:var(--ink); transition:background-color 0.25s, color 0.25s, transform 0.35s var(--ease-out); }
.lpages__go svg{ width:18px; height:18px; }
.lpages__item.is-on .lpages__go{ background:var(--ink); color:var(--white); }
.lpages__pick:focus-visible, .lpages__go:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
@media (hover: hover) and (pointer: fine){
  .lpages__item:hover{ background:var(--paper); }
  .lpages__go:hover{ background:var(--signal); color:var(--white); transform:rotate(45deg); }
}

.prj-cd{ position:relative; overflow:hidden; display:flex; flex-direction:column; padding:clamp(20px, 1.67vw, 32px); border-radius:24px; background:var(--ink); color:var(--white); }
.prj-cd > *{ position:relative; z-index:1; }
.prj-cd .prj-cd__glow{ position:absolute; z-index:0; left:52.4%; top:-36%; width:80.6%; height:91%; border-radius:50%; --gc:rgba(233, 80, 6, 0.25); --blur:100px; pointer-events:none; }
.prj-cd__title{ font-size:16px; font-weight:500; line-height:21px; color:var(--mist); }
.prj-cd__nums{ display:grid; grid-template-columns:repeat(3, 1fr); margin-top:clamp(18px, 1.93vw, 37px); }
.prj-cd__nums > div{ display:flex; flex-direction:column; }
.prj-cd__n{ display:block; font-size:clamp(40px, 3.33vw, 64px); font-weight:600; line-height:1.3; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.prj-cd__n.is-tick{ animation:prj-tick 450ms var(--ease-out); }
@keyframes prj-tick{ 0%{ transform:translateY(-14%); opacity:0.2; } 100%{ transform:none; opacity:1; } }
.prj-cd__nums small{ font-size:14px; line-height:18px; color:rgba(187, 205, 218, 0.7); margin-top:-3px; }
.prj-cd__line{ position:relative; display:block; height:1px; margin-top:clamp(20px, 2vw, 38px); background:rgba(255, 255, 255, 0.12); overflow:hidden; }
.prj-cd__line i{ position:absolute; inset:0; background:var(--signal); transform-origin:left; transform:scaleX(0); }
.prj-cd__note{ margin-top:clamp(14px, 1.2vw, 23px); font-size:15px; line-height:20px; color:rgba(255, 255, 255, 0.85); }
.prj-cd__domain{ margin-top:auto; font-size:clamp(32px, 2.5vw, 48px); font-weight:600; letter-spacing:-0.03em; line-height:1.2; }
.prj-cd__facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px; }
.prj-cd__facts dt{ font-size:14px; color:rgba(187, 205, 218, 0.7); }
.prj-cd__facts dd{ margin:4px 0 0; font-size:15px; font-weight:500; }
.prj-cd__link{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:15px; font-weight:600; color:var(--white); }
.prj-cd__link svg{ width:16px; height:16px; color:var(--signal); transition:transform var(--dur-base) var(--ease-out); }
.prj-cd__link:hover svg{ transform:translate(3px, -3px); }

.prj-mob{ position:relative; overflow:hidden; border-radius:24px; background:var(--paper); min-height:200px; }
.prj-mob__label{ position:absolute; left:24px; top:24px; z-index:2; font-size:14px; font-weight:500; line-height:18px; color:var(--muted); }
.prj-mob__phone{ position:absolute; left:50%; top:30px; width:35.5%; aspect-ratio:176 / 370; margin-left:-17.75%; padding:clamp(4px, 0.36vw, 7px); border-radius:clamp(18px, 1.46vw, 28px); background:var(--ink); box-shadow:0 24px 50px rgba(5, 10, 13, 0.25); will-change:transform; }
.prj-mob__phone img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:clamp(14px, 1.15vw, 22px); }
html.js:not(.reduced) [data-prj-reveal]{ will-change:clip-path; }
.prj-nums{ overflow:hidden; padding:clamp(56px, 6.25vw, 120px) 0; }
.prj-nums__glow{ position:absolute; z-index:0; left:67.7%; top:-36%; width:47%; height:125%; border-radius:50%; --gc:rgba(233, 80, 6, 0.2); --blur:260px; pointer-events:none; }
.prj-nums__head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.prj-nums__label{ display:block; }
.prj-nums__legend{ font-size:12px; color:rgba(187, 205, 218, 0.5); }
.prj-nums__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:29px; }
.prj-nums__item{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; min-height:272px; padding:28px 26px 26px;
  border-radius:24px; background:rgba(255, 255, 255, 0.035); border:1px solid rgba(255, 255, 255, 0.08); color:var(--mist);
  transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform 0.6s var(--ease-out), border-color 0.4s, background-color 0.4s;
}
.prj-nums__spot{ position:absolute; inset:0; z-index:0; background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(233, 80, 6, 0.18), transparent 70%); opacity:0; transition:opacity 0.4s; pointer-events:none; }
.prj-nums__item > *{ position:relative; z-index:1; }
.prj-nums__viz{ position:absolute; right:18px; top:18px; width:clamp(84px, 7vw, 118px); height:clamp(84px, 7vw, 118px); color:var(--mist); }
.prj-nums__viz svg{ width:100%; height:100%; overflow:visible; }
.prj-nums__item.is-accent .prj-nums__viz{ color:var(--signal); }
.prj-nums__viz .viz-seg{ stroke:currentColor; stroke-width:8; fill:none; opacity:0.12; transition:opacity 0.35s; }
.prj-nums__viz .viz-seg.is-on{ opacity:1; }
.prj-nums__viz .viz-bar{ fill:currentColor; opacity:0.35; transform-origin:50% 100%; transform:scaleY(0); transition:transform 0.7s var(--ease-out), opacity 0.3s; }
.prj-nums__viz .viz-bar.is-on{ transform:scaleY(1); }
.prj-nums__viz .viz-bar.is-last{ opacity:1; }
.prj-nums__num{ margin:0; font-size:clamp(56px, 5vw, 96px); font-weight:600; line-height:1.1; letter-spacing:-0.05em; color:var(--white); font-variant-numeric:tabular-nums; }
.prj-nums__item.is-accent .prj-nums__num{ color:var(--signal); }
.prj-nums__text{ margin-top:10px; max-width:300px; font-size:16px; line-height:1.45; color:var(--mist); }
.prj-nums__note{ margin-top:36px; font-size:15px; line-height:20px; color:rgba(187, 205, 218, 0.6); }
@media (hover: hover) and (pointer: fine){
  .prj-nums__item:hover{ border-color:rgba(233, 80, 6, 0.45); background:rgba(255, 255, 255, 0.05); }
  .prj-nums__item:hover .prj-nums__spot{ opacity:1; }
}
.prj-next{ position:relative; padding:clamp(48px, 5.73vw, 110px) 0 clamp(56px, 6.25vw, 120px); }
.prj-next__top{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.prj-next__count{ font-size:13px; color:var(--muted); }
.prj-next__count b{ font-weight:600; color:var(--ink); }
.prj-next__card{
  position:relative; display:block; overflow:hidden; isolation:isolate; margin-top:21px;
  aspect-ratio:1500 / 520; border-radius:clamp(18px, 1.46vw, 28px); background:var(--card, #345163); color:var(--white);
  transform:perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style:preserve-3d;
  transition:transform 0.7s var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.prj-next__card::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 40%, rgba(6, 10, 13, 0.25)); }
.prj-next__card::after{ opacity:0.08; }
.prj-next__spot{ position:absolute; z-index:0; left:var(--mx, 30%); top:var(--my, 50%); width:60%; aspect-ratio:1; border-radius:50%; transform:translate(-50%, -50%); background:radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)); opacity:0; transition:opacity var(--dur-slow) var(--ease-out); pointer-events:none; }
.prj-next__grid{ position:absolute; inset:0; z-index:0; display:flex; justify-content:space-evenly; pointer-events:none; }
.prj-next__grid i{ width:1px; height:100%; background:rgba(255, 255, 255, 0.06); }
.prj-next__arrow{ position:absolute; z-index:3; left:3.73%; top:11.67%; display:grid; place-items:center; width:clamp(28px, 3.33vw, 64px); aspect-ratio:1; border-radius:50%; background:var(--white); color:var(--ink); transition:background-color var(--dur-base), color var(--dur-base), transform var(--dur-slow) var(--ease-out); }
.prj-next__arrow svg{ width:37.5%; height:37.5%; }
.prj-next__text{ position:absolute; z-index:3; left:3.73%; bottom:14%; display:flex; flex-direction:column; max-width:44%; transition:transform var(--dur-slow) var(--ease-out); }
.prj-next__kicker{ font-size:12px; color:rgba(255, 255, 255, 0.6); margin-bottom:8px; }
.prj-next__name{ position:relative; display:inline-block; align-self:flex-start; font-size:clamp(18px, 3.75vw, 72px); font-weight:600; line-height:1.15; letter-spacing:-0.04em; }
.prj-next__name::after{ content:""; position:absolute; left:0; right:0; bottom:0.04em; height:0.06em; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform 0.6s var(--ease-out); }
.prj-next__meta{ margin:6px 0 0 0.1em; font-size:clamp(14px, 0.94vw, 18px); color:rgba(255, 255, 255, 0.75); }
.prj-next__hint{ display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:11px; color:rgba(255, 255, 255, 0.5); opacity:0; transform:translateY(6px); transition:opacity 0.4s, transform 0.4s; }
.prj-next__hint svg{ width:12px; height:12px; }
.prj-next__shot{ position:absolute; z-index:1; left:48%; top:10%; width:52%; overflow:hidden; border-radius:clamp(8px, 0.83vw, 16px) clamp(8px, 0.83vw, 16px) 0 0; background:#fff; box-shadow:0 30px 70px rgba(5, 10, 13, 0.45); transform:translateZ(30px); transition:transform 0.8s var(--ease-out); }
.prj-next__bar{ display:flex; align-items:center; gap:5px; height:clamp(16px, 1.5vw, 28px); padding:0 10px; background:#e9eef2; }
.prj-next__bar i{ width:7px; height:7px; border-radius:50%; background:rgba(6, 10, 13, 0.18); }
.prj-next__bar em{ margin:0 auto; font-family:var(--mono); font-style:normal; font-size:clamp(8px, 0.65vw, 12px); color:rgba(6, 10, 13, 0.55); }
.prj-next__shot-img{ display:block; height:clamp(120px, 24vw, 460px); overflow:hidden; }
.prj-next__shot-img img{ display:block; width:100%; height:auto; transform:translateY(calc(var(--sy, 0) * -1%)); will-change:transform; }
.prj-next__shot-img:not([data-next-full]) img{ height:100%; object-fit:cover; object-position:top; }
.prj-next__shot-img img.is-cover{ object-position:center; }
.prj-next__phone{ position:absolute; z-index:2; left:40%; bottom:-16%; width:11.5%; aspect-ratio:300 / 620; padding:4px; border-radius:clamp(12px, 1.3vw, 26px); background:var(--ink); border:1px solid rgba(255, 255, 255, 0.2); box-shadow:0 30px 60px rgba(5, 10, 13, 0.5); transform:translateY(18%) rotate(-4deg); opacity:0; transition:transform 0.9s var(--ease-out), opacity 0.5s; }
.prj-next__phone img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:clamp(9px, 1vw, 21px); }
.prj-next__foot{ display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; }
.prj-next .btn--ink{ --h:58px; --icon:30px; --pl:22px; --fs:16px; --ic-bg:rgba(255, 255, 255, 0.14); gap:10px; padding:14px; padding-left:22px; }
.prj-next .btn--ink .btn__icon svg{ width:16px; height:16px; }
.prj-next .btn--ink:hover{ --ic-bg:var(--signal); }
.prj-next__after{ display:flex; align-items:center; gap:12px; }
.prj-next__after-label{ font-size:12px; color:var(--muted); margin-right:4px; }
.prj-next__mini{ display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; padding:6px 14px 6px 6px; border-radius:99px; background:var(--white); border:1px solid rgba(6, 10, 13, 0.08); color:var(--ink); transition:border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.prj-next__mini-img{ display:block; width:64px; height:44px; overflow:hidden; border-radius:99px; background:var(--card, #345163); }
.prj-next__mini-img img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.prj-next__mini-text{ display:flex; flex-direction:column; line-height:1.2; }
.prj-next__mini-text b{ font-size:14px; font-weight:600; }
.prj-next__mini-text small{ font-size:12px; color:var(--muted); }
@media (hover: hover) and (pointer: fine){
  .prj-next__card:hover{ box-shadow:0 40px 80px rgba(6, 10, 13, 0.25); }
  .prj-next__card:hover .prj-next__spot{ opacity:1; }
  .prj-next__card:hover .prj-next__shot{ transform:translateZ(50px) translateY(-10px); }
  .prj-next__card:hover .prj-next__phone{ opacity:1; transform:translateY(0) rotate(-4deg); }
  .prj-next__card:hover .prj-next__arrow{ background:var(--signal); color:var(--white); transform:rotate(45deg) scale(1.08); }
  .prj-next__card:hover .prj-next__name::after{ transform:scaleX(1); }
  .prj-next__card:hover .prj-next__hint{ opacity:1; transform:none; }
  .prj-next__mini:hover{ border-color:rgba(6, 10, 13, 0.3); transform:translateY(-2px); }
}
@media (max-width: 1280px){
  .prj-live__grid{ grid-template-columns:1fr; }
  .prj-live__side{ grid-template-columns:1fr 1fr; align-items:start; }
  .prj-data{ grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); gap:24px 0; }
  .prj-data__item:nth-child(3n + 1){ padding-left:0; border-left:0; }
  .prj-nums__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 1024px){
  .prj-hero{ padding:118px 0 48px; }
  .prj-hero__grid, .prj-hero__marks{ display:none; }
  .prj-hero__glow--signal{ left:40%; top:-6%; width:90%; height:30%; --blur:120px; }
  .prj-hero__glow--slate{ left:-40%; top:50%; width:120%; height:30%; --blur:120px; }
  .prj-tags{ margin-top:18px; }
  .prj-hero__head{ flex-direction:column; align-items:flex-start; gap:22px; margin-top:18px; }
  .prj-hero__h1{ font-size:clamp(40px, 10.8vw, 64px); margin-left:-0.04em; }
  .prj-hero__live{ margin-top:0; }
  .prj-hero__intro{ margin-top:22px; font-size:17px; line-height:1.65; }
  .prj-data{ grid-template-columns:1fr 1fr; gap:20px 20px; margin-top:32px; }
  .prj-data__item, .prj-data__item:nth-child(3n + 1){ padding-left:0; border-left:0; }
  .prj-shot{ margin:48px 0 0; padding-bottom:22%; }
  .prj-shot::before, .prj-shot::after{ display:none; }
  .prj-shot__browser{ border-radius:10px; }
  .prj-shot__bar{ height:22px; padding-left:10px; gap:4px; }
  .prj-shot__bar i{ width:6px; height:6px; }
  .prj-shot__bar span{ display:none; }
  .prj-shot__phone{ left:68%; top:16%; width:31%; padding:4px; border-radius:18px; }
  .prj-shot__phone img{ border-radius:14px; }
  .prj-task{ padding:40px 0 56px; }
  .prj-task__cols{ grid-template-columns:1fr; gap:40px; }
  .prj-task__title{ font-size:28px; margin-top:14px; }
  .prj-task__text{ font-size:17px; line-height:1.65; margin-top:16px; }
  .prj-feats{ margin-top:40px; }
  .prj-feats__list{ gap:8px; margin-top:16px; }
  .prj-live__grid, .prj-live__side{ gap:16px; }
  .prj-live__side{ grid-template-columns:1fr; }
  .prj-live__lead{ font-size:17px; }
  .lviewer{ border-radius:14px; }
  .lviewer__view{ aspect-ratio:4 / 3.2; }
  .lviewer__open{ right:12px; bottom:12px; height:40px; font-size:14px; padding-left:14px; }
  .lviewer__open svg{ width:28px; height:28px; }
  .lpages{ border-radius:18px; padding:6px; }
  .lpages__pick{ padding:10px 4px 10px 14px; }
  .lpages__name{ font-size:15px; }
  .prj-cd{ min-height:0; padding:22px 20px; }
  .prj-cd__nums{ grid-template-columns:1fr 1fr; gap:14px 0; padding-top:22px; }
  .prj-cd__n{ font-size:44px; }
  .prj-nums__grid{ grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .prj-nums__item{ min-height:0; padding:22px 20px 20px; border-radius:18px; }
  .prj-nums__viz{ width:64px; height:64px; right:14px; top:14px; }
  .prj-nums__num{ font-size:50px; }
  .prj-nums__text{ font-size:15px; }
  .prj-nums__note{ margin-top:24px; }
  .prj-next__card{ margin-top:16px; aspect-ratio:1 / 1.05; }
  .prj-next__meta{ display:none; }
  .prj-next__hint{ display:none; }
  .prj-next__text{ bottom:8%; left:6%; max-width:88%; }
  .prj-next__name{ font-size:clamp(28px, 9vw, 44px); }
  .prj-next__arrow{ left:6%; top:6%; width:44px; }
  .prj-next__shot{ left:14%; width:86%; top:16%; }
  .prj-next__shot-img{ height:46vw; }
  .prj-next__phone{ left:4%; bottom:30%; width:24%; opacity:1; transform:none; }
  .prj-next__foot{ flex-direction:column; align-items:flex-start; }
  .prj-next__after{ flex-wrap:wrap; }
}