*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
:root { --navy: #1a3446; --navy-dark: #111e2b; --teal: #127287; --teal-light: #1a9db8; --red: #dc233d; --red-dark: #b81c31; --cream: #ededec; --dark: #222427; --white: #fff; --g50: #f7f9fc; --g100: #eef2f7; --g200: #dde4ee; --g400: #8fa3bf; --g600: #4a6280; --text: #1a2e45; --sh: 0 4px 24px rgba(26,52,70,.12); --sh-lg: 0 8px 48px rgba(26,52,70,.18); }
html { scroll-behavior: smooth }
body { font-family: "Heebo",sans-serif; color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased }
#footer { font-family: 'Assistant', sans-serif; }
/* HERO */
.hero { position: relative; overflow: hidden; background: linear-gradient(145deg,var(--navy-dark) 0%,var(--navy) 60%,#1f4a63 100%); padding: 60px 20px 90px }
    .hero::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none }
.hero-inner { position: relative; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(220,35,61,.18); border: 1px solid rgba(220,35,61,.4); color: #ff8899; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 50px; margin-bottom: 18px }
.main_headline { font-size: clamp(28px,5vw,52px); font-weight: 900; color: #fff; line-height: 1.18; margin-bottom: 16px }
    .main_headline em { font-style: normal; color: #ff6b7e }
.hero-sub { font-size: clamp(15px,2vw,18px); color: rgba(255,255,255,.75); margin-bottom: 32px; font-weight: 400 }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-family: "Heebo",sans-serif; font-size: 17px; font-weight: 800; padding: 16px 32px; border-radius: 50px; text-decoration: none; border: none; cursor: pointer; transition: all .2s; box-shadow: 0 4px 24px rgba(220,35,61,.45) }
    .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(220,35,61,.5) }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.28); color: #fff; font-family: "Heebo",sans-serif; font-size: 15px; font-weight: 600; padding: 14px 24px; border-radius: 50px; text-decoration: none; transition: all .2s }
    .btn-secondary:hover { background: rgba(255,255,255,.18) }

/* HERO IMAGE */
.hero-image-wrap { position: relative }
.hero-img-outer { border-radius: 22px; overflow: hidden; box-shadow: 0 16px 56px rgba(0,0,0,.45); aspect-ratio: 16/9; background: var(--navy); position: relative }
    .hero-img-outer img { width: 100%; height: 100%; object-fit: cover; display: block }
.hero-img-badge { position: relative; margin-top: 20px; background: #fff; border-radius: 14px; padding: 13px 20px; box-shadow: var(--sh-lg); display: inline-flex; align-items: center; gap: 12px; align-self: flex-start }
.hero-image-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start }
.stat-num { font-size: 22px; font-weight: 900; color: var(--navy); line-height: 1 }
.stat-label { font-size: 11px; color: var(--g600) }
.divider { width: 1px; height: 36px; background: var(--g200) }
.stat-num { font-size: 22px; font-weight: 900; color: var(--navy); line-height: 1 }
.stat-label { font-size: 11px; color: var(--g600) }
.divider { width: 1px; height: 36px; background: var(--g200) }
.hero-addr { margin-top: 12px; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px }

/* TRUST BAR */
.trust-bar { background: var(--cream); border-bottom: 1px solid #d5d5d4; padding: 18px 20px }
.trust-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap }
.trust-item { display: flex; align-items: center; gap: 8px; color: var(--g600); font-size: 13px; font-weight: 500 }
    .trust-item svg { width: 19px; height: 19px; color: var(--red); flex-shrink: 0 }
    .trust-item strong { color: var(--dark) }

/* SECTIONS */
section { padding: 72px 20px }
.section-inner { max-width: 1100px; margin: 0 auto }
.section-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); background: rgba(18,114,135,.1); padding: 5px 12px; border-radius: 50px; margin-bottom: 12px }
.section-title { font-size: clamp(24px,4vw,38px); font-weight: 900; color: var(--navy-dark); line-height: 1.25; margin-bottom: 12px }
.section-sub { font-size: 16px; color: var(--g600); max-width: 560px; margin-bottom: 48px }

/* CARDS */
.cards-section { background: #fff; padding: 50px 10px; box-sizing: border-box; }
.cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px }
.card { background: #fff; border: 1.5px solid var(--g200); border-radius: 20px; padding: 32px 28px; transition: all .3s; position: relative; overflow: hidden }
    .card:hover { border-color: var(--teal); box-shadow: var(--sh); transform: translateY(-4px) }
.card-icon { width: 56px; height: 56px; background: linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px }
    .card-icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.card h3 { font-size: 20px; font-weight: 800; color: var(--navy-dark); margin-bottom: 8px }
.card p { font-size: 14px; color: var(--g600); line-height: 1.65 }
.card-img { margin-top: 18px; border-radius: 10px; overflow: hidden; height: 130px; background: linear-gradient(135deg,var(--navy),var(--teal)) }
    .card-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.card-tag { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--teal); background: rgba(18,114,135,.1); padding: 4px 10px; border-radius: 50px }

/* HOW IT WORKS */
.how-section { background: var(--g50); padding: 50px 10px; box-sizing: border-box; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative }
    .steps::before { content: ""; position: absolute; top: 32px; right: 12.5%; left: 12.5%; height: 2px; background: linear-gradient(to left,var(--teal),var(--red)); z-index: 0 }
.step { text-align: center; padding: 0 16px; position: relative; z-index: 1 }
.step-num { width: 64px; height: 64px; background: var(--red); color: #fff; font-size: 22px; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(220,35,61,.3) }
.step h4 { font-size: 16px; font-weight: 800; color: var(--navy-dark); margin-bottom: 6px }
.step p { font-size: 13px; color: var(--g600) }

/* FORM SECTION */
.form-section { padding: 50px 10px; box-sizing: border-box; background: #0389A6; position: relative; overflow: hidden }
    .form-section::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E") }
.form-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.form-copy .section-title { color: #fff }
.form-copy .section-sub { color: rgba(255,255,255,.7); margin-bottom: 28px }
.form-copy .section-tag { background: rgba(220,35,61,.2); color: #ff8899 }
.form-perks { list-style: none; display: flex; flex-direction: column; gap: 12px }
    .form-perks li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font-size: 15px }
        .form-perks li svg { width: 20px; height: 20px; flex-shrink: 0 }
.form-card { background: #fff; border-radius: 24px; padding: 40px 36px; box-shadow: 0 24px 64px rgba(0,0,0,.3) }
    .form-card h3 { font-size: 22px; font-weight: 900; color: var(--navy-dark); margin-bottom: 6px }
    .form-card p { font-size: 14px; color: var(--g600); margin-bottom: 28px }
.form-group { margin-bottom: 16px }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--g600); margin-bottom: 6px }
    .form-group input, .form-group select { width: 100%; padding: 13px 16px; border: 1.5px solid var(--g200); border-radius: 10px; font-family: "Heebo",sans-serif; font-size: 15px; color: var(--text); background: var(--g50); transition: border-color .2s,box-shadow .2s; outline: none; direction: rtl }
        .form-group input:focus, .form-group select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,114,135,.12); background: #fff }
.form-submit { width: 100%; padding: 16px; background: var(--red); color: #fff; font-family: "Heebo",sans-serif; font-size: 17px; font-weight: 800; border: none; border-radius: 12px; cursor: pointer; transition: all .2s; box-shadow: 0 4px 20px rgba(220,35,61,.35); margin-top: 6px }
    .form-submit:hover { background: var(--red-dark); transform: translateY(-1px) }
.form-note { font-size: 12px; color: var(--g400); text-align: center; margin-top: 12px }

/* CAPTCHA / BOT CHECK */
.captcha-wrap { margin: 16px 0; border: 1.5px solid var(--g200); border-radius: 10px; padding: 14px 16px; background: var(--g50); display: flex; align-items: center; justify-content: space-between }
.captcha-left { display: flex; align-items: center; gap: 12px }
.captcha-checkbox { width: 24px; height: 24px; border: 2px solid var(--g400); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; background: #fff }
    .captcha-checkbox.checked { background: var(--teal); border-color: var(--teal) }
        .captcha-checkbox.checked::after { content: "✓"; color: #fff; font-size: 15px; font-weight: 700 }
.captcha-label { font-size: 14px; color: var(--text); font-weight: 500; cursor: pointer }
.captcha-badge { display: flex; flex-direction: column; align-items: center; gap: 2px }
    .captcha-badge img { width: 32px; height: 32px }
    .captcha-badge span { font-size: 9px; color: var(--g400) }
.captcha-spinning { animation: spin .8s linear infinite }

@keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

/* THANK YOU */
.thankyou-state { display: none; text-align: center; padding: 20px 0 }
    .thankyou-state.active { display: block }
.form-active.hidden { display: none }
.ty-icon { width: 72px; height: 72px; background: linear-gradient(135deg,var(--teal),var(--navy)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px }
    .ty-icon svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 2.5; fill: none }

/* FAQ */
.faq-section { background: #fff; padding: 50px 10px; box-sizing: border-box; }
.faq-grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start }
.faq-list { display: flex; flex-direction: column; gap: 12px }
.faq-item { border: 1.5px solid var(--g200); border-radius: 14px; overflow: hidden; transition: border-color .2s }
    .faq-item.open { border-color: var(--teal) }
.faq-q { width: 100%; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; font-family: "Heebo",sans-serif; font-size: 16px; font-weight: 700; color: var(--text); text-align: right; gap: 12px }
    .faq-q:hover { background: var(--g50) }
.faq-arrow { width: 24px; height: 24px; border-radius: 50%; background: var(--g100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s,transform .3s }
.faq-item.open .faq-arrow { background: var(--teal); transform: rotate(180deg) }
.faq-arrow svg { width: 14px; height: 14px; stroke: var(--g600); fill: none; stroke-width: 2.5; transition: stroke .2s }
.faq-item.open .faq-arrow svg { stroke: #fff }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease }
.faq-item.open .faq-a { max-height: 300px }
.faq-a-inner { padding: 0 22px 18px; font-size: 14px; color: var(--g600); line-height: 1.7; border-top: 1px solid var(--g100); padding-top: 14px }

/* FAQ SIDE CARD */
.faq-side { position: sticky; top: 86px }
.faq-side-img { border-radius: 20px; overflow: hidden; box-shadow: var(--sh-lg); margin-bottom: 20px; background: linear-gradient(135deg,var(--navy),var(--teal)) }
    .faq-side-img img { width: 100%; display: block; object-fit: cover; height: 220px }
.contact-card { background: var(--g50); border: 1.5px solid var(--g200); border-radius: 16px; padding: 22px }
    .contact-card .cc-title { font-size: 13px; font-weight: 700; color: var(--teal); margin-bottom: 8px }
    .contact-card .cc-addr { font-size: 15px; font-weight: 700; color: var(--navy-dark); margin-bottom: 4px }
    .contact-card .cc-sub { font-size: 13px; color: var(--g600); margin-bottom: 18px }
    .contact-card a { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 10px; font-weight: 700 }
.cc-phone-main { font-size: 16px; color: var(--navy) }
.cc-phone-star { font-size: 24px; color: var(--red) }


/* FLOATING CTA */
.floating-cta { display: none; position: fixed; bottom: 18px; left: 14px; right: 14px; background: var(--red); color: #fff; font-family: "Heebo",sans-serif; font-size: 16px; font-weight: 800; padding: 16px; border-radius: 14px; text-align: center; text-decoration: none; box-shadow: 0 8px 32px rgba(220,35,61,.5); z-index: 300; transition: background .2s }
    .floating-cta:hover { background: var(--red-dark) }

/* PULSE */
.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4caf50; margin-right: 6px; box-shadow: 0 0 0 0 rgba(76,175,80,.4); animation: pulse 2s infinite }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76,175,80,.4) }
    70% { box-shadow: 0 0 0 8px rgba(76,175,80,0) }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0) }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(-24px) }
    to { opacity: 1; transform: translateX(0) }
}

.anim-up { animation: fadeInUp .6s ease both }
.anim-right { animation: fadeInRight .7s .2s ease both }

#modal-box { margin: 0 auto; }
#modal-content { }
    #modal-content h2 { display: block; margin-bottom: 20px; font-size: 1.5em; }
    #modal-content p { line-height: 140%; }

/* RESPONSIVE */

@media only screen and (max-width : 600px) {
    body { padding-bottom: 80px !important; }
}

@media(max-width:900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 36px }
    .hero-image-wrap { order: -1 }
    .cards-grid { grid-template-columns: 1fr }
    .steps { grid-template-columns: repeat(2,1fr); gap: 28px }
        .steps::before { display: none }
    .form-wrap { grid-template-columns: 1fr; gap: 32px }
    .faq-grid { grid-template-columns: 1fr }
    .faq-side { position: static }
    .floating-cta { display: block }
    body { padding-bottom: 80px }
}

@media only screen and (max-width : 600px) {
    body { padding-bottom: 80px !important; }
}

@media(max-width:560px) {
    section { padding: 48px 16px }
    .form-card { padding: 26px 18px }
    .steps { grid-template-columns: 1fr }
    .hero { padding: 44px 16px 60px }
    .header-inner { padding: 0 14px }
}