@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700);

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap');

html {overflow-x: hidden;scroll-behavior: smooth;}
body {padding:0;margin:0;font-family:Montserrat;background:white;}
	a {text-decoration:none;color:unset;}
div,h1,h2,h3,h4,p,i,a {position:relative;transition:0.4s;}

form,input,textarea,select {font-family:Montserrat;}
:root {
	--color:#848484;
	--color2:#64af35;
}

/* Modernized public site theme */
:root {
    --ink: #102033;
    --muted: #536174;
    --brand: #f97316;
    --brand-dark: #ea580c;
    --brand-soft: #fff1e8;
    --line: #dfe7ef;
}
/*alerts */
div,h1,h2,h3,h4,p,i,a,footer {position:relative;transition:0.4s;}

input,select,textarea,button {font-family: Montserrat;}

a {    text-decoration: unset;
    color: #e91e63;}
	
	.btn_save {background: linear-gradient(45deg, #2196F3, #00BCD4);
    width: fit-content;
    margin: 10 auto;
    padding: 14px;
    color: white;}

.new_tag {position: absolute;
    top: 5px;
    background: #8bc34a;
    padding: 2px 8px;
    font-weight: 500;
    font-size: 8px;
    border-radius: 29px;
    right: -14px;
    border: 1px solid;}
.new_lab {z-index: 2;
    position: absolute;
    background: #E91E63;
    padding: 4px 10px;
    right: -13px;
    top: -11px;
    font-size: 12px;
    color: white;
    border-radius: 24px;}
.slider_image {width: 100%;
    position: relative;
    height: auto;
    background: white;}
.slider_image .mySlides {width: 100%;animation:fadeIn 1s linear forwards;}
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
.new_label {}

.head_up {background: black;
    color: white;display:flex;}
.head_up p{padding: 4px 26px;
    margin: 0px;
    font-size: 13px;
    float: unset;}
.head_up p i{}


.wtsp_chat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
}

.wtsp_chat a {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    box-shadow:
        0 18px 36px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.18);
    backdrop-filter: blur(18px);
}

.wtsp_chat svg {
    width: 46px;
    height: 46px;
}

.wtsp_chat svg path:first-child {
    fill: #25d366;
}

.wtsp_chat svg path:last-child {
    fill: #ffffff;
}

.wtsp_chat a:hover {
    transform: translateY(-3px);
}
header { background: rgba(255,255,255,0.94);
    width: -webkit-fill-available;
    padding: 0;
    overflow: unset;
    position: sticky;
    display: flex;
    padding: 0px 68px;
    top: 0;
    z-index: 22;
   height: 78px;
   border-bottom: 1px solid var(--line);
   backdrop-filter: blur(14px);
}

.text_logo {position: relative;
    display: inline-block;
    vertical-align: top;
    top: 15px;
    font-size: 50px;}   
header .logo{    display: flex}
header .logo h3  {  margin: 0;
    font-size: 22px;
    font-weight: 200;
    color: var(--ink);
    font-family: Montserrat;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand_mark {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--brand);
    color: white;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
}
	
header .head_txt {display: flex;
    position: absolute;
    right: 80px;}
header .head_txt h3{ font-weight: 600;
    padding: 22px 11px;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: -1px;

	}
	
header .head_txt h3:hover {
	transition:0.3s;
}

header .head_txt h3 .notification {
	background: white;
    color: #4c4c4b;
    font-weight: 500;
    padding: 10px;
    border-radius: 6px;
    font-size: 10px;
    position: relative;
    top: 8px;
	
}
.login_btn {background: var(--brand);
    color: white !important;
    padding: 11px 23px !important;
    margin: 25px 10px;
    border-radius: 22px;}

.notification:before {
    content: '';
    position: absolute;
    top: -17px;
    border: 10px solid transparent;
    border-bottom: 10px solid white;
    border-radius: 15px;
}
.close_2 {   background: #cc3c1b;
    color: white;
    width: fit-content;
    padding: 5px;
    margin: 9px;
    border-radius: 3px;
    display: inline-block;}
.search_now {    background: #19b119;
    color: white;
    width: fit-content;
    padding: 5px;
    margin: 9px;
    border-radius: 3px;
    display: inline-block;	}
.search_box {
    position: fixed;
    background: white;
    width: 400px;
    height: 200px;
    z-index: 54;
    left: 50%;
    transform: translate(-50%);
    padding: 23px;
    border-radius: 7px;
    box-shadow: 0px 0px 50px 0px #0000003d;
}

.search_box .close {   color: #ff0808;
    width: fit-content;
    font-size: 42px;
    position: absolute;
    right: 31px;
    top: 14px;
    z-index: 3;cursor:pointer;}
.search_box h2 {font-size: 24px;
    text-align: center;
    font-weight: 500;
    color: #323332;
    text-transform: capitalize;
}	

.search_box input{border: 1px solid gray;
    padding: 10px;
    display: block;
    margin: 10px auto;
    width: -webkit-fill-available;}
.search_box button{  margin: 0 auto;
    position: relative;
    display: block;
    padding: 10px;
    border-radius: 52px;
    border: 0px;
    background: linear-gradient(0deg, #2196F3, #0fa784);
    color: white;
    outline: none;}
.search_box button:active {
	transition:0.3s;
	transform:scale(0.8);
}

#facebook_icon {  color: #ffffff;
    background: linear-gradient(0deg, #3F51B5, #8946ff);
    border: 0px;
    border-radius: 6px;
    width: 100px;}

.fa-line-chart {color: #453b9d;
    font-weight: 800;}
.mobile_home {display:none;}

.main {background: #0b1726;
    overflow: hidden;
    min-height: min(780px, 88vh);}
	
.clip_path1 { position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(6, 18, 31, 0.9), rgba(6, 18, 31, 0.52));
    z-index: 1;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    color: white;
    animation: imageSlide 2s linear infinite;}
	
	
	
.main img{    width: -webkit-fill-available;
    position: absolute;
    top: 0px;}
.main .main_txt{ margin: 9% 0% 5% 6%;
    text-align: left;
    z-index: 4;
    color: white;
    width: 50%;}
.main .main_txt h1{   font-size: 58px;
    letter-spacing: 0;
    margin: 0;
    font-weight: 700;
    text-transform: none;
}

.eyebrow,
.section_kicker {
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.main .main_txt p {
    max-width: 560px;
    font-size: 18px;
    line-height: 1.65;
}

.hero_actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 28px;
}

.btn_outline {
    width: fit-content;
    padding: 14px 22px;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 8px;
    color: white;
    font-weight: 600;
}

.hero_stats {
    display: flex;
    gap: 28px;
    margin-top: 34px;
}

.hero_stats div {
    display: grid;
    gap: 4px;
}

.hero_stats strong {
    font-size: 24px;
}

.hero_stats span {
    color: rgba(255,255,255,0.72);
    font-size: 13px;
}

.demo_card_side {
    right: 6%;
}

.row.display_flex {
    gap: 32px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.side1 {
    text-align: center;
}

.side1 img {
    width: min(280px, 100%);
    border: 0;
    border-radius: 26px;
    box-shadow: 0 22px 60px rgba(82, 65, 145, 0.18);
}

.side2 h1 {
    color: var(--ink);
    letter-spacing: 0;
}

.side2 h3 {
    color: var(--muted);
}

.row_backimg {
    background: var(--brand-soft);
    color: var(--ink);
}

.row_backimg .flex_box .flex_boxin {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: none;
}

.row_backimg .flex_box .flex_boxin i {
    color: var(--brand);
}

.feature_band {
    max-width: 1200px;
    margin: 0 auto;
    padding: 54px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.journey-strip {
    width: min(1160px, calc(100% - 32px));
    margin: 26px auto 54px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.journey-strip div {
    padding: 22px;
    border: 1px solid rgba(6,28,134,.14);
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 16px 36px rgba(6,28,134,.1);
}

.journey-strip span {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fk-blue);
    color: #fff;
    font-weight: 900;
}

.journey-strip strong {
    display: block;
    margin-top: 14px;
    color: var(--ink);
}

.journey-strip p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.6;
}

.optional-step {
    border-color: rgba(255,138,0,.32) !important;
}

.nfc-upgrade {
    width: min(1160px, calc(100% - 32px));
    margin: 64px auto;
    padding: clamp(24px, 4vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(22px, 4vw, 48px);
    align-items: center;
    border: 2px solid var(--line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255,225,0,.24), transparent 18rem),
        rgba(255,255,255,.86);
    box-shadow: 0 18px 42px rgba(6,28,134,.12);
}

.nfc-copy h2 {
    margin: 10px 0 14px;
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.nfc-copy p {
    color: var(--muted);
    line-height: 1.7;
}

.nfc-copy ul {
    margin: 22px 0;
    padding-left: 18px;
    color: var(--ink);
    line-height: 1.9;
}

.nfc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.nfc-actions a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange));
    color: #111;
    font-weight: 900;
}

.nfc-actions span {
    color: var(--muted);
    font-weight: 700;
}

.nfc-visual {
    min-height: 240px;
    display: grid;
    place-items: center;
}

.nfc-card-mock {
    width: min(100%, 320px);
    aspect-ratio: 1.58 / 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 26px;
    background:
        radial-gradient(circle at 78% 16%, rgba(255,225,0,.72), transparent 7rem),
        linear-gradient(135deg, #06145d, #061c86 58%, #0a3fc8);
    color: #fff;
    box-shadow: 0 24px 44px rgba(6,28,134,.25);
}

.nfc-card-mock span {
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-weight: 900;
}

.nfc-card-mock strong {
    font-size: 1.6rem;
}

.nfc-card-mock em {
    color: rgba(255,255,255,.78);
    font-style: normal;
}

.feature_band div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    background: white;
}

.feature_band h3 {
    margin-top: 0;
    color: var(--ink);
}

.feature_band p {
    color: var(--muted);
    line-height: 1.6;
}

.cta_band {
    margin: 18px auto 64px;
    max-width: 960px;
    padding: 42px 24px;
    text-align: center;
    border-radius: 10px;
    background: #102033;
    color: white;
}

.cta_band h2 {
    margin: 10px 0;
    font-size: 34px;
}

.cta_band p {
    color: rgba(255,255,255,0.72);
}

.cta_band .btn_1 {
    margin: 20px auto 0;
}

.templates_heading {
    text-align: center;
    font-weight: 700;
    color: var(--ink);
}

.btn_1,
.btn_2 {
    background: var(--brand);
    border-radius: 8px;
}

.btn_1:hover,
.btn_2:hover,
.login_btn:hover {
    background: var(--brand-dark);
}

.row_bottom {
    background: #102033;
}

/* Modern template gallery */
.temp_preview {
    padding: 42px 24px 58px;
    overflow: visible;
    background: #f8fafc;
}

.demo_slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.temp_pre {
    display: block;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.temp_pre img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border: 0;
    border-radius: 14px;
}

.temp_pre:hover img {
    transform: none;
}

.temp_pre:hover {
    transform: translateY(-4px);
}

.new_lab {
    top: 20px;
    right: 20px;
    border-radius: 999px;
    background: #111827;
}

/*water wave*/

.water_wave1,.water_wave2,.water_wave3,.water_wave4{position: absolute;
    width: -webkit-fill-available;
    height: auto;}
.water_wave1 {z-index:4;}
.water_wave3 {}
.water_wave1 svg{}
.water_wave2 svg{animation:wave_ani 4s linear infinite;animation-delay:1s;}
.water_wave3 svg{animation:wave_ani 4s linear infinite;animation-delay:2s;}
.water_wave4 svg{animation:wave_ani 4s linear infinite;animation-delay:4s;}


@keyframes wave_ani {
	0%{transform:scale(1);}
	50%{transform:scale(1.5);}
	100%{transform:scale(1);}
	
}

.main .main_txt h2{font-size: 22px;
    font-weight: 500;
    margin: 16px 0px;
    text-align: justify;}
.main .main_txt p{    font-size: 21px;
    font-weight: 500;
    margin: 37px auto 5px;}
.btn_1 {  width: fit-content;
    margin: 38px auto;
    color: #ffffff;
    padding: 13px 36px;
    border-radius: 50px;
    font-size: 20px;
    border: 2px solid;
    background: #453b9d;}
	
	
.btn_2 { background: #E91E63;
    width: fit-content;
    margin: 38px auto;
    color: white;
    padding: 13px 36px;
    border-radius: 40px;
    border: 2px solid;
    font-size: 23px;
    animation: shining1 1s linear infinite;}

.btn_2:after {
    content: '';
    position: absolute;
    height: 100%;
    left: 0;
    top: -1px;
    width: 0px;border-radius: 40px;
    background: #ffffff26;
}
.btn_2:hover:after {
	content: '';
    position: absolute;
    height: 100%;
    left: 0;
    top: -1px;
    width: 100%;
    background: #ffffff26;
	transition:0.4s;
}	
@keyframes shining1 {
	
}
	
	iframe {height: 300px;
    cursor: zoom-out;
    border: 0px;
    box-shadow: unset;
    border-radius: 5px;
}
	
	
.w_l_f {color: #653bb7;
    width: auto;
    margin: 0 auto;
    padding: 20px;}	
.w_l_f h1{  margin: 0px;
    padding: 20px 39px;
    font-weight: 600;
    text-align: center;
    color: black;}	
.w_l_f h3{background: linear-gradient(5deg, #444fb6, #9C27B0);
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-weight: 500;
    padding: 16px;
    border-radius: 5px;}	
.w_l_f img{width: 401px;}	
.w_l_f ul,img{display:inline-block}	
.w_l_f ul {vertical-align: top;
    background: white;
    border-radius: 0px;
    overflow: hidden;
    padding: 0px 53px;
    font-weight: 600;
    color: black;
}
.w_l_f ul li{padding: 13px;}	
.w_l_f ul li:nth-child(2n) {
    background: #efefef;
}	
	
	/*scroll bar*/
	/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
	
	#background_img {}
	/* page 3 */
	
	.display_flex {display: flex;
    padding: 50px;
    background: linear-gradient(90deg, #4c4bb6, #942bb2);}
	.side1,.side2 {    width: -webkit-fill-available;
    padding: 18px;
    text-align: center;}
	.side1 img { width: 200px;
    margin: 4px;
    border: 18px solid #e0e0e0;
    border-left: 5px solid #efefef;
    border-right: 5px solid #ddd;
    height: 358px;
    box-shadow: 0px 0px 20px 0px #00000052;
    border-radius: 14px;
	}
	
	#imgd2 {    position: absolute;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 0px 20px 0px #0000003d;
    top: 99px;}
	
	@keyframes upDown {
		0% {   top:10px}
		100% {	top:50px;	}
	}
	
	@-webkit-keyframes upDown {
		0% {   top:10px}
		100% {	top:50px;	}
	}
	
	.demo_card_side {position: absolute;
    top: 52px;
    z-index: 2;
    right: 10%;
    height: 372px;
    width: 217px;
    border: 29px solid #e8e7e8;
    border-left: 5px solid #d4d4d4;
    border-right: 5px solid #e8e7e8;
    border-radius: 23px;
    overflow: hidden;}
	.demo_card_side img {position: relative;
    width: 100%;
    height: -webkit-fill-available;}
	.side2 p{font-weight: 500;
    text-align: center;
    
    font-size: 23px;}
	.side2 h1{font-weight: 500;
    text-align: left;
    font-size: 41px;
    
    text-transform: capitalize;
}

	.side2 h3{font-size: 15px;
    line-height: 2;
   
    text-align: initial;
    font-weight: 400;}
	
.row {background: white;
}
.row_backimg {      background: white;
    padding: 0px 68px;
    overflow: hidden;
    text-align: center;
   }
.row_backimg h1{
    font-size: 50px;
    margin: 20px 0px 56px;}
.row_backimg .flex_box{display: flex;
   }
.row_backimg .flex_box .flex_boxin{  background: linear-gradient(
45deg
, #ffffff, #ffffff);
    margin: 15px;
    width: -webkit-fill-available;
    padding: 25px 24px;
    box-shadow: 0px 0px 10px 0px #544b4b40;
    border-radius: 10px;

}
	
	.row_backimg .flex_box .flex_boxin:hover {
		transform: rotate(0deg);
	}
.row_backimg .flex_box .flex_boxin i{ font-size: 60px;
    color: #453b9d;}
.row_backimg .flex_box .flex_boxin h1{font-size: 19px;
    margin: 33px 0px;
    font-weight: 500;
    letter-spacing: -1px;color:black;}
.row_backimg .flex_box .flex_boxin p{    font-weight: 500;
    color: #453b9d;
    font-size: 10px;}
	
.row2 {
	padding: 50px;background: #ffffff;
}
.row2 h1 {   text-align: center;
    font-size: 42px;
    font-weight: 500;
    color: #673bb7;}
.flex_pricing {display: flex;
    width: fit-content;
    margin: 0 auto;
    background: white;}
.flex_pricingin {    padding: 0px 0px;
    box-shadow: 0px 0px 10px 0px #00000038;
}
.flex_pricingin h3{        background: #f44336;
    margin: 0px;
    padding: 13px 20px;
    text-align: center;
    color: white;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: -0.7px;
}

.mobile_close {display:none;position: absolute;
    top: 0;
    font-size: 50px;
    z-index: 3;
    color: white;
    right: 16px;
    padding: 0;}

.flex_pricingin h1 p{    font-size: 10px;}
.flex_pricingin h1 del {    font-size: 31px;
    color: #E91E63;}

.flex_pricingin h1{color: #ffffff;
    background: #453b9d;
    margin: 0;
    padding: 19px;
    font-size: 31px;}
.flex_pricingin ul{padding: 0px 0px;}
.flex_pricingin li{background: white;
    padding: 7px 26px;
    list-style-type: none;
    font-size: 12px;
    font-weight: 600;}
.flex_pricingin li.back{background: #3f5c8417;}
.flex_pricingin li i{background: #1c631f;
    color: white;
    border-radius: 50px;
    padding: 6px;
    font-size: 11px;
    margin: 0px 10px;	}
	
	.row_contact {  background: transparent;
    color: black;
    padding: 91px 50px;
    text-align: center;}
	.row_contact h3{font-weight: 500;
 
    width: fit-content;
    margin: 5px auto;
    padding: 20px;}
	.row_contact h1{font-size: 50px;
    font-weight: 500;
    background: #ffffff;
    width: fit-content;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 10px 0px #544d4d33;
    border-radius: 7px;}
	
	.row_features {padding: 50px;text-align:center}
	.row_features p{      text-align: center;
    color: #000000;
    font-weight: 500;
    border-bottom: 2px solid #8BC34A;
    width: fit-content;
    margin: 0 auto;
}
	
	.row_features h1{text-align: center;
    font-size: 38px;
    color: #363c3f;
    width: auto;
    letter-spacing: -0.6px;
    font-weight: 400;
    text-transform: capitalize;}
	#svg_fea {position: absolute;
    width: 100%;
    z-index: -1;
    left: 0;
    height: auto;
    bottom: 0;}
	.cont_share_boxes {
        width: 200px;
    display: inline-grid;
    font-size: 16px;
    margin: 5px;
    text-align: center;
    box-shadow: 0px 0px 20px 0px #b1b1b1b8;
    padding: 13px 13px 26px;
    font-weight: 500;
    border-radius: 5px;
    color: #453b9d;

}

.cont_share_boxes:hover:after {
    content: '';
    position: absolute;
    border: 6px solid orange;
    width: 30px;
    height: 27px;
    border-bottom: none;
    border-left: none;
    right: 0;
    top: 0;
	transition:0.3s;
}
.cont_share_boxes:hover:before {
    content: '';
    position: absolute;
    border: 6px solid orange;
    width: 30px;
    height: 27px;
    border-top: none;
    border-right: none;
    left: 0;
    bottom: 0;
	transition:0.3s;
}

.cont_share_boxes:hover {
	box-shadow: 0px 0px 10px 0px #0000002e;
	color:black;
}


	.cont_share_boxes i{font-size: 43px;
    margin: 20px;
    }
	
	.row_bottom {    background: #000000;
    color: white;
}
	.row_bottom  .side1{text-align: left;
    padding: 20px 0px 20px 62px;
    background: #ffffff00;
    color: white;
    width: 63%;}
	.row_bottom  .side1 h1 img{width: auto;
    height: 45px;
    margin: 0px;
    padding: 0px;
    filter: none;
    border-radius: 0px;}
	.row_bottom  .side1 h1{  display: flex;
    margin: 0px;
    margin: 24px 0px;
    padding: 0px;
    font-weight: 700;}
	.row_bottom  .side1 h3{font-weight: 500;
    font-size: 27px;
    color: #000000;}
	.row_bottom  .side1 .row_bt_p{display: flex;
    margin: 10px 0px;
}
	.row_bottom  .side1 .row_bt_p h4{line-height: 2;
    margin: 8px;
    font-weight: 500;
    font-size: 14px;}
	.row_bottom  .side1 .row_bt_p i{   padding: 12px 7px;
    width: 29px;
    text-align: center;
    font-size: 21px;
    margin: 2px 10px 0px 0px;
    height: fit-content;
    border: 2px solid #ffffff00;
    border: 2px solid;
    border-radius: 47px;}
	.row_bottom  .side2 h3{text-align: center;
    font-size: 30px;
    margin: 0;}
	.row_bottom  .side2 form{}
	.row_bottom  .side2 input,.row_bottom  .side2  textarea {width: 63%;
    padding: 14px;
    background: #00000000;
    border: 1px solid #ffffff;
    border-bottom: 2px solid white;
    margin: 38px auto 0px;
    color: white;
    font-size: 13px;
    border-radius: 7px;
    outline: none;}
	
	.row_bottom input[type=submit]{    width: 365px;
    background: linear-gradient(45deg, #214eec, #114bb1);
    font-size: 22px;
    padding: 11px;
    border-radius: 50px;
    border-bottom: 0px;
    margin: 20px;}
	.row_bottom  .side2  textarea  {
		height:100px
	}
	
	.row_bottom  .side2 input::placeholder,	.row_bottom  .side2 textarea::placeholder {color:#dcd6d6;font-style: italic;}
	
	.success_alert,.danger_alert  {padding: 16px 43px;
    background: #ececec1f;
    width: fit-content;
    font-size: 13px;
    margin: 6px auto;
    border-radius: 5px;}
	
	.temp_preview {    padding: 50px;
    text-align: center;
    width: auto;
    margin: 0 auto;
    overflow-x: scroll;
    background: white;}
	.temp_preview h1{text-align: center;
    font-weight: 400;
    margin: 0px 10px 40px;}
	.temp_pre {    display: inline-grid;
    margin: 10px 16px;
    text-align: center;
}
	.demo_slider {display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
	}
	
	@keyframes slowslide{
		0% {left:0;}
		100% {right:0;}
	}
	
	.temp_pre img {    width: 144px;
    border: 30px solid #000000;
    height: 260px;
    border-radius: 12px;
    border-left: 5px solid #000000;
    border-right: 5px solid #000000;
    padding: 0px;}
	
	.temp_pre:hover img {
		transition:0.3s;
		transform: scale(1.1);
	}
	
	.join_facebook {width: 51% !important;
    border-radius: 11px !important;
    margin: 5px !important;
    filter: brightness(1) !important;
}
	 .pre_btn{background: #E91E63;
    width: fit-content;
    margin: 13px auto;
    padding: 10px 30px;
    color: white;
    border: 1px solid;
    font-weight: 500;
    border-radius: 35px;
    cursor: pointer;}
	
	 .pre_btn:hover {
		    background: #009688;
    transition: 0.3s;
    color: white;
	}
	
	
	#qr_code_d {left: 50%;
    position: relative;
    transform: translate(-50%, 0px);
    margin: 0px 0px 24px;
}
	
	.services {
    padding: 20px;
    text-align: center;
    display: flex;}
	#servicesh2 {      text-align: center;
    font-size: 38px;
    color: #453b9d;
    font-weight: 700;
}

		.services h3 {    height: 50px;
    margin: 0px;
    font-weight: 600;
   }
	 .services_box{     width: 200px;
    vertical-align: middle;
    height: auto;
    background: linear-gradient(
45deg
, #e91e63, #6e0080,#4d05bf);
    padding: 27px;
    text-align: center;
    color: white;
    margin: 10px 4px;
    box-shadow: 0px 0px 10px 0px #00000012;
    border-radius: 10px;}
	.scroll_cont {display: flex;
    position: relative;
    margin: 0 auto;}
	.services_box h2 {}
	.services_box p{font-size: 12px;
    height: 65px;}
	
	
	.share_wtsp form{    display: flex;
    margin: 14px auto 20px;
    position: relative;
    width: fit-content;}
	.wtsp_share_btn  {background: #1aab2c;
    font-size: 12px;
    padding: 10px;cursor:pointer}
	.wtsp_share_btn i {}
	
	
	.share_box .close { font-size: 47px;
    text-align: end;
    padding: 0px 10px;
    font-weight: 400;
    color: red;}
	
	#whatsapp2 {background:#1aab2c;color:white}
	.fa-comment-dots	 {background: #1cbdff;
    color: white;}
	.share_box .close i {}
	.share_box {
		display:none;
		background: white;
    color: black;
    position: fixed;
    top: 10%;
    width: 351px;
    padding: 10px;
    box-shadow: 0px 0px 10px 0px #00000033;
    z-index: 3;
    border-radius: 11px;}
	.shar_btns {    width: 100px;
    text-align: center;
    display: inline-block;}
	.shar_btns i{padding: 10px;
    border-radius: 8px;}
	.shar_btns p{font-size: 10px;}
	
	/* animated button */
	.btn2 {background: linear-gradient(45deg, #453b9d, #009688);
    color: white;
    padding: 14px;
    width: fit-content;
    border-radius: 2px;
    margin: 20px auto;
    box-shadow: 0px 0px 10px 0px #00000017;
}
	
	.row33 {padding: 20px;
    color: #313131;
    text-align: center;}
	.row33 h1{      margin: 21px 0px 10px;
    text-align: center;
    font-weight: 500;
    color: #333333;
}
	.row33 p{font-size: 15px;
    text-align: center;
    width: 80%;
    margin: 27px auto;
    color: gray;}
	.row33 .benefit_box {   width: 208px;
    display: inline-block;
    margin: 6px;
    background: #453b9d;
    text-align: center;
    padding: 21px;
    height: 151px;
    vertical-align: top;
    box-shadow: 0px 0px 20px 0px #0000001f;
    border-radius: 20px;
    color: white;

}


	.row33 .benefit_box i {font-size: 29px;
    }
	.row33 .benefit_box h3 {margin: 7px;
    font-weight: 600;}
	.row33 .benefit_box p {color:white;
    font-size: 12px;
    font-weight: 400;}
	
	/*view counter*/
	
	.view_counter {width: fit-content;
    max-width: 200px;
    text-align: center;
    font-size: 10px;
    padding: 2px 12px;
    background: black;
    color: white;
    border-radius: 3px;
    margin: 0 auto;
    top: 0px;
    z-index: 5;}
	/*footer*/
	
	
	
	
	footer {background: black;
    color: white;}
	footer p{margin: 0px;
    padding: 14px;
    text-align: center;
    font-size: 11px;}
	
	/*order online */


#checkout{width: 400px;
    margin: 0 auto;
    border: 2px solid #3F51B5;
    border-left: 2px solid red;
    border-bottom: 2px solid green;
    border-radius: 9px;
    box-shadow: 0px 0px 20px 0px #6f60603d;
    padding: 21px;
}

.checkout_preview {overflow: hidden;
    background: white;
    padding: 10px;
    margin: 14px 0px;
    border-radius: 10px;}
.checkout_preview img{width: 50%;
    max-height: 150px;
    position: relative;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0px);}
.checkout_preview h2{    margin: 6px;
    text-align: center;
    font-weight: 500;
    color: black;
    font-size: 16px;}
.checkout_preview h4{ margin: 6px;
    text-align: center;
    font-weight: 500;
    display: inline-block;
    color: #757575;
    font-size: 16px;}
.checkout_preview p{    margin: 6px;
    text-align: center;
    font-weight: 500;
    color: black;
    font-size: 16px;}


.checkout_payment {}

.row_bt_p {}
.row_bt_p img{    height: auto;
    border: 0px;
    width: 250px;
    margin: 14px auto;}

.card2 form input, .card2 form select {
    width: -webkit-fill-available;
    font-size: 14px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #dedede;
    margin: 4px 26px;
    resize: vertical;
    background: #00000005;
	
	
}

.order_confirmation {background: white;
    padding: 34px 20px 20px;
    width: 300px;
    text-align: center;
    margin: 100px auto;
    font-size: 14px;
    line-height: 2;
    box-shadow: 0px 0px 10px 0px #0000001c;
    border-radius: 10px;}
.order_confirmation i{font-size: 55px;
    color: #8BC34A;}
.order_confirmation p{}

.back_btn {background: #03A9F4;
    color: white;
    width: fit-content;
    padding: 5px 18px;
    margin: 0 auto;
    border-radius: 5px;}	



.card_loader_back {    z-index: 100;
    background: #ffffff;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
}
.loader2 {    background: #ffffffcc;
    width: -webkit-fill-available;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.loader2 h2 {    text-align: center;
    font-family: sans-serif;
    color: #777575c4;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}
.loader_box {width: 190px;
    margin: 10% auto 0px;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    text-align: center;
    height: 100px;
    align-items: end;}
	
.load1 {background: linear-gradient(
45deg
, #f44336, #e91e63,#ff9800);
    width: 27px;
    height: 27px;
    border-radius: 29px;
    
    bottom: 0;    text-align: center;
	animation-delay:0s;
	}
	

.load2 {background: linear-gradient(
45deg
, #2196f3, #673ab7,#9c27b0);
    width: 27px;
    height: 27px;
    border-radius: 29px;
    text-align: center;
    bottom: 0;
		animation-delay:0.2s
	}
.load3 {background: linear-gradient(
45deg
, #cddc39, #453b9d,#009688);
    width: 27px;
    height: 27px;
    border-radius: 29px;
       text-align: center;
    bottom: 0;
		animation-delay:0.4s
	}
.load4 {background: linear-gradient(
45deg
, #ffeb3b, #ff9800,#ff9800);
    width: 27px;
    height: 27px;
    border-radius: 29px;
        text-align: center;
    bottom: 0;
		animation-delay:0.6s
	}
.load5 {background: linear-gradient(
45deg
, #f44336, #e91e63,#ff9800);
    width: 27px;
    height: 27px;
    border-radius: 29px;
	    text-align: center;
    bottom: 0;
		animation-delay:0.8s
	}

.load1,.load2,.load3,.load4,.load5 {position: relative;
    display: block;
    margin: 0 auto;
    animation: bounce 01s ease-out infinite alternate;
}

.load1 {animation-delay:0s;}
.load2 {animation-delay:0.2s;}
.load3 {animation-delay:0.4s;}
.load4 {animation-delay:0.6s;}
.load5 {animation-delay:0.8s;}

.load1:after,.load2:after,.load3:after,.load4:after,.load5:after {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    background: linear-gradient(
180deg
, black, transparent);
    top: -3px;
    left: 12px;
}
@keyframes bounce {
	0% {transform: translate(0, 0);
    height: 15px;
    box-shadow: 0px 22px 10px 0px #6d6d6d4f;
}
	30% {height: 27px;
    box-shadow: 0px 0px 0px 0px #6d6d6d4f;
}
	100% {transform: translate(0, -50px) ;height:27px;}
}

/* Dark futuristic product theme */
:root {
    --ink: #f5f7fb;
    --muted: #9aa4b2;
    --brand: #b7ff3c;
    --brand-dark: #93df16;
    --brand-soft: rgba(183,255,60,0.1);
    --line: rgba(255,255,255,0.1);
    --panel: #0a0d10;
    --panel-2: #101419;
}

body {
    background: #050607 !important;
    color: var(--ink) !important;
}

header {
    background: rgba(5,6,7,0.88) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
}

header .logo h3,
header .head_txt h3 {
    color: var(--ink) !important;
}

.brand_mark,
.login_btn,
.btn_1,
.btn_2 {
    background: var(--brand) !important;
    color: #071000 !important;
}

.main {
    min-height: 760px !important;
    background: #050607 !important;
}

.main img#background_img {
    opacity: 0.1;
    filter: grayscale(1);
}

.clip_path1 {
    background:
        radial-gradient(circle at 75% 20%, rgba(183,255,60,0.15), transparent 18rem),
        linear-gradient(90deg, rgba(5,6,7,0.98), rgba(5,6,7,0.74)) !important;
}

.eyebrow,
.section_kicker {
    color: var(--brand) !important;
}

.main .main_txt h1,
.side2 h1,
.templates_heading,
.row33 h1,
.row_features h1,
.cta_band h2 {
    color: var(--ink) !important;
}

.main .main_txt p,
.side2 h3,
.feature_band p,
.row33 p,
.row_features,
.cta_band p {
    color: var(--muted) !important;
}

.btn_outline {
    border-color: var(--line) !important;
    background: rgba(255,255,255,0.02);
}

.hero_stats strong {
    color: var(--brand);
}

.row.display_flex,
.feature_band,
.demo_slider,
.row_backimg .flex_box,
.row33,
.row_features,
.row_bottom {
    max-width: 1200px;
}

.row.display_flex {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

.row_backimg,
.temp_preview,
.row33,
.row_features {
    background: #050607 !important;
}

.row_backimg .flex_box .flex_boxin,
.feature_band div,
.temp_pre,
.row33 .benefit_box,
.cont_share_boxes {
    border: 1px solid var(--line) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.row_backimg .flex_box .flex_boxin i,
.cont_share_boxes i,
.row33 .benefit_box i {
    color: var(--brand) !important;
    background: transparent !important;
}

.feature_band h3,
.row33 .benefit_box h3 {
    color: var(--ink) !important;
}

.row33 .benefit_box p {
    color: var(--muted) !important;
}

.new_lab {
    background: var(--brand) !important;
    color: #071000 !important;
}

.cta_band {
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top right, rgba(183,255,60,0.18), transparent 16rem),
        #0a0d10 !important;
}

.row_bottom {
    width: auto !important;
    border-top: 1px solid var(--line);
    background: #050607 !important;
}

.row_bottom .side2 input,
.row_bottom .side2 textarea {
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,0.03) !important;
    color: var(--ink) !important;
}

.row_bottom input[type=submit] {
    background: var(--brand) !important;
    color: #071000 !important;
}

/* Glassmorphism readability pass */
:root {
    --ink: #f8fafc;
    --muted: #c7d0dc;
    --brand: #b7ff3c;
    --brand-dark: #9fe326;
    --glass: rgba(255,255,255,0.08);
    --glass-strong: rgba(255,255,255,0.12);
    --line: rgba(255,255,255,0.18);
}

body {
    background:
        radial-gradient(circle at 10% 10%, rgba(183,255,60,0.12), transparent 22rem),
        radial-gradient(circle at 88% 8%, rgba(104, 127, 255, 0.16), transparent 24rem),
        linear-gradient(180deg, #07090d, #0b1018) !important;
}

header,
.row_backimg .flex_box .flex_boxin,
.feature_band div,
.temp_pre,
.row33 .benefit_box,
.cont_share_boxes,
.cta_band,
.row_bottom .side2 input,
.row_bottom .side2 textarea {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
    border: 1px solid var(--line) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(18px);
}

.row_backimg,
.temp_preview,
.row33,
.row_features {
    background: transparent !important;
}

.main .main_txt p,
.side2 h3,
.feature_band p,
.row33 p,
.row_features,
.cta_band p,
.row_bottom .row_bt_p h4 {
    color: var(--muted) !important;
}

.row33 .benefit_box p,
.cont_share_boxes,
.temp_pre,
.feature_band div {
    color: var(--ink) !important;
}

.row_bottom .side2 input,
.row_bottom .side2 textarea {
    color: var(--ink) !important;
}

.row_bottom .side2 input::placeholder,
.row_bottom .side2 textarea::placeholder {
    color: rgba(248,250,252,0.72) !important;
    font-style: normal !important;
}

/* Keep new-card gallery styling above legacy rules */
.temp_preview {
    padding: 42px 24px 58px !important;
    overflow: visible !important;
    background: #f8fafc !important;
}

.demo_slider {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.temp_pre {
    display: block !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: white !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
}

.temp_pre img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 14px !important;
}

/* Fastkaam main-site brand integration */
:root {
    --fk-blue: #061c86;
    --fk-blue-2: #0a3fc8;
    --fk-red: #d90000;
    --fk-yellow: #ffe100;
    --fk-orange: #ff8a00;
    --ink: #08154f;
    --muted: #526079;
    --brand: #ffe100;
    --brand-dark: #ff8a00;
    --line: rgba(6, 28, 134, 0.16);
}

body {
    background:
        radial-gradient(circle at 8% 12%, rgba(255,225,0,.24), transparent 18%),
        radial-gradient(circle at 92% 8%, rgba(10,63,200,.22), transparent 22%),
        linear-gradient(180deg, #e8f2ff 0%, #f9fbff 52%, #eaf3ff 100%) !important;
    color: var(--ink) !important;
}

header {
    width: min(100% - 18px, 1200px) !important;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    height: 74px;
    top: 0;
    padding: 0 18px !important;
    border: 3px solid #fff !important;
    border-top: 0 !important;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(90deg, #06145d, var(--fk-blue), #07145f) !important;
    box-shadow: 0 10px 30px rgba(6, 20, 93, .28) !important;
}

header .logo h3,
header .head_txt h3 {
    color: #fff !important;
}

.brand_mark {
    background: #fff !important;
    color: var(--fk-red) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.login_btn {
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange)) !important;
    color: #111 !important;
    border: 2px solid rgba(255,255,255,.75);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 8px 20px rgba(255,138,0,.28);
}

.main {
    width: min(1220px, calc(100% - 16px));
    min-height: 650px !important;
    margin: 16px auto 0;
    border: 5px solid var(--fk-blue);
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(235,245,255,.94)),
        radial-gradient(circle at 50% 20%, #fff 0 22%, transparent 23%),
        linear-gradient(135deg, #dcebff, #fff 46%, #ddebff) !important;
    box-shadow: 0 18px 45px rgba(6, 28, 134, .18);
}

.main img#background_img {
    opacity: .16 !important;
    filter: saturate(1.08) contrast(1.03) !important;
}

.clip_path1 {
    background:
        radial-gradient(circle at 88% 18%, rgba(255,225,0,.28), transparent 18rem),
        linear-gradient(124deg, rgba(6,28,134,.14) 0 7%, transparent 7.2% 88%, rgba(6,28,134,.12) 88.2% 100%),
        linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.68)) !important;
}

.main .main_txt {
    margin-top: 8% !important;
    color: var(--ink) !important;
}

.main .main_txt h1 {
    color: var(--fk-red) !important;
    font-size: clamp(2.3rem, 4.7vw, 4rem) !important;
    line-height: 1.02;
    text-shadow: 3px 3px 0 #fff, 6px 7px 0 rgba(0,0,0,.12);
}

.main .main_txt p,
.side2 h3,
.feature_band p,
.row33 p,
.cta_band p,
.row_bottom .row_bt_p h4 {
    color: var(--muted) !important;
}

.eyebrow,
.section_kicker,
.hero_stats strong {
    color: var(--fk-red) !important;
}

.btn_1,
.btn_2 {
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange)) !important;
    color: #111 !important;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 14px !important;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 8px 20px rgba(255,138,0,.28);
}

.btn_outline {
    color: var(--fk-blue) !important;
    border: 2px solid var(--fk-blue) !important;
    background: rgba(255,255,255,.76) !important;
}

.demo_card_side img,
.side1 img {
    box-shadow: 0 22px 55px rgba(6, 28, 134, .22) !important;
}

.row.display_flex,
.row_backimg,
.feature_band,
.temp_preview,
.row33,
.row_features,
.cta_band,
.row_bottom {
    max-width: 1160px !important;
}

.row.display_flex {
    margin: 0 auto;
}

.side2 h1,
.templates_heading,
.row_backimg h1,
.row33 h1,
.row_features h1,
.cta_band h2,
.row_bottom h1 {
    color: var(--ink) !important;
}

.row_backimg,
.temp_preview,
.row33,
.row_features {
    background: transparent !important;
}

.row_backimg .flex_box .flex_boxin,
.feature_band div,
.temp_pre,
.row33 .benefit_box,
.cont_share_boxes,
.cta_band {
    border: 2px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.84) !important;
    color: var(--ink) !important;
    box-shadow: 0 14px 32px rgba(6,28,134,.12) !important;
    backdrop-filter: blur(10px);
}

.row_backimg .flex_box .flex_boxin i,
.cont_share_boxes i,
.row33 .benefit_box i {
    color: var(--fk-blue) !important;
}

.new_lab {
    background: linear-gradient(180deg, #f40a0a, #b90000) !important;
    color: #fff !important;
}

.cta_band {
    background:
        radial-gradient(circle at top right, rgba(255,225,0,.25), transparent 16rem),
        rgba(255,255,255,.88) !important;
}

.row_bottom {
    margin: 34px auto 0 !important;
    border: 3px solid var(--fk-blue) !important;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, #06145d, var(--fk-blue), #07145f) !important;
    color: #fff !important;
}

.row_bottom h1,
.row_bottom .side2 h3 {
    color: #fff !important;
}

.row_bottom .row_bt_p h4 {
    color: rgba(255,255,255,.86) !important;
}

.row_bottom .side2 input,
.row_bottom .side2 textarea {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.row_bottom .side2 input::placeholder,
.row_bottom .side2 textarea::placeholder {
    color: #6b7890 !important;
}

.row_bottom input[type=submit] {
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange)) !important;
    color: #111 !important;
}

footer {
    background: #06145d !important;
    color: #fff !important;
}

.floating-actions {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 60px;
    height: 60px;
}

.fab-actions {
    position: absolute;
    right: 0;
    bottom: 70px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.floating-actions .fab-action {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.92);
    box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

.fab-icon,
.fab-main-icon {
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.fab-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.fab-call {
    background: linear-gradient(180deg, var(--fk-red), #b90000);
}

.fab-chat {
    background: linear-gradient(180deg, #18b64e, #0c8e35);
}

.floating-actions .fab-main {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange));
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 10px 24px rgba(255,138,0,.28);
    cursor: pointer;
}

.fab-main-icon {
    width: 36px;
    height: 36px;
    background: var(--fk-blue);
    color: #fff;
}

.fab-main-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
}

.floating-actions.open .fab-actions {
    pointer-events: auto;
}

.floating-actions.open .fab-action {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Flagship landing-page refresh */
body {
    padding-top: 92px;
}

header {
    position: fixed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px;
    z-index: 999 !important;
}

header .logo h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    font-weight: 700 !important;
}

header .head_txt {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

header .head_txt a {
    text-decoration: none;
}

header .head_txt h3 {
    margin: 0 !important;
    padding: 14px 16px !important;
    border-radius: 999px;
}

header .head_txt h3:not(.login_btn):hover {
    background: rgba(255,255,255,.12);
}

.main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    min-height: 620px !important;
    padding: clamp(28px, 4vw, 52px);
}

.main .main_txt {
    width: auto !important;
    margin: 0 !important;
    position: relative;
    z-index: 3;
}

.main .main_txt p {
    margin: 22px 0 0 !important;
    max-width: 610px;
}

.hero_actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.hero_actions a {
    text-decoration: none;
}

.hero_stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.hero_stats div {
    min-width: 112px;
    padding: 14px 16px;
    border: 1px solid rgba(6,28,134,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 14px 28px rgba(6,28,134,.08);
    backdrop-filter: blur(10px);
}

.hero_stats strong,
.hero_stats span {
    display: block;
}

.hero_stats span {
    margin-top: 4px;
    color: var(--muted);
}

.hero_visual {
    min-height: 510px;
    position: relative;
    display: grid;
    place-items: center;
    z-index: 2;
}

.hero_visual img {
    width: min(100%, 470px);
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 28px 34px rgba(6,28,134,.22));
}

.hero_glow {
    width: min(84%, 420px);
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,225,0,.48), rgba(255,225,0,.16) 38%, transparent 72%),
        radial-gradient(circle at 60% 40%, rgba(10,63,200,.26), transparent 58%);
    filter: blur(2px);
}

.hero_chip {
    position: absolute;
    z-index: 3;
    padding: 12px 16px;
    border: 1px solid rgba(6,28,134,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: var(--fk-blue);
    font-weight: 700;
    box-shadow: 0 16px 32px rgba(6,28,134,.14);
    backdrop-filter: blur(10px);
}

.hero_chip_top {
    top: 72px;
    right: 22px;
}

.hero_chip_bottom {
    left: 8px;
    bottom: 86px;
}

.feature_visual_card {
    width: min(100%, 470px);
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(6,28,134,.14);
    border-radius: 28px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 20px 42px rgba(6,28,134,.14);
}

.template-shuffle {
    position: relative;
    min-height: 470px;
    display: grid;
    place-items: center;
}

.template-shuffle img {
    position: absolute;
    width: min(220px, 56%);
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 22px;
    box-shadow: 0 24px 48px rgba(6,28,134,.16);
}

.template-shuffle img:nth-child(1) {
    left: 8px;
    transform: rotate(-10deg) translateY(18px);
    z-index: 1;
}

.template-shuffle img:nth-child(2) {
    z-index: 3;
    width: min(238px, 60%);
}

.template-shuffle img:nth-child(3) {
    right: 8px;
    transform: rotate(10deg) translateY(18px);
    z-index: 2;
}

.row33 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.row33 > h1,
.row33 > p {
    grid-column: 1 / -1;
}

.row33 .benefit_box {
    width: auto !important;
    min-height: 230px;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    padding: 26px 22px !important;
}

.row33 .benefit_box h3 {
    margin: 14px 0 10px !important;
    line-height: 1.2;
}

.row33 .benefit_box p {
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.55;
}

/* Wider responsive system for the public landing page */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

@media screen and (max-width: 980px) {
    body {
        padding-top: 86px;
    }

    header {
        width: calc(100% - 16px) !important;
    }

    .main {
        grid-template-columns: 1fr;
        gap: 8px;
        min-height: auto !important;
    }

    .hero_visual {
        min-height: 440px;
    }

    .row.display_flex {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .side1,
    .side2 {
        width: 100% !important;
    }

    .feature_band {
        grid-template-columns: 1fr !important;
    }

    .row_backimg .flex_box {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .row33 .benefit_box {
        width: auto !important;
    }
}

@media screen and (max-width: 760px) {
    .row33 {
        grid-template-columns: 1fr !important;
    }

    .row33 .benefit_box {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row_bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .row_bottom .side1,
    .row_bottom .side2 {
        width: 100% !important;
    }

    .row_bottom input[type=submit] {
        width: 100% !important;
    }
}

/* Main-site-style public header and footer */
body {
    padding-top: 0;
}

.cards-top-strip {
    position: sticky;
    top: 0;
    z-index: 1001;
    padding: 9px 16px;
    background: var(--fk-blue);
    color: #fff;
    text-align: center;
    font-size: .88rem;
    font-weight: 800;
    transition: transform .25s ease, opacity .25s ease;
}

.cards-top-strip.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.cards-site-nav {
    position: sticky !important;
    top: 38px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(1160px, calc(100% - 20px)) !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    border: 3px solid #fff !important;
    border-radius: 0 0 24px 24px !important;
    background: linear-gradient(90deg, #06145d, var(--fk-blue), #07145f) !important;
    transition: top .25s ease, border-radius .25s ease;
}

.cards-site-nav.scrolled {
    top: 0 !important;
    border-radius: 0 0 18px 18px !important;
}

.cards-site-nav::before,
.cards-site-nav::after {
    content: none !important;
}

.cards-site-nav .logo,
.cards-site-nav .brand_mark {
    display: none !important;
}

.cards-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.cards-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
}

.cards-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cards-brand strong,
.cards-brand small {
    display: block;
}

.cards-brand strong {
    font-size: 1rem;
}

.cards-brand small {
    color: rgba(255,255,255,.74);
    font-size: .72rem;
    font-weight: 700;
}

.cards-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.cards-nav-links a {
    color: #fff;
    text-decoration: none;
}

.cards-nav-links h3 {
    margin: 0;
    padding: 12px 14px !important;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.cards-nav-links h3:hover {
    background: rgba(255,255,255,.12);
}

.cards-order-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange));
    color: #111 !important;
    font-weight: 900;
    text-decoration: none;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 8px 20px rgba(255,138,0,.28);
}

.cards-menu-btn,
.cards-mobile-nav {
    display: none;
}

.cards-site-footer {
    margin-top: 34px;
    padding: 42px 16px 24px;
    background: #06145d;
    color: #fff;
}

.cards-footer-grid {
    width: min(1160px, 100%);
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: 1.35fr .8fr .9fr .95fr 1.15fr;
    gap: 24px;
    text-align: left;
}

.cards-footer-grid p {
    margin-top: 14px;
    color: rgba(255,255,255,.82) !important;
    font-size: .92rem;
    line-height: 1.6;
    text-align: left;
}

.cards-footer-grid > div,
.cards-footer-brand,
.cards-footer-brand span,
.cards-footer-grid h4,
.cards-footer-grid a,
.cards-footer-grid span {
    text-align: left;
}

.cards-footer-grid h4 {
    margin: 0 0 12px;
    color: var(--fk-yellow);
    font-size: 1rem;
}

.cards-footer-grid a,
.cards-footer-grid span {
    display: block;
    margin: 8px 0;
    color: rgba(255,255,255,.88);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.cards-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
    justify-content: flex-start;
}

.cards-footer-grid .cards-footer-social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    opacity: 1;
}

.cards-footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.cards-footer-social a:hover {
    background: var(--fk-yellow);
    color: var(--fk-blue);
    border-color: var(--fk-yellow);
}

.cards-payment-title {
    margin-top: 18px !important;
}

.cards-footer-payments {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.cards-footer-payments strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 27px;
    margin: 0;
    border-radius: 4px;
    background: #fff;
    color: #111;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 5px 12px rgba(0,0,0,.12);
    font-family: Arial,sans-serif;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    opacity: 1;
}

.cards-footer-payments .pay-visa { color: #1434cb; font-style: italic; letter-spacing: .02em; }
.cards-footer-payments .pay-master { gap: 0; }
.cards-footer-payments .pay-master span { display: block; width: 15px; height: 15px; margin: 0 -2px; border-radius: 50%; opacity: 1; }
.cards-footer-payments .pay-master span:first-child { background: #eb001b; }
.cards-footer-payments .pay-master span:last-child { background: #f79e1b; }
.cards-footer-payments .pay-amex { background: #1f72cd; color: #fff; font-size: .58rem; }
.cards-footer-payments .pay-rupay { color: #174a9c; font-style: italic; }
.cards-footer-payments .pay-rupay::after { content: ""; width: 0; height: 0; margin-left: 3px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #f58220; }
.cards-footer-payments .pay-upi { width: 58px; gap: 3px; color: #2f333a; font-size: .98rem; font-style: italic; letter-spacing: -.08em; }
.cards-footer-payments .pay-upi span { position: relative; display: inline-block; width: 16px; height: 20px; margin: 0 0 0 2px; opacity: 1; flex: 0 0 auto; }
.cards-footer-payments .pay-upi span::before,
.cards-footer-payments .pay-upi span::after { content: ""; position: absolute; top: 2px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.cards-footer-payments .pay-upi span::before { left: 0; border-left: 11px solid #f58220; }
.cards-footer-payments .pay-upi span::after { left: 5px; border-left: 11px solid #087b57; }

.cards-footer-form form {
    display: grid;
    gap: 9px;
}

.cards-footer-form input,
.cards-footer-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    font-size: .9rem;
    padding: 10px 12px;
}

.cards-footer-form textarea {
    min-height: 92px;
}

.cards-footer-form input[type=submit] {
    border: 2px solid rgba(255,255,255,.75);
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange));
    color: #111;
    font-weight: 900;
}

.cards-footer-bottom {
    width: min(1160px, 100%);
    margin: 0 auto;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.82);
    font-size: .88rem;
    font-weight: 800;
}

.cards-footer-bottom a {
    color: var(--fk-yellow);
    font-weight: 950;
    text-decoration: none;
}

@media screen and (max-width: 900px) {
    .cards-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cards-footer-form {
        grid-column: 1 / -1;
    }
}

/* Final homepage centering pass */
.row.display_flex,
.row_backimg,
.feature_band,
.temp_preview,
.row33,
.row_features,
.cta_band,
.cards-site-footer {
    margin-left: auto !important;
    margin-right: auto !important;
}

.row_backimg,
.row33,
.row_features {
    width: min(1160px, calc(100% - 32px)) !important;
}

.feature_band,
.temp_preview,
.cta_band {
    width: min(1160px, calc(100% - 32px)) !important;
}

.row.display_flex {
    width: min(1160px, calc(100% - 32px)) !important;
}

.row33 > h1,
.row33 > p,
.row_features > p,
.row_features > h1,
.templates_heading,
.row_backimg > .section_kicker,
.row_backimg > h1 {
    text-align: center !important;
}

.row_backimg .flex_box,
.row_features,
.temp_preview {
    justify-content: center !important;
}

.hero_actions,
.hero_stats {
    justify-content: flex-start;
}

.cards-site-footer,
.cards-site-footer .cards-footer-grid,
.cards-site-footer .cards-footer-grid > div,
.cards-site-footer .cards-footer-brand,
.cards-site-footer .cards-footer-brand span,
.cards-site-footer .cards-footer-grid h4,
.cards-site-footer .cards-footer-grid p,
.cards-site-footer .cards-footer-grid a,
.cards-site-footer .cards-footer-grid span {
    text-align: left !important;
}

.cards-site-footer .cards-footer-social,
.cards-site-footer .cards-footer-payments {
    justify-content: flex-start !important;
}

.cards-pricing{
    width:min(1180px,calc(100% - 48px));
    margin:64px auto;
    text-align:center;
}
.pricing-heading{max-width:720px;margin:0 auto 28px}
.pricing-heading h2{margin:10px 0 12px;color:#10215f}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1080px;margin:0 auto}
.pricing-card{background:#fff;border:1px solid rgba(16,33,95,.12);border-radius:24px;padding:28px;text-align:left;box-shadow:0 16px 40px rgba(16,33,95,.08)}
.pricing-card span{font-weight:700;color:#53637f}
.pricing-card strong{display:block;font-size:2.3rem;color:#10215f;margin:8px 0}
.pricing-card ul{padding-left:18px;line-height:1.9}
.pricing-card a{display:inline-block;margin-top:10px;padding:12px 18px;border-radius:999px;background:#10215f;color:#fff}
.pricing-card.featured{background:linear-gradient(180deg,#12246c,#1c358e);color:#fff}
.pricing-card.featured span,.pricing-card.featured strong{color:#fff}
.pricing-card.featured a{background:#ffc400;color:#111}
.pricing-card.addon strong{font-size:1.7rem}
.pricing-card.addon a{background:#fff1e8;color:#10215f}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}.journey-strip,.nfc-upgrade{grid-template-columns:1fr}}

/* FastKaam product-page refresh */
.main {
    width: min(1220px, calc(100% - 16px)) !important;
    min-height: 620px !important;
    margin: 16px auto 0 !important;
    padding: clamp(26px, 4vw, 48px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1fr) !important;
    gap: clamp(26px, 4vw, 60px) !important;
    align-items: center !important;
    border: 5px solid var(--fk-blue) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(238,245,255,.96)),
        radial-gradient(circle at 12% 14%, rgba(255,225,0,.28), transparent 23%),
        radial-gradient(circle at 92% 14%, rgba(6,28,134,.15), transparent 28%) !important;
    box-shadow: 0 18px 45px rgba(6,28,134,.18) !important;
    color: var(--fk-ink) !important;
    overflow: hidden !important;
}

.main::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(124deg, rgba(6,28,134,.96) 0 7%, transparent 7.2% 88%, rgba(6,28,134,.96) 88.2% 100%),
        radial-gradient(circle at 86% 18%, rgba(6,28,134,.08) 0 1.5px, transparent 1.7px) 0 0 / 14px 14px;
    pointer-events: none;
}

.clip_path1 { display: none !important; }

.main .main_txt {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    margin: 0 !important;
    color: var(--fk-ink) !important;
}

.main .eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: var(--fk-yellow) !important;
    color: var(--fk-red) !important;
    font-size: clamp(.58rem, .82vw, .76rem) !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
}

.main .main_txt h1 {
    color: var(--fk-blue) !important;
    font-size: clamp(2.35rem, 4.6vw, 4.05rem) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    max-width: 690px !important;
    word-break: normal !important;
}

.main .main_txt p {
    margin: 18px 0 0 !important;
    max-width: 690px !important;
    color: var(--fk-muted) !important;
    font-size: clamp(1rem, 2vw, 1.22rem) !important;
    line-height: 1.65 !important;
    font-weight: 850 !important;
}

.hero_actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.hero_actions a { text-decoration: none !important; }

.hero_actions .btn_2,
.hero_actions .btn_outline {
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    padding: 13px 20px !important;
    font-weight: 950 !important;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 8px 20px rgba(255,138,0,.24) !important;
}

.hero_actions .btn_2 {
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange)) !important;
    color: #111 !important;
    border: 2px solid rgba(255,255,255,.85) !important;
}

.hero_actions .btn_outline {
    background: #fff !important;
    color: var(--fk-blue) !important;
    border: 2px solid var(--fk-line) !important;
}

.hero_stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

.hero_stats div {
    min-width: 0 !important;
    padding: 15px !important;
    border: 2px solid var(--fk-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(6,28,134,.08) !important;
}

.hero_stats strong {
    color: var(--fk-red) !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
}

.hero_stats span {
    color: var(--fk-muted) !important;
    font-weight: 900 !important;
}

.hero_visual {
    position: relative !important;
    z-index: 2 !important;
    min-height: 470px !important;
    padding-top: 38px !important;
    display: grid !important;
    place-items: center !important;
}

.hero_visual::before {
    content: "FastKaam Product";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--fk-yellow);
    color: var(--fk-ink);
    font-weight: 950;
    z-index: 3;
}

.hero_visual img {
    position: relative !important;
    width: min(100%, 390px) !important;
    max-height: 430px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 28px 24px rgba(6,28,134,.22)) !important;
    z-index: 2 !important;
}

.hero_glow {
    position: absolute !important;
    width: 78% !important;
    aspect-ratio: 1 !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #06145d, #0a3fc8) !important;
    box-shadow: 0 18px 44px rgba(6,28,134,.24) !important;
}

.hero_chip {
    z-index: 3 !important;
    background: #fff !important;
    color: var(--fk-blue) !important;
    border: 2px solid var(--fk-line) !important;
    box-shadow: 0 10px 22px rgba(6,28,134,.12) !important;
}

.hero_chip_top {
    top: 58px !important;
    right: 10px !important;
}

.hero_chip_bottom {
    left: 14px !important;
    bottom: 28px !important;
}

.cards-product-strip {
    width: min(1060px, calc(100% - 24px));
    margin: -38px auto 34px;
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cards-product-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 92px;
    padding: 14px;
    border: 2px solid var(--fk-line);
    border-radius: 18px;
    background: #fff;
    color: var(--fk-ink);
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(6,28,134,.1);
}

.cards-product-item.primary {
    border-color: var(--fk-blue);
}

.cards-product-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange));
    color: var(--fk-blue);
    font-size: 1.35rem;
}

.cards-product-item strong {
    display: block;
    color: var(--fk-blue);
    font-weight: 950;
    line-height: 1.2;
}

.cards-product-item small {
    display: block;
    color: var(--fk-muted);
    font-weight: 850;
    margin-top: 3px;
}

.journey-strip,
.feature_band,
.cards-pricing,
.nfc-upgrade {
    border-color: var(--fk-line) !important;
    box-shadow: 0 12px 28px rgba(6,28,134,.08) !important;
}

.cards-product-proof {
    width: min(1160px, calc(100% - 24px));
    margin: 54px auto;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
    padding: clamp(22px, 4vw, 42px);
    border: 3px solid var(--fk-blue);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,245,255,.98)),
        radial-gradient(circle at 12% 14%, rgba(255,225,0,.2), transparent 24%);
    box-shadow: 0 18px 45px rgba(6,28,134,.12);
    overflow: hidden;
    position: relative;
}

.cards-product-proof::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(124deg, rgba(6,28,134,.96) 0 5%, transparent 5.2% 100%);
    pointer-events: none;
}

.cards-proof-copy,
.cards-proof-visual {
    position: relative;
    z-index: 1;
}

.cards-proof-copy .section_kicker {
    margin: 0 0 12px;
    color: var(--fk-red);
    font-weight: 950;
    letter-spacing: 0;
    text-transform: none;
}

.cards-proof-copy h1 {
    margin: 0;
    max-width: 620px;
    color: var(--fk-blue);
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 1.08;
    font-weight: 950;
}

.cards-proof-copy > p {
    margin: 16px 0 0;
    max-width: 640px;
    color: var(--fk-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 850;
}

.cards-proof-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.cards-proof-list div {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 2px solid var(--fk-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(6,28,134,.06);
}

.cards-proof-list i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fk-yellow), var(--fk-orange));
    color: var(--fk-blue);
    font-size: 1.1rem;
}

.cards-proof-list strong {
    display: block;
    color: var(--fk-blue);
    font-weight: 950;
}

.cards-proof-list small {
    display: block;
    color: var(--fk-muted);
    font-weight: 800;
    margin-top: 2px;
}

.cards-proof-visual {
    min-height: 430px;
}

.cards-proof-visual .feature_visual_card {
    width: 100% !important;
    min-height: 430px;
    margin: 0 !important;
    border: 2px solid var(--fk-line);
    border-radius: 24px;
    background: linear-gradient(135deg, #06145d, #0a3fc8);
    box-shadow: 0 22px 44px rgba(6,28,134,.18);
}

.cards-proof-visual .template-shuffle {
    min-height: 430px;
}

.cards-proof-badge {
    position: absolute;
    z-index: 3;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--fk-blue);
    border: 2px solid var(--fk-line);
    box-shadow: 0 10px 22px rgba(6,28,134,.12);
    font-weight: 950;
}

.cards-proof-badge.top {
    top: 18px;
    right: 18px;
}

.cards-proof-badge.bottom {
    left: 18px;
    bottom: 18px;
    background: var(--fk-yellow);
    color: var(--fk-ink);
}

@media(max-width:900px){
    .main {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .cards-product-strip {
        grid-template-columns: 1fr !important;
        margin-top: 16px !important;
    }

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