/* ============================================================
   Bangladesh website packages page — /web-application-development_bd.php
   Pixel values copied 1:1 from the Claude Design file
   "Website Packages BD - Redesign v4.dc.html" (project 23ca0f9b…) — edit the
   design first, then mirror the value here.
   The design runs with browser defaults (content-box, line-height: normal, no
   Bootstrap), so the first block neutralises the site's Bootstrap + theme-v2/v3
   rules inside .v4 before any design value is applied.
   ============================================================ */

/* ---------- isolation from the site CSS ---------- */
.navbar-main, .footer-section, body .btn-back-top { display: none !important; }
body { padding-top: 0 !important; background: #f5f6f9 !important; }
/* the site's Ask AI widget is not part of this design and covered the chooser — hidden on this page only */
body:has(.v4) .aiw, body:has(.v4) .aiw-panel { display: none !important; }
.v4, .v4 :where(*) { box-sizing: content-box; letter-spacing: normal; }
 .v4 :where(input, select, textarea, button) { box-sizing: border-box; }
.v4 { line-height: normal; font-size: 16px; }
 .v4 :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; line-height: normal; }
 .v4 :where(h1, h2, h3) { font-family: inherit; color: inherit; text-transform: none; font-weight: 700; }
 .v4 :where(b, strong) { font-weight: 700; }
 .v4 :where(small) { font-size: 80%; }
 .v4 :where(label) { display: inline; margin: 0; }
 .v4 :where(legend) { float: none; width: auto; margin: 0; line-height: normal; }
 .v4 :where(fieldset) { min-width: 0; }
 .v4 :where(img) { vertical-align: baseline; }
 .v4 :where(button) { line-height: normal; text-transform: none; }
 .v4 :where(table) { border-collapse: collapse; }

/* ---------- base (design <helmet> styles) ---------- */
.v4, .v4-toast { --ink: #0b0f1a; --ink-2: #2a3040; --muted: #5a6273; --dim: #a8b0c0; --line: #e4e7ee; --line-2: #dfe3ec; --soft: #f5f6f9; --soft-2: #f9fafc; --red: #e11d2e; --red-d: #b3111f; --red-l: #ff5a68; --ok: #16a34a; --wa: #25d366; }
.v4 { background: #f5f6f9; padding-bottom: 78px; font-family: 'Anek Bangla', 'Sora', system-ui, sans-serif; color: #0b0f1a; -webkit-font-smoothing: antialiased; }
.v4 a { color: #e11d2e; text-decoration: none; }
.v4 a:hover { color: #b3111f; }
.v4 input, .v4 button, .v4 select, .v4 textarea { font-family: inherit; }
.v4 details > summary { list-style: none; cursor: pointer; }
.v4 details > summary::-webkit-details-marker { display: none; }
.v4-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.1rem; }
.v4-narrow { max-width: 900px; }
.v4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v4-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v4-red { color: #e11d2e; } .v4-wa { color: #25d366; } .v4-green { color: #16a34a; }

@keyframes v4Ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 46, .4); } 50% { box-shadow: 0 0 0 9px rgba(225, 29, 46, 0); } }
@keyframes v4Bar { from { height: 8%; } }
@keyframes v4Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes v4Slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v4Shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(560%); } }
@keyframes v4Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes v4Rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.v4-rise { animation: v4Rise .6s cubic-bezier(.22, .8, .28, 1) both; }
.v4-shine { position: absolute; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); animation: v4Shine 5s ease-in-out infinite; pointer-events: none; }

/* shared buttons used outside the design's own blocks (thank-you view) */
.v4-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 10px; padding: .8rem 1rem; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .2s ease; text-align: center; }
.v4-btn-block { display: flex; }
.v4 .v4-btn-red { background: #e11d2e; color: #fff; }
.v4 .v4-btn-red:hover { background: #b3111f; color: #fff; }
.v4 .v4-btn-light { background: #fff; border: 1px solid #dfe3ec; color: #0b0f1a; }
.v4 .v4-btn-wa { background: #25d366; color: #fff; }
.v4 .v4-btn-wa:hover { color: #fff; }
.v4-fine { font-size: .78rem; color: #5a6273; margin: .1rem 0 0; line-height: 1.5; }

/* ---------- utility bar ---------- */
.v4-util { background: #0b0f1a; color: #a8b0c0; font-size: .82rem; }
.v4-util-in { padding: .4rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; }
.v4 .v4-util-mail { color: #a8b0c0; margin-left: auto; }
.v4 .v4-util-strong { color: #fff; font-weight: 600; }

/* ---------- header ---------- */
.v4-header { position: sticky; top: 0; z-index: 1040; background: #fff; border-bottom: 1px solid #e4e7ee; box-shadow: 0 2px 14px rgba(11, 15, 26, .05); }
.v4-header-in { padding: .55rem .8rem; display: flex; align-items: center; gap: .5rem; }
.v4 .v4-logo { flex: 0 0 96px; overflow: hidden; display: block; height: 32px; }
.v4-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.v4-nav { display: flex; align-items: center; gap: .1rem; margin-left: .3rem; flex: 1 1 auto; min-width: 40px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.v4-nav::-webkit-scrollbar { display: none; height: 0; }
.v4 .v4-nav a { font-size: .88rem; font-weight: 600; color: #2a3040; padding: .45rem .6rem; border-radius: 8px; white-space: nowrap; transition: all .2s ease; }
.v4 .v4-nav a:hover { background: #f5f6f9; color: #e11d2e; }
.v4-header-r { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.v4 .v4-ic-btn { display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; color: #0b0f1a; background: #eef0f5; border-radius: 9px; width: 36px; height: 36px; }
.v4 .v4-ic-btn i { color: #e11d2e; }
.v4 .v4-ic-btn.wa { color: #fff; background: #25d366; }
.v4 .v4-ic-btn.wa i { color: #fff; }
.v4 .v4-head-cta { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .85rem; font-weight: 700; color: #fff; background: #e11d2e; border-radius: 9px; padding: .55rem .9rem; }
.v4 .v4-head-cta:hover { color: #fff; }

/* ---------- offer strip ---------- */
.v4-offer { background: linear-gradient(90deg, #e11d2e, #b3111f); color: #fff; position: relative; overflow: hidden; }
.v4-offer-in { position: relative; padding: .5rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; font-size: .87rem; font-weight: 600; }
.v4-offer-main { display: inline-flex; align-items: center; gap: .4rem; }
.v4-offer-main b { font-weight: 800; }
.v4-live { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: v4Pulse 1.8s infinite; }
.v4-offer-dim { opacity: .9; }
.v4 .v4-offer a { margin-left: auto; color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ---------- 1 · hero + package chooser ---------- */
.v4-hero { background: #0b0f1a; color: #fff; position: relative; overflow: hidden; }
.v4-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 46px 46px; }
.v4-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(225, 29, 46, .26), transparent 68%); top: -230px; right: -130px; }
.v4-glow.left { width: 520px; height: 520px; background: radial-gradient(circle, rgba(225, 29, 46, .24), transparent 68%); top: -210px; right: auto; left: -130px; }
.v4-hero-in { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 2.2rem 1.1rem 2.4rem; }
.v4-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.8rem; align-items: start; }
.v4-eyebrow { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 50px; padding: .28rem .8rem; font-size: .82rem; font-weight: 600; color: #ffd7db; margin-bottom: .8rem; }
.v4 .v4-h1 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); font-weight: 800; line-height: 1.16; letter-spacing: -.01em; margin: 0 0 .7rem; color: #fff; text-wrap: pretty; }
.v4-h1 span { color: #ff5a68; }
.v4 .v4-lead { color: #c1c8d8; font-size: 1.02rem; line-height: 1.65; max-width: 560px; margin: 0 0 1.2rem; }
.v4-chooser-t { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8d97a8; margin-bottom: .5rem; }
.v4-chooser { display: grid; gap: .4rem; }
.v4 .v4-choice { display: flex; align-items: center; gap: .65rem; cursor: pointer; border-radius: 12px; padding: .7rem .85rem; transition: all .22s ease; color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); font-size: 13.33px; box-sizing: content-box; }
.v4 .v4-choice.on { background: rgba(225, 29, 46, .16); border: 1.5px solid #e11d2e; }
.v4-dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; transition: all .22s ease; background: transparent; border: 2px solid rgba(255, 255, 255, .3); color: transparent; }
.v4-choice.on .v4-dot { background: #e11d2e; border: 2px solid #e11d2e; color: #fff; }
.v4-choice-b { flex: 1; min-width: 0; text-align: left; }
.v4 .v4-choice-b strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.v4-choice-b em { display: inline-block; font-style: normal; font-size: .68rem; font-weight: 700; color: #ffd7db; background: rgba(225, 29, 46, .3); border-radius: 5px; padding: .05rem .4rem; margin-left: .35rem; vertical-align: middle; }
.v4 .v4-choice-b small { color: #a8b0c0; font-size: .82rem; line-height: 1.4; display: block; }
.v4 .v4-choice > b { font-size: 1.05rem; white-space: nowrap; }
.v4 .v4-choice-custom { display: flex; align-items: center; gap: .6rem; background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .2); border-radius: 12px; padding: .7rem .85rem; color: #e9ecf4; }
.v4 .v4-choice-custom:hover { color: #e9ecf4; }
.v4-choice-custom .v4-dot { width: 22px; height: 22px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .1); color: inherit; font-size: .7rem; }
.v4-choice-custom > span:nth-child(2) { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600; }
.v4 .v4-choice-custom small { font-size: .84rem; color: #a8b0c0; white-space: nowrap; }

.v4-selcard { background: #fff; color: #0b0f1a; border-radius: 16px; overflow: hidden; box-shadow: 0 28px 64px rgba(0, 0, 0, .4); animation: v4Slide .4s ease both; }
.v4-selcard.flash { animation: v4Slide .4s ease both; }
.v4-sel-head { padding: .85rem 1.05rem; border-bottom: 1px solid #e4e7ee; display: flex; align-items: center; gap: .6rem; }
.v4-sel-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: #fdeaec; color: #e11d2e; display: grid; place-items: center; font-size: 1.05rem; }
.v4-sel-name { flex: 1; min-width: 0; }
.v4 .v4-sel-name strong { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.v4 .v4-sel-name small { color: #5a6273; font-size: .82rem; }
.v4 .v4-sel-price { font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.v4-sel-cost { padding: .9rem 1.05rem; background: #f9fafc; border-bottom: 1px solid #e4e7ee; }
.v4-mini-t { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5a6273; margin-bottom: .5rem; }
.v4-fy { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.v4 .v4-fy strong { font-size: 1.95rem; font-weight: 800; line-height: 1; }
.v4-fy span { font-size: .84rem; color: #5a6273; padding-bottom: .2rem; }
.v4-sel-rows { display: grid; gap: .25rem; margin-top: .5rem; }
.v4-sel-rows > div { display: flex; gap: .5rem; font-size: .86rem; }
.v4-sel-rows > div[hidden] { display: none; }
.v4-sel-rows span { flex: 1; color: #5a6273; }
.v4 .v4-own { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed #dfe3ec; cursor: pointer; }
.v4-own input { width: 17px; height: 17px; accent-color: #e11d2e; flex-shrink: 0; margin: 0; }
.v4-own span { font-size: .86rem; color: #2a3040; font-weight: 600; }
.v4 .v4-sel-note { font-size: .78rem; color: #5a6273; margin: .5rem 0 0; line-height: 1.5; }
.v4-sel-facts { padding: .85rem 1.05rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; border-bottom: 1px solid #e4e7ee; }
.v4-sel-facts > div > span { display: block; font-size: .76rem; color: #5a6273; font-weight: 600; }
.v4-sel-facts b { font-size: .9rem; }
.v4-sel-facts .v4-support { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: .3rem .45rem; margin: -.3rem -.15rem; position: relative; overflow: hidden; }
.v4-support .v4-shine { width: 48px; background: linear-gradient(90deg, transparent, rgba(22, 163, 74, .16), transparent); animation-duration: 3.2s; }
.v4-sel-facts .v4-support > span:not(.v4-shine) { position: relative; display: block; font-size: .76rem; color: #15803d; font-weight: 700; }
.v4-sel-facts .v4-support b { position: relative; font-size: .9rem; color: #15803d; }
.v4-sel-actions { padding: .9rem 1.05rem; display: grid; gap: .45rem; }
.v4-callback { display: grid; gap: .45rem; }
.v4-cb-row { display: flex; gap: .4rem; align-items: stretch; }
.v4 .v4-cb-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; border: 1px solid #dfe3ec; border-radius: 10px; padding: 0 .7rem; background: #f9fafc; transition: border-color .2s ease; }
.v4 .v4-cb-field:hover, .v4 .v4-cb-field:focus-within { border-color: #e11d2e; }
.v4 .v4-cb-field.bad { border-color: #e11d2e; }
.v4-cb-field i { color: #e11d2e; font-size: .9rem; }
.v4 .v4-cb-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: .72rem 0; font-size: .92rem; color: #0b0f1a; box-shadow: none; }
.v4 .v4-cb-btn { flex-shrink: 0; border: 0; border-radius: 10px; padding: .72rem .9rem; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: all .2s ease; background: #0b0f1a; color: #fff; }
.v4 .v4-cb-btn:disabled { cursor: wait; }
.v4 .v4-cb-btn.sent { background: #16a34a; color: #fff; cursor: default; }
.v4 .v4-cb-note { font-size: .78rem; margin: 0; line-height: 1.5; color: #5a6273; }
.v4 .v4-cb-note.ok { color: #15803d; font-weight: 600; }
.v4 .v4-cb-note.bad { color: #e11d2e; font-weight: 600; }
.v4 .v4-talk { display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 10px; padding: .85rem 1rem; font-weight: 700; font-size: .98rem; background: #e11d2e; color: #fff; transition: background .2s ease; }
.v4 .v4-talk:hover { background: #b3111f; color: #fff; }
.v4 .v4-sel-wa { display: flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 10px; padding: .72rem 1rem; font-weight: 700; font-size: .92rem; background: #fff; border: 1px solid #dfe3ec; color: #0b0f1a; transition: border-color .2s ease; }
.v4 .v4-sel-wa:hover { border-color: #25d366; color: #0b0f1a; }
.v4-sel-wa i { color: #25d366; }
.v4 .v4-hero-foot { font-size: .78rem; color: #8d97a8; margin: .6rem 0 0; line-height: 1.5; }

/* ---------- sections ---------- */
.v4-sec { background: #f5f6f9; padding: 1.7rem 0; scroll-margin-top: 62px; }
.v4-sec.v4-white { background: #fff; }
.v4-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .12em !important; text-transform: uppercase; color: #e11d2e; }
.v4-kicker.light { color: #ff5a68; }
.v4 .v4-h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 800; margin: .2rem 0 .15rem; }
.v4 .v4-h2.mb { margin: .2rem 0 .75rem; }
.v4 .v4-sub { color: #5a6273; margin: 0 0 .8rem; font-size: .9rem; }
.v4 .v4-sub.sm { margin: 0 0 .75rem; }
.v4-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.v4 .v4-sec-head .v4-sub { margin: 0; font-size: .94rem; }
.v4 .v4-note { font-size: .78rem; color: #5a6273; margin: .5rem 0 0; line-height: 1.45; }
.v4 .v4-note.mt { margin-top: .55rem; }

/* ---------- 2 · solutions ---------- */
.v4-solutions { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: .7rem; }
.v4-sol { background: #fff; border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; transition: all .28s ease; border: 1px solid #e4e7ee; }
.v4-sol:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 15, 26, .12); }
.v4-sol.on { border: 1.5px solid #e11d2e; box-shadow: 0 0 0 3px rgba(225, 29, 46, .08); }
.v4-sol-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.v4-sol-top i { font-size: 1.25rem; color: #e11d2e; }
.v4 .v4-sol h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.v4 .v4-sol-p { font-size: .86rem; color: #5a6273; margin: 0 0 .5rem; line-height: 1.55; }
.v4-sol-p b { color: #0b0f1a; }
.v4 .v4-sol-s { font-size: .86rem; color: #2a3040; margin: 0 0 .8rem; line-height: 1.55; }
.v4 .v4-sol-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .4rem; border: 1px solid #dfe3ec; background: #f9fafc; color: #0b0f1a; border-radius: 9px; padding: .6rem .8rem; font-weight: 700; font-size: .86rem; cursor: pointer; transition: all .2s ease; box-sizing: border-box; }
.v4 .v4-sol-btn:hover { border-color: #e11d2e; background: #fff; color: #e11d2e; }

/* ---------- 3 · order flow ---------- */
.v4-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.v4-fcard { background: #fff; border: 1px solid #e4e7ee; border-radius: 14px; overflow: hidden; transition: all .28s ease; }
.v4-fcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 15, 26, .12); }
.v4-fcard.grow { border: 1.5px solid #e11d2e; }
.v4-fcard.grow:hover { box-shadow: 0 18px 40px rgba(225, 29, 46, .16); }
.v4-fmock { min-height: 150px; background: #f9fafc; border-bottom: 1px solid #e4e7ee; padding: .8rem; }
.v4-fm-pd { display: flex; gap: .6rem; flex-wrap: wrap; }
.v4-fm-img { flex: 0 1 62px; min-width: 52px; min-height: 86px; border-radius: 9px; background: linear-gradient(160deg, #fde2e4, #f9a8b4); display: grid; place-items: center; font-size: 1.5rem; color: #9f1239; }
.v4-fm-b { flex: 1 1 110px; min-width: 105px; display: flex; flex-direction: column; gap: .3rem; }
.v4-fm-b > b { font-size: .86rem; }
.v4-fm-price { font-size: 1rem; font-weight: 800; color: #e11d2e; }
.v4-fm-sizes { display: flex; gap: .25rem; }
.v4-fm-sizes i { font-style: normal; font-size: .72rem; font-weight: 700; border: 1px solid #dfe3ec; border-radius: 5px; padding: .1rem .35rem; color: #5a6273; }
.v4-fm-sizes i.on { border: 1px solid #0b0f1a; background: #0b0f1a; color: #fff; }
.v4-fm-btn { margin-top: auto; font-size: .75rem; font-weight: 700; background: #e11d2e; color: #fff; border-radius: 6px; padding: .3rem .5rem; text-align: center; }
.v4-fm-btn.dark { margin-top: 0; background: #0b0f1a; }
.v4-fm-stack { display: grid; gap: .35rem; align-content: start; }
.v4-fm-stack.admin { gap: .4rem; }
.v4-bar { height: 7px; background: #e4e7ee; border-radius: 99px; }
.v4-fm-radio { display: flex; align-items: center; gap: .4rem; border: 1px solid #dfe3ec; border-radius: 7px; padding: .3rem .45rem; font-size: .78rem; color: #5a6273; }
.v4-fm-radio > span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c7cbd6; }
.v4-fm-radio.on { border: 1px solid #16a34a; background: #f0fdf4; font-weight: 700; margin-top: .2rem; color: #0b0f1a; }
.v4-fm-radio.on > span { border: 4px solid #16a34a; }
.v4-fm-radio small { margin-left: auto; font-size: .68rem; font-weight: 700; color: #e11d2e; }
.v4-fm-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #dfe3ec; padding-top: .35rem; margin-top: .15rem; }
.v4-fm-total span { font-size: .78rem; color: #5a6273; }
.v4-fm-total b { font-size: 1rem; }
.v4-fm-h { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; }
.v4-fm-h i { color: #e11d2e; }
.v4-fm-row { display: flex; align-items: center; gap: .4rem; }
.v4-fm-row .v4-bar { flex: 1; }
.v4-fm-row em { font-style: normal; font-size: .7rem; font-weight: 700; border-radius: 5px; padding: .1rem .4rem; }
.v4-fm-row em.new { color: #166534; background: #dcfce7; }
.v4-fm-row em.pack { color: #92400e; background: #fef3c7; }
.v4-fm-row em.sent { color: #1e40af; background: #dbeafe; }
.v4-fm-report { display: flex; flex-direction: column; gap: .4rem; }
.v4-fm-bars { flex: 1; min-height: 56px; display: flex; align-items: flex-end; gap: .25rem; }
.v4-fm-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #c7cbd6; animation: v4Bar .9s ease both; }
.v4-fm-bars i.hi { background: #e11d2e; }
.v4-fm-warn { font-size: .74rem; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 6px; padding: .22rem .45rem; }
.v4-fcard-b { padding: .85rem .9rem; }
.v4-fcard-t { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
.v4-fcard-t > span { width: 22px; height: 22px; border-radius: 6px; background: #e11d2e; color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.v4-fcard-t > span.ring { animation: v4Ring 2.4s infinite; }
.v4-fcard-t strong { font-size: .95rem; font-weight: 700; }
.v4 .v4-fcard-b p { font-size: .84rem; color: #5a6273; margin: 0 0 .5rem; line-height: 1.5; }
.v4-ftag { font-size: .74rem; font-weight: 700; color: #5a6273; background: #eef0f5; border-radius: 5px; padding: .15rem .45rem; }
.v4-ftag.grow { color: #e11d2e; background: #fdeaec; }
.v4-starter-note { margin-top: .7rem; background: #fff; border: 1px solid #e4e7ee; border-radius: 12px; padding: .85rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.v4-starter-note > i { font-size: 1.3rem; color: #e11d2e; }
.v4 .v4-starter-note p { flex: 1; min-width: 220px; margin: 0; font-size: .88rem; color: #2a3040; line-height: 1.55; }
.v4 .v4-outline-btn { border: 1px solid #0b0f1a; background: #fff; color: #0b0f1a; border-radius: 9px; padding: .6rem 1rem; font-weight: 700; font-size: .86rem; cursor: pointer; white-space: nowrap; transition: all .2s ease; }
.v4 .v4-outline-btn:hover { background: #0b0f1a; color: #fff; }
.v4 .v4-outline-btn.light { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #dfe3ec; }
.v4 .v4-outline-btn.light:hover { background: #fff; color: #0b0f1a; }

/* ---------- 4 · packages ---------- */
.v4-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: .8rem; }
.v4-plan { background: #fff; border-radius: 15px; display: flex; flex-direction: column; overflow: hidden; transition: all .3s ease; scroll-margin-top: 62px; border: 1px solid #e4e7ee; }
.v4-plan:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(11, 15, 26, .14); }
.v4-plan.rec { border: 2px solid #e11d2e; box-shadow: 0 18px 44px rgba(225, 29, 46, .13); }
.v4-ribbon { font-size: .72rem; font-weight: 700; letter-spacing: .05em !important; text-align: center; padding: .32rem; line-height: 1.2; background: transparent; color: transparent; }
.v4-plan.rec .v4-ribbon { background: #e11d2e; color: #fff; }
.v4-plan-top { padding: 1rem 1.05rem .8rem; }
.v4-plan-h { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.v4-plan-h > span { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #fdeaec; color: #e11d2e; display: grid; place-items: center; font-size: 1.1rem; }
.v4-plan-h > div { min-width: 0; }
.v4 .v4-plan-h h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.v4 .v4-plan-h small { color: #5a6273; font-size: .82rem; line-height: 1.4; }
.v4-plan-price { display: flex; align-items: baseline; gap: .4rem; }
.v4 .v4-plan-price strong { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em !important; }
.v4-plan-price span { font-size: .8rem; color: #5a6273; font-weight: 600; }
.v4-support-badge { position: relative; overflow: hidden; display: flex; align-items: center; gap: .4rem; margin-top: .6rem; background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: .35rem .55rem; }
.v4-support-badge .v4-shine { width: 60px; background: linear-gradient(90deg, transparent, rgba(22, 163, 74, .18), transparent); animation-duration: 3.6s; }
.v4-support-badge i { position: relative; color: #15803d; font-size: 1rem; }
.v4-support-badge span:not(.v4-shine) { position: relative; font-size: .83rem; font-weight: 700; color: #15803d; }
.v4 .v4-plan-items { list-style: none; padding: 0 1.05rem .8rem; margin: 0; display: grid; gap: .34rem; border-bottom: 1px solid #eef0f5; }
.v4-plan-items li { font-size: .88rem; color: #2a3040; display: flex; gap: .45rem; line-height: 1.5; }
.v4-plan-items i { color: #16a34a; flex-shrink: 0; }
.v4 .v4-plan-integr { font-size: .82rem; color: #2a3040; margin: 0; padding: .7rem 1.05rem; background: #f9fafc; border-bottom: 1px solid #eef0f5; line-height: 1.55; }
.v4 .v4-plan-terms { margin: 0; padding: .8rem 1.05rem; display: grid; gap: .6rem; flex: 1; }
.v4-plan-terms dt { font-size: .78rem; font-weight: 700; color: #5a6273; display: flex; align-items: center; gap: .35rem; margin-bottom: .15rem; }
.v4-plan-terms dt i { color: #5a6273; }
.v4 .v4-plan-terms dd { margin: 0; font-size: .85rem; color: #2a3040; line-height: 1.5; }
.v4 .v4-plan-terms dd small { display: block; font-size: .78rem; color: #5a6273; line-height: 1.5; margin-top: .15rem; }
.v4-plan-terms .extra { background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 9px; padding: .55rem .65rem; }
.v4-plan-terms .extra dt i { color: #b45309; }
.v4-plan-foot { padding: 0 1.05rem 1.05rem; display: grid; gap: .4rem; }
.v4 .v4-plan-cta { display: flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: 10px; padding: .8rem 1rem; font-weight: 700; font-size: .93rem; cursor: pointer; transition: all .22s ease; background: #0b0f1a; color: #fff; }
.v4 .v4-plan-cta.red { background: #e11d2e; }
.v4 .v4-plan-cta:hover { transform: translateY(-2px); color: #fff; }
.v4 .v4-plan-wa { text-align: center; font-size: .83rem; font-weight: 700; color: #5a6273; }
.v4-plan-wa i { color: #25d366; }
.v4-custom { margin-top: .8rem; background: #0b0f1a; color: #fff; border-radius: 16px; padding: 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; scroll-margin-top: 62px; }
.v4 .v4-custom h3 { font-size: 1.3rem; font-weight: 800; margin: .3rem 0 .5rem; color: #fff; }
.v4 .v4-custom p { color: #c1c8d8; font-size: .92rem; line-height: 1.65; margin: 0 0 1rem; }
.v4 .v4-custom-cta { display: inline-flex; align-items: center; gap: .5rem; background: #e11d2e; color: #fff; border-radius: 10px; padding: .8rem 1.4rem; font-weight: 700; font-size: .95rem; }
.v4 .v4-custom-cta:hover { color: #fff; }
.v4 .v4-custom ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.v4-custom li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; padding: .8rem .9rem; }
.v4-custom li b { display: block; font-size: .94rem; color: #fff; margin-bottom: .15rem; }
.v4-custom li span { font-size: .85rem; color: #a8b0c0; line-height: 1.5; }

/* ---------- 5 · compare ---------- */
.v4-table-wrap { overflow-x: auto; border: 1px solid #e4e7ee; border-radius: 12px; background: #fff; }
.v4 .v4-table { width: 100%; min-width: 720px; font-size: .87rem; border-collapse: collapse; margin: 0; }
.v4-table col.k { width: 33.33%; }
.v4-table thead tr { background: #0b0f1a; color: #fff; }
.v4 .v4-table thead th { padding: .7rem .85rem; font-weight: 700; text-align: center; vertical-align: middle; border: 0; }
.v4 .v4-table thead th:first-child { text-align: left; }
.v4 .v4-table thead th.on { background: #e11d2e; color: #fff; }
.v4-table thead th span { display: block; font-size: .74rem; color: #ffd7db; font-weight: 600; }
.v4-table tbody tr { background: #fff; }
.v4-table tbody tr.alt { background: #fcfcfd; }
.v4-table tbody tr.price { background: #f9fafc; font-weight: 700; }
.v4 .v4-table tbody th { padding: .58rem .85rem; font-weight: 600; text-align: left; border-top: 1px solid #eef0f5; color: #2a3040; vertical-align: middle; }
.v4 .v4-table tbody td { padding: .58rem .85rem; text-align: center; border-top: 1px solid #eef0f5; border-left: 1px solid #f3f5f9; color: #2a3040; vertical-align: middle; }
.v4 .v4-table tbody td.on { background: rgba(225, 29, 46, .05); }
.v4-c-yes { color: #16a34a; font-weight: 800; font-size: 1.05rem; }
.v4-c-no { color: #b6bcc9; }
.v4-c-extra { font-size: .78rem; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 5px; padding: .1rem .4rem; display: inline-block; }

/* ---------- 6 · process ---------- */
.v4-progress { position: relative; margin-bottom: .8rem; height: 3px; background: #eef0f5; border-radius: 99px; }
.v4-progress span { display: block; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #e11d2e, #ff7a45); transition: width .5s ease; }
.v4 .v4-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .6rem; }
.v4-step { background: #fff; border-radius: 13px; padding: .95rem; transition: all .35s ease; border: 1px solid #e4e7ee; }
.v4-step.on { border: 1.5px solid #e11d2e; box-shadow: 0 14px 32px rgba(225, 29, 46, .13); animation: v4Float 2.8s ease-in-out infinite; }
.v4-step-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.v4-step-n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .82rem; transition: all .35s ease; background: #eef0f5; color: #5a6273; }
.v4-step.on .v4-step-n { background: #e11d2e; color: #fff; animation: v4Ring 2.2s infinite; }
.v4-step-top i { font-size: 1.05rem; transition: color .35s ease; color: #b6bcc9; }
.v4-step.on .v4-step-top i { color: #e11d2e; }
.v4 .v4-step h3 { font-size: clamp(.9rem, 2.1vw, .96rem); font-weight: 700; margin: 0 0 .25rem; text-wrap: pretty; }
.v4 .v4-step p { font-size: clamp(.8rem, 2vw, .85rem); color: #5a6273; margin: 0 0 .6rem; line-height: 1.5; text-wrap: pretty; }
.v4-step-tag { display: inline-block; font-size: .75rem; font-weight: 700; border-radius: 6px; padding: .18rem .45rem; color: #5a6273; background: #f5f6f9; }
.v4-step.on .v4-step-tag { color: #e11d2e; background: #fdeaec; }

/* ---------- 7 · terms ---------- */
.v4-tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .5rem; }
.v4-fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: .5rem; margin-top: .5rem; align-items: start; }
.v4-tcard { background: #fff; border: 1px solid #e4e7ee; border-radius: 11px; padding: .8rem .85rem; }
.v4 .v4-tcard h3 { font-size: .92rem; font-weight: 700; margin: 0 0 .45rem; display: flex; align-items: center; gap: .35rem; }
.v4-tcard h3 i { color: #e11d2e; }
.v4 .v4-tcard ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.v4 .v4-tcard ul.mb { margin: 0 0 .55rem; }
.v4-tcard li { font-size: .82rem; color: #2a3040; line-height: 1.45; display: flex; gap: .3rem; }
.v4-tcard li > i { color: #e11d2e; flex-shrink: 0; }
.v4 .v4-okbox { font-size: .79rem; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 7px; padding: .42rem .55rem; margin: 0; line-height: 1.45; }
.v4 .v4-tcard ul.v4-feelist { gap: .38rem; }
.v4 .v4-feelist li { gap: .5rem; font-size: 16px; line-height: normal; }
.v4-feelist li > i { font-size: .95rem; color: #5a6273; flex-shrink: 0; margin-top: .15rem; }
.v4-feelist b { display: block; font-size: .85rem; }
.v4-feelist span { font-size: .8rem; color: #5a6273; line-height: 1.45; }

/* ---------- 8 · faq ---------- */
.v4-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: .4rem; align-items: start; }
.v4-faq details { background: #f9fafc; border: 1px solid #e4e7ee; border-radius: 10px; padding: 0 .85rem; margin: 0; }
.v4 .v4-faq summary { padding: .65rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: .8rem; font-size: .89rem; line-height: 1.4; }
.v4-faq summary i { color: #e11d2e; flex-shrink: 0; font-size: .8rem; }
.v4-faq details > div { padding: 0 0 .7rem; color: #2a3040; line-height: 1.6; font-size: .84rem; }

/* ---------- 9 · inquiry ---------- */
.v4-inquiry { background: #0b0f1a; color: #fff; padding: 1.9rem 0; position: relative; overflow: hidden; scroll-margin-top: 62px; }
.v4-inq-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.6rem; align-items: start; }
.v4 .v4-inquiry h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 800; margin: 0 0 .4rem; color: #fff; }
.v4 .v4-inq-p { color: #c1c8d8; margin: 0 0 .7rem; line-height: 1.55; font-size: .93rem; }
.v4-after { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; padding: .8rem .85rem; }
.v4 .v4-after h3 { font-size: .9rem; font-weight: 700; margin: 0 0 .45rem; color: #fff; }
.v4 .v4-after ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .32rem; }
.v4-after li { display: flex; gap: .55rem; font-size: .87rem; color: #c1c8d8; line-height: 1.55; }
.v4-after li > span:first-child { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: #e11d2e; color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.v4-after b { color: #fff; }
.v4 .v4-hours { font-size: .82rem; color: #a8b0c0; margin: .7rem 0 0; }
.v4-inq-contact { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.v4 .v4-inq-wa { display: inline-flex; align-items: center; gap: .45rem; background: #25d366; color: #fff; border-radius: 10px; padding: .8rem 1.3rem; font-weight: 700; font-size: .93rem; }
.v4 .v4-inq-tel { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; border-radius: 10px; padding: .8rem 1.3rem; font-weight: 700; font-size: .93rem; }
.v4 .v4-inq-wa:hover, .v4 .v4-inq-tel:hover { color: #fff; }
.v4-form { background: #fff; color: #0b0f1a; border-radius: 13px; padding: .9rem; }
.v4-form-err { background: #fdeaec; border: 1px solid #f8b4bb; color: #b3111f; border-radius: 10px; padding: .6rem .75rem; font-size: .85rem; font-weight: 600; margin-bottom: .7rem; }
.v4-picked { display: flex; align-items: center; gap: .5rem; background: #f9fafc; border: 1px solid #e4e7ee; border-radius: 10px; padding: .6rem .75rem; margin-bottom: .7rem; }
.v4-picked i { color: #16a34a; }
.v4-picked > span { flex: 1; min-width: 0; font-size: .85rem; color: #2a3040; }
.v4-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .45rem; }
.v4 .v4-fgrid > .v4-field:first-child { gap: .22rem; }
.v4 .v4-fgrid > .v4-field:first-child > span { font-size: .8rem; }
.v4 .v4-field { display: grid; gap: .25rem; }
.v4-field.full { grid-column: 1 / -1; }
.v4-field > span, .v4 .v4-field legend { font-size: .82rem; font-weight: 700; color: #2a3040; padding: 0; }
.v4-field em { color: #e11d2e; font-style: normal; }
.v4-field small { color: #5a6273; font-weight: 600; font-size: 80%; }
.v4 .v4-field input, .v4 .v4-field select, .v4 .v4-field textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfe3ec; border-radius: 9px; padding: .62rem .75rem; font-size: .9rem; outline: none; background: #fff; color: #2a3040; transition: border-color .2s ease; box-shadow: none; height: auto; }
.v4 .v4-field input::placeholder, .v4 .v4-field textarea::placeholder { color: #757575; }
.v4 .v4-field textarea { resize: vertical; }
.v4 .v4-field input:focus, .v4 .v4-field textarea:focus, .v4 .v4-field select:focus { border-color: #e11d2e; }
.v4 fieldset.v4-field { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.v4 .v4-field .is-bad, .v4-radios.is-bad .v4-chip span { border-color: #e11d2e !important; }
.v4-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.v4 .v4-chip { position: relative; margin: 0; cursor: pointer; display: inline-block; }
.v4-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v4-chip span { display: inline-block; border-radius: 50px; padding: .42rem .8rem; font-size: .84rem; font-weight: 600; transition: all .2s ease; background: #fff; color: #2a3040; border: 1px solid #dfe3ec; }
.v4-chip input:checked + span { background: #0b0f1a; color: #fff; border: 1.5px solid #0b0f1a; }
.v4-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(225, 29, 46, .35); }
.v4 .v4-submit { width: 100%; margin-top: .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 10px; padding: .8rem 1rem; font-weight: 700; font-size: .96rem; cursor: pointer; background: #e11d2e; color: #fff; transition: background .2s ease; }
.v4 .v4-submit:hover { background: #b3111f; }
.v4 .v4-submit:disabled { cursor: wait; opacity: .8; }
.v4 .v4-form-fine { font-size: .79rem; color: #5a6273; margin: .6rem 0 0; line-height: 1.5; }

/* ---------- 10 · price list (tabbed panel) ---------- */
.v4-plpanel { background: #fff; border: 1px solid #e4e7ee; border-radius: 14px; overflow: hidden; }
.v4-pltabs { display: flex; flex-wrap: wrap; gap: .35rem; padding: .8rem .9rem; border-bottom: 1px solid #e4e7ee; background: #fafbfc; }
.v4 .v4-pltab { display: inline-flex; align-items: center; gap: .35rem; border-radius: 8px; padding: .48rem .8rem; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; transition: all .2s ease; background: #fff; color: #2a3040; border: 1px solid #dfe3ec; }
.v4 .v4-pltab.on { background: #0b0f1a; color: #fff; border: 1px solid #0b0f1a; }
.v4-pltab em { font-style: normal; font-size: .72rem; font-weight: 700; border-radius: 5px; padding: .02rem .34rem; background: #eef0f5; color: #5a6273; }
.v4-pltab.on em { background: rgba(255, 255, 255, .18); color: #fff; }
.v4-plbody { padding: .5rem .9rem 1rem; }
.v4-plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0 1.6rem; }
.v4-plgrid[hidden] { display: none; }
.v4-plitem { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed #eef0f5; }
.v4-plitem > i { color: #e11d2e; font-size: .8rem; flex-shrink: 0; }
.v4-plitem span { flex: 1; min-width: 0; font-size: .87rem; color: #2a3040; line-height: 1.45; }
.v4-plitem b { white-space: nowrap; font-size: .88rem; }
.v4-plfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .85rem .9rem; background: #fafbfc; border-top: 1px solid #e4e7ee; }
.v4-plfoot > span { flex: 1; min-width: 210px; font-size: .87rem; color: #2a3040; font-weight: 600; }
.v4 .v4-plfoot-cta { display: inline-flex; align-items: center; gap: .4rem; background: #e11d2e; color: #fff; border-radius: 9px; padding: .6rem 1.1rem; font-weight: 700; font-size: .87rem; white-space: nowrap; }
.v4 .v4-plfoot-cta:hover { color: #fff; }
.v4 .v4-plfoot-wa { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #dfe3ec; color: #0b0f1a; border-radius: 9px; padding: .6rem 1.1rem; font-weight: 700; font-size: .87rem; white-space: nowrap; }
.v4 .v4-plfoot-wa:hover { color: #0b0f1a; }
.v4-plfoot-wa i { color: #25d366; }

/* ---------- footer ---------- */
.v4-footer { background: #070a12; color: #a8b0c0; padding: 2rem 0 .9rem; }
.v4-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.3rem; }
.v4 .v4-foot-logo { height: 28px; width: auto; display: block; margin-bottom: .6rem; }
.v4 .v4-footer p { font-size: .86rem; line-height: 1.6; margin: 0 0 .6rem; }
.v4-social { display: flex; gap: .4rem; }
.v4 .v4-social a { width: 31px; height: 31px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; }
.v4-foot-h { display: block; font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: .55rem; }
.v4 .v4-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.v4 .v4-footer ul a { color: #a8b0c0; font-size: .85rem; transition: color .2s ease; }
.v4 .v4-footer ul a:hover { color: #fff; }
.v4 .v4-footer ul.v4-foot-contact { gap: .35rem; font-size: .85rem; }
.v4-foot-contact i { color: #ff5a68; }
.v4-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 1.3rem; padding-top: .75rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; }
.v4 .v4-foot-bottom a { color: #a8b0c0; }
.v4-foot-other { margin-left: auto; }
.v4 .v4-foot-other a { color: #fff; font-weight: 600; }

/* ---------- sticky bar ---------- */
.v4-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; display: flex; align-items: center; gap: .6rem; background: #0b0f1a; color: #fff; padding: .6rem 1rem; }
.v4-sticky-b { flex: 1; min-width: 0; }
.v4-sticky-b > span { display: block; font-size: .75rem; color: #8d97a8; font-weight: 600; }
.v4 .v4-sticky-b strong { display: block; font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4 .v4-sticky-wa { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; width: 38px; height: 38px; flex-shrink: 0; background: #25d366; color: #fff; font-size: 1rem; }
.v4 .v4-sticky-cta { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9px; padding: .65rem 1.05rem; font-weight: 700; background: #e11d2e; color: #fff; font-size: .9rem; white-space: nowrap; }
.v4 .v4-sticky-wa:hover, .v4 .v4-sticky-cta:hover { color: #fff; }

/* ---------- thank-you view (not in the design; same tokens) ---------- */
.v4-thanks .v4-thanks-in { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 2.6rem 1.1rem 3rem; }
.v4-thanks-card { background: #fff; color: #0b0f1a; border-radius: 16px; overflow: hidden; max-width: 960px; margin: 0 auto; box-shadow: 0 28px 64px rgba(0, 0, 0, .4); }
.v4-thanks-head { display: flex; gap: 1rem; align-items: center; padding: 1.3rem 1.4rem; border-bottom: 1px solid #e4e7ee; }
.v4 .v4-thanks-head h1 { font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 800; margin: 0 0 .25rem; }
.v4 .v4-thanks-head p { margin: 0; color: #5a6273; font-size: .92rem; }
.v4-check { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 1.6rem; }
.v4-thanks-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.v4-thanks-l, .v4-thanks-r { padding: 1.1rem 1.4rem; }
.v4-thanks-r { background: #f9fafc; display: flex; flex-direction: column; gap: .5rem; }
.v4 .v4-thanks-card h2 { font-size: .98rem; font-weight: 700; margin: 0 0 .45rem; }
.v4-line { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed #e4e7ee; font-size: .88rem; }
.v4-line span { color: #5a6273; flex: 0 0 auto; }
.v4-line b { text-align: right; }
.v4-line.total { border: 0; padding-top: .8rem; align-items: baseline; }
.v4-line.total b { font-size: 1.35rem; }
.v4 .v4-next { margin: 0 0 .4rem; padding-left: 1.2rem; display: grid; gap: .4rem; font-size: .87rem; line-height: 1.55; list-style-type: bengali; }

.v4-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: #0b0f1a; color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font-size: .9rem; font-weight: 600; z-index: 2000; opacity: 0; pointer-events: none; transition: all .35s ease; max-width: calc(100vw - 32px); text-align: center; font-family: 'Anek Bangla', sans-serif; }
.v4-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* phones: the design itself has no breakpoints — its auto-fit grids reflow on their own */
@media (prefers-reduced-motion: reduce) {
  .v4 *, .v4 *::before { animation: none !important; transition: none !important; }
}

.v4-util-in, .v4-offer-in { max-width: 1240px; margin: 0 auto; }
.v4-header-in { max-width: 1240px; margin: 0 auto; }