/* ================= HEADER LIGHT THEME ================= */
header *, header *::before, header *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 0;
    transition: all .25s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.header-container {
    max-width: 1240px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand Logo (Icon Image + Text Image side-by-side) */
.brand-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: transform .2s ease;
}
.brand-link:hover {
    transform: scale(1.02);
}

.brand-icon {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.brand-text {
    height: 39px;
    width: auto;
    object-fit: fill;
    transform: scaleX(1.12);
    transform-origin: left center;
    margin-right: 12px;
    display: block;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
}

.desktop-nav a {
    color: #475569;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: 6px 2px;
    transition: color .2s ease;
}

.desktop-nav a:hover {
    color: #ec4899;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 2px;
    transition: width .25s ease;
}

.desktop-nav a:hover::after {
    width: 100%;
}

.header-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0f172a;
    color: #ffffff !important;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 10px 22px !important;
    border-radius: 50px;
    text-decoration: none;
    border: 1px solid #1e293b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: all .2s ease;
}

.header-cta-btn:hover {
    background: linear-gradient(135deg, #e11d48, #ec4899);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
    color: #ffffff !important;
}

.header-cta-btn::after {
    display: none !important;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all .2s ease;
}

.mobile-menu-btn:hover {
    border-color: #ec4899;
    color: #ec4899;
    background: #fdf2f8;
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: 64px;
    right: -100%;
    width: 290px;
    height: calc(100vh - 64px);
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    padding: 28px 22px;
    box-shadow: -10px 0 35px rgba(15, 23, 42, 0.08);
    transition: right .3s ease;
    z-index: 2000;
}

.mobile-drawer.active {
    right: 0;
}

.mobile-drawer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-drawer a {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all .2s ease;
}

.mobile-drawer a:hover {
    color: #db2777;
    background: #fdf2f8;
}

body.no-scroll {
    overflow: hidden;
}

@media (max-width: 860px) {
    .desktop-nav { display: none; }
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
}


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Urbanist:wght@500;600;700;800;900&display=swap');:root{--t-primary:#ec4899;--t-primary-hover:#db2777;--t-primary-gradient:linear-gradient(135deg,#f43f5e 0%,#ec4899 45%,#8b5cf6 100%);--t-primary-light:rgba(236,72,153,0.08);--t-primary-glow:0 10px 30px -5px rgba(236,72,153,0.35);--t-violet:#8b5cf6;--t-violet-dark:#7c3aed;--t-amber:#f59e0b;--t-amber-hover:#d97706;--t-amber-light:rgba(245,158,11,0.1);--t-bg-base:#f8fafc;--t-bg-surface:#ffffff;--t-bg-card:#ffffff;--t-bg-card-hover:#fafafa;--t-bg-glass:rgba(255,255,255,0.92);--t-border:#e2e8f0;--t-border-subtle:#f1f5f9;--t-border-focus:#ec4899;--t-border-glow:0 0 0 4px rgba(236,72,153,0.15);--t-text-title:#0f172a;--t-text-body:#334155;--t-text-muted:#64748b;--t-text-dim:#94a3b8;--t-shadow-sm:0 1px 2px 0 rgba(15,23,42,0.05);--t-shadow-md:0 4px 16px -2px rgba(15,23,42,0.06),0 2px 6px -1px rgba(15,23,42,0.03);--t-shadow-lg:0 12px 32px -4px rgba(15,23,42,0.08),0 4px 12px -2px rgba(15,23,42,0.04);--t-shadow-input:0 10px 30px -4px rgba(236,72,153,0.1),0 2px 10px rgba(15,23,42,0.04);--t-radius-sm:10px;--t-radius-md:16px;--t-radius-lg:24px;--t-radius-full:9999px;--t-transition:all 0.25s cubic-bezier(0.16,1,0.3,1);}body{background-color:var(--t-bg-base) !important;color:var(--t-text-body) !important;font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif !important;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;}h1,h2,h3,h4,h5,h6,.hero-title,.brand-text{font-family:'Urbanist',sans-serif !important;color:var(--t-text-title) !important;letter-spacing:-0.02em;font-weight:800;}.tingalala-bg-mesh{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;overflow:hidden;}.tingalala-bg-mesh .glow-orb-1{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:900px;height:450px;background:radial-gradient(ellipse at center,rgba(236,72,153,0.08) 0%,rgba(139,92,246,0.04) 50%,transparent 75%);filter:blur(80px);}.tingalala-bg-mesh .glow-orb-2{position:absolute;top:35%;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.05) 0%,transparent 65%);filter:blur(80px);}.tingalala-bg-mesh .glow-orb-3{position:absolute;bottom:-100px;left:-100px;width:550px;height:550px;background:radial-gradient(circle,rgba(139,92,246,0.06) 0%,transparent 65%);filter:blur(90px);}.hero{position:relative;z-index:2;padding-top:80px !important;padding-bottom:25px !important;background:transparent !important;}@media (max-width:768px){.hero{padding-top:66px !important;padding-bottom:18px !important;}}.hero-title{font-size:clamp(1.75rem,3.4vw,2.6rem) !important;font-weight:800 !important;line-height:1.2 !important;margin-bottom:10px !important;color:#0f172a !important;letter-spacing:-0.02em;}.hero-title .gradient-text{background:linear-gradient(135deg,#e11d48 0%,#ec4899 40%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.hero-subtitle{font-size:0.94rem !important;color:#64748b !important;max-width:540px;line-height:1.55 !important;margin:0 auto 16px;}.hero::before,.hero::after{display:none !important;content:none !important;pointer-events:none !important;}.hero{position:relative;z-index:5;pointer-events:auto !important;}.hero .container{position:relative;z-index:10;pointer-events:auto !important;}.hero-actions-bar,#teraboxBtnWrapper{position:relative !important;z-index:50 !important;pointer-events:auto !important;}.tingalala-install-btn,#pwaInstallBtn{cursor:pointer !important;display:inline-flex !important;align-items:center !important;gap:6px !important;background:linear-gradient(135deg,#e11d48 0%,#ec4899 100%) !important;color:#ffffff !important;border:none !important;border-radius:50px !important;padding:7px 18px !important;font-size:0.82rem !important;font-weight:700 !important;box-shadow:0 3px 10px rgba(236,72,153,0.28) !important;transition:transform 0.15s cubic-bezier(0.4,0,0.2,1),box-shadow 0.15s ease,filter 0.15s ease !important;user-select:none;-webkit-user-select:none;position:relative !important;z-index:50 !important;pointer-events:auto !important;}.tingalala-install-btn:hover,#pwaInstallBtn:hover{transform:translateY(-2px) !important;box-shadow:0 6px 16px rgba(236,72,153,0.38) !important;filter:brightness(1.05) !important;cursor:pointer !important;}.tingalala-install-btn:active,#pwaInstallBtn:active{transform:translateY(1px) scale(0.97) !important;box-shadow:0 2px 6px rgba(236,72,153,0.3) !important;filter:brightness(0.96) !important;}.tingalala-install-btn *,#pwaInstallBtn *{pointer-events:none !important;}#teraboxBtnWrapper{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;}.watch-videos-btn,#teraboxWatchBtn{display:inline-flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(135deg,#fffbeb 0%,#fef08a 20%,#facc15 60%,#eab308 100%) !important;border:1.8px solid #d97706 !important;border-radius:15px !important;padding:13px 23px !important;width:auto !important;max-width:100% !important;text-decoration:none !important;box-shadow:0 4px 18px rgba(234,88,12,0.28),0 2px 6px rgba(245,158,11,0.2),inset 0 1px 0 rgba(255,255,255,0.95) !important;transition:transform 0.15s cubic-bezier(0.4,0,0.2,1),box-shadow 0.15s ease,border-color 0.15s ease,background 0.15s ease !important;user-select:none;-webkit-user-select:none;cursor:pointer !important;position:relative !important;z-index:50 !important;pointer-events:auto !important;box-sizing:border-box !important;overflow:visible !important;}.watch-videos-btn:hover,#teraboxWatchBtn:hover{border-color:#b45309 !important;background:linear-gradient(135deg,#fef08a 0%,#fde047 35%,#eab308 80%,#ca8a04 100%) !important;transform:translateY(-2px) !important;box-shadow:0 8px 24px rgba(217,119,6,0.42),inset 0 1px 0 #ffffff !important;}.watch-videos-btn:active,#teraboxWatchBtn:active{transform:translateY(1px) scale(0.98) !important;box-shadow:0 2px 8px rgba(217,119,6,0.25) !important;background:linear-gradient(135deg,#fde047 0%,#eab308 100%) !important;}.watch-videos-btn *,#teraboxWatchBtn *{pointer-events:none !important;}.watch-btn-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0px !important;width:100%;max-width:100%;box-sizing:border-box;line-height:1 !important;}.watch-btn-top{display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.25 !important;max-width:100%;text-align:center;white-space:nowrap;}.watch-btn-top i{color:#9a3412 !important;font-size:1.22rem !important;flex-shrink:0;display:inline-block;animation:playIconPulse 1.6s ease-in-out infinite;transform-origin:center center;}@keyframes playIconPulse{0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(185,28,28,0));}50%{transform:scale(1.22);color:#c2410c !important;filter:drop-shadow(0 0 6px rgba(234,88,12,0.65));}100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(185,28,28,0));}}.watch-btn-main{font-size:1.10rem;font-weight:800;color:#713f12 !important;line-height:1.25;text-align:center;white-space:nowrap;}.watch-btn-sub{font-size:0.70rem !important;font-weight:800 !important;color:#b45309 !important;letter-spacing:0.45px !important;text-transform:uppercase !important;opacity:0.92;margin-top:2px !important;line-height:1.2 !important;text-align:center;white-space:nowrap;}.animated-flame-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:22px;vertical-align:middle;margin-left:3px;flex-shrink:0;pointer-events:none;}.flame-svg{display:block;transform-origin:50% 90%;animation:flameFlicker 1.4s ease-in-out infinite alternate;}@keyframes flameFlicker{0%{transform:scale(1) rotate(-1.5deg);filter:drop-shadow(0 0 2px rgba(249,115,22,0.45));}25%{transform:scale(1.06,0.95) rotate(1.5deg);}50%{transform:scale(0.96,1.05) rotate(-2deg);filter:drop-shadow(0 0 4px rgba(245,158,11,0.75));}75%{transform:scale(1.04,0.97) rotate(1deg);}100%{transform:scale(1.02,1.02) rotate(-0.5deg);filter:drop-shadow(0 0 3px rgba(234,88,12,0.6));}}.flame-core{animation:flameCorePulse 1.1s ease-in-out infinite alternate;}@keyframes flameCorePulse{0%{transform:scale(0.94);opacity:0.85;}100%{transform:scale(1.06);opacity:1;}}.flame-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fde047;box-shadow:0 0 4px #ea580c;pointer-events:none;opacity:0;}.spark-1{left:45%;bottom:45%;animation:sparkFly1 1.6s cubic-bezier(0.2,0.8,0.4,1) infinite;}.spark-2{left:22%;bottom:40%;animation:sparkFly2 2s cubic-bezier(0.2,0.8,0.4,1) infinite 0.45s;}.spark-3{left:68%;bottom:38%;animation:sparkFly3 1.8s cubic-bezier(0.2,0.8,0.4,1) infinite 0.9s;}@keyframes sparkFly1{0%{transform:translate(0,0) scale(1);opacity:0;}20%{opacity:0.95;}100%{transform:translate(-4px,-18px) scale(0.15);opacity:0;}}@keyframes sparkFly2{0%{transform:translate(0,0) scale(0.85);opacity:0;}20%{opacity:0.9;}100%{transform:translate(6px,-20px) scale(0.1);opacity:0;}}@keyframes sparkFly3{0%{transform:translate(0,0) scale(1);opacity:0;}25%{opacity:0.95;}100%{transform:translate(-3px,-22px) scale(0.1);opacity:0;}}@media (max-width:600px){#teraboxBtnWrapper{width:auto;max-width:100%;}.watch-videos-btn,#teraboxWatchBtn{padding:12px 18px !important;border-radius:14px !important;width:auto !important;max-width:100% !important;}.watch-btn-top{gap:7px !important;}.watch-btn-top i{font-size:1.15rem !important;}.watch-btn-main{font-size:clamp(0.90rem,3.9vw,1.02rem) !important;letter-spacing:-0.01em;}}@media (max-width:360px){.watch-videos-btn,#teraboxWatchBtn{padding:10px 14px !important;}.watch-btn-top{gap:5px !important;}.watch-btn-top i{font-size:1.05rem !important;}.watch-btn-main{font-size:0.85rem !important;}}.search-card-wrapper{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);padding:24px 26px;box-shadow:var(--t-shadow-input);position:relative;z-index:5;transition:var(--t-transition);}@media (max-width:768px){.search-card-wrapper{padding:16px 14px;}}.search-card-wrapper:focus-within{box-shadow:var(--t-shadow-input);}.search-card-header{margin-bottom:12px;}.search-card-label{font-size:0.92rem;font-weight:700;color:#0f172a;display:inline-flex;align-items:center;gap:8px;}.search-card-label i{color:#ec4899;}.search-input-box{display:flex;align-items:center;background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:12px;padding:5px 6px 5px 14px;transition:var(--t-transition);position:relative;box-shadow:none !important;}.search-input-box:focus-within{background:#ffffff;border-color:#cbd5e1 !important;box-shadow:none !important;outline:none !important;}.search-input-box .input-icon{font-size:1.1rem;color:#94a3b8;margin-right:10px;}.url-input{flex:1;background:transparent;border:none;outline:none;color:#0f172a;font-size:0.98rem;font-weight:500;padding:10px 0;font-family:inherit;min-width:0;}.url-input::placeholder{color:#94a3b8;font-size:0.92rem;}.paste-quick-btn{display:inline-flex;align-items:center;gap:6px;background:#fdf2f8;color:#db2777;border:1px solid rgba(236,72,153,0.25);border-radius:8px;padding:8px 14px;font-size:0.84rem;font-weight:700;cursor:pointer;transition:var(--t-transition);white-space:nowrap;}.paste-quick-btn:hover{background:#ec4899;color:#ffffff;border-color:#ec4899;}.download-cta-btn{width:100%;margin-top:14px;padding:13px 24px;border-radius:12px;background:linear-gradient(135deg,#e11d48 0%,#ec4899 45%,#8b5cf6 100%);color:#ffffff;font-size:1.05rem;font-weight:800;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(236,72,153,0.3);transition:var(--t-transition);position:relative;overflow:hidden;}.download-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(236,72,153,0.4);filter:brightness(1.03);}.download-cta-btn:active{transform:translateY(0);}.platform-chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center;align-items:center;}.platform-chip{width:38px;height:38px;padding:0;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;transition:var(--t-transition);cursor:pointer;text-decoration:none;}.platform-chip:hover{background:#ffffff;border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 4px 10px rgba(15,23,42,0.08);}.telegram-bot-section{position:relative;z-index:2;padding:20px 0;}.telegram-bot-bar{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--t-shadow-md);}.telegram-bot-info{display:flex;align-items:center;gap:16px;}.telegram-bot-icon-wrapper{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#0088cc 0%,#00a8e8 100%);color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 14px rgba(0,136,204,0.25);}.telegram-bot-tag{font-size:0.72rem;font-weight:800;color:#db2777;background:#fdf2f8;border:1px solid rgba(236,72,153,0.2);padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:4px;}.telegram-bot-title{color:#0f172a;font-size:1.02rem;font-weight:700;}.telegram-bot-btn{display:inline-flex;align-items:center;gap:8px;background:#0088cc;color:#ffffff !important;padding:10px 22px;border-radius:50px;font-size:0.92rem;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,136,204,0.3);transition:var(--t-transition);}.telegram-bot-btn:hover{background:#0077b5;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,136,204,0.4);}.arch-section{position:relative;z-index:2;padding:60px 0;}.arch-heading{text-align:center;margin-bottom:35px;}.arch-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;background:#fdf2f8;border:1px solid rgba(236,72,153,0.25);border-radius:20px;font-size:0.78rem;font-weight:800;color:#db2777;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;}.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}.arch-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);padding:24px 20px;text-align:left;box-shadow:var(--t-shadow-sm);transition:var(--t-transition);position:relative;overflow:hidden;}.arch-card:hover{border-color:rgba(236,72,153,0.4);transform:translateY(-3px);box-shadow:0 10px 25px -4px rgba(15,23,42,0.08);}.arch-card-icon{width:44px;height:44px;border-radius:12px;background:#fdf2f8;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px;}.arch-card-val{font-size:1.45rem;font-weight:900;color:#0f172a;font-family:'Urbanist',sans-serif;margin-bottom:4px;}.arch-card-title{font-size:0.92rem;color:#0f172a;font-weight:700;margin-bottom:4px;}.arch-card-desc{font-size:0.82rem;color:#64748b;line-height:1.5;}@media (max-width:900px){.arch-grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:550px){.arch-grid{grid-template-columns:1fr;}}.features-section{position:relative;z-index:2;padding:80px 0;}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:45px;}.feature-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);padding:32px 26px;box-shadow:var(--t-shadow-sm);transition:var(--t-transition);}.feature-card:hover{border-color:rgba(236,72,153,0.4);transform:translateY(-4px);box-shadow:var(--t-shadow-lg);}.feature-icon{width:52px;height:52px;border-radius:14px;background:#fdf2f8;color:#db2777;border:1px solid rgba(236,72,153,0.2);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:20px;transition:var(--t-transition);}.feature-card:hover .feature-icon{background:linear-gradient(135deg,#e11d48,#ec4899);color:#ffffff;transform:scale(1.05);}.feature-card h3{font-size:1.22rem;color:#0f172a;margin-bottom:10px;}.feature-card p{font-size:0.94rem;color:#475569;line-height:1.6;}.how-it-works-section{position:relative;z-index:2;padding:70px 0;background:#ffffff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;}.steps-container{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:45px;}.step-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);padding:34px 26px;position:relative;transition:var(--t-transition);}.step-card:hover{background:#ffffff;border-color:rgba(236,72,153,0.35);transform:translateY(-3px);box-shadow:var(--t-shadow-md);}.step-number-badge{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#e11d48,#ec4899);color:#ffffff;font-weight:800;font-size:1.25rem;display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 4px 12px rgba(236,72,153,0.3);}.step-card h3{font-size:1.2rem;color:#0f172a;margin-bottom:10px;}.step-card p{font-size:0.92rem;color:#64748b;line-height:1.6;}.platforms-section{position:relative;z-index:2;padding:80px 0;}.platforms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-top:40px;}.platform-box{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);padding:26px 22px;box-shadow:var(--t-shadow-sm);transition:var(--t-transition);}.platform-box:hover{border-color:#cbd5e1;transform:translateY(-3px);box-shadow:var(--t-shadow-md);}.platform-box-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}.platform-box-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:1.3rem;}.platform-box h3{font-size:1.08rem;color:#0f172a;margin:0;}.platform-box p{font-size:0.88rem;color:#64748b;line-height:1.55;margin:0;}.faq-section{position:relative;z-index:2;padding:80px 0;}.faq-list{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:14px;}.faq-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-md);overflow:hidden;transition:var(--t-transition);}.faq-card:hover{border-color:#cbd5e1;}.faq-card.active{border-color:rgba(236,72,153,0.4);box-shadow:0 4px 16px rgba(236,72,153,0.08);}.faq-question{padding:20px 24px;font-size:1.05rem;font-weight:700;color:#0f172a;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}.faq-question i{color:#94a3b8;transition:transform 0.25s ease;font-size:0.9rem;}.faq-card.active .faq-question i{transform:rotate(180deg);color:#ec4899;}.faq-answer{display:none;padding:0 24px 22px;font-size:0.95rem;color:#475569;line-height:1.65;}.faq-card.active .faq-answer{display:block;}.contact-section{position:relative;z-index:2;padding:70px 0;}.contact-card-box{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--t-radius-lg);padding:50px 30px;text-align:center;box-shadow:var(--t-shadow-md);max-width:820px;margin:0 auto;}.contact-icon-bubble{width:60px;height:60px;border-radius:18px;background:#fdf2f8;color:#db2777;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 20px;}.contact-email-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#e11d48,#ec4899);color:#ffffff !important;padding:14px 28px;border-radius:50px;font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 6px 20px rgba(236,72,153,0.35);transition:transform 0.15s cubic-bezier(0.4,0,0.2,1),box-shadow 0.15s ease;max-width:100%;box-sizing:border-box;user-select:none;}.contact-email-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(236,72,153,0.48);color:#ffffff !important;}.contact-email-btn:active{transform:translateY(1px) scale(0.98);box-shadow:0 2px 8px rgba(236,72,153,0.32);}.contact-email-label{white-space:nowrap;}.contact-email-address{word-break:break-all;}@media (max-width:768px){.contact-email-btn{padding:12px 22px;font-size:0.94rem;gap:8px;}}@media (max-width:480px){.contact-email-btn{width:100%;max-width:360px;padding:12px 14px;font-size:0.88rem;gap:6px;flex-wrap:wrap;border-radius:14px;text-align:center;}.contact-email-address{font-size:0.82rem;}}@media (max-width:360px){.contact-email-btn{padding:10px 10px;font-size:0.8rem;border-radius:12px;}.contact-email-address{font-size:0.76rem;}}.contact-pills{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px;}.contact-pill-item{font-size:0.8rem;font-weight:600;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;padding:5px 14px;border-radius:20px;}.results-section{padding:30px 0;position:relative;z-index:3;}.results-container{max-width:820px;margin:0 auto;}.media-result-card{background:#ffffff !important;border:1px solid #e2e8f0 !important;border-radius:var(--t-radius-md) !important;padding:24px !important;box-shadow:var(--t-shadow-md) !important;margin-bottom:20px;}.format-tab-btn{padding:10px 20px;border-radius:8px;font-weight:700;font-size:0.92rem;border:1px solid #e2e8f0;background:#f8fafc;color:#334155;cursor:pointer;transition:var(--t-transition);}.format-tab-btn.active{background:#ec4899 !important;color:#ffffff !important;border-color:#ec4899 !important;}.download-link-btn{display:inline-flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;color:#0f172a;font-weight:600;text-decoration:none;margin-bottom:8px;transition:var(--t-transition);}.download-link-btn:hover{background:#fdf2f8;border-color:#ec4899;color:#db2777;transform:translateX(4px);}@media (max-width:900px){.features-grid,.steps-container,.achievement-grid{grid-template-columns:1fr;}.telegram-bot-bar{flex-direction:column;text-align:center;}.telegram-bot-info{flex-direction:column;}}.url-input:focus{outline:none !important;box-shadow:none !important;border:none !important;background:transparent !important;caret-color:#0f172a !important;}.talk-strangers-btn,.talk-girls-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;max-width:270px !important;padding:9px 24px !important;font-size:0.88rem !important;font-weight:700 !important;border-radius:50px !important;box-shadow:0 4px 14px rgba(225,29,72,0.24),0 1px 3px rgba(15,23,42,0.08) !important;transition:transform 0.2s ease,box-shadow 0.2s ease !important;}.talk-strangers-btn:hover,.talk-girls-btn:hover{box-shadow:0 6px 20px rgba(225,29,72,0.32),0 2px 5px rgba(15,23,42,0.12) !important;transform:translateY(-2px) !important;}@media (max-width:480px){.talk-strangers-btn,.talk-girls-btn{max-width:240px !important;padding:8px 18px !important;font-size:0.82rem !important;}}#pwaInstallBtn,#pwaInstallBtn *{cursor:pointer !important;}.pwa-reminder-card>div:last-child{justify-content:center !important;}#pwaInstallBtn,#pwaInstallBtn *,#teraboxWatchBtn,#teraboxWatchBtn *,.watch-videos-btn,.watch-videos-btn *{cursor:pointer !important;}.desktop-nav .header-cta-btn,.header-cta-btn{padding:10px 22px !important;}.download-cta-btn.btn-loading{opacity:0.92 !important;cursor:wait !important;pointer-events:none !important;}.download-cta-btn.btn-loading i.fa-spinner{display:inline-block;animation:fa-spin 1s infinite linear;margin-right:8px;}.tingalala-results-card{max-width:820px;margin:0 auto;background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,0.06);padding:24px;position:relative;overflow:hidden;text-align:left;}@media (max-width:640px){.tingalala-results-card{padding:16px 14px;border-radius:16px;}}.media-hero-banner{display:flex;flex-direction:column;align-items:center;text-align:center;background:#f8fafc;border:1px solid #edf2f7;border-radius:16px;padding:20px 24px;margin-bottom:24px;box-shadow:0 2px 10px rgba(15,23,42,0.03);}.media-hero-thumb{width:100%;max-width:620px;aspect-ratio:16 / 9;height:auto;flex-shrink:0;border-radius:14px;overflow:hidden;position:relative;background:#000000;box-shadow:0 8px 28px rgba(15,23,42,0.16);cursor:pointer;margin:0 auto 16px auto;}@media (max-width:768px){.media-hero-banner{padding:14px 12px;}.media-hero-thumb{max-width:100%;min-height:220px;border-radius:12px;}}@media (max-width:480px){.media-hero-thumb{min-height:210px;}}.media-hero-thumb img{width:100%;height:100%;object-fit:cover;display:block;}.thumb-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.35);backdrop-filter:blur(2px);transition:all 0.2s ease;z-index:5;border-radius:10px;cursor:pointer;}.media-hero-thumb:hover .thumb-play-overlay{background:rgba(15,23,42,0.5);}.thumb-play-circle{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.95);color:#e11d48;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 4px 18px rgba(0,0,0,0.3);padding-left:3px;transition:transform 0.2s ease,background 0.2s ease;}.media-hero-thumb:hover .thumb-play-circle{transform:scale(1.12);background:#ffffff;}.media-hero-thumb .thumb-badge{position:absolute;bottom:6px;right:6px;background:rgba(15,23,42,0.85);backdrop-filter:blur(4px);color:#ffffff;font-size:0.65rem;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.4px;z-index:6;}.media-hero-details{flex:1;min-width:0;}.media-hero-title{font-size:1.05rem;font-weight:800;color:#0f172a;line-height:1.4;margin:0 0 6px 0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:'Urbanist',sans-serif;}.media-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:0.78rem;color:#64748b;font-weight:600;}.media-platform-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;color:#0f172a;font-weight:700;font-size:0.74rem;}.format-filter-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid #f1f5f9;padding-bottom:12px;overflow-x:auto;scrollbar-width:none;}.format-filter-tabs::-webkit-scrollbar{display:none;}.filter-tab-btn{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;color:#475569;border:1px solid transparent;border-radius:30px;padding:7px 16px;font-size:0.84rem;font-weight:700;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;}.filter-tab-btn:hover{background:#e2e8f0;color:#0f172a;}.filter-tab-btn.active{background:#0f172a;color:#ffffff;border-color:#0f172a;box-shadow:0 2px 8px rgba(15,23,42,0.15);}.filter-tab-btn .tab-count{background:rgba(255,255,255,0.2);padding:1px 7px;border-radius:10px;font-size:0.72rem;}.filter-tab-btn:not(.active) .tab-count{background:rgba(15,23,42,0.08);}.format-cards-grid{display:flex;flex-direction:column;gap:10px;}.format-card-row{display:flex;align-items:center;justify-content:space-between;background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 18px;transition:all 0.2s ease;gap:12px;}.format-card-row:hover{border-color:rgba(236,72,153,0.35);background:#fdf2f8;transform:translateX(2px);box-shadow:0 4px 14px rgba(15,23,42,0.04);}.format-left{display:flex;align-items:center;gap:14px;min-width:0;}.format-badge-box{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;}.format-badge-box.video{background:#eff6ff;color:#2563eb;border:1px solid rgba(37,99,235,0.15);}.format-badge-box.audio{background:#fdf2f8;color:#ec4899;border:1px solid rgba(236,72,153,0.2);}.format-info{display:flex;flex-direction:column;gap:2px;min-width:0;}.format-info-title{font-size:0.94rem;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:8px;}.format-tag-pill{font-size:0.68rem;font-weight:700;padding:1px 7px;border-radius:4px;text-transform:uppercase;}.format-tag-pill.hd{background:#ecfdf5;color:#059669;border:1px solid rgba(5,150,105,0.2);}.format-tag-pill.sd{background:#eff6ff;color:#2563eb;border:1px solid rgba(37,99,235,0.2);}.format-tag-pill.fhd{background:#f5f3ff;color:#7c3aed;border:1px solid rgba(124,58,237,0.2);}.format-tag-pill.audio-hq{background:#fdf2f8;color:#db2777;border:1px solid rgba(219,39,119,0.2);}.format-tag-pill.no-audio{background:#fff7ed;color:#c2410c;border:1px solid rgba(194,65,12,0.25);text-transform:none;font-size:0.67rem;letter-spacing:0.01em;gap:3px;display:inline-flex;align-items:center;}.format-tag-pill.no-audio i{font-size:0.65rem;}.format-info-sub{font-size:0.78rem;color:#64748b;font-weight:600;}.format-download-action{flex-shrink:0;}.format-action-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#e11d48 0%,#ec4899 100%);color:#ffffff;font-size:0.86rem;font-weight:700;padding:8px 18px;border-radius:30px;border:none;cursor:pointer;box-shadow:0 3px 10px rgba(236,72,153,0.28);transition:all 0.2s ease;}.format-action-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(236,72,153,0.42);filter:brightness(1.04);}.format-action-btn:active{transform:translateY(0);}.show-more-card{margin-top:14px;}.tingalala-expand-bar{width:100%;display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 18px;color:#0f172a;font-size:0.88rem;font-weight:700;cursor:pointer;transition:all 0.2s ease;}.tingalala-expand-bar:hover{background:#ffffff;border-color:rgba(236,72,153,0.4);box-shadow:0 4px 14px rgba(15,23,42,0.05);}.tingalala-expand-bar .expand-left{display:flex;align-items:center;gap:9px;}.tingalala-expand-bar .expand-left i{color:#ec4899;}.tingalala-expand-bar .expand-arrow{transition:transform 0.25s ease;color:#64748b;}.tingalala-expand-bar.active .expand-arrow{transform:rotate(180deg);color:#ec4899;}.extended-formats-drawer{display:none;margin-top:10px;flex-direction:column;gap:8px;}@media (max-width:640px){.format-card-row{flex-direction:column !important;align-items:stretch !important;gap:12px !important;padding:14px !important;border-radius:14px !important;}.format-left{width:100% !important;gap:12px !important;align-items:flex-start !important;}.format-info{flex:1 !important;min-width:0 !important;}.format-info-title{font-size:0.95rem !important;font-weight:800 !important;display:flex !important;align-items:center !important;justify-content:space-between !important;flex-wrap:wrap !important;gap:6px !important;}.format-info-sub{font-size:0.78rem !important;margin-top:3px !important;line-height:1.4 !important;}.format-download-action{width:100% !important;}.format-action-btn{width:100% !important;justify-content:center !important;padding:11px 18px !important;font-size:0.94rem !important;border-radius:12px !important;}}.hero-trust-bar{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,0.85);border:1px solid #e2e8f0;backdrop-filter:blur(10px);padding:6px 18px;border-radius:30px;margin-bottom:20px;box-shadow:0 2px 10px rgba(15,23,42,0.04);}.trust-chip{font-size:0.82rem;font-weight:700;color:#475569;display:inline-flex;align-items:center;gap:6px;}.trust-dot{color:#cbd5e1;font-size:0.75rem;}@media (max-width:480px){.hero-trust-bar{padding:5px 12px;gap:6px;margin-bottom:16px;}.trust-chip{font-size:0.74rem;}}.tingalala-toast-pill{animation:toastSlideIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards;}@keyframes toastSlideIn{from{opacity:0;transform:translateX(-50%) translateY(-15px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}.format-action-btn:disabled,.format-action-btn.is-buffering{opacity:0.82!important;cursor:wait!important;pointer-events:none!important;filter:brightness(0.96);box-shadow:0 2px 6px rgba(15,23,42,0.15)!important;transform:none!important;}.format-action-btn.is-buffering i.fa-spinner{display:inline-block;animation:fa-spin 1s infinite linear;}


/* ========== FOOTER CSS (LIGHT THEME) ==================================== */
footer *, footer *::before, footer *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

footer {
    background: #ffffff;
    color: #334155;
    padding: 75px 0 35px;
    border-top: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.5), rgba(139, 92, 246, 0.5), transparent);
}

.footer-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 60px;
    margin-bottom: 35px;
    position: relative;
    z-index: 2;
}

/* Brand column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: transform .2s ease;
}
.footer-logo-wrap:hover {
    transform: scale(1.02);
}

.footer-logo-icon {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-logo-text-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-desc {
    color: #64748b;
    line-height: 1.65;
    font-size: 0.94rem;
}

.footer-badge-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #db2777;
    background: #fdf2f8;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.social-icon {
    width: 42px;
    height: 42px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 1.15rem;
    transition: all .2s ease;
    text-decoration: none;
}

.social-icon:hover {
    background: #ec4899;
    color: #ffffff;
    border-color: #ec4899;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
}

/* Links grid */
.footer-links-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer-links h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #0f172a;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 2px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-links a {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s ease;
}

.footer-links a:hover {
    color: #ec4899;
    transform: translateX(3px);
}

.footer-links a i {
    font-size: 0.72rem;
    color: #ec4899;
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid #e2e8f0;
    padding-top: 25px;
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.copyright {
    color: #64748b;
    font-size: 0.88rem;
}

.copyright a {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}
.copyright a:hover {
    color: #ec4899;
}

.footer-legal-bottom {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-legal-bottom a {
    color: #64748b;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-legal-bottom a:hover {
    color: #ec4899;
}

/* Responsive */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-links-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}



/* ==========================================================================
   GOD-LEVEL CLASSY PINK THEME & LUXURY FINISHING (Tingalala.online)
   Atmospheric Glows, Micro-Interactions, Shimmer, and Glassmorphism
   ========================================================================== */

/* Page hero padding under fixed header */
.page-hero, .hero-section {
    padding-top: 85px !important;
}

/* Ambient Background Mesh Glow */
body {
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(at 10% 10%, rgba(244, 63, 94, 0.08) 0px, transparent 50%),
        radial-gradient(at 90% 15%, rgba(139, 92, 246, 0.07) 0px, transparent 50%),
        radial-gradient(at 50% 40%, rgba(236, 72, 153, 0.05) 0px, transparent 60%) !important;
    background-attachment: fixed !important;
}

/* God-Level Downloader Card Glow */
.search-card-wrapper, .exact-downloader-card {
    background: #ffffff !important;
    border: 1px solid rgba(236, 72, 153, 0.18) !important;
    box-shadow: 
        0 4px 6px -1px rgba(15, 23, 42, 0.04),
        0 12px 28px -4px rgba(236, 72, 153, 0.14),
        0 24px 50px -8px rgba(15, 23, 42, 0.07) !important;
    border-radius: 24px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.search-card-wrapper::before, .exact-downloader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #f43f5e, #ec4899 50%, #8b5cf6) !important;
    z-index: 10;
}

.search-card-wrapper:hover, .exact-downloader-card:hover {
    box-shadow: 
        0 8px 12px -2px rgba(15, 23, 42, 0.06),
        0 20px 40px -4px rgba(236, 72, 153, 0.22),
        0 30px 60px -10px rgba(15, 23, 42, 0.09) !important;
    transform: translateY(-2px);
}

/* High-End Input Box Focus Ring */
.search-input-box, .exact-input-row {
    border: 2px solid #e2e8f0 !important;
    border-radius: 50px !important;
    transition: all 0.25s ease !important;
    background: #f8fafc !important;
}

.search-input-box:focus-within, .exact-input-row:focus-within {
    border-color: #ec4899 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18), 0 10px 25px -5px rgba(236, 72, 153, 0.15) !important;
}

/* God-Level Primary CTA Download Button */
.download-cta-btn, .exact-download-btn {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 45%, #a855f7 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px -4px rgba(236, 72, 153, 0.42), 0 4px 12px rgba(168, 85, 247, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.download-cta-btn:hover, .exact-download-btn:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 14px 34px -4px rgba(236, 72, 153, 0.55), 0 6px 18px rgba(168, 85, 247, 0.35) !important;
}

.download-cta-btn:active, .exact-download-btn:active {
    transform: translateY(0) scale(0.99) !important;
}

/* Smooth Micro-Shine on Download Button */
.download-cta-btn::after, .exact-download-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 25%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.download-cta-btn:hover::after, .exact-download-btn:hover::after {
    left: 140%;
    transition: all 0.8s ease-in-out;
}

/* Platform Chips Hover Animation */
.platform-chip, .social-box {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
}

.platform-chip:hover, .social-box:hover {
    transform: translateY(-4px) scale(1.08) !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
    box-shadow: 0 8px 16px -2px rgba(236, 72, 153, 0.2) !important;
}

/* God-Level Header Polish */
header, .header {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.header-cta-btn {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.header-cta-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.5) !important;
}

/* God-Level Custom Pink Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ec4899 0%, #8b5cf6 100%);
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #db2777 0%, #7c3aed 100%);
}



/* ==========================================================================
   ULTRA LIQUID GLASSMORPHISM HEADER (God-Level Design)
   ========================================================================== */
header, .liquid-header {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.liquid-header-inner {
    pointer-events: auto !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 10px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 9999px !important;
    box-shadow: 
        0 10px 30px -5px rgba(236, 72, 153, 0.12),
        0 20px 45px -10px rgba(15, 23, 42, 0.07),
        0 2px 6px 0 rgba(15, 23, 42, 0.03),
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.95) !important;
    transition: all 0.3s ease !important;
}

.liquid-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: transform 0.25s ease !important;
}

.liquid-brand:hover {
    transform: scale(1.03) !important;
}

.liquid-brand-logo {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    filter: drop-shadow(0 2px 6px rgba(236, 72, 153, 0.22)) !important;
}


.brand-name-dot {
    display: inline-block !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 60%, #f77737 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.liquid-brand-name {
    font-family: 'Urbanist', sans-serif !important;
    font-size: 1.22rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #0f172a 20%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.liquid-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.liquid-nav-links li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.liquid-nav-item {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
}

.liquid-nav-item:hover, .liquid-nav-item.active {
    color: #ec4899 !important;
    background: rgba(236, 72, 153, 0.08) !important;
    transform: translateY(-1px) !important;
}

.liquid-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.liquid-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 9px 22px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
}

.liquid-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.5) !important;
    filter: brightness(1.05) !important;
    color: #ffffff !important;
}

.liquid-menu-btn {
    display: none !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    border-radius: 50% !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.liquid-menu-btn:hover {
    border-color: #ec4899 !important;
    color: #ec4899 !important;
    background: #fdf2f8 !important;
}

@media (max-width: 960px) {
    header, .liquid-header {
        top: 8px !important;
        padding: 0 12px !important;
    }
    .liquid-header-inner {
        padding: 8px 16px !important;
        border-radius: 20px !important;
    }
    .liquid-nav-links {
        display: none !important;
    }
    .liquid-menu-btn {
        display: flex !important;
    }
    .liquid-cta-btn {
        display: none !important;
    }
}

/* ==========================================================================
   HERO PADDING & 60% WIDTH DOWNLOADER CONTAINER
   ========================================================================== */
.hero, .hero-section {
    padding-top: 115px !important;
    padding-bottom: 35px !important;
}

@media (max-width: 768px) {
    .hero, .hero-section {
        padding-top: 90px !important;
    }
}

/* User Explicit Requirement: Paste Video & Audio URL Section 60% Width on Desktop, Expanded Max Width on Small Screens */
.hero-downloader-container {
    width: 60% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.search-card-wrapper, .exact-downloader-card {
    width: 100% !important;
    margin: 0 auto !important;
}

@media (max-width: 1024px) {
    .hero-downloader-container {
        width: 85% !important;
    }
}

@media (max-width: 768px) {
    .hero .container, .hero-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-downloader-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .search-card-wrapper, .exact-downloader-card {
        padding: 18px 14px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 480px) {
    .hero .container, .hero-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .hero-downloader-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .search-card-wrapper, .exact-downloader-card {
        padding: 16px 10px !important;
        border-radius: 18px !important;
    }
    .search-input-box, .exact-input-row {
        height: 48px !important;
        padding: 3px 4px 3px 12px !important;
    }
    .paste-quick-btn, .exact-paste-btn {
        padding: 6px 12px !important;
        font-size: 0.82rem !important;
    }
    .download-cta-btn, .exact-download-btn {
        height: 48px !important;
        font-size: 1rem !important;
        margin-top: 10px !important;
    }
    .platform-chips-row, .exact-social-icons {
        gap: 5px !important;
        margin-top: 12px !important;
    }
    .platform-chip, .social-box {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
    }
}

/* Hide Floating Arrow Button */
#scrollUpWidget, .scroll-up-widget {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



/* ==========================================================================
   INSTAGRAM PREMIUM SEMIBOLD HERO & COMPACT ZERO-GAP FINISHING
   ========================================================================== */

/* 1. Semibold Instagram-Premium Heading */
.hero-title, h1.hero-title {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important; /* Semibold requirement */
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    font-size: clamp(1.85rem, 3.8vw, 2.75rem) !important;
    margin-bottom: 6px !important;
    background: linear-gradient(135deg, #0f172a 0%, #86198f 25%, #be185d 50%, #e11d48 75%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
}

.hero-title .gradient-text {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 40%, #fb7185 75%, #fb923c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 2. Compact Tight Gaps Around Hero */
.hero, .hero-section {
    padding-top: 86px !important;
    padding-bottom: 18px !important;
}

@media (max-width: 768px) {
    .hero, .hero-section {
        padding-top: 75px !important;
        padding-bottom: 14px !important;
    }
}

.hero-subtitle {
    margin: 0 auto 8px !important;
    font-size: 0.94rem !important;
    line-height: 1.45 !important;
    color: #64748b !important;
}

.hero-actions-bar {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

/* 3. Downloader Card Compact Luxury Spacing */
.search-card-wrapper, .exact-downloader-card {
    padding: 18px 22px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.search-card-header, .card-inner-header {
    margin-bottom: 10px !important;
}

.search-input-box, .exact-input-row {
    padding: 4px 6px 4px 14px !important;
    margin-bottom: 10px !important;
}

.download-cta-btn, .exact-download-btn {
    margin-top: 8px !important;
    padding: 11px 22px !important;
    font-size: 0.98rem !important;
}

.platform-chips-row, .exact-social-icons {
    margin-top: 10px !important;
    gap: 7px !important;
}

.platform-chip, .social-box {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.15rem !important;
}

.telegram-bot-section {
    margin-top: 16px !important;
    padding: 8px 0 !important;
}



/* ==========================================================================
   VERTICAL UP & DOWN HERO STACK + 75% TELEGRAM BOT BAR
   ========================================================================== */

/* Overriding grid 1fr 1fr from styles.min.css -> FORCING VERTICAL COLUMN (UP & DOWN) */
.hero .hero-container,
.hero-section .container,
.hero-container,
.hero .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* UP: Top Title & Install Block */
.hero-header-block {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto 10px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* User Explicit Requirement: Paste Video & Audio URL Section 60% Width on Desktop, Expanded Max Width on Small Screens */
.hero-downloader-container {
    width: 60% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.search-card-wrapper, .exact-downloader-card {
    width: 100% !important;
    margin: 0 auto !important;
}

@media (max-width: 1024px) {
    .hero-downloader-container {
        width: 85% !important;
    }
}

@media (max-width: 768px) {
    .hero .container, .hero-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-downloader-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .search-card-wrapper, .exact-downloader-card {
        padding: 18px 14px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 480px) {
    .hero .container, .hero-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .hero-downloader-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .search-card-wrapper, .exact-downloader-card {
        padding: 16px 10px !important;
        border-radius: 18px !important;
    }
    .search-input-box, .exact-input-row {
        height: 48px !important;
        padding: 3px 4px 3px 12px !important;
    }
    .paste-quick-btn, .exact-paste-btn {
        padding: 6px 12px !important;
        font-size: 0.82rem !important;
    }
    .download-cta-btn, .exact-download-btn {
        height: 48px !important;
        font-size: 1rem !important;
        margin-top: 10px !important;
    }
    .platform-chips-row, .exact-social-icons {
        gap: 5px !important;
        margin-top: 12px !important;
    }
    .platform-chip, .social-box {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
    }
}

/* Telegram Bot Banner (75% on Large Screens, 100% on Other Screens, Centered) */
.telegram-bot-section, #telegramBotSection {
    width: 75% !important;
    max-width: 960px !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.telegram-bot-bar, .exact-telegram-card {
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(236, 72, 153, 0.22) !important;
    box-shadow: 0 8px 25px -4px rgba(236, 72, 153, 0.12), 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    padding: 16px 24px !important;
}

@media (max-width: 1024px) {
    .telegram-bot-section, #telegramBotSection {
        width: 100% !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 768px) {
    .telegram-bot-section, #telegramBotSection {
        width: 100% !important;
        padding: 0 10px !important;
    }
    .telegram-bot-bar, .exact-telegram-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
        padding: 16px !important;
    }
    .telegram-bot-info {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .telegram-bot-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Remove Talk to Strangers / Girls / Terabox buttons completely */
.talk-strangers-btn,
.talk-girls-btn,
.btn-talk-strangers,
#teraboxBtnWrapper,
.watch-videos-btn,
#teraboxWatchBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



/* ==========================================================================
   INSTAGRAM PREMIUM PINK BRAND TEXT & ANIMATED VERIFIED BADGE (5s ROTATION)
   ========================================================================== */

/* 1. Header Brand Name in Instagram Premium Pink Gradient */

.brand-name-dot {
    display: inline-block !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 60%, #f77737 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.liquid-brand-name {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #833ab4 0%, #c13584 25%, #e1306c 50%, #fd1d1d 75%, #f77737 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: filter 0.25s ease !important;
}

.liquid-brand:hover 
.brand-name-dot {
    display: inline-block !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 60%, #f77737 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.liquid-brand-name {
    filter: brightness(1.1) drop-shadow(0 2px 8px rgba(225, 48, 108, 0.35));
}

/* 2. Instagram Verified Badge Container */
.verified-badge-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important; /* +5px increased size (23px + 5px = 28px) */
    height: 28px !important;
    margin-left: -5px !important; /* Closer to Tingalala text */
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* 3. Rotating Rosette Badge (5 Seconds Smooth Circular Rotation on Page Load) */
.verified-badge-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transform-origin: center center !important;
    animation: rotateVerifiedBadge 5s cubic-bezier(0.25, 1, 0.4, 1) forwards !important;
    filter: drop-shadow(0 2px 5px rgba(41, 152, 251, 0.45)) !important;
}

@keyframes rotateVerifiedBadge {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(720deg); /* 2 complete smooth 360-degree spins, then gracefully rests */
    }
}

/* 4. Exact Center White Tick Icon (STATIONARY / NO ROTATION) */
.verified-tick-svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    animation: none !important; /* The checkmark tick does NOT rotate */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
}



/* ==========================================================================
   BOLD HERO HEADING WITH PINK BLURRY VIBRATION COLOR & EXPANDED TYPOGRAPHY
   ========================================================================== */

.hero-title-wrapper {
    position: relative !important;
    display: inline-block !important;
    margin: 0 auto 10px !important;
    max-width: 1050px !important;
    padding: 0 16px !important; /* Side margin / padding */
}

/* Ambient Pink Blurry Vibration Glow Behind Heading */
.hero-title-glow-vibration {
    position: absolute !important;
    inset: -14px -26px !important;
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.38) 0%, rgba(244, 63, 94, 0.24) 40%, rgba(192, 38, 211, 0.14) 65%, transparent 80%) !important;
    filter: blur(32px) !important;
    border-radius: 50px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation: pinkVibratePulse 2.6s ease-in-out infinite alternate !important;
}

@keyframes pinkVibratePulse {
    0% {
        transform: scale(0.96) translateY(0);
        opacity: 0.65;
        filter: blur(24px);
    }
    50% {
        transform: scale(1.035) translateY(-2px);
        opacity: 0.95;
        filter: blur(36px);
    }
    100% {
        transform: scale(1) translateY(1px);
        opacity: 0.8;
        filter: blur(28px);
    }
}

/* Bold Heading with Increased Font Size & Y-Axis Padding */
.hero-title, h1.hero-title {
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 850 !important; /* Bold font weight */
    font-size: clamp(2.35rem, 4.8vw, 3.6rem) !important; /* Noticeably increased font size */
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
    padding-top: 14px !important; /* Y-axis padding */
    padding-bottom: 14px !important; /* Y-axis padding */
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 10px !important; /* Side margins */
    margin-right: 10px !important; /* Side margins */
    margin-bottom: 8px !important;
    background: linear-gradient(135deg, #0f172a 0%, #701a75 25%, #be185d 50%, #e11d48 75%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    text-wrap: balance !important;
    filter: drop-shadow(0 4px 18px rgba(236, 72, 153, 0.22)) !important;
}

.hero-title .gradient-text {
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 40%, #fb7185 75%, #fb923c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 14px rgba(236, 72, 153, 0.4)) !important;
}

@media (max-width: 768px) {
    .hero-title, h1.hero-title {
        font-size: clamp(1.9rem, 7vw, 2.5rem) !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
}



/* ==========================================================================
   SMALL & SEXY ANIMATED INSTAGRAM PINK MOBILE HAMBURGER MENU (PERFECT CENTER-RIGHT)
   ========================================================================== */

@media (max-width: 960px) {
    header, .liquid-header {
        top: 10px !important;
        padding: 0 12px !important;
    }
    
    .liquid-header-inner {
        height: 56px !important;
        padding: 0 14px !important;
        border-radius: 9999px !important;
        display: flex !important;
        align-items: center !important; /* Perfect vertical centering */
        justify-content: space-between !important;
    }

    .liquid-brand {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .liquid-header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
    }

    /* Small & Sexy Animated Hamburger Button */
    .liquid-menu-btn, #mobileMenuBtn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3.5px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: auto 0 !important; /* EQUAL TOP AND BOTTOM MARGINS -> PERFECT CENTER RIGHT */
        align-self: center !important;
        border-radius: 11px !important;
        background: rgba(253, 242, 248, 0.88) !important;
        backdrop-filter: blur(14px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
        border: 1.5px solid rgba(236, 72, 153, 0.35) !important;
        box-shadow: 0 3px 12px rgba(236, 72, 153, 0.2), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        position: relative !important;
        outline: none !important;
    }

    .liquid-menu-btn:hover {
        transform: scale(1.06) !important;
        border-color: #ec4899 !important;
        box-shadow: 0 5px 16px rgba(236, 72, 153, 0.35), inset 0 1px 1.5px #ffffff !important;
        background: rgba(253, 242, 248, 0.98) !important;
    }

    .liquid-menu-btn:active {
        transform: scale(0.94) !important;
    }

    /* 3 Instagram Pink Animated Micro-Bars */
    .hamburger-bar {
        display: block !important;
        width: 17px !important;
        height: 2.2px !important;
        border-radius: 3px !important;
        background: linear-gradient(135deg, #c026d3 0%, #e11d48 45%, #ec4899 80%, #f43f5e 100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, width 0.25s ease !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }

    /* Smooth Morph into 'X' Close icon when active */
    .liquid-menu-btn.active .top-bar {
        transform: translateY(5.7px) rotate(45deg) !important;
        background: linear-gradient(135deg, #e11d48, #ec4899) !important;
    }

    .liquid-menu-btn.active .mid-bar {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .liquid-menu-btn.active .bot-bar {
        transform: translateY(-5.7px) rotate(-45deg) !important;
        background: linear-gradient(135deg, #e11d48, #ec4899) !important;
    }
}



/* ==========================================================================
   SUBTLE & ELEGANT BACKGROUND GLOW (REDUCED INTENSITY AS REQUESTED)
   ========================================================================== */

.hero-title-glow-vibration {
    position: absolute !important;
    inset: -6px -16px !important;
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.11) 0%, rgba(244, 63, 94, 0.05) 45%, transparent 70%) !important;
    filter: blur(28px) !important;
    border-radius: 40px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation: pinkVibratePulse 3.5s ease-in-out infinite alternate !important;
}

@keyframes pinkVibratePulse {
    0% {
        transform: scale(0.98);
        opacity: 0.35;
        filter: blur(24px);
    }
    100% {
        transform: scale(1.02);
        opacity: 0.55;
        filter: blur(32px);
    }
}

.hero-title, h1.hero-title {
    filter: none !important; /* Removed heavy text shadow */
}

.hero-title .gradient-text {
    filter: drop-shadow(0 1px 4px rgba(236, 72, 153, 0.2)) !important;
}



/* ==========================================================================
   AUTHENTIC APPLE IPHONE LIQUID GLASSMORPHISM (iOS Glass / Dynamic Island Aesthetic)
   ========================================================================== */

header, .liquid-header {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Apple iOS Liquid Glass Floating Pill */
.liquid-header-inner {
    pointer-events: auto !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 9px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    
    /* Authentic Apple Ultra-Translucent Frosted Acrylic */
    background: rgba(255, 255, 255, 0.64) !important;
    backdrop-filter: blur(32px) saturate(210%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(32px) saturate(210%) brightness(1.05) !important;
    
    /* Optical Beveled Crystal Glass Edges */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 9999px !important; /* Perfect Liquid Pill */
    
    /* Apple Specular Bevel Refraction & Ambient Shadows */
    box-shadow: 
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),  /* Top crystal glass highlight */
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.03),          /* Bottom refraction */
        0 14px 38px -6px rgba(15, 23, 42, 0.09),         /* Deep diffused iOS ambient shadow */
        0 4px 14px 0 rgba(236, 72, 153, 0.08) !important; /* Subtle luminous tint */
        
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Liquid Pill Hover Aura */
.liquid-header-inner:hover {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        inset 0 2px 1.5px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.02),
        0 18px 48px -8px rgba(15, 23, 42, 0.12),
        0 6px 20px 0 rgba(236, 72, 153, 0.14) !important;
}

/* Apple Droplet Navigation Items */
.liquid-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.liquid-nav-item {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 7px 16px !important;
    border-radius: 50px !important;
    border: 1px solid transparent !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
}

.liquid-nav-item:hover {
    color: #ec4899 !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-1px) !important;
}

.liquid-nav-item.active {
    color: #e11d48 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 10px rgba(236, 72, 153, 0.12), inset 0 1px 1px #ffffff !important;
}

/* Apple iOS CTA Install Button */
.liquid-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 9px 22px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.65),
        0 4px 18px rgba(236, 72, 153, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.liquid-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.85),
        0 8px 26px rgba(236, 72, 153, 0.5) !important;
    filter: brightness(1.05) !important;
}

/* ==========================================================================
   DESKTOP VS MOBILE HEADER ADAPTIVE RULES (PERFECT RESPONSIVE ALIGNMENT)
   ========================================================================== */

/* Desktop Display Defaults */
@media (min-width: 961px) {
    .liquid-menu-btn, #mobileMenuBtn, .mobile-menu-btn {
        display: none !important;
    }
    .liquid-nav-links, .desktop-nav {
        display: flex !important;
    }
    .liquid-cta-btn, #headerInstallBtn {
        display: inline-flex !important;
    }
}

/* Mobile & Tablet Header (Small Screen Responsive & Pixel-Perfect Center-Right Menu) */
@media (max-width: 960px) {
    header, .liquid-header {
        position: fixed !important;
        top: 10px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0 12px !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    .liquid-header-inner {
        pointer-events: auto !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 0 14px !important;
        border-radius: 9999px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important; /* Perfect vertical alignment */
        justify-content: space-between !important;
        background: rgba(255, 255, 255, 0.76) !important;
        backdrop-filter: blur(28px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
        border: 1px solid rgba(255, 255, 255, 0.85) !important;
        box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08), inset 0 1.5px 1px rgba(255, 255, 255, 0.95) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 1. Strictly Hide Desktop Navigation & Install Button on Small Screens */
    .liquid-nav-links, .desktop-nav,
    .liquid-cta-btn, #headerInstallBtn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* 2. Responsive Brand Logo & Text on Left */
    .liquid-brand {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .liquid-brand-logo {
        height: 32px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    
.brand-name-dot {
    display: inline-block !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 60%, #f77737 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.liquid-brand-name {
        font-size: 1.04rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }

    .verified-badge-wrapper {
        width: 25px !important;
        height: 25px !important;
        margin-left: -5px !important;
        flex-shrink: 0 !important;
    }

    .verified-badge-bg {
        width: 25px !important;
        height: 25px !important;
    }

    .verified-tick-svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* 3. Header Actions Container (Center Right) */
    .liquid-header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        height: auto !important;
    }

    /* 4. Small, Sexy & Animated Instagram Pink Hamburger Button */
    .liquid-menu-btn, #mobileMenuBtn, .mobile-menu-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3.5px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        align-self: center !important;
        border-radius: 10px !important;
        background: rgba(253, 242, 248, 0.9) !important;
        backdrop-filter: blur(14px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
        border: 1.5px solid rgba(236, 72, 153, 0.4) !important;
        box-shadow: 0 2px 10px rgba(236, 72, 153, 0.18), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        outline: none !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    .liquid-menu-btn:hover {
        transform: scale(1.05) !important;
        border-color: #ec4899 !important;
        box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3), inset 0 1px 1.5px #ffffff !important;
        background: rgba(253, 242, 248, 0.98) !important;
    }

    .liquid-menu-btn:active {
        transform: scale(0.94) !important;
    }

    /* 3 Instagram Pink Animated Micro-Bars */
    .hamburger-bar {
        display: block !important;
        width: 17px !important;
        height: 2.2px !important;
        border-radius: 3px !important;
        background: linear-gradient(135deg, #c026d3 0%, #e11d48 45%, #ec4899 80%, #f43f5e 100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, width 0.25s ease !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }

    /* Smooth Morph into 'X' Close icon when active */
    .liquid-menu-btn.active .top-bar {
        transform: translateY(5.7px) rotate(45deg) !important;
        background: linear-gradient(135deg, #e11d48, #ec4899) !important;
    }

    .liquid-menu-btn.active .mid-bar {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .liquid-menu-btn.active .bot-bar {
        transform: translateY(-5.7px) rotate(-45deg) !important;
        background: linear-gradient(135deg, #e11d48, #ec4899) !important;
    }
}

/* iOS Glass Sheet Mobile Drawer */
.mobile-drawer {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.12) !important;
}


/* Article Body & Competitor Landing Page Elements */
.page-content-section {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 10;
}
.article-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.article-body {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.75;
}
.article-body h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 2.25rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(236, 72, 153, 0.25);
    display: flex;
    align-items: center;
    gap: 12px;
}
.article-body h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #f472b6;
    margin: 1.75rem 0 0.75rem;
}
.article-body h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 1.25rem 0 0.5rem;
}
.article-body p {
    margin-bottom: 1.25rem;
    color: #94a3b8;
}
.article-body strong {
    color: #f8fafc;
    font-weight: 600;
}
.article-body a {
    color: #ec4899;
    text-decoration: underline;
    transition: color 0.2s;
}
.article-body a:hover {
    color: #f472b6;
}
.article-body ul, .article-body ol {
    margin: 1rem 0 1.5rem 1.5rem;
    color: #cbd5e1;
}
.article-body li {
    margin-bottom: 0.5rem;
}
.article-body .feature-grid, .article-body .steps-grid, .article-body .resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.75rem 0 2.5rem;
}
.article-body .feature-card, .article-body .step-card, .article-body .resource-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.article-body .feature-card:hover, .article-body .step-card:hover, .article-body .resource-card:hover {
    transform: translateY(-3px);
    border-color: rgba(236, 72, 153, 0.4);
    background: rgba(236, 72, 153, 0.04);
}
.article-body .step-number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.article-body .badge-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.3);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}
.article-body .highlight-box {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}
.article-body .comparison-table-wrapper {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
}
.article-body th {
    background: rgba(236, 72, 153, 0.12);
    color: #fff;
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.article-body td {
    padding: 12px 16px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.article-body tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* Responsive Navbar Brand Text Scaling for Small Screens */
@media (max-width: 640px) {
    .liquid-brand-name {
        font-size: 1.02rem !important;
    }
    .liquid-brand-logo {
        height: 28px !important;
        width: 28px !important;
    }
    .liquid-brand {
        gap: 6px !important;
    }
}
@media (max-width: 480px) {
    .liquid-brand-name {
        font-size: 0.94rem !important;
        letter-spacing: -0.02em !important;
    }
    .liquid-brand-logo {
        height: 26px !important;
        width: 26px !important;
    }
    .liquid-brand {
        gap: 5px !important;
    }
}
@media (max-width: 375px) {
    .liquid-brand-name {
        font-size: 0.86rem !important;
    }
    .liquid-brand-logo {
        height: 24px !important;
        width: 24px !important;
    }
}


/* ==========================================================================
   ULTRA-RESPONSIVE BLOG, ARTICLE & TABLE VIEWPORT SYSTEM
   Prevents any x-axis overflow across all mobile screens (320px - 480px+)
   ========================================================================== */

/* 1. Global Viewport Safety Shield */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
}

#main-content, .page-content-section, .hero-section, .page-hero {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 2. Article Container & Body Layout */
.article-container {
    display: block !important;
    width: 100% !important;
    max-width: 940px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.article-body, .blog-article-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    color: #334155 !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

.article-body *, .blog-article-body * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Article Headings & Text */
.article-body h1, .blog-article-body h1,
.article-body h2, .blog-article-body h2,
.article-body h3, .blog-article-body h3,
.article-body h4, .blog-article-body h4 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    line-height: 1.3 !important;
}

.article-body h2, .blog-article-body h2 {
    font-size: clamp(1.35rem, 4vw, 1.85rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 2.25rem 0 1rem !important;
    padding-bottom: 0.6rem !important;
    border-bottom: 2px solid rgba(236, 72, 153, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.article-body h3, .blog-article-body h3 {
    font-size: clamp(1.15rem, 3.2vw, 1.4rem) !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 1.75rem 0 0.75rem !important;
}

.article-body p, .blog-article-body p {
    color: #475569 !important;
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
}

.article-body a, .blog-article-body a {
    color: #ec4899 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* 4. Lists & Code Formatting */
.article-body ul, .article-body ol, 
.blog-article-body ul, .blog-article-body ol {
    margin: 1rem 0 1.5rem !important;
    padding-left: 1.4rem !important;
    color: #475569 !important;
    box-sizing: border-box !important;
}

.article-body li, .blog-article-body li {
    margin-bottom: 0.55rem !important;
    word-break: break-word !important;
    line-height: 1.65 !important;
}

.article-body code, .blog-article-body code {
    background: #f1f5f9 !important;
    color: #db2777 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.88rem !important;
    word-break: break-all !important;
    white-space: pre-wrap !important;
    display: inline-block !important;
    max-width: 100% !important;
}

.article-body pre, .blog-article-body pre {
    background: #0f172a !important;
    color: #f8fafc !important;
    padding: 16px !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: pre !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. Article Meta Badges Banner */
.article-meta-banner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.article-meta-banner span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

.article-meta-banner .badge-category {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
}

.article-meta-banner .badge-geo {
    background: #fdf2f8 !important;
    color: #db2777 !important;
    border: 1px solid rgba(219, 39, 119, 0.25) !important;
}

.article-meta-banner .badge-time {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

/* 6. Pro Creator Tip Callout */
.tip-callout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #fefce8 !important;
    border: 1px solid #fef08a !important;
    border-left: 4px solid #eab308 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin: 24px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    color: #854d0e !important;
    font-size: 0.94rem !important;
    line-height: 1.6 !important;
}

.tip-callout i {
    font-size: 1.25rem !important;
    color: #ca8a04 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* 7. Bulletproof Responsive Tables System */
.table-responsive,
.comparison-table-wrapper,
.benchmark-table-wrap,
[data-slot="table-container"],
.article-body .table-responsive,
.blog-article-body .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    margin: 1.75rem 0 !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Any standalone table without wrapper */
.article-body > table,
.blog-article-body > table,
article > table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    margin: 1.75rem 0 !important;
    box-sizing: border-box !important;
}

.article-spec-table,
.article-body table,
.blog-article-body table,
.table-responsive table {
    width: 100% !important;
    min-width: 520px !important; /* Preserves column legibility on mobile */
    border-collapse: collapse !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    background: #ffffff !important;
}

.article-spec-table th,
.article-body th,
.blog-article-body th,
.table-responsive th {
    background: #f8fafc !important;
    color: #0f172a !important;
    padding: 13px 16px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

.article-spec-table td,
.article-body td,
.blog-article-body td,
.table-responsive td {
    padding: 13px 16px !important;
    color: #475569 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    line-height: 1.55 !important;
}

.article-spec-table tr:hover td,
.article-body tr:hover td,
.blog-article-body tr:hover td,
.table-responsive tr:hover td {
    background: #fdf2f8 !important;
}

/* 8. Mobile Responsiveness Breakpoints */
@media (max-width: 768px) {
    .blog-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .blog-card {
        padding: 20px 18px !important;
    }
    .related-links-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .benchmark-section [style*="grid-template-columns"],
    .benchmark-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .tip-callout {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 14px !important;
    }
    .article-container {
        padding: 0 14px !important;
    }
    .article-body h2, .blog-article-body h2 {
        font-size: 1.45rem !important;
    }
    .article-body h3, .blog-article-body h3 {
        font-size: 1.2rem !important;
    }
    .breadcrumb {
        flex-wrap: wrap !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    .article-container {
        padding: 0 12px !important;
    }
    .exact-downloader-card, .search-card-wrapper {
        padding: 16px 12px !important;
    }
    .hero-title, .page-title {
        font-size: 1.55rem !important;
    }
}

/* ==========================================================================
   AUTHENTIC APPLE LIQUID GLASSMORPHISM MOBILE DRAWER
   Ultra-Translucent Frosted Glass with Specular Glow & Soft Bevel Edge
   ========================================================================== */
.drawer-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
    z-index: 2400 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.drawer-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-drawer {
    position: fixed !important;
    top: 68px !important;
    right: -320px !important;
    width: 290px !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: calc(100vh - 84px) !important;
    max-height: calc(100dvh - 84px) !important;
    
    /* Authentic Liquid Glass Morphic Acrylic */
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(36px) saturate(210%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(36px) saturate(210%) brightness(1.05) !important;
    
    /* Optical Beveled Liquid Glass Border & Glow */
    border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 24px !important;
    
    /* Apple Specular Bevel Refraction & Atmospheric Shadow */
    box-shadow: 
        inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.03),
        0 20px 48px -10px rgba(15, 23, 42, 0.16),
        0 8px 24px -4px rgba(236, 72, 153, 0.16) !important;
        
    padding: 20px 16px !important;
    margin-right: 12px !important;
    z-index: 2500 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transition: right 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(0.98) !important;
}

.mobile-drawer.active {
    right: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.mobile-drawer ul {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-drawer a {
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 15px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-drawer a:hover, .mobile-drawer a:active {
    color: #db2777 !important;
    background: rgba(253, 242, 248, 0.95) !important;
    border-color: rgba(236, 72, 153, 0.4) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.15) !important;
}

.liquid-menu-btn, #mobileMenuBtn {
    position: relative !important;
    z-index: 2600 !important;
}


/* Instagram Profile Hero Card Component */
.instagram-profile-hero {
    display: flex;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.04) 0%, rgba(168, 85, 247, 0.04) 100%);
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
.ig-profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 6px 20px rgba(220, 39, 67, 0.25);
}
.ig-profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    display: block;
}
.ig-verified-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #3b82f6;
    background: #fff;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ig-profile-info {
    flex: 1;
    min-width: 0;
}
.ig-profile-names {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.ig-fullname {
    font-size: 1.4rem;
    font-weight: 800;
    color: #18181b;
    margin: 0;
    letter-spacing: -0.02em;
}
.ig-handle {
    font-size: 0.95rem;
    color: #ec4899;
    font-weight: 700;
}
.ig-profile-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}
.ig-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 0.82rem;
    color: #52525b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.ig-stat-pill strong {
    color: #18181b;
    font-weight: 700;
}
.ig-stat-pill i {
    color: #a1a1aa;
    font-size: 0.75rem;
}
.ig-bio {
    font-size: 0.92rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 16px;
    white-space: pre-line;
    word-break: break-word;
}
.ig-dp-download-btn-wrap {
    margin-top: 8px;
}
.ig-dp-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ig-dp-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(236, 72, 153, 0.45);
}
@media (max-width: 640px) {
    .instagram-profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .ig-profile-names {
        justify-content: center;
    }
    .ig-profile-stats {
        justify-content: center;
    }
    .ig-dp-download-btn {
        width: 100%;
        justify-content: center;
    }
}

.ig-stat-pill.ig-stat-id {
    background: #fdf2f8;
    color: #db2777;
    border-color: #fbcfe8;
}
.search-error-card {
    animation: fadeIn 0.3s ease;
}