*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #ff6f61;
    outline-offset: 2px;
}

body{
    font-family:Inter,sans-serif;
    background:linear-gradient(135deg,#f7f9fc,#eef3f8);
    color:#1d3557;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

header{
    width:100%;
    padding:22px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

.header-left{
    flex-shrink:0;
}

.header-right{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.logo{
    height:70px;
    width:auto;
    aspect-ratio:300/198;
    display:block;
}

nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 28px;
}

nav a{
    color:#1d3557;
    text-decoration:none;
    font-weight:600;
}

nav a:hover,
nav a.active{
    color:#ff6f61;
}

.lang-switch{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border:1px solid #d7dee7;
    border-radius:999px;
    background:#fff;
    font-size:13px;
    font-weight:700;
}

.lang-switch a{
    color:#4a5568;
    text-decoration:none;
}

.lang-switch a.active,
.lang-switch a:hover{
    color:#1d3557;
}

.lang-switch span{
    color:#c5ced8;
}

main{
    flex:1;
}

.hero{
    min-height:72vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:48px 8%;
}

.content{
    max-width:920px;
    width:100%;
}

.badge{
    display:inline-block;
    background:#ffe8e4;
    color:#ff6f61;
    padding:8px 18px;
    border-radius:50px;
    font-size:14px;
    margin-bottom:16px;
    font-weight:700;
}

.hero-title{
    margin:0 0 24px;
    font-size:clamp(26px, 5.2vw, 54px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-0.025em;
    display:inline-flex;
    flex-direction:column;
    align-items:stretch;
    gap:0.06em;
    max-width:100%;
}

.hero-title .pair{
    white-space:nowrap;
    display:inline-block;
}

.hero-title .title-line--top{
    display:block;
    width:100%;
    text-align:right;
}

.hero-title .title-line--bottom{
    display:flex;
    flex-wrap:nowrap;
    gap:0.28em 0.35em;
    align-items:baseline;
}

.hero-title .pair--navy{
    color:#1d3557;
}

.hero-title .pair--coral{
    color:#ff6f61;
}

.inclusive-callout{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:8px 10px;
    margin:0 0 28px;
    padding:14px 18px;
    max-width:640px;
    background:#fff7f5;
    border-left:4px solid #ff6f61;
    border-radius:0 12px 12px 0;
    color:#5d6d7e;
    font-size:clamp(14px, 2vw, 16px);
    line-height:1.55;
}

.inclusive-callout strong{
    color:#ff6f61;
    font-weight:800;
}

h1{
    font-size:clamp(30px, 6vw, 56px);
    line-height:1.12;
    margin-bottom:20px;
    font-weight:800;
    letter-spacing:-0.02em;
}

h2 span{
    color:#ff6f61;
}

h2{
    font-size:clamp(26px, 4.5vw, 36px);
    line-height:1.2;
    margin-bottom:14px;
}

h2 span{
    color:#ff6f61;
}

.lead,
.hero p,
.page-intro p{
    font-size:clamp(16px, 2.4vw, 20px);
    color:#5d6d7e;
    line-height:1.75;
    margin-bottom:28px;
}

.buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.cta-block{
    margin-bottom:28px;
}

.page-cta{
    margin-top:48px;
}

.demo-note{
    font-size:15px;
    color:#5d6d7e;
    margin:14px 0 0;
    line-height:1.6;
}

.btn{
    display:inline-block;
    padding:14px 26px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
    border:none;
    cursor:pointer;
    font-size:16px;
    font-family:inherit;
    text-align:center;
}

.primary{
    background:#1d3557;
    color:white;
}

.primary:hover{
    transform:translateY(-2px);
}

.secondary{
    border:2px solid #1d3557;
    color:#1d3557;
    background:transparent;
}

.secondary:hover{
    background:#1d3557;
    color:white;
}

.cards{
    margin-top:56px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:18px;
}

.card,
.feature-card,
.contact-card,
.contact-side{
    background:white;
    padding:28px;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.card h3{
    margin-bottom:12px;
    color:#ff6f61;
    font-size:18px;
}

.card p,
.feature-card p{
    font-size:15px;
    color:#5d6d7e;
    line-height:1.7;
    margin:0;
}

.page{
    padding:36px 8% 80px;
    max-width:1100px;
    margin:0 auto;
    width:100%;
}

.page-intro{
    max-width:720px;
    margin-bottom:36px;
}

.page-intro h1{
    font-size:clamp(26px, 4.5vw, 36px);
    line-height:1.2;
    margin-bottom:14px;
    font-weight:800;
}

.page-intro h1 span{
    color:#ff6f61;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.feature-card h3{
    color:#1d3557;
    margin-bottom:10px;
    font-size:18px;
}

.home-capabilities{
    padding:0 8% 72px;
}

.home-capabilities-inner{
    max-width:920px;
    margin:0 auto;
}

.home-cap-head{
    margin-bottom:22px;
}

.home-cap-head h2{
    font-size:clamp(22px, 3vw, 30px);
    color:#1d3557;
    margin-bottom:8px;
}

.home-cap-head p{
    color:#5d6d7e;
    line-height:1.6;
    max-width:560px;
}

.capability-list,
.feature-priority-list{
    list-style:none;
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
}

.capability-list li,
.feature-priority-item{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:14px;
    align-items:start;
    background:#fff;
    border:1px solid #e4ebf2;
    border-radius:14px;
    padding:16px 18px;
}

.capability-list strong,
.feature-priority-item h3{
    display:block;
    color:#1d3557;
    font-size:16px;
    margin:0 0 4px;
}

.capability-list span:not(.cap-rank),
.feature-priority-item p{
    display:block;
    color:#5d6d7e;
    font-size:14px;
    line-height:1.55;
    margin:0;
}

.cap-rank{
    width:36px;
    height:36px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:800;
    color:#ff6f61;
    background:#ffe8e4;
}

.feature-priority-item.is-top{
    border-color:#ffd2cb;
    box-shadow:0 10px 28px rgba(29,53,87,.06);
}

.feature-priority-item.is-top .cap-rank{
    color:#fff;
    background:#ff6f61;
}

.home-cap-more{
    margin-top:20px;
}

.home-cap-more a{
    color:#ff6f61;
    font-weight:700;
    text-decoration:none;
}

.home-cap-more a:hover{
    text-decoration:underline;
}

.feature-priority-list{
    margin-bottom:40px;
}

.contact-wrap{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:22px;
    align-items:start;
}

.contact-side h3{
    margin-bottom:12px;
    color:#ff6f61;
}

.contact-side p,
.contact-side a{
    color:#5d6d7e;
    font-size:16px;
    line-height:1.7;
    text-decoration:none;
}

.contact-side a:hover{
    color:#ff6f61;
}

.side-block{
    margin-bottom:18px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    font-size:14px;
}

.form-group .optional{
    font-weight:400;
    color:#7a8795;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #d7dee7;
    border-radius:10px;
    font:inherit;
    color:#1d3557;
    background:#fbfcfe;
}

.form-group input:focus,
.form-group textarea:focus{
    outline:2px solid rgba(29,53,87,.2);
    border-color:#1d3557;
    background:#fff;
}

.form-group textarea{
    min-height:140px;
    resize:vertical;
}

.hp-field{
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

.form-check{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:8px 0 22px;
    font-size:14px;
    color:#5d6d7e;
    line-height:1.5;
}

.form-check input{
    margin-top:3px;
}

.alert{
    padding:14px 16px;
    border-radius:10px;
    margin-bottom:18px;
    font-size:15px;
    line-height:1.5;
}

.alert-ok{
    background:#e8f7ef;
    color:#1e6b3d;
}

.alert-err{
    background:#ffe8e4;
    color:#9b2c2c;
}

.form-hint{
    font-size:13px;
    color:#596675;
    margin-top:12px;
}

footer{
    padding:28px 16px;
    text-align:center;
    color:#596675;
    border-top:1px solid #e5e9ef;
    font-size:14px;
}

@media(max-width:900px){
    .contact-wrap{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    header{
        padding:16px 5%;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .header-left{
        display:flex;
        justify-content:center;
    }

    .header-right{
        justify-content:space-between;
        gap:12px;
    }

    nav{
        gap:8px 16px;
        flex:1;
    }

    nav a{
        font-size:14px;
    }

    .lang-switch{
        flex-shrink:0;
    }

    .logo{
        height:56px;
    }

    .hero{
        min-height:auto;
        padding:28px 5% 48px;
        align-items:flex-start;
    }

    .hero-title{
        font-size:clamp(22px, 7vw, 32px);
        display:flex;
        width:100%;
        align-items:flex-start;
    }

    .hero-title .title-line--top{
        text-align:left;
    }

    .hero-title .title-line--bottom{
        flex-wrap:wrap;
    }

    .inclusive-callout{
        flex-direction:column;
        gap:4px;
        padding:12px 14px;
    }

    .page{
        padding:24px 5% 64px;
    }

    h1 span{
        display:inline;
    }

    .buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .cards{
        margin-top:36px;
        grid-template-columns:1fr;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .card,
    .feature-card,
    .contact-card,
    .contact-side{
        padding:22px;
    }
}

@media(max-width:420px){
    .header-right{
        flex-direction:column;
        align-items:stretch;
    }

    nav{
        justify-content:space-between;
        width:100%;
    }

    .lang-switch{
        align-self:flex-end;
    }
}