@import url('https://fonts.googleapis.com/css2?family=Argentum+Sans:wght@400;600;800&display=swap');



* { box-sizing: border-box; }



img {

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

}



html, body { scrollbar-width: none; -ms-overflow-style: none; }

::-webkit-scrollbar { display: none; }



#custom-scrollbar {

    position: fixed;

    top: 300px;

    bottom: 300px;

    right: 20px;

    width: 6px;

    z-index: 9999;

    background: rgba(255,255,255,0.05);

    border-radius: 10px;

    overflow: hidden;

}



#custom-scrollbar-thumb {

    width: 100%;

    height: 50px;

    background: rgba(255,255,255,0.2);

    border-radius: 10px;

    transition: background 0.3s;

}



#custom-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }



html {

    height: 100%;

    background: radial-gradient(ellipse at bottom, #151515 0%, #000000 100%);

    background-attachment: fixed;

    overflow-x: hidden;

}



body {

    font-family: 'Argentum Sans', sans-serif;

    font-weight: 400;

    margin: 0;

    color: white;

}



@media (prefers-reduced-motion: no-preference) {

    body { animation: fadeInPage 1s ease-out; }

}



@keyframes fadeInPage { from { opacity: 0; } to { opacity: 1; } }



#stars, #stars2, #stars3 {

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: transparent;

    z-index: -1;

}



#stars  { width:1px; height:1px; box-shadow:100px 200px #AAA,500px 800px #888,900px 300px #AAA,1500px 100px #888,200px 1500px #AAA,1200px 1200px #888,1800px 500px #AAA; animation: animStar 50s  linear infinite; }

#stars2 { width:2px; height:2px; box-shadow:300px 400px #CCC,800px 900px #AAA,1100px 200px #CCC,400px 1000px #AAA,1600px 300px #CCC; animation: animStar 100s linear infinite; }

#stars3 { width:3px; height:3px; box-shadow:600px 100px #EEE,100px 1200px #CCC,1400px 800px #EEE,1900px 1000px #EEE; animation: animStar 150s linear infinite; }



@keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-100vh); } }



.menu-container { position: fixed; top: 30px; right: 30px; z-index: 1000; }



.menu-btn {

    cursor: pointer;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(30px) saturate(180%);

    border: 1px solid rgba(255,255,255,0.18);

    box-shadow: 0 8px 32px rgba(255,255,255,0.08), inset 0 1px 1px rgba(255,255,255,0.15);

    color: white;

    padding: 20px 40px;

    border-radius: 999px;

    transition: all .45s cubic-bezier(.22,1,.36,1);

    font-weight: 800;

    font-size: 1.1rem;

    font-family: 'Argentum Sans', sans-serif;

}



.menu-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; }

.menu-btn:hover { transform: translateY(-3px) scale(1.03); background: rgba(255,255,255,0.12); }



.island-menu {

    position: absolute;

    top: 85px; right: 0;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(35px) saturate(180%);

    border: 1px solid rgba(255,255,255,0.18);

    box-shadow: 0 20px 60px rgba(0,0,0,.35);

    border-radius: 35px;

    padding: 20px;

    width: 260px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px) scale(.95);

    transition: all .45s cubic-bezier(.22,1,.36,1);

}



.island-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }



.island-menu a {

    cursor: pointer;

    display: block;

    color: #fff;

    text-decoration: none;

    padding: 18px 25px;

    transition: .3s;

    border-radius: 25px;

    font-size: 1.1rem;

}



.island-menu a:hover { background: rgba(255,255,255,.12); transform: translateX(6px); }

.island-menu a:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -2px; }



.bold { font-weight: 800 !important; }

h2 { font-weight: 800 !important; }

.service-item p:first-child { font-weight: 800 !important; margin-bottom: 20px !important; }



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 50px;

    margin-top: 50px;

    text-align: left;

}



.service-item {

    position: relative;

    background: rgba(26,26,26,0.6);

    backdrop-filter: blur(10px);

    padding: 30px;

    border-radius: 50px;

    border: 1px solid rgba(255,255,255,0.1);

    overflow: hidden;

}



.service-item::before {

    content: "";

    position: absolute;

    top: -50px; left: -50px;

    width: 150px; height: 150px;

    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);

    pointer-events: none;

}



.content-wrapper {

    position: relative;

    z-index: 2;

    padding: 80px 20px 32px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    max-width: 1100px;

    margin: auto;

}



.hero-logo {

    width: 400px;

    max-width: 90vw;

    margin-bottom: 80px;

}



.hero-text-large {

    font-size: 50px;

    margin-bottom: 20px;

}



.hero-text {

    font-size: 24px;

    line-height: 1.6;

    margin: 0 0 20px 0;

}



.services-title {

    font-size: 38px;

    margin-top: 20px;

    margin-bottom: 0;

}



.service-title {

    font-size: 20px;

    margin-top: 0;

}



.service-desc {

    font-size: 18px;

    line-height: 1.6;

}



.portfolio-section {

    margin-top: 150px;

    margin-bottom: 100px;

    text-align: center;

}



.portfolio-text {

    font-size: 35px;

    margin-bottom: 60px;

}



.btn {

    cursor: pointer;

    position: relative;

    display: inline-flex;

    align-items: center;

    height: 5rem;

    width: 20rem;

    background: #111111;

    border: 1px solid #555555;

    color: #f5f5f5;

    text-align: left;

    padding: 1rem;

    font-size: 1.25rem;

    font-weight: 700;

    font-family: 'Argentum Sans', sans-serif;

    border-radius: 0.75rem;

    overflow: hidden;

    text-decoration: underline;

    text-underline-offset: 2px;

    transition: border-color 500ms, color 500ms, text-underline-offset 500ms, text-decoration-thickness 500ms;

    isolation: isolate;

}



.btn span {

    position: relative;

    z-index: 20;

}



.btn::before {

    content: '';

    position: absolute;

    width: 4rem; height: 4rem;

    right: 0.25rem; top: 0.25rem;

    z-index: 1;

    background: #ffffff;

    border-radius: 9999px;

    filter: blur(16px);

    transition: right 500ms, bottom 500ms, box-shadow 500ms, filter 500ms;

}



.btn::after {

    content: '';

    position: absolute;

    z-index: 1;

    width: 6rem; height: 6rem;

    right: 2rem; top: 0.75rem;

    background: #ffffff;

    border-radius: 9999px;

    filter: blur(16px);

    transition: right 500ms;

}



.btn:hover { border-color: #ffffff; color: #ffffff; text-underline-offset: 4px; text-decoration-thickness: 2px; }

.btn:hover::before { right: 3rem; bottom: -2rem; filter: blur(20px); box-shadow: 20px 20px 20px 30px #ffffff; }

.btn:hover::after { right: -2rem; }

.btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; }



.footer-line {

    margin-top: 60px;

    width: 100%;

    padding: 60px 0 50px;

    border-top: 1px solid rgba(255,255,255,0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

}



.footer-logo {

    width: 100px;

    opacity: 1;

}



.footer-text {

    margin: 0;

    font-size: 13px;

    color: rgba(255,255,255,0.3);

    letter-spacing: 0.05em;

}