/* ============================================
   febsite.id — Premium Web Development Agency
   STANDALONE Stylesheet (Works WITHOUT Tailwind CDN)
   ============================================ */

:root{--base:#050505;--surface:#0f0f13;--primary:#0055FF;--accent:#00c8ff;--w5:rgba(255,255,255,.05);--w10:rgba(255,255,255,.1);--w20:rgba(255,255,255,.2);--w40:rgba(255,255,255,.4);--w60:rgba(255,255,255,.6);--w80:rgba(255,255,255,.8)}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background-color:var(--base);color:#fff;overflow-x: hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--base)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* Display */
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.block{display:block}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}
.col-span-1{grid-column:span 1/span 1}
@media(min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:w-auto{width:auto}.sm\:items-center{align-items:center}}
@media(min-width:768px){.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:block{display:block}.md\:flex-row{flex-direction:row}.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:col-span-2{grid-column:span 2/span 2}.md\:items-end{align-items:flex-end}}

/* Position */
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}.top-20{top:5rem}.top-\[-20\%\]{top:-20%}
.left-0{left:0}.left-1\/2{left:50%}.left-\[-10\%\]{left:-10%}
.bottom-\[-20\%\]{bottom:-20%}.right-\[-10\%\]{right:-10%}
.z-10{z-index:10}.z-50{z-index:50}.z-\[999\]{z-index:999}.-z-10{z-index:-10}
.pointer-events-none{pointer-events:none}

/* Width/Height */
.w-full{width:100%}.w-auto{width:auto}.w-2{width:.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-28{width:7rem}.w-52{width:13rem}
.w-\[50vw\]{width:50vw}.w-\[40vw\]{width:40vw}
.h-2{height:.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-28{height:7rem}.h-\[3px\]{height:3px}.h-\[50vw\]{height:50vw}.h-\[40vw\]{height:40vw}.h-\[320px\]{height:320px}.h-full{height:100%}
.min-h-screen{min-height:100vh}
@media(min-width:768px){.md\:w-6{width:1.5rem}.md\:w-7{width:1.75rem}.md\:w-10{width:2.5rem}.md\:w-12{width:3rem}.md\:w-14{width:3.5rem}.md\:w-36{width:9rem}.md\:w-72{width:18rem}.md\:h-5{height:1.25rem}.md\:h-6{height:1.5rem}.md\:h-7{height:1.75rem}.md\:h-10{height:2.5rem}.md\:h-12{height:3rem}.md\:h-14{height:3.5rem}.md\:h-36{height:9rem}.md\:h-\[500px\]{height:500px}}

/* Spacing */
.p-4{padding:1rem}.p-6{padding:1.5rem}.p-10{padding:2.5rem}
.px-2{padding-inline:.5rem}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.px-8{padding-inline:2rem}
.py-1{padding-block:.25rem}.py-1\.5{padding-block:.375rem}.py-2{padding-block:.5rem}.py-2\.5{padding-block:.625rem}.py-3{padding-block:.75rem}.py-4{padding-block:1rem}.py-6{padding-block:1.5rem}.py-16{padding-block:4rem}
.pt-8{padding-top:2rem}.pt-20{padding-top:5rem}.pb-8{padding-bottom:2rem}
.m-auto{margin:auto}.mx-auto{margin-inline:auto}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-24{margin-bottom:6rem}
.mt-6{margin-top:1.5rem}.mt-10{margin-top:2.5rem}
.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
@media(min-width:768px){.md\:p-6{padding:1.5rem}.md\:p-10{padding:2.5rem}.md\:px-6{padding-inline:1.5rem}.md\:px-8{padding-inline:2rem}.md\:px-10{padding-inline:2.5rem}.md\:py-4{padding-block:1rem}.md\:py-5{padding-block:1.25rem}.md\:py-6{padding-block:1.5rem}.md\:py-10{padding-block:2.5rem}.md\:py-24{padding-block:6rem}.md\:pt-10{padding-top:2.5rem}.md\:pt-32{padding-top:8rem}.md\:mb-3{margin-bottom:.75rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mb-10{margin-bottom:2.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-24{margin-bottom:6rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:gap-10{gap:2.5rem}}

/* Typography */
.text-center{text-align:center}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}
.text-\[10px\]{font-size:10px}.text-\[12vw\]{font-size:12vw}
.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.font-display{font-family:'Space Grotesk',sans-serif}.font-mono{font-family:monospace}
.uppercase{text-transform:uppercase}
.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.tracking-\[0\.25em\]{letter-spacing:.25em}
.leading-\[1\.1\]{line-height:1.1}.leading-relaxed{line-height:1.625}
.select-none{user-select:none}
@media(min-width:768px){.md\:text-xs{font-size:.75rem}.md\:text-sm{font-size:.875rem}.md\:text-base{font-size:1rem}.md\:text-lg{font-size:1.125rem}.md\:text-xl{font-size:1.25rem}.md\:text-2xl{font-size:1.5rem}.md\:text-3xl{font-size:1.875rem}.md\:text-5xl{font-size:3rem}.md\:text-7xl{font-size:4.5rem}}
@media(min-width:1024px){.lg\:text-\[6rem\]{font-size:6rem}}

/* Text Colors */
.text-white{color:#fff}.text-accent{color:var(--accent)}.text-purple-400{color:#c084fc}.text-green-400{color:#4ade80}.text-accent\/80{color:rgba(0,200,255,.8)}
.hover\:text-white:hover{color:#fff}.hover\:text-accent:hover{color:var(--accent)}

/* Background Colors */
.bg-white{background:#fff}.bg-white\/5{background:var(--w5)}.bg-white\/10{background:var(--w10)}
.bg-white\/\[0\.02\]{background:rgba(255,255,255,.02)}.bg-white\/\[0\.06\]{background:rgba(255,255,255,.06)}
.bg-primary\/10{background:rgba(0,85,255,.1)}.bg-primary\/20{background:rgba(0,85,255,.2)}
.bg-accent\/10{background:rgba(0,200,255,.1)}.bg-accent\/20{background:rgba(0,200,255,.2)}
.bg-purple-500\/10{background:rgba(168,85,247,.1)}.bg-green-500\/10{background:rgba(34,197,94,.1)}
.bg-accent,.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-white\/5:hover{background:var(--w5)}

/* Gradient Utilities */
#splash-bar{background:linear-gradient(to right,var(--primary),var(--accent),var(--accent))!important}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from,var(--primary)),var(--tw-to,var(--accent)))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--base),rgba(5,5,5,.5),transparent)}
a[href="mailto:hello@febsite.id"]:hover{background:linear-gradient(to right,var(--primary),var(--accent));color:#fff}

/* Text Gradients */
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-glow{text-shadow:0 0 30px rgba(0,200,255,.5)}

/* Borders */
.border{border:1px solid}.border-b{border-bottom:1px solid}.border-y{border-top:1px solid;border-bottom:1px solid}.border-t{border-top:1px solid}
.border-transparent{border-color:transparent}.border-white\/5{border-color:var(--w5)}.border-white\/10{border-color:var(--w10)}.border-white\/20{border-color:var(--w20)}
.border-accent\/30{border-color:rgba(0,200,255,.3)}.border-primary\/20{border-color:rgba(0,85,255,.2)}.border-purple-500\/20{border-color:rgba(168,85,247,.2)}.border-green-500\/20{border-color:rgba(34,197,94,.2)}
.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-\[1\.5rem\]{border-radius:1.5rem}
@media(min-width:768px){.md\:rounded-\[2rem\]{border-radius:2rem}}

/* Backdrop Blur */
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Max-width */
.max-w-7xl{max-width:80rem}.max-w-5xl{max-width:64rem}.max-w-4xl{max-width:56rem}.max-w-2xl{max-width:42rem}.max-w-xl{max-width:36rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}

/* Shadows */
.shadow-\[0_0_10px_rgba\(0\2c 200\2c 255\2c 0\.5\)\]{box-shadow:0 0 10px rgba(0,200,255,.5)}
.shadow-\[0_0_15px_rgba\(0\2c 200\2c 255\2c 0\.2\)\]{box-shadow:0 0 15px rgba(0,200,255,.2)}
.shadow-\[0_0_20px_rgba\(0\2c 200\2c 255\2c 0\.3\)\]{box-shadow:0 0 20px rgba(0,200,255,.3)}
.shadow-\[0_0_20px_rgba\(255\2c 255\2c 255\2c 0\.1\)\]{box-shadow:0 0 20px rgba(255,255,255,.1)}
.hover\:shadow-\[0_0_30px_rgba\(0\2c 200\2c 255\2c 0\.4\)\]:hover{box-shadow:0 0 30px rgba(0,200,255,.4)}
.hover\:shadow-\[0_0_30px_rgba\(0\2c 200\2c 255\2c 0\.5\)\]:hover{box-shadow:0 0 30px rgba(0,200,255,.5)}

/* Transforms & Transitions */
.transition-all{transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color;transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}
.-translate-x-1\/2{transform:translateX(-50%)}.-rotate-45{transform:rotate(-45deg)}.hover\:-translate-y-1:hover{transform:translateY(-.25rem)}
.group:hover .group-hover\:scale-110{transform:scale(1.1)}.group:hover .group-hover\:translate-y-1{transform:translateY(.25rem)}.group:hover .group-hover\:rotate-0{transform:rotate(0deg)}.group:hover .group-hover\:bg-accent{background-color:var(--accent)}.group-hover\:opacity-80{opacity:.8}

/* Blur / Opacity */
.blur-\[120px\]{filter:blur(120px)}.blur-sm{filter:blur(4px)}.opacity-0{opacity:0}.opacity-90{opacity:.9}
.object-contain{object-fit:contain}.object-cover{object-fit:cover}.cursor-pointer{cursor:pointer}
.bg-cover{background-size:cover}.bg-center{background-position:center}

/* Animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes splash-fadeUp{to{opacity:1;transform:translateY(0)}}
.animate-pulse{animation:pulse 2s infinite}
.animate-\[marquee_25s_linear_infinite\]{animation:marquee 25s linear infinite}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}.reveal.active{opacity:1;transform:translateY(0)}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}

/* Project Cards */
.project-img{transition:transform .7s cubic-bezier(.16,1,.3,1)}.project-card:hover .project-img{transform:scale(1.05)}

/* Noise */
.noise{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:50;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Glass Cards */
.glass-card{background:rgba(255,255,255,.02);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--w5);border-radius:24px;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease}
.glass-card::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(0,200,255,.1),transparent 40%);z-index:0;opacity:0;transition:opacity .3s ease;pointer-events:none}
.glass-card:hover{border-color:rgba(0,200,255,.3);transform:translateY(-4px)}.glass-card:hover::before{opacity:1}.card-content{position:relative;z-index:1}

/* Splash */
.splash-title{animation:splash-fadeUp .8s cubic-bezier(.16,1,.3,1) forwards;opacity:0;transform:translateY(12px)}.splash-subtitle{animation:splash-fadeUp .8s cubic-bezier(.16,1,.3,1) .2s forwards;opacity:0;transform:translateY(12px)}#splash{transition:opacity .7s cubic-bezier(.16,1,.3,1),visibility .7s}#splash.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s cubic-bezier(.16,1,.3,1),visibility .6s}

/* Scrollbar */
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#050505}::-webkit-scrollbar-thumb{background:#1f1f2e;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Mobile */
@media(max-width:768px){.min-h-screen{min-height:90vh}#mobile-menu{transition:all .3s ease}#mobile-menu:not(.hidden){animation:slideDown .3s ease forwards}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-card:active{border-color:rgba(0,200,255,.3);transform:translateY(-2px)}.text-\[12vw\]{font-size:18vw}.project-card:active .project-img{transform:scale(1.03)}}

.fill-accent{fill:var(--accent)}