:root {
    --sp-dark:#09162e;
    --sp-dark-soft:#102245;
    --sp-blue:#3168f2;
    --sp-blue-dark:#2149bf;
    --sp-cyan:#70cfff;
    --sp-text:#15213a;
    --sp-muted:#68768d;
    --sp-border:#dce6f2;
    --sp-bg:#f4f7fc;
    --sp-white:#fff;
    --sp-shadow:0 24px 70px rgba(22,38,73,.12);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--sp-text);
    background:var(--sp-bg);
    scroll-behavior:smooth;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    min-width:320px;
    color:var(--sp-text);
    background:
        radial-gradient(circle at 7% 1%,rgba(94,143,255,.12),transparent 27rem),
        var(--sp-bg);
}

img {
    max-width:100%;
    display:block;
}

button,
a {
    -webkit-tap-highlight-color:transparent;
}

.site-shell {
    width:min(1400px,calc(100% - 40px));
    margin:0 auto;
}

.site-header {
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(213,224,239,.9);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
}

.site-header-row {
    min-height:76px;
    display:flex;
    align-items:center;
    gap:34px;
}

.site-brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:inherit;
    text-decoration:none;
}

.site-brand-mark {
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,#76a0ff,#3164eb);
    box-shadow:0 11px 27px rgba(49,100,235,.28);
    font-size:14px;
    font-weight:950;
    letter-spacing:.04em;
}

.site-brand-copy {
    display:flex;
    flex-direction:column;
}

.site-brand-copy strong {
    color:#101b31;
    font-size:17px;
    letter-spacing:-.025em;
}

.site-brand-copy small {
    margin-top:3px;
    color:#7b889c;
    font-size:9px;
    font-weight:850;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.site-nav {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:28px;
}

.site-nav a,
.site-login {
    color:#47556c;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    transition:.18s ease;
}

.site-nav a:hover,
.site-login:hover {
    color:var(--sp-blue);
}

.site-header-actions {
    display:flex;
    align-items:center;
    gap:15px;
}

.site-register {
    min-height:42px;
    padding:10px 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--sp-blue),var(--sp-blue-dark));
    box-shadow:0 10px 23px rgba(49,104,242,.24);
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}

.hero-section {
    position:relative;
    padding:80px 0 55px;
    overflow:hidden;
}

.hero-section::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:720px;
    pointer-events:none;
    background:
        radial-gradient(circle at 82% 22%,rgba(72,126,255,.16),transparent 30rem),
        radial-gradient(circle at 30% 12%,rgba(113,208,255,.1),transparent 25rem);
}

.hero-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(430px,.86fr) minmax(620px,1.14fr);
    align-items:center;
    gap:52px;
}

.hero-copy {
    padding-left:clamp(0px,2vw,22px);
}

.hero-kicker {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#2655c8;
    font-size:10px;
    font-weight:950;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.hero-kicker i {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#19ae70;
    box-shadow:0 0 0 5px rgba(25,174,112,.12);
}

.hero-copy h1 {
    max-width:650px;
    margin:20px 0 20px;
    color:#0c1830;
    font-size:clamp(46px,5vw,76px);
    line-height:.98;
    letter-spacing:-.065em;
}

.hero-copy h1 span {
    display:block;
    color:transparent;
    background:linear-gradient(115deg,#2656ce,#4d7df7 60%,#64a8ff);
    -webkit-background-clip:text;
    background-clip:text;
}

.hero-lead {
    max-width:610px;
    margin:0;
    color:#5f6e86;
    font-size:17px;
    line-height:1.75;
}

.hero-actions {
    margin-top:30px;
    display:flex;
    align-items:center;
    gap:12px;
}

.button-primary,
.button-secondary {
    min-height:50px;
    padding:12px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:14px;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
    transition:.18s ease;
}

.button-primary {
    color:#fff;
    background:linear-gradient(135deg,var(--sp-blue),var(--sp-blue-dark));
    box-shadow:0 13px 30px rgba(49,104,242,.28);
}

.button-secondary {
    color:#34435a;
    border:1px solid #d4dfec;
    background:rgba(255,255,255,.92);
}

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

.button-secondary.dark {
    color:#fff;
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);
}

.hero-trust {
    margin-top:27px;
    display:flex;
    flex-wrap:wrap;
    gap:17px;
}

.hero-trust span {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#637189;
    font-size:10px;
    font-weight:750;
}

.hero-trust i {
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#0c8754;
    background:#def8eb;
    font-style:normal;
    font-size:10px;
    font-weight:950;
}

.hero-visual {
    position:relative;
    min-width:0;
}

.hero-image-frame {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(203,218,238,.95);
    border-radius:28px;
    background:#fff;
    box-shadow:0 35px 90px rgba(28,51,97,.18);
    transform:perspective(1600px) rotateY(-3deg) rotateX(1deg);
}

.hero-image-frame::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.7);
    border-radius:inherit;
    box-shadow:inset 0 0 50px rgba(255,255,255,.28);
}

.hero-image-frame img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.hero-floating-card {
    position:absolute;
    z-index:2;
    min-width:220px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:15px;
    background:rgba(255,255,255,.89);
    box-shadow:0 17px 38px rgba(28,51,97,.15);
    backdrop-filter:blur(13px);
}

.hero-floating-card > span:last-child {
    display:flex;
    flex-direction:column;
}

.hero-floating-card strong {
    color:#16223a;
    font-size:10px;
}

.hero-floating-card small {
    margin-top:3px;
    color:#718098;
    font-size:8px;
}

.hero-floating-secure {
    left:-35px;
    bottom:58px;
}

.hero-floating-online {
    right:-25px;
    top:43px;
}

.floating-icon {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:11px;
    color:#3267f2;
    background:#e8efff;
}

.online-dot {
    width:12px;
    height:12px;
    flex:0 0 auto;
    border-radius:50%;
    background:#18ad70;
    box-shadow:0 0 0 6px rgba(24,173,112,.12);
}

.proof-strip {
    padding:0 0 70px;
}

.proof-grid {
    padding:16px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    border:1px solid var(--sp-border);
    border-radius:20px;
    background:rgba(255,255,255,.92);
    box-shadow:0 15px 40px rgba(25,43,81,.07);
}

.proof-grid article {
    min-height:65px;
    padding:10px 15px;
    display:flex;
    align-items:center;
    gap:12px;
    border-right:1px solid #e4eaf2;
}

.proof-grid article:last-child {
    border-right:0;
}

.proof-grid strong {
    color:#3267f2;
    font-size:13px;
    letter-spacing:.08em;
}

.proof-grid span {
    color:#36445a;
    font-size:11px;
    font-weight:850;
}

.steps-section,
.experience-section {
    padding:90px 0;
}

.steps-section {
    background:#fff;
}

.section-heading {
    max-width:760px;
}

.section-heading.centered {
    margin:0 auto;
    text-align:center;
}

.section-heading > span,
.section-kicker {
    color:#3267f2;
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
}

.section-heading h2,
.experience-copy h2,
.security-copy h2,
.cta-box h2 {
    margin:12px 0 13px;
    color:#111d33;
    font-size:clamp(32px,4vw,50px);
    line-height:1.08;
    letter-spacing:-.05em;
}

.section-heading p,
.experience-copy > p,
.security-copy p,
.cta-box p {
    margin:0;
    color:#69778e;
    font-size:14px;
    line-height:1.7;
}

.steps-grid {
    margin-top:46px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.step-card {
    position:relative;
    min-height:270px;
    padding:24px;
    overflow:hidden;
    border:1px solid #dfe7f1;
    border-radius:20px;
    background:linear-gradient(145deg,#fff,#f9fbff);
    box-shadow:0 14px 36px rgba(25,43,81,.06);
    transition:.18s ease;
}

.step-card:hover {
    border-color:#bfd0f7;
    transform:translateY(-4px);
    box-shadow:0 21px 44px rgba(25,43,81,.1);
}

.step-number {
    position:absolute;
    top:17px;
    right:18px;
    color:#dfe8f8;
    font-size:39px;
    font-weight:950;
    letter-spacing:-.08em;
}

.step-icon {
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    border-radius:17px;
    color:#3267f2;
    background:#e8efff;
    font-size:22px;
    font-weight:950;
}

.step-card h3 {
    margin:25px 0 9px;
    color:#18243b;
    font-size:18px;
    letter-spacing:-.025em;
}

.step-card p {
    margin:0;
    color:#6d7a8f;
    font-size:11px;
    line-height:1.65;
}

.experience-grid {
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    align-items:center;
    gap:70px;
}

.browser-card {
    overflow:hidden;
    border:1px solid #cfdbeb;
    border-radius:23px;
    background:#fff;
    box-shadow:0 30px 75px rgba(25,43,81,.15);
    transform:perspective(1500px) rotateY(4deg) rotateX(1deg);
}

.browser-bar {
    min-height:47px;
    padding:0 15px;
    display:flex;
    align-items:center;
    gap:7px;
    border-bottom:1px solid #e3e9f2;
    background:#f6f8fc;
}

.browser-bar > span {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#d4dce8;
}

.browser-bar > div {
    min-width:0;
    margin-left:12px;
    padding:7px 13px;
    flex:1;
    overflow:hidden;
    color:#8390a2;
    border-radius:8px;
    background:#fff;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.browser-content {
    min-height:365px;
    display:grid;
    grid-template-columns:145px 1fr;
    background:#f5f8fd;
}

.browser-content aside {
    padding:20px 14px;
    display:flex;
    flex-direction:column;
    gap:9px;
    color:#a9b8cf;
    background:#0c1830;
}

.browser-content aside strong {
    width:38px;
    height:38px;
    margin-bottom:10px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:#3267f2;
    font-size:11px;
}

.browser-content aside span {
    padding:9px 10px;
    border-radius:9px;
    font-size:8px;
    font-weight:800;
}

.browser-content aside span.active {
    color:#fff;
    background:#3267f2;
}

.browser-content section {
    padding:22px;
}

.mini-banner {
    min-height:95px;
    padding:19px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    border-radius:16px;
    background:linear-gradient(135deg,#183279,#3970f0);
}

.mini-banner small {
    color:#bdd0ff;
    font-size:7px;
    font-weight:950;
    letter-spacing:.12em;
}

.mini-banner strong {
    margin-top:7px;
    font-size:20px;
}

.mini-device {
    margin-top:12px;
    padding:12px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #dce5f1;
    border-radius:13px;
    background:#fff;
}

.mini-device.muted-device {
    opacity:.78;
}

.mini-screen {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:11px;
    color:#3267f2;
    background:#e8efff;
}

.mini-device > span:nth-child(2) {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
}

.mini-device strong {
    color:#1d2940;
    font-size:9px;
}

.mini-device small {
    margin-top:3px;
    color:#748197;
    font-size:7px;
}

.mini-device b {
    padding:7px 9px;
    color:#fff;
    border-radius:8px;
    background:#3267f2;
    font-size:7px;
}

.feature-list {
    margin:30px 0 0;
    padding:0;
    display:grid;
    gap:17px;
    list-style:none;
}

.feature-list li {
    display:flex;
    gap:12px;
}

.feature-list li > span {
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:10px;
    color:#07804e;
    background:#def8eb;
    font-size:11px;
    font-weight:950;
}

.feature-list strong {
    color:#1c2940;
    font-size:12px;
}

.feature-list p {
    margin:5px 0 0;
    color:#718098;
    font-size:10px;
    line-height:1.5;
}

.security-section {
    padding:90px 0;
    color:#fff;
    background:
        radial-gradient(circle at 90% 15%,rgba(66,119,255,.23),transparent 29rem),
        linear-gradient(135deg,#08152c,#10264d);
}

.security-grid {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);
    align-items:center;
    gap:70px;
}

.section-kicker.light {
    color:#8fb0ff;
}

.security-copy h2 {
    color:#fff;
}

.security-copy p {
    color:#aebbd0;
}

.security-cards {
    display:grid;
    gap:13px;
}

.security-cards article {
    min-height:83px;
    padding:15px;
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(8px);
}

.security-cards article > span {
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:14px;
    color:#9bc0ff;
    background:rgba(77,126,248,.16);
    font-weight:950;
}

.security-cards article > div {
    display:flex;
    flex-direction:column;
}

.security-cards strong {
    color:#f1f5fc;
    font-size:12px;
}

.security-cards small {
    margin-top:5px;
    color:#91a0b8;
    font-size:9px;
    line-height:1.45;
}

.cta-section {
    padding:75px 0;
}

.cta-box {
    position:relative;
    min-height:240px;
    padding:40px 45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    overflow:hidden;
    color:#fff;
    border-radius:26px;
    background:
        radial-gradient(circle at 89% 11%,rgba(255,255,255,.17),transparent 20rem),
        linear-gradient(135deg,#17316e,#3267f2 65%,#6190ff);
    box-shadow:0 25px 65px rgba(49,104,242,.24);
}

.cta-box::after {
    content:"";
    position:absolute;
    right:-70px;
    bottom:-160px;
    width:310px;
    height:310px;
    border:55px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.cta-box > div {
    position:relative;
    z-index:1;
}

.cta-box > div:first-child {
    max-width:760px;
}

.cta-box > div:first-child > span {
    color:#c0d1ff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
}

.cta-box h2 {
    color:#fff;
}

.cta-box p {
    color:#cbd8fb;
}

.cta-actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:0 0 auto;
}

.cta-box .button-primary {
    color:#2349b4;
    background:#fff;
    box-shadow:0 12px 28px rgba(14,31,83,.2);
}

.site-footer {
    padding:28px 0;
    border-top:1px solid #dce5f0;
    background:#fff;
}

.site-footer-row {
    display:flex;
    align-items:center;
    gap:30px;
}

.footer-brand .site-brand-mark {
    width:39px;
    height:39px;
    border-radius:13px;
}

.footer-brand .site-brand-copy strong {
    font-size:14px;
}

.site-footer p {
    margin-left:auto;
    color:#7b879a;
    font-size:9px;
}

.site-footer-row > div {
    display:flex;
    gap:15px;
}

.site-footer-row > div a {
    color:#536177;
    font-size:9px;
    font-weight:800;
    text-decoration:none;
}

@media (max-width:1120px) {
    .hero-grid,
    .experience-grid,
    .security-grid {
        grid-template-columns:1fr;
    }

    .hero-copy {
        max-width:850px;
        padding-left:0;
    }

    .hero-visual {
        width:min(100%,900px);
        margin:0 auto;
    }

    .steps-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .experience-copy,
    .security-copy {
        max-width:760px;
    }
}

@media (max-width:820px) {
    .site-nav {
        display:none;
    }

    .site-header-row {
        gap:16px;
    }

    .site-header-actions {
        margin-left:auto;
    }

    .hero-section {
        padding-top:55px;
    }

    .hero-copy h1 {
        font-size:clamp(43px,10vw,66px);
    }

    .proof-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .proof-grid article:nth-child(2) {
        border-right:0;
    }

    .proof-grid article:nth-child(-n+2) {
        border-bottom:1px solid #e4eaf2;
    }

    .cta-box {
        align-items:flex-start;
        flex-direction:column;
    }

    .cta-actions {
        width:100%;
        flex-direction:row;
    }

    .cta-actions a {
        flex:1;
    }
}

@media (max-width:600px) {
    .site-shell {
        width:min(100% - 24px,1400px);
    }

    .site-header-row {
        min-height:68px;
    }

    .site-brand-copy small,
    .site-login {
        display:none;
    }

    .site-brand-mark {
        width:41px;
        height:41px;
    }

    .site-register {
        padding:9px 13px;
        font-size:10px;
    }

    .hero-section {
        padding:40px 0 35px;
    }

    .hero-grid {
        gap:34px;
    }

    .hero-copy h1 {
        margin-top:16px;
        font-size:42px;
    }

    .hero-lead {
        font-size:14px;
    }

    .hero-actions {
        align-items:stretch;
        flex-direction:column;
    }

    .hero-actions a {
        width:100%;
    }

    .hero-trust {
        gap:10px;
        flex-direction:column;
    }

    .hero-image-frame {
        border-radius:18px;
        transform:none;
    }

    .hero-floating-card {
        display:none;
    }

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

    .proof-grid article {
        border-right:0;
        border-bottom:1px solid #e4eaf2;
    }

    .proof-grid article:last-child {
        border-bottom:0;
    }

    .steps-section,
    .experience-section,
    .security-section {
        padding:65px 0;
    }

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

    .browser-content {
        grid-template-columns:92px 1fr;
    }

    .browser-content aside {
        padding:15px 8px;
    }

    .browser-content aside span {
        padding:8px 6px;
        font-size:7px;
    }

    .browser-content section {
        padding:14px;
    }

    .mini-device b {
        display:none;
    }

    .security-grid {
        gap:35px;
    }

    .cta-section {
        padding:48px 0;
    }

    .cta-box {
        min-height:320px;
        padding:28px 22px;
        border-radius:20px;
    }

    .cta-actions {
        align-items:stretch;
        flex-direction:column;
    }

    .site-footer-row {
        align-items:flex-start;
        flex-direction:column;
        gap:15px;
    }

    .site-footer p {
        margin:0;
    }
}