:root{
    --bg:#101b22;
    --ink:#f3f6f4;
    --muted:#a9b8bf;
    --mint:#8ce8c9;
    --line:#ffffff24
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:95px
}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.6
}
a{
    color:inherit;
    text-decoration:none
}
button,input,textarea{
    font:inherit
}
button,a,input,textarea,summary{
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:3px solid #24aa88;
    outline-offset:6px
}
.wrap{
    max-width:1320px;
    margin:auto;
    padding:0 64px
}
header{
    height:110px;
    max-width:1440px;
    margin:auto;
    padding:0 64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line)
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:25px;
    letter-spacing:4px;
    line-height:1.1;
    font-weight:600
}
.brand small{
    display:block;
    font-size:10px;
    letter-spacing:5px;
    margin-top:6px
}
.mark{
    color:var(--mint);
    font-size:51px;
    font-weight:400
}
nav{
    display:flex;
    align-items:center;
    gap:34px;
    font-size:14px
}
.nav-cta{
    border:1px solid #668078;
    padding:11px 19px
}
.nav-cta span{
    margin-left:25px
}
nav a:hover,.text-link:hover{
    color:var(--mint)
}
.menu{
    display:none
}
.hero{
    padding-top:66px
}
.eyebrow{
    font-size:12px;
    letter-spacing:2px;
    font-weight:600;
    color:var(--mint)
}
.hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    align-items:center
}
h1{
    font-size:clamp(42px,4.5vw,66px);
    font-weight:400;
    line-height:1.12;
    letter-spacing:-2.6px;
    margin:30px 0 25px
}
em{
    color:var(--mint);
    font-style:normal
}
.intro{
    max-width:495px;
    font-size:18px;
    color:var(--muted);
    line-height:1.7;
    margin-bottom:36px
}
.button{
    display:inline-flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    background:var(--mint);
    color:#112c24;
    padding:16px 23px;
    border:0;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:background .2s
}
.button:hover{
    background:#b7f7e2
}
.button span{
    font-size:21px;
    line-height:1
}
.text-link{
    display:inline-flex;
    margin-left:23px;
    font-size:14px;
    gap:16px
}
.hero-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    margin-top:64px;
    padding:20px 0;
    color:var(--muted);
    font-size:13px
}
.hero-foot p{
    margin:0
}
.hero-foot b{
    color:#487060;
    margin:0 17px;
    font-weight:400
}
.diagram{
    position:relative;
    height:380px;
    margin-top:15px;
    background:radial-gradient(ellipse at center,#22493f70,transparent 70%);
    overflow:hidden
}
.diagram-top,.diagram-bottom{
    position:absolute;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:1.4px;
    color:#8a9f9f
}
.diagram-top{
    top:12px
}
.diagram-bottom{
    bottom:5px;
    font-size:12px;
    letter-spacing:0
}
.orbit{
    position:absolute;
    border:1px solid #7fd6b84d;
    border-radius:50%;
    width:260px;
    height:260px;
    top:70px;
    left:calc(50% - 130px)
}
.o2{
    transform:rotate(60deg) scaleX(.52)
}
.o3{
    transform:rotate(-60deg) scaleX(.52)
}
.o1{
    transform:scaleX(.52)
}
.core{
    position:absolute;
    top:133px;
    left:0;
    right:0;
    text-align:center;
    font-size:78px;
    font-family:Georgia,serif;
    color:#c7f9e8;
    line-height:1.4
}
.core span{
    display:block;
    font-size:9px;
    letter-spacing:2px;
    font-family:Arial,sans-serif
}
.tag{
    position:absolute;
    background:#14282a;
    border:1px solid #537d70;
    padding:5px 13px;
    font-size:12px
}
.strategy{
    top:62px;
    left:calc(50% - 48px)
}
.regulation{
    top:264px;
    left:8px
}
.technology{
    top:264px;
    right:5px
}
.light{
    background:#f3f5f2;
    color:#17272c;
    padding:85px 0 90px
}
.light .eyebrow{
    color:#3a7464
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:35px;
    margin-bottom:43px
}
h2{
    font-size:clamp(32px,3.3vw,46px);
    font-weight:400;
    line-height:1.18;
    letter-spacing:-1.4px;
    margin:21px 0 0
}
.section-head>p{
    font-size:15px;
    color:#64716f;
    max-width:370px;
    margin:0 0 5px
}
.services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #ccd3cd;
    border-left:1px solid #ccd3cd
}
.service{
    padding:27px 28px 23px;
    border-right:1px solid #ccd3cd;
    border-bottom:1px solid #ccd3cd;
    transition:background .2s
}
.service:hover{
    background:#e7ede7
}
.service-number{
    display:flex;
    justify-content:space-between;
    color:#4f7466;
    font-size:12px
}
.service-number span{
    font-size:21px
}
h3{
    font-size:21px;
    font-weight:400;
    line-height:1.35;
    letter-spacing:-.4px
}
.service h3{
    max-width:290px;
    margin:25px 0 15px
}
.service p{
    font-size:14px;
    line-height:1.7;
    color:#586963
}
summary{
    cursor:pointer;
    font-size:14px;
    margin:22px 0 15px;
    color:#245c49
}
.service-tags{
    font-size:11px;
    color:#6a7e73;
    padding-top:18px;
    border-top:1px solid #d2dbd3
}
.clients{
    padding-top:87px;
    padding-bottom:85px
}
.clients .section-head>p,.approach .section-head>p{
    color:var(--muted)
}
.client-list{
    margin-top:45px
}
.client-list>div{
    display:grid;
    grid-template-columns:55px 1.2fr 1fr;
    gap:18px;
    align-items:center;
    padding:22px 0;
    border-top:1px solid var(--line)
}
.client-list span{
    font-size:12px;
    color:var(--mint)
}
.client-list h3,.client-list p{
    margin:0
}
.client-list p{
    font-size:14px;
    color:var(--muted)
}
.approach{
    background:#192a30;
    padding:78px 0 85px
}
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:56px
}
.steps article{
    border-top:1px solid #557168;
    padding-top:25px
}
.steps span{
    font-size:11px;
    letter-spacing:1.4px;
    color:var(--mint)
}
.steps h3{
    font-size:25px;
    margin:20px 0 10px
}
.steps p{
    color:var(--muted);
    font-size:15px
}
.steps b{
    display:block;
    margin-top:26px;
    font-size:13px;
    font-weight:400;
    color:#d1e5dc
}
.trust{
    padding-top:87px;
    padding-bottom:95px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px
}
.principles article{
    border-bottom:1px solid var(--line);
    padding-bottom:16px;
    margin-bottom:20px
}
.principles h3{
    margin:0 0 9px;
    font-size:19px
}
.principles p{
    color:var(--muted);
    font-size:14px;
    margin:0
}
.contact{
    padding:75px 0;
    background:#dcebe3;
    color:#16362b
}
.contact .eyebrow{
    color:#48745c
}
.contact em{
    color:#467b66
}
.contact-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:85px
}
.contact h2{
    font-size:42px
}
.contact p{
    color:#527063;
    font-size:15px;
    margin-top:26px
}
form label{
    display:block;
    font-size:12px;
    margin-bottom:5px
}
input,textarea{
    width:100%;
    display:block;
    color:#173a2c;
    background:transparent;
    border:0;
    border-bottom:1px solid #9fb6a7;
    padding:8px 0 12px;
    margin-bottom:22px;
    border-radius:0;
    resize:vertical
}
input:focus,textarea:focus{
    outline:2px solid #397962;
    outline-offset:4px
}
.contact .button{
    background:#183b30;
    color:white;
    width:100%;
    margin-top:2px
}
.contact .button:hover{
    background:#285a48
}
.contact .form-note{
    font-size:12px;
    line-height:1.6;
    margin:13px 0 0
}
#status:empty{
    display:none
}
footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    min-height:140px
}
footer p,footer>span{
    font-size:12px;
    color:var(--muted)
}
footer small{
    color:#81938d
}
.skip{
    position:absolute;
    top:-100px;
    left:15px;
    background:var(--mint);
    color:#101b22;
    padding:10px;
    z-index:10
}
.skip:focus{
    top:10px
}
@media(min-width:1500px){
    .hero{
        padding-top:85px;
        padding-bottom:15px
    }
}
@media(max-width:1000px){
    .wrap,header{
        padding-left:32px;
        padding-right:32px
    }
    nav{
        gap:20px
    }
    .hero-grid{
        gap:15px;
        grid-template-columns:1.2fr 1fr
    }
    .text-link{
        display:flex;
        margin:20px 0 0
    }
    .services{
        grid-template-columns:repeat(2,1fr)
    }
    .contact-grid{
        gap:40px
    }
    .contact h2{
        font-size:35px
    }
    .trust{
        gap:40px
    }
}
@media(max-width:700px){
    .wrap,header{
        padding-left:22px;
        padding-right:22px
    }
    header{
        height:86px
    }
    .brand{
        font-size:21px
    }
    .mark{
        font-size:42px
    }
    .menu{
        display:flex;
        gap:15px;
        color:var(--ink);
        background:none;
        border:1px solid #506563;
        padding:7px 12px;
        font-size:14px
    }
    nav{
        display:none;
        position:absolute;
        top:85px;
        left:0;
        right:0;
        padding:24px;
        background:#15262b;
        z-index:3;
        flex-direction:column;
        align-items:stretch
    }
    nav.open{
        display:flex
    }
    .hero{
        padding-top:40px
    }
    .hero-grid{
        grid-template-columns:1fr
    }
    h1{
        font-size:43px;
        letter-spacing:-1.7px;
        margin-top:24px
    }
    .intro{
        font-size:16px
    }
    .text-link{
        display:inline-flex;
        margin-left:16px
    }
    .diagram{
        height:330px;
        margin-top:30px
    }
    .orbit{
        top:43px;
        width:240px;
        height:240px;
        left:calc(50% - 120px)
    }
    .core{
        top:107px
    }
    .strategy{
        top:39px
    }
    .regulation,.technology{
        top:244px
    }
    .hero-foot{
        margin-top:30px;
        display:block
    }
    .hero-foot p{
        margin-top:10px;
        font-size:11px
    }
    .hero-foot b{
        margin:0 5px
    }
    .light,.approach,.contact{
        padding:55px 0
    }
    .section-head{
        display:block
    }
    .section-head>p{
        margin-top:23px;
        font-size:14px
    }
    h2{
        font-size:34px
    }
    .services{
        grid-template-columns:1fr
    }
    .service{
        padding:24px
    }
    .service h3{
        max-width:none
    }
    .clients{
        padding-top:55px;
        padding-bottom:55px
    }
    .client-list>div{
        grid-template-columns:28px 1fr;
        gap:8px
    }
    .client-list p{
        grid-column:2
    }
    .client-list h3{
        font-size:19px
    }
    .steps{
        grid-template-columns:1fr;
        gap:30px;
        margin-top:35px
    }
    .steps b{
        margin-top:16px
    }
    .trust{
        grid-template-columns:1fr;
        gap:35px;
        padding-top:55px;
        padding-bottom:45px
    }
    .contact-grid{
        grid-template-columns:1fr;
        gap:35px
    }
    .contact h2{
        font-size:35px
    }
    footer{
        flex-wrap:wrap;
        padding-top:30px!important;
        padding-bottom:30px!important;
        gap:18px
    }
    footer p{
        display:none
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *{
        transition:none!important
    }
}
 .service p,.client-list p,.steps p,.principles p,.contact p,.section-head>p{
    font-size:16px
}
form label,summary,.service-tags{
    font-size:14px
}
.contact .form-note{
    font-size:13px
}
.diagram-top,.brand small,.core span{
    font-size:12px
}
.brand small{
    letter-spacing:3px
}
.core span{
    letter-spacing:1px
}
@media(max-width:380px){
    .text-link{
        margin:18px 0 0;
        display:flex
    }
    h1{
        font-size:38px
    }
    .contact h2{
        font-size:31px
    }
}
/* Finyx phoenix identity */
 .phoenix-logo{
    width:58px;
    height:58px;
    object-fit:contain;
    flex-shrink:0
}
.phoenix-visual{
    position:relative;
    align-self:center;
    min-width:0;
    margin:0 -12px 0 0
}
.phoenix-visual>img{
    display:block;
    width:100%;
    height:auto;
    max-height:460px;
    object-fit:contain;
    mask-image:radial-gradient(ellipse at center,#000 48%,transparent 73%)
}
.phoenix-caption{
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:var(--muted);
    font-size:12px;
    margin:0 18px
}
.phoenix-caption span:first-child{
    letter-spacing:1.5px
}
.brand{
    gap:14px
}
@media(max-width:700px){
    .phoenix-logo{
        width:47px;
        height:47px
    }
    .phoenix-visual{
        margin:20px 0 0
    }
    .phoenix-visual>img{
        max-height:370px
    }
    .phoenix-caption{
        margin:0;
        font-size:12px
    }
}