*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
      --teal:#82ECFF;
      --teal-50:#E9F7FF;
       --gray-700: #EBEEF0;
      --color-primary:   #E03B8F;    
      --color-accent:    #ff2d55;
      --color-purple:    #8b5cf6;
      --color-dark:      #26313C;
      --color-dark-card: #1f2937;
      --color-mid:       #374151;
      --color-border:    #e5e7eb;
      --color-bg:        #ffffff;
      --color-bg-light:  #f9fafb;
      --color-bg-blue:   #eff6ff;
      --color-text:      #374151;
      --color-text-sm:   #333;
      --color-white:     #ffffff;
      --color-green:     #10b981;
      --color-green-50:  #9DD549;
      --color-accent-50:  #FFB8DC;
      
      --color-orange:    #f59e0b;
      --color-blue:      #3b82f6;
      --radius-sm:  6px;
      --radius-md:  10px;
      --radius-lg:  16px;
      --radius-xl:  24px;
      --font:       'Exo', sans-serif;
      --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
      --shadow-md:  0 4px 16px rgba(0,0,0,.10);
      --shadow-lg:  0 8px 32px rgba(0,0,0,.14);
      --max-w:      80%;
      --pad-x:      clamp(1rem, 4vw, 2.5rem);


  }
  img{ max-width: 100%;}

  html { scroll-behavior: smooth; }
  body {

   font-family: "Exo", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-300);  }

.hero-section img{ width: 100%; height: auto; object-fit: cover;}
.bg-teal{ background-color: var(--teal-50); }
.text-white{ color: var(--color-white) !important;}
.text-teal{ color: var(--teal) !important;}
.text-green-50{ color: var(--color-green-50) !important;}
.text-accent-50{ color: var(--color-accent-50) !important;}
    /* ─── Reset ─────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── Utilities ──────────────────────────────────────────────── */
    .pb-0 { padding-bottom: 0 !important; }
    .pt-0 { padding-top: 0 !important; }
 
    .section    { padding-block: 5rem; }
    .section--gray   { background: var(--color-bg-light); }
    .section--dark   { background: var(--color-dark); color: var(--color-white); }
    .section--blue   { background: var(--color-bg-blue); }
    .tag {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .72rem; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; padding: .25rem .65rem;
      border-radius: 999px;
    }
    .tag--red    { background: #fee2e2; color: var(--color-primary); }
    .tag--purple { background: #ede9fe; color: var(--color-purple); }
    .tag--green  { background: #d1fae5; color: var(--color-green); }
    .tag--blue   { background: #dbeafe; color: var(--color-blue); }
    .section-label {
      font-size: 1rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--color-text-sm) !important; margin-bottom:1rem;
    }
    .section-title {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 700; line-height: 1.2;
      color: var(--color-primary); margin-bottom:0;
    }
    .section-title--color-white { color: var(--color-white); }
    .section-desc { font-size: 1rem; color: var(--color-text-sm); max-width: 680px; }
    .btn {
      display: inline-flex; align-items: center; gap: .45rem;
      font-size: .875rem; font-weight: 600; padding: .6rem 1.25rem;
      border-radius: var(--radius-sm); border: none; transition: all .2s;
    }
    .btn--dark    { background: var(--color-dark);    color: var(--color-white); }
    .btn--outline { background: transparent; color: var(--color-dark); border: 1.5px solid var(--color-border); }
    .btn--red     { background: var(--color-primary); color: var(--color-white); }
    .btn--color-white   { background: var(--color-white);   color: var(--color-dark); }
    .btn:hover { opacity: .85; transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .divider { width: 3rem; height: 3px; background: var(--color-primary); border-radius: 2px; margin-block: 1rem; }

    /* ─── HERO ───────────────────────────────────────────────────── */
    .overview { padding-block: 4rem 3rem;  }

    .overview__subtitle { font-size: 24px; color: var(--color-text-sm); font-weight: 500; margin: 1rem 0; }
    .overview__desc p { font-size:16px; color: var(--color-text-sm); margin-bottom: 30px;}
    .overview__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

    /* ─── FEATURE SECTION ────────────────────────────────────────── */
    .features-header {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem; margin-bottom:1rem;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    @media (max-width: 700px) { .features-grid { grid-template-columns: 1fr; } }

    .feature-card {
      background: var(--color-white);
      padding: 1.25rem 1.4rem; border-left: 4px solid var(--color-primary);
      transition: box-shadow .2s, transform .2s; color: var(--color-dark);
    }
 .feature-card:nth-child(3),.feature-card:nth-child(4),.feature-card:nth-child(7),.feature-card:nth-child(8),.feature-card:nth-child(11),.feature-card:nth-child(12)  { background-color: var(--color-dark);color: var(--color-white); } 

    .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px);  }
    .feature-card__title { font-size: .95rem; font-weight: 700; margin-bottom: .45rem; color: currentColor; }
    .feature-card__body  { font-size: .83rem; color: currentColor; line-height: 1.65; }

    /* ─── CTA BANNER ─────────────────────────────────────────────── */
    .cta-banner {
      background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
      border-radius: var(--radius-xl); padding: 2.5rem 2.5rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1.5rem; margin-block: 3rem;
    }
    .cta-banner__text h2 { font-size: 1.4rem; font-weight: 800; color: white; margin-bottom: .4rem; }
    .cta-banner__text p  { font-size: .9rem; color: rgba(255,255,255,.75); }

    /* ─── WHY IT MATTERS ─────────────────────────────────────────── */
    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
      align-items: start;
      margin-top: 2.5rem;
    }
    @media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }

    .capabilities-list { display: flex; flex-direction: column; gap: .75rem; }
    .capability-item {
      display: flex; align-items: center; gap: .9rem;
      background: var(--color-dark); color: white;
      border-radius: var(--radius-sm); padding: .9rem 1.1rem;
      font-size:20px; font-weight: 600;
    }
    .capability-item__icon {
      width:9px; height: 32px; border-radius: var(--radius-sm);
      background: rgba(255,255,255,.1); display: grid; place-items: center; flex-shrink: 0;
      font-size: 1rem;
    }

    .enables-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
    }
    .enable-card {  min-height: 131px;
   background: linear-gradient(0deg, #0B1326 0%, rgba(11, 19, 38, 0.60) 100%, rgba(11, 19, 38, 0.8) 100%); border-radius: var(--radius-md);
      padding: 1.2rem; color: white;
    }
    .enable-card__icon { font-size: 1.4rem; margin-bottom: .6rem; }
    .enable-card__title::before{ content: ""; width:50px; height: 6px; background-color: var(--color-white); display: block; border-radius: 30px; margin-bottom:1rem;}
    .enable-card__title { font-size: 16px; font-weight: 700; margin-bottom: .3rem; color: var(--color-white); }
    .enable-card__body  { font-size: .78rem; color: rgba(255,255,255,.6); }

    /* ─── BRAND LOGOS ────────────────────────────────────────────── */
    .brand-logos {
      display: flex; align-items: center; justify-content: flex-end;
      gap: 1.2rem; margin-top: 1.5rem; flex-wrap: wrap;
    }
     .brand-logos img{ max-height: 35px !important;}
    .brand-pill {
      display: inline-flex; align-items: center; gap: .5rem;
      border: 2px solid var(--color-border); border-radius: 999px;
      padding: .45rem 1rem; font-weight: 800; font-size: .95rem;
    }
    .brand-pill--streamcake { color: var(--color-purple); border-color: var(--color-purple); }
    .brand-pill--ant        { color: var(--color-primary); border-color: var(--color-primary); }

    /* ─── STREAMCAKE SERVICES ────────────────────────────────────── */
    .services-tabs { display: flex; gap:1rem; flex-wrap: wrap; margin-bottom: 2rem; }
    .tab-btn {
      font-size: .83rem; font-weight: 600; padding: 1rem  0; border: 0px;  border-bottom: 2px solid #CECECE;
      background: transparent; color: #CECECE; transition: all .2s;
    }
    .tab-btn.active, .tab-btn:hover {
       color:  #97F8FF; border-color: #97F8FF;
    }
    .services-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem;
    }
    .service-card {
      border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
      padding: 1.4rem; transition: box-shadow .2s, transform .2s; background: white;
    }
    .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .service-card__provider {
      display: flex; align-items: center; gap: .5rem;
      font-size: .75rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--color-text-sm); margin-bottom: .8rem;
    }
    .service-card__provider-icon {
      width: 28px; height: 28px; border-radius: 4px;
      background: var(--color-bg-light); display: grid; place-items: center; font-size: .85rem;
    }
    .service-card__title { font-size: 1rem; font-weight: 700; color: var(--color-dark); margin-bottom: .5rem; }
    .service-card__body  { font-size: .82rem; color: var(--color-text-sm); margin-bottom: 1rem; line-height: 1.6; }
    .service-card__badge {
      display: inline-block; font-size: .7rem; font-weight: 700;
      padding: .2rem .55rem; border-radius: 4px; margin-bottom: .75rem;
    }
    .service-card__badge--cdn  { background: #d1fae5; color: var(--color-green); }
    .service-card__badge--storage { background: #dbeafe; color: var(--color-blue); }
    .service-card__link {
      font-size: .83rem; font-weight: 600; color: var(--color-primary);
      display: flex; align-items: center; gap: .3rem;
    }
    .service-card__link:hover { opacity: .75; }
    /* ─── WHY STREAMCAKE CORE ─────────────────────────────────────── */
    .core-grid {
      display: grid; margin-top: 20px;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
    }

    /* First row: 2 items */
.item-1 {
  grid-column: span 2; /* takes 2 columns */
}

.item-2 {
  grid-column: span 1; /* takes 1 column */
}
.nav-logo{ max-height: 50px;}

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

    .core-card { width: 100%;
      border: 1.5px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-white);
      padding: 1.4rem; background: var(--color-dark); transition: box-shadow .2s;
    }
    .core-card:hover { box-shadow: var(--shadow-md); }
    .core-card--highlight { background: var(--color-dark); color: white; border-color: var(--color-dark); }
    .core-card--span2 { grid-column: span 2; }
    @media (max-width: 680px) { .core-card--span2 { grid-column: span 1; } }
    .core-card__icon { font-size: 1.5rem; margin-bottom: .7rem; }
    .core-card__label {
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--color-green); margin-bottom: .3rem;
    }
    .core-card__title { font-size: 20px; font-weight: 700; margin-bottom: .4rem; color:var(--color-white); }
    .core-card__body  { font-size: .82rem; line-height: 1.6; }
    .core-card--highlight .core-card__body { color: rgba(255,255,255,.7); }
    .core-card__bar-group { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
    .core-card__bar {
      height: 6px; border-radius: 3px; background: var(--color-border);
      position: relative; overflow: hidden;
    }
    .core-card__bar::after {
      content: ''; position: absolute; inset-block: 0; left: 0;
      background: var(--color-green); border-radius: 3px;
    }
    .core-card__bar[data-fill="80"]::after  { width: 80%; }
    .core-card__bar[data-fill="55"]::after  { width: 55%; }
    .core-card__bar[data-fill="95"]::after  { width: 95%; }



/* card */

   .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 16px;
    }

    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: calc(50% - 8px);
    }

    .card {
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .related-card{ background-color: var(--gray-700) !important; 
border-top: 5px solid #72B6BA;}

 .card-header {
      padding: 20px 20px 0 20px; display: flex; align-items: center; gap: 12px;
    }
    .card-body {
      padding: 20px;
      flex: 1;
    }

    .icon {
      width: 36px;
      height: 36px;
      margin-bottom: 10px;
    }

    .aws-label {
      font-size: 12px;
      color: #888780;
      font-weight:600;
      margin-bottom: 0;
    }

    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: #1a1a18;
      margin-bottom: 0;
    }

    .desc {
      font-size: 13px;
      color: #5f5e5a;
      line-height: 1.65;
      margin-bottom: 14px;
    }

    .badge {
      display: inline-block;
      font-size:13px;
      padding: 4px 12px;
      border-radius: 20px;
      font-weight:600;
    }

    .badge-teal    { background: #E1F5EE; color: #0F6E56; }
    .badge-purple  { background: #EEEDFE; color: #3C3489; }
    .badge-gray    { background: #F1EFE8; color: #444441; }
    .badge-blue    { background: #E6F1FB; color: #0C447C; }
    .badge-coral   { background: #FAECE7; color: #712B13; }
    .badge-amber   { background: #FAEEDA; color: #633806; }

    .card-footer {
      border-top: 0.5px solid rgba(0,0,0,0.1);
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      color: #1a1a18;
      cursor: pointer;
      transition: background 0.15s;
    }

    .card-footer:hover {
      background: #f5f5f3;
    }




    /* ─── KEY BENEFITS ───────────────────────────────────────────── */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    @media (max-width: 800px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { .benefits-grid { grid-template-columns: 1fr; } }

    .benefit-card {
      border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-dark); color: var(--color-white);
      padding: 1.4rem; text-align: center; transition: all .2s;
    }
    .benefit-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
    .benefit-card__icon {
      font-size: 1.8rem; margin-bottom: .8rem;
      display: flex; justify-content: center;
    }
    .benefit-card__title { font-size: 1.2rem; font-weight: 700; color: var(--color-white); margin-bottom: .45rem; }
    .benefit-card__body  { font-size: 1rem; color: #BBC9CC
; line-height: 1.6; }

    /* ─── HOW IT WORKS ───────────────────────────────────────────── */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
      margin-top: 2rem;
    }
    @media (max-width: 800px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .steps-grid { grid-template-columns: 1fr; } }

    .step-card {
    display: flex;
padding: 32px 32px 52px 32px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
justify-self: stretch;
background: #26313C; border-radius: 8px; border-left: 4px solid #26313C;
    }
    .step-card:nth-child(1) { border-color:#45D9F3 !important; }
    .step-card:nth-child(2) { border-color:#93589F !important; }
    .step-card:nth-child(3) { border-color:#f38a9f !important; }
    .step-card:nth-child(4) { border-color:#99DB29 !important; }
    .step-card:nth-child(4) .step-card__num {color: #8BA860!important; }


    .step-card__num {
     color: rgba(181, 241, 255, 0.20) !important;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px;
    }
    .step-card__title { color: #FFF;
font-family: Exo;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 28px; }
    .step-card__body  { color: #FFF;
font-family: Exo;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */}
    .step-card:last-child .step-card__num { color: var(--color-orange); }

    /* ─── TAB PANELS ─────────────────────────────────────────────── */
    .tab-panel { display: none; }
    .tab-panel--active { display: block; animation: fadeIn .25s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

    /* ─── Responsive ─────────────────────────────────────────────── */
    @media (max-width: 600px) {
      .cta-banner { text-align: center; justify-content: center; }
      .features-header { flex-direction: column; align-items: flex-start; }
    }

    /* //cta block */

     .cta-block-dark {
      background: linear-gradient(260deg, #8834FD 1%, #728CFE 98%);
      border-radius: 6px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px; margin: 30px 0; color: var(--color-white);
    }

       .cta-block-light {
      background: #ddeef8;
      border-radius: 6px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px; margin: 30px 0;
    }

   .cta-text h2 {
      font-size: 22px;
      font-weight: 700;
      color: #1a1a18;
      margin-bottom: 6px;
    }

    .cta-text p {
      font-size: 14px;
      color: #444441;
      line-height: 1.5;
    }

   .cta-text .banner-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 11px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
      transition: opacity 0.15s;
      border: 1.5px solid transparent;
    }

    .btn:hover { opacity: 0.85; }

    .btn-dark {
      background: #1a1a18;
      color: #ffffff;
      border-color: #1a1a18;
    }

     .btn-white {
       background: var(--color-white);
      color: var(--color-dark);
      border-color:var(--color-white);
    }


    .btn-outline-white {
      background:transparent;
      color: var(--color-white);
      border-color: var(--color-white);
    }

    
    .btn-outline-dark {
      background:transparent;
      color: var(--dark);
      border-color: var(--dark);
    }

    /*cta block end*/

    .cta-full-block { position: relative; }
.cta-full-block .cta-block-overlay  { position: absolute; left: 0; right: 0; top:50%; transform: translateY(-50%);  }
.cta-full-block img{ width: 100%; }
.cta-full-block .cta-text{ text-align: center;}
.cta-full-block .cta-text {
    max-width: 1020px;
    margin: 0 auto;
}

.cta-full-block .banner-actions{ justify-content: center; text-align: center; margin-top: 20px;}
.cta-full-block .cta-text h2 {
	font-size: 55px;}


  

    @media (max-width: 700px) {
      .banner {
        flex-direction: column;
        align-items: flex-start;
      }
      .banner-actions {
        flex-wrap: wrap;
      }
    }

    .core-capabilities{ padding: 45px 45px 100px 45px;}
    .core-capabilities h2,.key-benifts h2,.how-it-works-section h2{ font-size: 30px; margin-bottom: 20px; font-weight: 700;}


     .key-benifts{ padding: 45px; margin: 0 45px; background-color: var(--color-white); position: relative; top: -30px;
  box-shadow: 4px 4px 24px 0 rgba(0, 0, 0, 0.20);}

  .how-it-works-section{ margin: 15px 40px;}
#overview img{ max-height: 50px !important;}
#overview .arctecture img{ max-height: 100% !important;}
.section-label{ position: relative;}
.section-label span{ position: relative; padding-right: 10px; background-color: var(--color-white); display: inline-block; }
.section-label:after{content: ""; height: 2px; width: 100%; background-color: #DADADA; display: block; position: absolute; left: 0; right: 0; top:50%; transform: translateY(-50%); z-index: -1;}
    @media (min-width: 1200px) {

      .container { max-width: var(--max-w) !important; margin-inline: auto; padding-inline: var(--pad-x); }

    }