:root {
    --ink:#07111d;
    --blue:#1688ff;
    --blue2:#65b7ff;
    --paper:#f6f9fc;
    --muted:#64748b;
    --line:#dce6ef;
    --white:#fff
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--white)
}
a {
    text-decoration:none;
    color:inherit
}
.nav {
    height:78px;
    padding:0 max(24px,5vw);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    position:sticky;
    top:0;
    background:#ffffffed;
    backdrop-filter:blur(18px);
    z-index:20;
    border-bottom:1px solid #edf2f7
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:800
}
.brand img {
    width:38px;
    height:38px;
    object-fit:contain
}
.brand b {
    color:var(--blue)
}
.nav nav {
    display:flex;
    gap:28px;
    font-size:14px;
    color:#475569
}
.nav-actions,.hero-actions {
    display:flex;
    gap:10px
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 17px;
    border-radius:12px;
    border:1px solid var(--line);
    font-weight:750;
    font-size:14px
}
.btn.primary {
    background:var(--blue);
    border-color:var(--blue);
    color:white;
    box-shadow:0 10px 30px #1688ff33
}
.btn.ghost {
    background:white
}
.btn.glass {
    background:#ffffff17;
    color:#fff;
    border-color:#ffffff42;
    backdrop-filter:blur(10px)
}
.btn.big {
    padding:14px 21px
}
.hero {
    min-height:690px;
    position:relative;
    display:flex;
    align-items:center;
    padding:90px max(24px,8vw);
    background:#08111d url('../img/kobogarage.png') center/cover no-repeat;
    color:#fff;
    overflow:hidden
}
.hero:after {
    content:"";
    position:absolute;
    inset:auto -10% -45% 35%;
    height:650px;
    background:radial-gradient(circle,#1688ff55,transparent 65%)
}
.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#06101be8 0%,#07111dcc 45%,#07111d66 72%,#07111d33)
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:800px
}
.pill,.eyebrow {
    font-size:12px;
    font-weight:850;
    letter-spacing:.14em
}
.pill {
    display:inline-flex;
    padding:8px 12px;
    border:1px solid #ffffff35;
    border-radius:999px;
    background:#ffffff0d
}
.hero h1 {
    font-size:clamp(52px,7vw,92px);
    line-height:.95;
    letter-spacing:-.055em;
    margin:24px 0
}
.hero h1 em {
    font-style:normal;
    color:var(--blue2)
}
.hero p {
    max-width:680px;
    font-size:19px;
    line-height:1.65;
    color:#d6e2ee
}
.trust {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
    margin-top:34px;
    color:#bfd0df;
    font-size:13px
}
.section {
    padding:100px max(24px,8vw)
}
.intro {
    text-align:center;
    background:var(--paper)
}
.eyebrow {
    color:var(--blue)
}
.intro h2,.section h2,.cta h2 {
    font-size:clamp(36px,5vw,62px);
    line-height:1.03;
    letter-spacing:-.04em;
    margin:16px 0
}
.intro p {
    max-width:730px;
    margin:20px auto;
    color:var(--muted);
    font-size:18px;
    line-height:1.7
}
.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:36px
}
.section-head p {
    max-width:470px;
    color:var(--muted);
    line-height:1.6
}
.modules {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}
.modules article {
    padding:25px;
    border:1px solid var(--line);
    border-radius:20px;
    background:white;
    transition:.2s
}
.modules article:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 50px #0f172a0d
}
.module-icon {
    font-size:26px
}
.modules h3 {
    margin:22px 0 8px
}
.modules p,.packages p,.packages li {
    color:var(--muted);
    line-height:1.6;
    font-size:14px
}
.packages {
    background:#07111d;
    color:white
}
.package-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:38px
}
.package-grid article {
    padding:30px;
    border:1px solid #ffffff1f;
    border-radius:22px;
    background:#0d1927
}
.package-grid article.featured {
    border-color:#1688ff;
    background:linear-gradient(145deg,#10243b,#0d1927)
}
.package-grid article>span {
    font-size:11px;
    font-weight:850;
    letter-spacing:.12em;
    color:#7ec1ff
}
.package-grid h3 {
    font-size:28px;
    margin:10px 0
}
.package-grid ul {
    padding-left:20px;
    min-height:155px
}
.package-grid .btn.ghost {
    background:transparent;
    color:#fff;
    border-color:#ffffff32
}
.package-note {
    text-align:center;
    margin-top:28px
}
.security {
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:70px;
    align-items:center
}
.security p {
    color:var(--muted);
    font-size:17px;
    line-height:1.7
}
.security-card {
    padding:30px;
    border-radius:22px;
    background:var(--paper);
    border:1px solid var(--line)
}
.security-card ol {
    display:grid;
    gap:10px;
    padding-left:22px;
    color:#475569
}
.faq {
    background:var(--paper)
}
details {
    max-width:900px;
    margin:12px auto;
    padding:20px 0;
    border-bottom:1px solid var(--line)
}
summary {
    font-weight:800;
    cursor:pointer
}
details p {
    color:var(--muted)
}
.cta {
    text-align:center;
    padding:110px 24px;
    background:linear-gradient(180deg,#fff,#edf6ff)
}
.cta img {
    width:60px
}
.cta .btn {
    margin-top:18px
}
.cta h2 {
    margin-left:auto;
    margin-right:auto
}
footer {
    display:flex;
    justify-content:space-between;
    padding:30px max(24px,8vw);
    border-top:1px solid var(--line);
    font-size:13px;
    color:var(--muted)
}
@media(max-width:900px) {
    .nav nav {
        display:none
    }
    .modules {
        grid-template-columns:repeat(2,1fr)
    }
    .package-grid,.security {
        grid-template-columns:1fr
    }
    .section-head {
        display:block
    }
    .hero {
        min-height:620px
    }
    .hero-overlay {
        background:#07111dd9
    }
}
@media(max-width:600px) {
    .nav {
        padding:0 18px
    }
    .brand span {
        display:none
    }
    .nav-actions .ghost {
        display:none
    }
    .modules {
        grid-template-columns:1fr
    }
    .hero {
        padding:70px 22px
    }
    .hero-actions {
        flex-direction:column
    }
    .hero-actions .btn {
        width:100%
    }
    .trust {
        gap:12px
    }
    .section {
        padding:72px 22px
    }
    footer {
        flex-direction:column;
        gap:10px
    }
}