:root {
    --sf-blue: #0070D2;
    --sf-cloud-blue: #00A1E0;
    --sf-light-blue: #E8F3FC;
    --sf-gray: #747474;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
}

.section {
    padding: 4rem 2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--sf-light-blue), white);
    padding: 6rem 0 0;
}

.hero-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.app-icon { width: 56px; height: 56px; object-fit: contain; }

.hero-head h1 { margin: 0; line-height: 1.05; color: var(--sf-blue); font-size: 2.6rem; }

.hero-layout {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
}

.side-graphic { flex: 0 0 18%; display:flex; align-items:stretch; justify-content:center; overflow:hidden; }
.side-image { width:100%; height:100%; object-fit:cover; object-position:center; }
.side-graphic.left .side-image { object-position: left center; }
.side-graphic.right .side-image { object-position: right center; }

p { color:var(--sf-gray) }

.hero-content { flex: 1 1 60%; padding: 0 1.25rem; text-align:center; }
.hero-content p { font-size:1.15rem; margin-bottom:0.6rem; }

.placeholder-graphic { width:200px; height:200px; background-color:var(--sf-light-blue); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--sf-blue); }


/* Contact/CTA Section */
.contact { background-color: white; }
.cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.cta-button { padding:0.9rem 1.25rem; border-radius:6px; text-decoration:none; font-weight:700; transition:transform .2s ease, box-shadow .2s ease; display:inline-block; }
.primary-button { background:var(--sf-blue); color:#fff; }
.secondary-button { background:#fff; color:var(--sf-blue); border:2px solid var(--sf-blue); }
.cta-button:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,0.08); }


/* Videos Section */
.videos { background-color: var(--sf-light-blue); }
.video-grid { display:flex; gap:1rem; margin-top:1.25rem; flex-wrap:wrap; justify-content:center; }
.video-container { flex:1 1 320px; max-width:640px; aspect-ratio:16/9; background:#ddd; border-radius:10px; overflow:hidden; display:block; }
.video-container iframe { width:100%; height:100%; border:0; display:block; }


/* Open Source Section */
.open-source { background:white; }
.open-source-row { display:flex; gap:1rem; margin-top:1.25rem; align-items:stretch; flex-wrap:wrap; }
.panel { flex:1 1 320px; padding:2rem; border-radius:12px; min-height:200px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; }
.panel-content { max-width:640px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:100%; }
.panel-text { padding:0.5rem 0; color:var(--sf-gray); }

.github-panel { background:linear-gradient(180deg,#fff,#f6f8fa); border:1px solid #e1e4e8; color:#24292e; }
.blog-panel { background:linear-gradient(135deg,#e7fbf3,#dff7ea); border:1px solid #cfead7; color:#0b3b2e; box-shadow:0 4px 10px rgba(3,59,43,0.03); }

.badge { display:inline-block; padding:0.35rem 0.75rem; border-radius:999px; font-weight:700; font-size:0.9rem; margin-bottom:0.75rem; }
.trailhead-badge { background:#00bfa5; color:#fff; border-radius:999px; display:inline-block; padding:0.35rem 0.75rem; font-weight:700; font-size:0.9rem; margin-bottom:0.75rem; }
.github-badge { background:#232925; color:#fff; border-radius:999px; display:inline-block; padding:0.35rem 0.75rem; font-weight:700; font-size:0.9rem; margin-bottom:0.75rem; }
.github-icon { position:absolute; right:12px; bottom:8px; width:160px; opacity:0.06; pointer-events:none; }


.salesforce-panel { background:linear-gradient(180deg,var(--sf-cloud-blue),var(--sf-blue)); border:1px solid rgba(0,0,0,0.06); color:#fff; box-shadow:0 8px 20px rgba(0,112,210,0.12); }
.salesforce-panel h3 { margin-top:0; color:#fff; }
.salesforce-panel .panel-text { color:rgba(255,255,255,0.95); }
.salesforce-badge { display:inline-block; background:rgba(255,255,255,0.12); color:#fff; padding:0.35rem 0.75rem; border-radius:999px; font-weight:700; font-size:0.9rem; margin-bottom:0.75rem; }
.salesforce-panel .cta-button { background:#fff; color:var(--sf-blue); border:2px solid rgba(255,255,255,0.08); }

.github-panel .cta-button.primary-button { background:#232925; color:#fff; border:none; }
.github-panel .cta-button.primary-button:hover { filter:brightness(1.05); }
.blog-panel .cta-button.secondary-button { background:#00bfa5; color:#fff; border:none; }
.blog-panel .cta-button.secondary-button:hover { filter:brightness(0.95); }

h2 { color: var(--sf-blue); margin-bottom: 1rem; font-size: 2.2rem; }

@media (max-width: 900px) {
    .hero-layout { gap: 1rem; }
    .side-graphic { flex:0 0 14%; }
    .hero-content { padding:0 1rem; }
    .video-container { flex-basis: 300px; }
    .open-source-row { gap:0.75rem; }
    .github-icon { width:120px; right:10px; bottom:6px; }
}

@media (max-width:700px) {
    .hero-layout { flex-direction:column; align-items:stretch; }
    .side-graphic { width:100%; height:160px; order:0; }
    .hero-content { order:1; width:100%; padding:1rem; }
    .hero-head { justify-content:flex-start; padding-left:0.5rem; }
    .section { padding:2.5rem 1rem; }
}

@media (max-width:420px) {
    .side-graphic { display:none; }
    .hero-content { padding:0.5rem; }
}

/* Utility spacing */
.mt-1 { margin-top: 1rem !important; }