/*==================================================
NEWSLETTER
==================================================*/

.tok-newsletter{

    position:relative;

    padding:100px 0 0;

    background:#fff;

}

/*==================================================
BENEFITS STRIP
==================================================*/

.tok-benefits{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-bottom:70px;

}

.tok-benefit{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.tok-benefit-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EDF5FF;

    transition:.35s;

}

.tok-benefit:nth-child(even) .tok-benefit-icon{

    background:#FFF2F2;

}

.tok-benefit-icon i{

    font-size:22px;

    color:#0D47A1;

}

.tok-benefit:nth-child(even) i{

    color:#E31E24;

}

.tok-benefit-content h4{

    margin:4px 0 6px;

    font-size:18px;

    font-weight:700;

    color:#111827;

}

.tok-benefit-content p{

    margin:0;

    color:#64748B;

    font-size:14px;

    line-height:1.6;

}

.tok-benefit:hover .tok-benefit-icon{

    transform:translateY(-5px);

}

/*==================================================
CTA BANNER
==================================================*/

.tok-newsletter-banner{

    position:relative;

    overflow:hidden;

    min-height:640px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        #06142C 0%,
        #0A1C3D 55%,
        #111827 100%
    );

    padding:90px;

}

/*==================================================
BACKGROUND GLOWS
==================================================*/

.tok-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(40px);

    pointer-events:none;

}

.tok-glow-one{

    width:520px;

    height:520px;

    background:rgba(227,30,36,.18);

    right:5%;

    top:50%;

    transform:translateY(-50%);

}

.tok-glow-two{

    width:420px;

    height:420px;

    background:rgba(13,71,161,.14);

    left:-180px;

    bottom:-180px;

}

/*==================================================
CONTENT
==================================================*/

.tok-newsletter-content{

    position:relative;

    z-index:5;

    max-width:540px;

}

.tok-newsletter-tag{

    display:inline-flex;

    align-items:center;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(227,30,36,.15);

    color:#FF6464;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.tok-newsletter-content h2{

    margin:28px 0 20px;

    font-size:72px;

    font-weight:800;

    line-height:1.02;

    letter-spacing:-2px;

    color:#fff;

}

.tok-newsletter-content h2 span{

    display:block;

    color:#E31E24;

}

.tok-newsletter-content p{

    font-size:18px;

    color:#CBD5E1;

    line-height:1.9;

    max-width:520px;

    margin-bottom:45px;

}









/*==================================================
NEWSLETTER FORM
==================================================*/

.tok-newsletter-form{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.tok-input-group{

    flex:1;

    height:66px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:0 24px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.tok-input-group:focus-within{

    border-color:#E31E24;

    background:rgba(255,255,255,.12);

}

.tok-input-group i{

    color:#94A3B8;

    font-size:18px;

}

.tok-input-group input{

    flex:1;

    border:none;

    background:transparent;

    color:#fff;

    font-size:16px;

    outline:none;

}

.tok-input-group input::placeholder{

    color:rgba(255,255,255,.55);

}

.tok-newsletter-form button{

    width:190px;

    height:66px;

    border:none;

    border-radius:18px;

    background:#E31E24;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 20px 40px rgba(227,30,36,.28);

}

.tok-newsletter-form button:hover{

    background:#C91B21;

    transform:translateY(-3px);

    box-shadow:0 28px 50px rgba(227,30,36,.38);

}

/*==================================================
NOTE
==================================================*/

.tok-newsletter-note{

    display:flex;

    align-items:center;

    gap:12px;

    color:#94A3B8;

    font-size:15px;

}

.tok-newsletter-note i{

    color:#22C55E;

}

/*==================================================
FLOATING PRODUCTS
==================================================*/

.tok-newsletter-products{

    position:absolute;

    right:-70px;

    bottom:-10px;

    width:62%;

    z-index:2;

    pointer-events:none;

}

.tok-newsletter-products img{

    display:block;

    width:100%;

    height:auto;

    animation:tokFloat 7s ease-in-out infinite;

    filter:drop-shadow(0 40px 70px rgba(0,0,0,.35));

}

/*==================================================
SUBTLE FLOAT
==================================================*/

@keyframes tokFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
HOVER
==================================================*/

.tok-newsletter-banner:hover .tok-newsletter-products img{

    transform:scale(1.02);

}

.tok-benefit:hover .tok-benefit-icon{

    transform:translateY(-5px) scale(1.06);

}

/*==================================================
TABLET
==================================================*/

@media(max-width:1200px){

.tok-benefits{

grid-template-columns:repeat(2,1fr);

}

.tok-newsletter-banner{

padding:70px 55px;

min-height:780px;

}

.tok-newsletter-content{

max-width:100%;

}

.tok-newsletter-content h2{

font-size:58px;

}

.tok-newsletter-products{

position:relative;

right:auto;

bottom:auto;

width:100%;

margin-top:60px;

display:flex;

justify-content:center;

}

.tok-newsletter-products img{

max-width:650px;

}

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

.tok-newsletter{

padding:70px 0;

}

.tok-benefits{

grid-template-columns:1fr;

gap:24px;

margin-bottom:50px;

}

.tok-benefit{

align-items:center;

}

.tok-newsletter-banner{

padding:50px 30px;

min-height:auto;

border-radius:26px;

}

.tok-newsletter-content{

text-align:center;

}

.tok-newsletter-content h2{

font-size:40px;

letter-spacing:-1px;

}

.tok-newsletter-content p{

font-size:16px;

margin-bottom:35px;

}

.tok-newsletter-form{

flex-direction:column;

}

.tok-input-group{

width:100%;

}

.tok-newsletter-form button{

width:100%;

}

.tok-newsletter-note{

justify-content:center;

font-size:14px;

}

.tok-newsletter-products{

margin-top:40px;

}

.tok-newsletter-products img{

max-width:100%;

}

}