/* ═══════════════════════ DESIGN TOKENS ═══════════════════════ */
        :root {
            --navy-deep:   #f7f9f6;
            --navy-dark:   #eef3ef;
            --navy-mid:    #e5eee8;
            --gold:        #008766;
            --gold-bright: #00795c;
            --gold-dark:   #006c52;
            --gold-glow:   rgba(0,135,102,0.18);
            --text-light:  #142922;
            --text-gray:   #53665d;
            --radius-xl:   32px;
            --radius-lg:   24px;
            --radius-md:   16px;
            --ease:        cubic-bezier(0.16,1,0.3,1);
            --dur:         0.6s;
        }

        /* ═══════════════════════ BASE ═══════════════════════ */
        *, *::before, *::after { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--navy-deep);
            color: var(--text-light);
            overflow-x: hidden;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--navy-deep); }
        ::-webkit-scrollbar-thumb { background: rgba(0,135,102,0.3); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--gold); }

        /* ═══════════════════════ AMBIENT GLOWS ═══════════════════════ */
        .glow-blob {
            position: fixed;
            border-radius: 50%;
            filter: blur(120px);
            z-index: 0;
            pointer-events: none;
            animation: blobFloat 18s infinite alternate ease-in-out;
        }
        .glow-blob-1 {
            width: 700px; height: 700px;
            background: radial-gradient(circle, rgba(0,135,102,0.07) 0%, transparent 70%);
            top: -200px; right: -200px;
        }
        .glow-blob-2 {
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
            top: 50%; left: -250px;
            animation-delay: -9s;
        }
        .glow-blob-3 {
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(0,135,102,0.04) 0%, transparent 70%);
            bottom: -100px; right: 20%;
            animation-delay: -5s;
        }
        @keyframes blobFloat {
            0%   { transform: translate(0,0) scale(1); }
            100% { transform: translate(40px,30px) scale(1.1); }
        }

        /* ═══════════════════════ GLASS UTILITY ═══════════════════════ */
        .glass {
            background: #ffffff;
            border: 1px solid rgba(0,135,102,0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        /* ═══════════════════════ NAVBAR ═══════════════════════ */
        #mainNav {
            padding: 20px 0;
            transition: background 0.35s, padding 0.35s, border 0.35s;
            z-index: 1000;
        }
        #mainNav.scrolled {
            background: rgba(247,249,246,0.96);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(0,135,102,0.12);
            padding: 12px 0;
        }
        .nav-brand {
            font-size: 1.65rem;
            font-weight: 900;
            color: #142922;
            text-decoration: none;
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .nav-brand .brand-accent { color: var(--gold); }
        .nav-logo-icon {
            width: 36px; height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg,var(--gold),var(--gold-dark));
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; color: var(--navy-deep);
        }
        .nav-link-c {
            color: var(--text-gray);
            font-weight: 600;
            font-size: 0.93rem;
            margin: 0 14px;
            text-decoration: none;
            transition: color 0.3s;
        }
        .nav-link-c:hover { color: var(--gold-bright); }
        .btn-nav-cta {
            background: linear-gradient(135deg,var(--gold),var(--gold-dark));
            color: var(--navy-deep);
            font-weight: 800;
            font-size: 0.88rem;
            padding: 10px 22px;
            border-radius: 30px;
            text-decoration: none;
            transition: all 0.3s var(--ease);
            display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,135,102,0.4);
            color: var(--navy-deep);
        }

        /* ═══════════════════════ HERO ═══════════════════════ */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 100px;
            position: relative;
            z-index: 1;
        }
        /* 3D gold plexus background (Three.js) */
        .hero-canvas-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .hero.is-3d .hero-canvas-bg { opacity: 1; }
        #heroCanvas3d { width: 100%; height: 100%; display: block; }
        .hero-canvas-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 50%, transparent 30%, rgba(3, 7, 18, 0.55) 100%);
        }
        .hero > .container { position: relative; z-index: 1; }
        @media (prefers-reduced-motion: reduce) {
            .hero-canvas-bg { display: none; }
        }
        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(0,135,102,0.08);
            border: 1px solid rgba(0,135,102,0.25);
            color: var(--gold-bright);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 8px 18px;
            border-radius: 30px;
            margin-bottom: 24px;
        }
        .hero-title {
            font-size: clamp(2.8rem, 5vw, 4.2rem);
            font-weight: 900;
            line-height: 1.12;
            letter-spacing: -1.5px;
            margin-bottom: 22px;
        }
        .hero-title .grad-text {
            background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-sub {
            font-size: 1.1rem;
            line-height: 1.75;
            color: var(--text-gray);
            max-width: 580px;
            margin-bottom: 40px;
        }
        .hero-sub strong { color: var(--gold-bright); }
        .btn-primary-gold {
            background: linear-gradient(135deg,var(--gold),var(--gold-dark));
            color: var(--navy-deep);
            font-weight: 800;
            padding: 15px 34px;
            border-radius: 40px;
            text-decoration: none;
            border: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: all 0.3s var(--ease);
            box-shadow: 0 4px 24px var(--gold-glow);
            font-size: 0.97rem;
        }
        .btn-primary-gold:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 36px rgba(0,135,102,0.45);
            color: var(--navy-deep);
        }
        .btn-outline-gold {
            background: transparent;
            border: 2px solid rgba(0,135,102,0.35);
            color: var(--gold-bright);
            font-weight: 700;
            padding: 13px 32px;
            border-radius: 40px;
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: all 0.3s var(--ease);
            font-size: 0.97rem;
        }
        .btn-outline-gold:hover {
            border-color: var(--gold);
            background: rgba(0,135,102,0.06);
            transform: translateY(-3px);
            color: var(--gold-bright);
        }

        /* Hero Stats */
        .hero-stats {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            padding-top: 36px;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .stat-pill {
            display: flex; flex-direction: column;
        }
        .stat-num {
            font-size: 1.7rem;
            font-weight: 900;
            line-height: 1;
            background: linear-gradient(135deg,var(--gold-bright),var(--gold));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .stat-lbl {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-gray);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2px;
        }

        /* Hero right — product orbit visual */
        .hero-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 480px;
        }
        .orbit-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(0,135,102,0.15);
            animation: orbitSpin 30s linear infinite;
        }
        .orbit-ring-1 { width: 340px; height: 340px; animation-duration: 25s; }
        .orbit-ring-2 { width: 460px; height: 460px; animation-duration: 40s; animation-direction: reverse; }
        @keyframes orbitSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .hero-center-logo {
            width: 110px; height: 110px;
            border-radius: 28px;
            background: linear-gradient(135deg, rgba(0,135,102,0.18), rgba(0,135,102,0.05));
            border: 1.5px solid rgba(0,135,102,0.35);
            display: flex; align-items: center; justify-content: center;
            font-size: 2.6rem;
            color: var(--gold);
            box-shadow: 0 0 60px rgba(0,135,102,0.15);
            z-index: 2;
            position: relative;
        }
        .orbit-dot {
            position: absolute;
            width: 42px; height: 42px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
            border: 1px solid;
            cursor: default;
            transition: transform 0.3s;
        }
        .orbit-dot:hover { transform: scale(1.2); }

        /* ═══════════════════════ SECTION COMMON ═══════════════════════ */
        .section-label {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(0,135,102,0.07);
            border: 1px solid rgba(0,135,102,0.2);
            color: var(--gold-bright);
            font-size: 0.75rem; font-weight: 700;
            letter-spacing: 1.5px; text-transform: uppercase;
            padding: 6px 16px; border-radius: 30px;
            margin-bottom: 16px;
        }
        .section-title {
            font-size: clamp(2rem, 3.5vw, 2.8rem);
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 12px;
        }
        .section-title .gold { color: var(--gold); }
        .section-subtitle {
            color: var(--text-gray);
            font-size: 1rem;
            line-height: 1.7;
            max-width: 620px;
            margin: 0 auto 56px;
        }

        /* ═══════════════════════ ECOSYSTEM SECTION ═══════════════════════ */
        #ecosystem { background: linear-gradient(180deg, var(--navy-deep) 0%, #060d1c 100%); }

        .ecosystem-hub {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }
        .hub-center {
            background: linear-gradient(135deg, rgba(0,135,102,0.15), rgba(0,135,102,0.04));
            border: 1.5px solid rgba(0,135,102,0.4);
            border-radius: 20px;
            padding: 20px 32px;
            display: inline-flex; align-items: center; gap: 16px;
            box-shadow: 0 0 50px rgba(0,135,102,0.12);
        }
        .hub-connector {
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, rgba(0,135,102,0.5), rgba(0,135,102,0.1));
            margin: 0 auto;
        }
        .hub-connector-h {
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, rgba(0,135,102,0.1), rgba(0,135,102,0.4), rgba(0,135,102,0.1));
        }
        .hub-row {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 0;
            width: 100%;
        }
        .hub-branch {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            max-width: 200px;
        }
        .hub-branch-line-v {
            width: 1px;
            height: 36px;
            background: linear-gradient(to bottom, rgba(0,135,102,0.4), rgba(0,135,102,0.1));
        }

        /* Product Cards in Ecosystem */
        .prod-card {
            border-radius: var(--radius-md);
            border: 1px solid;
            padding: 22px 18px;
            width: 100%;
            position: relative;
            overflow: hidden;
            transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
            background: rgba(11,24,43,0.5);
            backdrop-filter: blur(12px);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .prod-card-icon {
            width: 50px; height: 50px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            margin-bottom: 12px;
        }
        .prod-card-name {
            font-size: 1rem;
            font-weight: 800;
            color: #142922;
            margin-bottom: 6px;
        }
        .prod-card-desc {
            font-size: 0.78rem;
            color: var(--text-gray);
            line-height: 1.55;
            margin-bottom: 14px;
        }
        .prod-badge {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 0.7rem; font-weight: 700;
            padding: 4px 12px; border-radius: 20px;
            border: 1px solid;
        }

        /* ═══════════════════════ SERVICES SECTION ═══════════════════════ */
        #services { background: var(--navy-dark); }
        .service-card {
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,255,255,0.05);
            background: rgba(11,24,43,0.4);
            padding: 32px 28px;
            height: 100%;
            transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
        }
        .service-card:hover {
            transform: translateY(-6px);
            border-color: rgba(0,135,102,0.25);
            box-shadow: 0 20px 40px rgba(0,135,102,0.06);
        }
        .service-icon {
            width: 56px; height: 56px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(0,135,102,0.18), rgba(0,135,102,0.05));
            border: 1px solid rgba(0,135,102,0.25);
            display: flex; align-items: center; justify-content: center;
            font-size: 22px;
            color: var(--gold);
            margin-bottom: 20px;
        }
        .service-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: #142922;
            margin-bottom: 10px;
        }
        .service-desc {
            font-size: 0.88rem;
            color: var(--text-gray);
            line-height: 1.65;
        }

        /* ═══════════════════════ SHOWCASE ═══════════════════════ */
        #showcase { background: linear-gradient(180deg, #060d1c 0%, var(--navy-deep) 100%); }
        .showcase-card {
            border-radius: var(--radius-lg);
            border: 1px solid rgba(0,135,102,0.2);
            background: #ffffff;
            backdrop-filter: blur(16px);
            padding: 36px 32px;
            height: 100%;
            position: relative;
            overflow: hidden;
            transition: transform 0.35s var(--ease), box-shadow 0.35s;
        }
        .showcase-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 50px rgba(0,135,102,0.08);
        }
        .tech-tag {
            display: inline-flex;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-gray);
            font-size: 0.72rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            margin: 2px;
        }

        /* ═══════════════════════ ABOUT CARD ═══════════════════════ */
        #about { background: var(--navy-dark); }
        .about-card {
            border-radius: var(--radius-xl);
            border: 1px solid rgba(0,135,102,0.18);
            background: linear-gradient(135deg, rgba(11,24,43,0.85) 0%, rgba(3,7,18,0.95) 100%);
            padding: 52px 48px;
            position: relative;
            overflow: hidden;
        }
        .about-capability {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: var(--radius-md);
            padding: 16px;
            text-align: center;
            transition: transform 0.3s, border-color 0.3s;
        }

        /* ═══════════════════════ EXPERIENCE / CV ═══════════════════════ */
        #experience { background: linear-gradient(180deg, var(--navy-deep) 0%, #030c1a 100%); }
        .timeline-wrap { position: relative; }
        .timeline-line {
            position: absolute;
            left: 28px; top: 0; bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, var(--gold) 0%, rgba(0,135,102,0.1) 100%);
            border-radius: 2px;
        }
        .timeline-item {
            display: flex;
            gap: 24px;
            margin-bottom: 28px;
            position: relative;
        }
        .timeline-dot {
            flex-shrink: 0;
            width: 58px; height: 58px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            z-index: 1;
        }
        .timeline-card {
            border-radius: var(--radius-md);
            padding: 28px;
            flex: 1;
            position: relative;
        }
        .cv-tag {
            display: inline-flex; align-items: center;
            font-size: 0.72rem; font-weight: 600;
            padding: 4px 12px; border-radius: 20px;
            background: rgba(0,135,102,0.08);
            border: 1px solid rgba(0,135,102,0.2);
            color: var(--gold-bright);
            margin: 2px;
            white-space: nowrap;
        }

        /* Skills grid */
        .skill-card {
            border-radius: var(--radius-md);
            padding: 24px;
            height: 100%;
            border: 1px solid;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .skill-icon-wrap {
            width: 46px; height: 46px;
            border-radius: 13px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            margin-bottom: 14px;
            border: 1px solid;
        }
        .skill-pill {
            display: inline-flex; align-items: center;
            font-size: 0.68rem; font-weight: 600;
            padding: 3px 9px; border-radius: 20px;
            border: 1px solid; margin: 2px;
        }

        /* ═══════════════════════ TESTIMONIALS ═══════════════════════ */
        #testimonials { background: var(--navy-dark); }
        .testi-card {
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,255,255,0.05);
            background: rgba(11,24,43,0.35);
            padding: 32px 28px;
            height: 100%;
            position: relative;
        }
        .testi-text {
            font-size: 0.92rem;
            line-height: 1.7;
            color: var(--text-gray);
            font-style: italic;
            margin-bottom: 22px;
        }
        .testi-name {
            font-weight: 800; color: var(--gold-bright); font-size: 0.88rem;
        }
        .testi-meta {
            font-size: 0.75rem; color: var(--text-gray); font-weight: 500;
        }
        .stars { color: var(--gold); font-size: 0.8rem; margin-bottom: 14px; }

        /* ═══════════════════════ FOOTER ═══════════════════════ */
        footer {
            background: #02040a;
            border-top: 1px solid rgba(255,255,255,0.05);
            padding: 80px 0 36px;
        }
        .footer-brand {
            font-size: 1.5rem; font-weight: 900; color: #142922;
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 16px;
        }
        .footer-link {
            display: block;
            color: var(--text-gray);
            text-decoration: none;
            font-size: 0.9rem;
            margin-bottom: 10px;
            transition: color 0.2s;
        }
        .footer-heading {
            font-size: 0.75rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: 1.5px;
            color: var(--gold-bright);
            margin-bottom: 20px;
        }
        .social-btn {
            width: 38px; height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.12);
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--text-gray);
            text-decoration: none;
            transition: all 0.3s;
            font-size: 0.9rem;
        }
        .footer-divider {
            border: none;
            border-top: 1px solid rgba(255,255,255,0.05);
            margin: 40px 0 24px;
        }

        /* ═══════════════════════ ANIMATIONS ═══════════════════════ */
        .fade-up {
            opacity: 0;
            transform: translateY(32px);
            animation: fadeUp 0.9s var(--ease) forwards;
        }
        .d1 { animation-delay: 0.1s; }
        .d2 { animation-delay: 0.22s; }
        .d3 { animation-delay: 0.34s; }
        .d4 { animation-delay: 0.46s; }
        @keyframes fadeUp {
            to { opacity: 1; transform: translateY(0); }
        }
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal.d1 { transition-delay: 0.1s; }
        .reveal.d2 { transition-delay: 0.22s; }

        /* ═══════════════════════ RESPONSIVE ═══════════════════════ */
        @media (max-width: 768px) {
            .about-card { padding: 32px 24px; }
            .hub-row { flex-wrap: wrap; gap: 12px; }
            .hub-branch { max-width: 45%; }
            .timeline-line { display: none; }
            .timeline-item { flex-direction: column; }
            .hero-visual { height: 280px; }
            .orbit-ring-2 { width: 260px; height: 260px; }
            .orbit-ring-1 { width: 180px; height: 180px; }
        }
    
/* Styles extracted from the original page. */
.layout-1 {position:relative;z-index:1;}
.layout-2 {max-width:1000px;margin:0 auto;}
.layout-3 {border-color:rgba(239,68,68,0.25);box-shadow:0 10px 30px rgba(239,68,68,0.04);}
.layout-4 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#ef4444,transparent);border-radius:4px 4px 0 0;}
.layout-5 {background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);color:#f87171;}
.layout-6 {background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3);color:#f87171;text-decoration:none;}
.layout-7 {font-size:6px;color:#4ade80;}
.layout-8 {font-size:0.75rem;color:var(--text-gray);text-decoration:none;display:block;margin-top:8px;}
.layout-9 {border-color:rgba(0,135,102,0.25);box-shadow:0 10px 30px rgba(0,135,102,0.04);}
.layout-10 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:4px 4px 0 0;}
.layout-11 {background:rgba(0,135,102,0.12);border:1px solid rgba(0,135,102,0.3);color:var(--gold);}
.layout-12 {background:rgba(0,135,102,0.08);border-color:rgba(0,135,102,0.3);color:var(--gold);text-decoration:none;}
.layout-13 {border-color:rgba(168,85,247,0.25);box-shadow:0 10px 30px rgba(168,85,247,0.04);}
.layout-14 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#a855f7,transparent);border-radius:4px 4px 0 0;}
.layout-15 {background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.25);color:#c084fc;}
.layout-16 {background:rgba(168,85,247,0.08);border-color:rgba(168,85,247,0.3);color:#c084fc;text-decoration:none;}
.layout-17 {text-decoration:none;display:block;}
.layout-18 {border-color:rgba(34,197,94,0.35);box-shadow:0 10px 30px rgba(34,197,94,0.08);cursor:pointer;}
.layout-19 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#22c55e,transparent);border-radius:4px 4px 0 0;}
.layout-20 {background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.25);color:#4ade80;}
.layout-21 {background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.5);color:#4ade80;font-weight:700;}
.layout-22 {font-size:7px;animation:pulse 2s infinite;}
.layout-23 {text-decoration:none;color:inherit;}
.layout-24 {border-color:rgba(14,165,233,0.2);box-shadow:0 10px 30px rgba(14,165,233,0.03);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;}
.layout-25 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#0ea5e9,transparent);border-radius:4px 4px 0 0;}
.layout-26 {background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.25);color:#38bdf8;}
.layout-27 {background:rgba(14,165,233,0.15);border-color:rgba(14,165,233,0.4);color:#38bdf8;}
.layout-28 {font-size:7px;}
.layout-29 {border-color:rgba(0,135,102,0.25);box-shadow:0 10px 30px rgba(0,135,102,0.05);cursor:pointer;}
.layout-30 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#008766,transparent);border-radius:4px 4px 0 0;}
.layout-31 {background:rgba(0,135,102,0.12);border:1px solid rgba(0,135,102,0.25);color:#00795c;}
.layout-32 {background:rgba(0,135,102,0.12);border-color:rgba(0,135,102,0.4);color:#00795c;}
.layout-33 {background:var(--navy-dark);position:relative;z-index:1;}
.layout-34 {width:48px;height:48px;border-radius:14px;background:rgba(0,135,102,0.15);border:1px solid rgba(0,135,102,0.3);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--gold);}
.layout-35 {font-size:1.15rem;}
.layout-36 {font-size:0.8rem;color:var(--text-gray);}
.layout-37 {background:rgba(34,197,94,0.12);color:#86efac;border:1px solid rgba(34,197,94,0.3);border-radius:30px;font-size:11px;font-weight:700;padding:5px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.layout-38 {font-size:6px;}
.layout-39 {color:var(--text-gray);font-size:0.9rem;line-height:1.7;margin-bottom:20px;}
.layout-40 {display:inline-flex;align-items:center;gap:8px;background:rgba(0,135,102,0.08);border:1px solid rgba(0,135,102,0.25);color:var(--gold-bright);padding:10px 20px;border-radius:30px;text-decoration:none;font-size:0.85rem;font-weight:700;transition:all 0.3s;}
.layout-41 {border-color:rgba(239,68,68,0.2);}
.layout-42 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#ef4444,transparent);}
.layout-43 {width:48px;height:48px;border-radius:14px;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);display:flex;align-items:center;justify-content:center;font-size:20px;color:#f87171;}
.layout-44 {display:inline-flex;align-items:center;gap:8px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);color:#f87171;padding:10px 20px;border-radius:30px;text-decoration:none;font-size:0.85rem;font-weight:700;transition:all 0.3s;}
.layout-45 {border-color:rgba(168,85,247,0.2);}
.layout-46 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#a855f7,transparent);}
.layout-47 {width:48px;height:48px;border-radius:14px;background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);display:flex;align-items:center;justify-content:center;font-size:20px;color:#c084fc;}
.layout-48 {display:inline-flex;align-items:center;gap:8px;background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.25);color:#c084fc;padding:10px 20px;border-radius:30px;text-decoration:none;font-size:0.85rem;font-weight:700;transition:all 0.3s;}
.layout-49 {border-color:rgba(255,255,255,0.06);border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:280px;}
.layout-50 {font-size:2.5rem;color:rgba(0,135,102,0.25);margin-bottom:16px;}
.layout-51 {font-weight:800;color:rgba(255,255,255,0.4);font-size:1.1rem;margin-bottom:8px;}
.layout-52 {font-size:0.85rem;color:var(--text-gray);}
.layout-53 {margin-top:16px;}
.layout-54 {background:rgba(0,135,102,0.06);border:1px solid rgba(0,135,102,0.15);color:var(--gold-bright);font-size:0.75rem;font-weight:700;padding:5px 14px;border-radius:20px;}
.layout-55 {font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);margin-bottom:12px;}
.layout-56 {font-size:2rem;font-weight:800;color:#142922;margin-bottom:20px;letter-spacing:-0.5px;}
.layout-57 {color:var(--gold);}
.layout-58 {color:var(--text-gray);line-height:1.8;margin-bottom:16px;}
.layout-59 {color:var(--text-gray);line-height:1.8;margin-bottom:28px;}
.layout-60 {background:linear-gradient(135deg,var(--gold),var(--gold-dark));box-shadow:0 0 0 5px rgba(0,135,102,0.15);}
.layout-61 {color:var(--navy-deep);font-size:22px;}
.layout-62 {border:1px solid rgba(0,135,102,0.25);border-radius:var(--radius-md);position:relative;}
.layout-63 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:var(--radius-md) var(--radius-md) 0 0;}
.layout-64 {background:rgba(34,197,94,0.12);color:#86efac;border:1px solid rgba(34,197,94,0.3);border-radius:30px;font-size:11px;font-weight:700;padding:5px 14px;height:fit-content;display:inline-flex;align-items:center;gap:4px;}
.layout-65 {color:var(--text-gray);line-height:1.75;font-size:0.93rem;margin-bottom:16px;}
.layout-66 {color:#142922;}
.layout-67 {background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 0 0 5px rgba(59,130,246,0.15);}
.layout-68 {color:#142922;font-size:20px;}
.layout-69 {border:1px solid rgba(59,130,246,0.2);border-radius:var(--radius-md);position:relative;}
.layout-70 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#3b82f6,transparent);border-radius:var(--radius-md) var(--radius-md) 0 0;}
.layout-71 {color:#60a5fa;}
.layout-72 {background:rgba(59,130,246,0.12);color:#93c5fd;border:1px solid rgba(59,130,246,0.3);border-radius:30px;font-size:11px;font-weight:700;padding:5px 14px;height:fit-content;}
.layout-73 {background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.25);color:#93c5fd;}
.layout-74 {background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 0 0 5px rgba(245,158,11,0.15);}
.layout-75 {border:1px solid rgba(245,158,11,0.2);border-radius:var(--radius-md);position:relative;}
.layout-76 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);border-radius:var(--radius-md) var(--radius-md) 0 0;}
.layout-77 {color:#fbbf24;}
.layout-78 {background:rgba(245,158,11,0.12);color:#fcd34d;border:1px solid rgba(245,158,11,0.3);border-radius:30px;font-size:11px;font-weight:700;padding:5px 14px;height:fit-content;}
.layout-79 {background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.25);color:#fcd34d;}
.layout-80 {background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 0 0 5px rgba(139,92,246,0.15);}
.layout-81 {border:1px solid rgba(139,92,246,0.2);border-radius:var(--radius-md);position:relative;}
.layout-82 {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#8b5cf6,transparent);border-radius:var(--radius-md) var(--radius-md) 0 0;}
.layout-83 {color:#a78bfa;}
.layout-84 {background:rgba(139,92,246,0.12);color:#c4b5fd;border:1px solid rgba(139,92,246,0.3);border-radius:30px;font-size:11px;font-weight:700;padding:5px 14px;height:fit-content;}
.layout-85 {background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.25);color:#c4b5fd;}
.layout-86 {font-size:1.8rem;}
.layout-87 {color:var(--text-gray);font-size:0.92rem;}
.layout-88 {border-color:rgba(59,130,246,0.2);}
.layout-89 {background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.3);}
.layout-90 {color:var(--text-gray);line-height:1.6;}
.layout-91 {background:rgba(59,130,246,0.1);color:#93c5fd;border-color:rgba(59,130,246,0.2);}
.layout-92 {border-color:rgba(22,163,74,0.2);}
.layout-93 {background:rgba(22,163,74,0.15);border-color:rgba(22,163,74,0.3);}
.layout-94 {color:#4ade80;}
.layout-95 {background:rgba(22,163,74,0.1);color:#86efac;border-color:rgba(22,163,74,0.2);}
.layout-96 {border-color:rgba(0,135,102,0.2);}
.layout-97 {background:rgba(0,135,102,0.15);border-color:rgba(0,135,102,0.3);}
.layout-98 {background:rgba(0,135,102,0.1);color:var(--gold-bright);border-color:rgba(0,135,102,0.2);}
.layout-99 {border-color:rgba(236,72,153,0.2);}
.layout-100 {background:rgba(236,72,153,0.15);border-color:rgba(236,72,153,0.3);}
.layout-101 {color:#f472b6;}
.layout-102 {background:rgba(236,72,153,0.1);color:#f9a8d4;border-color:rgba(236,72,153,0.2);}
.layout-103 {border-color:rgba(14,165,233,0.2);}
.layout-104 {background:rgba(14,165,233,0.15);border-color:rgba(14,165,233,0.3);}
.layout-105 {color:#38bdf8;}
.layout-106 {background:rgba(14,165,233,0.1);color:#7dd3fc;border-color:rgba(14,165,233,0.2);}
.layout-107 {background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.3);}
.layout-108 {color:#f87171;}
.layout-109 {background:rgba(239,68,68,0.1);color:#fca5a5;border-color:rgba(239,68,68,0.2);}
.layout-110 {text-decoration:none;}
.layout-111 {color:var(--text-gray);font-size:0.88rem;line-height:1.7;margin-bottom:20px;}
.layout-112 {font-size:0.78rem;color:rgba(83,102,93,0.5);}
.layout-113 {color:#f87171;width:16px;}
.layout-114 {color:var(--gold);width:16px;}
.layout-115 {color:#c084fc;width:16px;}
.layout-116 {color:#4ade80;width:16px;}
.layout-117 {color:#38bdf8;width:16px;}
.layout-118 {color:#00795c;width:16px;}
.layout-119 {color:var(--text-gray);font-size:0.88rem;margin-bottom:14px;display:flex;align-items:flex-start;gap:10px;}
.layout-120 {color:var(--gold);margin-top:3px;}
.layout-121 {color:var(--text-gray);text-decoration:none;}
.layout-122 {margin-top:28px;}
.layout-123 {font-size:0.88rem;padding:12px 24px;}
.layout-124 {font-size:0.82rem;color:rgba(83,102,93,0.5);}
.layout-125 {color:rgba(83,102,93,0.5);text-decoration:none;}