@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Inter Fallback;src:local("Arial");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.00%;size-adjust:107.12%}.__className_f367f3{font-family:Inter,Inter Fallback;font-style:normal}.__variable_f367f3{--font-inter:"Inter","Inter Fallback"}@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/98848575513c9742-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7b0b24f36b1a6d0b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Outfit Fallback;src:local("Arial");ascent-override:100.18%;descent-override:26.05%;line-gap-override:0.00%;size-adjust:99.82%}.__className_ed3508{font-family:Outfit,Outfit Fallback;font-style:normal}.__variable_ed3508{--font-outfit:"Outfit","Outfit Fallback"}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.grid{display:grid}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.shadow{--tw-shadow:0 1px 3px 0 rgb(16 16 16/0.1),0 1px 2px -1px rgb(16 16 16/0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@font-face{font-family:Chintzy CPU BRK;src:url(../../../fonts/chintzy-cpu-brk.ttf) format("truetype");font-display:swap;font-style:normal;font-weight:400}:root{--bg:#101010;--bg-soft:#101010;--panel:#101010;--panel-2:#151217;--text:#f8f8f8;--muted:#aaa5ae;--line:rgba(255,255,255,0.11);--violet:#b100ff;--purple:#7d3cff;--indigo:#4d5cff;--page-x:clamp(1.25rem,4vw,4.75rem)}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}body{margin:0;overflow-x:hidden;background:radial-gradient(circle at 70% 18%,rgba(125,60,255,.055),transparent 25rem),var(--bg);color:var(--text);font-family:var(--font-inter),Arial,sans-serif;font-size:16px;font-weight:350;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body::-moz-selection{background:var(--violet);color:white}body::selection{background:var(--violet);color:white}a{text-decoration:none}a,button{color:inherit}button{font:inherit}img{display:block}:focus-visible{outline:2px solid #d84cff;outline-offset:4px}.grain-overlay{position:fixed;z-index:200;inset:0;pointer-events:none;opacity:.11;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E")}.nav-shell{position:fixed;z-index:100;top:1rem;left:50%;width:min(94%,1280px);min-height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:center;padding:.6rem .75rem .6rem 1.15rem;border:1px solid transparent;border-radius:999px;transform:translateX(-50%);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}.language-switcher{display:flex;align-items:center;gap:.2rem;justify-self:end;margin-left:0;margin-right:.65rem;padding:.22rem;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.025)}.language-switcher button{min-width:34px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.42);font-size:.56rem;font-weight:750;cursor:pointer;transition:.25s ease}.language-switcher button.is-active,.language-switcher button:hover{background:rgba(125,60,255,.2);color:white;box-shadow:inset 0 0 0 1px rgba(180,100,255,.25)}.nav-shell--scrolled{border-color:rgba(255,255,255,.1);background:rgba(16,16,16,.78);box-shadow:0 18px 55px rgba(16,16,16,.28);backdrop-filter:blur(18px)}.nav-monogram{display:inline-flex;align-items:center;height:46px;border:0;background:none;padding:0;line-height:0;justify-self:start}.nav-monogram img{height:52.9px;width:auto;display:block;position:relative;top:0.5px;left:-11px}.nav-links{display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);justify-self:center;font-size:.78rem;font-weight:600}.nav-links a{position:relative;color:rgba(255,255,255,.72);transition:color .25s ease}.nav-links a:after{position:absolute;right:0;bottom:-.3rem;left:0;height:1px;background:linear-gradient(90deg,var(--violet),var(--indigo));content:"";transform:scaleX(0);transform-origin:right;transition:transform .3s ease}.nav-links a:hover{color:white}.nav-links a:hover:after{transform:scaleX(1);transform-origin:left}.menu-button{display:none;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.08);cursor:pointer}.menu-button span{display:block;width:16px;height:1px;margin:5px auto;background:white}.hero{position:relative;min-height:max(660px,86svh);overflow:hidden;isolation:isolate;contain:paint;transform:translateZ(0);will-change:transform}.hero-vignette{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 41%,rgba(38,45,85,.08),transparent 26rem),radial-gradient(circle at 50% 50%,transparent 0,rgba(16,16,16,.08) 46%,rgba(16,16,16,.52) 100%),linear-gradient(180deg,rgba(16,16,16,.03),transparent 72%,#101010)}.hero--reference{background:radial-gradient(circle at 16% 7%,rgba(107,78,255,.035),transparent 26rem),radial-gradient(circle at 88% 85%,rgba(130,151,255,.035),transparent 30rem),#101010}.hero--reference:after{z-index:5;right:0;bottom:0;left:0;height:12%;background:linear-gradient(transparent,#101010);content:""}.hero--reference:after,.hero-waves{position:absolute;pointer-events:none}.hero-waves{z-index:1;inset:0;overflow:hidden}.hero-waves--reference:before{position:absolute;inset:-7% -8% -5%;background:linear-gradient(180deg,rgba(16,16,16,.06),rgba(16,16,16,.48) 88%),url(../../../assets/generated/hero-fluid.webp) top /cover no-repeat;content:"";opacity:.78;transform:scale(1.02);animation:hero-liquid-drift 18s ease-in-out infinite}.hero-wave{position:absolute;overflow:visible;will-change:transform;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(16,16,16,.18) 7%,#101010 24%,#101010 76%,rgba(16,16,16,.18) 93%,transparent);mask-image:linear-gradient(90deg,transparent,rgba(16,16,16,.18) 7%,#101010 24%,#101010 76%,rgba(16,16,16,.18) 93%,transparent)}.hero-wave--liquid{display:none;inset:-2% -4% -4%;width:108%;height:108%;opacity:0;animation:hero-liquid-drift 18s ease-in-out infinite;-webkit-mask-image:radial-gradient(circle at 50% 44%,#101010 0 58%,rgba(16,16,16,.72) 73%,transparent 100%);mask-image:radial-gradient(circle at 50% 44%,#101010 0 58%,rgba(16,16,16,.72) 73%,transparent 100%)}.hero-wave--top{top:-5%;left:-4%;width:min(74vw,980px);height:min(57vw,700px);animation:hero-wave-drift-top 14s ease-in-out infinite}.hero-wave--bottom{right:-4%;bottom:-12%;width:min(58vw,760px);height:min(68vw,850px);animation:hero-wave-drift-bottom 16s ease-in-out infinite}@keyframes hero-liquid-drift{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(.8%,-.55%,0) scale(1.012)}}@keyframes hero-wave-drift-top{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(1.2%,.8%,0) scale(1.015)}}@keyframes hero-wave-drift-bottom{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(-1.1%,-.7%,0) scale(1.012)}}.hero-content{position:relative;z-index:3;min-height:max(660px,86svh);display:grid;grid-template-rows:auto auto 1fr;align-content:start;justify-items:center;padding:clamp(7.2rem,12vh,9rem) var(--page-x) 3.5rem;text-align:center}.card-label,.eyebrow{color:rgba(255,255,255,.62);font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.chrome-title{position:relative;z-index:2;margin:0;width:min(47.03vw,682.73px);line-height:0;filter:drop-shadow(0 0 9px rgba(255,255,255,.08))}.chrome-title svg{display:block;width:100%;height:auto;overflow:visible}.chrome-title-text{font-family:Chintzy CPU BRK,sans-serif;font-size:178px;font-weight:400;letter-spacing:.03em;paint-order:stroke fill markers;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}.chrome-title-text--shadow{fill:#101010;opacity:1}.chrome-title-text--shine{mix-blend-mode:screen;opacity:.5;filter:blur(.18px)}.hero-identity{position:relative;z-index:3;display:flex;width:min(60.48vw,878px);align-items:center;align-self:start;flex-direction:column;margin-top:clamp(.35rem,.9vh,.75rem);margin-right:0;text-align:center}.hero-identity span{color:#8a8a8a;font-size:clamp(.54rem,.62vw,.7rem);font-weight:500;letter-spacing:.08em;line-height:1.2;text-align:center}.hero-identity strong{color:#fff;font-size:clamp(.72rem,.9vw,.98rem);font-weight:500;letter-spacing:.025em;line-height:1.3;text-align:center}.hero-sculpture{position:relative;z-index:2;width:clamp(120px,11vw,170px);margin-top:clamp(.85rem,2vh,1.9rem);filter:drop-shadow(0 18px 30px rgba(16,16,16,.72)) drop-shadow(0 0 18px rgba(107,78,255,.16));transform-origin:center}.hero-signature{display:flex;align-items:center;flex-direction:column;gap:1rem;margin-top:clamp(.05rem,.35vh,.35rem)}.hero-signature p{margin:0;color:rgba(255,255,255,.88);font-family:var(--font-outfit),sans-serif;font-size:clamp(.9rem,1.3vw,1.1rem);letter-spacing:-.015em}.hero-sculpture img{display:block;width:100%;height:auto;-o-object-fit:contain;object-fit:contain}.primary-button,.secondary-button{display:inline-flex;min-width:212px;min-height:52px;align-items:center;justify-content:center;gap:1rem;padding:.8rem 1.25rem;border-radius:999px;font-size:.82rem;font-weight:750;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.primary-button{border:1px solid rgba(216,76,255,.58);background:linear-gradient(135deg,rgba(177,0,255,.36),rgba(77,92,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 38px rgba(125,60,255,.18)}.primary-button:hover,.secondary-button:hover{transform:translateY(-3px)}.primary-button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 48px rgba(177,0,255,.28)}.primary-button span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:rgba(255,255,255,.13)}.primary-button .button-label{width:auto;height:auto;background:transparent}.section{position:relative;padding:clamp(6rem,11vw,10rem) var(--page-x)}.footer-inner,.section-inner{width:min(80%,1280px);margin:0 auto}.section-header{max-width:900px;margin-bottom:clamp(3rem,7vw,6rem)}.section-header--center{margin-right:auto;margin-left:auto;text-align:center}.footer h2,.section-header h2{max-width:980px;margin:.75rem 0 1.15rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(2.2rem,5.1vw,4.81rem);font-weight:850;letter-spacing:-.045em;line-height:.95}.section-header--center h2{margin-right:auto;margin-left:auto}.section-header p{max-width:660px;margin:0;color:var(--muted);font-size:clamp(1rem,1.6vw,1.16rem)}.section-header--center p{margin-right:auto;margin-left:auto}.about-section{padding-top:clamp(7rem,12vw,11rem)}.about-intro{margin-bottom:clamp(3rem,7vw,6.5rem)}.about-intro h2{max-width:1080px;margin:0;font-family:var(--font-outfit),sans-serif;font-size:clamp(2.2rem,5.1vw,4.81rem);font-weight:850;letter-spacing:-.055em;line-height:.9}.about-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,6vw,7rem);align-items:center}.portrait-card{position:relative;min-height:690px;overflow:hidden;border:1px solid rgba(180,100,255,.38);border-radius:2rem;background:#101010;box-shadow:0 40px 100px rgba(16,16,16,.42)}.portrait-card:after{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,16,16,.94));content:""}.portrait-card img{-o-object-fit:cover;object-fit:cover;transform:scale(1.7);filter:grayscale(1) contrast(1.08)}.portrait-overlay{position:absolute;right:1.4rem;bottom:1.3rem;left:1.4rem;z-index:2;display:flex;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.64);font-size:.68rem}.about-copy{display:flex;flex-direction:column;gap:1.25rem}.about-feature-row{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(320px,.82fr);align-items:start;gap:clamp(1rem,2.2vw,1.8rem);margin:0 0 clamp(2.5rem,6vw,5.5rem)}.about-feature-card{height:auto;min-height:0;margin-left:auto;align-self:start;border:1.5px solid rgba(180,100,255,.28)}.about-story-card{position:relative;isolation:isolate;overflow:hidden;width:100%;margin-bottom:clamp(1.1rem,2.6vw,1.8rem);padding:clamp(1.7rem,4vw,3rem);border:1.5px solid rgba(180,100,255,.28);border-radius:1.6rem;background:#101010;box-shadow:0 24px 70px rgba(16,16,16,.38),0 0 34px rgba(107,78,255,.08)}.about-story-card:after{position:absolute;z-index:1;inset:1.5px;border-radius:calc(1.6rem - 1.5px);background:radial-gradient(circle at 12% 8%,rgba(125,60,255,.12),transparent 42%),rgba(16,16,16,.97);content:""}.about-story-card p{position:relative;z-index:2;margin:0;color:rgba(255,255,255,.84);font-family:var(--font-outfit),sans-serif;font-size:clamp(.875rem,1.47vw,1.33rem);font-weight:350;letter-spacing:-.0225em;line-height:1.35;text-align:justify}.about-story-card p strong{margin-right:.06em}@property --snake-angle{syntax:"<angle>";initial-value:0deg;inherits:false}.about-story-card,.contact-qr,.digital-skills,.info-card,.mini-card,.project-aside,.service-card,.skill-panel{position:relative;isolation:isolate}.about-story-card:before,.contact-qr:before,.digital-skills:before,.info-card:before,.mini-card:before,.project-aside:before,.service-card:before,.skill-panel:before{position:absolute;z-index:7;inset:-1.5px;padding:2px;border-radius:inherit;background:conic-gradient(from var(--snake-angle),transparent 0deg 236deg,rgba(77,92,255,.24) 252deg,#6b4eff 276deg,#d9e2ff 294deg,#b100ff 312deg,transparent 332deg 1turn);content:"";pointer-events:none;-webkit-mask:linear-gradient(#101010 0 0) content-box,linear-gradient(#101010 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:text-box-snake 6.2s linear infinite;opacity:1}@keyframes text-box-snake{to{--snake-angle:360deg}}.digital-skills,.info-card,.mini-card,.skill-panel{border:1px solid rgba(180,100,255,.28);background:linear-gradient(145deg,rgba(125,60,255,.08),transparent 46%),rgba(16,16,16,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.info-card{padding:clamp(1.5rem,4vw,2.5rem);border-radius:1.4rem}.info-card h3{margin:.55rem 0 1rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.035em;line-height:1.18}.contact-strip p,.info-card p{margin:0;color:var(--muted)}.contact-strip{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about-feature-card h3{margin:.55rem 0 .85rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.035em;line-height:1.18}.about-feature-card p{margin:0;color:var(--muted)}.about-feature-card .card-label{display:block;margin-bottom:.25rem}.about-feature-card{padding:clamp(1.25rem,3vw,1.9rem)}.contact-strip div{display:flex;min-width:0;flex-direction:column}.contact-strip span{color:rgba(255,255,255,.42);font-size:.65rem;text-transform:uppercase}.contact-strip a,.contact-strip p{overflow:hidden;font-size:.82rem;text-overflow:ellipsis}.wave-divider{position:absolute;right:0;bottom:-4rem;left:0;z-index:3;height:250px;overflow:hidden;pointer-events:none}.wave-divider-fluid{position:absolute;inset:-65% -8% -55%;background:linear-gradient(90deg,transparent,rgba(16,16,16,.05) 12%,rgba(16,16,16,.1) 88%,transparent),url(../../../assets/generated/hero-fluid.webp) center 47% /cover no-repeat;filter:saturate(1.18) hue-rotate(9deg) contrast(1.08);opacity:.74;transform:rotate(-2deg) scale(1.08);transform-origin:center;-webkit-mask-image:linear-gradient(90deg,transparent,#101010 10%,#101010 90%,transparent),linear-gradient(180deg,transparent,#101010 28%,#101010 72%,transparent);mask-image:linear-gradient(90deg,transparent,#101010 10%,#101010 90%,transparent),linear-gradient(180deg,transparent,#101010 28%,#101010 72%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}.wave-divider-fluid--blue{filter:saturate(1.22) hue-rotate(18deg) contrast(1.12)}.wave-divider-fluid--lime{filter:saturate(1.14) hue-rotate(-4deg) contrast(1.06)}.wave-divider--flip{top:-4rem;bottom:auto;transform:rotate(180deg)}.wave-divider svg{position:relative;z-index:1;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(16,16,16,.42) 14%,#101010 32%,#101010 68%,rgba(16,16,16,.42) 86%,transparent);mask-image:linear-gradient(90deg,transparent,rgba(16,16,16,.42) 14%,#101010 32%,#101010 68%,rgba(16,16,16,.42) 86%,transparent)}.skills-section{background:radial-gradient(circle at 90% 22%,rgba(177,0,255,.09),transparent 26rem) ,#101010}.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.skill-panel{min-height:540px;padding:clamp(1.5rem,4vw,2.6rem);border-radius:1.4rem}.soft-list{margin-top:1.8rem}.soft-item{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--line)}.soft-item>span{color:#8b55ff;font-family:var(--font-outfit),sans-serif;font-size:.72rem;font-weight:700}.soft-item>span.soft-item-ico{width:1.7rem;height:1.7rem;margin-top:-.15rem;background-color:#fff;-webkit-mask:url(../../../solar_bug-bold.webp) center/contain no-repeat;mask:url(../../../solar_bug-bold.webp) center/contain no-repeat}.soft-item>span.soft-item-ico.soft-item-ico--calendar{-webkit-mask-image:url(../../../solar_calendar-add-bold.webp);mask-image:url(../../../solar_calendar-add-bold.webp)}.soft-item h3,.soft-item p{margin:0}.soft-item h3{font-size:.95rem}.soft-item p{margin-top:.25rem;color:var(--muted);font-size:.78rem}.hard-panel{display:flex;flex-direction:column}.tag-cloud{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}.tag-cloud span{padding:.74rem .95rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.03);font-family:var(--font-outfit),sans-serif;font-size:clamp(.8rem,1.5vw,1rem);font-weight:650;transition:border-color .25s ease,background .25s ease,transform .25s ease}.tag-cloud span:hover{border-color:rgba(216,76,255,.6);background:rgba(177,0,255,.1);transform:translateY(-3px)}.skill-note{max-width:430px;margin:auto 0 0;padding-top:2rem;color:var(--muted);font-size:.9rem}.digital-skills{margin-top:1.25rem;padding:clamp(1.5rem,4vw,2.6rem);border-radius:1.4rem}.digital-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem}.digital-heading p{max-width:480px;margin:0;color:var(--muted);font-size:.82rem;text-align:right}.tool-row{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:.7rem}.tool-item{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;gap:.5rem}.tool-item>span{display:grid;width:100%;aspect-ratio:1;place-items:center;border:1px solid rgba(125,60,255,.34);border-radius:.82rem;background:radial-gradient(circle at 30% 20%,rgba(216,76,255,.18),transparent 65%),#101010;color:#d9caff;font-family:var(--font-outfit),sans-serif;font-size:clamp(.66rem,1.3vw,.92rem);font-weight:800;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.tool-item:hover>span{border-color:rgba(216,76,255,.8);box-shadow:0 12px 35px rgba(125,60,255,.22);transform:translateY(-7px)}.tool-item small{max-width:100%;overflow:hidden;color:rgba(255,255,255,.42);font-size:.54rem;text-overflow:ellipsis;white-space:nowrap}.experience-section{overflow:hidden}.experience-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(3rem,8vw,8rem)}.experience-layout .section-header{position:sticky;top:9rem;align-self:start}.timeline{position:relative;grid-column:2}.timeline:before{position:absolute;top:0;bottom:0;left:.38rem;width:1px;background:linear-gradient(var(--violet),rgba(255,255,255,.08));content:""}.timeline-item{display:grid;grid-template-columns:1rem 7rem 1fr;gap:1.25rem;padding-bottom:3.75rem}.timeline-marker{position:relative;padding-top:.32rem}.timeline-marker span{position:relative;z-index:2;display:block;width:.8rem;height:.8rem;border:2px solid #bb72ff;border-radius:50%;background:#101010;box-shadow:0 0 20px rgba(177,0,255,.5)}.timeline-period{padding-top:.1rem;color:#9f7aff;font-size:.72rem;font-weight:700}.timeline-content{padding-bottom:2rem;border-bottom:1px solid var(--line)}.timeline-content span{color:var(--muted);font-size:.72rem}.timeline-content h3{margin:.35rem 0 .8rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.25rem,2.4vw,1.8rem);letter-spacing:-.035em}.timeline-content p{max-width:560px;margin:0;color:var(--muted);font-size:.84rem}.education-grid{grid-column:2;display:grid;grid-template-columns:1fr;gap:1.25rem}.mini-card{padding:1.6rem;border-radius:1.25rem}.mini-card h3{margin:1rem 0 .1rem;font-family:var(--font-outfit),sans-serif;font-size:1.25rem;letter-spacing:-.03em}.mini-card p,.mini-card small{margin:0;color:var(--muted);font-size:.78rem}.services-section{padding-top:clamp(8rem,14vw,13rem);background:radial-gradient(ellipse at 50% 50%,rgba(77,92,255,.1),transparent 35rem) ,#101010}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.service-card{cursor:pointer;position:relative;min-height:390px;overflow:hidden;padding:1.45rem;border:2px solid transparent;border-radius:1.5rem;background:linear-gradient(#101010,#101010) padding-box,conic-gradient(from var(--snake-angle),transparent 0deg 236deg,color-mix(in srgb,var(--service-color,#b100ff) 25%,transparent) 252deg,var(--service-color,#b100ff) 288deg,color-mix(in srgb,var(--service-color,#b100ff) 25%,transparent) 312deg,transparent 332deg 1turn) border-box;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;animation:text-box-snake 6.2s linear infinite}.service-card:hover{box-shadow:0 28px 70px rgba(16,16,16,.42);transform:translateY(-10px) scale(1.015)!important}.service-index{color:rgba(255,255,255,.36);font-size:.65rem}.service-orb{position:absolute;top:6rem;left:50%;width:150px;height:150px;border:1px solid color-mix(in srgb,var(--service-color) 65%,transparent);border-radius:50%;background:radial-gradient(circle at 36% 30%,white 0,var(--service-color) 5%,transparent 18%),radial-gradient(circle,color-mix(in srgb,var(--service-color) 32%,transparent),transparent 68%);box-shadow:inset -20px -18px 40px rgba(16,16,16,.8),0 0 60px color-mix(in srgb,var(--service-color) 28%,transparent);filter:saturate(1.2);transform:translateX(-50%);transition:transform .6s cubic-bezier(.22,1,.36,1)}.service-card:hover .service-orb{transform:translateX(-50%) translateY(-10px) scale(1.08)}.service-card h3{right:1.45rem;bottom:4.6rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.045em}.service-card h3,.service-card p{position:absolute;left:1.45rem;margin:0}.service-card p{right:3rem;bottom:1.45rem;color:var(--muted);font-size:.72rem;line-height:1.5}.service-arrow{position:absolute;right:1.45rem;bottom:1.45rem;font-size:1rem}.projects-section{padding-top:clamp(8rem,13vw,12rem)}.project-selector{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1.8rem,4vw,3.2rem) clamp(2.5rem,7vw,7rem);margin:0 auto clamp(3.5rem,7vw,5.5rem)}.project-selector button{position:relative;display:flex;min-width:0;flex:0 1 clamp(170px,22vw,260px);flex-direction:column;align-items:center;justify-content:center;padding:clamp(1rem,2.4vw,1.7rem) 1rem;overflow:hidden;border:0;border-radius:1rem;background:transparent;cursor:pointer;text-align:center;transition:transform .3s ease}.project-selector button:nth-child(1){order:1}.project-selector button:nth-child(2){order:2}.project-selector button:nth-child(3){order:3}.project-selector button:nth-child(4){order:4}.project-selector button:nth-child(5){order:5}.project-selector button:hover{transform:scale(1.096)}.project-selector button span{margin-bottom:.65rem;color:rgba(255,255,255,.36);font-size:.58rem}.project-selector button strong{overflow:hidden;font-family:var(--font-outfit),sans-serif;font-size:clamp(.85rem,1.4vw,1.05rem);letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}.project-selector button small{color:var(--muted);font-size:.61rem}.case-study{min-height:900px}.project-intro{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;column-gap:clamp(1.5rem,4vw,4.5rem);row-gap:clamp(1.5rem,3.5vw,2.75rem);align-items:end;margin-bottom:3rem}.project-intro>div:first-child{grid-column:1/-1;min-width:0}.project-intro h3{margin:.5rem 0 0;font-family:var(--font-outfit),sans-serif;font-size:clamp(2.8rem,6vw,6rem);letter-spacing:-.055em;line-height:.92;overflow-wrap:anywhere}.project-intro>p{grid-column:1;width:100%;margin:0;color:var(--muted);font-size:clamp(.9rem,1.45vw,1.05rem)}.project-meta{grid-column:2;align-self:end;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.project-meta div{display:flex;flex-direction:column;padding-top:.85rem;border-top:1px solid var(--line)}.aside-block>span,.project-meta span{color:rgba(255,255,255,.38);font-size:.61rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.project-meta strong{margin-top:.3rem;font-size:.78rem}.case-study-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:2rem;align-items:start}.project-carousel{min-width:0;outline:none}.embla{overflow:hidden}.embla__container{display:flex;margin-left:-.85rem;touch-action:pan-y pinch-zoom}.embla__slide{min-width:0;flex:0 0 88%;padding-left:.85rem}.project-slide{position:relative;aspect-ratio:16/10;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:1.55rem;background:#101010}.project-slide img{-o-object-fit:cover;object-fit:cover;transform:scale(1.025)}.slide-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,16,16,.75)),linear-gradient(90deg,rgba(16,16,16,.3),transparent 40%)}.project-slide figcaption{position:absolute;right:1.5rem;bottom:1.35rem;left:1.5rem;display:flex;flex-direction:column}.project-slide figcaption span{color:rgba(255,255,255,.6);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.project-slide figcaption strong{max-width:560px;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.35rem,3vw,2.75rem);letter-spacing:-.045em;line-height:1.05}.carousel-controls{display:flex;min-height:72px;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 0}.carousel-copy p{max-width:560px;margin:0;color:var(--muted);font-size:.76rem}.carousel-actions{display:flex;flex-shrink:0;align-items:center;gap:.75rem}.carousel-actions button{display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:50%;background:#101010;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s ease}.carousel-actions button:hover{border-color:rgba(216,76,255,.65);background:rgba(177,0,255,.1);transform:translateY(-2px)}.carousel-actions span{min-width:48px;color:rgba(255,255,255,.45);font-size:.62rem;text-align:center}.carousel-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.carousel-progress button{height:2px;padding:0;border:0;background:rgba(255,255,255,.12);cursor:pointer}.carousel-progress button.is-active{background:linear-gradient(90deg,var(--violet),var(--indigo))}.project-aside{position:sticky;top:7.5rem;overflow:hidden;border:1px solid rgba(180,100,255,.22);border-radius:1.4rem;background:#101010}.aside-block{display:flex;flex-direction:column;padding:1.25rem;border-bottom:1px solid var(--line)}.aside-block:last-child{border-bottom:0}.aside-block>p,.aside-block>strong{margin:.65rem 0 0;font-size:.75rem}.aside-block>strong+strong{margin-top:.15rem;color:var(--muted);font-weight:500}.color-row{display:flex;gap:.38rem;margin-top:.8rem}.color-row i{width:28px;height:28px;border:1px solid rgba(255,255,255,.14);border-radius:50%}.aside-block ul{margin:.7rem 0 0;padding:0;color:var(--muted);font-size:.72rem;list-style:none}.aside-block li{padding:.25rem 0}.aside-block li:before{margin-right:.5rem;color:#a873ff;content:"↳"}.showcase-section{color:#101010;background:#f1f1ee}.showcase-section .eyebrow,.showcase-section .section-header p{color:rgba(9,9,9,.58)}.showcase-list{display:flex;flex-direction:column;gap:1.5rem}.showcase-card{display:grid;min-height:600px;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);overflow:hidden;border-radius:2rem;color:white;background:#101010;box-shadow:0 40px 90px rgba(16,16,16,.16)}.showcase-card:nth-child(2n){grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr)}.showcase-card:nth-child(2n) .showcase-copy{grid-column:2;grid-row:1}.showcase-card:nth-child(2n) .showcase-image{grid-column:1;grid-row:1}.showcase-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(2rem,5vw,4.5rem);background:radial-gradient(circle at 0 0,rgba(77,158,138,.18),transparent 50%),#101010}.showcase-card--violet .showcase-copy{background:radial-gradient(circle at 0 0,rgba(177,0,255,.22),transparent 50%),#101010}.showcase-card--gold .showcase-copy{background:radial-gradient(circle at 0 0,rgba(255,212,0,.17),transparent 50%),#101010}.showcase-card--gold .showcase-image{background:#101010}.showcase-card--gold .showcase-image:before{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.1),rgba(16,16,16,.26));content:"";z-index:1;pointer-events:none}.showcase-card--gold .showcase-image img{filter:brightness(.92) contrast(1.02)}.showcase-copy>span{color:rgba(255,255,255,.5);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.showcase-copy h3{margin:.75rem 0 1rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(2.8rem,6vw,5.5rem);letter-spacing:-.05em;line-height:.9}.showcase-copy p{max-width:420px;margin:0;color:rgba(255,255,255,.6);font-size:.86rem}.showcase-number{position:absolute;top:1.25rem;right:1.5rem;color:rgba(255,255,255,.16);font-family:var(--font-outfit),sans-serif;font-size:4rem;font-weight:800}.showcase-image{position:relative;min-height:580px;overflow:hidden}.showcase-image:after{position:absolute;inset:0;border:1px solid rgba(255,255,255,.06);content:"";pointer-events:none}.showcase-image img{-o-object-fit:cover;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}.showcase-card:hover .showcase-image img{transform:scale(1.045)}.footer{position:relative;overflow:hidden;padding:clamp(8rem,16vw,14rem) var(--page-x) 2rem;text-align:center;background:radial-gradient(circle at 50% 38%,rgba(125,60,255,.18),transparent 28rem),#101010}.footer .wave-divider{top:-2rem;bottom:auto}.footer-inner{position:relative;z-index:2}.footer h2{margin:1rem auto 1.4rem;font-size:clamp(2.2rem,5.1vw,4.81rem)}.footer-inner>p{max-width:560px;margin:0 auto;color:var(--muted)}.footer-actions{display:flex;justify-content:center;gap:.75rem;margin-top:2.5rem}.contact-qr{display:inline-grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:center;margin-top:4rem;padding:1rem 1.4rem 1rem 1rem;border:1px solid rgba(180,100,255,.3);border-radius:1.4rem;background:rgba(16,16,16,.74);text-align:left}.qr-frame{display:grid;width:124px;height:124px;overflow:hidden;place-items:center;border-radius:.9rem;background:white}.qr-frame img{width:108px;height:108px}.contact-qr h3{margin:.35rem 0 .2rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:-.03em}.contact-qr p{margin:0;color:var(--muted);font-size:.72rem}.secondary-button{border:1px solid var(--line);background:rgba(255,255,255,.045)}.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:clamp(6rem,12vw,11rem);padding-top:1.2rem;border-top:1px solid var(--line);color:rgba(255,255,255,.42);font-size:.64rem;text-align:left}.footer-bottom a{text-align:center}.footer-bottom span:last-child{text-align:right}@media (max-width:1100px){.footer-inner,.section-inner{width:90%}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tool-row{grid-template-columns:repeat(6,minmax(0,1fr))}.tool-item>img.tool-img,.tool-item>span{width:80%;margin-inline:auto}.project-selector{gap:clamp(1.5rem,4vw,3rem) clamp(2rem,6vw,5rem)}.case-study-layout{grid-template-columns:minmax(0,1fr) 220px}}@media (max-width:820px){.footer-inner,.section-inner{width:100%}.about-feature-row{grid-template-columns:1fr;gap:1rem}.about-feature-card{margin-left:0}.about-story-profile{transform:translateX(calc(var(--page-x)*-.12));width:min(82%,448px);max-width:none}.nav-shell{top:.75rem;display:flex}.nav-links{position:absolute;top:calc(100% + .65rem);right:0;left:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:.5rem;border:1px solid var(--line);border-radius:1.4rem;background:rgba(16,16,16,.94);box-shadow:0 30px 70px rgba(16,16,16,.4);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(18px)}.language-switcher{margin-left:auto}.nav-links--open{opacity:1;pointer-events:auto;transform:translateY(0)}.nav-links a{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.07)}.nav-links a:last-child{border-bottom:0}.menu-button{display:block}.hero-content{min-height:max(640px,82svh);padding-top:clamp(7rem,12vh,8rem)}.hero-wave--top{left:-17%;width:105vw;height:78vw}.hero-wave--bottom{right:-18%;bottom:-6%;width:86vw;height:100vw}.hero-identity{width:min(58vw,560px);margin-right:0}.about-grid,.experience-layout,.skills-grid{grid-template-columns:1fr}.skill-panel{min-height:auto}.hard-panel{min-height:auto}.skill-note{margin-top:0}.portrait-card{min-height:580px}.experience-layout .section-header{position:static}.education-grid,.timeline{grid-column:1}.case-study-layout{display:flex;flex-direction:column-reverse}.project-aside{position:static;display:grid;width:100%;grid-template-columns:repeat(2,1fr)}.aside-block:nth-child(2){border-right:0}.aside-block{border-right:1px solid var(--line)}.showcase-card,.showcase-card:nth-child(2n){grid-template-columns:1fr}.showcase-card:nth-child(2n) .showcase-copy,.showcase-card:nth-child(2n) .showcase-image{grid-column:1}.showcase-card:nth-child(2n) .showcase-copy{grid-row:1}.showcase-card:nth-child(2n) .showcase-image{grid-row:2}.showcase-copy{min-height:360px}.showcase-image{min-height:520px}}@media (max-width:600px){:root{--page-x:1rem}.hero,.hero-content{min-height:640px}.hero-content{padding:clamp(6.8rem,13vh,8rem) .5rem 3rem}.hero-wave--top{top:0;left:-34%;width:142vw;height:105vw}.hero-wave--bottom{right:-40%;bottom:-8%;width:125vw;height:142vw}.chrome-title{width:min(71.54vw,402.8px)}.hero-identity{width:min(92vw,518px);margin-top:.75rem;margin-right:0}.hero-identity strong{font-size:.7rem}.hero-sculpture{width:132px;margin-top:clamp(1.2rem,4vh,2.1rem)}.hero-signature{margin-top:.25rem}.hero-signature .primary-button{min-width:212px;min-height:46px;padding:.65rem 1rem}.section{padding-top:5.5rem;padding-bottom:5.5rem}.about-intro h2,.footer h2,.section-header h2{font-size:clamp(2rem,10.2vw,3.2rem)}.portrait-card{min-height:470px;border-radius:1.3rem}.portrait-card img{transform:scale(1.6)}.portrait-overlay{flex-direction:column;gap:.15rem}.contact-strip{grid-template-columns:1fr}.skill-panel{min-height:auto}.hard-panel{min-height:420px}.digital-heading{align-items:flex-start;flex-direction:column;gap:.8rem}.digital-heading p{text-align:left}.tool-row{grid-template-columns:repeat(4,minmax(0,1fr))}.tool-item>img.tool-img,.tool-item>span{width:80%;margin-inline:auto}.timeline-item{grid-template-columns:1rem 1fr;gap:1rem}.timeline-period{grid-column:2;margin-bottom:-.6rem}.timeline-content{grid-column:2}.timeline-marker{grid-row:1/span 2}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.education-grid{grid-template-columns:1fr}.service-card{min-height:350px}.project-selector{gap:1.6rem 2rem}.project-selector button{flex-basis:clamp(135px,40vw,200px)}.project-intro{grid-template-columns:1fr;gap:1.25rem}.project-meta{grid-column:1}.project-aside{grid-template-columns:1fr}.aside-block{border-right:0}.embla__slide{flex-basis:94%}.project-slide{aspect-ratio:4/5;border-radius:1.2rem}.carousel-controls{align-items:flex-start;flex-direction:column;gap:.6rem}.carousel-actions{align-self:flex-end}.showcase-card{min-height:0;border-radius:1.3rem}.showcase-copy{min-height:330px}.showcase-image{min-height:430px}.footer-actions,.footer-bottom{display:flex;flex-direction:column}.footer-actions{align-items:stretch}.contact-qr{display:flex;flex-direction:column;align-items:center;text-align:center}.footer-bottom{gap:.5rem}.footer-bottom,.footer-bottom a,.footer-bottom span:last-child{text-align:center}}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.about-story-profile{position:relative;z-index:2;display:block;align-self:start;justify-self:start;width:clamp(376px,40.32vw,578px);max-width:none;aspect-ratio:auto;margin:0;object-fit:contain;object-position:left bottom;border:0;border-radius:0;box-shadow:none;background:transparent;transform:translateX(calc(var(--page-x)*-.58));mix-blend-mode:normal;opacity:1;filter:none}@media (max-width:1024px){.project-selector{flex-wrap:nowrap;justify-content:flex-start;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:clamp(1rem,3vw,1.5rem);margin:0 0 clamp(2.5rem,6vw,4rem);padding-bottom:.4rem}.project-selector::-webkit-scrollbar{display:none}.project-selector button{flex:0 0 80%;scroll-snap-align:center;min-height:auto}.project-selector .proj-logo{height:clamp(44px,9vw,64px)}}
.contact-form-shell{margin-top:2.5rem;text-align:left}.contact-form-header h3{margin:.45rem 0 .65rem;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.45rem,2.6vw,2.15rem);letter-spacing:-.035em;line-height:1.08}.contact-form-header p{max-width:60ch;margin:0;color:var(--muted)}.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.75rem}.contact-field{display:flex;flex-direction:column;gap:.55rem}.contact-field--full,.contact-form-actions{grid-column:1/-1}.contact-field label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}.contact-field input,.contact-field textarea{width:100%;border:1px solid rgba(180,100,255,.24);border-radius:1rem;background:rgba(255,255,255,.03);padding:.95rem 1rem;color:#fff;font:inherit;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;resize:vertical}.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(255,255,255,.38)}.contact-field input:focus,.contact-field textarea:focus{border-color:rgba(180,100,255,.55);box-shadow:0 0 0 4px rgba(125,60,255,.12);background:rgba(255,255,255,.045)}.contact-form-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.35rem}.contact-form-actions .primary-button{border:0;cursor:pointer}.contact-form-actions .primary-button span{border:0}.contact-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.contact-form-actions .primary-button:disabled{opacity:.6;cursor:progress;transform:none}.contact-form-status{grid-column:1/-1;margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}.contact-form-status:empty{display:none}.contact-form-status.is-ok{color:#dcc6ff}.contact-form-status.is-error{color:#ffa9c2}.contact-form-status a{color:inherit;text-decoration:underline;text-underline-offset:.2em}@media (max-width:820px){.contact-form{grid-template-columns:1fr}.contact-form-shell{margin-top:2rem}}

.wave-divider{display:none!important}.services-section{padding-top:clamp(6rem,11vw,10rem);background:radial-gradient(circle at 50% 18%,rgba(125,60,255,.08),transparent 26rem),#101010}.projects-section{padding-top:clamp(6rem,11vw,10rem);background:radial-gradient(circle at 50% 12%,rgba(77,92,255,.045),transparent 24rem),#101010}.footer{padding-top:clamp(6.5rem,12vw,11rem);background:radial-gradient(circle at 50% 18%,rgba(125,60,255,.12),transparent 24rem),#101010}.services-section:before,.projects-section:before,.footer:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.008),transparent 18%,transparent 82%,rgba(125,60,255,.02));opacity:.7}
.wave-divider{display:none!important}.services-section,.projects-section,.footer{padding-top:clamp(6rem,11vw,10rem)}body{background-color:#101010;background-image:radial-gradient(ellipse 72% 30% at 76% 22%,rgba(125,60,255,.055),transparent 72%),radial-gradient(ellipse 64% 24% at 18% 52%,rgba(77,92,255,.04),transparent 74%),radial-gradient(ellipse 70% 28% at 72% 82%,rgba(125,60,255,.05),transparent 76%);background-repeat:no-repeat;background-size:100% 100%;background-attachment:scroll}.about-section,.skills-section,.experience-section,.services-section,.projects-section,.footer{background-color:transparent!important;background-image:none!important}.services-section:before,.projects-section:before,.footer:before{display:none!important;content:none!important}
.about-story-card{border-width:1.5px}.about-story-card:before{inset:-1.5px;padding:2px}.about-story-card:after{inset:1.5px;border-radius:calc(1.6rem - 1.5px)}.about-story-card,.about-feature-card,.contact-qr,.digital-skills,.info-card,.mini-card,.project-aside,.service-card,.skill-panel,.showcase-card{max-width:100%;min-width:0}.about-story-card p,.about-feature-card p,.contact-qr p,.digital-skills p,.info-card p,.mini-card p,.project-aside p,.service-card p,.skill-panel p,.showcase-card p{overflow-wrap:anywhere}@media (max-width:1024px){.about-story-card,.about-feature-card,.digital-skills,.info-card,.mini-card,.project-aside,.skill-panel{padding:clamp(1.25rem,3vw,2rem)}.skills-grid,.service-grid{gap:1rem}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.service-card{min-height:340px}.project-aside{position:static}.contact-qr{width:min(100%,620px)}}@media (max-width:700px){.about-story-card,.about-feature-card,.digital-skills,.info-card,.mini-card,.project-aside,.skill-panel{padding:1.15rem;border-radius:1.15rem}.about-story-card:after{border-radius:calc(1.15rem - 1.5px)}.about-story-card p{font-size:clamp(1.05rem,5vw,1.35rem);line-height:1.45;text-align:left}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.skills-grid{grid-template-columns:1fr}.skill-panel{min-height:auto}.hard-panel{min-height:auto}.service-card{min-height:320px;padding:1.2rem}.service-card h3,.service-card p{left:1.2rem}.service-card h3{right:1.2rem;bottom:4.7rem}.service-card p{right:2.8rem;bottom:1.2rem}.service-arrow{right:1.2rem;bottom:1.2rem}.project-aside{display:block}.aside-block{width:100%;border-right:0}.contact-qr{width:100%;padding:1rem}.showcase-card{width:100%}}
.about-story-card{overflow:visible}.about-story-card:before{z-index:20;transform:translateZ(0)}.about-story-card:after{z-index:0}.about-story-card p{z-index:2}
.about-feature-row{position:relative;isolation:isolate}.about-story-profile{position:relative;z-index:2}.about-feature-side{position:relative;z-index:1;display:flex;min-width:0;align-items:stretch;flex-direction:column}.about-feature-card{position:relative;z-index:3}.about-pole-dancer{position:absolute;z-index:0;top:42%;right:0;display:block;width:min(42.56vw,621.6px);max-width:none;height:auto;margin:0;object-fit:contain;object-position:top right;opacity:.07;mix-blend-mode:screen;pointer-events:none;user-select:none;transform:translateX(32%) translate(90px,-17px)}@media (max-width:1024px){.about-pole-dancer{top:55%;width:min(49.28vw,504px);transform:translateX(25%) translate(90px,-17px)}}@media (max-width:820px){.about-feature-side{width:100%;min-height:0}.about-pole-dancer{top:28%;right:calc(var(--page-x)*-1);width:min(66.08vw,425.6px);transform:translateX(18%) translate(90px,-17px)}}@media (max-width:600px){.about-feature-side{min-height:0}.about-pole-dancer{top:34%;width:min(73.92vw,369.6px);transform:translateX(14%) translate(90px,-17px)}}
.tool-item>img.tool-img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:.82rem;transition:transform .3s ease,box-shadow .3s ease}.tool-item:hover>img.tool-img{box-shadow:0 12px 35px rgba(125,60,255,.22);transform:translateY(-7px)}@media (max-width:1100px){.tool-item>img.tool-img{width:80%;margin-inline:auto}}@media (max-width:600px){.hard-panel{min-height:auto}.skill-note{margin-top:0}}
/* ===== "Things I do!" — restyle services-section (titolo + razzo + pulsanti) ===== */
.services-section .eyebrow{display:none}
.services-section .section-header{margin-bottom:clamp(.5rem,2vw,1.25rem)}
.services-section .section-header h2{font-weight:850;letter-spacing:-.02em}

.services-section .service-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  grid-template-columns:none;gap:clamp(1rem,2.4vw,2rem);
  max-width:1180px;margin:clamp(2rem,6vw,4.5rem) auto 0;
}
.services-section .service-card{
  flex:1 1 230px;max-width:300px;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.3rem 1.5rem;border-radius:.95rem;overflow:visible;
  border:2.2px solid transparent;
  background:linear-gradient(180deg,rgba(28,20,42,.92),rgba(14,11,20,.94)) padding-box,linear-gradient(135deg,color-mix(in srgb,#fff 78%,var(--thing-color,#b100ff)) 0%,var(--thing-color,#b100ff) 34%,var(--thing-color,#b100ff) 52%,color-mix(in srgb,var(--thing-color,#b100ff) 55%,#000) 82%,color-mix(in srgb,var(--thing-color,#b100ff) 28%,#000) 100%) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.5),0 0 26px -8px var(--thing-color,#b100ff);
  cursor:pointer;transform:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.services-section .service-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.55),0 0 40px -4px var(--thing-color,#b100ff);
}
.services-section .service-card:focus-visible{outline:2px solid var(--thing-color,#b100ff);outline-offset:3px}
.services-section .service-card:before{display:none!important}
.services-section .service-index,
.services-section .service-orb,
.services-section .service-card p,
.services-section .service-arrow{display:none}
.services-section .service-card h3{
  position:static;inset:auto;right:auto;bottom:auto;left:auto;margin:0;
  white-space:pre-line;font-family:var(--font-outfit),sans-serif;
  font-size:clamp(.9rem,1.15vw,1.05rem);font-weight:800;letter-spacing:-.005em;
  line-height:1.28;color:#fff;
}
.services-section .service-card:nth-child(1){--thing-color:#b100ff}
.services-section .service-card:nth-child(2){--thing-color:#4d5cff}
.services-section .service-card:nth-child(3){--thing-color:#a8ff00}
.services-section .service-card:nth-child(4){--thing-color:#ffd400}.service-card:nth-child(1){--service-color:#D84CFF}.service-card:nth-child(2){--service-color:#4D5CFF}.service-card:nth-child(3){--service-color:#A8FF00}.service-card:nth-child(4){--service-color:#FFD400}
@media (max-width:760px){.services-section .service-card{flex:1 1 42%;max-width:none}}
@media (max-width:460px){.services-section .service-card{flex:1 1 100%}}

.services-section .section-header::after{content:"";display:block;width:clamp(3rem,9vw,5.5rem);height:clamp(3rem,9vw,5.5rem);margin:clamp(1rem,3.5vw,2.25rem) auto 0;background:url("../../../rocket-web.webp") center/contain no-repeat;filter:drop-shadow(0 16px 36px rgba(120,90,255,.5));transform:rotate(-6deg);transform-origin:center;will-change:transform;animation:thingsRocketFloat 4.2s ease-in-out infinite;}
@keyframes thingsRocketFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(-6deg)}}

.soft-list .soft-item:first-child>span{font-size:0;line-height:0;display:block;align-self:start;width:2rem;height:2rem;margin-top:-.1rem;background:url("../../../solar_atom-bold.webp") center/contain no-repeat;}.soft-list .soft-item:nth-child(3)>span{font-size:0;line-height:0;display:block;align-self:start;width:2rem;height:2rem;margin-top:-.1rem;background:url("../../../solar_command-bold.webp") center/contain no-repeat;}
.soft-list .soft-item:nth-child(4)>span{font-size:0;line-height:0;display:block;align-self:start;width:2rem;height:2rem;margin-top:-.1rem;background:url("../../../solar_link-square-bold.webp") center/contain no-repeat;}


/* === Timeline esperienze: orizzontale e scorrevole su tablet e mobile === */
/* Stesso linguaggio grafico del desktop (linea continua + pallini), ruotato in orizzontale: niente card */
@media (max-width:1024px){
  /* colonna singola: la timeline usa tutta la larghezza disponibile */
  .experience-layout{grid-template-columns:1fr}
  .experience-layout .section-header{position:static}
  .education-grid{grid-column:1}

  /* riga scorrevole verso destra */
  .timeline{
    --tl-gap:clamp(1.75rem,6vw,3rem);
    grid-column:1;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:start;
    gap:var(--tl-gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-padding-left:.5rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(177,0,255,.5) transparent;
    padding:1rem .25rem 1.4rem;
  }
  .timeline:before{display:none}            /* via la linea verticale del desktop */
  .timeline:focus-visible{outline:2px solid #bb72ff;outline-offset:4px;border-radius:8px}
  .timeline::-webkit-scrollbar{height:6px}
  .timeline::-webkit-scrollbar-thumb{background:rgba(177,0,255,.5);border-radius:3px}
  .timeline::-webkit-scrollbar-track{background:transparent}

  /* ogni anno è una colonna senza contenitore/card */
  .timeline-item{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    flex:0 0 auto;
    width:min(78vw,300px);
    padding:0;
    border:0;
    background:none;
    scroll-snap-align:start;
  }

  /* pallino sopra una linea orizzontale continua che collega gli anni (anno → anno) */
  .timeline-marker{
    position:relative;
    grid-row:auto;
    width:100%;
    height:.8rem;
    padding:0;
  }
  .timeline-marker:before{
    content:"";
    position:absolute;
    top:50%;
    left:.4rem;                              /* parte dal centro del pallino */
    width:calc(100% + var(--tl-gap));        /* arriva al centro del pallino successivo */
    height:1px;
    transform:translateY(-50%);
    background:linear-gradient(90deg,rgba(187,114,255,.55),rgba(187,114,255,.28));
  }
  .timeline-item:last-child .timeline-marker:before{width:calc(100% + 5rem);background:linear-gradient(90deg,rgba(187,114,255,.55) 0,rgba(187,114,255,.3) 45%,rgba(187,114,255,0) 100%)}
  .timeline-marker span{position:relative;z-index:2}

  .timeline-period{grid-column:auto;margin:0}
  .timeline-content{grid-column:auto;padding:0;border-bottom:0}
  .timeline-content p{max-width:none}
  .timeline-content .exp-bullets{margin:.7rem 0 0;padding-left:0}
  .timeline-content .exp-bullets li{color:var(--muted);font-size:.8rem;margin-bottom:.3rem}
}

/* barra di scorrimento della timeline: sempre visibile su tablet e mobile
   (la scrollbar nativa su touch sparisce) */
.tl-bar{display:none}
@media (max-width:1024px){
  .timeline{scrollbar-width:none;padding-bottom:.8rem;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.75rem),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 1.75rem),transparent)}
  .timeline.tl-end{-webkit-mask-image:none;mask-image:none}
  .timeline::-webkit-scrollbar{display:none}
  .tl-bar{display:flex;justify-content:center;align-items:center;grid-column:1;margin:.2rem 0 1.5rem;padding:0}
  .tl-bar[hidden]{display:none}
  .tl-bar-list{display:flex;align-items:center;gap:.5rem}
  .tl-bar-list button{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:rgba(255,255,255,.24);cursor:pointer;
    transition:width .3s ease,background .3s ease}
  .tl-bar-list button::before{content:"";position:absolute;inset:-12px -4px}
  .tl-bar-list button[aria-current="true"]{width:22px;border-radius:4px;background:#d84cff}
}

/* nessuno scatto di snap se l'utente preferisce ridurre il movimento */
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .timeline{scroll-snap-type:none;scroll-behavior:auto}
}

/* ===== "Non semplici loghi": l'header della sezione progetti resta sempre
   aperto sullo sfondo, mai racchiuso in un box/card. Su tablet e mobile non
   deve ereditare bordo, sfondo, ombra o cornice "text-box-snake" (neppure dai
   pseudo-elementi ::before/::after). ===== */
.projects-section > .section-inner > .section-header,
.projects-section > .section-inner > .section-header::before,
.projects-section > .section-inner > .section-header::after{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  animation:none !important;
}
.projects-section > .section-inner > .section-header::before,
.projects-section > .section-inner > .section-header::after{
  content:none !important;
}

/* Niente cornice animata "serpente" sul riquadro laterale dei progetti
   (.project-aside, sezione "Non semplici loghi"): resta solo il bordo statico. */
.project-aside::before{
  content:none !important;
  animation:none !important;
  display:none !important;
}
/* === Immagine profilo: centrata su mobile e tablet (<=820px), desktop invariato === */@media (max-width:820px){.about-feature-row .about-story-profile{justify-self:center;object-position:center bottom;transform:none}}

/* === Loghi cliccabili nella barra progetti (desktop/tablet/mobile) === */
.project-selector button .proj-logo{display:block;width:100%;height:clamp(40px,4.4vw,58px);object-fit:contain;object-position:center;opacity:.8;transition:opacity .3s ease,transform .3s ease}
.project-selector button:hover .proj-logo{opacity:1}
.project-selector button.has-logo{align-items:center;justify-content:center;padding-top:1.6rem;padding-bottom:1.6rem}
@media (max-width:820px){.project-selector button .proj-logo{height:clamp(34px,7vw,46px)}}
@media (max-width:600px){.project-selector button .proj-logo{height:38px}.project-selector button.has-logo{padding:1.1rem}}

.cover-waves-band{position:relative;z-index:5;width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);margin-block:clamp(-7rem,-5vw,-2rem);aspect-ratio:2500/1150;overflow:hidden;line-height:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%)}.cover-waves-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.7;margin:0}@media (max-width:1100px){.cover-waves-band{aspect-ratio:2500/1250}}@media (max-width:820px){.cover-waves-band{aspect-ratio:2500/1360;margin-block:clamp(-4.9375rem,calc(-4vw - 15px),-2.1875rem)}}@media (max-width:600px){.cover-waves-band{aspect-ratio:2500/1435;margin-block:clamp(-3.9375rem,calc(-3.5vw - 15px),-1.9375rem)}}

.about-section{padding-bottom:clamp(1.2rem,3.2vw,2rem)}
.skills-section{padding-top:clamp(1.2rem,3.2vw,2rem)}

/* Ballerina di pole: nascosta temporaneamente (markup e file "polerina 3.png" conservati).
   Per riattivarla: rimuovere questo blocco. */
.about-pole-dancer{display:none!important}

/* === Selettore progetti: carosello centrato su tablet/mobile (desktop invariato) === */
@media (max-width:1024px){
  .project-selector{
    margin-bottom:clamp(1.1rem,3vw,1.6rem);
    /* sfumatura ai bordi: comunica che il carosello continua */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  }
  /* spaziatori: permettono anche al primo e all'ultimo logo di arrivare al centro
     (un padding % non basta: ridurrebbe anche la larghezza dei bottoni) */
  .project-selector::before,
  .project-selector::after{content:"";flex:0 0 28%;align-self:stretch}
  .project-selector::before{order:-1}
  .project-selector::after{order:99}
  /* piu' stretti: si intravedono i loghi adiacenti */
  .project-selector button{flex:0 0 44%;scroll-snap-align:center;scroll-snap-stop:always;min-height:auto;overflow:visible}
  .project-selector button .proj-logo{opacity:.55;transform:scale(.68)}
  /* l'attivo prevale: circa il doppio dei vicini */
  .project-selector button[aria-selected="true"] .proj-logo,
  .project-selector button.is-active .proj-logo{opacity:1;transform:scale(1.28)}
  .project-selector button:hover{transform:none}

  /* indicatori: rendono esplicito quanti progetti ci sono e dove ci si trova */
  .project-dots{
    display:flex;justify-content:center;align-items:center;gap:.85rem;
    margin:0 0 clamp(2.2rem,5.5vw,3.2rem);padding:0;
  }
  .project-dots-list{display:flex;align-items:center;gap:.5rem}
  .project-dots-list button{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:rgba(255,255,255,.24);cursor:pointer;
    transition:width .3s ease,background .3s ease;
  }
  .project-dots-list button[aria-current="true"]{width:22px;border-radius:4px;background:#d84cff}
}
@media (min-width:1025px){
  .project-dots{display:none!important}
}

/* === 06 / 07 / 08: tre sezioni autonome ===================================
   07 (ADV & Social) e 08 (Print) tornano sul nero del resto del portfolio:
   background:transparent, cosi' mostrano esattamente lo sfondo del body
   (#101010) come le sezioni prima della 06 - nessun colore o gradiente
   aggiunto. Si staccano dalla 06 (Web & UX/UI), unica chiara del blocco. Ogni sezione ha il proprio header
   numerato, quindi il numero non sta piu' nella card.
   Nessun bordo/divisore fra 07 e 08: per ora lo stacco e' solo lo spazio. */
.showcase-section--dark{color:#fff;background:transparent}
.showcase-section--dark .eyebrow,
.showcase-section--dark .section-header p{color:rgba(255,255,255,.62)}
/* card e sezione condividono lo stesso nero: niente bordo, niente alone */
.showcase-section--dark .showcase-card{background:transparent;box-shadow:none}
.showcase-section--dark .showcase-copy{background:transparent}
/* le sezioni sono adiacenti: si evita il doppio "vuoto" fra una e l'altra */
.showcase-section--dark{padding-top:clamp(4.5rem,8vw,7rem);padding-bottom:clamp(4.5rem,8vw,7rem)}
.showcase-section--gold{padding-bottom:clamp(6rem,11vw,10rem)}
/* card 07: layout speculare (prima era :nth-child(2n), ora e' figlia unica) */
.showcase-card--flip{grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr)}
.showcase-card--flip .showcase-copy{grid-column:2;grid-row:1}
.showcase-card--flip .showcase-image{grid-column:1;grid-row:1}
@media (max-width:820px){
  .showcase-card--flip{grid-template-columns:1fr}
  .showcase-card--flip .showcase-copy{grid-column:1;grid-row:1}
  .showcase-card--flip .showcase-image{grid-column:1;grid-row:2}
}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem 1rem;margin-top:.85rem;font-size:.64rem;color:rgba(255,255,255,.42)}.footer-legal a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .25s ease}.footer-legal a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}.footer-legal .sep{opacity:.45}.footer-legal-note{letter-spacing:.1em;text-transform:uppercase;font-size:.56rem;opacity:.7}@media (max-width:640px){.footer-legal{gap:.3rem .75rem}.footer-legal .sep{display:none}}

/* ---------- Cool2Action · presentazione brand identity ---------- */
.c2a-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 3rem) 0 0;
}

/* Titolo del case study: logotipo al posto della scritta "Cool2Action",
   con credito al cliente (Sinessere) subito sotto. */
.c2a-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  margin: 0.5rem 0 0;
}

.c2a-title-logo {
  display: block;
  /* -25% rispetto a 46rem (Clout, Teraessence, Decimo Parallelo, Cool2Action; MIR escluso, vedi .mir3d) */
  width: min(100%, 34.5rem);
  height: auto;
}

.c2a-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  letter-spacing: 0.012em;
}

.c2a-credit-logo {
  display: block;
  width: auto;
  height: clamp(0.9rem, 1.6vw, 1.23rem);
  opacity: 0.94;
}

/* palette a piena larghezza: apre il case study subito sotto la descrizione */
.c2a-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.35rem);
}

.c2a-swatch {
  display: flex;
  align-items: flex-end;
  min-height: clamp(5.5rem, 10vw, 9rem);
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* mockup del PC: chiude il case study, centrato e non a tutta larghezza */
.c2a-laptop {
  width: min(100%, 62rem);
  margin-inline: auto;
  filter: drop-shadow(0 34px 55px rgba(0, 0, 0, 0.55));
}

.c2a-laptop img {
  display: block;
  width: 100%;
  height: auto;
}

.c2a-swatch--magenta {
  background: #d000d6;
  color: rgba(255, 255, 255, 0.92);
}

.c2a-swatch--yellow {
  background: #fff800;
  color: rgba(0, 0, 0, 0.78);
}

.c2a-swatch--black {
  background: #000;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.c2a-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.25rem);
  padding: 0 clamp(0rem, 7vw, 6.5rem);
}

.c2a-icons img {
  width: clamp(48px, 6.4vw, 92px);
  height: auto;
  border-radius: 0.35rem;
}

.c2a-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.c2a-marks img {
  display: block;
  width: 100%;
  max-width: 19rem;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 640px) {
  /* le tre varianti del naming restano affiancate anche su mobile */
  .c2a-marks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 2.4vw, 1.1rem);
  }

  .c2a-icons {
    gap: 1.1rem;
  }

  /* Cool2Action: le sei varianti del simbolo su due righe da tre */
  .c2a-showcase[data-project="cool2action"] .c2a-icons {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-evenly;
    justify-items: center;
    row-gap: 1.4rem;
    padding: 0;
  }

  /* i tre campioni restano in riga, solo piu' bassi */
  .c2a-swatch {
    min-height: 4.6rem;
    padding: 0.6rem 0.7rem;
    font-size: 0.66rem;
  }
}





/* --- 06 · Web & UX/UI : logo e iPhone sul nero, alone bianco ellittico dai telefoni in giu' ---
   Come nella tavola di progetto: la parte alta della sezione resta nera e il
   bianco parte sui telefoni dell'onboarding, con i bordi superiore e inferiore
   ad arco (angoli scuri) come la vecchia sfumatura radiale.
   L'alone e' diviso in due calotte ellittiche identiche, cosi' la forma non
   cambia quando si apre "Scopri di piu'":
   - calotta inferiore: fondo della sezione (bianco pieno + arco verso il nero
     ancorato al bordo inferiore);
   - calotta superiore: .vibly-onboarding::before (piu' sotto, con il resto di
     Vibly), un velo #101010 come il body che copre logo e iPhone e si apre ad
     arco sui telefoni, seguendone la posizione reale.
   Forma: ellisse larga --mint-rx e alta --mint-cap, bianca piena fino al 50%
   del raggio e poi sfumata fino al nero con una curva smootherstep (pendenza
   nulla a entrambi i capi: contatto col nero molto morbido). Con
   .5/1.05 = .476 < .50 i lati sono gia' pieni sul bordo di giunzione, quindi
   calotte e fascia centrale si uniscono senza stacchi.
   --mint-shift allontana entrambe le ellissi dai contenuti di quanto serve
   perche' la meta' della sfumatura resti dove era con la sfumatura piu' corta
   (65%-100%): in alto l'ellisse sale, in basso la sezione ha --mint-shift di
   padding in piu'. La calotta inferiore resta invece ancorata al bordo della
   sezione: la sfumatura deve arrivare al nero pieno esattamente li', altrimenti
   la sezione successiva la taglia con una riga netta.
   isolation: il ::before a z-index -1 resta sopra il fondo della sezione e
   sotto i contenuti; overflow clip: taglia la parte del ::before che sale
   oltre il bordo superiore. */
.showcase-section--mint{
--mint-fade:clamp(150px,21vw,360px);
--mint-pad:calc(var(--mint-fade) + clamp(2rem,4vw,4rem));
--mint-rx:105%;
--mint-cap:clamp(300px,64vw,960px);
--mint-shift:calc(var(--mint-cap)*.075);
isolation:isolate;
overflow:hidden;overflow:clip;
padding-top:clamp(4.5rem,8vw,7rem);
padding-bottom:calc(var(--mint-pad) + var(--mint-shift));
background:
radial-gradient(ellipse var(--mint-rx) 100% at 50% 0,
#f1f1ee 0,
#f1f1ee 50%,
rgba(241,241,238,0.999) 52.5%,
rgba(241,241,238,0.991) 55.0%,
rgba(241,241,238,0.973) 57.5%,
rgba(241,241,238,0.942) 60.0%,
rgba(241,241,238,0.896) 62.5%,
rgba(241,241,238,0.837) 65.0%,
rgba(241,241,238,0.765) 67.5%,
rgba(241,241,238,0.683) 70.0%,
rgba(241,241,238,0.593) 72.5%,
rgba(241,241,238,0.500) 75.0%,
rgba(241,241,238,0.407) 77.5%,
rgba(241,241,238,0.317) 80.0%,
rgba(241,241,238,0.235) 82.5%,
rgba(241,241,238,0.163) 85.0%,
rgba(241,241,238,0.104) 87.5%,
rgba(241,241,238,0.058) 90.0%,
rgba(241,241,238,0.027) 92.5%,
rgba(241,241,238,0.009) 95.0%,
rgba(241,241,238,0.001) 97.5%,
rgba(241,241,238,0) 100%) 50% 100%/100% var(--mint-cap) no-repeat,
linear-gradient(#f1f1ee,#f1f1ee) 50% 0/100% calc(100% - var(--mint-cap) + 2px) no-repeat}
@media (max-width:900px){
.showcase-section--mint{--mint-fade:clamp(110px,16vw,220px)}
}
.showcase-section--mint .eyebrow{color:rgba(9,9,9,.74)}


/* === Transizione hero -> sezioni successive: un solo sfondo continuo ======
   Prima: la hero chiudeva su #101010 pieno (pseudo :after alto 12% + vignette)
   mentre subito sotto ricompariva lo sfondo del body (nero + aloni viola):
   ne usciva una riga netta, con l'onda tagliata di colpo sul bordo.
   Ora: la hero non dipinge piu' nessun nero opaco (stesso #101010 del body per
   entrambe le zone) e le onde si dissolvono con una curva smoothstep fino a
   zero esattamente sul confine, cosi' non c'e' nulla da tagliare. Sotto, un
   alone morbido prosegue la luce dell'onda dentro la sezione "about". ===== */

/* 1 · la hero condivide lo sfondo del body: nessun fondo opaco proprio.
   Gli aloni sono in unita' relative all'altezza della hero e si spengono ben
   prima del bordo inferiore: se arrivassero al confine verrebbero tagliati di
   netto e riapparirebbe la riga. */
.hero--reference{
  background:
    radial-gradient(ellipse 34% 32% at 16% 12%,rgba(107,78,255,.035),transparent 72%),
    radial-gradient(ellipse 40% 36% at 88% 40%,rgba(130,151,255,.035),transparent 72%);
  background-color:transparent;
}
/* la banda nera in fondo alla hero non serve piu' */
.hero--reference:after{content:none}
/* la vignette non deve piu' schiacciare il fondo sul nero pieno */
.hero-vignette{
  background:radial-gradient(ellipse 46% 40% at 50% 36%,rgba(38,45,85,.08),transparent 74%);
}

/* 2 · le onde svaniscono con una coda esponenziale ==========================
   Il difetto che si vedeva prima non era un salto di colore ma un "ginocchio":
   la luce residua calava fino al nero e li' si fermava di colpo (derivata che
   passa da -0,05 livelli/px a zero in una ventina di pixel). Su un fondo cosi'
   scuro bastano 3-4 livelli su 255 perche' l'occhio legga quel cambio di
   pendenza come una riga orizzontale (bande di Mach), circa 130px sotto la
   fine della hero. La cura e' una coda in cui ogni tratto vale circa la meta'
   del precedente: la derivata non si azzera mai bruscamente, e l'ultimo
   gradino di luminosita' e' troppo piccolo per essere visto. ============== */
:root{
  /* dissolvenza delle onde dentro la hero: gli ultimi stop sono fittissimi
     cosi' al bordo inferiore non resta nulla da tagliare */
  --hero-waves-fade:linear-gradient(180deg,
    #000 0,#000 54%,
    rgba(0,0,0,.985) 58%,
    rgba(0,0,0,.94) 62%,
    rgba(0,0,0,.86) 66%,
    rgba(0,0,0,.755) 70%,
    rgba(0,0,0,.63) 74%,
    rgba(0,0,0,.5) 78%,
    rgba(0,0,0,.375) 82%,
    rgba(0,0,0,.265) 86%,
    rgba(0,0,0,.175) 89%,
    rgba(0,0,0,.115) 91.5%,
    rgba(0,0,0,.07) 94%,
    rgba(0,0,0,.04) 96%,
    rgba(0,0,0,.02) 97.5%,
    rgba(0,0,0,.008) 98.8%,
    rgba(0,0,0,.002) 99.6%,
    transparent 100%);
  /* campana dell'alone che prosegue sotto la hero: sale entro il bordo (16%)
     e poi scende dimezzandosi, cosi' la coda dura ~3 volte piu' a lungo di
     prima e si spegne in modo asintotico */
  --about-halo-fade:linear-gradient(180deg,
    transparent 0,
    rgba(0,0,0,.03) 2%,
    rgba(0,0,0,.11) 4%,
    rgba(0,0,0,.25) 6%,
    rgba(0,0,0,.44) 8%,
    rgba(0,0,0,.65) 10%,
    rgba(0,0,0,.84) 12%,
    rgba(0,0,0,.96) 14%,
    #000 16%,
    rgba(0,0,0,.97) 20%,
    rgba(0,0,0,.9) 25%,
    rgba(0,0,0,.8) 30%,
    rgba(0,0,0,.69) 35%,
    rgba(0,0,0,.58) 40%,
    rgba(0,0,0,.48) 45%,
    rgba(0,0,0,.39) 50%,
    rgba(0,0,0,.31) 55%,
    rgba(0,0,0,.245) 60%,
    rgba(0,0,0,.19) 65%,
    rgba(0,0,0,.145) 70%,
    rgba(0,0,0,.108) 75%,
    rgba(0,0,0,.078) 80%,
    rgba(0,0,0,.054) 84%,
    rgba(0,0,0,.036) 88%,
    rgba(0,0,0,.022) 91%,
    rgba(0,0,0,.013) 94%,
    rgba(0,0,0,.006) 96%,
    rgba(0,0,0,.002) 98%,
    transparent 100%);
}
.hero-waves{
  -webkit-mask-image:var(--hero-waves-fade);
  mask-image:var(--hero-waves-fade);
}
/* l'immagine fluida non deve piu' scurirsi verso il basso: ci pensa la maschera */
.hero-waves--reference:before{
  background:
    linear-gradient(180deg,rgba(16,16,16,.06),rgba(16,16,16,.14) 88%),
    url(../../../assets/generated/hero-fluid.webp) top /cover no-repeat;
}

/* 3 · la luce dell'onda prosegue sotto il confine, dentro la sezione "about".
   Il blocco e' molto piu' alto di prima (era 46vw, ora 92vw) e anche i singoli
   radiali hanno stop intermedi: un radial-gradient che va dritto a
   "transparent 70%" si spegne con un ginocchio proprio come faceva la
   maschera, quindi la coda va addolcita anche li'. */
.about-section{position:relative}
.about-section:before{
  content:"";
  position:absolute;
  z-index:0;
  top:clamp(-18rem,-13vw,-7rem);
  right:0;
  left:0;
  height:clamp(52rem,92vw,104rem);
  pointer-events:none;
  background:
    radial-gradient(ellipse 64% 36% at 88% 8%,
      rgba(107,78,255,.06) 0,rgba(107,78,255,.0416) 20%,rgba(107,78,255,.0248) 38%,
      rgba(107,78,255,.0128) 55%,rgba(107,78,255,.0052) 70%,rgba(107,78,255,.0016) 85%,transparent 100%),
    radial-gradient(ellipse 48% 28% at 96% 12%,
      rgba(77,120,255,.036) 0,rgba(77,120,255,.0248) 20%,rgba(77,120,255,.0144) 38%,
      rgba(77,120,255,.0076) 55%,rgba(77,120,255,.0032) 70%,rgba(77,120,255,.001) 85%,transparent 100%),
    radial-gradient(ellipse 108% 32% at 34% 5%,
      rgba(125,60,255,.0176) 0,rgba(125,60,255,.012) 22%,rgba(125,60,255,.0068) 40%,
      rgba(125,60,255,.0034) 58%,rgba(125,60,255,.0013) 74%,transparent 100%);
  -webkit-mask-image:var(--about-halo-fade);
  mask-image:var(--about-halo-fade);
}
.about-section>.section-inner{position:relative;z-index:1}


/* === BASE UNICA DEL SITO ==================================================
   Livello 0 (il piano piu' in basso, sotto qualunque altra cosa) = #101010
   pieno, identico in ogni pagina e in ogni sezione: e' il nero che c'era gia'
   nella maggior parte delle sezioni. Nessuna sezione dipinge piu' un proprio
   fondo: cio' che le distingue sta SOPRA questa base (le waves della hero, la
   sfumatura chiara della 06, gli aloni dedicati). Quando serve un'atmosfera
   diversa in un punto si aggiunge li' un livello sopra: questa base non
   cambia mai. ============================================================= */
html{background-color:#101010}
body{
  background-color:#101010;
  /* prima: tre aloni viola/indaco diffusi, dimensionati sull'intera altezza
     del documento, che facevano variare il nero da una zona all'altra */
  background-image:none;
}

/* nessun fondo proprio a livello di pagina/sezione: si vede sempre la base.
   Tocca solo background-color, cosi' gli overlay gia' dedicati (radiale della
   06, radiali tenui della hero) restano intatti. */
main,
.hero,
.hero--reference,
.section,
.about-section,
.skills-section,
.experience-section,
.services-section,
.projects-section,
.showcase-section,
.showcase-section--mint,
.showcase-section--violet,
.showcase-section--gold,
.showcase-section--dark,
.footer{background-color:transparent}

/* La 05 (.projects-section) aveva ancora una propria velatura (radiale viola in
   background-image, non toccata dalla base unica sopra perche' quella regola
   agisce solo sul background-color): bastano pochi livelli di scarto perche' una
   tavola piatta come quella di Teraessence disegni un rettangolo visibile. Si
   toglie anche questa: la sezione resta sul nero piatto del body. */
.projects-section{background-image:none}

/* =============================================================
   TITOLI — UNA SOLA MISURA, IN OGNI LINGUA
   Riferimento: "Hi there, welcome!" (.about-intro h2). La sua misura
   vive qui in --title-size e la leggono tutti i titoli del sito, cosi'
   non puo' piu' capitare che uno resti indietro quando la si cambia.
   Due valori come il riferimento: quello desktop e quello sotto i
   600px (dove i titoli passano a una scala piu' aggressiva).
   La misura dipende solo dalla larghezza della finestra, mai dal
   testo: identica in IT / EN / ES.
   I titoli dentro le card (timeline, service card, mini card, soft
   skill, QR) restano piccoli: sono sottotitoli, non titoli.
   ============================================================= */
:root{--title-size:clamp(2.2rem,5.1vw,4.81rem)}
@media (max-width:600px){:root{--title-size:clamp(2rem,10.2vw,3.2rem)}}

.about-intro h2,
.section-header h2,
.footer h2,
.project-intro h3,
.showcase-copy h3,
.contact-form-header h3{font-size:var(--title-size)}

/* stessa dimensione => stesse proporzioni, altrimenti i titoli su piu'
   righe respirano in modo diverso da una sezione all'altra (e da una
   lingua all'altra, dove le righe sono piu' o meno lunghe). */
.project-intro h3,
.showcase-copy h3,
.contact-form-header h3{line-height:.95;letter-spacing:-.045em}

/* === Case study: piu' respiro sopra l'occhiello + intro centrata ===========
   Vale per tutti i progetti del carosello (Cool2Action, Teraessence, Clout,
   Decimo Parallelo, MIR), perche' agisce sul contenitore .case-study e non
   sul singolo progetto.
   Lo stacco fra la barra dei loghi (o gli indicatori, sotto i 1024px) e
   l'occhiello ("Brand Identity", ...) raddoppia: il padding aggiunto qui
   e' pari al margine che gia' c'era sopra. */
.case-study{padding-top:clamp(3.5rem,7vw,5.5rem)}

@media (max-width:1024px){
  /* qui lo stacco lo danno i .project-dots: si raddoppia il loro margine */
  .case-study{padding-top:clamp(2.2rem,5.5vw,3.2rem)}

  /* tablet e mobile: occhiello, logotipo/titolo, credito al cliente,
     descrizione e meta tutti allineati al centro, in colonna singola */
  .project-intro{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .project-intro>div:first-child,
  .project-intro>p{grid-column:1;width:100%}
  .project-intro h3{text-align:center}

  /* logotipo Cool2Action + credito "Graphic design project for Sinessere" */
  .c2a-title{align-items:center}
  .c2a-credit{justify-content:center}

  /* meta (Year / Role) degli altri progetti */
  .project-meta{
    grid-column:1;
    justify-items:center;
    text-align:center;
  }
  .project-meta div{align-items:center}
}

/* ===== Cool2Action · respiro finale del case study =====
   Lo spazio nero fra l'ultima riga di logotipi e l'onda che chiude la sezione:
   ospita il pulsante "Scopri di piu'" e lascia decantare il progetto prima
   della sezione successiva. Il padding va sul .section-inner e non sulla
   section, altrimenti lo spazio finirebbe *sotto* la wave-divider. */
.projects-section > .section-inner{
  padding-bottom:clamp(4.5rem,10vw,9rem);
}
@media (max-width:720px){
  .projects-section > .section-inner{padding-bottom:clamp(3rem,9vw,5rem)}
}

/* === Intro del case study: piu' aria sopra l'occhiello e fra i tre elementi
   (occhiello / logotipo / credito al cliente) ============================== */

/* stacco sopra l'occhiello: ancora piu' ampio (circa +50% sul precedente) */
.case-study{padding-top:clamp(5.25rem,10.5vw,8.25rem)}
@media (max-width:1024px){
  .case-study{padding-top:clamp(3.3rem,8vw,4.8rem)}
}

/* padding e non margin: cosi' non collassa col wrapper che React inserisce
   attorno al blocco titolo. */
.c2a-title{
  margin-top:0;
  /* occhiello -> logotipo */
  padding-top:clamp(1.2rem,2.8vw,1.9rem);
  /* logotipo -> "Graphic design project for Sinessere" */
  gap:clamp(1.5rem,3.2vw,2.2rem);
  /* credito -> descrizione del progetto */
  padding-bottom:clamp(1.4rem,3.2vw,2.2rem);
}

/* ===== Logo Design & Brand Identity · struttura comune a tutti i case study =====
   La presentazione nata per Cool2Action (logotipo al posto del titolo, palette,
   riga dei simboli, riga dei logotipi, tendina con i materiali) vale ora per
   Teraessence, Clout, Decimo Parallelo e MIR: qui restano solo le differenze
   che i progetti si portano dietro (numero di colori, proporzioni dei marchi). */

/* la palette segue il numero di colori del progetto: 3 per Cool2Action,
   Decimo Parallelo e MIR, 4 per Teraessence e Clout */
.c2a-palette{grid-template-columns:repeat(var(--sw,3),minmax(0,1fr))}

/* il campione nero ha bisogno del bordo per staccarsi dal fondo della sezione */
/* il bordino ora e' comune a tutti i campioni (vedi in fondo) */
.c2a-swatch--edge{}

/* credito senza logo del cliente (Decimo Parallelo -> olidomama) */
.c2a-credit-name{color:#f3ecff;font-weight:650;letter-spacing:.02em}

/* i logotipi hanno proporzioni molto diverse fra loro (da 6.7:1 di Decimo
   Parallelo a 1.9:1 di MIR): oltre alla larghezza si limita l'altezza,
   altrimenti i lockup piu' compatti diventerebbero enormi. */
.c2a-title-logo{
  max-height:clamp(6.9rem,13.5vw,11.4rem);
  object-fit:contain;
  object-position:center;
}

/* il monogramma MIR e' molto piu' largo che alto: alla misura comune
   risulterebbe minuscolo accanto agli altri simboli */
.c2a-showcase[data-project="mir"] .c2a-icons img{width:clamp(96px,13vw,190px)}

/* logo Clout nell'intestazione del progetto: spostato 2px a sinistra */
#pannello-progetto:has(.c2a-showcase[data-project="clout"]) .c2a-title-logo{transform:translateX(-2px)}

@media (max-width:900px){
  /* su mobile il blocco titolo e' centrato: lo segue anche il logotipo */
  .c2a-title-logo{object-position:center}
}

@media (max-width:560px){
  /* con quattro colori i campioni restano comunque in riga */
  .c2a-palette{gap:.5rem}
  .c2a-swatch{padding:.55rem .45rem;font-size:.6rem}
}


/* ---------- 06 · Web & UX/UI : presentazione app Vibly ----------
   Layout a colonna centrata come la tavola di progetto: icona + logotipo,
   iPhone in prospettiva, tre schermate di onboarding a ventaglio, palette e
   carattere, poi le schermate dell'app su due righe (3 + 2).
   Lo sfondo resta quello della sezione (.showcase-section--mint): la
   sfumatura bianca radiale non viene toccata. */
@font-face{font-family:Helony;src:url(../../../vibly/Helony.otf) format("opentype");font-display:block}
.vibly-showcase{
--vibly-gap:clamp(5.5rem,12vw,10.5rem);
--vibly-toggle-gap:clamp(2.4rem,5vw,3.6rem);
display:flex;flex-direction:column;align-items:center;
gap:var(--vibly-gap);
width:100%;max-width:1040px;margin:0 auto;text-align:center}
.vibly-showcase img{display:block;max-width:100%;height:auto}

.vibly-brand{display:flex;flex-direction:column;align-items:center;gap:clamp(1.4rem,3.2vw,2.4rem)}
.vibly-icon{width:clamp(78px,10vw,120px)}
.vibly-wordmark{width:clamp(190px,26vw,300px);filter:drop-shadow(0 6px 18px rgba(16,16,16,.18))}

/* iPhone in prospettiva: sfuma in alto come nella tavola */
.vibly-device{width:clamp(191px,27.84vw,313px)}
.vibly-device img{width:100%;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%);
mask-image:linear-gradient(180deg,transparent 0,#000 42%)}

.vibly-phone{filter:drop-shadow(0 26px 40px rgba(16,16,16,.22))}

/* onboarding: centrale piu' grande e rialzato, laterali inclinati dietro */
.vibly-onboarding{position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%}
/* calotta superiore dell'alone della sezione 06 (vedi .showcase-section--mint):
   velo nero che parte ben sopra la sezione (tagliato dall'overflow) e si apre
   ad arco sui telefoni. Il bordo inferiore e' il centro dell'ellisse: e' messo
   in modo che al centro il bianco inizi (fine del nero pieno) 240pt piu' in alto
   dell'arco schiacciato di partenza, che iniziava a 22% dell'onboarding + 1.9
   volte la larghezza del telefono centrale sopra il fondo dei telefoni, piu'
   --mint-shift (la sfumatura ora e' piu' lunga: vedi .showcase-section--mint):
   bottom = inizio del bianco - altezza della calotta. Ai lati il nero scende
   piu' in basso, come nella vecchia sfumatura radiale. */
.vibly-onboarding::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
top:-5000px;bottom:calc(22% + clamp(96px,27vw,280px)*1.9 + 240pt + var(--mint-shift,0px) - var(--mint-cap,600px));left:50%;width:100vw;margin-left:-50vw;
background:
radial-gradient(ellipse var(--mint-rx,105%) 100% at 50% 100%,
rgba(16,16,16,0) 0,
rgba(16,16,16,0) 50%,
rgba(16,16,16,0.001) 52.5%,
rgba(16,16,16,0.009) 55.0%,
rgba(16,16,16,0.027) 57.5%,
rgba(16,16,16,0.058) 60.0%,
rgba(16,16,16,0.104) 62.5%,
rgba(16,16,16,0.163) 65.0%,
rgba(16,16,16,0.235) 67.5%,
rgba(16,16,16,0.317) 70.0%,
rgba(16,16,16,0.407) 72.5%,
rgba(16,16,16,0.500) 75.0%,
rgba(16,16,16,0.593) 77.5%,
rgba(16,16,16,0.683) 80.0%,
rgba(16,16,16,0.765) 82.5%,
rgba(16,16,16,0.837) 85.0%,
rgba(16,16,16,0.896) 87.5%,
rgba(16,16,16,0.942) 90.0%,
rgba(16,16,16,0.973) 92.5%,
rgba(16,16,16,0.991) 95.0%,
rgba(16,16,16,0.999) 97.5%,
#101010 100%) 50% 100%/100% var(--mint-cap,600px) no-repeat,
linear-gradient(#101010,#101010) 50% 0/100% calc(100% - var(--mint-cap,600px) + 2px) no-repeat}
.vibly-onboarding .vibly-phone{width:clamp(96px,27vw,280px)}
.vibly-phone--center{position:relative;z-index:2;margin-bottom:clamp(1.2rem,3vw,2.6rem)}
.vibly-phone--left,.vibly-phone--right{position:relative;z-index:1;width:clamp(84px,23.5vw,244px)!important}
.vibly-phone--left{transform:rotate(-7deg);margin-right:clamp(-2.6rem,-4vw,-1rem)}
.vibly-phone--right{transform:rotate(7deg);margin-left:clamp(-2.6rem,-4vw,-1rem)}

/* onboarding Vibly in loop: i tre telefoni ruotano come una giostra.
   Tutti e tre stanno nella stessa cella della griglia (larghezza del centrale) e
   si spostano solo con transform, cosi' l'altezza del blocco (e l'alone sopra,
   che dipende dal 22% dell'onboarding) resta identica alla versione statica.
   Il movimento (loop automatico e trascinamento col mouse/dito) lo fa lo script
   #vibly-onboarding-loop in index.html scrivendo transform e z-index inline;
   le regole qui sotto sono la composizione ferma, usata finche' lo script non parte. */
.vibly-onboarding{display:grid;justify-items:center;align-items:end;
--vo-lift:clamp(1.2rem,3vw,2.6rem);padding-bottom:var(--vo-lift);
cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.vibly-onboarding.is-dragging{cursor:grabbing}
.vibly-onboarding .vibly-phone,
.vibly-onboarding .vibly-phone--left,
.vibly-onboarding .vibly-phone--right{grid-area:1/1;width:clamp(96px,27vw,280px)!important;margin:0;
transform-origin:50% 100%;will-change:transform;backface-visibility:hidden;
-webkit-user-drag:none;pointer-events:none}
.vibly-onboarding .vibly-phone--left{transform:translate3d(-78.5%,var(--vo-lift),0) rotate(-7deg) scale(.87);z-index:1}
.vibly-onboarding .vibly-phone--right{transform:translate3d(78.5%,var(--vo-lift),0) rotate(7deg) scale(.87);z-index:1}
.vibly-onboarding .vibly-phone--center{z-index:2}

/* palette + carattere */
.vibly-identity{display:flex;flex-direction:column;align-items:center;gap:clamp(2rem,4.2vw,3.2rem);width:100%}
.vibly-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,2vw,1.4rem);width:min(100%,640px)}
.vibly-swatch{aspect-ratio:1/.72;max-width:100%;border-radius:clamp(.5rem,1.2vw,.85rem);padding:.55rem .6rem;text-align:left;font-size:clamp(.55rem,1.2vw,.72rem);font-weight:600;letter-spacing:.02em;box-shadow:0 14px 30px rgba(16,16,16,.12)}
.vibly-swatch--edge{box-shadow:0 14px 30px rgba(16,16,16,.12),inset 0 0 0 1px rgba(255,255,255,.14)}
.vibly-swatch span{display:block}
/* specimen Vibly: Helony con h, l, o, b a ricciolo (come il riferimento), resto base */
@font-face{font-family:"Helony Alt";src:url(../../../vibly/fonts/helony-alt.woff2) format("woff2");font-display:block}
.vibly-type{margin:0;font-family:"Helony Alt",Helony,Outfit,sans-serif;font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1;color:#3E8E7E;letter-spacing:.01em}
.vibly-type span{margin-left:.5em}
/* Vibly: specimen Magison (sostituisce "helony Abc"). Poster 640x322 come il
   riferimento: filetto alto largo quanto la parola, parola, didascalia in basso
   a sinistra, filetto in basso a destra. Tutto in cqi: stessa costruzione a
   ogni larghezza. Colori del progetto: #101010, #3E8E7E, #EDB64F, #F8F8F8. */
@font-face{font-family:Magison;src:url(../../../vibly/fonts/magison.woff2) format("woff2");font-display:block}
.vibly-specimen{--gold:#EDB64F;--l:0;--r:0;position:relative;container-type:inline-size;width:min(100%,640px);aspect-ratio:640/322;margin:20px 0 0;font-family:Magison,var(--font-outfit),sans-serif;text-align:left}
.vibly-spec-rule{position:absolute;height:max(2px,.3cqi);background:var(--gold)}
.vibly-spec-rule--top{top:9.4cqi;left:var(--l);right:var(--r)}
.vibly-spec-rule--bottom{bottom:8.3cqi;left:44.4cqi;right:var(--r)}
.vibly-spec-word{position:absolute;left:var(--l);top:calc(28.9cqi - .814em);margin:0 0 0 -.035em;font-size:14.87cqi;line-height:1;font-weight:400;letter-spacing:0;white-space:nowrap;color:#3E8E7E}
.vibly-spec-tag{position:absolute;left:var(--l);bottom:7.4cqi;margin:0;font-size:max(6.5px,1.36cqi);line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#AB8339}


/* schermate dell'app */
.vibly-screens{display:flex;justify-content:center;align-items:flex-start;gap:clamp(1rem,5vw,4.5rem);width:100%}
.vibly-screens .vibly-phone{width:clamp(96px,24vw,250px)}
.vibly-screens--three{gap:clamp(.8rem,6vw,5.5rem)}
.vibly-screens--two{gap:clamp(1rem,4vw,3rem)}

/* "Scopri di piu'": subito sotto i tre mockup dell'onboarding. Palette,
   carattere e schermate dell'app restano chiusi finche' non si clicca.
   La tendina si apre con grid-template-rows 0fr -> 1fr, cosi' segue da sola
   l'altezza del contenuto anche mentre le immagini arrivano. Stessa forma
   dei pulsanti di Digital Skills e Brand Identity, ma pieno nel verde di
   Vibly con testo bianco: si legge sia sul bianco sia, per la copia in fondo,
   sulla sfumatura scura della sezione. Il verde scende un filo verso il
   basso a destra per tenere il testo bianco leggibile (contrasto ~5:1).
   Etichette (IT/EN/ES) e apertura: script #vibly-more in index.html. */
.vibly-more{width:100%;margin-top:calc(var(--vibly-toggle-gap) - var(--vibly-gap))}
.vibly-more-toggle{display:flex;width:fit-content;max-width:100%;align-items:center;justify-content:center;gap:.6rem;margin:0 auto;min-height:52px;padding:.8rem calc(1.25rem + 10pt);border:1px solid rgba(62,142,126,.7);border-radius:999px;cursor:pointer;background:linear-gradient(135deg,rgba(62,142,126,.68),rgba(62,142,126,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 38px rgba(62,142,126,.22);color:#1F5C50;font-family:var(--font-outfit),sans-serif;font-size:.82rem;font-weight:750;letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.vibly-more-toggle:hover{transform:translateY(-3px);background:linear-gradient(135deg,rgba(62,142,126,.8),rgba(62,142,126,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 48px rgba(62,142,126,.34)}
.vibly-more-toggle:focus-visible{outline:2px solid rgba(62,142,126,.8);outline-offset:3px}
.vibly-more-ico{width:.56rem;height:.56rem;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .35s ease;opacity:.95}
.vibly-more.is-open .vibly-more-ico{margin-top:3px;transform:rotate(-135deg)}

.vibly-more-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.22,.61,.36,1)}
.vibly-more.is-open .vibly-more-panel{grid-template-rows:1fr}
/* chiusa: niente focus ne' lettura da screen reader (visibility), e
   visibility torna hidden solo a fine chiusura per non tagliare l'animazione */
.vibly-more-clip{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s linear .7s}
.vibly-more.is-open .vibly-more-clip{visibility:visible;opacity:1;transition:opacity .6s ease .1s,visibility 0s}
/* aperta e ferma: via il ritaglio, cosi' le ombre dei telefoni non vengono tagliate */
.vibly-more.is-settled .vibly-more-clip{overflow:visible}
.vibly-more-inner{display:flex;flex-direction:column;align-items:center;gap:var(--vibly-gap);padding-top:clamp(4rem,9vw,7.5rem)}
#vibly-more-panel .vibly-screens--two{margin-top:-55px}
/* la copia in fondo chiude la tendina: stessa distanza dai telefoni del pulsante in alto */
.vibly-more-toggle--bottom{margin-top:calc(var(--vibly-toggle-gap) - var(--vibly-gap))}
/* riapertura dopo un cambio di lingua (React ricrea la sezione): nessuna animazione */
.vibly-more.is-instant .vibly-more-panel,.vibly-more.is-instant .vibly-more-clip,.vibly-more.is-instant .vibly-more-ico{transition:none}
@media (prefers-reduced-motion:reduce){
.vibly-more-panel,.vibly-more-clip,.vibly-more-ico,.vibly-more-toggle{transition:none}
}

/* schermata login animata (iframe) */
.vibly-phone--anim{display:block;border:0;padding:0;height:auto;aspect-ratio:874/1807;background:transparent;overflow:hidden}


/* --- 06 · Web & UX/UI : Nuova Immagine (gestionale per barber shop) ---
   Secondo progetto della sezione, subito sotto il "Scopri di piu'" di Vibly
   (anche a tendina chiusa). Stessa impaginazione di Vibly: icona + logotipo,
   iPhone con l'icona nel dock, tre schermate a ventaglio e tendina con
   palette, carattere, logo e altre schermate. Riusa le classi .vibly-phone,
   .vibly-identity, .vibly-screens e .vibly-more; qui solo cio' che cambia.
   Nessun velo nero: sta tutto sul fondo chiaro della sezione. */
@font-face{font-family:"Poppins NI";src:url(../../../nuova-immagine/poppins-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins NI";src:url(../../../nuova-immagine/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins NI";src:url(../../../nuova-immagine/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins NI";src:url(../../../nuova-immagine/poppins-800.woff2) format("woff2");font-weight:800;font-display:swap}

.ni-showcase{
--vibly-gap:clamp(5.5rem,12vw,10.5rem);
--vibly-toggle-gap:clamp(2.4rem,5vw,3.6rem);
display:flex;flex-direction:column;align-items:center;
gap:var(--vibly-gap);
width:100%;max-width:1040px;margin:clamp(7rem,15vw,13rem) auto 0;text-align:center}

.ni-showcase img{display:block;max-width:100%;height:auto}

.ni-brand{display:flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,3.4vw,2.6rem)}

.ni-icon{width:clamp(84px,10.5vw,124px);filter:drop-shadow(0 14px 26px rgba(16,16,16,.28))}

/* le forbici sporgono a destra della scritta (testo 2-2606 su 2867 px, logo HD
   ripulito dall'alone): si sposta l'immagine di (2867/2 - 1304)/2867 = 4.52% della sua larghezza
   cosi' e' la scritta, non il PNG, a stare in asse con icona e iPhone */
.ni-wordmark{width:clamp(220px,30vw,340px);transform:translateX(4.52%)}

/* iPhone con l'icona nel dock: sfuma in alto come quello di Vibly */
.ni-device{width:clamp(270px,39vw,450px)}

.ni-device img{width:100%}

/* trio di Nuova Immagine: stessa giostra dell'onboarding di Vibly (vedi
   .vibly-onboarding e lo script #vibly-onboarding-loop in index.html, che
   muove entrambi). Queste regole sono la composizione ferma. */
.ni-trio{position:relative;width:100%;display:grid;justify-items:center;align-items:end;
--vo-lift:clamp(1.2rem,3vw,2.6rem);padding-bottom:var(--vo-lift);
cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ni-trio.is-dragging{cursor:grabbing}
.ni-trio .vibly-phone,
.ni-trio .vibly-phone--left,
.ni-trio .vibly-phone--right{grid-area:1/1;width:clamp(96px,27vw,280px)!important;margin:0;
transform-origin:50% 100%;will-change:transform;backface-visibility:hidden;
-webkit-user-drag:none;pointer-events:none}
.ni-trio .vibly-phone--left{transform:translate3d(-78.5%,var(--vo-lift),0) rotate(-7deg) scale(.87);z-index:1}
.ni-trio .vibly-phone--right{transform:translate3d(78.5%,var(--vo-lift),0) rotate(7deg) scale(.87);z-index:1}
.ni-trio .vibly-phone--center{z-index:2}

/* wireframe sotto le animazioni: quattro telefoni al tratto in ocra, senza ombra,
   piu' piccoli dei mockup e tutti in fila con lo stesso spazio (due per riga sotto i 560px) */
/* sopra e sotto la fila lo stesso spazio (--ni-wire-spazio): verso le animazioni
   e verso il pulsante "Hide". Il margine negativo toglie dal gap della tendina la
   differenza, come fa .vibly-more-toggle--bottom */
.ni-showcase,.vibly-showcase{--ni-wire-spazio:clamp(2.8rem,8vw,6rem)}
.ni-wire{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,3vw,2.6rem);width:100%;max-width:1040px;
margin-top:calc(var(--ni-wire-spazio) - var(--vibly-gap))}
.ni-wire + .vibly-more-toggle--bottom{margin-top:calc(var(--ni-wire-spazio) - var(--vibly-gap))}
/* i tre telefoni animati occupano la stessa larghezza della fila dei wireframe:
   il primo e l'ultimo cadono sui bordi del primo e dell'ultimo wireframe */
@media (min-width:561px){#ni-more-panel .vibly-screens--three,#vibly-more-panel .vibly-screens--three{max-width:1040px;justify-content:space-between;gap:0}}
.ni-wire .vibly-phone{width:100%!important;filter:none}
@media (max-width:560px){.ni-wire{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px;row-gap:1.6rem}}

/* carattere dell'app al posto di Helony: Poppins in quattro pesi, impaginato
   come un campione tipografico (Light e Regular a tutta riga, Bold ed Extra Bold
   nella colonna di destra, pesi e alfabeti nella colonna di sinistra e in fondo) */
/* Il campione e' largo 336 (70% dei 480 di prima, piu' stretto della palette),
   i filetti invece vanno da bordo a bordo dello schermo: sono ::before/::after
   che escono di 100vw per lato e vengono tagliati dalla sezione (overflow:clip).
   Le misure sono in cqi (1/100 della larghezza del campione), cosi' la
   composizione scala identica. I testi piccoli (colonna sinistra, pangramma,
   alfabeti) sono gia' al minimo leggibile (clamp con soglia 11px): restano
   invariati anche se il campione si rimpicciolisce.
   Il campione scende un po' rispetto alla palette, cosi' da restare equidistante
   dalla palette sopra e dai telefoni sotto: alla dimensione precedente lo spazio
   sopra (gap interno di .vibly-identity) era piu' stretto di quello sotto (gap
   di .ni-showcase verso .vibly-screens); margin-top e margin-bottom negativo
   (--sposta) spostano meta' della differenza dal basso all'alto, senza muovere i
   telefoni. Testi piccoli a 12px fissi: restano leggibili anche col campione piccolo.
   line-height .8: la cima delle maiuscole cade a .05em dal bordo della riga e la
   linea di base a .75em; i padding in em fissano la distanza dai filetti (in
   basso .27em nelle righe con la g, che scende di .27em). */
.ni-specimen{--ink:#1A1712;--rule:rgba(26,23,18,.12);--side:30%;
position:relative;container-type:inline-size;width:min(100%,336px);--sposta:calc((var(--vibly-gap) - clamp(2rem,4.2vw,3.2rem)) / 2);margin:var(--sposta) 0 calc(-1 * var(--sposta));text-align:left;color:var(--ink);font-family:"Poppins NI",var(--font-outfit),sans-serif}
.ni-spec-row{position:relative;display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.ni-specimen::before,.ni-spec-row::after,.ni-spec-foot::after{content:"";position:absolute;left:-100vw;right:-100vw;height:1px;background:var(--rule);pointer-events:none}
.ni-specimen::before{top:0}
.ni-spec-row::after,.ni-spec-foot::after{bottom:0}
.ni-spec-word{display:block;margin:0;font-size:22.4cqi;line-height:.8;letter-spacing:-.025em;padding:.08em 0 .27em;white-space:nowrap}
.ni-spec-row--full .ni-spec-word{grid-column:1/-1}
/* allineamenti: il margine negativo toglie lo spazio laterale del glifo, cosi' il
   segno di L, R, B ed E cade sul filo sinistro dei testi piccoli; le misure di
   Bold ed ExtraBold sono calcolate perche' "Bold" e "Extra" finiscano entrambe sul
   filo destro (inchiostro Bold 2.071em, Extra 2.512em, colonna 70cqi) */
.ni-spec-word--big{grid-column:2;font-size:var(--big);padding:.06em 0 .06em}
.ni-spec-w300{font-weight:300;margin-left:-.08em}
.ni-spec-w400{font-weight:400;color:#5B4311;margin-left:-.077em}
.ni-spec-w700{font-weight:700;color:#9C6F10;margin-left:-.062em}
.ni-spec-w800{font-weight:800;color:#FCB84D;margin-left:-.056em}

/* colonna di sinistra: nome e pesi, con la cima allineata alle maiuscole grandi */
.ni-spec-row:has(.ni-spec-w700){--big:33.8cqi}
.ni-spec-row:has(.ni-spec-w800){--big:27.87cqi}
.ni-spec-side{grid-column:1;padding:calc(var(--big,27cqi) * .11 - .3em) 1em 0 0;font-size:12px;line-height:1.3}
.ni-spec-logo{display:inline-flex;align-items:center;gap:.45em;font-weight:800;font-size:1.2em;letter-spacing:-.01em}
.ni-spec-logo i{font-style:normal;font-weight:700;font-size:.56em;letter-spacing:.02em;padding:.18em .55em .12em;border:1px solid currentColor;border-radius:999px}
.ni-spec-weights{margin:0;padding:0;list-style:none}
.ni-spec-weights li:nth-child(1){font-weight:300}
.ni-spec-weights li:nth-child(2){font-weight:400}
.ni-spec-weights li:nth-child(3){font-weight:700}
.ni-spec-weights li:nth-child(4){font-weight:800}

/* piede: testo di prova e alfabeti nei quattro pesi */
.ni-spec-foot{position:relative;display:grid;grid-template-columns:var(--side) minmax(0,1fr);padding:clamp(1rem,3.4cqi,1.5rem) 0 clamp(1.2rem,4.4cqi,1.9rem);font-size:12px;line-height:1.3}
.ni-spec-pangram{margin:0;padding-right:1.4em}
.ni-spec-glyphs{display:grid;grid-template-columns:1fr 1fr;gap:1.3em 1.2em;font-size:12px;line-height:1.22;letter-spacing:.01em}
.ni-spec-glyphs p{margin:0}
.ni-spec-glyphs p:nth-child(1){font-weight:300}
.ni-spec-glyphs p:nth-child(2){font-weight:400}
.ni-spec-glyphs p:nth-child(3){font-weight:700}
.ni-spec-glyphs p:nth-child(4){font-weight:800}

@container (max-width:440px){
.ni-spec-weights .ni-spec-fam{display:none}
.ni-spec-foot{grid-template-columns:1fr;row-gap:1.1rem}
.ni-spec-pangram{padding-right:0}
}

/* La tendina taglia con overflow:hidden finche' non e' ferma, e i filetti si
   fermerebbero ai suoi bordi per poi allungarsi di colpo a fine apertura: qui il
   taglio e' un clip-path che ritaglia solo in verticale. min-width:0 serve perche'
   senza overflow:hidden la tendina (elemento di griglia) si allargherebbe quanto il
   contenuto e sborderebbe solo a destra, spostando tutto fuori asse. */
.vibly-more--ni .vibly-more-clip{min-width:0;overflow:visible;clip-path:inset(0 -100vw)}
.vibly-more--ni.is-settled .vibly-more-clip{clip-path:none}

/* logo in negativo su nero, come la tavola del brand */




/* pulsante: nero dell'app con bordo oro al posto del verde di Vibly */
.vibly-more--ni .vibly-more-toggle{background:linear-gradient(135deg,rgba(184,114,60,.68),rgba(201,150,60,.2));border-color:rgba(184,114,60,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 38px rgba(184,114,60,.22);color:#7A4519}

.vibly-more--ni .vibly-more-toggle:hover{background:linear-gradient(135deg,rgba(184,114,60,.8),rgba(201,150,60,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 48px rgba(184,114,60,.34)}

.vibly-more--ni .vibly-more-toggle:focus-visible{outline-color:rgba(184,114,60,.8)}
.vibly-more--mir .vibly-more-toggle{background:linear-gradient(135deg,rgba(125,60,255,.68),rgba(125,60,255,.2));border-color:rgba(125,60,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 38px rgba(125,60,255,.22);color:#4A1FB0}
.vibly-more--mir .vibly-more-toggle:hover{background:linear-gradient(135deg,rgba(125,60,255,.8),rgba(125,60,255,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 48px rgba(125,60,255,.34)}
.vibly-more--mir .vibly-more-toggle:focus-visible{outline-color:rgba(125,60,255,.8)}


/* ===== Logo Design & Brand Identity · presentazioni con le immagini originali =====
   Teraessence, Clout e Decimo Parallelo mostrano sopra "Discover more" la
   presentazione composta con i file originali del progetto (campo `board` di
   BRAND nel bundle), com'era impostata ad agosto: al posto di palette, simboli e
   logotipi di default. Le copie stanno in <BRAND>/board/ con gli stessi nomi dei
   file originali (Teraessence/, clout/, decimo parallelo/).
   Posizioni e misure vengono dalle tavole originali del portfolio, larghe 2000:
   1u = 100vw/2000, quindi la composizione scala identica a ogni larghezza e va da
   bordo a bordo dello schermo. --z ingrandisce una riga su schermi piccoli: la
   scena resta centrata e i lati escono dallo schermo. */
.bb{
  --u:calc(100vw / 2000);
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:clip;
  line-height:0;
}
.bb-row{
  --z:1;
  position:relative;
  height:calc(var(--h) * var(--u) * var(--z));
  margin-top:calc(var(--mt, 0) * var(--u) * var(--z));
}
.bb-stage{
  position:absolute;
  top:0;
  bottom:0;
  left:calc(50% - 1000 * var(--u) * var(--z));
  width:calc(2000 * var(--u) * var(--z));
}
.bb-el{
  position:absolute;
  display:block;
  left:calc(var(--x) * var(--u) * var(--z));
  top:calc(var(--y) * var(--u) * var(--z));
  width:calc(var(--w) * var(--u) * var(--z));
  max-width:none;
  height:auto;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* le tavole fotografiche finiscono su un bordo chiaro: si chiudono sul nero
   della pagina con un velo dipinto (una mask a gradiente farebbe bande) */
.bb-plate .bb-stage:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:calc(var(--fade, 300) * var(--u) * var(--z));
  background:linear-gradient(180deg,
    rgba(16,16,16,0) 0,
    rgba(16,16,16,.02) 10%,
    rgba(16,16,16,.06) 20%,
    rgba(16,16,16,.13) 30%,
    rgba(16,16,16,.23) 40%,
    rgba(16,16,16,.36) 50%,
    rgba(16,16,16,.51) 60%,
    rgba(16,16,16,.67) 70%,
    rgba(16,16,16,.82) 80%,
    rgba(16,16,16,.93) 90%,
    rgba(16,16,16,.98) 96%,
    #101010 100%);
  pointer-events:none;
}
.bb--dp .bb-plate{--fade:460}
/* Teraessence: la tavola originale si spegne dal 45% dell'altezza (misurato sulla
   pagina del portfolio: 0,91 al 50%, 0,58 al 60%, 0,31 al 70%, nero dall'85%) */
.bb--tera .bb-plate .bb-stage:after{
  height:calc(609 * var(--u) * var(--z));
  background:linear-gradient(180deg,
    rgba(16,16,16,0) 0,
    rgba(16,16,16,.09) 9.1%,
    rgba(16,16,16,.26) 18.2%,
    rgba(16,16,16,.42) 27.3%,
    rgba(16,16,16,.56) 36.4%,
    rgba(16,16,16,.69) 45.5%,
    rgba(16,16,16,.82) 54.5%,
    rgba(16,16,16,.935) 63.6%,
    #101010 72.7%);
}
/* campioni colore sopra la tavola tipografica */
.bb-sw{
  position:absolute;
  left:calc(var(--x) * var(--u) * var(--z));
  top:calc(var(--y) * var(--u) * var(--z));
  width:calc(var(--w) * var(--u) * var(--z));
  height:calc(var(--hh) * var(--u) * var(--z));
  border-radius:calc(9 * var(--u) * var(--z));
  box-shadow:
    inset 0 calc(2 * var(--u) * var(--z)) calc(3 * var(--u) * var(--z)) rgba(255,255,255,.32),
    inset 0 0 0 calc(1.5 * var(--u) * var(--z)) rgba(255,255,255,.14);
  line-height:1;
}
.bb-sw span{
  position:absolute;
  top:calc(15 * var(--u) * var(--z));
  font-family:var(--font-outfit),sans-serif;
  font-size:max(7px, calc(23 * var(--u) * var(--z)));
  font-weight:400;
  letter-spacing:.01em;
  white-space:nowrap;
}
.bb-sw--l span{left:calc(16 * var(--u) * var(--z))}
.bb-sw--r span{right:calc(17 * var(--u) * var(--z))}
.bb-sw--c span{left:50%;transform:translateX(-50%)}
/* Decimo Parallelo: la pianta si spegne scendendo, come nella tavola; il
   simbolo con le guide sta sopra la foto, che gli scorre sotto (--mt) */
.bb--dp .bb-plan{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 24%,rgba(0,0,0,.72) 33%,rgba(0,0,0,.5) 41%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.04) 64%,transparent 68%);
  mask-image:linear-gradient(180deg,#000 0,#000 24%,rgba(0,0,0,.72) 33%,rgba(0,0,0,.5) 41%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.04) 64%,transparent 68%);
}
.bb--dp .bb-symbol{z-index:2}
.bb--dp .bb-plate{z-index:1}
/* ===== Decimo Parallelo su desktop · scheda piu' corta =====
   Richiesta del 25/09/2026: tolto il logotipo ripetuto dalla prima riga; il
   simbolo con le guide sale all'altezza dell'onda e della pianta, che restano
   ferme sullo sfondo, e la tavola tipografica con la foto sale con lui.
   La foto passa sotto la pianta, cosi' la coda sfumata della pianta resta intera.
   Il file del simbolo ha zone opache #101010: con lighten spariscono e non
   coprono onda e pianta. */
@media (min-width:1025px){
  .bb--dp .bb-symbol{--mt:-528;mix-blend-mode:lighten}
  .bb--dp .bb-id{z-index:1}
  .bb--dp .bb-plate{z-index:0}
  /* 25/09/2026: il simbolo // sale nello spazio vuoto sopra la cresta
     dell'onda, tra la descrizione e l'onda; la tavola sotto resta ferma
     (--mt invariato). Le guide diagonali sopra il // possono uscire dal
     top della board, quindi qui l'overflow verticale è visibile.
     25/09/2026: simbolo altri 15px piu' in alto.
     25/09/2026: simbolo altri 5px piu' in alto. */
  .bb--dp .bb-symbol .bb-el{--y:-311 !important}
  .bb--dp{overflow:clip visible}
  /* 25/09/2026: onda 40px piu' in basso in totale */
  .bb--dp .bb-wave{--y:113 !important}
}
/* telefono: loghi e tavole piu' grandi; le tre varianti restano affiancate */
@media (max-width:640px){
  .bb .bb-id,
  .bb--tera .bb-band{--z:2}
  /* la pianta sta sul bordo sinistro: a 2x uscirebbe quasi tutta dallo schermo */
  .bb--dp .bb-id{--z:1.6}
  .bb .bb-plate{--z:1.3}
  .bb--clout .bb-scene{--z:1.45}
  .bb--dp .bb-symbol{--z:1.6}
  /* le coordinate sono nello stile inline: qui servono !important */
  /* 17/09/2026: varianti un po' piu' piccole (500) e piu' distanziate (160) */
  .bb--tera .bb-variants{--h:490 !important}
  .bb--clout .bb-lockups{--h:560 !important}
  .bb--tera .bb-variants .bb-el,
  .bb--clout .bb-lockups .bb-el{--y:50 !important;--w:500 !important}
  .bb .bb-v1{--x:90 !important}
  .bb .bb-v2{--x:750 !important}
  .bb .bb-v3{--x:1410 !important}
  /* 17/09/2026: piu' aria tra le tre varianti e il disegno di costruzione */
  .bb--clout .bb-construction{--h:700 !important}
  .bb--clout .bb-construction .bb-el{--x:700 !important;--y:180 !important;--w:600 !important}
}

/* ===== Margini laterali su telefono =====
   Richiesta del 17/09/2026: su mobile i margini destro e sinistro sono piu'
   ampi (circa 38px per lato, misurati sullo screenshot di riferimento).
   Valgono per tutto il sito: sezioni, hero, barra di navigazione e footer.
   Gli sfondi delle tavole brand restano a tutta larghezza. */
@media (max-width:640px){
  :root{--page-x:2.375rem}

  .hero-content{padding-left:var(--page-x);padding-right:var(--page-x)}

  .nav-shell{width:calc(100% - 2 * var(--page-x) + 1.5rem)}

  /* le tavole restano a tutta larghezza (onde, pianta, foto arrivano ai
     bordi dello schermo); solo le file di loghi affiancati e il mockup di
     Clout vengono scalati sulla larghezza tra i margini */
  .bb .bb-variants,
  .bb .bb-lockups,
  .bb--clout .bb-scene{--u:calc((100vw - 2 * var(--page-x)) / 2000)}

  /* la foto profilo aveva una larghezza minima di 376px che allargava la
     pagina oltre lo schermo: ora non supera mai lo spazio tra i margini */
  .about-feature-row{grid-template-columns:minmax(0,1fr)}

  .about-feature-row .about-story-profile{width:100%;max-width:100%}
}

/* ===== Board brand su telefono e tablet · niente logo doppio =====
   Richiesta del 17/09/2026: fino a 1024px il logo grande della prima riga
   della board (.bb-id, con onda e pianta) stava troppo vicino al logotipo del
   titolo e sembrava una ripetizione. Si nasconde la riga intera, cosi' il
   resto della presentazione sale subito sotto la descrizione. Desktop invariato. */
@media (max-width:1024px){
  .bb .bb-id{display:none}
}

/* ===== Costruzione del logo Decimo Parallelo centrata (telefono e tablet) =====
   Richiesta del 18/09/2026: nascosta la riga .bb-id, il simbolo con le guide
   tecniche (.bb-symbol) resta l'elemento piu' in alto della board e deve
   risultare centrato rispetto al testo sopra e alla tavola tipografica sotto.
   Le coordinate --x/--w sono pensate per l'allineamento con .bb-id su
   desktop: qui si centra l'immagine sullo stage invece di fidarsi di quei
   valori. Desktop invariato. */
@media (max-width:1024px){
  .bb--dp .bb-symbol .bb-el{left:50%;transform:translateX(-50%) translateY(-40px) scale(1.1)}
}

/* ===== Menu a tendina su telefono e tablet · allineato a destra =====
   Richiesta del 17/09/2026: il pannello del menu (Chi sono, Competenze,
   Progetti, Contatti) si apriva al centro. Fino a 820px, dove compare il
   pulsante hamburger, il pannello si ancora al lato destro della barra,
   sotto il pulsante, con larghezza sul contenuto. Desktop invariato. */
@media (max-width:820px){
  .nav-shell .nav-links{left:auto;right:0;width:max-content;min-width:200px;max-width:calc(100vw - 2rem);margin:0;transform-origin:top right}
}

/* ===== Barra di navigazione sempre visibile =====
   Richiesta del 17/09/2026: la barra (logo, lingue, pulsante menu) deve
   restare visibile anche in cima alla pagina, su desktop, tablet e telefono,
   non solo dopo lo scorrimento. */
.nav-shell{border-color:rgba(255,255,255,.1);background:rgba(16,16,16,.78);box-shadow:0 18px 55px rgba(16,16,16,.28);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* ===== Vetrine brand: piu' spazio tra le righe (tablet e telefono) =====
   Richiesta del 17/09/2026: palette, simboli e logotipi erano troppo vicini.
   Il desktop resta invariato. */
@media (max-width:1024px){
  .c2a-showcase{gap:clamp(3.75rem,9vw,5.5rem)}
  .c2a-icons{row-gap:2.25rem}
}
@media (max-width:640px){
  .c2a-showcase[data-project="cool2action"] .c2a-icons{row-gap:2.5rem}
}

/* 17/09/2026: i tre naming leggermente piu' piccoli, con piu' aria fra loro
   (tablet e telefono; desktop invariato) */
@media (max-width:1024px){
  .c2a-marks img{width:82%}
}

/* 06 Web & UX/UI: contenitore del markup Vibly, trasparente per il layout */
.vibly-host{display:contents}
/* marcatore introduttivo della sezione 06: stessi colori di quello della 05
   (il tema mint li renderebbe scuri, ma qui il fondo e' nero) */
#showcase-web .section-header .eyebrow{color:rgba(255,255,255,.62)}
#showcase-web .section-header h2{color:#f8f8f8}
#showcase-web .section-header p{color:#aaa5ae}

/* ===== Hero centrata su telefono =====
   Richiesta del 17/09/2026: su mobile titolo, sottotitolo, cartella, nome e
   bottone risultavano spostati a destra. .hero-identity era larga 92vw, piu'
   dello spazio tra i margini, e allargava l'unica colonna della griglia solo
   verso destra. Ora la colonna non supera mai lo spazio disponibile. */
@media (max-width:640px){
  .hero-content{grid-template-columns:minmax(0,1fr)}
  .hero-identity{width:100%;max-width:518px}
  .about-intro h2{text-align:center}
}

/* ===== Contatti su telefono =====
   Richiesta del 18/09/2026: su mobile niente card del QR code (da telefono
   non si inquadra), e il tasto WhatsApp al centro. Desktop e tablet invariati. */
@media (max-width:640px){
  .contact-qr{display:none}
  .contact-form-actions{justify-content:center}
}

/* ===== Revisione del 18/09/2026: navigazione, leggibilita', tocco ===== */
/* Il sito e' scuro per scelta: dichiararlo evita che Chrome Android e Samsung
   Internet lo scuriscano da soli (la sezione chiara Vibly/Nuova Immagine
   diventava grigia e il logo nero "NUOVA IMMAGINE" spariva) e tiene scure
   barre di scorrimento e campi del modulo. */
:root{color-scheme:dark}
/* ...ma i riquadri incorporati (animazioni Vibly) restano nello schema normale:
   se lo schema del riquadro e quello della sua pagina non coincidono, il
   browser ci mette dietro uno sfondo pieno e agli angoli dei telefoni
   compariva un rettangolo bianco */
iframe{color-scheme:normal}
/* voce "Skills" del menu: etichetta e titolo finivano sotto la barra fissa */
#skills{scroll-margin-top:4.5rem}
/* "Let's Start" atterra sul modulo contatti: il bordo alto della card si ferma
   appena sotto la barra fissa (barra fino a 74 px, poi ~32 px di respiro), con
   il titolo "Thanks for watching!" che spunta dietro la barra */
#contact-form{scroll-margin-top:6.6rem}
/* telefoni animati (Vibly, Nuova Immagine) = pagine incorporate: sotto il puntatore o il
   dito catturavano rotella e trascinamento, e la pagina si bloccava (Nuova Immagine) o
   scorreva a scatti (Vibly). Sono solo animazioni: rotella e dito passano al sito. */
.vibly-phone--anim{pointer-events:none}
/* sottotitolo della hero: era 8,6 px su telefono e 8,9 px su desktop */
.hero-identity span{font-size:clamp(.66rem,.62vw,.75rem)}
@media (max-width:600px){.hero-identity strong{font-size:.75rem}}
/* nomi degli strumenti: da 8,6 a 11 px e piu' chiari; vanno a capo invece di
   troncarsi ("After Effects") e possono usare lo spazio tra un'icona e l'altra */
.tool-item small{width:calc(100% + .7rem);max-width:none;margin-inline:-.35rem;overflow:visible;white-space:normal;text-overflow:clip;text-align:center;line-height:1.2;font-size:.6875rem;color:rgba(255,255,255,.6)}
@media (max-width:360px){.tool-item small{font-size:.65rem}}
/* la griglia delle icone nasconde cio' che esce dai suoi bordi (serve alla
   tendina): margine laterale compensato, cosi' la griglia resta dov'era ma
   i nomi delle colonne esterne ("Photoshop" a 320 px) non vengono tagliati */
.digital-skills .tool-row{padding-inline:.5rem;margin-inline:-.5rem}
/* selettore lingua: da 9 px con contrasto 4,1 a 10,5 px con contrasto AA */
.language-switcher button{font-size:.66rem;color:rgba(255,255,255,.62)}
/* fondo pagina: nome, email, (c) e note legali leggibili (contrasto AA) */
.footer-bottom{color:rgba(255,255,255,.6);font-size:.7rem}
.footer-legal{color:rgba(255,255,255,.6);font-size:.7rem}
.footer-legal-note{font-size:.64rem;opacity:1}
/* puntini dei progetti (telefono e tablet): stessa grafica, area di tocco
   alta 31 px e continua tra un puntino e l'altro */
.project-dots-list button{position:relative}
.project-dots-list button::before{content:"";position:absolute;inset:-12px -4px}
/* card 07 e 08 sui telefoni stretti: il numero grande copriva l'etichetta */
@media (max-width:400px){.showcase-copy{padding-top:6.5rem}}

/* === Margini desktop (>=1025px) ===
   Richiesta del 19/09/2026: i margini destro e sinistro crescono di un altro 15%
   (colonna piu' stretta) su tutta la pagina, solo desktop; telefono e tablet invariati.
   --col-w e' la larghezza della colonna centrale: prima era min(80%,1000px), ora e'
   viewport - 1,15 x (viewport - vecchia colonna), cioe' i margini valgono 1,15 volte i
   precedenti a ogni larghezza (a 1440px: 220px -> 253px per lato). Il menu segue la
   stessa proporzione (era 1144px a 1440px, ora 1100px). Waves, fondali e tavole brand
   a tutta larghezza restano a bordo schermo; loghi e mockup vanno dentro la colonna. === */
@media (min-width:1025px){
  :root{--col-w:calc(1.15 * min(.8 * (100vw - 2 * var(--page-x)), 1000px) - .15 * 100vw)}
  .section-inner,.footer-inner{width:var(--col-w);max-width:none}
  .nav-shell{width:min(93.1%,calc(1315.6px - 15vw));max-width:none}
  .about-feature-row .about-story-profile{width:min(clamp(376px,40.32vw,578px),100%);transform:none}
  /* file di loghi e mockup delle tavole brand: la composizione (1560 unita' tra il primo
     e l'ultimo elemento) occupa esattamente la colonna, non piu' il 100vw */
  .bb .bb-variants,
  .bb .bb-lockups,
  .bb--clout .bb-scene,
  .bb--clout .bb-construction{--u:calc(var(--col-w) / 1560)}
  /* i tre telefoni delle giostre (Vibly, Nuova Immagine) e il nome nella hero non superano
     mai la colonna: sotto i ~1200px la colonna e' piu' stretta dei telefoni a 27vw */
  .vibly-onboarding .vibly-phone,
  .vibly-onboarding .vibly-phone--left,
  .vibly-onboarding .vibly-phone--right,
  .ni-trio .vibly-phone,
  .ni-trio .vibly-phone--left,
  .ni-trio .vibly-phone--right{width:clamp(96px,min(27vw,.34 * var(--col-w)),280px)!important}
  .hero-identity{width:min(60.48vw,878px,var(--col-w))}
  /* le disposizioni restano quelle di prima anche con la colonna piu' stretta: gli elementi
     si rimpiccioliscono e si avvicinano invece di andare a capo */
  /* barra dei loghi: tre sopra e due sotto (3 x .27 + 2 x .09 = .99 della colonna) */
  .project-selector{column-gap:min(clamp(2.5rem,7vw,7rem),.09 * var(--col-w))}
  .project-selector button{flex-basis:min(clamp(170px,22vw,260px),.27 * var(--col-w))}
  /* Cool2Action: le sei icone restano su una riga, sopra i tre logotipi */
  .c2a-showcase[data-project="cool2action"] .c2a-icons{gap:min(clamp(1rem,3vw,2.25rem),.035 * var(--col-w));padding:0 min(clamp(0rem,7vw,6.5rem),.07 * var(--col-w))}
  .c2a-showcase[data-project="cool2action"] .c2a-icons img{width:min(clamp(48px,6.4vw,92px),.09 * var(--col-w))}
}
}
/* Nuova Immagine, i tre telefoni animati: stessa ombra degli altri telefoni, ma disegnata come
   immagine fissa (ombra-telefono.png, calcolata da Chrome con questo stesso drop-shadow su un
   telefono largo 250 px) intorno al riquadro invece che come filter:drop-shadow. Il filtro va
   ricalcolato a ogni fotogramma in cui l'app dentro il telefono si muove: con tre telefoni
   rallentava animazioni e scorrimento. Le sporgenze sono in proporzione alla larghezza del
   telefono (clamp qui sotto = larghezza di .vibly-screens .vibly-phone). */
#ni-more-panel .vibly-phone--anim{--ni-w:clamp(96px,24vw,250px);filter:none;border:0 solid transparent;
  border-image-source:url(../../../nuova-immagine/animazione-sito/ombra-telefono.png);border-image-slice:0 fill;border-image-width:0;
  border-image-outset:calc(var(--ni-w)*.272) calc(var(--ni-w)*.38) calc(var(--ni-w)*.4805) calc(var(--ni-w)*.38);border-image-repeat:stretch}
/* ===== 07 · ADV & Social: cartelle dei clienti (social-folders) =====
   Una cartella per cliente in vetro fume' satinato (riferimento: l'icona 3D "UX/UI
   Design" scelta dall'utente il 18/09): lastre scure quasi nere, luce viola che arriva
   da dentro, grana fine, un filo di luce sul bordo (disegnato in SVG dallo script). Dorso con linguetta,
   tre post che spuntano, frontale smerigliato che li sfoca.
   Mouse sopra: il balzo, il frontale si inclina in avanti e i post escono a ventaglio.
   Senza mouse (tablet e telefono) lo stesso balzo passa da una cartella all'altra in
   ciclo finche' la sezione e' a schermo. Il click apre .sf-modal.
   Markup, sagome e dati: script #social-folders in index.html. */
.sf-host{position:relative}
.sf-num{position:absolute;top:-4.6rem;right:0;color:rgba(255,255,255,.16);font-family:var(--font-outfit),sans-serif;font-size:4rem;font-weight:800;line-height:1;pointer-events:none}
.sf-defs{position:absolute;width:0;height:0;overflow:hidden}
.sf-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(3.6rem,6vw,5.5rem) clamp(1.4rem,4vw,4rem);max-width:1120px;margin-inline:auto;padding-top:clamp(3rem,6vw,5rem)}
.sf-folder{position:relative;display:block;flex:0 0 auto;width:clamp(15rem,27%,20.5rem);aspect-ratio:320/250;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .6s ease}
.sf-host:not(.is-in) .sf-folder{opacity:0;transform:translateY(40px)}
.sf-folder:focus{outline:none}
.sf-folder svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.sf-glow{position:absolute;left:12%;right:12%;bottom:-8%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(255,255,255,.07) 60%,transparent);opacity:0;transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}

/* dorso: lastra scura con la luce viola dentro */
.sf-back{position:absolute;inset:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.sf-face{position:absolute;inset:0;overflow:hidden;clip-path:url(#sf-back-clip);background:linear-gradient(180deg,#2a2140 0%,#171220 42%,#0e0b15 100%)}
.sf-light{position:absolute;inset:0;background:radial-gradient(52% 44% at 50% 32%,rgba(140,80,255,.55),rgba(125,60,255,.12) 55%,transparent 75%);opacity:.5;transition:opacity .6s ease}
.sf-grain{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:160px 160px;opacity:.14;pointer-events:none}

/* i post dentro la cartella */
.sf-card{position:absolute;left:33%;top:15%;width:34%;aspect-ratio:4/5;overflow:hidden;border-radius:.55rem;background:var(--ph);box-shadow:0 12px 26px rgba(4,2,10,.55),inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.sf-card img{display:block;width:100%;height:100%;object-fit:cover}
.sf-card--l{transform:translate(-56%,7%) rotate(-5deg)}
.sf-card--c{z-index:1}
.sf-card--r{transform:translate(56%,7%) rotate(5deg)}

/* frontale fume' smerigliato: ritagliato con la sagoma #sf-front-clip, la faccia
   visibile parte dal 32% dell'altezza (i gradienti sono tarati su quello) */
.sf-front{position:absolute;inset:0;z-index:2;clip-path:url(#sf-front-clip);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);background:radial-gradient(85% 60% at 14% 108%,rgba(125,60,255,.5),transparent 66%),linear-gradient(180deg,rgba(90,72,136,.62) 32%,rgba(36,28,58,.78) 56%,rgba(17,13,27,.86) 100%);transform:perspective(46rem) rotateX(0deg);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.sf-label{position:absolute;left:8%;right:26%;bottom:10%;display:flex;flex-direction:column;gap:.2rem}
.sf-name{font-family:var(--font-outfit),sans-serif;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.sf-sub{overflow:hidden;color:rgba(224,214,255,.66);font-size:.76rem;line-height:1.2;white-space:normal}
.sf-go{position:absolute;right:7%;bottom:9.5%;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(0,0,0,.35);transition:background .3s ease,box-shadow .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.sf-folder .sf-go svg{position:static;width:1rem;height:1rem}

/* il balzo: mouse sopra, focus da tastiera, oppure .is-open messo dallo script */
.sf-folder.is-open,.sf-folder:focus-visible{transform:translateY(-.7rem)}
.sf-folder.is-open .sf-front,.sf-folder:focus-visible .sf-front{transform:perspective(46rem) rotateX(-26deg)}
.sf-folder.is-open .sf-card--l,.sf-folder:focus-visible .sf-card--l{transform:translate(-84%,-24%) rotate(-13deg)}
.sf-folder.is-open .sf-card--c,.sf-folder:focus-visible .sf-card--c{transform:translateY(-36%)}
.sf-folder.is-open .sf-card--r,.sf-folder:focus-visible .sf-card--r{transform:translate(84%,-24%) rotate(13deg)}
.sf-folder.is-open .sf-glow,.sf-folder:focus-visible .sf-glow{opacity:1;transform:scale(1.12)}
.sf-folder.is-open .sf-light,.sf-folder:focus-visible .sf-light{opacity:1}
.sf-folder.is-open .sf-go,.sf-folder:focus-visible .sf-go{background:rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 24px rgba(255,255,255,.28);transform:scale(1.08)}
.sf-folder:focus-visible .sf-back{filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
@media (hover:hover){
  .sf-host.is-in .sf-folder:hover{transform:translateY(-.7rem)}
  .sf-folder:hover .sf-front{transform:perspective(46rem) rotateX(-26deg)}
  .sf-folder:hover .sf-card--l{transform:translate(-84%,-24%) rotate(-13deg)}
  .sf-folder:hover .sf-card--c{transform:translateY(-36%)}
  .sf-folder:hover .sf-card--r{transform:translate(84%,-24%) rotate(13deg)}
  .sf-folder:hover .sf-glow{opacity:1;transform:scale(1.12)}
  .sf-folder:hover .sf-light{opacity:1}
  .sf-folder:hover .sf-go{background:rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 24px rgba(255,255,255,.28);transform:scale(1.08)}
}
.sf-folder:active{transform:translateY(-.3rem) scale(.985)}

@media (max-width:760px){
  .sf-shelf{gap:3.4rem 1rem;padding-top:3rem}
  .sf-folder{width:calc(50% - .5rem);max-width:15rem}
  .sf-card{border-radius:.4rem}
  .sf-name{font-size:.95rem}
  .sf-sub{font-size:.68rem}
  .sf-label{left:8%;right:8%;bottom:9%}
  .sf-go{display:none}
  .sf-num{top:-3.4rem;font-size:3rem}
}
@media (max-width:400px){
  .sf-shelf{gap:3rem .75rem}
  .sf-folder{width:calc(50% - .375rem)}
  .sf-name{font-size:.86rem}
}

/* ---- popup ---- */
html.sf-lock,html.sf-lock body{overflow:hidden}
.sf-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));visibility:hidden;color:#fff;font-family:var(--font-inter),sans-serif;transition:visibility 0s .88s}
.sf-modal.is-open{visibility:visible;transition-delay:0s}
.sf-modal-bg{position:absolute;inset:0;background:rgba(8,4,14,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .85s ease}
.sf-modal.is-open .sf-modal-bg{opacity:1}
/* stessa apertura/chiusura a ribaltamento del pop-up del carosello curvo (ccPopFlipIn / chiusura WAAPI in sf-close-anim) */
.sf-panel{position:relative;display:flex;flex-direction:column;width:min(100%,860px);max-height:100%;opacity:0;transform:none;transform-origin:50% 0!important;backface-visibility:hidden;pointer-events:none;transition:none}
.sf-modal.is-open .sf-panel{opacity:1;transform:none;transition:none;pointer-events:auto;animation:ccPopFlipIn 1.05s cubic-bezier(.22,.8,.26,1),ccPopFadeIn .42s cubic-bezier(.215,.61,.355,1)}
@media (prefers-reduced-motion:reduce){.sf-modal.is-open .sf-panel{animation:none}}
.sf-panel-body{--sf-w:620px;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:1.6rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .042 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),radial-gradient(70% 45% at 0 0,rgba(125,60,255,.3),transparent 70%),linear-gradient(170deg,rgba(62,48,100,.64),rgba(22,17,36,.9) 36%,rgba(13,10,20,.94));background-repeat:repeat,no-repeat,no-repeat;background-size:180px 180px,auto,auto;background-attachment:local;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -1px 0 rgba(185,160,255,.3),0 50px 120px rgba(0,0,0,.6)}
/* profilo in stile Instagram, stessa impaginazione dello screenshot di Maldera: testata, quattro tasti, griglia 3x3, credito.
   Tutto sta nella colonna .sf-feed, larga quanto la griglia: le misure sono in cqw (1cqw = 1% della larghezza della griglia),
   quindi le proporzioni restano quelle del riferimento a ogni grandezza; i minimi in rem tengono leggibili i testi sul telefono */
.sf-panel-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;padding:clamp(1.9rem,6vw,2.7rem) clamp(1.6rem,5.4vw,2.4rem) clamp(1.98rem,6.3vw,2.7rem)}
.sf-feed{container-type:inline-size;width:100%;max-width:var(--sf-w);margin-inline:auto}
.sf-profile{display:grid;grid-template-columns:18.2cqw minmax(0,1fr);align-items:center;column-gap:4.3cqw}
.sf-avatar{display:grid;place-items:center;width:18.2cqw;aspect-ratio:1;overflow:hidden;border-radius:50%;background:#fff}
.sf-avatar img{display:block;width:100%;height:100%;object-fit:contain}
.sf-avatar img[src*="maldera"]{padding:13%;box-sizing:border-box}
.sf-avatar img[src*="pr-avatar-logo"]{background:#1c1d1f;padding:8%;box-sizing:border-box}
.sf-avatar b{color:#1a1226;font-family:var(--font-outfit),sans-serif;font-size:6cqw;font-weight:600}
.sf-pinfo{min-width:0}
.sf-panel-title{margin:0;font-family:var(--font-outfit),sans-serif;font-size:max(1rem,4.2cqw);font-weight:600;letter-spacing:-.01em;line-height:1.15;overflow-wrap:break-word}
.sf-pname{margin:.35em 0 0;color:#fff;font-size:max(.78rem,2.75cqw);font-weight:500;line-height:1.2;overflow-wrap:break-word}
.sf-stats{display:flex;gap:max(1rem,8.5cqw);margin:max(.55rem,3.2cqw) 0 0;padding:0;list-style:none}
.sf-stats li{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.sf-stats strong{font-size:max(.95rem,3.05cqw);font-weight:500}
.sf-stats span{color:rgba(255,255,255,.82);font-size:max(.7rem,2.2cqw)}
.sf-actions{display:flex;gap:2.5cqw;margin-top:5.9cqw}
.sf-actions span{display:grid;place-items:center;flex:1 1 0;min-width:0;height:max(2.3rem,8.3cqw);border:1.5px solid rgba(255,255,255,.9);border-radius:max(.45rem,1.1cqw);box-sizing:border-box;color:#fff;font-size:max(.8rem,3.9cqw);font-weight:500;white-space:nowrap;pointer-events:none;user-select:none}
.sf-actions .is-fill{border-color:transparent;background:#d9d9db;color:#111}
.sf-actions .sf-add{flex:0 0 max(2.3rem,8.7cqw)}
.sf-actions .sf-add svg{width:55%;height:55%}
.sf-credit{display:flex;align-items:baseline;justify-content:flex-end;gap:.7em;margin:3.6cqw 0 0;color:rgba(255,255,255,.72);font-size:max(.66rem,1.75cqw);font-style:italic}
.sf-credit[hidden]{display:none}
.sf-credit img{display:block;height:1.25em;width:auto}
.sf-close,.sf-zoom-btn{display:grid;place-items:center;flex:none;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.sf-close{position:absolute;z-index:4;top:1rem;right:max(clamp(1.6rem,5.4vw,2.4rem),calc(50% - 310px));background:rgba(20,16,28,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:820px){.sf-close{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease,opacity .25s ease}.sf-close.is-over-content{opacity:0;pointer-events:none}}.sf-close:hover,.sf-zoom-btn:hover{background:rgba(255,255,255,.22)}
.sf-close.is-on-light{background:rgba(124,58,237,.94);border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 16px rgba(76,29,149,.45)}
.sf-close.is-on-light:hover{background:rgba(109,40,217,.98)}
.sf-close svg,.sf-zoom-btn svg{width:1.1rem;height:1.1rem}
.sf-close:focus-visible,.sf-zoom-btn:focus-visible,.sf-tile:focus-visible{outline:2px solid #d9a8ff;outline-offset:2px}
.sf-close:focus-visible{outline-offset:-3px}
.sf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15cqw;margin-top:13cqw}
.sf-panel-body[data-n="1"]{--sf-w:300px}
.sf-panel-body[data-n="2"]{--sf-w:520px}
.sf-grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.sf-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-tile{position:relative;display:block;aspect-ratio:4/5;margin:0;padding:0;overflow:hidden;border:0;background:var(--ph,#24143f);color:#fff;cursor:zoom-in;-webkit-tap-highlight-color:transparent;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-radius .45s ease;z-index:0}
.sf-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sf-tile::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.14);opacity:0;transition:opacity .3s ease}
@media (hover:hover){.sf-tile:hover::after{opacity:1}.sf-tile:hover img{transform:none}.sf-tile:hover{transform:scale(1.4);z-index:6;box-shadow:0 24px 60px rgba(0,0,0,.55);border-radius:.35rem}}
.sf-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:rgba(255,255,255,.62);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sf-ph strong{color:rgba(255,255,255,.85);font-family:var(--font-outfit),sans-serif;font-size:clamp(1.3rem,4vw,2.2rem);font-weight:700;letter-spacing:-.03em}

/* desktop: il popup intero entra nell'altezza dello schermo, senza scorrere. Altezza della colonna = larghezza x (0,51 testata e credito
   + 0,4167 per riga di post); 9.3rem = margini dello schermo e del popup (in alto la fascia del tondo di chiusura) */
@media (hover:hover) and (min-width:900px){
  .sf-panel{width:auto;max-width:100%}
  .sf-panel-body{overflow:hidden;padding:2.4rem 2.4rem 3.06rem}
  .sf-panel-body[data-n="3"]{--sf-w:min(620px,calc((100dvh - 10rem) / (.535 + .4167 * var(--sf-rows,3))))}
  .sf-feed{width:var(--sf-w)}
  .sf-close{right:2.4rem}
}
/* zoom del singolo post */
.sf-zoom{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:clamp(.4rem,2vw,1.5rem);padding:4.5rem 1rem 3.5rem;background:rgba(8,4,14,.92);visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s .3s}
.sf-zoom.is-open{visibility:visible;opacity:1;transition-delay:0s}
.sf-zoom-stage{position:relative;flex:0 1 auto;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:var(--ar,4/5);overflow:hidden;border-radius:1rem;background:var(--ph,#24143f);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);transform:scale(.94);transition:transform .45s cubic-bezier(.22,1,.36,1);touch-action:pan-y}
.sf-zoom.is-open .sf-zoom-stage{transform:none}
.sf-zoom-stage img{display:block;width:100%;height:100%;object-fit:contain}
.sf-zoom-close{position:absolute;top:1rem;right:1rem}
.sf-zoom-count{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.72);font-size:.82rem;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .sf-zoom{padding:4.5rem .75rem 4.75rem}
  .sf-zoom-prev,.sf-zoom-next{position:absolute;bottom:.75rem}
  .sf-zoom-prev{left:1rem}
  .sf-zoom-next{right:1rem}
}

@media (prefers-reduced-motion:reduce){
  .sf-folder,.sf-front,.sf-back,.sf-glow,.sf-light,.sf-go,.sf-card,.sf-panel,.sf-modal-bg,.sf-zoom,.sf-zoom-stage,.sf-tile img{transition:none!important}
  .sf-host:not(.is-in) .sf-folder{opacity:1;transform:none}
}
/* ===== fine social-folders ===== */

/* === Loghi progetti: ingrandimento a rotazione (solo desktop) ===
   Uno alla volta, stessa scala dell'hover, per far capire che sono cliccabili.
   Il ciclo e' nello script "projects-logo-pulse". */
@media (min-width:1025px){
  .project-selector button{transition:transform .45s cubic-bezier(.4,0,.2,1)}
  .project-selector button .proj-logo{transition:opacity .45s ease,transform .45s ease}
  .project-selector button[data-pulse]{transform:scale(1.22)}
  .project-selector button[data-pulse] .proj-logo{opacity:1}
}

/* Margini desktop 19/09/2026 (continua): le tre schermate a fila (Vibly, Nuova Immagine) non
   superano la colonna centrale quando e' stretta (~1025-1100px). --ni-w segue la larghezza
   del telefono, cosi' l'ombra disegnata resta in proporzione. */
@media (min-width:1025px){
  .vibly-screens .vibly-phone{width:clamp(96px,min(24vw,.3 * var(--col-w)),250px)}
  #ni-more-panel .vibly-phone--anim{--ni-w:clamp(96px,min(24vw,.3 * var(--col-w)),250px)}
  /* cartelle di 07 · ADV & Social: tre sopra e due sotto anche a ~1025px */
  .sf-shelf .sf-folder{width:clamp(11rem,27%,20.5rem)}
}

/* Margini desktop 19/09/2026 (continua): tra 1025 e 1279px la colonna e' stretta e i pannelli
   delle competenze perderebbero spazio interno (i tag andrebbero uno per riga). Il padding si
   riduce della meta' del guadagno di margine su ciascun lato del pannello, cosi' lo spazio
   utile dentro resta identico a prima e la disposizione non cambia. */
@media (min-width:1025px) and (max-width:1279px){
  .skill-panel{padding-inline:calc(clamp(1.5rem,4vw,2.6rem) - .0326 * (100vw - var(--col-w)))}
}

/* Margini desktop 19/09/2026 (continua): fino a 1100px la colonna di prima era il 90% dello spazio
   (regola max-width:1100px), non l'80%: si parte da quella per dare ai margini il +15% esatto. */
@media (min-width:1025px) and (max-width:1100px){
  :root{--col-w:calc(1.15 * min(.9 * (100vw - 2 * var(--page-x)), 1000px) - .15 * 100vw)}
}

.sf-grid[data-rem]{grid-template-columns:repeat(6,minmax(0,1fr))}.sf-grid[data-rem]>.sf-tile{grid-column:span 2}.sf-grid[data-rem="2"]>.sf-tile:nth-last-child(2){grid-column:2/span 2}.sf-grid[data-rem="2"]>.sf-tile:last-child{grid-column:4/span 2}.sf-grid[data-rem="1"]>.sf-tile:last-child{grid-column:3/span 2}


/* ---------- Bordino sfumato dei campioni colore (palette di tutti i case study) ----------
   Stessa ricetta dei campioni delle tavole brand: luce sottile in alto e filetto
   interno morbido. Bianco sui campioni scuri o saturi; sui campioni chiari prende
   un colore a contrasto, ripreso dalla palette del progetto (--rim). */
/* Un solo valore per tutti i progetti (Clout escluso: non ha campioni HTML) */
.c2a-swatch,.vibly-swatch,.bb-sw{--rim:#fff;--rim-t:15%;--rim-r:28%}
.c2a-swatch--lt,.vibly-swatch--lt,.bb-sw--lt{--rim-t:15%;--rim-r:28%}
/* Vibly e Nuova Immagine stanno su fondo chiaro: lo stesso filo scuro li si stacca come un contorno netto,
   sul nero dei progetti brand invece si fonde. Meta` dei valori = stessa intensita` percepita. */
.vibly-swatch,.vibly-swatch--lt{--rim-t:5%;--rim-r:9%}.vibly-more--ni .vibly-swatch,.vibly-more--ni .vibly-swatch--lt{--rim-t:4%;--rim-r:7%}
.c2a-swatch,.vibly-swatch{
  box-shadow:
    inset 0 2px 3px color-mix(in srgb,var(--rim) var(--rim-t),transparent),
    inset 0 0 3px 1.5px color-mix(in srgb,var(--rim) var(--rim-r),transparent),
    0 14px 30px rgba(16,16,16,.12)}
.c2a-swatch{box-shadow:
    inset 0 2px 3px color-mix(in srgb,var(--rim) var(--rim-t),transparent),
    inset 0 0 3px 1.5px color-mix(in srgb,var(--rim) var(--rim-r),transparent)}
/* filetto in px fissi come .c2a-swatch/.vibly-swatch: in unita' della tavola (--u) diventava
   piu' sottile e piu' scuro degli altri campioni, e cambiava con la larghezza dello schermo */
.bb-sw{box-shadow:
    inset 0 2px 3px color-mix(in srgb,var(--rim) var(--rim-t),transparent),
    inset 0 0 3px 1.5px color-mix(in srgb,var(--rim) var(--rim-r),transparent)}
.mir-grid{margin-top:2rem;text-align:center;position:relative}
.mir-grid img{width:40.6%;max-width:392px;height:auto;display:inline-block;position:relative;z-index:1}
.mir-grid::before{content:"";position:absolute;z-index:0;pointer-events:none;top:50%;left:50%;width:58%;max-width:560px;aspect-ratio:3800/1858;transform:translate(-50%,-50%) scale(1.35);background:radial-gradient(ellipse 70% 120% at 50% 50%,rgba(125,60,255,.06) 0%,rgba(125,60,255,0) 70%);filter:blur(70px)}
.mir-grid::after{content:"";position:absolute;z-index:0;pointer-events:none;top:50%;left:50%;width:58%;max-width:560px;aspect-ratio:3800/1858;transform:translate(-50%,-50%) scale(1.35);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");background-size:160px 160px;opacity:.035;mix-blend-mode:overlay}
@media (max-width:640px){.mir-grid img{width:53.2%}.mir-grid::before{width:76%}.mir-grid::after{width:76%}}
.mir-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.6rem);margin-top:2rem}
.mir-card{aspect-ratio:1/1;overflow:hidden;border:1px solid rgba(180,100,255,.22);border-radius:1.4rem;background:#101010}
.mir-card img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.mir-cards{gap:.5rem}}@media (max-width:640px){.mir-cards{gap:.35rem}}@media (max-width:460px){.mir-cards{gap:.25rem}}
.mir-panel-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2.5vw,1.6rem)}
.mir-panel-card{aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(180,100,255,.22);border-radius:1.4rem;background:#101010}
.mir-panel-card img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.mir-panel-cards{grid-template-columns:repeat(2,1fr);gap:.5rem}}@media (max-width:460px){.mir-panel-cards{grid-template-columns:1fr;gap:.35rem}}
.c2a-showcase[data-project="mir"]{gap:0;margin-top:0;padding-top:0}
.c2a-showcase[data-project="mir"] .mir-grid{margin-top:calc(clamp(3.75rem,9vw,5.5rem) + 2rem - 70px)}
.c2a-showcase[data-project="mir"] .mir-cards{margin-top:calc(clamp(3.75rem,9vw,5.5rem) + 2rem + 28pt);margin-bottom:30pt}

/* MIR - seconda immagine di costruzione: logo campito + reticolo tratteggiato */
.mir-grid2{--mg2w:min(40.6%,392px);position:relative;margin-top:clamp(2.6rem,6vw,4.4rem);margin-bottom:clamp(2.6rem,6vw,4.4rem);padding-top:calc(var(--mg2w)*.3464);padding-bottom:calc(var(--mg2w)*.3897)}
.mir-grid2-stage{position:relative;width:var(--mg2w);margin:0 auto;aspect-ratio:3600/1466}
.mir-grid2::before{content:"";position:absolute;z-index:0;pointer-events:none;top:calc(var(--mg2w)*.54996);left:50%;width:calc(var(--mg2w)*1.24);height:calc(var(--mg2w)*.5538);transform:translate(-50%,-50%);background:radial-gradient(ellipse 70% 120% at 50% 50%,rgba(170,140,255,.11),rgba(170,140,255,.045) 45%,transparent 72%);filter:blur(40px)}
.mir-grid2::after{content:"";position:absolute;z-index:0;pointer-events:none;top:calc(var(--mg2w)*.54996);left:50%;width:calc(var(--mg2w)*1.24);height:calc(var(--mg2w)*.5538);transform:translate(-50%,-50%);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");background-size:160px 160px;opacity:.035;mix-blend-mode:overlay}


.mir-grid2-stage img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 0 16px rgba(125,60,255,.42)) drop-shadow(0 0 54px rgba(125,60,255,.26))}
.mir-g2-v,.mir-g2-h{position:absolute;z-index:3;pointer-events:none}
.mir-g2-v{left:var(--x);top:-85.06%;height:280.76%;width:1px;margin-left:-.5px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.198) 0 3px,transparent 3px 7px);-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.16) 13%,#000 30%,#000 66%,rgba(0,0,0,.16) 87%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.16) 13%,#000 30%,#000 66%,rgba(0,0,0,.16) 87%,transparent 100%)}
.mir-g2-h{top:var(--y);left:50%;width:100vw;margin-left:-50vw;transform:none;height:1px;margin-top:-.5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.198) 0 3px,transparent 3px 7px)}
.mir-g2-v--start{margin-left:0}.mir-g2-v--end{margin-left:-1px}.mir-g2-h--start{margin-top:0}.mir-g2-h--end{margin-top:-1px}
@media (max-width:640px){.mir-grid2{--mg2w:53.2%}}

/* Versione pubblicata: il nome sta nell'H1 sotto «PORTFOLIO», con lo stesso stile che aveva sopra il pulsante «Let's Start». */
.hero-identity .hero-name{display:block;margin:0 0 .6rem;color:rgba(255,255,255,.88);font-family:var(--font-outfit),sans-serif;font-size:clamp(.9rem,1.3vw,1.1rem);font-weight:400;letter-spacing:-.015em;line-height:1.3;text-align:center}

/* Ottimizzazione 26/09: pausa le animazioni infinite quando l'elemento è fuori schermo (script animazioni-fuori-schermo in fondo all'HTML). */
[data-anim-fuori-schermo],[data-anim-fuori-schermo]:before,[data-anim-fuori-schermo]:after{animation-play-state:paused!important}