:root{--color-bg:oklch(98% .01 250);--color-text:oklch(25% .05 250);--color-primary:oklch(65% .15 250);--color-primary-dark:oklch(50% .18 250);--color-accent:oklch(75% .15 70);--nav-height:80px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);font-family:Outfit,sans-serif;line-height:1.6;overflow-x:hidden}@media (pointer:fine){body{cursor:none}.cursor-dot,.cursor-outline{z-index:9999;pointer-events:none;border-radius:50%;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.cursor-dot{background-color:var(--color-primary);width:8px;height:8px}.cursor-outline{border:2px solid color-mix(in oklch, var(--color-primary) 50%, transparent);width:40px;height:40px;transition:width .2s,height .2s,background-color .2s}body.cursor-hover .cursor-outline{background-color:color-mix(in oklch, var(--color-primary) 10%, transparent);border-color:var(--color-primary);width:60px;height:60px}.nav-links a:hover,.nav-links a.active,.premium-btn:hover{cursor:none}}.char{transform-origin:50% 100%;display:inline-block}h1{letter-spacing:-.02em;font-size:clamp(3rem,6vw,6rem);font-weight:800;line-height:1.1}h2{margin-bottom:1rem;font-size:clamp(2rem,4vw,4rem);font-weight:600}p{opacity:.8;max-width:600px;margin-bottom:2rem;font-size:1.25rem;font-weight:300}.premium-nav{width:100%;height:var(--nav-height);background:color-mix(in oklch, var(--color-bg) 80%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;justify-content:space-between;align-items:center;padding:0 5%;display:flex;position:fixed;top:0;left:0}.logo{letter-spacing:2px;background:linear-gradient(in oklch to right, var(--color-primary-dark), var(--color-primary));color:#0000;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.nav-links a{color:var(--color-text);margin-left:2rem;font-size:1rem;font-weight:600;text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--color-primary)}@media (width<=768px){.premium-nav{flex-direction:column;align-items:center;height:auto;padding:1rem 5%}.nav-links{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem;display:flex}.nav-links a{margin-left:0;font-size:.9rem}.page-container{padding-top:calc(120px + 2rem)}}.hero-section{height:100dvh;margin-top:calc(var(--nav-height) * -1);align-items:center;padding:0 5%;display:flex;position:relative}.hero-content{z-index:10;position:relative}.premium-btn{color:#fff;background:linear-gradient(in oklch to right, var(--color-primary), var(--color-primary-dark));box-shadow:0 10px 30px color-mix(in oklch, var(--color-primary) 40%, transparent);border-radius:50px;padding:1rem 2.5rem;font-weight:600;text-decoration:none;transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s cubic-bezier(.25,1,.5,1);display:inline-block}.premium-btn:hover{box-shadow:0 15px 40px color-mix(in oklch, var(--color-primary) 60%, transparent);transform:translateY(-5px)}.webgl-canvas{z-index:1;pointer-events:none;width:100vw;height:100dvh;position:absolute;top:0;left:0}.scroll-section{z-index:2;align-items:center;min-height:100dvh;padding:0 5%;display:flex;position:relative}.part-card{cursor:none;background:#fff;border:2px solid #0000;border-radius:12px;padding:1.5rem;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 4px 15px #0000000d}@media (pointer:fine){.part-card{cursor:none}}.part-card:hover{border-color:var(--color-primary);transform:translateY(-5px);box-shadow:0 10px 25px #0000001a}.part-card.active{border-color:var(--color-primary);background:color-mix(in oklch, var(--color-primary) 10%, white)}.part-card h3{color:var(--color-primary-dark);margin:0 0 .5rem;font-size:1.1rem}.badge{text-transform:uppercase;background:#eee;border-radius:10px;padding:.2rem .6rem;font-size:.75rem;font-weight:600}.part-card.active .badge{background:var(--color-primary);color:#fff}.secondary-section{background-color:#fff;border-radius:40px 40px 0 0;box-shadow:0 -20px 50px #00000005}.footer-section{background-color:var(--color-text);color:var(--color-bg)}.footer-section h2,.footer-section p{color:var(--color-bg)}.page-container{padding:calc(var(--nav-height) + 4rem) 5% 4rem;min-height:100vh}.parallax-section{background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;align-items:center;height:100vh;padding:0 10%;display:flex;position:relative;overflow:hidden}.parallax-overlay{z-index:1;background:linear-gradient(135deg,#000c 0%,#0003 100%);width:100%;height:100%;position:absolute;top:0;left:0}.parallax-content{z-index:2;color:#fff;max-width:600px;position:relative}.parallax-content.right-align{text-align:right;margin-left:auto}.parallax-content.center-align{text-align:center;margin:0 auto}.da-vinci-title{letter-spacing:-.05em;text-transform:uppercase;margin-bottom:2rem;font-size:clamp(4rem,8vw,8rem);font-weight:800;line-height:.9}.da-vinci-text{opacity:.9;font-size:1.5rem;font-weight:300;line-height:1.8}.portfolio-container{padding-bottom:5rem;padding-top:calc(var(--nav-height) + 2rem)}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;padding:0 5%;display:grid}.portfolio-item{cursor:none;background-position:50%;background-size:cover;border-radius:20px;height:500px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0003}.refraction-lens{-webkit-backdrop-filter:blur()saturate();backdrop-filter:blur()saturate();text-align:center;opacity:0;color:#fff;background:#ffffff0d;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;transition:opacity .5s cubic-bezier(.25,1,.5,1),-webkit-backdrop-filter .5s cubic-bezier(.25,1,.5,1),backdrop-filter .5s cubic-bezier(.25,1,.5,1);display:flex;position:absolute;top:0;left:0}.portfolio-item:hover .refraction-lens{opacity:1;-webkit-backdrop-filter:blur(15px)saturate(150%)brightness(.8);backdrop-filter:blur(15px)saturate(150%)brightness(.8)}.refraction-lens h2{margin-bottom:.5rem;font-size:2.5rem;transition:transform .5s cubic-bezier(.25,1,.5,1);transform:translateY(20px)}.refraction-lens p{color:var(--color-primary);font-size:1.1rem;font-weight:300;transition:transform .5s cubic-bezier(.25,1,.5,1) .1s;transform:translateY(20px)}.portfolio-item:hover .refraction-lens h2,.portfolio-item:hover .refraction-lens p{transform:translateY(0)}@media (width<=768px){.portfolio-grid{grid-template-columns:1fr}.da-vinci-title{font-size:3rem}.parallax-section{background-attachment:scroll}}
