:root {
    --bg-primary:#08080c;
    --bg-secondary:rgba(20, 20, 30, .6);
    --accent-primary:#ef233c;
    --accent-secondary:#d90429;
    --text-primary:#f8f8f8;
    --text-secondary:#c0c0d0;
    --glass-border:rgba(255, 255, 255, .08);
    --glass-shadow:0 8px 32px 0 rgba(0, 0, 0, .37);
    --font-heading:"Outfit",sans-serif;
    --font-body:"Inter",sans-serif;
    --transition-smooth:all .4s cubic-bezier(.16, 1, .3, 1)}
* {
    margin:0;
    padding:0;
    box-sizing:border-box}
html {
    scroll-behavior:smooth;
    font-size:16px}
::-webkit-scrollbar {
    width:10px}
::-webkit-scrollbar-track {
    background:var(--bg-primary)}
::-webkit-scrollbar-thumb {
    background:#ffffff1a;
    border-radius:5px;
    border:2px solid var(--bg-primary)}
::-webkit-scrollbar-thumb:hover {
    background:var(--accent-primary)}
body {
    background-color:var(--bg-primary);
    color:var(--text-primary);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
    cursor:auto}
@keyframes float {
    0% {
    transform:translateY(0) rotate(0)}
50% {
    transform:translateY(-20px) rotate(5deg)}
to {
    transform:translateY(0) rotate(0)}
}
@keyframes pulseGlow {
    0% {
    opacity:.3;
    filter:blur(100px)}
50% {
    opacity:.6;
    filter:blur(130px);
    transform:scale(1.1)}
to {
    opacity:.3;
    filter:blur(100px)}
}
@keyframes shine {
    to {
    background-position:200% center}
}
@keyframes fadeIn {
    0% {
    opacity:0;
    transform:translateY(-10px)}
to {
    opacity:1;
    transform:translateY(0)}
}
@keyframes spin {
    to {
    transform:rotate(360deg)}
}
.cursor-dot,.cursor-outline {
    position:fixed;
    top:0;
    left:0;
    transform:translate(-50%,-50%);
    border-radius:50%;
    z-index:9999;
    pointer-events:none}
.cursor-dot {
    width:8px;
    height:8px;
    background-color:var(--accent-primary)}
.cursor-outline {
    width:40px;
    height:40px;
    border:1px solid rgba(239,35,60,.5);
    transition:width .2s,height .2s,background-color .2s}
h1,h2,h3,h4,h5,h6 {
    font-family:var(--font-heading);
    font-weight:700;
    line-height:1.2}
.text-gradient {
    background:linear-gradient(to right,var(--accent-primary),#ff4d6d,var(--accent-secondary),var(--accent-primary));
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shine 4s linear infinite}
.highlight {
    background:linear-gradient(120deg,#ef233c66,#ef233c1a);
    background-repeat:no-repeat;
    background-size:100% 40%;
    background-position:0 90%;
    color:#fff;
    padding:0 .2rem;
    border-radius:4px}
.container {
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 2rem}
.section {
    padding:4rem 0;
    position:relative}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.75rem 1.5rem;
    border-radius:50px;
    font-family:var(--font-heading);
    font-weight:500;
    text-decoration:none;
    transition:var(--transition-smooth);
    cursor:pointer;
    border:none;
    outline:0;
    position:relative;
    overflow:hidden}
.btn-primary {
    background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
    color:#fff;
    box-shadow:0 4px 15px #ef233c4d;
    z-index:1}
.btn-primary:before {
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(135deg,var(--accent-primary),#ff4d6d,var(--accent-secondary));
    z-index:-1;
    border-radius:52px;
    filter:blur(12px);
    opacity:0;
    transition:opacity .4s ease}
.btn-primary:hover:before {
    opacity:.8}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px #ef233c66;
    color:#fff}
.btn-secondary {
    background:0 0;
    color:var(--text-primary);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(10px)}
.btn-secondary:hover {
    background:#ffffff0d}
.btn-lg {
    padding:1rem 2rem;
    font-size:1.125rem}
.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:1.5rem 0;
    background:transparent;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--glass-border);
    transition:var(--transition-smooth)}
.header-container {
    display:flex;
    align-items:center;
    justify-content:space-between}
.logo {
    font-family:var(--font-heading);
    font-size:1.75rem;
    font-weight:800;
    color:var(--text-primary);
    text-decoration:none;
    letter-spacing:1px}
.logo span {
    color:var(--accent-primary)}
.nav-links {
    display:flex;
    gap:2.5rem}
.nav-link {
    color:var(--text-primary);
    text-decoration:none;
    font-family:var(--font-heading);
    font-weight:500;
    font-size:1rem;
    transition:var(--transition-smooth);
    position:relative}
.nav-link:after {
    content:"";
    position:absolute;
    bottom:-4px;
    left:0;
    width:0;
    height:2px;
    background:var(--accent-primary);
    transition:width .3s ease}
.nav-link:hover:after {
    width:100%}
.nav-link:hover {
    color:var(--accent-primary)}
.dropdown {
    position:relative;
    display:inline-block}
.dropdown-content {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background-color:var(--bg-secondary);
    min-width:250px;
    box-shadow:var(--glass-shadow);
    border:1px solid var(--glass-border);
    border-radius:12px;
    padding:1rem 0;
    z-index:1000;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    transform:translateY(10px);
    transition:var(--transition-smooth)}
.dropdown:hover .dropdown-content {
    display:block;
    opacity:1;
    transform:translateY(0)}
.dropdown-content a {
    color:var(--text-primary);
    padding:.75rem 1.5rem;
    text-decoration:none;
    display:block;
    font-family:var(--font-body);
    font-size:.95rem;
    transition:var(--transition-smooth)}
.dropdown-content a:hover {
    background-color:transparent;
    color:var(--accent-primary);
    padding-left:2rem}

/* Scrolled Header Styles (Light background, black text and links) */
.header.scrolled {
    background:rgba(255,255,255,0.95)!important;
    border-bottom:1px solid rgba(0,0,0,0.08)!important;
    box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.header.scrolled .logo {
    color:#000000!important}
.header.scrolled .nav-link {
    color:#000000!important}
.header.scrolled .nav-link:hover {
    color:#000000!important}
.header.scrolled .mobile-menu-toggle .bar {
    background-color:#000000!important}
.header.scrolled .dropdown-content {
    background-color:rgba(255,255,255,0.98)!important;
    border:1px solid rgba(0,0,0,0.08)!important}
.header.scrolled .dropdown-content a {
    color:#000000!important}
.header.scrolled .dropdown-content a:hover {
    color:#000000!important;
    background-color:transparent!important}
@media(max-width:992px){
    .header.scrolled .nav-links {
        background:rgba(255,255,255,0.98)!important;
        border-bottom:1px solid rgba(0,0,0,0.08)!important}
}
.mobile-menu-toggle {
    display:none;
    background:0 0;
    border:none;
    cursor:pointer;
    padding:.5rem}
.mobile-menu-toggle .bar {
    display:block;
    width:25px;
    height:3px;
    margin:5px auto;
    background-color:var(--text-primary);
    transition:all .3s ease}
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:5rem;
    position:relative;
    overflow:hidden}
.glow-orb {
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    z-index:0;
    opacity:.5}
.orb-1 {
    width:400px;
    height:400px;
    background:var(--accent-primary);
    top:-10%;
    left:-10%;
    animation:pulseGlow 10s ease-in-out infinite alternate,float 15s ease-in-out infinite}
.orb-2 {
    width:300px;
    height:300px;
    background:var(--accent-secondary);
    bottom:10%;
    right:-5%;
    animation:pulseGlow 12s ease-in-out infinite alternate-reverse,float 20s ease-in-out infinite reverse}
.hero-container {
    position:relative;
    z-index:1}
.hero-content {
    max-width:800px;
    text-align:left}
.badge {
    display:inline-block;
    padding:.5rem 1rem;
    background:#ef233c1a;
    border:1px solid rgba(239,35,60,.2);
    border-radius:50px;
    color:var(--accent-primary);
    font-size:.875rem;
    font-weight:500;
    margin-bottom:1.5rem;
    letter-spacing:1px;
    text-transform:uppercase}
.hero-title {
    font-size:clamp(3rem,5vw,5rem);
    margin-bottom:1.5rem}
.hero-subtitle {
    font-size:1.25rem;
    color:var(--text-secondary);
    margin-bottom:2.5rem;
    max-width:600px}
.hero-cta {
    display:flex;
    gap:1.5rem}
.section-header {
    text-align:center;
    margin-bottom:2.5rem}
.section-title {
    font-size:2.5rem;
    margin-bottom:1rem}
.section-description {
    color:var(--text-secondary);
    max-width:600px;
    margin:0 auto}
.services-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem}
.apart-card,.info-card,.service-card {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:2.5rem;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:var(--transition-smooth);
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 1px #ffffff0d,0 4px 20px #0003}
.apart-card:after,.info-card:after,.service-card:after {
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(to right,transparent,rgba(255,255,255,.03),transparent);
    transform:skew(-20deg);
    transition:.7s}
.apart-card:hover:after,.info-card:hover:after,.service-card:hover:after {
    left:150%}
.apart-card:hover,.info-card:hover,.service-card:hover {
    border-color:#ef233c66;
    transform:translateY(-8px);
    box-shadow:inset 0 1px #ffffff1a,0 15px 40px #0009,0 0 30px #ef233c26}
.service-icon {
    width:60px;
    height:60px;
    background:#ef233c1a;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-primary);
    margin-bottom:1.5rem;
    transform:translateZ(30px)}
.service-card h3 {
    font-size:1.5rem;
    margin-bottom:1rem;
    transform:translateZ(20px)}
.service-card p {
    color:var(--text-secondary);
    margin-bottom:1.5rem;
    transform:translateZ(10px)}
.service-link {
    color:var(--accent-primary);
    text-decoration:none;
    font-weight:500;
    font-family:var(--font-heading);
    transform:translateZ(20px);
    display:inline-block}
.contact-container {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center}
.info-items {
    margin-top:2rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem}
.info-item {
    display:flex;
    align-items:center;
    gap:1rem}
.info-icon {
    width:48px;
    height:48px;
    background:#ffffff0d;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-primary)}
.contact-form {
    background:var(--bg-secondary);
    padding:3rem;
    border-radius:20px;
    border:1px solid var(--glass-border);
    backdrop-filter:blur(10px)}
.form-group {
    margin-bottom:1.5rem}
.form-group input,.form-group select,.form-group textarea {
    width:100%;
    background:#0003;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    padding:1rem;
    color:var(--text-primary);
    font-family:var(--font-body);
    font-size:1rem;
    transition:var(--transition-smooth)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
    outline:0;
    border-color:var(--accent-primary);
    background:#0006}
.w-100 {
    width:100%}
.footer {
    border-top:1px solid var(--glass-border);
    padding-top:4rem;
    background:#0000004d}
.footer-content {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:3rem;
    flex-wrap:wrap;
    gap:2rem}
.footer-brand p {
    color:var(--text-secondary);
    margin-top:1rem;
    max-width:300px}
.footer-links {
    display:flex;
    gap:2rem}
.footer-links a {
    color:var(--text-secondary);
    text-decoration:none;
    transition:color .3s ease}
.footer-links a:hover {
    color:var(--accent-primary)}
.footer-bottom {
    text-align:center;
    padding:1.5rem 0;
    border-top:1px solid rgba(255,255,255,.05);
    color:var(--text-secondary);
    font-size:.875rem}
.grid-2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center}
.img-fluid {
    width:100%;
    height:auto;
    border-radius:20px;
    box-shadow:var(--glass-shadow);
    border:1px solid var(--glass-border)}
.feature-list {
    list-style:none;
    padding:0}
.feature-list li {
    position:relative;
    padding-left:2rem;
    margin-bottom:1rem;
    font-size:1.1rem;
    color:var(--text-secondary)}
.feature-list li:before {
    content:"\2713";
    position:absolute;
    left:0;
    top:2px;
    color:var(--accent-primary);
    font-weight:700;
    background:#ef233c1a;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:.8rem}
.timeline {
    position:relative;
    padding-left:2rem;
    border-left:2px solid rgba(239,35,60,.2)}
.timeline-item {
    position:relative;
    margin-bottom:2.5rem}
.timeline-item:before {
    content:"";
    position:absolute;
    left:-2.6rem;
    top:0;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-primary);
    border:4px solid var(--bg-primary)}
.service-hero {
    min-height:80vh;
    padding-top:8rem;
    display:flex;
    align-items:center}
.service-hero-title {
    font-size:clamp(1.5rem, 3vw, 3rem);
    margin-bottom:1.5rem;
    line-height:1.2}
.content-section {
    padding:4rem 0;
    position:relative}
.content-section h2 {
    font-size:2.5rem;
    margin-bottom:2rem;
    color:var(--text-primary)}
.content-section p {
    margin-bottom:1.5rem;
    font-size:1.1rem;
    color:var(--text-secondary)}
.faq-item {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:15px;
    padding:1.5rem;
    margin-bottom:1rem;
    transition:var(--transition-smooth);
    cursor:pointer}
.faq-item:hover {
    border-color:#ef233c66;
    box-shadow:0 4px 20px #0003;
    transform:translate(5px)}
.faq-item summary {
    font-family:var(--font-body);
    font-size:1.2rem;
    font-weight:600;
    color:var(--text-primary);
    outline:0;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center}
.faq-item summary::-webkit-details-marker {
    display:none}
.faq-item summary:after {
    content:"+";
    color:var(--accent-primary);
    font-size:1.5rem;
    transition:transform .3s ease}
.faq-item[open] summary:after {
    content:"\2212";
    transform:rotate(180deg)}
.faq-item p {
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid rgba(255,255,255,.05);
    color:var(--text-secondary);
    font-size:1.05rem;
    line-height:1.6;
    margin-bottom:0;
    animation:fadeIn .3s ease-in}
.cta-banner {
    background:linear-gradient(135deg,#ef233c1a,#d904290d);
    border:1px solid var(--accent-primary);
    border-radius:20px;
    padding:4rem 2rem;
    text-align:center;
    margin:2.5rem 0;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 0 20px #ef233c0d,0 10px 30px #0000004d}
.cta-banner:before {
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(239,35,60,.1) 0,transparent 50%);
    z-index:0;
    animation:spin 20s linear infinite}
.cta-banner>* {
    position:relative;
    z-index:1}
.cta-buttons {
    display:flex;
    gap:1rem;
    justify-content:center;
    margin-top:2rem;
    flex-wrap:wrap}
.service-card-alt {
    margin-bottom:3rem;
    align-items:center}
.service-card-alt h3 {
    font-size:2.2rem;
    color:var(--accent-primary);
    margin-bottom:1.5rem;
    line-height:1.2}
.apart-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
    margin-top:3rem}
.apart-card:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:var(--accent-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease}
.apart-card:hover:before {
    transform:scaleX(1)}
.apart-icon {
    font-size:4rem;
    font-weight:800;
    color:#ffffff05;
    -webkit-text-stroke:1px rgba(255,255,255,.08);
    position:absolute;
    top:1rem;
    right:1.5rem;
    line-height:1;
    transition:var(--transition-smooth)}
.apart-card:hover .apart-icon {
    color:#ef233c0d;
    -webkit-text-stroke:1px var(--accent-primary);
    transform:scale(1.1) rotate(5deg)}
.apart-card h4 {
    font-size:1.3rem;
    color:var(--text-primary);
    margin-bottom:1rem;
    position:relative;
    z-index:1}
.apart-card p {
    color:var(--text-secondary);
    font-size:1rem;
    line-height:1.6;
    margin:0;
    position:relative;
    z-index:1}
@media(max-width:992px) {
    .contact-container,.grid-2 {
    grid-template-columns:1fr;
    gap:2.5rem}
}
@media(max-width:768px) {
    .content-section,.section {
    padding:2.5rem 0}
.container {
    padding:0 1.25rem}
.nav-links {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--bg-primary);
    flex-direction:column;
    padding:2rem;
    border-bottom:1px solid var(--glass-border)}
.nav-links.active {
    display:flex}
.mobile-menu-toggle {
    display:block}
.header .btn {
    display:none}
.hero {
    padding-top:6rem}
.hero-title {
    font-size:2.5rem}
.hero-subtitle {
    font-size:1.1rem;
    margin-bottom:2rem}
.hero-content {
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center}
.hero-cta {
    flex-direction:column;
    gap:1rem}
.section-title {
    font-size:2rem}
.services-grid {
    grid-template-columns:1fr}
.footer-content {
    flex-direction:column;
    gap:2rem}
.footer-links {
    flex-direction:column;
    gap:1rem}
.btn,.hero-cta .btn {
    width:100%}
.service-hero {
    padding-top:6rem;
    min-height:auto;
    text-align:center}
.service-hero-title {
    font-size:2.5rem}
.cta-banner {
    padding:3rem 1.5rem}
.apart-grid {
    grid-template-columns:1fr}
.reverse-mobile {
    display:flex;
    flex-direction:column-reverse;
    gap:2.5rem}
.service-card-alt h3 {
    font-size:1.75rem}
}
@media(max-width:480px) {
    .hero-title {
    font-size:2rem}
.section-title {
    font-size:1.75rem}
.contact-form,.info-card,.service-card {
    padding:1.5rem}
.cta-banner h2 {
    font-size:1.75rem}
.apart-card {
    padding:1.5rem}
}
.bento-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto;
    gap:1.5rem;
    margin-top:3rem}
.bento-item {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:24px;
    padding:2.5rem;
    position:relative;
    overflow:hidden;
    transition:var(--transition-smooth);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    text-decoration:none}
.bento-item:hover {
    transform:translateY(-5px);
    border-color:var(--accent-primary);
    box-shadow:inset 0 0 20px #ef233c0d,0 10px 30px #ef233c1a}
.bento-item.large {
    grid-column:span 2;
    grid-row:span 2}
.bento-item.medium {
    grid-column:span 2;
    grid-row:span 1}
.bento-item.small {
    grid-column:span 1;
    grid-row:span 1}
.bento-icon {
    font-size:2.5rem;
    margin-bottom:1.5rem;
    color:var(--accent-primary)}
.zig-zag-container {
    display:flex;
    flex-direction:column;
    gap:4rem;
    margin-top:3rem}
.zig-zag-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center}
.zig-zag-row:nth-child(2n) .zig-zag-content {
    order:1}
.zig-zag-row:nth-child(2n) .zig-zag-visual {
    order:2}
.zig-zag-visual {
    position:relative;
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(135deg,#14141ecc,#0a0a0fe6);
    border:1px solid var(--glass-border);
    padding:3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
    text-decoration:none}
.zig-zag-visual:before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:150px;
    height:150px;
    background:var(--accent-primary);
    filter:blur(80px);
    transform:translate(-50%,-50%);
    opacity:.3;
    transition:opacity .4s ease}
.zig-zag-visual:hover:before {
    opacity:.6}
.zig-zag-number {
    font-size:8rem;
    font-weight:800;
    color:#ffffff05;
    -webkit-text-stroke:1px rgba(255,255,255,.1);
    position:absolute;
    bottom:-1rem;
    right:-1rem;
    line-height:1}
@media(max-width:992px) {
    .bento-grid {
    grid-template-columns:repeat(2,1fr)}
.zig-zag-row {
    grid-template-columns:1fr}
.zig-zag-row:nth-child(2n) .zig-zag-content,.zig-zag-row:nth-child(2n) .zig-zag-visual {
    order:unset}
}
@media(max-width:576px) {
    .bento-grid {
    grid-template-columns:1fr}
.bento-item.large,.bento-item.medium,.bento-item.small {
    grid-column:span 1;
    grid-row:span 1}
}
.contrast-container {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:4rem;
    align-items:center}
.struggle-panel {
    background:#0a0a0f99;
    border:1px solid rgba(255,255,255,.05);
    border-right:none;
    border-radius:24px 0 0 24px;
    padding:4rem 3rem;
    position:relative;
    z-index:1}
.struggle-panel:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,rgba(239,35,60,.03) 0,transparent 100%);
    border-radius:24px 0 0 24px;
    pointer-events:none}
.solution-panel {
    background:var(--bg-secondary);
    border:1px solid var(--accent-primary);
    border-radius:24px;
    padding:4rem 3rem;
    position:relative;
    z-index:2;
    box-shadow:-10px 0 40px #00000080,inset 0 0 20px #ef233c1a;
    transform:scale(1.05) translate(-20px)}
.pill-list {
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:2rem;
    margin-bottom:2rem}
.pill-item {
    background:#ffffff08;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50px;
    padding:.6rem 1.2rem;
    font-size:.95rem;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:.5rem;
    transition:var(--transition-smooth)}
.pill-item:hover {
    background:#ef233c1a;
    border-color:#ef233c4d;
    color:var(--text-primary)}
.pill-icon {
    color:#ff4d6d;
    font-size:1.1rem;
    line-height:1}
.solution-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:2rem}
.solution-item {
    display:flex;
    align-items:flex-start;
    gap:1rem}
.solution-icon {
    background:#ef233c1a;
    color:var(--accent-primary);
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.9rem;
    flex-shrink:0;
    box-shadow:0 0 10px #ef233c33}
.solution-text {
    color:var(--text-primary);
    font-weight:500;
    font-size:1.05rem;
    line-height:1.4}
@media(max-width:1200px) {
    .container {
    padding:0 1.5rem}
.bento-grid {
    grid-template-columns:repeat(2,1fr)}
.bento-item.large {
    grid-column:span 2}
}
@media(max-width:992px) {
    .nav-links {
    display:none;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#08080cfa;
    backdrop-filter:blur(20px);
    padding:2rem;
    border-bottom:1px solid var(--glass-border);
    box-shadow:0 10px 30px #00000080}
.nav-links.active {
    display:flex}
.header .btn-primary {
    display:none}
.mobile-menu-toggle {
    display:block}
.contrast-container,.grid-2 {
    grid-template-columns:1fr;
    gap:2rem}
.struggle-panel {
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.05);
    border-radius:24px 24px 0 0;
    padding:3rem 2rem}
.solution-panel {
    transform:none;
    padding:3rem 2rem;
    border-radius:0 0 24px 24px;
    box-shadow:0 10px 40px #0000004d}
.zig-zag-row {
    flex-direction:column!important;
    gap:2rem}
.zig-zag-visual {
    transform:none!important;
    margin:0 auto;
    width:100%;
    max-width:400px;
    height:250px}
.contact-container {
    grid-template-columns:1fr}
.footer-content {
    flex-direction:column}
}
@media(max-width:768px) {
    html {
    font-size:15px}
.hero-title {
    font-size:clamp(2.5rem,8vw,3.5rem)}
.section-title {
    font-size:2rem}
.hero-subtitle {
    font-size:1.1rem}
.section {
    padding:3rem 0}
.bento-grid {
    grid-template-columns:1fr}
.bento-item {
    grid-column:span 1!important}
.hero-cta {
    flex-direction:column;
    gap:1rem}
.btn-lg {
    width:100%}
.solution-list {
    grid-template-columns:1fr}
.apart-grid {
    grid-template-columns:1fr!important}
.apart-card {
    padding:2rem 1.5rem!important}
.pill-list {
    justify-content:center}
.cta-banner {
    padding:3rem 1.5rem}
}
@media(max-width:480px) {
    .hero-title {
    font-size:2.2rem}
.section-title {
    font-size:1.8rem}
.bento-item,.contact-form {
    padding:2rem 1.5rem}
.info-item {
    flex-direction:column;
    text-align:center;
    gap:.5rem}
}
@media (max-width:992px) {
    .dropdown:hover .dropdown-content {
    display:none}
.dropdown.active .dropdown-content {
    display:block;
    opacity:1}
.dropdown-content {
    position:static;
    box-shadow:none;
    background:rgba(255,255,255,.02);
    border:none;
    margin-top:1rem;
    transform:none;
    width:100%}
.case-study-card {
    grid-template-columns:1fr!important;
    gap:2rem!important}
.case-study-card>.content-col {
    order:2!important}
.case-study-card>.img-col {
    order:1!important;
    min-height:250px!important}
.mobile-stack {
    flex-direction:column!important}
}
.hero-padding {
    padding-top:clamp(8rem,15vh,150px)!important;
    padding-bottom:clamp(3rem,8vh,50px)!important}
@media (max-width:768px) {
    [style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns:1fr!important}
[style*='grid-template-columns: repeat(2, 1fr)'] {
    grid-template-columns:1fr!important}
[style*='padding-top: 150px'] {
    padding-top:clamp(6rem,15vh,100px)!important}
[style*='padding-top: 5rem'] {
    padding-top:3rem!important}
[style*='padding-top: 6rem'] {
    padding-top:3rem!important}
[style*='padding-top: 8rem'] {
    padding-top:4rem!important}
}
.premium-form input:focus,.premium-form select:focus,.premium-form textarea:focus {
    outline:0;
    border-color:var(--accent-primary)!important;
    background:rgba(255,255,255,.05)!important;
    box-shadow:0 0 15px rgba(239,35,60,.2)}
@media (max-width:992px) {
    .contact-split-grid {
    grid-template-columns:1fr!important}
}
@media (max-width:576px) {
    .premium-form>div {
    grid-template-columns:1fr!important}
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.5rem;
    margin-top:2rem}
.stat-card {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:2rem;
    text-align:center;
    transition:transform .3s ease,border-color .3s ease}
.stat-card:hover {
    transform:translateY(-5px);
    border-color:rgba(239,35,60,.3)}
.stat-number {
    font-size:2.5rem;
    color:var(--accent-primary);
    font-weight:700;
    margin-bottom:.5rem}
.stat-label {
    color:var(--text-secondary);
    font-size:1.1rem}
.ranking-table-container {
    overflow-x:auto;
    background:rgba(20,20,30,.7);
    border:1px solid rgba(255,255,255,.05);
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ranking-table {
    width:100%;
    border-collapse:collapse;
    text-align:left}
.ranking-table td,.ranking-table th {
    padding:1.5rem;
    border-bottom:1px solid rgba(255,255,255,.05)}
.ranking-table tr:last-child td {
    border-bottom:none}
.ranking-table th {
    background:rgba(255,255,255,.03);
    color:var(--text-secondary);
    font-weight:500;
    text-transform:uppercase;
    font-size:.9rem;
    letter-spacing:1px}
.ranking-table td {
    color:var(--text-primary);
    font-size:1.1rem}
.ranking-position {
    display:inline-block;
    background:rgba(239,35,60,.1);
    color:var(--accent-primary);
    padding:.5rem 1rem;
    border-radius:8px;
    font-weight:700;
    font-size:1.1rem;
    border:1px solid rgba(239,35,60,.2)}
.insight-box {
    background:linear-gradient(135deg,rgba(239,35,60,.1),rgba(0,0,0,.4));
    border-left:4px solid var(--accent-primary);
    padding:2rem;
    border-radius:0 16px 16px 0;
    margin-top:2rem}
@keyframes fadeInUpHero {
    0% {
    opacity:0;
    transform:translateY(30px)}
100% {
    opacity:1;
    transform:translateY(0)}
}
.hero-anim {
    opacity:0;
    animation:fadeInUpHero .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero-anim-1 {
    animation-delay:.1s}
.hero-anim-2 {
    animation-delay:.25s}
.hero-anim-3 {
    animation-delay:.4s}
.hero-anim-4 {
    animation-delay:.55s}

/* GLOBAL RESPONSIVE SAFETY NETS */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

img, video, iframe, svg {
    max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ULTRA-SMALL MOBILE FIXES */
@media (max-width: 400px) {
    .service-card, .info-card, .apart-card, .bento-item, .struggle-panel, .solution-panel {
        padding: 1rem;
    }
    .section, .content-section {
        padding: 2rem 0;
    }
    .hero-title {
        font-size: clamp(2rem, 10vw, 2.5rem);
    }
    .section-title {
        font-size: 1.5rem;
    }
    .contact-form {
        padding: 1.25rem;
    }
    .form-group input, .form-group select, .form-group textarea {
        padding: 0.75rem;
    }
    .btn, .hero-cta .btn, .cta-buttons .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .hero-cta {
        gap: 0.5rem;
    }
    .zig-zag-visual {
        min-height: 200px;
        padding: 1rem;
    }
    .insight-box {
        padding: 1.25rem;
    }
    .ranking-table td, .ranking-table th {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

@media(max-width:992px){.dropdown{width:100%}.dropdown-content{position:static;background:rgba(255,255,255,.05);min-width:100%;box-shadow:none;border:none;padding:.5rem 0;margin-top:.5rem;transform:none;opacity:1;display:none!important}.dropdown.active .dropdown-content{display:block!important}}

/* About Page Responsive Optimization */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.bento-item.full {
    grid-column: span 4;
}

.bento-item.tall-padding {
    padding: 4rem 2rem;
}

@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-item.full {
        grid-column: span 2;
    }
    .presence-card {
        grid-column: span 2 !important;
    }
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
    .bento-item.full {
        grid-column: span 1 !important;
    }
    .bento-item.tall-padding {
        padding: 2.5rem 1.5rem;
    }
    .presence-card {
        grid-column: span 1 !important;
    }
    .hide-mobile {
        display: none !important;
    }
    .step-arrow {
        display: none !important;
    }
    .service-hero {
        min-height: auto !important;
        padding-top: 6rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Mobile Optimization for About Us and Subpage Hero Banner */
    .hero-padding {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: clamp(6rem, 12vh, 120px) !important;
        padding-bottom: clamp(2rem, 6vh, 50px) !important;
    }
    .about-hero-title {
        font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1.2rem !important;
    }
    .about-hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }
    .bento-item {
        padding: 1.5rem !important;
    }
}

/* Global Text Justification */
p {
    text-align: justify;
    text-justify: inter-word;
}
.text-center, .text-center p, .section-header p, .text-center *, .cta-banner p, .footer p {
    text-align: center !important;
}

/* Floating Contact Widgets */
.floating-whatsapp-btn {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
    z-index: 9998;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
.floating-whatsapp-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
    color: #fff;
}
.floating-whatsapp-btn svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.floating-speed-dial {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9998;
    pointer-events: none;
}
.speed-dial-trigger {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(239, 35, 60, 0.3);
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: auto;
}
.speed-dial-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(239, 35, 60, 0.5);
}
.speed-dial-trigger svg {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.floating-speed-dial.active .speed-dial-trigger {
    transform: rotate(180deg);
    background: #222;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.floating-speed-dial.active .speed-dial-trigger svg.trigger-icon-chat {
    display: none;
}
.floating-speed-dial.active .speed-dial-trigger svg.trigger-icon-close {
    display: block;
}

.speed-dial-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.85);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}
.floating-speed-dial.active .speed-dial-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.speed-dial-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glass-shadow);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}
.speed-dial-item:hover {
    transform: translateY(-3px) scale(1.1);
    color: #fff;
}
.speed-dial-item.item-call:hover {
    background: #007aff;
    border-color: #007aff;
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}
.speed-dial-item.item-email:hover {
    background: #ff9500;
    border-color: #ff9500;
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}
.speed-dial-item.item-contact:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 6px 20px rgba(239, 35, 60, 0.4);
}
.speed-dial-item svg {
    width: 20px;
    height: 20px;
}

.speed-dial-item::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: var(--font-heading);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.speed-dial-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
    .floating-whatsapp-btn {
        bottom: 1.5rem;
        left: 1.5rem;
        width: 50px;
        height: 50px;
    }
    .floating-whatsapp-btn svg {
        width: 24px;
        height: 24px;
    }
    .floating-speed-dial {
        bottom: 1.5rem;
        right: 1.5rem;
    }
    .speed-dial-trigger {
        width: 50px;
        height: 50px;
    }
    .speed-dial-item {
        width: 42px;
        height: 42px;
    }
    .speed-dial-item svg {
        width: 18px;
        height: 18px;
    }
    .speed-dial-item::after {
        display: none;
    }
}

/* Back to Top Floating Button */
.back-to-top-btn {
    position: fixed;
    bottom: 6.5rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(239, 35, 60, 0.3);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: none;
    outline: none;
}
.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(239, 35, 60, 0.5);
    color: #fff;
}
.back-to-top-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    transition: transform 0.3s ease;
}
.back-to-top-btn:hover svg {
    transform: translateY(-3px);
}

.floating-speed-dial.active ~ .back-to-top-btn.visible {
    transform: translateY(-190px) scale(1);
}

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 5.25rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }
    .back-to-top-btn svg {
        width: 20px;
        height: 20px;
    }
    .floating-speed-dial.active ~ .back-to-top-btn.visible {
        transform: translateY(-160px) scale(1);
    }
}

/* Case Study Layouts & Mobile Optimization */
.cs-bento-item {
    background: rgba(20,20,30,0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 3rem;
}
.cs-bento-item-med {
    padding: 3rem 2rem;
}
.cs-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}
.cs-strategy-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 2.5rem;
    border-radius: 20px;
}
.cs-performance-image-container {
    background: rgba(20,20,30,0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 2rem;
    overflow: hidden;
}
.cs-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.cs-feedback-card {
    background: linear-gradient(135deg, rgba(20,20,30,0.9), rgba(10,10,15,0.9));
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 2rem;
    position: relative;
}
.cs-cta-heading {
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
}
.cs-cta-subheading {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.cs-cta-text {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    color: var(--text-secondary);
}

/* Mobile Adjustments for Case Studies (< 768px) */
@media (max-width: 768px) {
    .cs-bento-item {
        padding: 1.5rem !important;
        border-radius: 16px;
    }
    .cs-bento-item-med {
        padding: 1.5rem !important;
    }
    .cs-strategy-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    .cs-strategy-card {
        padding: 1.5rem !important;
        border-radius: 16px;
    }
    .cs-performance-image-container {
        padding: 1rem !important;
        border-radius: 16px;
        margin-bottom: 1.5rem;
    }
    .cs-results-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    .cs-feedback-card {
        padding: 1.5rem !important;
        border-radius: 16px;
        margin-bottom: 1.5rem;
    }
    .cs-cta-heading {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    .cs-cta-subheading {
        font-size: 1.35rem !important;
    }
    .cs-cta-text {
        font-size: 1.05rem !important;
        margin-bottom: 1.5rem !important;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin-top: 1.5rem !important;
    }
    .stat-card {
        padding: 1.25rem 1rem !important;
        border-radius: 12px !important;
    }
    .stat-number {
        font-size: 1.85rem !important;
    }
    .stat-label {
        font-size: 0.85rem !important;
    }
    .ranking-table td, .ranking-table th {
        padding: 0.85rem 0.5rem !important;
        font-size: 0.85rem !important;
    }
    .ranking-position {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
}

/* Responsive Case Study Section Spacings & Stacking Override */
.cs-section-hero {
    padding-top: 150px;
    padding-bottom: 50px;
}
.cs-section-strategy {
    background: rgba(0,0,0,0.3);
    padding: 5rem 0;
}
.cs-section-performance {
    padding-top: 5rem;
}
.cs-section-rankings {
    padding: 5rem 0;
}
.cs-section-results {
    background: rgba(0,0,0,0.3);
    padding: 6rem 0;
}
.cs-section-cta {
    padding-bottom: 5rem;
}

@media (max-width: 992px) {
    .cs-bento-grid-override {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .cs-strategy-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .cs-results-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .cs-section-hero {
        padding-top: clamp(6rem, 12vh, 100px) !important;
        padding-bottom: clamp(2rem, 6vh, 40px) !important;
    }
    .cs-section-strategy,
    .cs-section-performance,
    .cs-section-rankings,
    .cs-section-results,
    .cs-section-cta {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}
@media (max-width: 480px) {
    .cs-section-strategy,
    .cs-section-performance,
    .cs-section-rankings,
    .cs-section-results,
    .cs-section-cta {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Responsive Portfolio Landing Pages Card Layouts */
.cs-case-study-card {
    background: rgba(20,20,30,0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transition: all 0.4s ease;
}
.cs-card-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: center;
}
.cs-card-grid-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 992px) {
    .cs-case-study-card {
        padding: 1.5rem !important;
        border-radius: 16px;
    }
    .cs-card-grid,
    .cs-card-grid-equal {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}









/* Portfolio Category Filters */
.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto 3.5rem auto;
    flex-wrap: wrap;
    max-width: 800px;
}
.filter-btn {
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}
.filter-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 15px rgba(239, 35, 60, 0.3);
}

/* ==========================================================================
   BLOG SYSTEM STYLES (PREMIUM BLOG LISTING & DETAIL PAGE)
   ========================================================================== */

/* Blog Hero Section */
.blog-hero {
    min-height: 50vh;
    padding-top: 8rem;
    padding-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Featured Blog Card */
.featured-blog-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px #ffffff0d, 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: var(--transition-smooth);
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
}
.featured-blog-card:hover {
    border-color: rgba(239, 35, 60, 0.4);
    box-shadow: inset 0 1px #ffffff1a, 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(239, 35, 60, 0.15);
    transform: translateY(-4px);
}
.featured-blog-img-wrap {
    overflow: hidden;
    position: relative;
    min-height: 380px;
    height: 100%;
}
.featured-blog-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-blog-card:hover .featured-blog-img-wrap img {
    transform: scale(1.04);
}
.featured-blog-content {
    padding: 3rem 3rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.blog-author-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.blog-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--accent-primary);
}
.featured-blog-title {
    font-size: 2.2rem;
    margin-bottom: 1.25rem;
    line-height: 1.3;
    color: var(--text-primary);
}
.featured-blog-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.featured-blog-title a:hover {
    color: var(--accent-primary);
}
.featured-blog-excerpt {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Search and Filter Controls */
.blog-controls-section {
    margin-bottom: 3.5rem;
}
.blog-search-bar {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.blog-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 280px;
}
.blog-search-input-wrap svg {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    transition: color 0.3s ease;
}
.blog-search-input {
    width: 100%;
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.9rem 1.5rem 0.9rem 3.2rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    backdrop-filter: blur(10px);
    transition: var(--transition-smooth);
}
.blog-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(20, 20, 30, 0.95);
    box-shadow: 0 0 20px rgba(239, 35, 60, 0.2);
}
.blog-search-input:focus + svg {
    color: var(--accent-primary);
}
.blog-sort-select {
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.9rem 1.5rem;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: var(--transition-smooth);
}
.blog-sort-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Category Filter Navigation Bar */
.blog-category-nav {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 35, 60, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}
.blog-category-nav::-webkit-scrollbar {
    height: 4px;
}
.blog-category-nav::-webkit-scrollbar-thumb {
    background: rgba(239, 35, 60, 0.3);
    border-radius: 4px;
}
.category-tab {
    padding: 0.65rem 1.4rem;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: rgba(20, 20, 30, 0.6);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}
.category-tab:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-2px);
}
.category-tab.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #ffffff;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 15px rgba(239, 35, 60, 0.35);
}

/* Blog Cards Grid (Responsive: 3 col desktop, 2 col tablet, 1 col mobile) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}
.blog-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: var(--transition-smooth);
    box-shadow: inset 0 1px #ffffff0d, 0 4px 20px rgba(0, 0, 0, 0.3);
    height: 100%;
}
.blog-card:hover {
    border-color: rgba(239, 35, 60, 0.5);
    transform: translateY(-8px);
    box-shadow: inset 0 1px #ffffff1a, 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 35, 60, 0.15);
}
.blog-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    background: rgba(0,0,0,0.3);
}
.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover .blog-card-img-wrap img {
    transform: scale(1.06);
}
.blog-card-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card-title {
    font-size: 1.35rem;
    margin: 0.75rem 0 1rem 0;
    line-height: 1.35;
    color: var(--text-primary);
}
.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.blog-card-title a:hover {
    color: var(--accent-primary);
}
.blog-card-excerpt {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid var(--glass-border);
    margin-top: auto;
}
.blog-read-link {
    color: var(--accent-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition-smooth);
}
.blog-card:hover .blog-read-link {
    transform: translateX(4px);
    color: #ff4d6d;
}

/* Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 5rem;
    flex-wrap: wrap;
}
.page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 1rem;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: rgba(20, 20, 30, 0.6);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}
.page-btn:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}
.page-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #ffffff;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 15px rgba(239, 35, 60, 0.3);
}
.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Newsletter Subscription CTA Section */
.blog-newsletter-box {
    background: linear-gradient(135deg, rgba(239, 35, 60, 0.12), rgba(20, 20, 30, 0.8));
    border: 1px solid rgba(239, 35, 60, 0.3);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(239, 35, 60, 0.08);
}
.blog-newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 540px;
    margin: 2rem auto 0 auto;
    flex-wrap: wrap;
}
.blog-newsletter-input {
    flex: 1;
    min-width: 240px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 1rem 1.5rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-smooth);
}
.blog-newsletter-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(239, 35, 60, 0.3);
}

/* ==========================================================================
   BLOG ARTICLE DETAIL PAGE STYLES
   ========================================================================== */

.blog-detail-article {
    max-width: 860px;
    margin: 0 auto;
}

/* Breadcrumb */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.blog-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.blog-breadcrumb a:hover {
    color: var(--accent-primary);
}
.blog-breadcrumb span.separator {
    color: rgba(255,255,255,0.2);
}
.blog-breadcrumb span.current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Article Hero Header */
.blog-detail-header {
    margin-bottom: 2.5rem;
}
.blog-detail-title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.2;
    margin: 1.25rem 0;
    color: var(--text-primary);
}
.blog-detail-lead {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Article Featured Image Banner */
.blog-detail-banner {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    margin-bottom: 3.5rem;
    box-shadow: var(--glass-shadow);
}
.blog-detail-banner img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* Article Body Content Formatting */
.blog-detail-body {
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--text-secondary);
}
.blog-detail-body p {
    margin-bottom: 1.8rem;
}
.blog-detail-body p.lead {
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 400;
    line-height: 1.7;
}
.blog-detail-body h2 {
    font-size: 1.95rem;
    color: var(--text-primary);
    margin: 3rem 0 1.25rem 0;
    line-height: 1.3;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}
.blog-detail-body h3 {
    font-size: 1.45rem;
    color: var(--text-primary);
    margin: 2.2rem 0 1rem 0;
    line-height: 1.35;
}
.blog-detail-body ul, .blog-detail-body ol {
    margin-bottom: 2rem;
    padding-left: 1.8rem;
}
.blog-detail-body li {
    margin-bottom: 0.75rem;
}
.blog-detail-body code {
    background: rgba(239, 35, 60, 0.12);
    color: #ff4d6d;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.92em;
}

/* Quote Highlight Box */
.blog-quote-box {
    background: linear-gradient(135deg, rgba(239, 35, 60, 0.08), rgba(20, 20, 30, 0.7));
    border-left: 4px solid var(--accent-primary);
    border-radius: 0 16px 16px 0;
    padding: 2rem 2.2rem;
    margin: 2.5rem 0;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-primary);
    box-shadow: inset 0 1px #ffffff0a;
}
.blog-quote-box p {
    margin: 0;
}

/* Social Share Bar */
.blog-share-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    margin: 3.5rem 0;
    flex-wrap: wrap;
}
.blog-share-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.share-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(239, 35, 60, 0.15);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Author Bio Card */
.author-bio-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 3.5rem;
    backdrop-filter: blur(12px);
}
.author-bio-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 15px rgba(239, 35, 60, 0.3);
}
.author-bio-info h4 {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}
.author-bio-info p.role {
    color: var(--accent-primary);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}
.author-bio-info p.bio {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0;
}

/* Previous / Next Article Navigation */
.prev-next-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 5rem;
}
.prev-next-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}
.prev-next-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    background: rgba(239, 35, 60, 0.05);
}
.prev-next-label {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.prev-next-title {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive Media Queries for Blog System */
@media (max-width: 992px) {
    .featured-blog-card {
        grid-template-columns: 1fr;
    }
    .featured-blog-img-wrap {
        min-height: 280px;
    }
    .featured-blog-content {
        padding: 2rem;
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .blog-newsletter-box {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 680px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .featured-blog-title {
        font-size: 1.75rem;
    }
    .blog-search-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .blog-newsletter-form {
        flex-direction: column;
    }
    .blog-newsletter-input, .blog-newsletter-form .btn {
        width: 100%;
    }
    .prev-next-nav {
        grid-template-columns: 1fr;
    }
    .author-bio-card {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem;
    }
}

/* ==========================================================================
   Blog Single Article & Preview Unified Components System
   ========================================================================== */

/* Hero Header Layout */
.preview-hero-section {
    padding: 3rem 0 2rem 0;
    position: relative;
}

.preview-breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}
.preview-breadcrumb-nav a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.preview-breadcrumb-nav a:hover { color: var(--accent-primary); }
.preview-breadcrumb-nav .active-crumb { color: var(--accent-primary); font-weight: 600; }

.red-pill-category-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 30px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 15px rgba(239, 35, 60, 0.3);
}

.preview-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 1.25rem;
}

.preview-hero-excerpt {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 820px;
}

.preview-hero-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.author-meta-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-meta-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-primary);
}

/* Full Width Article Layout */
.preview-grid-layout {
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 2rem auto 0 auto;
}

/* Callout Box & Quote Box */
.callout-box-red {
    background: rgba(239, 35, 60, 0.06);
    border: 1px solid rgba(239, 35, 60, 0.25);
    border-radius: 20px;
    padding: 1.75rem;
    margin: 2rem 0;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.callout-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(239, 35, 60, 0.15);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.quote-box-red {
    background: rgba(239, 35, 60, 0.08);
    border-left: 5px solid var(--accent-primary);
    border-radius: 0 16px 16px 0;
    padding: 1.25rem 1.75rem;
    margin: 2rem 0;
    color: var(--text-primary);
    font-style: italic;
    font-size: 1.1rem;
}

.feature-cards-4grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2rem 0;
}

@media (max-width: 600px) {
    .feature-cards-4grid { grid-template-columns: 1fr; }
}

.feature-card-item {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.feature-card-item:hover {
    border-color: rgba(239, 35, 60, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* 5-Step Process Roadmap */
.roadmap-steps-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 2.5rem 0;
    position: relative;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.roadmap-step-node {
    text-align: center;
    flex: 1;
    min-width: 110px;
}

.roadmap-step-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 0.75rem auto;
    box-shadow: 0 0 20px rgba(239,35,60,0.4);
}

.roadmap-step-num {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* Inline CTA Banner Red */
.inline-cta-red-banner {
    background: linear-gradient(135deg, rgba(239,35,60,0.15) 0%, rgba(20,20,30,0.9) 100%);
    border: 1px solid rgba(239,35,60,0.3);
    border-radius: 20px;
    padding: 2rem;
    margin: 3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Sidebar Widgets */
.sidebar-widget-card {
    background: rgba(20, 20, 30, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.75rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(12px);
}

.sidebar-widget-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}

.related-item-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
}

.related-item-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.related-thumb {
    width: 80px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.category-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.category-list-item:hover { color: var(--accent-primary); }

.dark-rocket-cta-card {
    background: linear-gradient(135deg, #0b1120 0%, #050814 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 2.25rem 1.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* 4-Pillar Red Value Proposition Footer Bar */
.footer-pillars-bar {
    background: var(--accent-primary);
    color: #ffffff;
    padding: 2.5rem 0;
    margin-top: 5rem;
    box-shadow: 0 -10px 30px rgba(239,35,60,0.25);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.pillar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pillar-icon {
    font-size: 2rem;
    background: rgba(255,255,255,0.2);
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   Ultra Mobile Performance & LCP Acceleration Optimizations
   ========================================================================== */
@media (max-width: 768px) {
    .glow-orb, .cursor-dot, .cursor-outline {
        display: none !important;
    }
    .text-gradient {
        animation: none !important;
        background: linear-gradient(135deg, var(--accent-primary) 0%, #ff4d6d 50%, var(--accent-secondary) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    .hero {
        background: radial-gradient(circle at 50% 25%, rgba(239, 35, 60, 0.18) 0%, rgba(8, 8, 12, 1) 75%) !important;
        will-change: transform;
    }
    .apart-card, .info-card, .service-card, .bento-item, .cta-banner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(18, 18, 28, 0.95) !important;
    }
}

/* Offscreen Section Rendering Acceleration */
.content-section, footer.footer, .footer-pillars-bar, .cs-section-strategy, .cs-section-performance, .cs-section-rankings, .cs-section-results {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}