/* Hero */
    .hero {
    	padding: 5rem 0;
    	text-align: left;
    	background: linear-gradient(180deg, rgba(14, 74, 120, 0.02), rgba(0, 214, 160, 0.01));
    	border-radius: 14px
    }

    .hero .badge {
    	display: inline-block;
    	padding: .35rem .9rem;
    	border-radius: 999px;
    	background: linear-gradient(90deg, var(--pf-accent), var(--pf-gold));
    	color: rgba(3, 38, 50, 0.95);
    	font-weight: 600
    }

    .hero h1 {
    	font-size: 2.25rem;
    	background: linear-gradient(90deg, var(--pf-primary), #072233);
    	-webkit-background-clip: text;
    	background-clip: text;
    	color: transparent
    }

    .lead {
    	color: var(--pf-muted);
    	max-width: 760px
    }

    /* Cards */
    .feature-cards {
    	background: linear-gradient(180deg, #ffffff, rgba(246, 251, 255, 0.9));
    	border-radius: 12px;
    	padding: 1.4rem;
    	box-shadow: 0 12px 30px rgba(14, 74, 120, 0.06);
    	border-left: 6px solid rgba(0, 214, 160, 0.12);
    }

    .feature-cards h5,
    .feature-cards h6 {
    	color: var(--pf-primary)
    }

    /* Buttons */
    .btn-pf-primary {
    	background: linear-gradient(90deg, var(--pf-primary), #063a5a);
    	border: 0;
    	color: #fff
    }

    .btn-pf-accent {
    	background: linear-gradient(90deg, var(--pf-accent), #00b388);
    	border: 0;
    	color: #063545
    }

    .btn-outline-secondary {
    	border-color: rgba(14, 74, 120, 0.08);
    	color: var(--pf-primary)
    }

    .api-snippet {
    	background: linear-gradient(180deg, #fff, rgba(246, 251, 255, 0.9));
    	border-radius: 8px;
    	padding: 1rem;
    	border-left: 4px solid var(--pf-accent);
    }

    .sdk-btn {
    	border-radius: 10px;
    	padding: .5rem 1rem;
    	border: 1px solid rgba(14, 74, 120, 0.06);
    	background: linear-gradient(180deg, #fff, rgba(246, 251, 255, 0.9));
    	color: var(--pf-primary)
    }

    /* Accent icons and svg fills */
    svg [fill="var(--pf-accent)"],
    svg [fill="var(--pf-gold)"] {
    	filter: drop-shadow(0 4px 8px rgba(0, 214, 160, 0.06))
    }

    svg [stroke="var(--pf-primary)"] {
    	stroke-width: 1.6
    }

    .stat {
    	background: linear-gradient(180deg, rgba(255, 209, 102, 0.18), rgba(255, 209, 102, 0.06));
    	padding: 1rem;
    	border-radius: 10px
    }

    .grid-2 {
    	display: grid;
    	grid-template-columns: 1fr 360px;
    	gap: 1.5rem
    }

    @media (max-width:991px) {
    	.grid-2 {
    		grid-template-columns: 1fr
    	}
    }

    @media (max-width:575px) {
    	.hero {
    		padding: 3rem 0
    	}

    	.hero h1 {
    		font-size: 1.6rem
    	}
    }