.how-i-work-grid{position:relative;display:flex;flex-direction:column;gap:0;margin:3rem auto;max-width:820px;padding-top:2rem}.work-principle{position:sticky;padding:2rem 2.5rem;background:var(--surface-1);border:none;border-top:2px solid transparent;border-radius:20px;box-shadow:0 2px 8px rgba(60,40,20,0.04);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s ease;min-height:280px;margin-bottom:2rem;will-change:transform;position:relative;overflow:hidden}.work-principle::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(0,0,0,0.03),rgba(0,0,0,0.12) 50%,rgba(0,0,0,0.03));border-radius:20px 20px 0 0;z-index:1}.work-principle:nth-child(1){top:2rem;z-index:4}.work-principle:nth-child(2){top:2.5rem;z-index:3}.work-principle:nth-child(3){top:3rem;z-index:2}.work-principle:nth-child(4){top:3.5rem;z-index:1}.work-principle.is-stacking:nth-child(1){transform:scale(1)}.work-principle.is-stacking:nth-child(2){transform:scale(0.97)}.work-principle.is-stacking:nth-child(3){transform:scale(0.94)}.work-principle.is-stacking:nth-child(4){transform:scale(0.91)}@media (hover:hover){.work-principle:hover{transform:translateY(-3px) scale(1.01) !important;box-shadow:0 12px 32px rgba(60,40,20,0.08);z-index:10 !important}}[data-theme="dark"] .work-principle{background:rgba(28,28,32,0.95);border:none;border-top:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,0.2)}[data-theme="dark"] .work-principle::before{background:linear-gradient(90deg,rgba(140,182,255,0.08),rgba(140,182,255,0.35) 50%,rgba(140,182,255,0.08))}@media (hover:hover){[data-theme="dark"] .work-principle:hover{box-shadow:0 12px 32px rgba(168,197,255,0.1),0 4px 12px rgba(0,0,0,0.3)}}.work-principle:nth-child(1){box-shadow:0 4px 12px rgba(60,40,20,0.06)}.work-principle:nth-child(2){box-shadow:0 3px 10px rgba(60,40,20,0.05)}.work-principle:nth-child(3){box-shadow:0 2px 8px rgba(60,40,20,0.04)}.work-principle:nth-child(4){box-shadow:0 1px 6px rgba(60,40,20,0.03)}[data-theme="dark"] .work-principle:nth-child(1){box-shadow:0 4px 12px rgba(0,0,0,0.3)}[data-theme="dark"] .work-principle:nth-child(2){box-shadow:0 3px 10px rgba(0,0,0,0.25)}[data-theme="dark"] .work-principle:nth-child(3){box-shadow:0 2px 8px rgba(0,0,0,0.2)}[data-theme="dark"] .work-principle:nth-child(4){box-shadow:0 1px 6px rgba(0,0,0,0.15)}@media (max-width:768px){.how-i-work-grid{padding-top:1rem}.work-principle{padding:1.5rem;min-height:240px;margin-bottom:1.5rem}.work-principle:nth-child(1){top:1rem}.work-principle:nth-child(2){top:1.25rem}.work-principle:nth-child(3){top:1.5rem}.work-principle:nth-child(4){top:1.75rem}.work-principle.is-stacking:nth-child(2){transform:scale(0.98)}.work-principle.is-stacking:nth-child(3){transform:scale(0.96)}.work-principle.is-stacking:nth-child(4){transform:scale(0.94)}}@media (prefers-reduced-motion:reduce){.work-principle{transition:none;position:relative !important;top:auto !important;transform:none !important;margin-bottom:1.5rem}.work-principle.is-stacking{transform:none !important}}.btn.neomorphic,.btn-neomorphic,.btn.primary,.btn.secondary{position:relative;padding:1.25rem 3rem;font-size:1.25rem;font-weight:600;color:var(--btn-neomorphic-text);border:2px solid transparent;background:linear-gradient(145deg,rgba(255,255,255,0.6),rgba(255,255,255,0.3)) padding-box,linear-gradient(180deg,rgba(0,0,0,0.08),rgba(0,0,0,0.02)) border-box;background-clip:padding-box,border-box;border-radius:20px;box-shadow:var(--btn-neomorphic-shadow);transition:all var(--duration-fast) var(--ease-smooth);cursor:pointer;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);letter-spacing:0.01em}[data-theme="dark"] .btn.neomorphic,[data-theme="dark"] .btn-neomorphic,[data-theme="dark"] .btn.primary,[data-theme="dark"] .btn.secondary{background:linear-gradient(145deg,rgba(26,32,53,0.8),rgba(18,22,37,0.85)) padding-box,linear-gradient(180deg,rgba(140,182,255,0.22),rgba(140,182,255,0.06)) border-box;background-clip:padding-box,border-box}@media (hover:hover){.btn.neomorphic:hover,.btn-neomorphic:hover,.btn.primary:hover,.btn.secondary:hover{transform:translateY(-2px);background:linear-gradient(145deg,rgba(255,255,255,0.75),rgba(255,255,255,0.45)) padding-box,linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.04)) border-box;background-clip:padding-box,border-box;box-shadow:var(--btn-neomorphic-shadow-hover);color:var(--btn-neomorphic-text)}}@media (hover:hover){[data-theme="dark"] .btn.neomorphic:hover,[data-theme="dark"] .btn-neomorphic:hover,[data-theme="dark"] .btn.primary:hover,[data-theme="dark"] .btn.secondary:hover{background:linear-gradient(145deg,rgba(30,38,60,0.9),rgba(22,28,45,0.92)) padding-box,linear-gradient(180deg,rgba(140,182,255,0.32),rgba(140,182,255,0.1)) border-box;background-clip:padding-box,border-box}}.btn.neomorphic:active,.btn-neomorphic:active,.btn.primary:active,.btn.secondary:active,.btn.neomorphic.active,.btn-neomorphic.active,.btn.active{transform:translateY(1px);box-shadow:inset 4px 4px 12px rgba(0,0,0,0.2),inset -2px -2px 8px rgba(255,255,255,0.1)}.btn.btn-small,.btn-neomorphic.btn-small{padding:0.875rem 1.25rem;font-size:1rem;border-radius:16px;min-width:50px;min-height:50px;display:inline-flex;align-items:center;justify-content:center}.case-study-layout,.case-grid,#case-grid{perspective:1200px;perspective-origin:center center}.case-card,.case-study-horizontal-card,.bento-item{position:relative;transform-style:preserve-3d;transition:all 0.6s cubic-bezier(0.23,1,0.32,1)}@media (hover:hover){.case-card:hover,.case-study-horizontal-card:hover,.bento-item:hover{transform:translateZ(40px) rotateY(2deg) rotateX(-2deg);box-shadow:var(--shadow-strong,0 20px 60px rgba(0,0,0,0.2))}}.case-card::before,.case-study-horizontal-card::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 50%,rgba(0,0,0,0.05) 100%);border-radius:inherit;opacity:0;transition:opacity 0.6s var(--ease-smooth);pointer-events:none;z-index:1}@media (hover:hover){.case-card:hover::before,.case-study-horizontal-card:hover::before{opacity:1}}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:var(--beach-overlay)}.hero{position:relative;overflow:hidden;isolation:isolate}.sun-glow,.moon-glow{position:absolute;top:-15%;left:50%;transform:translateX(-50%);width:min(500px,60vw);height:min(500px,60vw);border-radius:50%;filter:blur(65px);opacity:0.5 !important;pointer-events:none;z-index:2;transition:all 1.5s ease;background:var(--sun-glow-bg,none)}:root:not([data-theme="dark"]) .moon-glow{display:none}:root[data-theme="dark"] .sun-glow{display:none}:root:not([data-theme="dark"]) .sun-glow{display:none}:root[data-theme="dark"] .moon-glow{background:var(--moon-glow-bg)}.hero-waves{position:absolute;bottom:-30%;left:-10%;width:120%;height:70%;filter:blur(65px);pointer-events:none;z-index:1;transition:all 2s cubic-bezier(0.23,1,0.32,1);background:var(--wave-gradient);opacity:0.4 !important}@media (hover:hover){.hero:hover .hero-waves{transform:translateY(-30%) scaleY(1.25);filter:blur(60px)}}.hero-waves::before,.hero-waves::after{content:'';position:absolute;bottom:10%;left:0;width:100%;height:40%;opacity:0.4;pointer-events:none}.hero-waves::before{background:var(--wave-ripple-1);animation:wave-ripple 5s ease-in-out infinite}.hero-waves::after{background:var(--wave-ripple-2);animation:wave-ripple 5s ease-in-out 2.5s infinite}@keyframes wave-ripple{0%,100%{transform:translateY(0) scaleX(1);opacity:0.4}50%{transform:translateY(-15%) scaleX(1.05);opacity:0.6}}@media (prefers-reduced-motion:reduce){.case-card,.hero-waves,.sun-glow{transition:none !important;animation:none !important;transform:none !important}}.shader-lines-hover{position:relative;overflow:hidden}.shader-lines-hover::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 2px,rgba(255,255,255,0.6) 2px,rgba(255,255,255,0.6) 4px);-webkit-mask-image:radial-gradient(circle at center,black 40%,transparent 75%);mask-image:radial-gradient(circle at center,black 40%,transparent 75%);opacity:0;transform:scale(0.8);mix-blend-mode:overlay;transition:opacity 0.4s ease,transform 0.4s ease;z-index:2}@media (hover:hover){.shader-lines-hover:hover::after{opacity:0.7;transform:scale(1.1);animation:shaderScroll 20s linear infinite}}@media (hover:hover){:root[data-theme="dark"] .shader-lines-hover:hover::after{opacity:0.8;mix-blend-mode:screen;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 2px,rgba(255,255,255,0.8) 2px,rgba(255,255,255,0.8) 4px)}}@keyframes shaderScroll{from{background-position:0 0}to{background-position:100px 0}}:root[data-theme="dark"] .case-card,:root[data-theme="dark"] .work-card,:root[data-theme="dark"] .side-project-card{background:rgba(15,22,41,0.4) !important;backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,0.08);box-shadow:none;position:relative;overflow:visible}:root[data-theme="dark"] .case-card::before,:root[data-theme="dark"] .work-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,0.3) 0%,rgba(213,226,255,0.18) 15%,rgba(255,255,255,0.08) 30%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.03) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1;transition:background 0.4s ease}@media (hover:hover){:root[data-theme="dark"] .case-card:hover::before,:root[data-theme="dark"] .work-card:hover::before{background:linear-gradient(180deg,rgba(255,255,255,0.6) 0%,rgba(213,226,255,0.4) 10%,rgba(255,255,255,0.25) 20%,rgba(213,226,255,0.15) 35%,rgba(255,255,255,0.08) 60%,rgba(255,255,255,0.04) 100%)}:root[data-theme="dark"] .case-card:hover,:root[data-theme="dark"] .work-card:hover{box-shadow:0 0 20px 2px rgba(213,226,255,0.15)}}:root[data-theme="dark"] .side-project-card::before{z-index:0}:root[data-theme="dark"] .testimonial-card,:root[data-theme="dark"] .testimonial-card-mini,:root[data-theme="dark"] .insight-card,:root[data-theme="dark"] .bento-card,:root[data-theme="dark"] .card{position:relative;border:1px solid rgba(255,255,255,0.08);box-shadow:none;overflow:visible}:root[data-theme="dark"] .testimonial-card::before,:root[data-theme="dark"] .testimonial-card-mini::before,:root[data-theme="dark"] .insight-card::before,:root[data-theme="dark"] .bento-card::before,:root[data-theme="dark"] .card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,0.3) 0%,rgba(213,226,255,0.18) 15%,rgba(255,255,255,0.08) 30%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.03) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1;transition:background 0.4s ease}@media (hover:hover){:root[data-theme="dark"] .testimonial-card:hover::before,:root[data-theme="dark"] .testimonial-card-mini:hover::before,:root[data-theme="dark"] .insight-card:hover::before,:root[data-theme="dark"] .bento-card:hover::before,:root[data-theme="dark"] .card:hover::before{background:linear-gradient(180deg,rgba(255,255,255,0.6) 0%,rgba(213,226,255,0.4) 10%,rgba(255,255,255,0.25) 20%,rgba(213,226,255,0.15) 35%,rgba(255,255,255,0.08) 60%,rgba(255,255,255,0.04) 100%)}:root[data-theme="dark"] .testimonial-card:hover,:root[data-theme="dark"] .testimonial-card-mini:hover,:root[data-theme="dark"] .insight-card:hover,:root[data-theme="dark"] .bento-card:hover,:root[data-theme="dark"] .card:hover{box-shadow:0 0 20px 2px rgba(213,226,255,0.15)}}:root[data-theme="dark"] body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,0.8),transparent),radial-gradient(2px 2px at 60% 70%,rgba(200,220,255,0.7),transparent),radial-gradient(1px 1px at 50% 50%,rgba(255,255,255,0.6),transparent),radial-gradient(1px 1px at 80% 10%,rgba(180,200,240,0.7),transparent),radial-gradient(2px 2px at 90% 60%,rgba(220,230,255,0.6),transparent),radial-gradient(1px 1px at 33% 80%,rgba(255,255,255,0.7),transparent),radial-gradient(1px 1px at 15% 60%,rgba(190,210,245,0.6),transparent),radial-gradient(2px 2px at 70% 25%,rgba(255,255,255,0.7),transparent);background-size:200% 200%,180% 180%,220% 220%,190% 190%,210% 210%,240% 240%,200% 200%,230% 230%;background-position:0% 0%,100% 100%,50% 50%,80% 20%,20% 80%,60% 40%,40% 60%,10% 90%;pointer-events:none;z-index:-1;opacity:0.3}:root[data-theme="dark"] body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(1px 1px at 25% 20%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 75% 40%,rgba(200,220,255,0.4),transparent),radial-gradient(1px 1px at 45% 65%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 85% 85%,rgba(180,200,240,0.4),transparent),radial-gradient(1px 1px at 10% 45%,rgba(220,230,255,0.5),transparent),radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,0.4),transparent);background-size:250% 250%,200% 200%,220% 220%,240% 240%,230% 230%,210% 210%;background-position:50% 50%,20% 80%,70% 30%,30% 70%,90% 10%,10% 90%;pointer-events:none;z-index:-1;opacity:0.2}@keyframes twinkle{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:0.3;transform:scale(1.05)}}:root[data-theme="dark"] .site-footer{position:relative;background:transparent;overflow:hidden}:root[data-theme="dark"] .site-footer::before{content:'';position:absolute;bottom:-50%;left:20%;width:60%;height:300px;background:radial-gradient(ellipse at center,var(--accent) 0%,transparent 70%);filter:blur(80px);opacity:0.15;pointer-events:none;z-index:-1}@media (prefers-reduced-motion:reduce){.shader-lines-hover:hover::after{animation:none}:root[data-theme="dark"] body::before,:root[data-theme="dark"] body::after{animation:none;opacity:0.4}:root[data-theme="dark"] .case-card::before,:root[data-theme="dark"] .work-card::before,:root[data-theme="dark"] .testimonial-card::before,:root[data-theme="dark"] .testimonial-card-mini::before,:root[data-theme="dark"] .insight-card::before,:root[data-theme="dark"] .bento-card::before,:root[data-theme="dark"] .card::before{transition:none}}