.webdev-reveal {opacity:0 !important;visibility:hidden !important;filter:blur(8px);transform:translateY(60px);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),filter 0.8s ease-out;} .webdev-reveal.is-visible {opacity:1 !important;visibility:visible !important;filter:blur(0) !important;transform:translateY(0) !important;} @media (max-width:1023px) {.webdev-stack-card {margin-bottom:30px;}} .webdev-hero-section {margin-top:10vh;margin-bottom:10vh;position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;box-sizing:border-box;min-height:70vh;} .webdev-hero-cta-wrapper {margin-top:2vw;} .webdev-agency-slogan {font-size:1.4rem;color:#777;margin-bottom:0.5rem;letter-spacing:3px;text-transform:uppercase;} .webdev-headline {font-size:clamp(2.5rem,8vw,5.5rem);font-weight:900;letter-spacing:-3px;margin:0;line-height:1.1;color:#fff;} .webdev-static-text {color:#777;} .webdev-torch-text {display:inline-block;color:#fff;text-shadow:0 0 20px rgba(255,255,255,0);transition:text-shadow 0.3s ease;} .webdev-typewriter-cursor {display:inline-block;width:10px;height:1.2em;background-color:#fff;margin-left:10px;vertical-align:middle;animation:webdev-cursor-blink-animation 0.8s step-end infinite;} .webdev-section-header {width:100%;padding:80px 8% 20px;}
.webdev-section-title {font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:#fff;text-transform:uppercase;margin:0;} .webdev-service-section {display:block;} .webdev-services-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:20px 5% 100px;max-width:1400px;width:90%;margin:5vw auto 0;box-sizing:content-box;} .webdev-card {background:#0d1117;border:1px solid rgba(255,255,255,0.08);padding:50px 40px;display:flex;flex-direction:column;overflow:hidden;transition:transform 0.5s cubic-bezier(0.23,1,0.32,1),background 0.5s ease,border-color 0.5s ease,box-shadow 0.5s ease;contain:layout style paint;} @media (hover:hover) {.webdev-services-grid .webdev-card:hover {transform:translateY(-10px) scale(1.05);border-color:#fff;box-shadow:0 0 20px white;z-index:10;}} .webdev-icon-box {width:100%;margin-bottom:30px;display:flex;} .webdev-card-icon {width:48px;height:48px;color:rgba(255,255,255,0.4);transition:margin-left 0.6s cubic-bezier(0.23,1,0.32,1),transform 0.6s cubic-bezier(0.23,1,0.32,1),color 0.4s ease;} @media (hover:hover) {.webdev-card:hover .webdev-card-icon {color:#fff;margin-left:50%;transform:translateX(-50%) scale(2);filter:drop-shadow(0 0 15px rgba(255,255,255,0.6));}} .webdev-card-title {font-size:1.8rem;font-weight:900;color:#fff;margin-bottom:15px;text-transform:uppercase;}
.webdev-card-text {color:#94a3b8;line-height:1.6;} .webdev-stack-section {position:relative;width:100%;height:fit-content;margin:15vh auto;display:block;padding:0;} .webdev-stack-container {width:90%;max-width:850px;margin:0 auto;position:relative;} .webdev-section-intro {text-align:center;margin-bottom:80px;} .webdev-stack-card {position:relative;width:100%;min-height:300px;background:#0d1117;border:1px solid rgba(255,255,255,0.1);padding:60px 50px;margin-bottom:20vh;box-shadow:0 -20px 50px rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;text-align:center;box-sizing:border-box;transition:transform 0.5s cubic-bezier(0.23,1,0.32,1),background 0.5s ease,border-color 0.5s ease,box-shadow 0.5s ease;contain:layout style paint;} .webdev-stack-card:nth-child(2) {z-index:10;}
.webdev-stack-card:nth-child(3) {z-index:20;}
.webdev-stack-card:nth-child(4) {z-index:30;}
.webdev-stack-card:nth-child(5) {z-index:40;} .webdev-card-icon-container {width:50px;height:50px;color:rgba(255,255,255,0.5);margin-bottom:25px;transition:transform 0.6s cubic-bezier(0.23,1,0.32,1),color 0.4s ease;display:flex;align-items:center;justify-content:center;} .webdev-card-icon-container svg {width:100%;height:100%;} @media (hover:hover) {.webdev-stack-card:hover {border-color:#fff;box-shadow:0 0 20px white;} .webdev-stack-card:hover .webdev-card-number {color:#fff;} .webdev-stack-card:hover .webdev-card-icon-container {color:#fff;transform:scale(1.8) translateY(-10px);filter:drop-shadow(0 0 10px rgba(255,255,255,0.4));}} .webdev-card-number {position:absolute;top:25px;right:35px;font-family:'JetBrains Mono',monospace;font-size:3rem;color:rgba(255,255,255,0.15);font-weight:800;transition:color 0.4s ease;} .webdev-stack-card h3.webdev-card-title {font-size:1.8rem;font-weight:900;color:#fff;margin:0 0 15px 0;text-transform:uppercase;letter-spacing:2px;}
.webdev-stack-card p.webdev-card-text {font-size:1.1rem;color:#94a3b8;line-height:1.7;margin:0;}
.webdev-card-plus {display:block;margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:0.9rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px;} .webdev-projects-section {width:100%;padding:100px 0;display:flex;justify-content:center;box-sizing:border-box;height:auto;}
.webdev-projects-container {width:90%;max-width:1400px;margin:0 auto;}
.webdev-projects-grid {margin-top:5vw;margin-bottom:5vw;display:grid;grid-template-columns:repeat(2,1fr);gap:30px;width:100%;} .webdev-project-card {position:relative;height:500px;background:#0d1117;border:1px solid rgba(255,255,255,0.05);overflow:hidden;transition:transform 0.6s cubic-bezier(0.23,1,0.32,1);cursor:pointer;contain:layout style paint;}
.webdev-project-image {width:100%;height:100%;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(0.23,1,0.32,1);}
.webdev-project-overlay {position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.55) 60%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:40px;}
.webdev-project-overlay::before {content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--accent,#000) 0%,transparent 60%);opacity:0;transition:opacity 0.5s cubic-bezier(0.23,1,0.32,1);pointer-events:none;}
@media (hover:hover) {.webdev-project-card:hover .webdev-project-image {transform:scale(1.08);} .webdev-project-card:hover .webdev-project-overlay {background:linear-gradient(to top,rgba(0,0,0,0.97) 0%,rgba(0,0,0,0.75) 60%,transparent 100%);} .webdev-project-card:hover .webdev-project-overlay::before {opacity:0.75;} .webdev-project-card:hover .webdev-fake-btn::after {transform:translateX(10px);}}
.webdev-project-title {font-size:2rem;font-weight:900;color:#fff;margin:0 0 10px 0;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,0.9);position:relative;z-index:1;}
.webdev-project-text {color:#94a3b8;font-size:1rem;margin-bottom:20px;max-width:80%;text-shadow:0 2px 8px rgba(0,0,0,0.9);position:relative;z-index:1;}
.webdev-fake-btn {font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:#fff;text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:10px;}
.webdev-fake-btn::after {content:'\\2192';transition:transform 0.3s ease;} .back-link {font-family:'JetBrains Mono',monospace;color:#94a3b8;text-decoration:none;font-size:.8rem;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;letter-spacing:1px;} .back-link:hover {color:#fff;transform:translateX(-5px);} .webdev-about-section {height:fit-content;display:flex;align-items:center;justify-content:center;padding:100px 5vw;width:100%;position:relative;box-sizing:border-box;} .webdev-about-container {padding-left:5vw;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;width:100%;max-width:1200px;margin:0 auto;} .webdev-about-content {display:flex;flex-direction:column;align-items:flex-start;}
.webdev-about-description {font-size:1.15rem;color:#94a3b8;line-height:1.8;max-width:550px;margin-top:30px;}
.webdev-about-description strong {color:#fff;font-weight:600;}
.webdev-about-stats {display:flex;gap:40px;margin-top:50px;border-top:1px solid rgba(255,255,255,0.1);padding-top:30px;width:100%;}
.webdev-stat-item {display:flex;flex-direction:column;}
.webdev-stat-number {font-family:'JetBrains Mono',monospace;font-size:1.3rem;color:#fff;font-weight:800;}
.webdev-stat-label {font-size:0.75rem;text-transform:uppercase;color:#64748b;letter-spacing:1px;} .webdev-visual-wrapper {position:relative;width:400px;height:400px;display:flex;align-items:center;justify-content:center;}
.webdev-core-sphere {width:60px;height:60px;background:#fff;border-radius:50%;box-shadow:0 0 50px rgba(255,255,255,0.3);animation:corePulse 4s infinite ease-in-out;z-index:5;}
.webdev-orbit-ring {position:absolute;border:1px solid rgba(255,255,255,0.08);border-radius:50%;}
.ring-1 {width:220px;height:220px;animation:rotate 20s linear infinite;}
.ring-2 {width:320px;height:320px;animation:rotate 30s linear infinite reverse;}
.webdev-floating-code-card {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(13,17,23,0.95);border:1px solid rgba(255,255,255,0.1);padding:20px;width:260px;box-shadow:0 20px 50px rgba(0,0,0,0.6);z-index:10;animation:floatCentered 6s infinite ease-in-out;}
.webdev-code-header {display:flex;gap:6px;margin-bottom:12px;}
.dot {width:8px;height:8px;border-radius:50%;}
.red {background:#ff5f56;} .yellow {background:#ffbd2e;} .green {background:#27c93f;}
.webdev-code-body {font-family:'JetBrains Mono',monospace;font-size:0.8rem;margin:0;line-height:1.5;}
.keyword {color:#c678dd;} .var {color:#e06c75;} .string {color:#98c379;} .number {color:#d19a66;}
.webdev-floating-tag {position:absolute;padding:6px 12px;background:#0d1117;border:1px solid rgba(255,255,255,0.1);font-family:'JetBrains Mono';font-size:0.7rem;color:#fff;transition:box-shadow 0.4s ease;}
.tag-top {top:10%;left:0;animation:floatAnim 5s infinite ease-in-out;}
.tag-bottom {bottom:10%;right:0;animation:floatAnim 8s infinite ease-in-out reverse;} @keyframes corePulse {0%,100% {transform:scale(1);opacity:0.6;} 50% {transform:scale(1.15);opacity:1;}}
@keyframes rotate {from {transform:rotate(0deg);} to {transform:rotate(360deg);}}
@keyframes floatCentered {0%,100% {transform:translate(-50%,-50%);} 50% {transform:translate(-50%,-60%);}}
@keyframes floatAnim {0%,100% {transform:translateY(0);} 50% {transform:translateY(-15px);}}
@keyframes webdev-cursor-blink-animation {from,to {opacity:1;} 50% {opacity:0;}} .webdev-reveal-left {opacity:0 !important;visibility:hidden !important;filter:blur(8px);transform:translateX(-80px);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),filter 0.8s ease-out;} .webdev-reveal-left.is-visible {opacity:1 !important;visibility:visible !important;filter:blur(0) !important;transform:translateX(0) !important;} .webdev-reveal-right {opacity:0 !important;visibility:hidden !important;filter:blur(8px);transform:translateX(80px);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),filter 0.8s ease-out;} .webdev-reveal-right.is-visible {opacity:1 !important;visibility:visible !important;filter:blur(0) !important;transform:translateX(0) !important;} .webdev-reveal-scale {opacity:0 !important;visibility:hidden !important;filter:blur(8px);transform:scale(0.85);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),filter 0.8s ease-out;} .webdev-reveal-scale.is-visible {opacity:1 !important;visibility:visible !important;filter:blur(0) !important;transform:scale(1) !important;} .webdev-reveal-fade {opacity:0 !important;visibility:hidden !important;transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1);} .webdev-reveal-fade.is-visible {opacity:1 !important;visibility:visible !important;} .webdev-reveal-up {opacity:0 !important;visibility:hidden !important;filter:blur(8px);transform:translateY(-60px);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),filter 0.8s ease-out;} .webdev-reveal-up.is-visible {opacity:1 !important;visibility:visible !important;filter:blur(0) !important;transform:translateY(0) !important;} @media (max-width:1023px) {.webdev-reveal {filter:blur(8px);transform:translateY(60px);} .webdev-reveal.is-visible {filter:blur(0) !important;transform:translateY(0) !important;} .webdev-reveal-left,.webdev-reveal-right,.webdev-reveal-up {filter:blur(8px);transform:translateY(60px);} .webdev-reveal-left.is-visible,.webdev-reveal-right.is-visible,.webdev-reveal-up.is-visible {filter:blur(0) !important;transform:translateY(0) !important;} .webdev-reveal-scale {filter:blur(8px);transform:scale(0.85);} .webdev-reveal-scale.is-visible {filter:blur(0) !important;transform:scale(1) !important;} .webdev-services-grid {grid-template-columns:repeat(2,1fr);width:95%;padding:20px 2.5% 80px;box-sizing:content-box;} .webdev-projects-section {height:auto;padding:50px 5%;display:block;} .webdev-projects-grid {grid-template-columns:1fr;gap:20px;margin:30px 0;} .webdev-project-card {height:400px;width:100%;} .webdev-stack-section {margin:200px 0;} .webdev-visual-wrapper {width:350px;height:350px;}} @media (max-width:768px) {.webdev-hero-section {min-height:60vh;padding-top:120px;} .webdev-headline {font-size:2.5rem;letter-spacing:-1px;} .webdev-services-grid {grid-template-columns:1fr;padding:20px 0 60px;width:100%;} .webdev-card {padding:40px 25px;} .webdev-card-title {font-size:1.5rem;} .webdev-about-section {width:100%;} .webdev-about-container {grid-template-columns:1fr;padding:0;} .webdev-about-content {align-items:center;text-align:center;width:97%;} .webdev-about-visual {align-items:center;text-align:center;width:100%;} .webdev-about-stats {justify-content:center;} .webdev-visual-wrapper {width:300px;height:300px;transform:scale(0.85);margin:20px auto 0;} .webdev-about-description {font-size:1rem;} .webdev-projects-container {width:95%;} .webdev-project-card {height:350px;max-width:100%;} .webdev-project-overlay {padding:25px;} .webdev-projects-section {padding:50px 5%;} .webdev-project-title {font-size:1.5rem;} .webdev-stack-section {margin:100px 0;} .webdev-stack-card {margin-bottom:30px;padding:40px 25px;min-height:auto;} .webdev-stack-card h3.webdev-card-title {font-size:1.4rem;} .webdev-stack-card p.webdev-card-text {font-size:1rem;} .webdev-hero-section .webdev-agency-slogan {font-size:1rem;}} @media (max-width:480px) {.webdev-headline {font-size:2rem;letter-spacing:0;} .webdev-hero-section .webdev-agency-slogan {font-size:1rem;} .webdev-visual-wrapper {width:260px;height:260px;transform:scale(0.75);} .webdev-project-card {height:280px;} .webdev-about-description {font-size:0.9rem;} .webdev-card {padding:30px 20px;} .webdev-card-title {font-size:1.2rem;} .webdev-card-text {font-size:0.9rem;} .webdev-projects-container {width:95%;} .webdev-projects-section {padding:40px 2%;} .webdev-project-overlay {padding:20px;} .webdev-project-title {font-size:1.2rem;} .webdev-project-text {font-size:0.85rem;max-width:100%;}} @media (pointer:coarse) {.webdev-reveal,.webdev-reveal-left,.webdev-reveal-right,.webdev-reveal-up {filter:blur(3px);transform:translateY(30px);transition-duration:.6s,.6s,.5s;} .webdev-reveal-scale {filter:blur(3px);transform:scale(.92);transition-duration:.6s,.6s,.5s;} .webdev-reveal.is-visible,.webdev-reveal-left.is-visible,.webdev-reveal-right.is-visible,.webdev-reveal-up.is-visible {filter:blur(0) !important;} .webdev-reveal-scale.is-visible {filter:blur(0) !important;} .webdev-core-sphere,.ring-1,.ring-2,.webdev-floating-code-card,.webdev-floating-tag {animation:none !important;} .webdev-floating-code-card {transform:translate(-50%,-50%);} .tag-top {transform:none;} .tag-bottom {transform:none;}} .webdev-lang-btn {display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,0.5);text-decoration:none;border:1px solid rgba(255,255,255,0.2);padding:4px 10px;border-radius:4px;transition:color .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;white-space:nowrap;margin:0 14px 0 14px;text-transform:uppercase;} .webdev-lang-btn:hover {color:#fff;border-color:#fff;background:rgba(255,255,255,0.06);box-shadow:0 0 15px rgba(255,255,255,0.1);} @media (max-width:660px) {.webdev-lang-btn {font-size:1.1rem;margin:18px 0;padding:14px 40px;border:1px solid rgba(255,255,255,0.15);border-radius:50px;margin-left:0;background:rgba(255,255,255,0.04);display:block;text-align:center;}} @media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;} .ring-1,.ring-2,.webdev-core-sphere,.webdev-floating-code-card,.tag-top,.tag-bottom {animation:none !important;}}