/* ===========================================================
PYTHON PIA — advanced.css
Premium intelligence-agency effects in LIGHT LUXURY theme.
Inspired by & exceeding the reference demo. Loaded after vfx.css.
Theme: Cream + Emerald + Rose-Gold luxury.
=========================================================== */
:root{
--emerald: #2F6B4F;
--emerald-lt: #4E9E74;
--emerald-glow: rgba(78,158,116,.35);
--burgundy: #8E3B38;
--rose-lux: #C56B66;
--gold: #C9A86A;
--gold-soft: #E3CE9E;
--gold-deep: #A07E3E;
--grad-rg: linear-gradient(120deg, var(--emerald) 0%, var(--sage-deep) 28%, var(--gold-deep) 50%, var(--rose-lux) 74%, var(--burgundy) 100%);
--adv-line: rgba(47,107,79,.14);
}
/* ===========================================================
1. CUSTOM CURSOR (precision reticle + trailing dot)
=========================================================== */
@media (hover:hover) and (pointer:fine){
body.adv-cursor{cursor:none}
body.adv-cursor a,body.adv-cursor button,body.adv-cursor .btn,
body.adv-cursor [onclick],body.adv-cursor .tilt,body.adv-cursor .flip{cursor:none}
.adv-cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
transform:translate(-50%,-50%);transition:opacity .3s ease}
.adv-cur__ring{width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--emerald);
box-shadow:0 0 12px -2px var(--emerald-glow), inset 0 0 8px -4px var(--emerald-glow);
transition:width .25s var(--vfx-ease),height .25s var(--vfx-ease),
border-color .25s ease,background .25s ease;
display:grid;place-items:center}
.adv-cur__ring::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--emerald)}
/* crosshair ticks */
.adv-cur__ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;
background:
linear-gradient(var(--emerald),var(--emerald)) 50% 0/1px 5px no-repeat,
linear-gradient(var(--emerald),var(--emerald)) 50% 100%/1px 5px no-repeat,
linear-gradient(var(--emerald),var(--emerald)) 0 50%/5px 1px no-repeat,
linear-gradient(var(--emerald),var(--emerald)) 100% 50%/5px 1px no-repeat;
opacity:.5}
.adv-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:6px;height:6px;
border-radius:50%;background:var(--rose-lux);transform:translate(-50%,-50%);
box-shadow:0 0 8px 1px rgba(197,107,102,.6)}
/* hover state — expands on interactive */
.adv-cur.hot .adv-cur__ring{width:52px;height:52px;border-color:var(--gold-deep);
background:rgba(201,168,106,.08);box-shadow:0 0 20px -2px rgba(201,168,106,.5)}
.adv-cur.hot .adv-cur__ring::before{background:var(--gold-deep)}
.adv-cur.hot .adv-cur__ring::after{background:
linear-gradient(var(--gold-deep),var(--gold-deep)) 50% 0/1px 5px no-repeat,
linear-gradient(var(--gold-deep),var(--gold-deep)) 50% 100%/1px 5px no-repeat,
linear-gradient(var(--gold-deep),var(--gold-deep)) 0 50%/5px 1px no-repeat,
linear-gradient(var(--gold-deep),var(--gold-deep)) 100% 50%/5px 1px no-repeat}
/* click spark */
.adv-spark{position:fixed;z-index:9998;pointer-events:none;width:8px;height:8px;border-radius:50%;
border:1.5px solid var(--gold);transform:translate(-50%,-50%);
animation:advSpark .6s var(--vfx-ease) forwards}
@keyframes advSpark{to{width:48px;height:48px;opacity:0;border-color:var(--rose-lux)}}
}
/* ===========================================================
2. PARTICLE CANVAS + ambient grid (page background)
=========================================================== */
.adv-particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.adv-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
background-image:
linear-gradient(var(--adv-line) 1px,transparent 1px),
linear-gradient(90deg,var(--adv-line) 1px,transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000,transparent 75%)}
/* keep content above bg layers — but DON'T touch fixed/sticky elements */
main,section.section,footer{position:relative;z-index:1}
/* particle & grid sit at z-index 0 (behind everything), so fixed nav/fab
at their own high z-index stay on top automatically */
/* ===========================================================
3. HEXAGON EYE LOGO (animated, for hero/pheros)
=========================================================== */
.hexeye{position:relative;width:96px;height:96px;margin:0 auto}
.hexeye svg{position:relative;z-index:2;width:100%;height:100%;display:block}
.hexeye__orbit,.hexeye__orbit2{position:absolute;inset:-14px;border-radius:50%;
border:1px solid rgba(47,107,79,.3);z-index:1}
.hexeye__orbit::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;
border-radius:50%;background:var(--emerald);box-shadow:0 0 10px 1px var(--emerald-glow);
transform:translateX(-50%)}
.hexeye__orbit{animation:spin 7s linear infinite}
.hexeye__orbit2{inset:-26px;border-color:rgba(201,168,106,.25);border-style:dashed;
animation:spin 16s linear infinite reverse}
.hexeye__orbit2::after{content:"";position:absolute;bottom:-3px;left:50%;width:5px;height:5px;
border-radius:50%;background:var(--gold-deep);box-shadow:0 0 8px 1px rgba(201,168,106,.5);
transform:translateX(-50%)}
.hexeye__pulse{position:absolute;inset:0;z-index:0;border-radius:50%;
background:radial-gradient(circle,var(--emerald-glow),transparent 65%);
animation:hexPulse 3s ease-in-out infinite}
@keyframes hexPulse{0%,100%{transform:scale(.9);opacity:.4}50%{transform:scale(1.25);opacity:.8}}
/* ===========================================================
4. PREMIUM TICKER (scrolling intelligence strip)
=========================================================== */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--adv-line);
background:linear-gradient(90deg,var(--cream-3),var(--cream-2),var(--cream-3));
padding:.7rem 0}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--cream-3),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--cream-3),transparent)}
.ticker__track{display:flex;gap:3rem;width:max-content;animation:tickerMove 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.ticker__track span::before{content:"";width:6px;height:6px;border-radius:50%;
background:var(--grad-rg);flex:none}
.ticker__track b{color:var(--emerald);font-weight:700}
@keyframes tickerMove{to{transform:translateX(-50%)}}
/* ===========================================================
5. HERO STATUS BAR (operations active strip)
=========================================================== */
.statusbar{display:inline-flex;align-items:center;gap:.7rem;margin:0 auto 1.4rem;
font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--emerald);padding:.5rem 1.1rem;border-radius:100px;
background:rgba(78,158,116,.1);border:1px solid rgba(78,158,116,.28);position:relative;overflow:hidden}
.statusbar__dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);
box-shadow:0 0 0 0 var(--emerald);animation:pulseDot 2s ease-out infinite}
/* ===========================================================
6. FLOATING DATA BADGES (around hero/about visuals)
=========================================================== */
.databadge{position:absolute;z-index:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
text-transform:uppercase;padding:.45rem .8rem;border-radius:8px;
background:var(--cream-3);border:1px solid var(--line);color:var(--sage-ink);
box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;gap:.45rem;
animation:floatBadge 5s ease-in-out infinite}
.databadge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--emerald)}
.databadge.gold::before{background:var(--gold-deep)}
.databadge.rose::before{background:var(--rose-lux)}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* ===========================================================
7. RING BADGE (concentric, e.g. founding year)
=========================================================== */
.ringbadge{position:relative;width:min(360px,72vw);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.ringbadge i{position:absolute;border-radius:50%;border:1px solid var(--adv-line)}
.ringbadge i:nth-child(1){inset:0}
.ringbadge i:nth-child(2){inset:11%;border-color:rgba(47,107,79,.16)}
.ringbadge i:nth-child(3){inset:24%;border-style:dashed;border-color:rgba(201,168,106,.28)}
.ringbadge i:nth-child(1)::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;
border-radius:50%;background:var(--emerald);box-shadow:0 0 12px 2px var(--emerald-glow);transform:translateX(-50%)}
.ringbadge i:nth-child(2)::after{content:"";position:absolute;bottom:-3px;left:50%;width:6px;height:6px;
border-radius:50%;background:var(--rose-lux);box-shadow:0 0 10px 1px rgba(197,107,102,.5);transform:translateX(-50%)}
.ringbadge i:nth-child(1){animation:spin 18s linear infinite}
.ringbadge i:nth-child(2){animation:spin 26s linear infinite reverse}
.ringbadge__core{position:relative;z-index:1;text-align:center}
.ringbadge__core b{font-family:var(--display);font-size:clamp(2.4rem,6vw,4rem);
background:var(--grad-rg);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;display:block;line-height:1}
.ringbadge__core small{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-2)}
.ringbadge__sweep{position:absolute;inset:8%;border-radius:50%;z-index:0;
background:conic-gradient(from 0deg,var(--emerald-glow),transparent 26%);
animation:spin 8s linear infinite;mix-blend-mode:multiply;opacity:.5}
/* ===========================================================
8. AWARD / CREDENTIAL CARDS
=========================================================== */
.awardcard{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border-radius:14px;
background:linear-gradient(135deg,var(--cream-3),var(--cream-2));border:1px solid var(--line);
position:relative;overflow:hidden;transition:transform .4s var(--vfx-ease),box-shadow .4s ease}
.awardcard:hover{transform:translateX(6px);box-shadow:var(--shadow-sm)}
.awardcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-rg)}
.awardcard__ic{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
background:rgba(201,168,106,.14);color:var(--gold-deep);font-size:1.3rem}
.awardcard b{display:block;font-size:1rem;color:var(--ink)}
.awardcard small{font-size:.82rem;color:var(--ink-2)}
/* ===========================================================
9. SECTION INDEX MARKER (e.g. "০২ / সেবা")
=========================================================== */
.secmark{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold-deep);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.secmark::before{content:"";width:30px;height:1px;background:var(--grad-rg)}
/* ===========================================================
10. reduced motion
=========================================================== */
@media (prefers-reduced-motion:reduce){
.hexeye__orbit,.hexeye__orbit2,.hexeye__pulse,.ringbadge i,.ringbadge__sweep,
.databadge,.statusbar__dot{animation:none !important}
.adv-particles{display:none}
}
/* ticker is an intentional, gentle marquee — keep it scrolling even when
the OS prefers reduced motion (it conveys live info, not decoration) */
.ticker__track{animation:tickerMove 32s linear infinite !important}
/* ===========================================================
=========== VIVID LUXURY THEME v2 + FIXES ===============
Higher-contrast, clearly visible luxury palette.
Brighter emerald-crimson-gold, crisper hero.
=========================================================== */
:root{
--emerald: #1F7A55; /* brighter, richer green */
--emerald-lt: #3FB985;
--emerald-glow: rgba(63,185,133,.45);
--burgundy: #A8322F; /* vivid crimson-red */
--rose-lux: #D85D58;
--gold: #D4A94E; /* brighter gold */
--gold-soft: #EBD79A;
--gold-deep: #B8862E;
--grad-rg: linear-gradient(120deg, var(--emerald) 0%, var(--emerald-lt) 22%, var(--gold) 50%, var(--rose-lux) 76%, var(--burgundy) 100%);
}
/* --- STATUS BAR: brighter, readable on dark hero --- */
.statusbar{color:var(--gold-soft) !important;
background:rgba(31,122,85,.28) !important;
border-color:rgba(63,185,133,.5) !important;
text-shadow:0 1px 8px rgba(0,0,0,.5)}
.statusbar__dot{background:var(--emerald-lt) !important}
/* --- TICKER: more vivid, clearly animated, bigger --- */
.ticker{background:linear-gradient(90deg,#fff,var(--cream-3),#fff) !important;
border-block:1px solid rgba(31,122,85,.2)}
.ticker__track span{font-size:.8rem;color:var(--ink) !important}
.ticker__track b{color:var(--burgundy) !important;font-weight:700}
.ticker__track span::before{width:7px;height:7px;
box-shadow:0 0 8px 1px var(--emerald-glow)}
/* --- HERO: ensure base dark backdrop even without image, crisp text --- */
.hero{background:linear-gradient(160deg,#10271d 0%,#0c1d16 50%,#1a1410 100%)}
.hero h1{color:#fff !important;text-shadow:0 4px 40px rgba(0,0,0,.6) !important;
font-weight:700}
.hero__lead{color:rgba(255,255,255,.92) !important;text-shadow:0 2px 12px rgba(0,0,0,.4)}
/* hero accent gradient — brighter so it pops */
.hero h1 .accent .ch{
background:linear-gradient(95deg,var(--emerald-lt),var(--gold-soft),var(--rose-lux)) !important;
-webkit-background-clip:text !important;background-clip:text !important;
-webkit-text-fill-color:transparent !important;
filter:drop-shadow(0 2px 12px rgba(63,185,133,.4))}
/* --- accent gradients more visible site-wide --- */
.iconchip__ic,.method__ic,.polcard__ic{
background:var(--grad-rg) !important;background-size:200% 200% !important;
box-shadow:0 8px 24px -10px rgba(168,50,47,.5)}
.card3d::before{background:var(--grad-rg) !important;background-size:300% 300% !important}
.flip::before{background:conic-gradient(from var(--ang,0deg),
var(--emerald),var(--emerald-lt),var(--gold),var(--rose-lux),var(--burgundy),var(--emerald)) !important}
.timeline::before{background:linear-gradient(180deg,var(--emerald),var(--gold),var(--burgundy)) !important}
/* hexeye brighter strokes */
.hexeye svg polygon{stroke:var(--emerald-lt) !important}
.hexeye svg circle:nth-of-type(2){stroke:var(--gold) !important}
.hexeye__orbit::after{background:var(--emerald-lt) !important;box-shadow:0 0 12px 2px var(--emerald-glow) !important}
/* --- NAV: visible sticky shadow + gradient underline on scroll --- */
.nav{transition:background .3s ease,box-shadow .3s ease,padding .3s ease}
.nav.scrolled{box-shadow:0 8px 30px -12px rgba(31,122,85,.25),0 2px 0 0 rgba(31,122,85,.08);
-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.nav.scrolled::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
background:var(--grad-rg);background-size:200% 100%;animation:gradShift2 4s ease infinite;opacity:.7}
/* --- TICKER: static in normal flow (NOT sticky). Sits below the
fixed nav, scrolls away with the page. Only its text scrolls R→L. --- */
.ticker{position:relative;z-index:998;
margin-top:84px; /* clear the fixed nav height */
border-top:none;box-shadow:0 4px 16px -10px rgba(31,122,85,.3)}
/* hero/phero no longer need extra top padding since ticker is in-flow,
but keep a little so the first content isn't tight under the nav */
.hero{padding-top:40px !important}
.phero{padding-top:40px !important}
@media (max-width:600px){
.ticker{margin-top:76px}
}
/* ===========================================================
=========== WHATSAPP CONTACT STYLING ====================
=========================================================== */
.btn--wa{background:linear-gradient(135deg,#25D366,#1DA851) !important;color:#fff !important;
border:none !important;box-shadow:0 12px 30px -12px rgba(37,211,102,.6) !important;position:relative;overflow:hidden}
.btn--wa::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-18deg);animation:cardSheen 4s ease-in-out infinite}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(37,211,102,.7) !important}
.form__send{display:grid;grid-template-columns:1.4fr 1fr;gap:.8rem;margin-top:.5rem}
@media (max-width:520px){.form__send{grid-template-columns:1fr}}
/* WhatsApp floating action button (replaces phone FAB) */
.fab--wa{background:linear-gradient(135deg,#25D366,#1DA851) !important;color:#fff !important}
/* privacy notice band */
.privnote{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem 1.6rem;border-radius:var(--radius);
background:linear-gradient(135deg,rgba(31,122,85,.08),rgba(168,50,47,.06));
border:1px solid var(--line);position:relative;overflow:hidden}
.privnote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-rg)}
.privnote__ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
background:rgba(31,122,85,.12);color:var(--emerald);font-size:1.3rem}
.privnote p{font-size:.92rem;color:var(--ink-2);margin:0}
.privnote b{color:var(--ink)}
/* ===========================================================
=========== FAQ CATEGORIES ==============================
=========================================================== */
.faqwrap{display:grid;gap:2.4rem}
.faqcat__head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;
padding-bottom:.8rem;border-bottom:2px solid var(--line);position:relative}
.faqcat__head::after{content:"";position:absolute;left:0;bottom:-2px;width:80px;height:2px;
background:var(--grad-rg)}
.faqcat__ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
background:var(--grad-rg);background-size:200% 200%;color:#fff;animation:gradShift2 6s ease infinite}
.faqcat__ic svg{width:22px;height:22px}
.faqcat__head h3{font-size:1.25rem;flex:1;color:var(--ink)}
.faqcat__count{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--gold-deep);padding:.35rem .7rem;border-radius:20px;border:1px solid rgba(184,134,46,.3);
background:rgba(212,169,78,.08)}
/* ===========================================================
=========== CLARITY + VISIBLE CHANGE PASS ===============
Make hero text crisp, ticker bold & obviously moving,
higher contrast everywhere the user flagged.
=========================================================== */
/* STATUS BAR — bigger, bolder, unmistakably readable */
.statusbar{font-size:.74rem !important;font-weight:600;letter-spacing:.12em !important;
padding:.6rem 1.3rem !important;color:#fff !important;
background:rgba(31,122,85,.85) !important;border:1px solid var(--emerald-lt) !important;
box-shadow:0 6px 20px -8px rgba(31,122,85,.6) !important;text-shadow:none !important}
.statusbar__dot{background:#7CF0BC !important;box-shadow:0 0 8px 2px rgba(124,240,188,.8) !important}
/* HERO TAG (সদা সতর্ক) — readable on dark */
.hero__tag{color:var(--gold-soft) !important;font-weight:500}
/* TICKER — bigger text, clearly bold numbers, stronger dots */
.ticker{padding:.85rem 0 !important;
background:linear-gradient(90deg,#fff,#f4f8f5,#fff) !important;
border-block:1px solid rgba(31,122,85,.25) !important}
.ticker__track{gap:3.5rem !important}
.ticker__track span{font-size:.86rem !important;font-weight:500;color:var(--ink) !important}
.ticker__track b{color:var(--burgundy) !important;font-weight:800 !important;font-size:.95rem}
.ticker__track span::before{width:8px !important;height:8px !important;
background:var(--grad-rg) !important;box-shadow:0 0 10px 2px rgba(31,122,85,.5) !important}
/* HERO headline — maximum crispness */
.hero h1{color:#fff !important;font-weight:800 !important;
text-shadow:0 2px 24px rgba(0,0,0,.7),0 0 60px rgba(0,0,0,.4) !important}
.hero__lead{color:#fff !important;opacity:.95;
text-shadow:0 2px 14px rgba(0,0,0,.6) !important;font-weight:400}
/* ===========================================================
NAV — guaranteed visible & solid when scrolled
=========================================================== */
.nav.scrolled{
background:rgba(251,249,243,.96) !important;
-webkit-backdrop-filter:blur(16px) saturate(1.3) !important;
backdrop-filter:blur(16px) saturate(1.3) !important;
box-shadow:0 8px 30px -12px rgba(31,122,85,.3) !important;
}
/* ensure particle canvas + grid never cover fixed UI */
.adv-particles,.adv-grid{z-index:0 !important;pointer-events:none}
.nav{z-index:1000 !important}
.ticker{z-index:999 !important}
.fab,.progress-ring{z-index:900 !important}
/* ===========================================================
NAV TEXT CONTRAST FIX — readable at top AND when scrolled
At top (over dark hero): light text. When scrolled (light bg): dark text.
=========================================================== */
/* TOP state (not scrolled) — over dark hero, use light text */
.nav:not(.scrolled) .brand__txt b,
.nav:not(.scrolled) .nav__links a{
color:#fff !important;
text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.nav:not(.scrolled) .brand__txt small{
color:rgba(227,206,158,.85) !important;
}
.nav:not(.scrolled) .nav__links a.active{
color:var(--gold-soft) !important;
}
/* hamburger lines light at top */
.nav:not(.scrolled) .nav__toggle span{background:#fff !important}
/* SCROLLED state — light bg, use dark text (default, but enforce) */
.nav.scrolled .brand__txt b,
.nav.scrolled .nav__links a{
color:var(--ink) !important;
text-shadow:none;
}
.nav.scrolled .brand__txt small{color:var(--ink-2) !important}
.nav.scrolled .nav__links a.active{color:var(--emerald) !important}
/* underline accent uses brand red-green */
.nav__links a::after{background:var(--burgundy) !important}
.nav:not(.scrolled) .nav__links a::after{background:var(--gold-soft) !important}
/* On interior pages the phero is also dark at top — same treatment applies
automatically because they share the .nav element. But interior page
body background is light, so once scrolled the .scrolled rules handle it. */
/* ===========================================================
CURTAIN — guarantee it hides & never blocks scroll/clicks
=========================================================== */
.curtain.done{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* hard fallback: fully remove from layout shortly after */
.curtain.done{animation:curtainGone .1s .8s forwards}
@keyframes curtainGone{to{display:none}}
/* ===========================================================
TESTIMONIAL — distinct MAGIC entrance/exit per card
Each testimonial appears & vanishes differently.
States: default(hidden) -> .on(visible) -> .out(leaving)
=========================================================== */
/* base hidden state is overridden per-variant below */
.cfade__card{transition:opacity .85s cubic-bezier(.22,.61,.36,1),
transform 1s cubic-bezier(.34,1.56,.64,1), filter .85s ease !important}
/* Card 1 — RISE & UNBLUR from below with slight zoom */
.cfade__card:nth-child(1){opacity:0;transform:translateY(60px) scale(.9);filter:blur(16px)}
.cfade__card:nth-child(1).out{opacity:0;transform:translateY(-50px) scale(1.08);filter:blur(14px)}
/* Card 2 — SPIN-IN: rotate + scale (magic swirl) */
.cfade__card:nth-child(2){opacity:0;transform:rotate(-12deg) scale(.7);filter:blur(10px)}
.cfade__card:nth-child(2).out{opacity:0;transform:rotate(12deg) scale(1.15);filter:blur(12px)}
/* Card 3 — FLIP-IN on X axis (card flips into view) */
.cfade__card:nth-child(3){opacity:0;transform:perspective(1200px) rotateX(75deg) scale(.95);
transform-origin:bottom;filter:blur(8px)}
.cfade__card:nth-child(3).out{opacity:0;transform:perspective(1200px) rotateX(-75deg) scale(.95);
transform-origin:top;filter:blur(8px)}
/* Card 4 — SLIDE-WARP from side with skew (warp in) */
.cfade__card:nth-child(4){opacity:0;transform:translateX(90px) skewY(8deg) scale(.92);filter:blur(12px)}
.cfade__card:nth-child(4).out{opacity:0;transform:translateX(-90px) skewY(-8deg) scale(.92);filter:blur(12px)}
/* if more than 4, cycle variants */
.cfade__card:nth-child(5){opacity:0;transform:rotateY(80deg) scale(.9);transform-origin:left;filter:blur(10px)}
.cfade__card:nth-child(5).out{opacity:0;transform:rotateY(-80deg) scale(.9);transform-origin:right;filter:blur(10px)}
/* the VISIBLE state — same crisp resting position for all */
.cfade__card.on{opacity:1 !important;
transform:none !important;filter:blur(0) !important;
pointer-events:auto;z-index:2}
.cfade__card.out{z-index:1;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.cfade__card,.cfade__card.on,.cfade__card.out{
transform:none !important;filter:none !important;transition:opacity .3s !important}
}
/* ===========================================================
FOOTER — animated shifting color gradient + larger logo
=========================================================== */
.footer{
background:linear-gradient(125deg,
#14271d 0%, #1F7A55 22%, #2F6B4F 38%,
#1a1a16 52%, #A8322F 70%, #8E3B38 84%, #14271d 100%) !important;
background-size:300% 300% !important;
animation:footerFlow 16s ease infinite !important;
color:rgba(255,255,255,.82) !important;
position:relative;overflow:hidden;isolation:isolate;
}
@keyframes footerFlow{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
/* soft dark veil so text stays readable over the moving gradient */
.footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(15,18,15,.35),rgba(15,18,15,.6))}
.footer > .container{position:relative;z-index:1}
/* gold top hairline */
.footer::before{background:linear-gradient(90deg,transparent,var(--gold),var(--rose-lux),var(--emerald-lt),transparent) !important;
height:2px !important;background-size:200% 100%;animation:footerFlow 8s linear infinite}
/* footer text/links lighter for contrast on vivid bg */
.footer h4{color:#fff !important}
.footer a{color:rgba(255,255,255,.78) !important;transition:color .25s}
.footer a:hover{color:var(--gold-soft) !important}
.footer p{color:rgba(255,255,255,.72) !important}
.footer__social a{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.18)}
.footer__social a:hover{background:rgba(255,255,255,.22) !important;transform:translateY(-2px)}
/* ---- LOGO ONLY (no text) — larger ---- */
.footer__about .brand{gap:0 !important}
.footer__about .brand .brand__txt{display:none !important} /* hide "Python PIA" text */
.footer__about .brand .brand__logo{
width:84px !important;height:84px !important;
font-size:2.6rem !important;border-radius:20px !important;
box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
}
/* when user adds an ![]()
logo it scales nicely too */
.footer__about .brand img{width:96px !important;height:auto !important;max-height:96px;
object-fit:contain;display:block}
@media (max-width:600px){
.footer__about .brand .brand__logo{width:70px !important;height:70px !important;font-size:2.1rem !important}
}
/* ===========================================================
TEAM FLIP CARDS — text by default, flip to photo on hover
=========================================================== */
.teamgrid{perspective:1600px}
.teamflip{position:relative;min-height:300px;cursor:pointer}
.teamflip__in{position:relative;width:100%;height:100%;min-height:300px;
transition:transform .8s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.teamflip:hover .teamflip__in,
.teamflip:focus-within .teamflip__in{transform:rotateY(180deg)}
.teamflip__front,.teamflip__back{position:absolute;inset:0;border-radius:var(--radius);
-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* FRONT — text only, luxury card */
.teamflip__front{display:flex;flex-direction:column;justify-content:center;
padding:2rem 1.7rem;
background:linear-gradient(160deg,var(--cream-3),var(--cream-2));
border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.teamflip__front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-rg)}
.teamflip__front::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background:radial-gradient(60% 70% at 90% 5%,rgba(31,122,85,.1),transparent 55%),
radial-gradient(50% 60% at 5% 100%,rgba(168,50,47,.08),transparent 55%)}
.teamflip__badge{position:absolute;top:1.1rem;right:1.3rem;font-family:var(--mono);
font-size:.6rem;letter-spacing:.18em;color:var(--gold-deep);
border:1px solid rgba(184,134,46,.35);padding:.25rem .55rem;border-radius:6px;
background:rgba(212,169,78,.08)}
.teamflip__front b{font-family:var(--display);font-size:1.3rem;color:var(--ink);
line-height:1.25;position:relative;z-index:1}
.teamflip__front small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--emerald);margin:.4rem 0 .9rem;position:relative;z-index:1}
.teamflip__front p{font-size:.92rem;color:var(--ink-2);line-height:1.7;position:relative;z-index:1}
.teamflip__hint{position:absolute;bottom:1.1rem;left:1.7rem;font-size:.72rem;color:var(--gold-deep);
opacity:.7;position:relative;z-index:1;margin-top:1rem}
/* BACK — the photo */
.teamflip__back{transform:rotateY(180deg);
background:linear-gradient(160deg,var(--sage-ink),var(--ink));
border:1px solid rgba(227,206,158,.25)}
.teamflip__back img{width:100%;height:100%;object-fit:cover;display:block}
.teamflip__ph{width:100%;height:100%;min-height:300px;display:grid;place-items:center;
background:linear-gradient(160deg,var(--sage-ink),var(--ink));color:rgba(227,206,158,.5);
font-family:var(--mono);font-size:.75rem;text-align:center;padding:1rem}
.teamflip__cap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.4rem;
background:linear-gradient(0deg,rgba(15,18,15,.92),transparent);
color:var(--cream)}
.teamflip__cap b{font-family:var(--display);font-size:1.15rem;display:block;color:#fff}
.teamflip__cap small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-soft)}
/* gold frame accent on back */
.teamflip__back::after{content:"";position:absolute;inset:10px;border-radius:12px;
border:1px solid rgba(227,206,158,.2);pointer-events:none;z-index:1}
@media (max-width:760px){
.teamflip{min-height:260px}
.teamflip__in{min-height:260px}
/* on touch: tap to flip */
.teamflip:active .teamflip__in{transform:rotateY(180deg)}
}
@media (prefers-reduced-motion:reduce){
.teamflip__in{transition:transform .3s}
}
/* ===========================================================
IMAGES — 3D tilt + depth + shine on all image frames
=========================================================== */
.media-frame,.imgph{position:relative;overflow:hidden;border-radius:var(--radius);
transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
transform-style:preserve-3d;will-change:transform}
.media-frame:hover,.imgph:hover{
transform:perspective(1000px) rotateX(2deg) rotateY(-3deg) translateZ(10px) scale(1.02);
box-shadow:0 30px 60px -25px rgba(31,122,85,.45)}
.media-frame img,.imgph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.media-frame:hover img{transform:scale(1.08)}
/* moving shine sweep across images */
.media-frame::after,.imgph::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
z-index:3;pointer-events:none;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);
transform:skewX(-18deg);transition:left .8s ease}
.media-frame:hover::after,.imgph:hover::after{left:130%}
/* gold corner frame on hover */
.media-frame::before{content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
border:1px solid rgba(227,206,158,0);border-radius:10px;transition:border-color .5s ease}
.media-frame:hover::before{border-color:rgba(227,206,158,.4)}
/* image placeholders get a subtle animated gradient so they're not flat/boring */
.imgph{background:linear-gradient(135deg,var(--cream-2),var(--cream-3),var(--cream-2)) !important;
background-size:200% 200%;animation:phShimmer 6s ease infinite}
@keyframes phShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.imgph span{position:relative;z-index:1}
.imgph::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background:radial-gradient(60% 70% at 30% 20%,rgba(31,122,85,.08),transparent 55%),
radial-gradient(50% 60% at 80% 90%,rgba(168,50,47,.06),transparent 55%)}
@media (prefers-reduced-motion:reduce){
.media-frame:hover,.imgph:hover{transform:none}
.imgph{animation:none}
}
/* ===========================================================
HEADING LINE-HEIGHT FIX — Bangla double-line headings overlap
because line-height:1.12 is too tight for Bangla glyphs
(যুক্তাক্ষর, মাত্রা, নিচের কার). Give them breathing room.
=========================================================== */
h1,h2,h3,h4{line-height:1.45 !important}
.hero h1{line-height:1.3 !important}
.phero h1,.phero--vfx h1{line-height:1.35 !important}
.cta-band h2,.shead h2,.showrow__body h3,
.flip__face h3,.card h3,.teamflip__front b,
.faqcat__head h3{line-height:1.4 !important}
/* big display numbers can stay tight (no descenders stacking) */
.hero__stat b,.statband__c b,.stattile b,.ringbadge__core b,
.brand__txt b,.card__num,.cfade__q{line-height:1.05 !important}
/* multi-line headline spacing a touch looser still */
h1{line-height:1.32 !important}
/* ===========================================================
FAQ — PROFESSIONAL CATEGORY-BASED REDESIGN
=========================================================== */
/* fix the oversized icon — hard constrain */
.faqcat__ic{width:46px !important;height:46px !important;flex:0 0 46px !important}
.faqcat__ic svg{width:24px !important;height:24px !important;flex:none}
/* category navigation pills (filter bar) */
.faqnav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:0 auto 3rem;max-width:820px}
.faqnav__btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
font-family:var(--bangla);font-size:.9rem;font-weight:500;color:var(--ink-2);
padding:.6rem 1.1rem;border-radius:100px;border:1px solid var(--line);
background:var(--cream-3);transition:all .3s var(--vfx-ease);white-space:nowrap}
.faqnav__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.faqnav__btn:hover{transform:translateY(-2px);border-color:var(--emerald);color:var(--emerald);
box-shadow:0 6px 16px -8px rgba(31,122,85,.3)}
.faqnav__btn.active{background:var(--grad-rg);background-size:200% 200%;color:#fff;border-color:transparent;
box-shadow:0 8px 20px -8px rgba(31,122,85,.45);animation:gradShift2 5s ease infinite}
.faqnav__btn .n{font-family:var(--mono);font-size:.66rem;opacity:.8;
padding:.1rem .4rem;border-radius:20px;background:rgba(0,0,0,.08)}
.faqnav__btn.active .n{background:rgba(255,255,255,.22)}
/* category cards — premium */
.faqwrap{display:grid;gap:1.6rem}
.faqcat{background:linear-gradient(165deg,var(--cream-3),#fff);
border:1px solid var(--line);border-radius:var(--radius);
padding:1.8rem 1.8rem 1rem;position:relative;overflow:hidden;
transition:opacity .4s ease,transform .4s ease;
box-shadow:0 10px 40px -28px rgba(43,46,42,.4)}
.faqcat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
background:var(--grad-rg);background-size:200% 100%;animation:gradShift2 5s ease infinite}
/* hidden state when filtered out */
.faqcat.faq-hide{display:none}
.faqcat__head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;
padding-bottom:1.1rem;border-bottom:1px solid var(--line);position:relative}
.faqcat__head::after{display:none}
.faqcat__head h3{font-size:1.3rem;flex:1;color:var(--ink);line-height:1.3 !important}
.faqcat__count{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-deep);padding:.4rem .8rem;border-radius:20px;border:1px solid rgba(184,134,46,.3);
background:rgba(212,169,78,.1);white-space:nowrap;flex:none}
/* accordion items inside category — cleaner */
.faqcat .acc__item{border:none;border-bottom:1px solid var(--line-2);border-radius:0;margin:0;background:transparent}
.faqcat .acc__item:last-child{border-bottom:none}
.faqcat .acc__head{font-size:1.02rem;font-weight:600;padding:1.1rem 0;color:var(--ink);
display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;
background:none;border:none;text-align:start;cursor:pointer;transition:color .25s;line-height:1.5}
.faqcat .acc__head:hover{color:var(--emerald)}
.faqcat .acc__icon{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
background:rgba(31,122,85,.1);color:var(--emerald);font-size:1.2rem;font-weight:400;
transition:transform .35s var(--vfx-spring),background .3s}
.faqcat .acc__item.open .acc__icon{transform:rotate(45deg);background:var(--emerald);color:#fff}
.faqcat .acc__body{color:var(--ink-2);line-height:1.8;font-size:.94rem}
.faqcat .acc__body p{padding-bottom:1.1rem}
@media (max-width:600px){
.faqcat{padding:1.4rem 1.3rem .8rem}
.faqcat__head h3{font-size:1.12rem}
}
/* ===========================================================
LANGUAGE TOGGLE BUTTON
=========================================================== */
.langtoggle{display:inline-flex;align-items:center;cursor:pointer;
font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;
border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--cream-3);
transition:all .3s ease;padding:0}
.langtoggle span{padding:.45rem .8rem;transition:all .3s ease;color:var(--ink-2)}
/* default (Bangla active) — show "English" highlighted as the action */
.langtoggle .lang-en{background:var(--grad-rg);background-size:200% 200%;color:#fff;
animation:gradShift2 6s ease infinite}
.langtoggle .lang-bn{color:var(--ink-2)}
/* when English active — flip the highlight to "বাংলা" */
.lang-en-active .langtoggle .lang-en{background:transparent;color:var(--ink-2);animation:none}
.lang-en-active .langtoggle .lang-bn{background:var(--grad-rg);background-size:200% 200%;color:#fff;
animation:gradShift2 6s ease infinite}
.langtoggle:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(31,122,85,.3)}
/* on dark hero (nav not scrolled) make border visible */
.nav:not(.scrolled) .langtoggle{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.nav:not(.scrolled) .langtoggle .lang-bn{color:rgba(255,255,255,.85)}
@media (max-width:880px){
.langtoggle{font-size:.66rem}
.langtoggle span{padding:.4rem .6rem}
}
/* ===========================================================
NAVBAR — logo only (no text), larger logo
=========================================================== */
/* hide the "Python PIA / Private Investigation" text in the NAV only
(footer brand text is handled separately) */
.nav .brand .brand__txt{display:none !important}
/* enlarge the nav logo */
.nav .brand .brand__logo{
width:60px !important;height:60px !important;
font-size:1.7rem !important;border-radius:14px !important;
}
/* if a real ![]()
logo is used in nav, size it nicely too */
.nav .brand img{height:56px !important;width:auto !important;max-width:170px;object-fit:contain;display:block}
@media (max-width:600px){
.nav .brand .brand__logo{width:50px !important;height:50px !important;font-size:1.45rem !important}
.nav .brand img{height:46px !important}
}
/* ===========================================================
REAL LOGO IMAGE — clean display (no box background)
=========================================================== */
.brand__logo--img{
background:none !important;box-shadow:none !important;
border-radius:8px !important;object-fit:contain;display:block;
padding:0 !important;
}
.brand__logo--img::after{display:none !important} /* remove shimmer overlay */
/* nav logo size */
.nav .brand .brand__logo--img{
width:auto !important;height:58px !important;max-width:180px;
}
/* footer logo size (bigger) */
.footer__about .brand .brand__logo--img{
width:auto !important;height:96px !important;max-width:240px;
}
@media (max-width:600px){
.nav .brand .brand__logo--img{height:46px !important}
.footer__about .brand .brand__logo--img{height:74px !important}
}
/* ===========================================================
FORCE: nav = logo only, NO text, NO background plate
(highest-priority override — beats any cached/older rule)
=========================================================== */
.nav .brand .brand__txt,
.nav .brand b,
.nav .brand small{ display:none !important; visibility:hidden !important; width:0 !important; }
/* the logo image itself: zero background / box / shadow / shimmer */
.nav .brand img,
.nav .brand .brand__logo--img,
.footer__about .brand img,
.footer__about .brand .brand__logo--img{
background:none !important;
background-color:transparent !important;
box-shadow:none !important;
border:none !important;
border-radius:10px !important;
}
.nav .brand img::after,
.footer__about .brand img::after{ content:none !important; display:none !important; }