:root{
    --fst-primary:#00353F;
    --fst-secondary:#01858E;
    --fst-accent:#96BA04;
    --fst-light:#F7FAFA;
    --fst-white:#FFFFFF;
    --fst-text:#60767B;
    --fst-border:#E6EFF0;
    --fst-shadow:0 18px 45px rgba(0,53,63,.08);
    --fst-shadow-hover:0 28px 60px rgba(0,53,63,.14);
}

/* Breadcrumb */
.typing-breadcrumb{
    background:linear-gradient(135deg,var(--fst-primary) 0%,var(--fst-secondary) 100%);
    padding:35px 0;
    position:relative;
    overflow:hidden;
}

.typing-breadcrumb h1{color:#fff;}
.typing-breadcrumb p{color:rgba(255,255,255,.82);}
.typing-breadcrumb .breadcrumb-item,
.typing-breadcrumb .breadcrumb-item a{
    color:#fff;
    text-decoration:none;
    font-weight:800;
}
.typing-breadcrumb .breadcrumb-item.active{color:var(--fst-accent);}
.typing-breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    color:rgba(255,255,255,.5);
    content:"/";
}

/* Hero */
.typing-hero{
    padding:90px 0;
    background:
        radial-gradient(circle at 12% 15%,rgba(150,186,4,.16),transparent 28%),
        radial-gradient(circle at 88% 20%,rgba(1,133,142,.16),transparent 34%),
        linear-gradient(180deg,var(--fst-light) 0%,#FFFFFF 100%);
}

.typing-badge,
.typing-header-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:#EAF8F4;
    color:var(--fst-secondary);
    font-weight:900;
    margin-bottom:16px;
}

.typing-hero h2 span{color:var(--fst-secondary);}

.typing-actions,
.typing-cta-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px;
}

.typing-outline-btn,
.typing-cta-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 24px;
    border-radius:999px;
    background:#fff;
    color:var(--fst-primary) !important;
    font-weight:900;
    text-decoration:none;
    border:1px solid var(--fst-border);
    box-shadow:0 12px 26px rgba(0,53,63,.08);
}

.typing-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.typing-pills span{
    padding:9px 14px;
    border-radius:999px;
    background:#EAF8F4;
    color:var(--fst-primary);
    font-size:14px;
    font-weight:800;
}

.typing-pills i{
    color:var(--fst-secondary);
    margin-right:5px;
}

/* Hero Dashboard */
.typing-dashboard-card{
    position:relative;
    padding:16px;
    border-radius:32px;
    background:#fff;
    box-shadow:0 30px 70px rgba(0,53,63,.13);
}

.typing-window-bar{
    display:flex;
    gap:8px;
    padding:12px 14px;
    border-radius:22px 22px 0 0;
    background:linear-gradient(135deg,var(--fst-primary),var(--fst-secondary));
}

.typing-window-bar span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.72);
}

.typing-screen{
    min-height:470px;
    border-radius:0 0 24px 24px;
    padding:24px;
    background:
        radial-gradient(circle at right top,rgba(150,186,4,.12),transparent 28%),
        var(--fst-light);
    border:1px solid var(--fst-border);
    border-top:0;
}

.typing-stat-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:22px;
}

.typing-stat-row div{
    padding:18px 12px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--fst-border);
    text-align:center;
    box-shadow:0 10px 28px rgba(0,53,63,.06);
}

.typing-stat-row strong{
    display:block;
    color:var(--fst-primary);
    font-size:28px;
    font-weight:900;
}

.typing-stat-row span{
    color:var(--fst-secondary);
    font-size:13px;
    font-weight:900;
}

.typing-text-box{
    min-height:125px;
    border-radius:20px;
    background:#fff;
    padding:22px;
    border:1px solid var(--fst-border);
    box-shadow:0 12px 30px rgba(0,53,63,.06);
    position:relative;
}

.typing-text-box p{
    color:var(--fst-primary);
    font-size:17px;
    line-height:1.8;
    font-weight:700;
    margin:0;
}

.typing-cursor{
    width:3px;
    height:28px;
    background:var(--fst-accent);
    position:absolute;
    left:110px;
    bottom:25px;
    border-radius:10px;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%,45%{opacity:1;}
    46%,100%{opacity:0;}
}

.typing-keyboard{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:8px;
    margin-top:22px;
}

.typing-keyboard span{
    min-height:38px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--fst-primary);
    font-size:12px;
    font-weight:900;
    border:1px solid var(--fst-border);
    box-shadow:0 8px 18px rgba(0,53,63,.06);
}

.typing-keyboard .space{
    grid-column:span 2;
    background:#EAF8F4;
    color:var(--fst-secondary);
}

.typing-float-card{
    position:absolute;
    padding:14px 18px;
    border-radius:18px;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 36px rgba(0,53,63,.14);
}

.typing-float-card strong{
    display:block;
    color:var(--fst-primary);
    font-size:22px;
    font-weight:900;
}

.typing-float-card span{
    color:var(--fst-secondary);
    font-size:13px;
    font-weight:900;
}

.card-one{left:-18px;top:70px;}
.card-two{right:-18px;bottom:70px;}

/* Modes */
.typing-modes{
    padding:90px 0;
    background:#fff;
}

.typing-mode-card{
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    border-radius:28px;
    background:var(--fst-light);
    border:1px solid var(--fst-border);
    text-decoration:none;
    color:var(--fst-primary);
    box-shadow:0 14px 35px rgba(0,53,63,.07);
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.typing-mode-card:before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-60px;
    top:-60px;
    border-radius:50%;
    background:rgba(150,186,4,.15);
}

.typing-mode-card:hover{
    transform:translateY(-8px);
    background:#fff;
    box-shadow:var(--fst-shadow-hover);
}

.typing-mode-card.large-card,
.typing-mode-card.dark-card{
    background:linear-gradient(135deg,var(--fst-primary),var(--fst-secondary));
    color:#fff;
}

.typing-mode-card i{
    width:64px;
    height:64px;
    border-radius:20px;
    background:var(--fst-accent);
    color:var(--fst-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    margin-bottom:18px;
    position:relative;
    z-index:2;
}

.typing-mode-card h4,
.typing-mode-card p{
    position:relative;
    z-index:2;
}

.typing-mode-card h4{
    font-weight:900;
    margin-bottom:8px;
}

.typing-mode-card p{
    margin:0;
    color:inherit;
    opacity:.82;
}

/* Test List */
.typing-test-list{
    padding:90px 0;
    background:var(--fst-light);
}

.typing-test-card{
    height:100%;
    background:#fff;
    border:1px solid var(--fst-border);
    border-radius:26px;
    padding:28px;
    box-shadow:0 18px 45px rgba(0,53,63,.07);
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.typing-test-card:before{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-60px;
    top:-60px;
    border-radius:50%;
    background:rgba(1,133,142,.08);
}

.typing-test-card.featured{
    border-color:var(--fst-secondary);
    box-shadow:0 25px 60px rgba(0,53,63,.14);
}

.typing-test-card:hover{
    transform:translateY(-8px);
}

.typing-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.typing-card-head span,
.typing-card-head b{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
}

.typing-card-head span{
    background:#EAF8F4;
    color:var(--fst-secondary);
}

.typing-card-head .free{
    background:#EAF8F4;
    color:#16A34A;
}

.typing-card-head .paid{
    background:var(--fst-primary);
    color:#fff;
}

.typing-card-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.typing-card-meta span{
    background:var(--fst-light);
    border-radius:999px;
    padding:8px 13px;
    color:var(--fst-primary);
    font-size:13px;
    font-weight:800;
}

.typing-card-meta i{
    color:var(--fst-secondary);
    margin-right:5px;
}

/* Benefits */
.typing-benefits{
    padding:90px 0;
    background:#fff;
}

.typing-benefit-card{
    height:100%;
    padding:30px 24px;
    border-radius:24px;
    background:var(--fst-light);
    border:1px solid var(--fst-border);
    text-align:center;
    transition:.35s;
}

.typing-benefit-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,53,63,.12);
}

.typing-benefit-card i,
.typing-flow-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    background:linear-gradient(135deg,var(--fst-secondary),var(--fst-primary));
    color:#fff;
    font-size:28px;
    box-shadow:0 12px 25px rgba(1,133,142,.25);
}

.typing-benefit-card h5,
.typing-flow-step h5{
    color:var(--fst-primary);
    font-weight:900;
    margin-bottom:10px;
}

.typing-benefit-card p,
.typing-flow-step p{
    color:var(--fst-text);
    margin:0;
    line-height:1.7;
}

/* Workflow */
.typing-workflow{
    padding:90px 0;
    background:var(--fst-light);
}

.typing-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
}

.typing-flow-step{
    width:190px;
    background:#fff;
    border-radius:22px;
    padding:28px 18px;
    text-align:center;
    border:1px solid var(--fst-border);
    box-shadow:0 15px 35px rgba(0,53,63,.06);
    transition:.35s;
}

.typing-flow-step:hover{
    transform:translateY(-8px);
    border-color:var(--fst-secondary);
}

.typing-flow-arrow{
    color:var(--fst-accent);
    font-size:28px;
}

.typing-flow-step.success{
    background:linear-gradient(135deg,var(--fst-secondary),var(--fst-primary));
}

.typing-flow-step.success h5,
.typing-flow-step.success p{
    color:#fff;
}

.typing-flow-step.success .typing-flow-icon{
    background:var(--fst-accent);
    color:var(--fst-primary);
}

/* CTA */
.typing-cta{
    padding:90px 0;
    background:#fff;
}

.typing-cta-box{
    position:relative;
    overflow:hidden;
    border-radius:34px;
    padding:62px 30px;
    background:linear-gradient(135deg,var(--fst-primary),var(--fst-secondary));
    box-shadow:0 30px 70px rgba(0,53,63,.18);
}

.typing-cta-box:before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-140px;
    top:-150px;
    border-radius:50%;
    background:rgba(150,186,4,.15);
}

.typing-cta-box h2,
.typing-cta-box p{
    color:#fff;
    position:relative;
    z-index:2;
}

.typing-cta-actions{
    position:relative;
    z-index:2;
    justify-content:center;
}

@media(max-width:991px){
    .typing-hero,
    .typing-modes,
    .typing-test-list,
    .typing-benefits,
    .typing-workflow,
    .typing-cta{
        padding:60px 0;
    }

    .typing-hero{
        text-align:center;
    }

    .typing-actions,
    .typing-pills{
        justify-content:center;
    }

    .typing-screen{
        min-height:auto;
    }

    .typing-stat-row{
        grid-template-columns:1fr;
    }

    .typing-keyboard{
        grid-template-columns:repeat(4,1fr);
    }

    .typing-flow{
        flex-direction:column;
    }

    .typing-flow-arrow{
        transform:rotate(90deg);
    }

    .card-one{
        left:5px;
        top:50px;
    }

    .card-two{
        right:5px;
        bottom:50px;
    }
}