/* =====================================================================
   SmartSchool Uniform BD — FRONTEND VIBRANT (2026-10-13, P12-V1)
   ---------------------------------------------------------------------
   মালিকের চাওয়া: "frontend-এর রং আরো সুন্দর, প্রাণবন্ত ও চমৎকার; কিছু প্রাণবন্ত effect; কিন্তু রং দেখে কেউ যেন বিরক্ত না হয়।"

   নিয়ম (যাতে চোখে না লাগে):
     • মূল রং আগের মতোই লোগোর সবুজ (#2e8036) + লাল (#d63a33)। নতুন চারটা "খুশির" রং — রোদ-হলুদ, আকাশি, সবুজাভ-নীল
       (teal), প্রবাল (coral) — শুধু হালকা আভা (tint), আইকনের টালি, পাতলা দাগ আর ছোট ব্যাজে। লেখা সবসময় গাঢ় ও পড়ার মতো।
     • নড়াচড়া ধীর ও নরম (১৮–৩০ সেকেন্ড), কোনো ঝলক/দ্রুত blink নেই; ফোনে কম। "Reduce motion" চালু থাকলে সব animation বন্ধ।
     • markup বদলানো হয়নি — সব আগের class-এর উপরে (এই ফাইল frontend-pro.css-এর *পরে* লোড হয়)। JS-এর effect:
       frontend-vibrant.js (scroll-progress, উপরে-ফেরার বোতাম, hero-র ভাসমান স্কুল-ডুডল, কার্ডে আলো, সার্চে স্কুলের নাম,
       অর্ডার নিশ্চিত হলে confetti)।

   ভাগ: ১ token · ২ গ্লোবাল (selection, focus, বোতাম, scrollbar) · ৩ header + progress + উপরে-ফেরা · ৪ hero · ৫ stat ·
        ৬ ধাপ · ৭ স্কুল · ৮ feature/মতামত/FAQ · ৯ CTA + footer · ১০ wizard পাতা · ১১ অন্য পাতা · ১২ auth · ১৩ ফোন ·
        ১৪ reduced-motion/print
   ===================================================================== */

/* ---------- ১. রং-token ---------- */
:root {
    --sv-green: #2e8036;
    --sv-green-2: #3fa34a;
    --sv-leaf: #7cc576;
    --sv-deep: #1c5a24;
    --sv-red: #d63a33;
    --sv-coral: #ff7a66;
    --sv-sun: #f5b829;
    --sv-sky: #1e9fd0;
    --sv-teal: #13a28a;
    /* হালকা আভা — কার্ড/টালির পটভূমি */
    --sv-green-soft: #e8f6ea;
    --sv-sun-soft: #fff5d9;
    --sv-sky-soft: #e5f5fc;
    --sv-teal-soft: #e2f6f1;
    --sv-coral-soft: #ffece8;
    --sv-grad-brand: linear-gradient(135deg, #2e8036 0%, #3a9a45 55%, #13a28a 100%);
    --sv-grad-sun: linear-gradient(135deg, #f7c548 0%, #f59e3b 100%);
    --sv-grad-sky: linear-gradient(135deg, #39b6e3 0%, #1e86c8 100%);
    --sv-grad-coral: linear-gradient(135deg, #ff8a70 0%, #e8504a 100%);
    --sv-grad-teal: linear-gradient(135deg, #2cc19f 0%, #11907c 100%);
    --sv-grad-line: linear-gradient(90deg, #2e8036 0%, #13a28a 30%, #1e9fd0 52%, #f5b829 76%, #ff7a66 100%);
    --sv-glow-green: 0 14px 34px rgba(46, 128, 54, .22);
}

/* ---------- ২. গ্লোবাল ---------- */
body.sf-body ::selection { background: rgba(245, 184, 41, .32); color: inherit; }
/* কীবোর্ডে চলাফেরার রিং — শুধু লিংক/বোতামে (ইনপুটের নিজের সবুজ রিং আছে, দুটো রিং ভারী দেখায়) */
body.sf-body a:focus-visible, body.sf-body button:focus-visible, body.sf-body summary:focus-visible, body.sf-body [role="button"]:focus-visible { outline: 3px solid rgba(245, 184, 41, .9); outline-offset: 2px; }
body.sf-body { scrollbar-color: rgba(46, 128, 54, .45) transparent; }
body.sf-body ::-webkit-scrollbar { width: 11px; height: 11px; }
body.sf-body ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5bb362, #2e8036); border-radius: 999px; border: 3px solid #f5f9f5; }
body.sf-body ::-webkit-scrollbar-track { background: transparent; }

/* প্রধান বোতাম: সবুজ→teal আভা, hover-এ আলোর রেখা ঝিলিক দিয়ে যায় (একবার) */
body.sf-body .su-btn.primary,
body.sf-body .su-btn.dark { background: var(--sv-grad-brand); color: #fff; border-color: transparent; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 22px rgba(46, 128, 54, .22); }
body.sf-body .su-btn.primary::after,
body.sf-body .su-btn.dark::after,
body.sf-body .sf-hero__search button::after,
body.sf-body .sf-cta .su-btn.gold::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-130%) skewX(-18deg);
}
body.sf-body .su-btn.primary:hover::after,
body.sf-body .su-btn.dark:hover::after,
body.sf-body .sf-hero__search button:hover::after,
body.sf-body .sf-cta .su-btn.gold:hover::after { animation: svSheen .9s var(--sf-ease) both; }
body.sf-body .su-btn.primary:hover,
body.sf-body .su-btn.dark:hover { box-shadow: 0 14px 30px rgba(19, 162, 138, .28); filter: saturate(1.08); }
body.sf-body .su-btn.outline:hover { background: var(--sv-green-soft); }
body.sf-body .sf-hero__search button,
body.sf-body .sf-cta .su-btn.gold { position: relative; overflow: hidden; isolation: isolate; }

/* section-এর ছোট লেবেল (eyebrow): রঙিন বিন্দু */
body.sf-body .sf-section__head .sf-eyebrow { background: linear-gradient(135deg, #e8f6ea, #e2f6f1); color: #23702c; box-shadow: inset 0 0 0 1px rgba(46, 128, 54, .12); }
body.sf-body .sf-section__head .sf-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-sun); box-shadow: 0 0 0 3px rgba(245, 184, 41, .25); }
/* section-শিরোনামের নিচে ছোট রঙিন দাগ */
body.sf-body .sf-section__head h2::after { content: ""; display: block; width: 64px; height: 4px; margin: 14px auto 0; border-radius: 999px; background: var(--sv-grad-line); opacity: .85; }

/* ---------- ৩. header, পড়ার-অগ্রগতি দাগ, উপরে-ফেরার বোতাম ---------- */
body.sf-body .sf-header { border-bottom-color: transparent; }
body.sf-body .sf-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sv-grad-line); opacity: .55; pointer-events: none; }
body.sf-body .sf-nav__link { position: relative; }
body.sf-body .sf-nav__link:not(.active)::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--sv-grad-line); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sf-ease); }
body.sf-body .sf-nav__link:not(.active):hover::after { transform: scaleX(1); }
body.sf-body .sf-nav__link.active { background: var(--sv-grad-brand); }
/* FIX (2026-10-15, P21 F-15): কার্টের সংখ্যা — গাঢ় প্রবাল রং (সাদা লেখা ~৫:১; আগে হালকা প্রবালে ~২.৩:১) */
body.sf-body .sf-cart-badge { background: linear-gradient(135deg, #d13f30 0%, #b42f27 100%); }

/* পাতা কতটা পড়া হলো — header-এর নিচে পাতলা রঙিন দাগ (frontend-vibrant.js) */
.sv-progress { position: fixed; left: 0; top: 0; z-index: 120; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--sv-grad-line); pointer-events: none; box-shadow: 0 0 10px rgba(245, 184, 41, .45); }

/* উপরে ফিরে যাওয়ার বোতাম — চারপাশের বৃত্তে কতটা পড়া হলো */
.sv-totop {
    position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 85;
    width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: conic-gradient(var(--sv-sun) calc(var(--sv-read, 0) * 1%), rgba(255, 255, 255, .55) 0);
    box-shadow: 0 12px 28px rgba(28, 90, 36, .28);
    opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
    transition: opacity .3s, transform .3s var(--sf-ease);
}
.sv-totop::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sv-grad-brand); }
.sv-totop svg { position: relative; }
.sv-totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.sv-totop:hover { transform: translateY(-3px); }
body.sf-has-tabbar .sv-totop { bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { body.sf-has-tabbar .sv-totop { bottom: calc(22px + env(safe-area-inset-bottom)); } }
/* FIX (2026-10-15, P21 F-05): নিচের sticky action-bar (cart / checkout / মাপের পাতা; ফোনে, ≤991px) চালু থাকলে বোতামটা
   তার উপরে — আগে tab bar না থাকা পাতায় 22px-এ বসে "Confirm order"/মোটের উপর পড়ত। bar-এর উচ্চতা ~78px + safe-area। */
@media (max-width: 991.98px) { body.sf-actionbar-on .sv-totop { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* ---------- ৪. hero (হোম, স্কুলের তালিকা, স্কুলের জন্য) ---------- */
body.sf-body .sf-hero {
    background:
        radial-gradient(760px 420px at 8% -12%, rgba(124, 197, 118, .45), transparent 62%),
        radial-gradient(620px 420px at 102% 4%, rgba(19, 162, 138, .42), transparent 60%),
        radial-gradient(520px 320px at 62% 118%, rgba(245, 184, 41, .26), transparent 64%),
        linear-gradient(135deg, #1c5a24 0%, #2a7a33 42%, #2f8f45 70%, #1d8f74 100%);
}
/* নরম রঙিন আলো ধীরে ভাসে (aurora) */
body.sf-body .sf-blob { filter: blur(56px); animation-duration: 22s; }
body.sf-body .sf-blob--1 { background: #8fd47f; opacity: .42; }
body.sf-body .sf-blob--2 { background: #39c3d6; opacity: .34; }
body.sf-body .sf-blob--3 { background: #ffcf5a; opacity: .30; }

/* শিরোনামের দাগ: লোডে বাঁ থেকে আঁকা হয়, লাল→প্রবাল→হলুদ */
body.sf-body .sf-hero__title em::after {
    background: linear-gradient(90deg, rgba(214, 58, 51, .95), rgba(255, 122, 102, .95) 55%, rgba(245, 184, 41, .95));
    transform-origin: left; animation: svDraw 1.1s .35s var(--sf-ease) both;
}

/* সার্চ-বাক্স: ফোকাসে রঙিন আলোর বলয় */
body.sf-body .sf-hero__search { transition: box-shadow .3s, transform .3s var(--sf-ease); }
body.sf-body .sf-hero__search:focus-within { box-shadow: 0 24px 60px rgba(12, 40, 16, .38), 0 0 0 4px rgba(245, 184, 41, .55), 0 0 0 9px rgba(255, 255, 255, .16); transform: translateY(-1px); }
body.sf-body .sf-hero__search button { background: linear-gradient(135deg, #e8504a 0%, #d63a33 60%, #c22f29 100%); }
body.sf-body .sf-hero__chips a:nth-of-type(4n+1):hover { background: rgba(124, 197, 118, .32); }
body.sf-body .sf-hero__chips a:nth-of-type(4n+2):hover { background: rgba(57, 195, 214, .32); }
body.sf-body .sf-hero__chips a:nth-of-type(4n+3):hover { background: rgba(255, 207, 90, .32); }
body.sf-body .sf-hero__chips a:nth-of-type(4n+4):hover { background: rgba(255, 138, 112, .32); }
body.sf-body .sf-hero__trust .su-icon { color: #ffe08a; }

/* ইউনিফর্মের কার্ড দুটো: পেছনে রঙিন আভা */
body.sf-body .sf-art-card--boys { box-shadow: 0 40px 80px rgba(10, 40, 14, .42), 0 0 0 6px rgba(57, 195, 214, .16), inset 0 1px 0 #fff; }
body.sf-body .sf-art-card--girls { box-shadow: 0 40px 80px rgba(10, 40, 14, .42), 0 0 0 6px rgba(255, 138, 112, .18), inset 0 1px 0 #fff; }
body.sf-body .sf-art-card--boys { background: linear-gradient(160deg, #ffffff, #eaf7fb); }
body.sf-body .sf-art-card--girls { background: linear-gradient(160deg, #ffffff, #fff1ee); }
body.sf-body .sf-float-badge--ai .sf-float-badge__ico { background: var(--sv-green-soft); color: var(--sv-green); }
body.sf-body .sf-float-badge--delivery .sf-float-badge__ico { background: var(--sv-sky-soft); color: #137bb0; }
body.sf-body .sf-float-badge--fit .sf-float-badge__ico { background: var(--sv-sun-soft); color: #b7790b; }

/* ভাসমান স্কুল-ডুডল (বই, পেনসিল, তারা, স্কেল …) — frontend-vibrant.js বসায়; খুব হালকা, ধীরে ভাসে */
.sv-doodles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sv-doodle { position: absolute; width: var(--s, 34px); height: var(--s, 34px); color: #fff; opacity: var(--o, .16); animation: svDrift var(--d, 18s) ease-in-out var(--delay, 0s) infinite alternate; }
.sv-doodle svg { width: 100%; height: 100%; display: block; }
.sv-doodle.is-sun { color: #ffe08a; opacity: var(--o, .3); }
.sv-doodle.is-sky { color: #a5ecf5; }
.sv-doodle.is-coral { color: #ffc2b5; }
.sv-doodles--light .sv-doodle { color: var(--sv-green); opacity: var(--o, .10); }
.sv-doodles--light .sv-doodle.is-sun { color: #e6a514; opacity: .16; }
.sv-doodles--light .sv-doodle.is-sky { color: var(--sv-sky); }
.sv-doodles--light .sv-doodle.is-coral { color: var(--sv-coral); }

/* ---------- ৫. সংখ্যার কার্ড (trust stats) — প্রতিটা নিজের রঙে ---------- */
body.sf-body .sf-stat { position: relative; overflow: hidden; transition: transform .3s var(--sf-ease), box-shadow .3s; }
body.sf-body .sf-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sv-tone-grad, var(--sv-grad-brand)); }
body.sf-body .sf-stat::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; background: var(--sv-tone-soft, var(--sv-green-soft)); opacity: .7; z-index: 0; transition: transform .4s var(--sf-ease); }
body.sf-body .sf-stat > * { position: relative; z-index: 1; }
body.sf-body .sf-stat:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(28, 90, 36, .14); }
body.sf-body .sf-stat:hover::after { transform: scale(1.25); }
body.sf-body .sf-stat__ico { background: var(--sv-tone-grad, var(--sv-grad-brand)); color: #fff; box-shadow: 0 10px 20px var(--sv-tone-shadow, rgba(46, 128, 54, .25)); }
body.sf-body .sf-stat strong { color: var(--sv-tone-ink, var(--sf-navy)); }
body.sf-body .sf-trust__grid > .sf-stat:nth-child(4n+1) { --sv-tone-grad: var(--sv-grad-brand); --sv-tone-soft: var(--sv-green-soft); --sv-tone-ink: #23702c; --sv-tone-shadow: rgba(46, 128, 54, .28); }
body.sf-body .sf-trust__grid > .sf-stat:nth-child(4n+2) { --sv-tone-grad: var(--sv-grad-sky); --sv-tone-soft: var(--sv-sky-soft); --sv-tone-ink: #13719f; --sv-tone-shadow: rgba(30, 159, 208, .28); }
body.sf-body .sf-trust__grid > .sf-stat:nth-child(4n+3) { --sv-tone-grad: var(--sv-grad-sun); --sv-tone-soft: var(--sv-sun-soft); --sv-tone-ink: #a8670a; --sv-tone-shadow: rgba(245, 158, 59, .30); }
body.sf-body .sf-trust__grid > .sf-stat:nth-child(4n+4) { --sv-tone-grad: var(--sv-grad-teal); --sv-tone-soft: var(--sv-teal-soft); --sv-tone-ink: #0f7d6b; --sv-tone-shadow: rgba(19, 162, 138, .28); }

/* ---------- ৬. "কীভাবে কাজ করে" — চার ধাপ চার রঙে, মাঝের দাগ ধীরে চলে ---------- */
body.sf-body .sf-how__grid::before { background: repeating-linear-gradient(90deg, rgba(46, 128, 54, .45) 0 10px, transparent 10px 18px); background-size: 36px 2px; animation: svDash 2.6s linear infinite; opacity: .7; }
body.sf-body .sf-how__card { overflow: hidden; }
body.sf-body .sf-how__card::after { content: ""; position: absolute; inset: auto -30% -55% -30%; height: 70%; background: radial-gradient(closest-side, var(--sv-tone-soft, var(--sv-green-soft)), transparent); z-index: -1; transition: transform .4s var(--sf-ease); }
body.sf-body .sf-how__card:hover::after { transform: translateY(-14%); }
body.sf-body .sf-how__num { background: var(--sv-tone-grad, var(--sv-grad-brand)); box-shadow: 0 12px 24px var(--sv-tone-shadow, rgba(46, 128, 54, .28)); transition: transform .35s var(--sf-ease); }
body.sf-body .sf-how__card:hover .sf-how__num { transform: translateY(-3px) rotate(-6deg) scale(1.05); }
body.sf-body .sf-how__num b { background: #fff; color: var(--sv-tone-ink, var(--sf-navy)); box-shadow: 0 6px 14px rgba(20, 35, 26, .18); }
body.sf-body .sf-how__grid > .sf-how__card:nth-child(4n+1) { --sv-tone-grad: var(--sv-grad-brand); --sv-tone-soft: var(--sv-green-soft); --sv-tone-ink: #23702c; --sv-tone-shadow: rgba(46, 128, 54, .28); }
body.sf-body .sf-how__grid > .sf-how__card:nth-child(4n+2) { --sv-tone-grad: var(--sv-grad-sky); --sv-tone-soft: var(--sv-sky-soft); --sv-tone-ink: #13719f; --sv-tone-shadow: rgba(30, 159, 208, .28); }
body.sf-body .sf-how__grid > .sf-how__card:nth-child(4n+3) { --sv-tone-grad: var(--sv-grad-sun); --sv-tone-soft: var(--sv-sun-soft); --sv-tone-ink: #a8670a; --sv-tone-shadow: rgba(245, 158, 59, .30); }
body.sf-body .sf-how__grid > .sf-how__card:nth-child(4n+4) { --sv-tone-grad: var(--sv-grad-coral); --sv-tone-soft: var(--sv-coral-soft); --sv-tone-ink: #c23a32; --sv-tone-shadow: rgba(232, 80, 74, .28); }

/* "আপনি কি স্কুল কর্তৃপক্ষ?" — ধীরে ঘোরা রঙিন সীমানা */
body.sf-body .sf-school-strip { position: relative; border: 2px solid transparent; background: linear-gradient(135deg, #fffaf0 0%, #ffffff 48%, #effaf1 100%) padding-box, var(--sv-grad-line) border-box; background-size: 100% 100%, 220% 100%; animation: svBorderFlow 9s linear infinite alternate; }
body.sf-body .sf-school-strip__ico { background: var(--sv-grad-sun); box-shadow: 0 12px 24px rgba(245, 158, 59, .32); }

/* ---------- ৭. স্কুলের কার্ড — উপরে রঙের ফিতা, ছবির পেছনে আভা ---------- */
body.sf-body .sf-school-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sv-tone-grad, var(--sv-grad-brand)); z-index: 1; }
body.sf-body .sf-school-card::after { background: radial-gradient(circle, var(--sv-tone-glow, rgba(44, 131, 55, .18)), transparent 70%); }
body.sf-body .sf-school-card__pair img { background: linear-gradient(160deg, #ffffff, var(--sv-tone-soft, #ebf6ec)); border-color: var(--sv-tone-line, #dcefdf); }
body.sf-body .sf-school-card:hover { border-color: var(--sv-tone-line, rgba(46, 128, 54, .24)); box-shadow: 0 22px 46px var(--sv-tone-shadow, rgba(28, 90, 36, .14)); }
body.sf-body .sf-school-card .sf-link-arrow { color: var(--sv-tone-ink, var(--sf-navy)); }
body.sf-body .sf-schools__grid > .sf-school-card:nth-child(5n+1), body.sf-body .sf-dir__grid > .sf-school-card:nth-child(5n+1) { --sv-tone-grad: var(--sv-grad-brand); --sv-tone-soft: #eaf7ec; --sv-tone-line: #cfe9d3; --sv-tone-ink: #23702c; --sv-tone-glow: rgba(44, 131, 55, .18); --sv-tone-shadow: rgba(46, 128, 54, .16); }
body.sf-body .sf-schools__grid > .sf-school-card:nth-child(5n+2), body.sf-body .sf-dir__grid > .sf-school-card:nth-child(5n+2) { --sv-tone-grad: var(--sv-grad-sky); --sv-tone-soft: #e8f6fc; --sv-tone-line: #c8e8f6; --sv-tone-ink: #13719f; --sv-tone-glow: rgba(30, 159, 208, .18); --sv-tone-shadow: rgba(30, 159, 208, .16); }
body.sf-body .sf-schools__grid > .sf-school-card:nth-child(5n+3), body.sf-body .sf-dir__grid > .sf-school-card:nth-child(5n+3) { --sv-tone-grad: var(--sv-grad-sun); --sv-tone-soft: #fff6dd; --sv-tone-line: #f6e2a8; --sv-tone-ink: #a8670a; --sv-tone-glow: rgba(245, 184, 41, .22); --sv-tone-shadow: rgba(245, 158, 59, .18); }
body.sf-body .sf-schools__grid > .sf-school-card:nth-child(5n+4), body.sf-body .sf-dir__grid > .sf-school-card:nth-child(5n+4) { --sv-tone-grad: var(--sv-grad-coral); --sv-tone-soft: #fff0ec; --sv-tone-line: #fbd2c8; --sv-tone-ink: #c23a32; --sv-tone-glow: rgba(255, 122, 102, .20); --sv-tone-shadow: rgba(232, 80, 74, .16); }
body.sf-body .sf-schools__grid > .sf-school-card:nth-child(5n+5), body.sf-body .sf-dir__grid > .sf-school-card:nth-child(5n+5) { --sv-tone-grad: var(--sv-grad-teal); --sv-tone-soft: #e5f7f2; --sv-tone-line: #c4ebe1; --sv-tone-ink: #0f7d6b; --sv-tone-glow: rgba(19, 162, 138, .18); --sv-tone-shadow: rgba(19, 162, 138, .16); }

/* ---------- ৮. "কেন SmartSchool", মতামত, প্রশ্নোত্তর ---------- */
body.sf-body .sf-features { position: relative; background: linear-gradient(180deg, rgba(232, 246, 234, 0) 0%, #eef8f0 18%, #f4fbf7 82%, rgba(244, 251, 247, 0) 100%); }
body.sf-body .sf-feature { --sv-mx: 50%; --sv-my: 0%; }
body.sf-body .sf-feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sv-tone-grad, var(--sv-grad-brand)); }
/* মাউস যেখানে, কার্ডের সেখানে নরম আলো (frontend-vibrant.js — --sv-mx/--sv-my) */
body.sf-body .sf-feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--sv-mx) var(--sv-my), var(--sv-tone-light, rgba(124, 197, 118, .16)), transparent 70%); }
body.sf-body .sf-feature:hover::after { opacity: 1; }
body.sf-body .sf-feature__ico { background: var(--sv-tone-grad, var(--sv-grad-brand)) !important; color: #fff !important; box-shadow: 0 12px 24px var(--sv-tone-shadow, rgba(46, 128, 54, .25)); transition: transform .35s var(--sf-ease); }
body.sf-body .sf-feature:hover .sf-feature__ico { transform: rotate(-8deg) scale(1.06); }
body.sf-body .sf-feature__ico .su-icon, body.sf-body .sf-feature__ico svg { width: 26px; height: 26px; }
body.sf-body .sf-feature--ai { --sv-tone-grad: var(--sv-grad-brand); --sv-tone-light: rgba(124, 197, 118, .18); --sv-tone-ink: #23702c; --sv-tone-shadow: rgba(46, 128, 54, .28); }
body.sf-body .sf-feature--ar { --sv-tone-grad: var(--sv-grad-sky); --sv-tone-light: rgba(57, 182, 227, .16); --sv-tone-ink: #13719f; --sv-tone-shadow: rgba(30, 159, 208, .28); }
body.sf-body .sf-feature--track { --sv-tone-grad: var(--sv-grad-coral); --sv-tone-light: rgba(255, 138, 112, .16); --sv-tone-ink: #c23a32; --sv-tone-shadow: rgba(232, 80, 74, .26); }
body.sf-body .sf-features__grid > .sf-feature:nth-child(n+4):nth-child(3n+1) { --sv-tone-grad: var(--sv-grad-teal); --sv-tone-ink: #0f7d6b; }
body.sf-body .sf-features__grid > .sf-feature:nth-child(n+4):nth-child(3n+2) { --sv-tone-grad: var(--sv-grad-sun); --sv-tone-ink: #a8670a; }

/* মতামত: উষ্ণ হালকা পটভূমি, তারা সোনালি (আগে লাল — "ভুল" মনে হতো), প্রতিটা কার্ডের নিজের রং */
body.sf-body .sf-testimonials { background: linear-gradient(180deg, rgba(255, 245, 217, 0) 0%, #fffaf0 22%, #fff8ec 78%, rgba(255, 248, 236, 0) 100%); }
body.sf-body .sf-quote__stars svg path[fill="#d63a33"] { fill: #f5b829; }
body.sf-body .sf-quote::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--sv-tone-grad, var(--sv-grad-brand)); opacity: .8; }
body.sf-body .sf-quote::before { color: var(--sv-tone-quote, rgba(46, 128, 54, .09)); }
body.sf-body .sf-quote__avatar { background: var(--sv-tone-grad, var(--sv-grad-brand)); }
body.sf-body .sf-quote.is-featured { border-color: rgba(245, 184, 41, .55); box-shadow: 0 16px 40px rgba(245, 158, 59, .16); }
body.sf-body .sf-quotes > .sf-quote:nth-child(3n+1) { --sv-tone-grad: var(--sv-grad-brand); --sv-tone-quote: rgba(46, 128, 54, .10); }
body.sf-body .sf-quotes > .sf-quote:nth-child(3n+2) { --sv-tone-grad: var(--sv-grad-sky); --sv-tone-quote: rgba(30, 159, 208, .11); }
body.sf-body .sf-quotes > .sf-quote:nth-child(3n+3) { --sv-tone-grad: var(--sv-grad-coral); --sv-tone-quote: rgba(232, 80, 74, .10); }

/* প্রশ্নোত্তর: খোলা প্রশ্নের বাঁয়ে রঙিন দাগ */
body.sf-body .sf-faq details { position: relative; transition: box-shadow .25s, border-color .25s, transform .25s var(--sf-ease); }
body.sf-body .sf-faq details::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sv-grad-line); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--sf-ease); }
body.sf-body .sf-faq details[open] { border-color: rgba(46, 128, 54, .22); box-shadow: 0 16px 34px rgba(28, 90, 36, .10); }
body.sf-body .sf-faq details[open]::before { transform: scaleY(1); }
body.sf-body .sf-faq summary:hover { background: linear-gradient(90deg, #f3faf4, transparent); }
body.sf-body .sf-faq details[open] summary .sf-faq__plus { background: var(--sv-grad-brand); }

/* ---------- ৯. CTA ও footer ---------- */
body.sf-body .sf-cta {
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(255, 122, 102, .40), transparent 62%),
        radial-gradient(460px 240px at 0% 100%, rgba(245, 184, 41, .26), transparent 62%),
        linear-gradient(120deg, #1c5a24, #2e8036 45%, #1d8f74 75%, #2e8036);
    background-size: 100% 100%, 100% 100%, 220% 220%;
    animation: svGradientShift 16s ease-in-out infinite alternate;
}
/* ছোট ঝিকিমিকি বিন্দু */
body.sf-body .sf-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(2px 2px at 18% 30%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(2px 2px at 72% 22%, rgba(255, 240, 180, .9), transparent 60%), radial-gradient(1.6px 1.6px at 46% 76%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(2.2px 2.2px at 88% 70%, rgba(255, 210, 200, .9), transparent 60%), radial-gradient(1.4px 1.4px at 30% 84%, rgba(255, 255, 255, .7), transparent 60%); animation: svTwinkle 5s ease-in-out infinite alternate; }
body.sf-body .sf-cta > * { position: relative; z-index: 1; }

body.sf-body .sf-footer { background: linear-gradient(180deg, #1c5a24 0%, #22672b 55%, #1e5f2a 100%); }
body.sf-body .sf-footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sv-grad-line); opacity: .9; }
body.sf-body .sf-footer::before { background: radial-gradient(520px 240px at 0% 0%, rgba(124, 197, 118, .20), transparent 60%), radial-gradient(420px 220px at 100% 100%, rgba(19, 162, 138, .22), transparent 60%); }
body.sf-body .sf-footer h4 { display: inline-flex; align-items: center; gap: 8px; }
body.sf-body .sf-footer h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-sun); box-shadow: 0 0 0 3px rgba(245, 184, 41, .22); }
body.sf-body .sf-pay span { transition: transform .2s var(--sf-ease), background .2s; }
body.sf-body .sf-pay span:hover { transform: translateY(-2px); }
body.sf-body .sf-pay .bkash { background: rgba(226, 19, 110, .16); border-color: rgba(255, 119, 182, .35); }
body.sf-body .sf-pay .nagad { background: rgba(246, 146, 30, .16); border-color: rgba(255, 177, 92, .35); }
body.sf-body .sf-pay .ssl { background: rgba(43, 108, 176, .20); border-color: rgba(140, 190, 240, .35); color: #b9dcff; }
body.sf-body .sf-pay .cod { background: rgba(19, 162, 138, .18); border-color: rgba(167, 243, 208, .35); }

/* ---------- ১০. wizard-এর পাতা (স্কুল → শ্রেণি → ছাত্র → ইউনিফর্ম → মাপ → কার্ট → চেকআউট) ---------- */
body.sf-body .sf-steps__item.is-done .sf-steps__num { background: var(--sv-grad-brand); }
body.sf-body .sf-steps__item.is-current { background: var(--sv-grad-brand); box-shadow: 0 10px 24px rgba(19, 162, 138, .26); }
body.sf-body .sf-main .su-app-card { position: relative; overflow: hidden; }
body.sf-body .sf-main .su-app-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sv-grad-line); opacity: .85; pointer-events: none; }
/* কোণায় রঙিন বিন্দুর নকশা (খুব হালকা) */
body.sf-body .sf-main .su-app-card::before { display: block !important; content: ""; position: absolute; right: -30px; top: -30px; width: 220px; height: 220px; pointer-events: none; opacity: .55; background-image: radial-gradient(rgba(46, 128, 54, .16) 1.6px, transparent 1.8px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 70% 30%, #000 35%, transparent 72%); }
body.sf-body .sf-main .su-app-card > * { position: relative; }

/* শ্রেণির কার্ড — রংপেন্সিলের মতো পালা করে রং */
body.sf-body .sf-main .class-card { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, var(--sv-tone-soft, #f4fbf5) 100%); border-color: var(--sv-tone-line, #dcefdf); transition: transform .3s var(--sf-ease), box-shadow .3s, border-color .3s; }
body.sf-body .sf-main .class-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sv-tone-grad, var(--sv-grad-brand)); }
body.sf-body .sf-main a.class-card:hover { transform: translateY(-6px); border-color: var(--sv-tone-ink, var(--sf-navy)); box-shadow: 0 18px 36px var(--sv-tone-shadow, rgba(46, 128, 54, .16)); }
body.sf-body .sf-main a.class-card:hover h3, body.sf-body .sf-main a.class-card:hover strong { color: var(--sv-tone-ink, var(--sf-navy)); }
body.sf-body .sf-main .class-uniform-pair img { background: #fff; }
body.sf-body .sf-main .class-grid > .class-card:nth-child(5n+1) { --sv-tone-grad: var(--sv-grad-brand); --sv-tone-soft: #eef9f0; --sv-tone-line: #d5ecd9; --sv-tone-ink: #23702c; --sv-tone-shadow: rgba(46, 128, 54, .18); }
body.sf-body .sf-main .class-grid > .class-card:nth-child(5n+2) { --sv-tone-grad: var(--sv-grad-sky); --sv-tone-soft: #ecf8fd; --sv-tone-line: #cfe9f5; --sv-tone-ink: #13719f; --sv-tone-shadow: rgba(30, 159, 208, .18); }
body.sf-body .sf-main .class-grid > .class-card:nth-child(5n+3) { --sv-tone-grad: var(--sv-grad-sun); --sv-tone-soft: #fff8e6; --sv-tone-line: #f6e4b0; --sv-tone-ink: #a8670a; --sv-tone-shadow: rgba(245, 158, 59, .20); }
body.sf-body .sf-main .class-grid > .class-card:nth-child(5n+4) { --sv-tone-grad: var(--sv-grad-coral); --sv-tone-soft: #fff3f0; --sv-tone-line: #f9d5cc; --sv-tone-ink: #c23a32; --sv-tone-shadow: rgba(232, 80, 74, .18); }
body.sf-body .sf-main .class-grid > .class-card:nth-child(5n+5) { --sv-tone-grad: var(--sv-grad-teal); --sv-tone-soft: #ebf8f5; --sv-tone-line: #c9ece3; --sv-tone-ink: #0f7d6b; --sv-tone-shadow: rgba(19, 162, 138, .18); }
body.sf-body .sf-main .class-card.is-unavailable { filter: grayscale(.6); opacity: .8; }

/* ছেলে/মেয়ে কার্ড */
body.sf-body .sf-main .gender-grid > .gender-card:nth-child(2n+1) .gender-uniform-frame { background: radial-gradient(circle at 50% 35%, #ffffff, #e5f5fc 72%); }
body.sf-body .sf-main .gender-grid > .gender-card:nth-child(2n+2) .gender-uniform-frame { background: radial-gradient(circle at 50% 35%, #ffffff, #ffefea 72%); }
body.sf-body .sf-main a.gender-card:hover { box-shadow: 0 22px 46px rgba(28, 90, 36, .16), 0 0 0 3px rgba(245, 184, 41, .35); }

/* ফর্ম-কার্ড ও কার্ট/চেকআউট */
body.sf-body .sf-main .su-form-card h2, body.sf-body .sf-main .su-form-card h3 { position: relative; }
body.sf-body .sf-main .payment-card:has(input:checked) { border-color: var(--sv-teal); background: linear-gradient(135deg, #f1fbf8, #ffffff); box-shadow: 0 0 0 3px rgba(19, 162, 138, .18), 0 12px 26px rgba(19, 162, 138, .12); }
body.sf-body .sf-main .sf-order-summary { position: relative; overflow: hidden; }
body.sf-body .sf-main .sf-order-summary::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sv-grad-line); pointer-events: none; }

/* অর্ডার নিশ্চিত — সফলতার চিহ্নের চারপাশে রঙিন ঢেউ (confetti: frontend-vibrant.js) */
body.sf-body .sf-main .confirm-box .success-mark { background: var(--sv-grad-brand); }
body.sf-body .sf-main .confirm-box .success-mark::before,
body.sf-body .sf-main .confirm-box .success-mark::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(245, 184, 41, .55); animation: svRipple 2.4s .9s var(--sf-ease) infinite; pointer-events: none; }
body.sf-body .sf-main .confirm-box .success-mark::after { border-color: rgba(30, 159, 208, .45); animation-delay: 1.7s; }

/* অর্ডারের অগ্রগতি-দাগ (track/confirmation) */
body.sf-body .sf-otl__bar::-webkit-progress-value { background: var(--sv-grad-line); }
body.sf-body .sf-otl__bar::-moz-progress-bar { background: var(--sv-grad-line); }

/* CHANGE (2026-10-18, P22): অভিভাবকের ড্যাশবোর্ডের পুরনো সংখ্যার কার্ড (.metric-card) আর নেই — নতুন নকশা portal-dashboard.css-এ */

/* ---------- ১১. অন্য পাতা (মাপের গাইড, ফিট গ্যারান্টি) ---------- */
body.sf-body .sf-guide__hero,
body.sf-body .sf-fg__hero {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(560px 260px at 6% 0%, rgba(124, 197, 118, .22), transparent 62%),
        radial-gradient(460px 240px at 100% 0%, rgba(57, 182, 227, .16), transparent 62%),
        radial-gradient(420px 220px at 60% 120%, rgba(245, 184, 41, .20), transparent 64%),
        linear-gradient(160deg, #ffffff, #f3fbf5);
}
body.sf-body .sf-guide__hero::after,
body.sf-body .sf-fg__hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sv-grad-line); }
body.sf-body .sf-fg__card { position: relative; overflow: hidden; transition: transform .3s var(--sf-ease), box-shadow .3s; }
body.sf-body .sf-fg__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sv-tone-grad, var(--sv-grad-brand)); }
body.sf-body .sf-fg__card:hover { transform: translateY(-4px); box-shadow: var(--sf-shadow-md); }
body.sf-body .sf-fg__cards > .sf-fg__card:nth-child(3n+2) { --sv-tone-grad: var(--sv-grad-sky); }
body.sf-body .sf-fg__cards > .sf-fg__card:nth-child(3n+3) { --sv-tone-grad: var(--sv-grad-sun); }

/* ---------- ১২. লগইন / রেজিস্ট্রেশন ---------- */
body.auth-only-body { background: radial-gradient(700px 420px at 0% 0%, rgba(124, 197, 118, .20), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(57, 182, 227, .14), transparent 60%), radial-gradient(500px 300px at 100% 0%, rgba(245, 184, 41, .14), transparent 60%), #f5f9f5; }

/* ---------- ১৩. ফোন ---------- */
@media (max-width: 767.98px) {
    .sv-doodle:nth-child(n+6) { display: none; } /* ফোনে কম ডুডল */
    body.sf-body .sf-section__head h2::after { margin-top: 10px; width: 48px; }
    .sv-totop { width: 44px; height: 44px; right: 14px; }
}

/* ---------- keyframes ---------- */
@keyframes svSheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes svDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes svDrift { 0% { transform: translate3d(0, 0, 0) rotate(var(--r0, -8deg)); } 100% { transform: translate3d(var(--dx, 14px), var(--dy, -22px), 0) rotate(var(--r1, 10deg)); } }
@keyframes svDash { from { background-position: 0 0; } to { background-position: 36px 0; } }
@keyframes svBorderFlow { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }
@keyframes svGradientShift { from { background-position: 0 0, 0 0, 0% 50%; } to { background-position: 0 0, 0 0, 100% 50%; } }
@keyframes svTwinkle { from { opacity: .25; } to { opacity: .7; } }
@keyframes svRipple { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }

/* ---------- ১৪. reduced-motion ও print ---------- */
@media (prefers-reduced-motion: reduce) {
    .sv-doodle, body.sf-body .sf-how__grid::before, body.sf-body .sf-school-strip, body.sf-body .sf-cta, body.sf-body .sf-cta::after,
    body.sf-body .sf-hero__title em::after, body.sf-body .sf-main .confirm-box .success-mark::before, body.sf-body .sf-main .confirm-box .success-mark::after { animation: none !important; }
    body.sf-body .su-btn.primary:hover::after, body.sf-body .su-btn.dark:hover::after, body.sf-body .sf-hero__search button:hover::after, body.sf-body .sf-cta .su-btn.gold:hover::after { animation: none !important; }
    .sv-totop, .sv-progress { transition: none; }
}
@media print {
    .sv-progress, .sv-totop, .sv-doodles, .sv-confetti { display: none !important; }
}