* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black-pure:        #000000;
    --black-deep:        #0A0A0A;
    --black-dark:        #141414;
    --black-medium:      #1A1A1A;
    --gray-darker:       #262626;
    --gray-dark:         #333333;
    --gray-medium:       #525252;
    --gray-light:        #737373;
    --gray-lighter:      #A3A3A3;
    --gray-lightest:     #D4D4D4;
    --gray-darkest:      #0D0D0D;
    --white-pure:        #FFFFFF;
    --accent-blue:       #89CFF0;
    --accent-blue-bright:#4FC3F7;
}

html {
    scroll-behavior: smooth;
}

/* ===================================
   SCROLL FADE-IN ANIMATIONS
=================================== */
.fade-in-section {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--black-pure);
    color: var(--white-pure);
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, .brand-name, .footer-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ===================================
   SCROLL PROGRESS
=================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue-bright), var(--accent-blue));
    z-index: 9999;
    transition: width 0.1s ease;
}

/* ===================================
   NAVIGATION
=================================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-darker);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--white-pure);
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-links a {
    color: var(--gray-lighter);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-blue);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--white-pure);
}

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

/* Hamburger Button */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 36px;
    height: 36px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white-pure);
    transition: all 0.3s ease;
    transform-origin: center;
}

.nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===================================
   SHARED CONTAINER
=================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    position: relative;
    z-index: 1;
}

/* ===================================
   HERO
=================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black-pure);
    padding: 8rem 3rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        linear-gradient(var(--gray-darker) 1px, transparent 1px),
        linear-gradient(90deg, var(--gray-darker) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0.15;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
}

.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle 600px at 15% 25%, rgba(79, 195, 247, 0.35), transparent),
        radial-gradient(circle 500px at 85% 75%, rgba(129, 212, 250, 0.3), transparent);
    animation: heroGlow 12s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.1); }
}

.hero-container {
    max-width: 900px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 900;
    line-height: 1.0;
    margin-bottom: 2rem;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #FFFFFF 0%, #A3A3A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero .tagline {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    color: var(--gray-lightest);
    max-width: 680px;
    margin: 0 auto 3rem;
    line-height: 1.75;
}

.hero-cta {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================================
   BUTTONS
=================================== */
.btn {
    padding: 1rem 2.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.35s ease;
    border: 2px solid;
    display: inline-block;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--white-pure);
    color: var(--black-pure);
    border-color: var(--white-pure);
}

.btn-primary:hover {
    background: transparent;
    color: var(--white-pure);
}

.btn-secondary {
    background: transparent;
    color: var(--white-pure);
    border-color: var(--gray-dark);
}

.btn-secondary:hover {
    background: var(--white-pure);
    color: var(--black-pure);
    border-color: var(--white-pure);
}

/* ===================================
   ABOUT
=================================== */
.about {
    background: linear-gradient(to bottom, var(--black-pure) 0%, var(--black-deep) 15%);
    padding: 7rem 0 8rem;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(79, 195, 247, 0.2), transparent 65%);
    animation: floatDiagonal 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatDiagonal {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(150px, -150px); }
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* about h2 removed */

.about-text p {
    font-size: 1.1rem;
    color: var(--gray-lightest);
    line-height: 1.9;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.stat-card {
    background: var(--black-dark);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-darker);
    text-align: center;
    transition: all 0.4s ease;
}

.stat-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-6px);
    box-shadow: 0 10px 40px rgba(79, 195, 247, 0.15);
}

.stat-number {
    font-size: 3.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-blue-bright), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.stat-slash {
    font-size: 2rem;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--gray-light);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ===================================
   EYEBROW LABEL
=================================== */
.eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray-medium);
    margin-bottom: 3rem;
    font-family: 'Lato', sans-serif;
}

/* ===================================
   BRANDS
=================================== */
.brands {
    background: var(--black-pure);
    padding: 8rem 0 6rem;
}

/* section-header removed — replaced by .eyebrow */

/* Grid: 3 cols top row, 1 full-width bottom row */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.brand-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gray-darker);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3.5rem 3rem;
    min-height: 300px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--white-pure);
}

/* Full-width coming soon tile */
.brand-tile--wide {
    grid-column: 1 / -1 !important;
    min-height: 220px;
    padding: 3rem;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    text-align: left;
}

.brand-tile--wide .brand-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.brand-tile--wide .brand-name {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0;
}

.brand-tile--wide .brand-desc {
    max-width: 500px;
    margin-bottom: 0;
}

/* Animated gradient backgrounds */
.brand-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 150%; height: 150%;
    opacity: 1;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.brand-tile::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    opacity: 1;
    z-index: 0;
    transition: opacity 0.8s ease;
}

/* Tile 1 — RealtyPulse: teal/blue */
.brand-tile:nth-child(1)::before {
    background: radial-gradient(circle at 20% 80%, rgba(0, 214, 132, 0.4), transparent 70%),
                radial-gradient(circle at 80% 20%, rgba(0, 150, 255, 0.4), transparent 70%);
    animation: float1 18s ease-in-out infinite;
}
.brand-tile:nth-child(1)::after {
    background: radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.3), transparent 50%);
    animation: rotate1 25s linear infinite;
}

/* Tile 2 — ComicBros: indigo/purple */
.brand-tile:nth-child(2)::before {
    background: radial-gradient(circle at 40% 60%, rgba(30, 58, 138, 0.5), transparent 70%),
                radial-gradient(circle at 60% 40%, rgba(88, 28, 135, 0.5), transparent 70%);
    animation: float2 22s ease-in-out infinite;
}
.brand-tile:nth-child(2)::after {
    background: radial-gradient(circle at 50% 50%, rgba(67, 56, 202, 0.4), transparent 50%);
    animation: pulse2 15s ease-in-out infinite;
}

/* Tile 3 — Web Solutions Max: blue/purple */
.brand-tile:nth-child(3)::before {
    background: radial-gradient(circle at 30% 30%, rgba(0, 150, 255, 0.4), transparent 70%),
                radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.4), transparent 70%);
    animation: float3 21s ease-in-out infinite;
}
.brand-tile:nth-child(3)::after {
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.3), transparent 50%);
    animation: pulse3 16s ease-in-out infinite;
}

/* Tile 4 — Coming Soon: subtle blue */
.brand-tile:nth-child(4)::before {
    background: radial-gradient(circle at 50% 50%, rgba(137, 207, 240, 0.2), transparent 70%),
                radial-gradient(circle at 80% 20%, rgba(79, 195, 247, 0.2), transparent 70%);
    animation: float4 17s ease-in-out infinite;
}
.brand-tile:nth-child(4)::after {
    background: radial-gradient(circle at 50% 50%, rgba(79, 195, 247, 0.15), transparent 50%);
    animation: rotate4 32s linear infinite reverse;
}

@keyframes float1  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-30px) scale(1.1)} }
@keyframes rotate1 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes float2  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-40px) scale(1.2)} }
@keyframes pulse2  { 0%,100%{transform:scale(1);opacity:.2} 50%{transform:scale(1.3);opacity:.4} }
@keyframes float3  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(25px,25px) scale(1.12)} }
@keyframes pulse3  { 0%,100%{transform:scale(1);opacity:.15} 50%{transform:scale(1.4);opacity:.3} }
@keyframes float4  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-25px,20px) scale(1.08)} }
@keyframes rotate4 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }

.brand-tile:hover {
    transform: scale(1.02);
    z-index: 10;
    border-color: var(--accent-blue);
    box-shadow: 0 20px 60px rgba(79, 195, 247, 0.2);
}

.brand-tile--wide:hover {
    transform: none;
    border-color: var(--accent-blue);
    box-shadow: 0 10px 40px rgba(79, 195, 247, 0.15);
}

.brand-content {
    position: relative;
    z-index: 1;
}

.brand-number {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-medium);
    margin-bottom: 1.75rem;
    letter-spacing: 0.3em;
}

.brand-tile--wide .brand-number {
    margin-bottom: 0;
    font-size: 0.9rem;
    white-space: nowrap;
    align-self: flex-start;
    padding-top: 0.25rem;
}

.brand-name {
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 900;
    margin-bottom: 1.1rem;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.brand-tile:hover .brand-name {
    background: linear-gradient(135deg, var(--accent-blue-bright), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-desc {
    font-size: 1rem;
    color: var(--gray-lighter);
    margin-bottom: 2rem;
    line-height: 1.75;
    max-width: 480px;
}

.brand-btn {
    padding: 0.85rem 1.85rem;
    border: 2px solid rgba(255,255,255,0.6);
    background: transparent;
    color: var(--white-pure);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.brand-btn:hover,
.brand-tile:hover .brand-btn {
    background: var(--white-pure);
    color: var(--black-pure);
    border-color: var(--white-pure);
}

/* ===================================
   VISION / TECH STACK
=================================== */
.vision {
    background: var(--black-deep);
    padding: 5rem 0 7rem;
    position: relative;
    overflow: hidden;
}

.vision::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle 800px at 25% 40%, rgba(79, 195, 247, 0.18), transparent),
        radial-gradient(circle 700px at 75% 70%, rgba(129, 212, 250, 0.15), transparent);
    animation: visionPulse 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes visionPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.1); }
}

.vision-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.vision-card {
    display: grid;
    grid-template-columns: 80px 260px 1fr;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 4rem;
    background: var(--black-dark);
    border-bottom: 1px solid var(--gray-darker);
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
    position: relative;
    overflow: hidden;
}

.vision-card:first-child {
    border-top: 1px solid var(--gray-darker);
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(137, 207, 240, 0.08), transparent);
    transition: left 0.7s ease;
}

.vision-card:hover::before {
    left: 100%;
}

.vision-card:hover {
    background: var(--black-medium);
    border-color: var(--accent-blue);
    transform: translateX(8px);
}

.vision-icon {
    font-size: 3rem;
    text-align: center;
    transition: transform 0.4s ease;
}

.vision-card:hover .vision-icon {
    transform: scale(1.2) rotate(5deg);
}

.vision-title h3 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 0.4rem;
    color: var(--white-pure);
    transition: all 0.3s ease;
}

.vision-card:hover .vision-title h3 {
    background: linear-gradient(135deg, var(--accent-blue-bright), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vision-subtitle {
    font-size: 0.85rem;
    color: var(--gray-light);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.vision-desc p {
    color: var(--gray-lighter);
    line-height: 1.8;
    font-size: 1rem;
}

/* ===================================
   SUBSCRIBE SECTION
=================================== */
.subscribe-section {
    background: var(--black-pure);
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.subscribe-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 1000px; height: 600px;
    background: radial-gradient(ellipse, rgba(79, 195, 247, 0.08), transparent 65%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.subscribe-box {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.subscribe-tagline {
    color: var(--gray-lighter);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.subscribe-form {
    display: flex;
    gap: 0;
    max-width: 520px;
    margin: 0 auto;
}

.subscribe-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: var(--black-dark);
    border: 1px solid var(--gray-darker);
    border-right: none;
    color: var(--white-pure);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
    min-width: 0;
}

.subscribe-form input::placeholder {
    color: var(--gray-medium);
}

.subscribe-form input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.subscribe-form button {
    padding: 1rem 2rem;
    background: var(--white-pure);
    color: var(--black-pure);
    border: 1px solid var(--white-pure);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.subscribe-form button:hover {
    background: transparent;
    color: var(--white-pure);
}

.subscribe-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.subscribe-feedback {
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 1.4em;
    text-align: center;
    transition: all 0.3s ease;
}

.subscribe-feedback.success {
    color: var(--accent-blue-bright);
}

.subscribe-feedback.error {
    color: #f87171;
}

/* ===================================
   BLOG INDEX
=================================== */
.blog-hero {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black-pure);
    padding: 8rem 2rem 5rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.blog-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle 500px at 20% 50%, rgba(79, 195, 247, 0.18), transparent),
        radial-gradient(circle 400px at 80% 50%, rgba(129, 212, 250, 0.12), transparent);
    pointer-events: none;
}

.blog-hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.blog-hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #A3A3A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero-content .tagline {
    font-size: 1.1rem;
    color: var(--gray-lighter);
    line-height: 1.75;
}

.blog-grid-section {
    background: var(--black-deep);
    padding: 5rem 0 8rem;
}

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

.blog-card {
    background: var(--black-dark);
    border: 1px solid var(--gray-darker);
    overflow: hidden;
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.blog-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(79, 195, 247, 0.12);
}

.blog-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 420px 1fr;
}

.blog-card-image {
    position: relative;
    overflow: hidden;
    min-height: 240px;
}

.blog-card--featured .blog-card-image {
    min-height: 100%;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-gradient {
    background: linear-gradient(135deg, #003d2e 0%, #005c44 40%, #0096ff 100%);
}

.blog-card-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: rgba(255,255,255,0.9);
    letter-spacing: -0.02em;
}

.blog-category {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: var(--accent-blue);
    color: var(--black-pure);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
}

.blog-card-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-card-content h3 {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.blog-card--featured .blog-card-content h3 {
    font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.blog-card-content h3 a {
    color: var(--white-pure);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-content h3 a:hover {
    color: var(--accent-blue);
}

.blog-excerpt {
    color: var(--gray-lighter);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    flex: 1;
}

.blog-meta {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: var(--gray-medium);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.blog-read-more {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.blog-read-more:hover {
    color: var(--white-pure);
}

/* ===================================
   BLOG POST PAGE
=================================== */
.post-hero {
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--black-pure);
    padding: 9rem 2rem 5rem;
    position: relative;
    overflow: hidden;
}

.post-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle 600px at 15% 30%, rgba(0, 214, 132, 0.15), transparent),
        radial-gradient(circle 500px at 85% 70%, rgba(0, 150, 255, 0.15), transparent);
    pointer-events: none;
}

.post-hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    width: 100%;
}

.post-category {
    display: inline-block;
    background: var(--accent-blue);
    color: var(--black-pure);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1.5rem;
}

.post-hero-content h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: var(--white-pure);
}

.post-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--gray-medium);
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-wrap: wrap;
}

.post-divider {
    color: var(--gray-darker);
}

.post-container {
    background: var(--black-deep);
    padding: 5rem 0 7rem;
}

.post-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
}

.post-body .lead {
    font-size: 1.25rem;
    color: var(--gray-lightest);
    line-height: 1.85;
    margin-bottom: 2rem;
    font-weight: 400;
}

.post-body p {
    font-size: 1.05rem;
    color: var(--gray-lighter);
    line-height: 1.9;
    margin-bottom: 1.75rem;
}

.post-body h2 {
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--white-pure);
    letter-spacing: -0.02em;
    margin: 3rem 0 1rem;
    line-height: 1.2;
}

.post-body h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--white-pure);
    margin: 2rem 0 0.75rem;
}

.post-body ul {
    margin: 0 0 1.75rem 1.5rem;
    color: var(--gray-lighter);
    line-height: 1.9;
}

.post-body ul li {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.post-body ul li strong {
    color: var(--white-pure);
}

.post-body hr {
    border: none;
    border-top: 1px solid var(--gray-darker);
    margin: 3rem 0;
}

.post-body a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-body a:hover {
    color: var(--white-pure);
}

.post-body .btn {
    margin-top: 1rem;
    display: inline-block;
}

.post-back {
    max-width: 760px;
    margin: 3rem auto 0;
    padding: 2rem 2rem 0;
    border-top: 1px solid var(--gray-darker);
}

.post-back-link {
    color: var(--gray-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.post-back-link:hover {
    color: var(--white-pure);
}

/* ===================================
   FOOTER — Simplified
=================================== */
footer {
    background: var(--black-deep);
    padding: 2.5rem 0;
    border-top: 1px solid var(--gray-darker);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-logo {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--white-pure);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.footer-logo:hover {
    color: var(--accent-blue);
}

.footer-links-row {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.footer-links-row a {
    color: var(--gray-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-links-row a:hover {
    color: var(--white-pure);
}

.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-darker);
    text-align: center;
    color: var(--gray-medium);
    font-size: 0.85rem;
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 1200px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-tile--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 968px) {
    .container {
        padding: 0 2rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .vision-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 2.5rem 2rem;
    }

    .vision-card:hover {
        transform: none;
    }

    .subscribe-box {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .nav-container {
        padding: 1rem 1.5rem;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.98);
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid var(--gray-darker);
        z-index: 999;
    }

    .nav-links.nav-open {
        display: flex;
    }

    .nav-links a {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--gray-darker);
        font-size: 1rem;
    }

    .nav-links a::after {
        display: none;
    }

    .hero {
        padding: 7rem 1.5rem 4rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    .about,
    .brands,
    .vision {
        padding: 5rem 0;
    }

    .brands-grid {
        grid-template-columns: 1fr;
    }

    .brand-tile--wide {
        grid-column: 1;
        flex-direction: column;
        text-align: center;
        min-height: auto;
        padding: 2.5rem 2rem;
    }

    .brand-tile--wide .brand-content {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        text-align: center;
    }

    .brand-tile--wide .brand-desc {
        max-width: 100%;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .subscribe-form {
        flex-direction: column;
    }

    .subscribe-form input {
        border-right: 1px solid var(--gray-darker);
        border-bottom: none;
    }

    .subscribe-form input:focus {
        border-color: var(--accent-blue);
    }

    .subscribe-form button {
        width: 100%;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-links-row {
        gap: 1.5rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}

/* ===================================
   BLOG STYLES
=================================== */

.blog-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black-pure);
    position: relative;
    overflow: hidden;
    padding: 8rem 2rem 5rem;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at 30% 50%, rgba(137, 207, 240, 0.12), transparent 60%),
        radial-gradient(circle at 70% 50%, rgba(79, 195, 247, 0.12), transparent 60%);
    animation: float1 20s ease-in-out infinite;
    z-index: 0;
}

.blog-hero-content {
    max-width: 800px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.blog-hero h1 {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #A3A3A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-grid-section {
    padding: 5rem 0 6rem;
    background: var(--gray-darkest);
}

.blog-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
}

.blog-card {
    background: var(--black-dark);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--gray-darker);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-blue);
}

.blog-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--gray-dark);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--accent-blue);
    color: var(--black-pure);
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-card-content {
    padding: 2rem;
}

.blog-card-content h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
    line-height: 1.35;
}

.blog-card-content h3 a {
    color: var(--white-pure);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-content h3 a:hover {
    color: var(--accent-blue);
}

.blog-excerpt {
    color: var(--gray-light);
    line-height: 1.65;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.blog-meta {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 1.5rem;
}

.blog-read-more {
    color: var(--accent-blue);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    letter-spacing: 0.02em;
}

.blog-read-more:hover {
    color: var(--accent-blue-bright);
}

.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

.blog-post-header {
    margin-bottom: 4rem;
    text-align: center;
}

.blog-post-meta-top {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--gray-medium);
}

.blog-post-header h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--white-pure);
}

.blog-post-excerpt {
    font-size: 1.2rem;
    color: var(--gray-lightest);
    line-height: 1.65;
    margin-bottom: 2rem;
}

.blog-post-author {
    color: var(--gray-medium);
    font-style: italic;
}

.blog-post-content {
    color: var(--gray-lightest);
    line-height: 1.8;
    font-size: 1.1rem;
}

.blog-post-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 3rem 0 1.5rem;
    color: var(--white-pure);
}

.blog-post-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2.5rem 0 1rem;
    color: var(--white-pure);
}

.blog-post-content p { margin-bottom: 1.5rem; }

.blog-post-content ul,
.blog-post-content ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.blog-post-content li { margin-bottom: 0.75rem; }

.blog-post-content a {
    color: var(--accent-blue);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.blog-post-content a:hover { color: var(--accent-blue-bright); }

.blog-post-content blockquote {
    border-left: 4px solid var(--accent-blue);
    padding-left: 2rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--gray-lightest);
}

.blog-post-content blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--gray-medium);
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
}

.blog-post-content code {
    background: var(--gray-darker);
    padding: 0.2rem 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.blog-post-content pre {
    background: var(--gray-darker);
    padding: 1.5rem;
    overflow-x: auto;
    margin: 2rem 0;
}

.blog-post-content pre code { background: none; padding: 0; }

.blog-post-footer {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--gray-dark);
}

.blog-post-share {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-post-share h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--white-pure);
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.share-btn {
    padding: 0.75rem 1.5rem;
    background: var(--gray-darker);
    color: var(--white-pure);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--gray-dark);
    font-size: 0.9rem;
}

.share-btn:hover {
    background: var(--accent-blue);
    color: var(--black-pure);
    border-color: var(--accent-blue);
}

.blog-post-back { text-align: center; }

@media (max-width: 768px) {
    .blog-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-post {
        padding: 4rem 1.5rem;
    }

    .blog-post-content { font-size: 1rem; }

    .share-buttons {
        flex-direction: column;
        align-items: center;
    }
}