body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; overflow-x: hidden; }

/* Section: brand_header (brand-header-v2) */

#section-brand-header-v2 .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
        }
#section-brand-header-v2 .brand-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: #ffffff;
            font-weight: 900;
            font-size: 1.25rem;
            letter-spacing: -0.05em;
            text-transform: uppercase;
        }
#section-brand-header-v2 .logo-icon {
            width: 2rem;
            height: 2rem;
            background: #3b82f6;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
#section-brand-header-v2 .logo-icon-inner {
            width: 1rem;
            height: 1rem;
            background: white;
            border-radius: 2px;
        }
#section-brand-header-v2 .brand-nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
#section-brand-header-v2 .brand-nav a {
            text-decoration: none;
            color: #ffffff;
            font-size: 0.875rem;
            font-weight: 600;
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }
#section-brand-header-v2 .brand-nav a:hover {
            opacity: 1;
        }
#section-brand-header-v2 .header-cta {
            background: #3b82f6;
            color: white;
            padding: 0.625rem 1.25rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.2s ease;
        }
#section-brand-header-v2 .header-cta:hover {
            transform: scale(1.05);
        }
        @media (max-width: 768px) {
#section-brand-header-v2 .brand-nav { display: none; }
#section-brand-header-v2 .header-container { padding: 0 1rem; }
        }
    

/* Section: brand_hero (brand-hero-v2) */

#section-brand-hero-v2 .hero-content {
            max-width: 1100px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 10;
        }
#section-brand-hero-v2 .brand-hero h1 {
            font-size: clamp(3rem, 10vw, 6rem);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.05em;
            margin-bottom: 2.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: hero-text-float 3s ease-in-out infinite;
        }
        @keyframes hero-text-float {
#section-brand-hero-v2 0% ,#section-brand-hero-v2 100% { transform: translateY(0); }
#section-brand-hero-v2 50% { transform: translateY(-10px); }
        }
#section-brand-hero-v2 .brand-hero p {
            font-size: clamp(1rem, 4vw, 1.5rem);
            opacity: 0.7;
            max-width: 800px;
            margin: 0 auto 4rem;
            line-height: 1.6;
            letter-spacing: 0.02em;
        }
#section-brand-hero-v2 .hero-actions {
            display: flex;
            gap: 2rem;
            justify-content: center;
            align-items: center;
        }
#section-brand-hero-v2 .btn-primary {
            background: #3b82f6;
            color: white;
            padding: 1.25rem 2.5rem;
            border-radius: 12px;
            font-size: 1.125rem;
            font-weight: 800;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 0 30px #3b82f680;
        }
#section-brand-hero-v2 .btn-primary:hover {
            transform: scale(1.05) translateY(-5px);
            box-shadow: 0 0 50px #3b82f6;
        }
#section-brand-hero-v2 .btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: white;
            padding: 1.25rem 2.5rem;
            border-radius: 12px;
            font-size: 1.125rem;
            font-weight: 700;
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
#section-brand-hero-v2 .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
        }
 
#section-brand-hero-v2 .mesh-gradient {
            position: absolute;
            top: -20%;
            left: -10%;
            width: 120%;
            height: 140%;
            background: 
                radial-gradient(at 0% 0%, #3b82f633 0, transparent 50%),
                radial-gradient(at 100% 0%, #ff00ea22 0, transparent 50%),
                radial-gradient(at 50% 100%, #00ffcc22 0, transparent 50%);
            filter: blur(80px);
            z-index: 1;
            opacity: 0.8;
            animation: mesh-pulse 10s ease infinite alternate;
        }
        @keyframes mesh-pulse {
#section-brand-hero-v2 0% { transform: scale(1) rotate(0deg); }
#section-brand-hero-v2 100% { transform: scale(1.1) rotate(2deg); }
        }

        @media (max-width: 768px) {
#section-brand-hero-v2 .hero-actions { flex-direction: column; gap: 1rem; }
#section-brand-hero-v2 .brand-hero { padding: 8rem 1rem; }
        }
    

/* Section: brand_features (brand-features-bento) */

#section-brand-features-bento .features-container {
            max-width: 1200px;
            margin: 0 auto;
        }
#section-brand-features-bento .features-header {
            text-align: center;
            margin-bottom: 5rem;
        }
#section-brand-features-bento .features-header h2 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            margin-bottom: 1.5rem;
            letter-spacing: -0.03em;
        }
#section-brand-features-bento .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 300px);
            gap: 1.5rem;
        }
#section-brand-features-bento .bento-item {
            background: #0f0f0f;
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
#section-brand-features-bento .bento-item:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: #3b82f6;
            box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        }
#section-brand-features-bento .bento-item::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at top right, #3b82f611, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }
#section-brand-features-bento .bento-item:hover::before {
            opacity: 1;
        }
#section-brand-features-bento .item-large { grid-column: span 2; grid-row: span 2; }
#section-brand-features-bento .item-wide { grid-column: span 2; }
 
#section-brand-features-bento .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            background: #3b82f622;
            width: 4rem; height: 4rem;
            display: flex; align-items: center; justify-content: center;
            border-radius: 16px;
            position: absolute; top: 2.5rem; left: 2.5rem;
        }
#section-brand-features-bento .bento-item h3 {
            font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 2;
        }
#section-brand-features-bento .bento-item p {
            font-size: 1rem; opacity: 0.6; line-height: 1.6; position: relative; z-index: 2;
        }

        @media (max-width: 1024px) {
#section-brand-features-bento .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
#section-brand-features-bento .item-large { grid-row: span 1; }
        }
        @media (max-width: 768px) {
#section-brand-features-bento .bento-grid { grid-template-columns: 1fr; }
#section-brand-features-bento .item-large ,#section-brand-features-bento .item-wide { grid-column: span 1; }
#section-brand-features-bento .bento-item { height: 350px; }
        }
    

/* Section: brand_editor_deep_dive (brand-editor-dive) */

#section-brand-editor-dive .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }
#section-brand-editor-dive .content h2 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 2rem;
            letter-spacing: -0.03em;
        }
#section-brand-editor-dive .content p {
            font-size: 1.25rem;
            opacity: 0.7;
            line-height: 1.8;
            margin-bottom: 3rem;
        }
#section-brand-editor-dive .editor-mockup {
            position: relative;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
            transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
            transition: transform 0.5s ease;
        }
#section-brand-editor-dive .editor-mockup:hover {
            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        }
#section-brand-editor-dive .mockup-header {
            height: 20px;
            display: flex;
            gap: 6px;
            margin-bottom: 1rem;
        }
#section-brand-editor-dive .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
#section-brand-editor-dive .mockup-screen {
            aspect-ratio: 16/10;
            background: #111;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-image: linear-gradient(45deg, #1e1e1e 25%, #2a2a2a 25%, #2a2a2a 50%, #1e1e1e 50%, #1e1e1e 75%, #2a2a2a 75%, #2a2a2a 100%);
            background-size: 40px 40px;
        }
#section-brand-editor-dive .feature-tag {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
        }
#section-brand-editor-dive .feature-tag i { color: #3b82f6; font-size: 1.5rem; }
 
#section-brand-editor-dive .glow-sphere {
            position: absolute;
            width: 400px; height: 400px;
            background: #3b82f6;
            filter: blur(150px);
            opacity: 0.15;
            border-radius: 50%;
            z-index: 1;
            top: 50%; left: 0; transform: translateY(-50%);
        }

#section-brand-editor-dive .cta-btn-neon {
            display: inline-block;
            padding: 1.25rem 3rem;
            background: #3b82f6;
            color: white;
            border-radius: 9999px;
            text-decoration: none;
            font-weight: 800;
            font-size: 1.125rem;
            box-shadow: 0 0 20px #3b82f680;
            transition: all 0.3s ease;
        }
#section-brand-editor-dive .cta-btn-neon:hover {
            box-shadow: 0 0 40px #3b82f6;
            transform: scale(1.05);
        }

        @media (max-width: 968px) {
#section-brand-editor-dive .container { grid-template-columns: 1fr; text-align: center; gap: 4rem; }
#section-brand-editor-dive .editor-mockup { transform: none; width: 90%; margin: 0 auto; }
#section-brand-editor-dive .feature-tag { justify-content: center; }
        }
    

/* Section: brand_gallery_immersive (brand-gallery-focus) */

#section-brand-gallery-focus .container {
            max-width: 1400px;
            margin: 0 auto;
        }
#section-brand-gallery-focus .header {
            text-align: left;
            margin-bottom: 5rem;
            max-width: 800px;
        }
#section-brand-gallery-focus .header h2 {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 800;
            margin-bottom: 2rem;
            letter-spacing: -0.04em;
            line-height: 1.1;
        }
#section-brand-gallery-focus .gallery-strip {
            display: flex;
            gap: 2rem;
            overflow-x: auto;
            padding: 2rem 0 4rem;
            scrollbar-width: none;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
#section-brand-gallery-focus .gallery-strip::-webkit-scrollbar { display: none; }
 
#section-brand-gallery-focus .template-box {
            flex: 0 0 400px;
            height: 500px;
            background: rgba(255,255,255,0.03);
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.08);
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
#section-brand-gallery-focus .template-box:hover {
            background: rgba(255,255,255,0.07);
            transform: translateY(-20px);
            border-color: #3b82f6;
        }
#section-brand-gallery-focus .preview-img {
            width: 100%; height: 75%;
            background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
            display: flex; align-items: center; justify-content: center;
            font-size: 4rem;
        }
#section-brand-gallery-focus .info {
            padding: 2rem;
        }
#section-brand-gallery-focus .info h3 {
            font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;
        }
#section-brand-gallery-focus .info .category {
            font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #3b82f6; letter-spacing: 0.1em;
        }
 
#section-brand-gallery-focus .btn-discover {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            font-weight: 800;
            color: white;
            text-decoration: none;
            font-size: 1.25rem;
            margin-top: 3rem;
            transition: gap 0.3s ease;
        }
#section-brand-gallery-focus .btn-discover:hover {
            gap: 2rem;
            color: #3b82f6;
        }
    

/* Section: brand_cta_bottom (brand-cta-v2) */

#section-brand-cta-v2 .cta-container {
            max-width: 800px;
            margin: 0 auto;
        }
#section-brand-cta-v2 .brand-cta-bottom h2 {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 2rem;
            letter-spacing: -0.05em;
            line-height: 1.2;
        }
#section-brand-cta-v2 .cta-btn {
            display: inline-block;
            background: #3b82f6;
            color: white;
            padding: 1.25rem 3rem;
            border-radius: 9999px;
            font-size: 1.25rem;
            font-weight: 800;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px #3b82f64d;
        }
#section-brand-cta-v2 .cta-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px #3b82f666;
        }

        @media (max-width: 768px) {
#section-brand-cta-v2 .brand-cta-bottom h2 { font-size: 2.25rem; }
#section-brand-cta-v2 .brand-cta-bottom { padding: 4rem 1rem; }
        }
    

/* Section: brand_footer (brand-footer-v2) */

#section-brand-footer-v2 .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 4rem;
        }
#section-brand-footer-v2 .footer-brand h4 {
            font-size: 1.25rem;
            font-weight: 900;
            margin-bottom: 1rem;
            letter-spacing: -0.05em;
            text-transform: uppercase;
        }
#section-brand-footer-v2 .footer-brand p {
            font-size: 0.875rem;
            opacity: 0.6;
            line-height: 1.6;
            max-width: 300px;
        }
#section-brand-footer-v2 .footer-col h5 {
            font-size: 0.875rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
#section-brand-footer-v2 .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
#section-brand-footer-v2 .footer-links a {
            text-decoration: none;
            color: #999999;
            font-size: 0.875rem;
            opacity: 0.6;
            transition: opacity 0.2s ease;
        }
#section-brand-footer-v2 .footer-links a:hover {
            opacity: 1;
            color: #3b82f6;
        }
#section-brand-footer-v2 .footer-bottom {
            max-width: 1200px;
            margin: 4rem auto 0;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            opacity: 0.4;
        }

        @media (max-width: 768px) {
#section-brand-footer-v2 .footer-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
#section-brand-footer-v2 .footer-bottom {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
        }