/* =========================================================
   custom.css — animations, JS-driven state classes,
   and visual effects that Tailwind utilities can't cover
   ========================================================= */

/* ---- Scroll reveal (JS adds .visible) ---- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ---- Loader ---- */
.loader { position:fixed; inset:0; background:radial-gradient(ellipse at center,#0e1f3d 0%,#0d1b4b 70%); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .45s ease,visibility .45s ease; }
.loader.out { opacity:0; visibility:hidden; }
.loader-inner { display:flex; flex-direction:column; align-items:center; gap:14px; animation:ldrFadeIn .5s cubic-bezier(.2,.9,.1,1) both; }
@keyframes ldrFadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.loader-logo-img { height:144px; width:auto; object-fit:contain; border-radius:8px; filter:drop-shadow(0 4px 16px rgba(255,107,53,.18)); }
.loader-brand { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.ldr-sub { font-size:11px; font-weight:700; color:#FF6B35; letter-spacing:3.5px; }
.level-bar { margin-top:4px; padding:4px 6px; background:rgba(255,255,255,.03); border-radius:16px; border:1px solid rgba(255,255,255,.07); box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 3px rgba(0,0,0,.4); }
.level-bar-track { width:200px; height:20px; background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(255,255,255,.02) 50%,rgba(0,0,0,.2) 100%); border-radius:10px; border:1px solid rgba(0,0,0,.35); position:relative; overflow:hidden; box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 2px rgba(255,255,255,.04); }
.level-bar-track::after { content:''; position:absolute; top:0; left:0; right:0; height:40%; background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 100%); border-radius:10px 10px 0 0; }
.level-bar-tick { position:absolute; top:50%; transform:translateY(-50%); width:1.5px; height:12px; background:rgba(255,255,255,.5); z-index:2; }
.lbt-l { left:calc(50% - 7px); }
.lbt-r { left:calc(50% + 7px); }
.level-bar-bubble { position:absolute; width:16px; height:16px; top:50%; margin-top:-8px; border-radius:50%; background:radial-gradient(circle at 38% 35%,#ff9a6c 0%,#FF6B35 45%,#e55a22 100%); box-shadow:0 0 10px rgba(255,107,53,.55),0 2px 6px rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.35); z-index:3; animation:lvrSlideBounce 1.6s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes lvrSlideBounce { 0%{left:152px} 45%{left:84px} 72%{left:96px} 100%{left:92px} }
.loader-tagline { font-size:10px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* ---- Navbar ---- */
.navbar { height:var(--nav-h); transition:all .55s cubic-bezier(.4,0,.2,1); }
.navbar.scrolled { background:#0d1b4b; box-shadow:0 4px 20px rgba(13,27,75,.3); }

/* Nav link underline */
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; bottom:4px; left:50%; width:0; height:2px; background:#FF6B35; border-radius:2px; transform:translateX(-50%); transition:width .3s ease; }
.nav-link:hover::after, .nav-link.active::after { width:55%; }

/* Navbar CTA shimmer */
.nav-cta::before { content:''; position:absolute; top:-50%; left:-75%; width:40%; height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-12deg); animation:ctaShimmer 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes ctaShimmer { 0%{left:-75%} 55%,100%{left:125%} }
.btn-spark { position:absolute; color:rgba(255,255,255,.85); pointer-events:none; animation:btnSparkle 2.6s ease-in-out infinite; }
.bs-1 { width:8px;  top:-4px;    right:7px;  animation-delay:0s;   }
.bs-2 { width:6px;  bottom:-3px; left:9px;   animation-delay:1s;   }
.bs-3 { width:7px;  top:4px;     left:4px;   animation-delay:1.8s; }
@keyframes btnSparkle { 0%,100%{opacity:0;transform:scale(.55) rotate(0deg)} 40%,60%{opacity:.9;transform:scale(1) rotate(22deg)} }

/* Hamburger open state */
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu — JS toggles .open */
.mobile-menu { left:-100%; transition:left .42s cubic-bezier(.4,0,.2,1); }
.mobile-menu.open { left:0; }
.mobile-overlay.show { opacity:1; visibility:visible; }

/* ---- Hero ---- */
.hero {
    background-color:#091236;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M20 16L21.5 18.5L24 20L21.5 21.5L20 24L18.5 21.5L16 20L18.5 18.5Z' fill='rgba(255,255,255,.07)'/%3E%3Cpath d='M60 56L61.5 58.5L64 60L61.5 61.5L60 64L58.5 61.5L56 60L58.5 58.5Z' fill='rgba(255,255,255,.05)'/%3E%3Ccircle cx='72' cy='8' r='1.5' fill='rgba(255,255,255,.05)'/%3E%3Ccircle cx='8' cy='72' r='1.5' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 65% 75% at 95% -5%,rgba(255,107,53,.32) 0%,rgba(255,107,53,.08) 45%,transparent 70%),
        radial-gradient(ellipse 45% 40% at -5% 100%,rgba(255,140,66,.16) 0%,transparent 60%),
        radial-gradient(ellipse 80% 70% at 50% 60%,transparent 40%,rgba(6,13,46,.55) 100%),
        linear-gradient(148deg,#060d2e 0%,#0d1b4b 52%,#152468 100%);
    background-size:80px 80px,100% 100%,100% 100%,100% 100%,100% 100%;
}
.hero::after { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:1; }

.lightning-word { position:relative; color:#FF6B35; text-shadow:0 0 8px rgba(255,107,53,.95),0 0 22px rgba(255,107,53,.65),0 0 48px rgba(255,107,53,.35); animation:lightningFlicker 4s ease-in-out infinite; }
@keyframes lightningFlicker {
    0%,89%,100% { text-shadow:0 0 8px rgba(255,107,53,.95),0 0 22px rgba(255,107,53,.65),0 0 48px rgba(255,107,53,.35); opacity:1; }
    90%  { opacity:.75; text-shadow:0 0 3px rgba(255,107,53,.5); }
    91%  { text-shadow:0 0 14px rgba(255,220,100,1),0 0 36px rgba(255,107,53,.9),0 0 70px rgba(255,107,53,.5); opacity:1; }
    92%  { opacity:.8; text-shadow:0 0 4px rgba(255,107,53,.5); }
    93%  { text-shadow:0 0 10px rgba(255,200,80,.95),0 0 28px rgba(255,107,53,.7),0 0 55px rgba(255,107,53,.4); opacity:1; }
}
.sparkle { position:absolute; color:#FF6B35; animation:spkTwinkle 4s ease-in-out infinite; }
.sp-1{width:30px;top:14%;right:7%;animation-delay:0s}
.sp-2{width:16px;top:32%;left:5%;animation-delay:1.2s}
.sp-3{width:12px;top:62%;right:16%;animation-delay:2.5s}
.sp-4{width:22px;top:20%;right:32%;animation-delay:.6s}
.sp-5{width:10px;top:75%;left:14%;animation-delay:1.8s}
@keyframes spkTwinkle { 0%,100%{opacity:0;transform:scale(.7) rotate(0deg)} 40%,60%{opacity:.65;transform:scale(1) rotate(22deg)} }

/* ---- Magic Bubble ---- */
.magic-bubble {
    width:360px; height:360px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%,rgba(185,127,232,.55) 0%,transparent 55%),radial-gradient(circle at 70% 75%,rgba(255,107,53,.3) 0%,transparent 50%),radial-gradient(circle at 50% 50%,#1a0a2e 0%,#0d1b4b 55%,#091236 100%);
    border:2px solid rgba(185,127,232,.6);
    box-shadow:0 0 40px rgba(155,89,182,.35),0 0 90px rgba(155,89,182,.15),0 0 160px rgba(255,107,53,.08),inset 0 0 50px rgba(155,89,182,.12),inset 0 -20px 60px rgba(255,107,53,.08);
    display:flex; align-items:center; justify-content:center; text-align:center; padding:52px;
    cursor:pointer; position:relative; overflow:visible; user-select:none;
    animation:bubblePulse 3.5s ease-in-out infinite; will-change:transform;
}
@keyframes bubblePulse {
    0%,100%{box-shadow:0 0 40px rgba(155,89,182,.35),0 0 90px rgba(155,89,182,.15),0 0 160px rgba(255,107,53,.08),inset 0 0 50px rgba(155,89,182,.12),inset 0 -20px 60px rgba(255,107,53,.08)}
    50%{box-shadow:0 0 60px rgba(155,89,182,.55),0 0 130px rgba(155,89,182,.25),0 0 200px rgba(255,107,53,.12),inset 0 0 70px rgba(185,127,232,.22),inset 0 -20px 70px rgba(255,107,53,.12)}
}
.magic-bubble.poof-out { animation:poofOut .38s cubic-bezier(.4,0,.6,1) forwards !important; }
@keyframes poofOut { 0%{transform:scale(1) rotate(0deg);opacity:1} 35%{transform:scale(1.22) rotate(12deg);opacity:.9} 100%{transform:scale(0) rotate(-40deg);opacity:0} }
.magic-bubble.poof-in  { animation:poofIn .55s cubic-bezier(.18,.9,.32,1.28) forwards !important; }
@keyframes poofIn  { 0%{transform:scale(0) rotate(20deg);opacity:0} 60%{transform:scale(1.14) rotate(-6deg);opacity:1} 80%{transform:scale(.96) rotate(2deg);opacity:1} 100%{transform:scale(1) rotate(0deg);opacity:1} }
.magic-orb-star { font-size:34px; background:linear-gradient(135deg,#FFD166,#FF6B35,#d4a8f0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:starSpin 6s linear infinite; display:block; line-height:1; filter:drop-shadow(0 0 6px rgba(255,209,102,.7)); }
@keyframes starSpin { 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.25)} 100%{transform:rotate(360deg) scale(1)} }
#magicText { font-family:'Cinzel',serif; font-size:31px; font-weight:700; line-height:1.25; background:linear-gradient(135deg,#ffffff 0%,#e0c3f7 60%,#d4a8f0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:.5px; filter:drop-shadow(0 0 12px rgba(185,127,232,.6)); }
.poof-smoke { position:absolute; top:50%; left:50%; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); animation:smokeRing var(--dur,.7s) ease-out forwards; opacity:0; }
@keyframes smokeRing { 0%{transform:translate(-50%,-50%) scale(.3);opacity:.55} 60%{opacity:.2} 100%{transform:translate(-50%,-50%) scale(2.4);opacity:0} }
.poof-flash { position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(155,89,182,.7) 0%,rgba(126,60,168,.3) 50%,transparent 75%); animation:flashFade .45s ease-out forwards; }
@keyframes flashFade { 0%{opacity:1;transform:scale(.6)} 40%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(1.3)} }
.poof-particle { position:absolute; top:50%; left:50%; pointer-events:none; font-size:var(--sz,13px); line-height:1; transform-origin:center; animation:particleBurst var(--dur,.85s) ease-out forwards; }
@keyframes particleBurst { 0%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(4px) scale(1);opacity:1} 20%{opacity:1} 100%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(0);opacity:0} }

/* Magic hint */
.magic-hint { position:relative; display:inline-flex; align-items:center; gap:10px; padding:10px 22px; background:rgba(155,89,182,.07); border:1px dashed rgba(155,89,182,.35); border-radius:100px; font-size:13px; font-weight:500; font-style:italic; color:#6c757d; cursor:pointer; user-select:none; animation:magicHintFloat 3.5s ease-in-out infinite; transition:background .25s,border-color .25s,color .25s,opacity .5s; }
.magic-hint:hover { background:rgba(155,89,182,.14); border-color:rgba(155,89,182,.55); color:#0d1b4b; }
.magic-hint.dismissed { opacity:0; pointer-events:none; }
.magic-hint__ping { position:relative; width:8px; height:8px; flex-shrink:0; }
.magic-hint__ping::before,.magic-hint__ping::after { content:''; position:absolute; inset:0; border-radius:50%; }
.magic-hint__ping::before { background:#9B59B6; }
.magic-hint__ping::after  { background:rgba(155,89,182,.45); animation:magicHintPing 1.9s ease-out infinite; }
@keyframes magicHintPing { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(3.5);opacity:0} }
.magic-hint__glyph { font-style:normal; animation:magicHintGlyph 2.4s ease-in-out infinite; }
@keyframes magicHintGlyph { 0%,100%{transform:rotate(-8deg) scale(.9);opacity:.7} 50%{transform:rotate(12deg) scale(1.1);opacity:1} }
@keyframes magicHintFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ---- FAQ accordion (JS toggles .open) ---- */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .38s ease; }
.faq-item.open { background:rgba(255,255,255,.05); }
.faq-item.open .faq-question { color:#ffffff; }
.faq-item.open .faq-question i { transform:rotate(45deg); background:#FF6B35; color:#fff; border-color:#FF6B35; }
.faq-question { counter-increment:faq-counter; }
.faq-question::before { content:counter(faq-counter,decimal-leading-zero); font-size:12px; font-weight:700; letter-spacing:1px; color:#FF6B35; }

/* ---- Sticky CTA ---- */
.sticky-cta { position:fixed; bottom:28px; right:28px; z-index:500; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:100px; background:linear-gradient(135deg,#FF8C42 0%,#FF6B35 50%,#e55a22 100%); color:#fff; font-family:'Inter',sans-serif; font-size:13px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; text-decoration:none; box-shadow:0 6px 28px rgba(255,107,53,.28),0 2px 10px rgba(0,0,0,.1); opacity:0; visibility:hidden; transform:scale(0) rotate(-15deg); pointer-events:none; will-change:transform,opacity; }
.sticky-cta__face { position:relative; display:flex; align-items:center; gap:8px; padding:14px 24px; border-radius:100px; overflow:hidden; }
.sticky-cta__face::before { content:''; position:absolute; top:-50%; left:-75%; width:40%; height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-12deg); animation:stickyCTAShimmer 2.8s ease-in-out infinite; pointer-events:none; }
@keyframes stickyCTAShimmer { 0%{left:-75%} 55%,100%{left:125%} }
.sticky-cta__ring { position:absolute; inset:-5px; border-radius:100px; border:2px solid rgba(255,107,53,.7); opacity:0; pointer-events:none; animation:stickyCTARing 2.2s ease-in-out infinite; }
@keyframes stickyCTARing { 0%{opacity:0;transform:scale(.95)} 35%{opacity:.55} 100%{opacity:0;transform:scale(1.3)} }
.sticky-cta__spark { position:absolute; color:rgba(255,255,255,.9); pointer-events:none; animation:btnSparkle 2.4s ease-in-out infinite; }
.scs-1{width:9px;top:-5px;right:14px;animation-delay:0s}
.scs-2{width:6px;bottom:-3px;left:16px;animation-delay:1.1s}
.scs-3{width:7px;top:3px;left:5px;animation-delay:1.9s}
.sticky-cta.entering { visibility:visible; pointer-events:auto; animation:stickyCTAPoofIn .65s cubic-bezier(.18,.9,.32,1.28) forwards; }
@keyframes stickyCTAPoofIn { 0%{opacity:0;transform:scale(0) rotate(-30deg)} 55%{opacity:1;transform:scale(1.18) rotate(6deg)} 78%{transform:scale(.94) rotate(-2deg)} 100%{opacity:1;transform:scale(1) rotate(0deg)} }
.sticky-cta.shown { opacity:1; visibility:visible; transform:scale(1) rotate(0deg); pointer-events:auto; transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease; }
.sticky-cta.shown:hover { transform:scale(1.07) translateY(-2px); box-shadow:0 8px 36px rgba(255,107,53,.38),0 3px 12px rgba(0,0,0,.13); }
.sticky-cta.leaving { pointer-events:none; animation:stickyCTAPoofOut .38s cubic-bezier(.4,0,.6,1) forwards !important; }
@keyframes stickyCTAPoofOut { 0%{opacity:1;transform:scale(1) rotate(0deg);visibility:visible} 35%{transform:scale(1.2) rotate(12deg)} 100%{opacity:0;transform:scale(0) rotate(-25deg);visibility:hidden} }
.sticky-cta-particle { position:fixed; pointer-events:none; z-index:9999; font-size:var(--sz,12px); line-height:1; transform-origin:center; animation:stickyParticle var(--dur,.8s) ease-out forwards; }
@keyframes stickyParticle { 0%{transform:translate(0,0) scale(1);opacity:1} 20%{opacity:1} 100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0} }

@media (max-width:768px) {
    .sticky-cta { bottom:18px; right:16px; font-size:11px; letter-spacing:1.4px; }
    .sticky-cta__face { padding:12px 18px; gap:6px; }
    .magic-bubble { width:280px; height:280px; padding:36px; }
    #magicText { font-size:24px; }
}
@media (max-width:480px) {
    .magic-bubble { width:220px; height:220px; padding:28px; }
    #magicText { font-size:20px; }
}

/* ---- Service page hero background ---- */
.sp-hero {
    background-color: var(--blue-darkest);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M20 16L21.5 18.5L24 20L21.5 21.5L20 24L18.5 21.5L16 20L18.5 18.5Z' fill='rgba(255,255,255,.07)'/%3E%3Ccircle cx='72' cy='8' r='1.5' fill='rgba(255,255,255,.05)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 65% 75% at 95% -5%, rgba(255,107,53,.28) 0%, rgba(255,107,53,.06) 45%, transparent 70%),
        radial-gradient(ellipse 45% 40% at -5% 100%, rgba(255,140,66,.12) 0%, transparent 60%),
        linear-gradient(148deg, #060d2e 0%, #0d1b4b 52%, #152468 100%);
    background-size: 80px 80px, 100% 100%, 100% 100%, 100% 100%;
}