.nav-separator {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}
/* Hide the actual checkbox for burger menu */
.burger-menu input[type="checkbox"] {
    display: none;
}

/* Style burger menu icon */
.burger-menu span {
    display: block;
    background: #fff;
    border-radius: 10px;
    height: 7px;
    margin: 7px 0;
    width: 40px;
    transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.burger-menu span:nth-of-type(1) { width: 50%; }
.burger-menu span:nth-of-type(1),
.burger-menu span:nth-of-type(2),
.burger-menu span:nth-of-type(3) {
    width: 40px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-bar {
        width: 100%;
        background: #ffb349;
        color: #000;
        font-size: .88rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        z-index: 10;
        margin: 0;
        position: relative;
}
/* New top bar flex system */
.top-bar-inner { max-width: 1300px; margin: 0 auto; padding: 4px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.top-bar-section { display: inline-flex; align-items: center; gap: 8px; }
.top-bar-section.top-center { flex: 1 1 auto; justify-content: center; min-width: 240px; text-align: center; }
.top-bar-section.top-left,.top-bar-section.top-right { flex: 0 0 auto; }
.top-link { color:#000; font-weight:600; text-decoration:none; white-space:nowrap; }
.top-link:hover { text-decoration:underline; }
.top-message { font-weight:600; display:inline-block; max-width:100%; }
.top-cta { margin-left:10px; font-weight:700; color:#000; text-decoration:none; background:rgba(255,255,255,0.25); padding:4px 10px; border-radius:14px; transition:background .25s; }
.top-cta:hover { background:rgba(255,255,255,0.4); }
.eco-btn { background:transparent; border:0; padding:0; cursor:pointer; display:flex; align-items:center; }
.top-icon { display:block; width:30px; height:30px; object-fit:contain; }
/* Fade animation */
.fade-out { opacity:0; transition: opacity .35s ease; }
.top-message,.top-cta { transition: opacity .35s ease; }
/* Stack small screens */
@media (max-width:640px){
    .top-bar-inner { justify-content:center; }
    .top-bar-section.top-left, .top-bar-section.top-right { order:2; }
    .top-bar-section.top-center { order:1; width:100%; }
    .top-cta { margin-top:4px; }
}
/* Header Styles */
.main-header {
        background: #babef2;
        width: 100%; /* avoid 100vw scrollbar shift */
        min-height: 96px;
        display: block;
        margin: 0;
        padding: 0.55rem 0; /* vertical rhythm */
        position: relative;
        z-index: 20;
}

/* New responsive header layout */
.header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* equal space left/right keeps center truly centered */
    align-items: center;
    column-gap: clamp(12px, 4vw, 56px);
    row-gap: 8px;
    position: relative;
}

.header-left,
.header-right { display:flex; align-items:center; gap:14px; min-width:0; }
.header-left { position:relative; justify-content:flex-start; }
.header-right { justify-content:flex-end; }
.header-center { display:flex; justify-content:center; align-items:center; min-width:0; justify-self:center; }
.header-center { min-width:140px; }
.header-right, .header-left { flex-wrap:nowrap; }
.burger-menu, .header-right .cart-button, .account-button { flex-shrink:0; }

.logo-link { display:inline-flex; align-items:center; justify-content:center; }
.header-logo { max-width: clamp(120px, 22vw, 180px); width:100%; height:auto; display:block; }

/* Burger button – remove absolute positioning */
.burger-menu {
        width:48px; height:44px;
        display:flex; flex-direction:column; justify-content:center; align-items:center;
        cursor:pointer; background:transparent; border:0; padding:0;
        position:relative; /* anchor for animation only */
}
.burger-menu span { width:28px; height:3px; background:#000; margin:4px 0; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }

/* Cart button – remove absolute positioning & allow shrink */
.header-right .cart-button {
        position:relative; right:auto; top:auto; transform:none;
        display:inline-flex; align-items:center; justify-content:center;
        width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.9);
        box-shadow:0 2px 8px rgba(0,0,0,0.1); text-decoration:none; flex:0 0 auto;
}
.cart-button img { width:34px; height:34px; object-fit:contain; }

/* Clean up earlier duplicated absolute declarations */
/* unified cart-button definition handled in .header-right .cart-button block above */

/* Prevent overlap: allow wrap layout on very narrow screens */
@media (max-width: 500px) {
    /* Stack logo on second row while keeping it centered */
    .header-inner { grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "center center"; }
    .header-left { grid-area:left; }
    .header-right { grid-area:right; }
    .header-center { grid-area:center; }
    .header-logo { max-width: clamp(110px, 58vw, 180px); }
}
/* Small-screen adjustments while keeping order & visible label */
@media (max-width: 560px){
    .account-button { padding:6px 12px; }
    .account-label { display:inline; font-size:.7rem; }
}
@media (max-width: 420px){
    .header-right { flex-wrap:wrap; justify-content:flex-end; row-gap:4px; column-gap:6px; }
    .account-button { padding:6px 10px; }
    .account-label { font-size:.63rem; }
    .account-button, .header-right .cart-button, .burger-menu { height:46px; }
    .header-right .cart-button { width:50px; }
    .burger-menu { width:48px; }
}
@media (max-width: 330px){
    .account-label { font-size:.58rem; }
    .account-button { padding:5px 8px; }
    .header-inner { column-gap:10px; }
}
@media (max-width: 340px) {
    .header-inner { column-gap:10px; }
    .burger-menu { width:42px; }
    .header-right .cart-button { width:44px; height:44px; }
    .cart-button img { width:30px; height:30px; }
    .header-logo { max-width:140px; }
}

/* Desktop nav always shows (handled by script adding .open) but ensure it does not push layout */
.header-nav { top:100%; left:0; }
.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 0 8px;
    min-height: 32px;
}
/* (Old cart button absolute rules removed in favor of responsive grid layout) */
.cart-count-badge {
    position: absolute;
    right: -2px;
    top: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff4d4f;
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.slogan-container {
    text-align: center;
}
.slogan-logo.center-logo {
    max-width: 100%;
    width: 100%;
    height: 180px;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    margin-top: 15px;
    text-align: center;
    padding: 15px 0;
}
.header-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 175px;
    height: auto;
}
.header-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 8px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-radius: 10px;
    padding: 12px 10px;
    z-index: 1000;
    gap: 0.25rem;
    align-items: stretch;
    min-width: 180px;
    border: 1px solid rgba(0,0,0,0.06);
}
.burger-menu {
    align-items: center;
    width: 52px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    background: transparent;
    border: 0;
}
.burger-menu span {
    display: block;
    width: 28px;
    height: 3px;
    background: #000000;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.header-nav.open { display: flex; }
.header-nav .nav-separator { height: 1px; background: #eee; width: 100%; margin: 2px 0; }
.header-nav .nav-link { display: block; }
.burger-menu.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-menu.open span:nth-child(2) { opacity: 0; }
.burger-menu.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-sep {
    color: #b5ead7;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0 0.5rem;
    user-select: none;
    opacity: 0.7;
}
.nav-link {
    color: #000000;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 18px;
    transition: background 0.2s, color 0.2s;
}
.nav-link:hover {
    background: #ffc16b;
    color: #fff;
}

body {
    font-family: 'Segoe UI', 'Quicksand', 'Montserrat', Arial, sans-serif;
    background: url('/static/purelymaurly/hbopeningpstrnobottom.png') repeat center top, linear-gradient(135deg, #fff3ca 0%, #e0e7ff 50%, #ffe0e9 100%);
    background-size: 270px auto, 100% 100%;
    color: #444;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
.maincontainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* Cart Drawer */
.cart-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
    z-index: 2000;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 92vw;
    background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%); transition: transform .25s ease; z-index: 2001;
    display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-header { display:flex; align-items:center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
.cart-close { background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; padding: 6px; }
.cart-badge { background: #111; color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; vertical-align: middle; }
.cart-items { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #f3f3f3; padding-bottom: 10px; }
.cart-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cart-item-title { font-weight: 700; color: #222; }
.cart-item-price { color: #555; font-size: 0.95rem; }
.cart-item-qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #ddd; background: #fafafa; cursor: pointer; }
.remove-item { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #888; padding: 4px; }
.cart-empty { text-align: center; color: #666; padding: 24px 8px; }
.cart-footer { border-top: 1px solid #eee; padding: 12px 16px 16px; }
.cart-sub { display:flex; align-items:center; justify-content: space-between; font-size: 1.05rem; margin-bottom: 10px; }
.checkout-btn { width: 100%; background: #00d4aa; color: #fff; border: 0; border-radius: 10px; padding: 12px; font-weight: 700; cursor:pointer; }
.cart-note { color: #777; font-size: 0.85rem; margin-top: 8px; }

/* Shop page */
.shop-page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
.shop-title { text-align: center; font-size: 2.2rem; margin: 12px 0 4px; color: #222; }
.shop-subtitle { text-align: center; margin-bottom: 20px; color: #555; }

.shop-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
}

@media (max-width: 1024px) {
    .shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 768px) {
    .shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
    .shop-grid { grid-template-columns: 1fr; }
}

.product-card {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.06);
        overflow: hidden;
        display: flex;
        flex-direction: column;
}
.product-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.product-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.product-title { font-size: 1.05rem; color: #222; }
.product-desc { font-size: 0.9rem; color: #666; }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.price { font-weight: 700; color: #111; }
.add-to-cart {
        background: #00d4aa;
        color: #fff;
        border: 0;
        border-radius: 22px;
        padding: 8px 14px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.add-to-cart:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.add-to-cart:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }

/* Wholesale CTA */
.wholesale-cta { margin: 36px auto 12px; max-width: 1100px; padding: 0 16px; }
.wholesale-cta-inner {
    border-radius: 16px;
    background: linear-gradient(135deg, #c7ceea, #b5ead7);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
}
.wholesale-cta h2 { margin: 0 0 6px; color: #1f2937; }
.wholesale-cta p { margin: 0 0 16px; color: #374151; }
.wholesale-btn {
    display: inline-block;
    background: #111;
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
}
.wholesale-btn:hover { filter: brightness(1.05); }




.container {
    margin-top: 56px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    background: linear-gradient(45deg, #000000, #000000, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats Section */
.stats-section {
    margin: 4rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.stat-card1 {
    text-align: center;
    padding: 2rem;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(197, 206, 234, 0.15);
    border: 2px solid #000000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: -7rem;
}

.stat-card2 {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: 10rem 5rem;
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(197, 206, 234, 0.15);
    border: 2px solid rgb(0, 0, 0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: -7rem;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-card {
    text-align: center;
    padding: 2rem;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(197, 206, 234, 0.15);
    border: 2px solid #000000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}


.stat-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 32px rgba(197, 206, 234, 0.25);
}


.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #1f1d1d;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.stat-label {
    font-size: 1rem;
    color: #57645f;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}

/* Platform Section */
.platform-section {
    margin: 4rem 0;
}

.platform-card {
    background: linear-gradient(135deg, #c7ceea 0%, #b5ead7 100%);
    border-radius: 32px;
    padding: 3rem;
    border: 2px solid #ffe0e9;
    box-shadow: 0 4px 24px rgba(255, 214, 224, 0.15);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.platform-badge {
    background: linear-gradient(45deg, #ffb7b2, #b5ead7);
    color: #444;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 1rem;
}

.platform-card h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.platform-card p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.feature-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.feature-panel {
    display: none;
}

.feature-panel.active {
    display: block;
}

.feature-panel h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #b5ead7;
}

.learn-more-btn {
    background: transparent;
    border: 2px solid #c7ceea;
    color: #c7ceea;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.learn-more-btn:hover {
    background: #b5ead7;
    color: #444;
}

.platform-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.device-stack {
    position: relative;
    width: 300px;
    height: 400px;
}

.device {
    position: absolute;
    width: 200px;
    height: 300px;
    background: linear-gradient(145deg, #2a2a4a, #1a1a3a);
    border-radius: 20px;
    border: 2px solid rgba(0, 212, 170, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.device-1 {
    top: 0;
    left: 0;
    transform: rotate(-10deg);
    background: linear-gradient(145deg, #ffd6e0, #ffb7b2);
}

.device-2 {
    top: 20px;
    left: 50px;
    transform: rotate(5deg);
    background: linear-gradient(145deg, #b5ead7, #c7ceea);
}

.device-3 {
    top: 40px;
    left: 100px;
    transform: rotate(15deg);
    background: linear-gradient(145deg, #c7ceea, #ffd6e0);
}

/* Integrations Section */
.integrations-section {
    margin: 4rem 0;
    text-align: center;
}

.integrations-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.integrations-section p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.integration-card {
    background: linear-gradient(135deg, #ffe0e9 0%, #c7ceea 100%);
    border-radius: 24px;
    padding: 2rem 1rem;
    border: 2px solid #b5ead7;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.integration-card:hover {
    background: #ffd6e0;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 30px rgba(181, 234, 215, 0.2);
}

.integration-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.2rem;
    background: #b5ead7;
    box-shadow: 0 2px 8px rgba(197, 206, 234, 0.15);
}

.integration-icon.bamboo { background: linear-gradient(45deg, #c7ceea, #b5ead7); }
.integration-icon.slack { background: linear-gradient(45deg, #ffd6e0, #ffb7b2); }
.integration-icon.github { background: linear-gradient(45deg, #b5ead7, #c7ceea); }
.integration-icon.jenkins { background: linear-gradient(45deg, #ffb7b2, #ffd6e0); }
.integration-icon.azure { background: linear-gradient(45deg, #c7ceea, #b5ead7); }
.integration-icon.testcomplete { background: linear-gradient(45deg, #ffd6e0, #b5ead7); }
.integration-icon.docker { background: linear-gradient(45deg, #b5ead7, #c7ceea); }
.integration-icon.bitbucket { background: linear-gradient(45deg, #c7ceea, #ffd6e0); }

.integration-icon::before {
    content: "⚡";
    font-size: 1.5rem;
}

.cta-btn {
    background: linear-gradient(45deg, #00d4aa, #00f5ff);
    color: #1a1a2e;
    border: none;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 212, 170, 0.4);
}

/* CTA Section */
.cta-section {
    margin: 4rem 0;
}

.cta-card {
    background: linear-gradient(135deg, #b5ead7 0%, #ffd6e0 100%);
    border-radius: 32px;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    color: #444;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #1a1a2e;
}

.cta-content p {
    margin-bottom: 2rem;
    color: rgba(26, 26, 46, 0.8);
    font-size: 1.1rem;
}

.signup-btn {
    background: #ffd6e0;
    color: #444;
    border: none;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.signup-btn:hover {
    background: #b5ead7;
    transform: translateY(-2px) scale(1.03);
}

.testing-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #ffd6e0 0%, #b5ead7 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.testing-illustration::before {
    content: "✨";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
}

/* Blog Section */
.blog-section {
    margin: 4rem 0;
}

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.blog-header h2 {
    font-size: 2.5rem;
}

.rss-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rss-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

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

.blog-card {
    background: linear-gradient(135deg, #ffe0e9 0%, #c7ceea 100%);
    border-radius: 24px;
    padding: 2rem;
    border: 2px solid #b5ead7;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-card:hover {
    background: #ffd6e0;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 30px rgba(181, 234, 215, 0.2);
}

.blog-tag {
    background: #b5ead7;
    color: #444;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
}

.blog-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.learn-more {
    background: transparent;
    border: 2px solid #c7ceea;
    color: #c7ceea;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.learn-more:hover {
    border-color: #b5ead7;
    color: #b5ead7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .platform-card,
    .cta-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .integrations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-tabs {
        justify-content: center;
    }
    
    .tab-btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .integrations-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ===================== AUTH / ACCOUNT ===================== */
.account-button {
        position:relative;
        display:inline-flex; align-items:center; gap:6px;
        background:rgba(255,255,255,0.9); border:0; cursor:pointer;
        padding:8px 14px 8px 10px; border-radius:30px; font-weight:600; font-size:.85rem;
        line-height:1; color:#111; box-shadow:0 2px 8px rgba(0,0,0,0.12);
        transition:background .25s ease, box-shadow .25s ease, transform .25s ease; font-family:inherit;
}
.account-button:hover { background:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.18); }
.account-button:active { transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.account-icon { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; background:#f2f2f2; color:#111; }
.account-label { white-space:nowrap; }

/* Overlay */
.auth-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:2100; }
.auth-overlay.open { opacity:1; pointer-events:auto; }

/* Modal */
.auth-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:40px 16px; z-index:2101; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.auth-modal.open { opacity:1; transform:translateY(0); pointer-events:auto; }
.auth-modal-inner { width:100%; max-width:420px; background:#ffffff; border-radius:28px; padding:26px 26px 30px; box-shadow:0 20px 48px -12px rgba(0,0,0,0.35); position:relative; border:1px solid rgba(0,0,0,0.05); display:flex; flex-direction:column; }
.auth-close { position:absolute; top:10px; right:10px; background:transparent; border:0; font-size:28px; cursor:pointer; line-height:1; color:#555; padding:4px 8px; border-radius:8px; }
.auth-close:hover { background:#f1f1f1; }

/* Tabs */
.auth-tabs { display:flex; gap:6px; background:#f3f4f6; padding:4px; border-radius:14px; margin:0 0 18px; }
.auth-tab { flex:1 1 0; background:transparent; border:0; padding:10px 4px; cursor:pointer; border-radius:10px; font-weight:600; font-size:.9rem; color:#555; transition:background .25s ease, color .25s ease; }
.auth-tab.active { background:#fff; color:#111; box-shadow:0 2px 6px rgba(0,0,0,0.08); }

/* Panels */
.auth-panels { position:relative; }
.auth-panel { display:none; animation:fadeSlide .35s ease; }
.auth-panel.active { display:block; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }

.auth-title { margin:0 0 14px; font-size:1.6rem; font-weight:700; color:#111; text-align:center; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-field { display:flex; flex-direction:column; gap:6px; font-size:.8rem; font-weight:600; color:#333; }
.auth-field input { width:100%; padding:12px 14px; border:1px solid #d4d7dd; border-radius:14px; font:inherit; background:#fafafa; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.auth-field input:focus { outline:none; border-color:#ffc16b; background:#fff; box-shadow:0 0 0 1px #ffc16b; }
.auth-submit { width:100%; border:0; background:#babef2; color:#fff; font-weight:700; padding:14px 16px; border-radius:16px; font-size:1rem; cursor:pointer; box-shadow:0 6px 18px -4px rgba(0,0,0,0.25); transition:background .25s ease, transform .25s ease, box-shadow .25s ease; }
.auth-submit:hover { background:#8a94ff; transform:translateY(-2px); box-shadow:0 10px 28px -6px rgba(0,0,0,0.35); }
.auth-submit:active { transform:translateY(0); }
.auth-switch { margin:6px 0 0; font-size:.8rem; text-align:center; color:#555; }
.inline-switch { background:transparent; border:0; color:#ffc16b; cursor:pointer; font-weight:600; text-decoration:underline; padding:0 2px; }
.inline-switch:hover { color:#ffc16b; }

/* Success / state messages */
.auth-message { margin-top:4px; font-size:.75rem; font-weight:600; color:#d93025; }
.auth-message.success { color:#ffc16b; }

/* Logged-in pill style */
.account-button.logged-in { 
    background:linear-gradient(135deg,#111 0%,#2b2b2b 70%); 
    color:#fff; 
    box-shadow:0 4px 18px -6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset; 
    position:relative;
}
.account-button.logged-in:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.15),rgba(255,255,255,0) 60%);pointer-events:none;}
.account-button.logged-in .account-icon { 
    background:linear-gradient(135deg,#2e2e2e,#1a1a1a); 
    color:#fff; 
    box-shadow:0 0 0 1px #343434, 0 4px 10px -4px rgba(0,0,0,0.7);
    position:relative;
}
.account-button.logged-in .account-icon:after{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.account-button.logged-in { will-change:transform; }
.account-button.logged-in:hover { 
    background:linear-gradient(135deg,#181818,#303030); 
    box-shadow:0 8px 28px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 34px -12px rgba(0,0,0,0.8);
    /* Removed scale to prevent inner power icon jitter */
    transform:translateY(-2px);
}
.account-button.logged-in:active { transform:translateY(0); }
/* Stabilize logout power icon */
.account-button.logged-in .logout-dot { line-height:1; transform:translateZ(0); }
.account-button.logged-in .account-label { letter-spacing:.5px; font-weight:600; }
.account-button.logged-in .logout-dot { 
    background:#ff9a1f; /* more vibrant base */
    color:#222; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
    transition:background .25s ease, box-shadow .25s ease, transform .25s ease; 
}
.account-button.logged-in .logout-dot:hover { 
    background:#ffa933; 
    box-shadow:0 0 0 2px rgba(255,174,70,0.55), 0 4px 10px -2px rgba(0,0,0,0.5);
}
/* Parent hover subtle boost */
.account-button.logged-in:hover .logout-dot { background:#ffb63f; }

.account-button.logged-in .caret { display:inline-block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #ffbf63; margin-left:2px; opacity:.85; transition:transform .3s ease; }
.account-button.logged-in:hover .caret { transform:translateY(2px); }

@media (max-width:480px){
    .auth-modal-inner { padding:22px 20px 26px; border-radius:22px; }
    .auth-title { font-size:1.4rem; }
    .auth-field input { padding:11px 12px; }
}