/* Selected work: real product imagery, wide frames, and an editorial rhythm. */
.portfolio-section{--work-ice:#8aefff;--work-lime:#d7ff5f;--work-text:#eff7ff;--work-muted:#a5b4bd;position:relative;border-block:1px solid #eff7ff18;background:#05070a;isolation:isolate}
.portfolio-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 6% 12%,#8aefff07,transparent 34%)}
.portfolio-section .section-heading{align-items:flex-end;gap:40px;margin-bottom:clamp(44px,6vw,88px)}
.portfolio-section .section-heading>div{min-width:0}
.portfolio-section .section-heading>div:last-child{max-width:360px}
.portfolio-section .section-heading h2{font-size:clamp(48px,6.25vw,90px);font-weight:800;letter-spacing:-.055em;line-height:1.04;margin-top:26px}
.portfolio-section .section-heading .gradient-text{color:var(--work-ice);background:none;-webkit-text-fill-color:currentColor}
.portfolio-section .eyebrow{color:var(--work-text)}
.portfolio-section .section-number{color:var(--work-lime)}
.portfolio-section .section-intro{color:var(--work-muted);font-size:16px;line-height:1.85}
.portfolio-count{display:inline-flex;align-items:center;gap:14px;margin-top:24px;font-size:13px;color:var(--work-muted)}
.portfolio-count strong{font:500 42px/1 var(--english);color:var(--work-lime);letter-spacing:-.055em}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4.2vw,64px);row-gap:62px;align-items:start}
/* Reveal owns article transforms; visual effects live on their children. */
.portfolio-section .project-card{min-width:0;position:relative;border:0;border-radius:0;background:transparent;overflow:visible}
.project-card:nth-child(2n + 3){margin-top:112px}
.project-preview{position:relative;display:flex;align-items:center;min-height:290px;padding:clamp(24px,3vw,46px) 26px;background:#11171b;border:1px solid #eff7ff1c;border-radius:8px;overflow:hidden;isolation:isolate;perspective:1200px}
.project-preview::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#ffffff07,transparent 50%),linear-gradient(#eff7ff05 1px,transparent 1px),linear-gradient(90deg,#eff7ff05 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
.project-preview::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px #eff7ff00;transition:box-shadow .3s ease}
.project-browser{position:relative;display:block;width:100%;min-width:0;flex-shrink:0;overflow:hidden;border:1px solid #eff7ff32;border-radius:4px;background:#080c10;box-shadow:0 20px 38px #0006;transform-origin:center}
.project-browser-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:29px;padding:8px 12px;background:#080c10;color:#b3c0c8;font:10px/1.2 var(--english);letter-spacing:.02em;direction:ltr;border-bottom:1px solid #eff7ff14}
.project-browser-dots{display:flex;gap:4px}
.project-browser-dots i{width:4px;height:4px;border-radius:50%;background:#677781}
.project-browser-dots i:first-child{background:var(--work-lime)}
.project-browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#080c10}
.project-open-mark{position:absolute;bottom:16px;left:16px;z-index:3;display:grid;place-items:center;width:46px;height:46px;border:1px solid #eff7ff55;border-radius:50%;background:#05070aea;color:var(--work-text);font:25px/1 Arial,sans-serif;transition:color .25s,background .25s,border-color .25s}
.project-card:nth-child(2) .project-preview{background:#1c1b18;padding:38px 22px 0}
.project-card:nth-child(2) .project-browser{border-radius:4px 4px 0 0;border-bottom:0}
.project-card:nth-child(3) .project-preview{background:#151d1b;padding:46px 36px}
.project-card:nth-child(3) .project-browser img{aspect-ratio:1.3}
.project-card:nth-child(4) .project-preview{background:#1c171c;padding:50px 28px}
.project-card:nth-child(5) .project-preview{background:#151c21;padding:28px 0 28px 36px}
.project-card:nth-child(5) .project-browser{border-radius:0 4px 4px 0}
.project-card:nth-child(5) .project-browser img{aspect-ratio:1.38}
.project-card:nth-child(6) .project-preview{background:#162024;padding:36px 26px}
.project-content{padding:27px 0 0}
.project-kicker{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px;color:var(--work-muted);font-size:13px;line-height:1.6}
.project-index{flex-shrink:0;color:var(--work-ice);font:11px/1.5 var(--english);letter-spacing:.09em}
.project-content h3{color:var(--work-text);font-size:clamp(29px,3vw,42px);font-weight:600;letter-spacing:-.045em;line-height:1.16;overflow-wrap:anywhere}
.project-content h3 a{display:inline-block;min-height:44px}
.project-content h3 a:hover{color:var(--work-ice)}
.project-name-en{text-align:right;font-family:var(--english)}
.project-content p{max-width:56ch;margin-top:18px;color:var(--work-muted);font-size:16px;line-height:1.9}
.project-tags{display:flex;flex-wrap:wrap;gap:8px 0;list-style:none;padding:0;margin:23px 0 0}
.project-tags li{font-size:12px;line-height:1.6;color:#cad5db;padding:0 13px;border:0;border-inline-start:1px solid #eff7ff30;border-radius:0;background:none}
.project-tags li:first-child{padding-inline-start:0;border-inline-start:0}
.project-visit{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:58px;margin-top:25px;padding-block:13px;border-top:1px solid #eff7ff26;color:var(--work-text);font-size:14px;transition:color .2s,border-color .2s}
.project-visit span:last-child{color:var(--work-ice);font:23px/1 Arial,sans-serif}
.project-visit:hover{color:var(--work-lime);border-color:var(--work-ice)}
.project-visit:hover span:last-child{color:var(--work-lime)}
.portfolio-section a:focus-visible{outline:2px solid var(--work-lime);outline-offset:5px}
.project-preview:focus-visible::after{box-shadow:inset 0 0 0 2px var(--work-lime)}

/* A wide opening shot gives the flagship product its own stage. */
.portfolio-section .project-featured{grid-column:1/-1;display:grid;grid-template-columns:.88fr 1.35fr;align-items:stretch;background:#0a0e12;border:1px solid #eff7ff2b;border-radius:8px;margin-bottom:20px;overflow:hidden}
.project-featured .project-preview{grid-column:2;grid-row:1;border:0;border-inline-start:1px solid #eff7ff1c;border-radius:0;min-height:650px;padding:56px 38px;background:radial-gradient(ellipse at 50% 42%,#77896826,transparent 64%),#111814}
.project-featured .project-preview::before{background-image:linear-gradient(#d7ff5f07 1px,transparent 1px),linear-gradient(90deg,#d7ff5f07 1px,transparent 1px);background-size:54px 54px}
.project-featured .project-browser{box-shadow:0 34px 65px #0008;border-color:#eff7ff50}
.project-featured .project-content{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(28px,3vw,46px)}
.project-featured .project-kicker{gap:12px;font-size:12px;margin-bottom:25px}
.project-featured h3{font-size:clamp(38px,4vw,60px);line-height:1.07}
.project-featured .project-content p{font-size:15px;line-height:1.85}
.project-featured .project-tags{margin-top:25px}
.project-featured .project-tags li{font-size:11px;padding-inline:9px}
.project-featured .project-tags li:first-child{padding-inline-start:0}
.project-featured .project-visit{margin-top:14px}
.project-featured .project-open-mark{width:58px;height:58px;bottom:25px;left:25px;font-size:29px;background:var(--work-lime);color:#05070a;border-color:var(--work-lime)}
.project-app-label{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;margin-top:19px;color:var(--work-lime);font:10px/1.5 var(--english);letter-spacing:.09em;direction:ltr}
.project-app-label svg{width:13px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4}
.project-platforms{display:flex;flex-wrap:wrap;gap:20px;margin-top:12px;direction:ltr;justify-content:flex-end}
.project-platforms a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#c8d5dc;font:12px/1.4 var(--english);border-bottom:1px solid #eff7ff25}
.project-platforms a:hover{color:var(--work-lime);border-color:var(--work-lime)}

/* The private product retains its wordmark rather than a fabricated UI. */
.project-private-preview{position:relative;display:flex;align-items:center;justify-content:center;min-height:356px;padding:76px 34px 44px;overflow:hidden;border:1px solid #eff7ff26;border-radius:8px;background:linear-gradient(145deg,#182226,#0a0e12 60%);isolation:isolate}
.project-private-preview::before{content:"";position:absolute;width:290px;height:290px;left:-115px;bottom:-165px;z-index:-1;border:1px solid #8aefff60;border-radius:50%;box-shadow:0 0 0 22px #8aefff07,0 0 0 45px #8aefff07,0 0 0 68px #8aefff07}
.project-private-preview::after{content:"";position:absolute;width:8px;height:8px;background:var(--work-lime);bottom:24px;right:25px;box-shadow:-14px 0 0 #d7ff5f44,-28px 0 0 #d7ff5f22}
.project-private-wordmark{display:block;max-width:100%;color:var(--work-text);font:600 clamp(28px,3.4vw,50px)/1.01 var(--english);letter-spacing:-.055em;direction:ltr;overflow-wrap:anywhere}
.project-private-wordmark small{display:block;margin-top:22px;color:var(--work-ice);font:10px/1.6 var(--english);letter-spacing:.14em}
.project-private-tag{position:absolute;top:23px;right:25px;display:flex;align-items:center;gap:8px;color:var(--work-muted);font-size:12px}
.project-private-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.portfolio-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:65px;padding-top:27px;border-top:1px solid #eff7ff26;color:var(--work-muted);font-size:14px;line-height:1.8}
.portfolio-bottom .text-link{min-height:44px;color:var(--work-lime);white-space:nowrap}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body:not([data-motion="off"]) .project-browser{transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s ease}
  body:not([data-motion="off"]) .project-card:nth-child(3) .project-browser{transform:rotate(-2deg)}
  body:not([data-motion="off"]) .project-card:nth-child(4) .project-browser{transform:rotate(1.5deg)}
  body:not([data-motion="off"]) .project-featured .project-browser{transform:rotateY(-8deg) rotateZ(-3deg) scale(.97)}
  body:not([data-motion="off"]) .project-preview:hover .project-browser{transform:translateY(-5px) rotateX(2deg) scale(1.015);box-shadow:0 32px 65px #0009}
  body:not([data-motion="off"]) .project-featured .project-preview:hover .project-browser{transform:rotateY(0) rotateZ(0) scale(1.015)}
  .project-preview:hover::after{box-shadow:inset 0 0 0 1px #8aefff80,inset 0 0 35px #8aefff08}
  .project-preview:hover .project-open-mark{background:var(--work-ice);border-color:var(--work-ice);color:#05070a}
}
@media(min-width:761px) and (max-width:1100px){
  .portfolio-section .section-heading h2{font-size:clamp(44px,6vw,68px)}
  .portfolio-section .section-heading>div:last-child{max-width:285px}
  .portfolio-section .section-intro{font-size:14px}
  .portfolio-section .project-featured{grid-template-columns:.95fr 1.05fr}
  .project-featured .project-content{padding:25px}
  .project-featured .project-preview{padding:30px 22px}
  .project-featured .project-kicker{flex-wrap:wrap;gap:6px 15px}
  .project-featured h3{font-size:38px}
  .project-preview{min-height:235px}
  .project-card:nth-child(3) .project-preview{padding:34px 25px}
  .project-card:nth-child(4) .project-preview{padding:42px 24px}
  .project-content p{font-size:15px}
  .project-card:nth-child(2n + 3){margin-top:75px}
  .project-private-preview{min-height:285px;padding-inline:25px}
  .project-private-wordmark{font-size:35px}
}
@media(max-width:760px){
  .portfolio-section .section-heading{display:block;margin-bottom:36px}
  .portfolio-section .section-heading h2{font-size:clamp(42px,10.6vw,74px);line-height:1.1;letter-spacing:-.055em}
  .portfolio-section .section-heading>div:last-child{max-width:100%;margin-top:25px}
  .portfolio-section .section-intro{font-size:16px}
  .portfolio-count{margin-top:18px;font-size:14px}
  .portfolio-count strong{font-size:32px}
  .portfolio-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .project-card:nth-child(2n + 3){margin-top:0}
  .portfolio-section .project-featured{display:flex;flex-direction:column;margin-bottom:0}
  .project-featured .project-preview{order:0;min-height:0;padding:32px 20px;border-inline-start:0;border-bottom:1px solid #eff7ff26}
  .project-featured .project-content{order:1;padding:25px 22px 12px}
  .project-featured .project-kicker{font-size:12px;margin-bottom:18px;gap:9px}
  .project-featured h3{font-size:clamp(38px,10vw,56px)}
  .project-featured .project-content p{font-size:16px}
  .project-featured .project-open-mark{width:46px;height:46px;left:12px;bottom:12px;font-size:25px}
  .project-featured .project-tags li{font-size:12px}
  .project-app-label{font-size:10px;letter-spacing:.04em}
  .project-platforms{gap:24px;margin-top:15px}
  .project-platforms a{font-size:13px}
  .project-preview{min-height:0;padding:27px 20px}
  .project-card:nth-child(2) .project-preview{padding:28px 18px 0}
  .project-card:nth-child(3) .project-preview{padding:30px 24px}
  .project-card:nth-child(3) .project-browser img{aspect-ratio:16/10}
  .project-card:nth-child(4) .project-preview{padding:31px 22px}
  .project-card:nth-child(5) .project-preview{padding:24px 0 24px 28px}
  .project-card:nth-child(5) .project-browser img{aspect-ratio:16/10}
  .project-card:nth-child(6) .project-preview{padding:26px 20px}
  .project-browser-bar{font-size:9px;min-height:27px;padding-inline:10px}
  .project-content{padding-top:23px}
  .project-kicker{margin-bottom:12px;font-size:13px}
  .project-index{font-size:10px}
  .project-content h3{font-size:clamp(29px,7.6vw,42px)}
  .project-content p{margin-top:12px;font-size:16px;line-height:1.85}
  .project-tags{margin-top:19px}
  .project-tags li{font-size:12px;padding-inline:10px}
  .project-visit{margin-top:21px;min-height:58px}
  .project-private-preview{min-height:290px;padding-inline:28px}
  .project-private-wordmark{font-size:clamp(31px,9vw,50px)}
  .portfolio-bottom{display:block;margin-top:40px;padding-top:24px;font-size:14px}
  .portfolio-bottom .text-link{margin-top:12px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-section .project-browser{transform:none;transition:none}
  .portfolio-section .project-preview::after,.portfolio-section .project-open-mark,.portfolio-section .project-visit{transition:none}
}
body[data-motion="off"] .portfolio-section .project-browser{transform:none;transition:none}
body[data-motion="off"] .portfolio-section .project-preview::after,body[data-motion="off"] .portfolio-section .project-open-mark,body[data-motion="off"] .portfolio-section .project-visit{transition:none}