@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
 :root{
    --blue:#0788ff;
    --blue2:#0067d9;
    --bg:#050608;
    --panel:#0a0c10;
    --line:rgba(255,255,255,.12);
    --muted:#9ca3ad;
    --white:#f6f7f9
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--bg);
    color:var(--white);
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit;
}
.intro{
    position:fixed;
    inset:0;
    background:#020305;
    z-index:1000;
    display:grid;
    place-items:center;
    overflow:hidden
}
.intro-grid{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,120,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,120,255,.05) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:radial-gradient(circle,black,transparent 72%)
}
.intro-line{
    position:absolute;
    width:0;
    height:1px;
    background:var(--blue);
    box-shadow:0 0 25px var(--blue);
    animation:introLine 1.1s .2s forwards
}
.intro-logo{
    width:min(430px,65vw);
    opacity:0;
    transform:scale(.78);
    filter:drop-shadow(0 0 0 transparent);
    animation:introLogo 1.35s .35s cubic-bezier(.16,1,.3,1) forwards
}
.intro-sub{
    position:absolute;
    margin-top:200px;
    letter-spacing:.55em;
    color:#aeb4bc;
    font-size:10px;
    opacity:0;
    animation:introSub .7s 1s forwards
}
@keyframes introLine{
    to{
        width:min(560px,70vw)
    }
}
@keyframes introLogo{
    40%{
        opacity:1;
        transform:scale(1.04);
        filter:drop-shadow(0 0 28px rgba(0,120,255,.35))
    }
    100%{
        opacity:1;
        transform:scale(1)
    }
}
@keyframes introSub{
    to{
        opacity:1
    }
}
.intro.hide{
    animation:introOut .8s forwards
}
@keyframes introOut{
    to{
        opacity:0;
        visibility:hidden;
        pointer-events:none
    }
}
.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:96px;
    z-index:50;
    display:flex;
    align-items:center;
    padding:0 4.7vw;
    border-bottom:1px solid rgba(255,255,255,.09);
    background:linear-gradient(180deg,rgba(2,3,5,.94),rgba(2,3,5,.62));
    backdrop-filter:blur(12px)
}
.brand{
    width:145px
}
.brand img{
    width:120px;
    display:block
}
.nav{
    display:flex;
    gap:48px;
    margin:auto;
    align-items:center
}
.nav a{
    font-size:12px;
    font-weight:600;
    color:#d7d9dd;
    position:relative;
    padding:40px 0
}
.nav a:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:30px;
    height:2px;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:.25s
}
.nav a:hover:after,.nav a.active:after{
    transform:scaleX(1)
}
.nav a.active{
    color:var(--blue)
}
.nav-cta,.button,.outline-button{
    border:1px solid var(--blue);
    padding:16px 24px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.03em;
    display:inline-flex;
    gap:25px;
    align-items:center;
    transition:.25s;
    background:rgba(0,100,220,.04)
}
.nav-cta span,.button span,.outline-button span{
    font-size:19px;
    color:var(--blue)
}
.nav-cta:hover,.button:hover,.outline-button:hover{
    background:var(--blue);
    color:white;
    box-shadow:0 0 35px rgba(0,120,255,.22)
}
.nav-cta:hover span,.button:hover span,.outline-button:hover span{
    color:white
}
.menu{
    display:none;
    background:none;
    border:0;
    color:white
}
.hero{
    min-height:860px;
    height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#030405
}
.hero-bg{
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg,#030405 0%,rgba(3,4,5,.98) 28%,rgba(3,4,5,.45) 65%,rgba(3,4,5,.18)),url('assets/hero.jpg');
    background-size:cover;
    background-position:center right;
    filter:saturate(1.15) contrast(1.05)
}
.hero-glow{
    position:absolute;
    inset:auto 0 0 0;
    height:50%;
    background:linear-gradient(transparent,#030405);
    pointer-events:none
}
.hero-content{
    position:relative;
    z-index:2;
    margin-left:6.2vw;
    margin-top:40px;
    max-width:670px
}
.eyebrow{
    font-size:16px;
    letter-spacing:.3em;
    color:#d9dde4;
    margin-bottom:18px
}
.eyebrow span{
    font-weight:400
}
.eyebrow b{
    color:var(--blue)
}
h1{
    font-size:clamp(60px,6vw,98px);
    line-height:.91;
    letter-spacing:-.055em;
    margin:0;
    font-weight:900
}
h1 strong{
    color:var(--blue)
}
.hero-sub{
    letter-spacing:.34em;
    font-size:16px;
    font-weight:500;
    margin:30px 0 38px;
    color:#e1e4e8
}
.hero-sub i{
    font-style:normal;
    color:var(--blue);
    margin:0 12px
}
.hero-side{
    position:absolute;
    right:2.8vw;
    top:245px;
    writing-mode:vertical-rl;
    letter-spacing:.3em;
    font-size:10px;
    color:#8f969f;
    border-left:1px solid rgba(255,255,255,.25);
    padding-left:14px
}
.hero-bottom{
    position:absolute;
    left:6.2vw;
    right:5vw;
    bottom:64px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    border-bottom:1px solid rgba(255,255,255,.14);
    padding-bottom:25px;
    z-index:3
}
.quick{
    display:flex;
    align-items:center;
    gap:14px
}
.q-icon{
    color:var(--blue);
    font-size:31px;
    width:35px;
    text-align:center
}
.quick b{
    display:block;
    font-size:12px;
    letter-spacing:.04em
}
.quick small{
    display:block;
    color:#888e98;
    font-size:9px;
    margin-top:6px;
    letter-spacing:.08em
}
.scroll{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    color:#8b9199;
    letter-spacing:.16em;
    text-align:center
}
.scroll span{
    display:block;
    color:var(--blue);
    font-size:17px;
    margin-top:5px
}
.section-pad{
    padding:25px 8vw
}
.section-label{
    font-size:10px;
    letter-spacing:.35em;
    color:#727983;
    margin-bottom:42px
}
.statement{
    background:linear-gradient(180deg,#06080b,#080b0f)
}
.statement-grid,.about-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:10vw;
    align-items:start;
}
.statement h2,.section-head h2,.about h2,.contact h2{
    font-size:clamp(44px,5.4vw,78px);
    line-height:.94;
    letter-spacing:-.055em;
    margin:0
}
.statement h2 em{
    font-style:normal;
    color:var(--blue)
}
.statement p,.section-head>p,.about-text p,.feature-copy>p,.contact-card>p{
    color:#9ca3ad;
    line-height:1.8;
    font-size:16px;
    max-width:570px
}
.services{
    background:#07090c
}
.section-head{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:8vw;
    align-items:end;
    margin-bottom:55px
}
.section-head h2 span,.about h2 span,.contact h2 span{
    color:var(--blue)
}
.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line)
}
.service-card{
    position:relative;
    min-height:380px;
    padding:34px 30px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:linear-gradient(145deg,rgba(255,255,255,.02),transparent);
    transition:.35s;
    overflow:hidden
}
.service-card:hover{
    transform:translateY(-7px);
    background:linear-gradient(145deg,rgba(0,120,255,.1),transparent)
}
.service-card:after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    border-radius:50%;
    right:-55px;
    bottom:-55px;
    background:rgba(0,120,255,.18);
    filter:blur(25px)
}
.service-number{
    position:absolute;
    right:25px;
    top:27px;
    font-size:11px;
    color:#626872
}
.service-icon{
    font-size:42px;
    color:var(--blue);
    margin:35px 0 48px
}
.service-card h3{
    font-size:20px;
    margin:0 0 13px
}
.service-card p{
    font-size:13px;
    line-height:1.75;
    color:#939aa4
}
.service-card span{
    position:absolute;
    bottom:27px;
    left:30px;
    font-size:8px;
    letter-spacing:.22em;
    color:#68707a
}
.feature{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    min-height:670px;
    background:#030405
}
.feature-image{
    min-height:670px;
    background-image:linear-gradient(90deg,rgba(3,4,5,0),#030405),url('assets/hero.jpg');
    background-size:cover;
    background-position:center
}
.feature-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px 9vw 80px 3vw
}
.feature-copy h2{
    font-size:clamp(48px,5.3vw,78px);
    line-height:.91;
    letter-spacing:-.055em;
    margin:0 0 30px
}
.feature-copy h2 span{
    color:var(--blue)
}
.mini-stats{
    display:flex;
    border-top:1px solid var(--line);
    margin-top:28px;
    padding-top:25px;
    gap:45px
}
.mini-stats b{
    font-size:23px;
    color:var(--blue);
    display:block
}
.mini-stats small{
    font-size:9px;
    color:#737a84;
    letter-spacing:.15em
}
.about{
    background:#080a0d
}
.about-text{
    border-left:1px solid var(--line);
    padding-left:55px
}
.about-text .blue-line{
    color:var(--blue);
    font-weight:800;
    letter-spacing:.24em;
    font-size:11px;
    margin-top:38px
}
.reviews{
    background:linear-gradient(180deg,#080a0d,#050608)
}
.reviews-head{
    margin-bottom:50px
}
.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:38px
}
.review-card{
    padding:35px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.025);
    min-height:225px
}
.stars{
    color:var(--blue);
    letter-spacing:.2em;
    font-size:16px
}
.review-card p{
    color:#c4c8ce;
    line-height:1.7;
    margin:22px 0
}
.review-card b{
    font-size:10px;
    display:block;
    letter-spacing:.14em
}
.review-card small{
    display:block;
    color:#707781;
    margin-top:8px;
    font-size:9px
}
.contact{
    background:radial-gradient(circle at 70% 20%,rgba(0,116,255,.16),transparent 32%),#030405
}
.contact-card{
    border:1px solid rgba(0,130,255,.4);
    padding:75px 8vw;
    background:linear-gradient(120deg,rgba(0,100,220,.05),rgba(255,255,255,.015));
    position:relative;
    overflow:hidden
}
.contact-card:after{
    content:"A6";
    position:absolute;
    right:-40px;
    bottom:-100px;
    font-size:310px;
    font-weight:900;
    color:rgba(255,255,255,.025);
    line-height:1
}
.contact-actions{
    display:flex;
    align-items:center;
    gap:30px;
    margin-top:35px
}
.contact-actions .button{
    color:red !important;
}
.text-link{
    font-size:11px;
    letter-spacing:.15em;
    font-weight:700
}
.text-link span{
    color:var(--blue);
    margin-left:10px
}
.contact-note{
    margin-top:30px;
    color:#4f5660;
    font-size:12px;
    letter-spacing:.12em
}
.footer{
    border-top:1px solid var(--line);
    min-height:170px;
    padding:45px 8vw;
    display:flex;
    align-items:center;
    gap:35px;
    background:#020304
}
.footer img{
    width:85px
}
.footer div{
    font-size:12px;
    letter-spacing:.25em
}
.footer span{
    margin-left:auto;
    color:#666d77;
    font-size:9px;
    letter-spacing:.2em
}
.reveal{
    opacity:0;
    transform:translateY(25px);
    transition:1s
}
.reveal.show{
    opacity:1;
    transform:none
}


@media(max-width:950px){
    .nav{
        gap:22px
    }
    .nav-cta{
        padding:13px 15px
    }
    .hero-bottom{
        grid-template-columns:repeat(2,1fr)
    }
    .service-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .feature,.section-head,.statement-grid,.about-grid{
        grid-template-columns:1fr
    }
    .feature-image{
        min-height:420px
    }
    .feature-copy{
        padding:80px 8vw
    }
    .about-text{
        border-left:0;
        border-top:1px solid var(--line);
        padding:35px 0 0
    }
    .review-grid{
        grid-template-columns:1fr
    }
    .section-pad{
        padding:100px 7vw
    }
}
@media(max-width:700px){
    .header{
        height:75px;
        padding:0 20px
    }
    .brand{
        width:100px
    }
    .brand img{
        width:92px
    }
    .nav,.nav-cta{
        display:none
    }
    .menu{
        display:flex;
        margin-left:auto;
        flex-direction:column;
        gap:7px
    }
    .menu span{
        display:block;
        width:28px;
        height:2px;
        background:white
    }
    .nav.mobile-open{
        position:absolute;
        display:flex;
        flex-direction:column;
        top:75px;
        left:0;
        right:0;
        padding:20px;
        background:#050608;
        border-bottom:1px solid var(--line);
        gap:0
    }
    .nav.mobile-open a{
        padding:16px 20px
    }
    .nav.mobile-open a:after{
        display:none
    }
    .hero{
        min-height:800px
    }
    .hero-content{
        margin-left:7vw;
        margin-right:7vw
    }
    .eyebrow{
        font-size:11px
    }
    .hero h1{
        font-size:clamp(49px,13vw,75px)
    }
    .hero-sub{
        font-size:10px;
        letter-spacing:.22em
    }
    .hero-bottom{
        left:7vw;
        right:7vw;
        bottom:70px;
        gap:14px
    }
    .quick{
        gap:8px
    }
    .q-icon{
        font-size:23px;
        width:25px
    }
    .quick b{
        font-size:9px
    }
    .quick small{
        font-size:7px
    }
    .hero-side{
        display:none
    }
    .service-grid{
        grid-template-columns:1fr
    }
    .service-card{
        min-height:310px
    }
    .section-pad{
        padding:85px 7vw
    }
    .statement p,.section-head>p,.about-text p,.feature-copy>p,.contact-card>p{
        font-size:14px
    }
    .contact-card{
        padding:55px 7vw
    }
    .contact-actions{
        flex-direction:column;
        align-items:flex-start
    }
    .footer{
        flex-direction:column;
        align-items:flex-start;
        gap:14px
    }
    .footer span{
        margin-left:0
    }
    .intro-sub{
        margin-top:245px;
        font-size:7px
    }
    .intro-logo{
        width:70vw
    }
}