* { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body {
        font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: var(--bg);
        color: var(--text-gray);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }
    :root {
        --bg: #0A0A0F;
        --bg-soft: #0D0E15;
        --card-bg: #14161D;
        --card-bg-2: #16181F;
        --border: rgba(255,255,255,0.08);
        --border-soft: rgba(255,255,255,0.06);
        --white: #FFFFFF;
        --text-gray: #9CA3AF;
        --text-dim: #6B7280;
        --blue: #3B82F6;
        --blue-light: #60A5FA;
        --blue-dark: #1D4ED8;
        --green: #22C55E;
    }
    .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
 .container-narrow {
     max-width: 920px;
     margin: 0 auto;
     padding: 0 32px;
 }
  section { padding: 60px 0; }


 /* ============= HERO ============= */
 .hero {
     padding: 64px 0 40px;
 }

 .hero-tag {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     font-weight: 600;
     color: var(--text-gray);
     margin-bottom: 28px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .hero-tag .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--green);
     flex-shrink: 0;
 }

 .hero h1 {
     font-size: clamp(38px, 5.5vw, 64px);
     font-weight: 700;
     color: var(--white);
     line-height: 1.1;
     letter-spacing: -1px;
     margin-bottom: 22px;
     max-width: 900px;
 }

 .hero h1 .blue {
     color: var(--blue-light);
 }

 .hero-tagline {
     font-size: clamp(18px, 2vw, 22px);
     font-weight: 600;
     color: var(--white);
     margin-bottom: 24px;
     max-width: 760px;
 }

 .hero-intro {
     font-size: 16px;
     color: var(--text-gray);
     max-width: 700px;
     line-height: 1.7;
 }

 /* ============= REFRAME ============= */
 .reframe-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-left: 3px solid var(--blue);
     border-radius: 16px;
     padding: 36px 40px;
 }

 .reframe-card p {
     font-size: clamp(19px, 2.4vw, 26px);
     line-height: 1.45;
     color: var(--white);
 }

 .reframe-card p.strike {
     color: var(--text-dim);
     font-weight: 500;
     margin-bottom: 10px;
     font-size: clamp(16px, 2vw, 19px);
 }

 .reframe-card p.bold {
     font-weight: 700;
 }

 /* ============= SECTION HEADERS ============= */
 .section-eyebrow {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--text-gray);
     text-transform: uppercase;
     margin-bottom: 16px;
 }

 .section-eyebrow .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--blue);
     flex-shrink: 0;
 }

 .section-title {
     font-size: clamp(28px, 3.6vw, 42px);
     font-weight: 700;
     color: var(--white);
     margin-bottom: 18px;
     letter-spacing: -0.5px;
     line-height: 1.15;
 }

 .section-subtitle {
     font-size: 16px;
     color: var(--text-gray);
     max-width: 700px;
     line-height: 1.7;
 }

 /* ============= PRINCIPLES ============= */
 .principles-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 24px;
     margin-top: 56px;
 }

 .principle-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 32px;
     position: relative;
     transition: transform .2s, border-color .2s;
 }

 .principle-card:hover {
     transform: translateY(-4px);
     border-color: rgba(59, 130, 246, 0.4);
 }

 .principle-badge {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: rgba(59, 130, 246, 0.12);
     border: 1px solid rgba(59, 130, 246, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     color: var(--blue-light);
     margin-bottom: 22px;
 }

 .principle-role {
     display: block;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.5px;
     color: var(--text-dim);
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .principle-name {
     font-size: 20px;
     font-weight: 700;
     color: var(--white);
     margin-bottom: 12px;
     line-height: 1.25;
 }

 .principle-desc {
     font-size: 14.5px;
     line-height: 1.6;
     color: var(--text-gray);
 }

 .principle-card.highlight {
     background: linear-gradient(155deg, #1D2A4A 0%, #14161D 60%);
     border-color: rgba(59, 130, 246, 0.35);
 }

 .principle-card.highlight .principle-badge {
     background: var(--blue);
     border-color: var(--blue);
     color: var(--white);
 }

 /* ============= PROMISE ============= */
 .promise-section {
     background: var(--bg-soft);
     border-top: 1px solid var(--border-soft);
     border-bottom: 1px solid var(--border-soft);
 }

 .promise-grid {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 64px;
     align-items: center;
 }

 @media (max-width:768px) {
     .promise-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }
 }

 .promise-big-number {
     text-align: center;
 }

 .promise-72 {
     font-size: clamp(110px, 14vw, 170px);
     font-weight: 800;
     color: var(--blue-light);
     line-height: 1;
     display: block;
 }

 .promise-hours {
     font-size: 18px;
     font-weight: 700;
     color: var(--white);
     letter-spacing: 4px;
     margin-top: 4px;
     display: block;
 }

 .promise-content h2 {
     font-size: clamp(26px, 3.6vw, 36px);
     font-weight: 700;
     color: var(--white);
     margin-bottom: 18px;
     line-height: 1.2;
 }

 .promise-content .highlight {
     color: var(--blue-light);
 }

 .promise-content p {
     font-size: 15.5px;
     color: var(--text-gray);
     margin-bottom: 24px;
 }

 .promise-outputs {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin-top: 8px;
 }

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

 .promise-pill {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 14px 16px;
     font-size: 14px;
     font-weight: 600;
     color: var(--white);
     text-align: center;
 }

 /* ============= DISCIPLINE ============= */
 .discipline-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
     margin-top: 56px;
 }

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

 .discipline-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 36px;
 }

 .discipline-card.deliver {
     border-color: rgba(59, 130, 246, 0.35);
 }

 .discipline-card h3 {
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: 22px;
 }

 .discipline-card.deliver h3 {
     color: var(--blue-light);
 }

 .discipline-card.not-promise h3 {
     color: var(--text-dim);
 }

 .discipline-list {
     list-style: none;
 }

 .discipline-list li {
     padding: 9px 0;
     font-size: 14.5px;
     line-height: 1.55;
     display: flex;
     align-items: flex-start;
     gap: 12px;
     color: var(--text-gray);
 }

 .discipline-list li::before {
     content: "•";
     font-weight: 700;
     font-size: 18px;
     line-height: 1;
     flex-shrink: 0;
 }

 .discipline-card.deliver .discipline-list li::before {
     color: var(--blue-light);
 }

 .discipline-card.not-promise .discipline-list li::before {
     color: var(--text-dim);
 }

 /* ============= CTA ============= */
 .cta-section {
     text-align: center;
 }

 .cta-section .section-eyebrow {
     justify-content: center;
 }

 .cta-section h2 {
     font-size: clamp(30px, 4.4vw, 48px);
     font-weight: 700;
     color: var(--white);
     margin-bottom: 20px;
     max-width: 820px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.2;
 }

 .cta-section .highlight {
     color: var(--blue-light);
 }

 .cta-subline {
     font-size: 16.5px;
     color: var(--text-gray);
     max-width: 640px;
     margin: 0 auto 36px;
 }

 .cta-button {
     display: inline-block;
     background: var(--white);
     color: #0A0A0F;
     padding: 16px 36px;
     font-size: 15px;
     font-weight: 700;
     text-decoration: none;
     border-radius: 999px;
     transition: opacity .2s;
 }

 .cta-button:hover {
     opacity: .85;
 }

 .cta-details {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     max-width: 760px;
     margin: 52px auto 0;
 }

 @media (max-width:640px) {
     .cta-details {
         grid-template-columns: 1fr;
     }
 }

 .cta-detail-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 24px;
     text-align: left;
 }

 .cta-detail-label {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.5px;
     color: var(--blue-light);
     text-transform: uppercase;
     margin-bottom: 8px;
     display: block;
 }

 .cta-detail-body {
     font-size: 14.5px;
     color: var(--text-gray);
     line-height: 1.55;
 }

 /* ============= FOOTER ============= */
 .site-footer {
     background: var(--bg);
     border-top: 1px solid var(--border-soft);
     padding: 64px 0 28px;
 }