
.projects{grid-template-columns:repeat(2,minmax(0,1fr))}
.project,.project:first-child,.project:last-child{grid-column:span 1!important}
.aprova-cover,.project:first-child .aprova-cover{height:490px;background:#080e26;padding:0;display:block;border-color:#202e55;perspective:1000px}
.aprova-stage{display:block!important;position:absolute;inset:0;max-width:none!important;text-align:left;overflow:hidden;background:radial-gradient(ellipse at 80% 60%,#1b229f88,transparent 70%);font-family:'Segoe UI',sans-serif!important}
.ds-eyebrow{position:absolute;left:32px;top:32px;font-size:10px!important;letter-spacing:2px;color:#a3aed0!important}
.ds-cover-title{position:absolute;left:32px;top:66px;font-size:clamp(28px,3vw,40px)!important;font-weight:600;line-height:1.05!important;letter-spacing:-1.5px;color:#fff!important}
.ds-cover-title em{font-style:normal;color:#8da7ff}
.ds-browser{position:absolute;left:16%;top:42%;width:82%;aspect-ratio:1.85;border:1px solid #ffffff30;border-radius:12px;background:#eef2f7;box-shadow:0 30px 60px #0007;transform:rotate(-6deg);overflow:hidden;animation:ds-float 8s ease-in-out infinite}
.ds-browser-top{height:20px;display:flex;gap:4px;align-items:center;padding:0 9px;background:#1d2542;color:#b1b8ce;font:6px monospace}.ds-browser-top>i{width:4px;height:4px;border-radius:50%;background:#7785a8}.ds-browser-top>span{margin-left:10px}
.ds-screen{position:absolute;top:20px;left:0;width:100%;height:calc(100% - 20px);object-fit:cover;object-position:top}
.ds-dark{animation:ds-theme 8s ease-in-out infinite}
.ds-token{position:absolute;left:6%;top:63%;background:#11192ddd;border:1px solid #ffffff25;backdrop-filter:blur(12px);padding:14px;border-radius:12px;color:#a4b6e4!important;font:9px/1.8 Consolas,monospace!important;box-shadow:0 12px 25px #0006;animation:ds-token 8s ease-in-out infinite}
.ds-token b{display:flex;gap:8px;align-items:center;color:white;font-size:14px}.ds-token i{width:18px;height:18px;background:#1b229f;border-radius:5px;border:1px solid #8697f5}
.ds-spec{position:absolute;right:28px;top:30px;font:9px monospace!important;color:#8da7ff!important}.ds-spec span{color:#fff}
.aprova-project:hover .ds-browser{filter:brightness(1.1)}
.aprova-project .project-meta{background:linear-gradient(transparent,#030611);padding-top:45px}
.pending-cover{height:490px;border:1px solid #222;border-radius:32px;display:flex;flex-direction:column;justify-content:center;padding:40px;background:#0a0a0a}
.pending-cover>span{font:70px/1 Consolas,monospace;color:#272727;margin-bottom:35px}.pending-cover h3{font-size:25px;letter-spacing:-1px}.pending-cover p{font-size:14px;color:#777}
.case-hero{max-width:760px;margin:30px auto 48px}.case-hero h2{font-size:clamp(38px,5vw,65px)}.case-lead{font-size:22px;max-width:620px}
.case-shot{margin:32px 0;border:1px solid #2a2a2a;border-radius:18px;overflow:hidden;background:#070e24}.case-shot img{display:block;width:100%;height:auto}.case-shot figcaption{padding:14px 20px;font-size:12px;color:#9da6c1;background:#0c1328}
.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:36px 0;border-bottom:1px solid #333}.case-stats strong{display:block;font-size:44px;font-weight:400}.case-stats span{font-size:12px;color:#aaa}
.aprova-case .case-text{max-width:700px;margin:56px auto}.aprova-case .case-text h3{font-size:28px;margin-top:38px}.aprova-case .case-text p{line-height:1.85;font-size:16px}
.case-flow{display:flex;justify-content:center;gap:15px;align-items:center;flex-wrap:wrap;padding:32px 15px;background:#080e26;border:1px solid #202e55;border-radius:20px}.case-flow span{padding:13px;background:#14234a;border:1px solid #354a7b;border-radius:10px;font:13px monospace}.case-flow b{color:#768bc4}
.case-source{font-size:12px!important;color:#777!important}
@keyframes ds-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes ds-theme{0%,35%,100%{opacity:0}45%,85%{opacity:1}}
@keyframes ds-token{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media(max-width:700px){.projects{grid-template-columns:1fr}.aprova-cover,.project:first-child .aprova-cover,.pending-cover{height:450px;aspect-ratio:auto}.ds-cover-title{font-size:34px!important}.ds-spec{top:163px;left:32px}.case-stats{grid-template-columns:repeat(2,1fr)}.case-flow{gap:8px}.case-flow span{font-size:10px;padding:10px}}
@media(prefers-reduced-motion:reduce){.ds-browser,.ds-dark,.ds-token{animation:none}.ds-dark{opacity:0}}

.aprova-case h4{font-size:21px;font-weight:500;margin-bottom:12px}
.case-results{padding-left:22px;color:#ccc;font-size:17px;line-height:1.8}.case-results li{margin:14px 0}
.case-missing{padding:34px;margin:32px 0;border:1px dashed #444;border-radius:18px;background:#131313;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.case-missing>span{font:10px monospace;text-transform:uppercase;letter-spacing:2px;color:#777}.case-missing figcaption{font-size:21px;color:#bbb}.case-missing code{font-size:11px;color:#777;overflow-wrap:anywhere}

/* Transparent editorial mockup opening the case. */
.case-shot.case-mockup{border:0;background:transparent;border-radius:0;overflow:visible;margin:32px -2% 48px}.case-mockup img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 26px #0003)}

/* Frontal laptop: original screenshot scrolls inside the display. */
.case-laptop{position:relative;width:100%;max-width:450px;margin:50px auto 70px;padding:0 0 5%;filter:drop-shadow(0 25px 20px #0006)}
.case-laptop-lid{position:relative;width:85%;margin:auto;padding:12px 7px 9px;border:2px solid #70757b;border-radius:15px 15px 3px 3px;background:linear-gradient(120deg,#30343a,#08090b 35%,#17191c);box-shadow:inset 0 0 0 1px #000}
.case-laptop-camera{position:absolute;top:4px;left:50%;width:4px;height:4px;border-radius:50%;background:#263749;box-shadow:0 0 0 1px #080a0c}
.case-laptop-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef2f6;border-radius:3px}
.case-laptop-screen img{display:block;width:100%;max-width:none;height:auto;animation:case-page-scroll 40s linear infinite;animation-play-state:paused;will-change:transform}
#project-dialog[open] .case-laptop-screen img{animation-play-state:running}
.case-laptop-deck{position:relative;width:100%;height:38px;background:linear-gradient(#a9adb2,#e1e3e5);clip-path:polygon(7.5% 0,92.5% 0,100% 100%,0 100%)}
.case-laptop-keyboard{position:absolute;left:16%;right:16%;top:2px;height:17px;transform:perspective(160px) rotateX(35deg);background:repeating-linear-gradient(90deg,transparent 0 5.8%,#bec1c5 5.8% 6.5%),repeating-linear-gradient(0deg,#25272a 0 4px,#b5bac0 4px 6px);border:2px solid #92989e;border-radius:2px}
.case-laptop-trackpad{position:absolute;bottom:2px;left:39%;width:22%;height:11px;border:1px solid #a1a5aa;border-radius:2px}
.case-laptop-edge{height:7px;background:linear-gradient(90deg,#858a90,#e9ebed 12%,#b6bac0 50%,#f2f3f4 88%,#858a90);border-radius:0 0 55% 55%;position:relative}
.case-laptop-edge:before{content:'';position:absolute;top:0;left:44%;width:12%;height:3px;background:#81878e;border-radius:0 0 8px 8px}
@keyframes case-page-scroll{0%{transform:translateY(0);opacity:0}1%,2%{transform:translateY(0);opacity:1}92%,95%{transform:translateY(calc(-100% + 4.58716%));opacity:1}98%{transform:translateY(calc(-100% + 4.58716%));opacity:0}98.01%,100%{transform:translateY(0);opacity:0}}
@media(max-width:700px){.case-laptop{width:100%;margin:30px auto 40px}.case-laptop-lid{padding:8px 4px 5px;border-radius:9px 9px 2px 2px}.case-laptop-camera{top:2px;width:3px;height:3px}.case-laptop-deck{height:23px}.case-laptop-keyboard{height:10px}.case-laptop-trackpad{height:6px}.case-laptop-edge{height:4px}}
@media(prefers-reduced-motion:reduce){.case-laptop-screen img{animation:none}.case-laptop-screen{overflow-y:auto}}

/* Native scrolling takes over immediately on pointer, touch or keyboard input. */
.case-laptop-screen{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:none;cursor:grab;scroll-behavior:auto}
.case-laptop-screen::-webkit-scrollbar{display:none}
.case-laptop-screen:active{cursor:grabbing}
.case-laptop-screen:focus-visible{outline:2px solid #ff5722;outline-offset:3px}
.case-laptop-screen img,#project-dialog[open] .case-laptop-screen img{animation:none;transform:none;pointer-events:none;user-select:none}

.case-smartphone{width:100%;max-width:550px;margin:40px auto;background:transparent}.case-smartphone video{display:block;width:100%;height:auto;background:transparent}

.skill-team{margin:56px 0;padding:32px;border:1px solid #353535;border-radius:24px;background:#151515}.skill-team-label{font:12px monospace;letter-spacing:.16em;color:#aaa}.skill-team h3{font-size:clamp(25px,4vw,38px);line-height:1.15;margin:20px 0}.skill-team>p{color:#bbb;line-height:1.65}.skill-team-flow{padding:18px 0;border-block:1px solid #383838;font-size:14px}.skill-team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}.skill-team-grid article{padding:28px 0;border-bottom:1px solid #333}.skill-team-number{font:12px monospace;color:#ff805e}.skill-team-grid h4{font-size:20px;line-height:1.3;margin:12px 0}.skill-team-grid p{font-size:16px;line-height:1.65;color:#bbb;margin:0 0 18px}.skill-team-grid code{font-size:11px;color:#999;overflow-wrap:anywhere}@media(max-width:600px){.skill-team{padding:22px}.skill-team-grid{grid-template-columns:1fr}}

.skill-team{background:transparent;border:0;padding:0}.skill-accordion{background:#151515;border:1px solid #333333;border-radius:16px;overflow:hidden;margin-top:28px}.skill-row+.skill-row{border-top:1px solid #303030}.skill-row h4{margin:0}.skill-trigger{font:inherit;display:grid;grid-template-columns:minmax(160px, .85fr) 1.4fr 16px;align-items:center;gap:20px;width:100%;text-align:left;border:0;border-radius:0;background:transparent;color:#eee;padding:23px 24px;cursor:pointer;transition:background 220ms}.skill-trigger:hover,.skill-trigger[aria-expanded="true"]{background:#202020}.skill-trigger:focus-visible{outline:2px solid #ff805e;outline-offset:-4px}.skill-role{font:600 13px/1.5 monospace;background:none;padding:0;border-radius:0;width:fit-content}.skill-brief{color:#b8b8b8;font-size:14px;line-height:1.55;font-weight:400}.skill-plus{position:relative;width:12px;height:12px}.skill-plus:before,.skill-plus:after{content:"";position:absolute;background:#ff805e;left:0;top:5px;width:12px;height:2px;transition:transform 280ms}.skill-plus:after{transform:rotate(90deg)}.skill-trigger[aria-expanded="true"] .skill-plus:after{transform:rotate(0)}.skill-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 350ms ease,opacity 250ms ease}.skill-panel.is-open{grid-template-rows:1fr;opacity:1}.skill-panel>div{overflow:hidden;min-height:0;padding:0 24px}.skill-panel p{font-size:16px;line-height:1.7;color:#d0d0d0;margin:8px 0 16px}.skill-panel code{display:block;color:#ff9b7e;font-size:12px;padding-bottom:24px;overflow-wrap:anywhere}@media(max-width:600px){.skill-trigger{grid-template-columns:1fr 16px;gap:10px;padding:19px 18px}.skill-brief{grid-column:1;grid-row:2}.skill-plus{grid-column:2;grid-row:1/3}.skill-panel>div{padding-inline:18px}}@media(prefers-reduced-motion:reduce){.skill-panel,.skill-plus:after,.skill-trigger{transition:none}}

.skill-role{color:#ff9b7e}.skill-trigger[aria-expanded="true"] .skill-role{color:#ff805e}

.code-demo{margin:48px 0;padding:28px;background:#171717;border:1px solid #333;border-radius:20px}.code-demo-head>span{font:12px monospace;letter-spacing:.12em;color:#ff9b7e}.code-demo-head>p{font-size:28px;margin:14px 0 24px}.code-demo-tabs{display:flex;gap:6px;border-bottom:1px solid #363636;margin-bottom:28px;flex-wrap:wrap}.code-demo-tabs button{background:transparent;color:#bbb;border:0;border-bottom:2px solid transparent;border-radius:0;padding:14px 16px;cursor:pointer}.code-demo-tabs button[aria-selected=true]{color:#ff9b7e;border-bottom-color:#ff805e}.code-demo button:focus-visible,.code-demo pre:focus-visible{outline:2px solid #ff805e;outline-offset:3px}.code-demo [hidden]{display:none}.code-demo h4{font-size:22px;margin:0 0 12px}.code-demo p,.code-demo li{font-size:16px;line-height:1.65;color:#bbb}.demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.demo-actions button{border-radius:999px;padding:13px 20px;font-weight:600;cursor:pointer;border:1px solid transparent}.demo-primary{background:#1b229f;color:white}.demo-primary:disabled{opacity:.7;cursor:wait}.demo-secondary{background:#e6ebf0;color:#1b229f}.demo-ghost{background:transparent;color:#b1b7ff}.demo-status{min-height:28px}.code-demo .demo-note{font-size:13px;color:#999}.demo-rules-grid,.demo-audiences{display:grid;grid-template-columns:1fr 1fr;gap:24px}.demo-rules-grid h5{font-size:18px;margin:16px 0;color:#ff9b7e}.demo-rules-grid ul{padding-left:18px}.demo-rules-grid li{margin-bottom:12px}.demo-audiences{border-top:1px solid #333;margin-top:28px;padding-top:12px}.demo-audiences strong{color:#eee}.code-demo>a{display:inline-block;color:#ff9b7e;margin-top:16px}.demo-code-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:13px;color:#bbb}.demo-code-heading button{padding:10px 14px;background:#292929;border:1px solid #444;border-radius:8px;color:#eee;cursor:pointer}.code-demo pre{padding:22px;background:#0d0d0d;border-radius:12px;overflow:auto;color:#dedede;font:13px/1.8 monospace}.code-demo [role=tabpanel]{animation:demo-appear .22s ease}@keyframes demo-appear{from{opacity:0}to{opacity:1}}@media(max-width:600px){.code-demo{padding:20px}.demo-rules-grid,.demo-audiences{grid-template-columns:1fr}.code-demo-tabs button{padding:12px 9px}.demo-code-heading{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.code-demo [role=tabpanel]{animation:none}}

/* Embedded Aprova showcase: independent of the portfolio theme. */
.code-demo{--demo-bg:#f0f3f7;--demo-surface:#fff;--demo-text:#000c29;--demo-muted:#52647d;--demo-border:#dce3ec;--demo-accent:#1b229f;background:var(--demo-bg);color:var(--demo-text);border-color:var(--demo-border);font-family:Inter,Arial,sans-serif;padding:0 28px 28px;overflow:hidden}.code-demo.demo-dark{--demo-bg:#000c29;--demo-surface:#202b3c;--demo-text:#edf1f8;--demo-muted:#abb8ce;--demo-border:#354155;--demo-accent:#91aee8}.demo-vitrine-bar{display:flex;gap:16px;align-items:center;margin:0 -28px 28px;padding:16px 24px;background:var(--demo-surface);border-bottom:1px solid var(--demo-border)}.demo-vitrine-bar img{width:125px;height:auto}.demo-dark .demo-vitrine-bar img{background:transparent;padding:0;border-radius:0}.demo-vitrine-bar>span{font-size:12px;color:var(--demo-muted)}.demo-vitrine-bar button{margin-left:auto;flex-shrink:0;background:transparent;border:1px solid var(--demo-border);color:var(--demo-accent);padding:8px 12px;border-radius:999px;cursor:pointer}.code-demo-head>span{color:var(--demo-muted)}.code-demo .code-demo-head>p{font-size:32px;font-weight:700;color:var(--demo-text)}.code-demo h4,.demo-audiences strong{color:var(--demo-text)}.code-demo p,.code-demo li{color:var(--demo-muted)}.code-demo-tabs{border-color:var(--demo-border)}.code-demo-tabs button{color:var(--demo-muted)}.code-demo-tabs button[aria-selected=true]{color:var(--demo-accent);border-color:var(--demo-accent)}.code-demo [role=tabpanel]{background:var(--demo-surface);padding:24px;border:1px solid var(--demo-border);border-radius:16px}.code-demo .demo-ghost{color:var(--demo-accent)}.code-demo .demo-note{color:var(--demo-muted)}.demo-rules-grid h5,.code-demo>a{color:var(--demo-accent)}.demo-audiences{border-color:var(--demo-border)}.demo-code-heading{color:var(--demo-muted)}.demo-code-heading button{background:var(--demo-bg);color:var(--demo-accent);border-color:var(--demo-border)}.code-demo pre{background:var(--demo-bg);color:var(--demo-text);border:1px solid var(--demo-border)}.code-demo button:focus-visible,.code-demo pre:focus-visible{outline-color:var(--demo-accent)}@media(max-width:600px){.code-demo{padding:0 16px 20px}.demo-vitrine-bar{margin:0 -16px 24px;padding:14px 16px;gap:8px}.demo-vitrine-bar>span{display:none}.code-demo [role=tabpanel]{padding:18px}.demo-vitrine-bar img{width:110px}}
