/* =========================================================
   CORPORATE DBT & MODERN ELT TRAINING
   Page-scoped stylesheet
   Synchronized with the working CI/CD corporate course CSS
   ========================================================= */
.corp-dbt-page {
   --corp-dbt-navy: #07152d;
   --corp-dbt-navy-2: #0a2546;
   --corp-dbt-blue: #2563eb;
   --corp-dbt-blue-light: #60a5fa;
   --corp-dbt-cyan: #22d3ee;
   --corp-dbt-text: #182433;
   --corp-dbt-muted: #5e6b7a;
   --corp-dbt-border: #dce5ee;
   --corp-dbt-soft: #f7f9fc;
   --corp-dbt-white: #fff;
   margin: 0;
   padding: 0;
   display: block;
   overflow-x: hidden;
   color: var(--corp-dbt-text)
}

.corp-dbt-page h1,
.corp-dbt-page h2,
.corp-dbt-page h3,
.corp-dbt-page h4,
.corp-dbt-page p,
.corp-dbt-page a,
.corp-dbt-page li,
.corp-dbt-page span {
   font-family: inherit
}

.corp-dbt-page *,
.corp-dbt-page *::before,
.corp-dbt-page *::after {
   box-sizing: border-box
}

.corp-dbt-container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto
}

.corp-dbt-hero {
   position: relative;
   overflow: hidden;
   color: #fff;
   background: radial-gradient(circle at 82% 45%, rgba(37, 99, 235, .32), transparent 35%), linear-gradient(115deg, #041126 0%, #07152d 48%, #0d2c58 100%)
}

.corp-dbt-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .34;
   background-image: linear-gradient(rgba(61, 130, 198, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 130, 198, .08) 1px, transparent 1px);
   background-size: 54px 54px
}

.corp-dbt-breadcrumb {
   position: relative;
   z-index: 3;
   background: transparent
}

.corp-dbt-breadcrumb .corp-dbt-container {
   min-height: 48px;
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 11px;
   line-height: 1.5;
   color: rgba(255, 255, 255, .65)
}

.corp-dbt-breadcrumb a {
   color: rgba(255, 255, 255, .82);
   text-decoration: none
}

.corp-dbt-breadcrumb a:hover {
   color: #67d9ff
}

.corp-dbt-hero-grid {
   position: relative;
   z-index: 2;
   min-height: 530px;
   display: grid;
   grid-template-columns: 1fr 1.08fr;
   align-items: center;
   gap: 55px;
   padding-top: 42px;
   padding-bottom: 52px
}

.corp-dbt-hero-content {
   min-width: 0
}

.corp-dbt-kicker,
.corp-dbt-eyebrow {
   font-size: 11px;
   line-height: 1.4;
   font-weight: 800;
   letter-spacing: 1.4px;
   text-transform: uppercase
}

.corp-dbt-kicker {
   display: flex;
   align-items: center;
   gap: 11px;
   color: #67d9ff;
   margin-bottom: 20px
}

.corp-dbt-kicker span {
   display: inline-block;
   width: 42px;
   height: 2px;
   background: var(--corp-dbt-cyan)
}

.corp-dbt-hero h1 {
   max-width: 760px;
   margin: 0;
   font-size: 48px;
   line-height: 1.08;
   letter-spacing: -1.1px;
   font-weight: 750;
   color: #fff
}

.corp-dbt-hero h1 em {
   font-style: normal;
   color: var(--corp-dbt-blue-light)
}

.corp-dbt-hero h2 {
   max-width: 720px;
   margin: 16px 0 15px;
   font-size: 18px;
   line-height: 1.45;
   font-weight: 650;
   color: #60c8ff
}

.corp-dbt-hero-content>p {
   max-width: 620px;
   margin: 0 0 28px;
   font-size: 15px;
   line-height: 1.8;
   color: rgba(255, 255, 255, .88)
}

.corp-dbt-actions,
.corp-dbt-cta-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

.corp-dbt-btn {
   min-height: 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 0 22px;
   border-radius: 6px;
   font-size: 14px;
   line-height: 1;
   font-weight: 700;
   text-decoration: none;
   transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease
}

.corp-dbt-btn:hover {
   transform: translateY(-2px)
}

.corp-dbt-btn-primary {
   color: #fff;
   background: #2563eb;
   border: 1px solid #2563eb;
   box-shadow: 0 12px 28px rgba(20, 72, 151, .25)
}

.corp-dbt-btn-primary:hover {
   color: #fff;
   background: #1d4ed8;
   border-color: #1d4ed8
}

.corp-dbt-btn-secondary {
   color: #fff;
   background: rgba(7, 21, 45, .18);
   border: 1px solid rgba(255, 255, 255, .38)
}

.corp-dbt-btn-secondary:hover {
   color: #fff;
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .65)
}

.corp-dbt-benefits {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 22px
}

.corp-dbt-benefits span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   line-height: 1.5;
   color: rgba(255, 255, 255, .86)
}

.corp-dbt-benefits i {
   color: #31d4c0
}

.corp-dbt-hero-media {
   width: 100%;
   aspect-ratio: 3/2;
   overflow: hidden;
   border: 1px solid rgba(119, 191, 246, .34);
   border-radius: 16px;
   background: rgba(9, 38, 73, .72);
   box-shadow: 0 22px 55px rgba(0, 0, 0, .28)
}

.corp-dbt-hero-media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.corp-dbt-benefits-strip {
   position: relative;
   z-index: 4;
   background: #07152d;
   border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.corp-dbt-benefits-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr)
}

.corp-dbt-benefits-grid>div {
   min-height: 92px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 15px 14px;
   border-right: 1px solid rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .86);
   font-size: 13px;
   text-align: center
}

.corp-dbt-benefits-grid>div:last-child {
   border-right: 0
}

.corp-dbt-benefits-grid i {
   color: #31d4c0
}

.corp-dbt-section {
   padding: 78px 0;
   background: #fff
}

.corp-dbt-section+.corp-dbt-section {
   border-top: 1px solid #eef2f6
}

.corp-dbt-eyebrow {
   display: inline-block;
   margin-bottom: 11px;
   color: #2169b1
}

.corp-dbt-section-head {
   max-width: 850px;
   margin: 0 auto 34px;
   text-align: center
}

.corp-dbt-section-head h2,
.corp-dbt-seo-content h2 {
   margin: 0 0 14px;
   font-size: 38px;
   line-height: 1.18;
   letter-spacing: -.55px;
   font-weight: 750;
   color: #0c1b34
}

.corp-dbt-section-head p {
   margin: 0 auto;
   max-width: 780px;
   font-size: 15px;
   line-height: 1.8;
   color: var(--corp-dbt-muted)
}

.corp-dbt-card-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.corp-dbt-card {
   min-width: 0;
   padding: 25px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.corp-dbt-card:hover {
   transform: translateY(-3px);
   border-color: #bfdbfe;
   box-shadow: 0 14px 32px rgba(15, 23, 42, .08)
}

.corp-dbt-card-icon {
   width: 45px;
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 17px;
   color: var(--corp-dbt-blue);
   font-size: 19px;
   border-radius: 8px;
   background: #eff6ff
}

.corp-dbt-card h3 {
   margin: 0 0 10px;
   color: var(--corp-dbt-text);
   font-size: 17px;
   line-height: 1.4;
   font-weight: 700
}

.corp-dbt-card p {
   margin: 0;
   color: #475569;
   font-size: 13px;
   line-height: 1.7
}

.corp-dbt-related {
   padding: 0 0 78px;
   background: #fff
}

.corp-dbt-related-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.corp-dbt-related-grid a {
   display: block;
   min-height: 118px;
   padding: 21px 22px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 10px;
   background: #fff;
   text-decoration: none;
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.corp-dbt-related-grid a:hover {
   transform: translateY(-3px);
   border-color: #a9c7e6;
   box-shadow: 0 12px 28px rgba(16, 54, 94, .08)
}

.corp-dbt-related-grid strong {
   display: block;
   margin-bottom: 7px;
   font-size: 16px;
   line-height: 1.35;
   color: #10233f
}

.corp-dbt-related-grid span {
   display: block;
   font-size: 13px;
   line-height: 1.65;
   color: var(--corp-dbt-muted)
}

.corp-dbt-topic-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 28px
}

.corp-dbt-topic-card {
   padding: 24px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(15, 23, 42, .04)
}

.corp-dbt-topic-card h3 {
   margin: 0 0 12px;
   color: var(--corp-dbt-text);
   font-size: 17px;
   line-height: 1.4;
   font-weight: 700
}

.corp-dbt-topic-card ul {
   margin: 0;
   padding: 0;
   list-style: none
}

.corp-dbt-topic-card li {
   position: relative;
   margin-bottom: 9px;
   padding-left: 20px;
   color: #475569;
   font-size: 13px;
   line-height: 1.45
}

.corp-dbt-topic-card li:last-child {
   margin-bottom: 0
}

.corp-dbt-topic-card li::before {
   content: "\f058";
   position: absolute;
   left: 0;
   top: 1px;
   color: var(--corp-dbt-blue);
   font-family: "Font Awesome 6 Free";
   font-weight: 900
}

.corp-dbt-process-section {
   padding: 70px 0;
   background: #07152d
}

.corp-dbt-process-section .corp-dbt-eyebrow {
   color: #67d9ff
}

.corp-dbt-process-section h2 {
   color: #fff
}

.corp-dbt-process-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 14px
}

.corp-dbt-process-card {
   min-height: 190px;
   padding: 23px 19px;
   border: 1px solid rgba(105, 183, 241, .24);
   border-radius: 10px;
   background: #0b2341
}

.corp-dbt-process-card b {
   display: inline-block;
   margin-bottom: 16px;
   font-size: 11px;
   line-height: 1;
   color: #5edcff
}

.corp-dbt-process-card h3 {
   margin: 0 0 9px;
   font-size: 17px;
   line-height: 1.35;
   font-weight: 750;
   color: #fff
}

.corp-dbt-process-card p {
   margin: 0;
   font-size: 13px;
   line-height: 1.72;
   color: rgba(255, 255, 255, .72)
}

.corp-dbt-usecases {
   background: #f7f9fc
}

.corp-dbt-use-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.corp-dbt-use-grid>div {
   padding: 25px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(15, 23, 42, .05)
}

.corp-dbt-use-grid h3 {
   margin: 0 0 10px;
   font-size: 17px;
   line-height: 1.4;
   color: var(--corp-dbt-text)
}

.corp-dbt-use-grid h3 i {
   margin-right: 8px;
   color: var(--corp-dbt-blue)
}

.corp-dbt-use-grid p {
   margin: 0;
   font-size: 13px;
   line-height: 1.7;
   color: #475569
}

.corp-dbt-tech-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.corp-dbt-tech-grid span {
   display: block;
   padding: 15px 16px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 8px;
   background: #fff;
   color: #32485f;
   font-size: 13px;
   line-height: 1.45;
   text-align: center
}

.corp-dbt-seo {
   padding: 72px 0;
   background: #eef5fb
}

.corp-dbt-seo-content {
   max-width: 1050px;
   margin: 0 auto
}

.corp-dbt-seo-content h2 {
   margin-bottom: 16px
}

.corp-dbt-seo-content p {
   margin: 0 0 15px;
   font-size: 15px;
   line-height: 1.8;
   color: #4d6074
}

.corp-dbt-seo-points {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px 24px;
   margin-top: 22px
}

.corp-dbt-seo-points div {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 14px;
   line-height: 1.6;
   color: #334b63
}

.corp-dbt-seo-points i {
   margin-top: 4px;
   color: var(--corp-dbt-blue)
}

.corp-dbt-audience-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px
}

.corp-dbt-audience-grid>div {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 62px;
   padding: 14px 16px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 8px;
   background: #fff;
   font-size: 14px;
   font-weight: 600;
   color: #2f4258
}

.corp-dbt-audience-grid i {
   color: var(--corp-dbt-blue);
   font-size: 17px
}

.corp-dbt-faq {
   padding: 78px 0;
   background: #fff
}

.corp-dbt-faq-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px
}

.corp-dbt-faq-card {
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: 15px;
   padding: 24px;
   border: 1px solid var(--corp-dbt-border);
   border-radius: 10px;
   background: #fbfdff
}

.corp-dbt-faq-icon {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   color: var(--corp-dbt-blue);
   font-size: 22px;
   padding-top: 2px
}

.corp-dbt-faq-card h3 {
   margin: 0 0 10px;
   font-size: 16px;
   line-height: 1.45;
   font-weight: 750;
   color: #13243d
}

.corp-dbt-faq-card p {
   margin: 0;
   font-size: 13px;
   line-height: 1.72;
   color: var(--corp-dbt-muted)
}

.corp-dbt-cta {
   padding: 62px 0;
   background: #07152d
}

.corp-dbt-cta-inner {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 35px
}

.corp-dbt-cta .corp-dbt-eyebrow {
   color: #67d9ff
}

.corp-dbt-cta h2 {
   max-width: 800px;
   margin: 8px 0 12px;
   font-size: 38px;
   line-height: 1.2;
   font-weight: 750;
   color: #fff
}

.corp-dbt-cta p {
   max-width: 820px;
   margin: 0;
   font-size: 15px;
   line-height: 1.8;
   color: rgba(255, 255, 255, .72)
}

.corp-dbt-cta-actions {
   justify-content: flex-end
}

.corp-dbt-page i[class^="fa-"],
.corp-dbt-page i[class*=" fa-"] {
   font-family: "Font Awesome 6 Free";
   font-style: normal
}

@media(max-width:1199px) {
   .corp-dbt-hero-grid {
      gap: 38px
   }

   .corp-dbt-hero h1 {
      font-size: 44px
   }

   .corp-dbt-benefits-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .corp-dbt-benefits-grid>div:nth-child(3) {
      border-right: 0
   }

   .corp-dbt-benefits-grid>div:nth-child(n+4) {
      border-top: 1px solid rgba(255, 255, 255, .08)
   }

   .corp-dbt-card-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .corp-dbt-process-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(max-width:900px) {

   .corp-dbt-hero-grid,
   .corp-dbt-cta-inner {
      grid-template-columns: 1fr
   }

   .corp-dbt-hero-grid {
      min-height: auto;
      padding-top: 55px;
      padding-bottom: 55px
   }

   .corp-dbt-hero-media {
      max-width: 760px;
      margin: 0 auto
   }

   .corp-dbt-related-grid,
   .corp-dbt-tech-grid,
   .corp-dbt-audience-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .corp-dbt-card-grid,
   .corp-dbt-use-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .corp-dbt-topic-grid {
      grid-template-columns: 1fr
   }

   .corp-dbt-faq-grid,
   .corp-dbt-seo-points {
      grid-template-columns: 1fr
   }

   .corp-dbt-cta-actions {
      justify-content: flex-start
   }
}

@media(max-width:600px) {
   .corp-dbt-container {
      width: calc(100% - 32px)
   }

   .corp-dbt-breadcrumb .corp-dbt-container {
      min-height: 44px;
      gap: 7px;
      font-size: 11px;
      flex-wrap: wrap;
      padding: 8px 0
   }

   .corp-dbt-hero-grid {
      padding-top: 42px;
      padding-bottom: 42px;
      gap: 30px
   }

   .corp-dbt-hero h1 {
      font-size: 36px;
      line-height: 1.08;
      letter-spacing: -.8px
   }

   .corp-dbt-hero h2 {
      font-size: 17px
   }

   .corp-dbt-hero-content>p {
      font-size: 14px;
      line-height: 1.75
   }

   .corp-dbt-actions,
   .corp-dbt-cta-actions {
      width: 100%;
      flex-direction: column
   }

   .corp-dbt-btn {
      width: 100%
   }

   .corp-dbt-benefits-grid,
   .corp-dbt-card-grid,
   .corp-dbt-related-grid,
   .corp-dbt-tech-grid,
   .corp-dbt-audience-grid,
   .corp-dbt-use-grid,
   .corp-dbt-process-grid {
      grid-template-columns: 1fr
   }

   .corp-dbt-benefits-grid>div,
   .corp-dbt-benefits-grid>div:nth-child(3) {
      border-right: 0;
      border-top: 1px solid rgba(255, 255, 255, .08)
   }

   .corp-dbt-benefits-grid>div:first-child {
      border-top: 0
   }

   .corp-dbt-section,
   .corp-dbt-seo,
   .corp-dbt-faq {
      padding: 58px 0
   }

   .corp-dbt-section-head {
      margin-bottom: 34px
   }

   .corp-dbt-section-head h2,
   .corp-dbt-seo-content h2,
   .corp-dbt-cta h2 {
      font-size: 31px
   }

   .corp-dbt-faq-card {
      grid-template-columns: 34px 1fr;
      padding: 20px
   }

   .corp-dbt-faq-card h3 {
      font-size: 15px
   }
}

@media(max-width:400px) {
   .corp-dbt-container {
      width: calc(100% - 24px)
   }

   .corp-dbt-hero h1 {
      font-size: 32px
   }

   .corp-dbt-hero h2 {
      font-size: 16px
   }

   .corp-dbt-section-head h2,
   .corp-dbt-seo-content h2,
   .corp-dbt-cta h2 {
      font-size: 28px
   }

   .corp-dbt-card,
   .corp-dbt-topic-card,
   .corp-dbt-use-grid>div,
   .corp-dbt-faq-card {
      padding: 20px
   }
}