/* ==========================================================================
   AWS homepage design system — recreation of aws.amazon.com
   Faithful to AWS's visual language: Amazon Ember type stack, the squid-ink
   navy nav (#232f3e / #0f1b2a), AWS blue (#0972d3) links/buttons, and the
   signature orange (#ff9900) call-to-action. Scoped under `.aws` so it never
   leaks into the rest of the Sentrize site.
   Amazon Ember is proprietary, so we use AWS's own fallback stack
   (Helvetica Neue / Arial) — identical to what aws.amazon.com serves when the
   webfont is unavailable.
   ========================================================================== */

.aws {
  /* Brand palette (pulled from AWS's compiled CSS) */
  --aws-squid-ink: #0f1b2a;
  --aws-nav: #232f3e;
  --aws-nav-2: #161e2d;
  --aws-nav-hover: #2a3f5b;
  --aws-navy-deep: #141f2e;
  --aws-orange: #ff9900;
  --aws-orange-hover: #ec7211;
  --aws-orange-press: #eb5f07;
  --aws-blue: #0972d3;
  --aws-blue-hover: #033160;
  --aws-blue-light: #539fe5;
  --aws-link: #007dbc;
  --aws-link-hover: #0f1b2a;

  --aws-ink: #16191f;
  --aws-text: #232f3e;
  --aws-text-soft: #414d5c;
  --aws-text-muted: #5f6b7a;
  --aws-border: #d5dbdb;
  --aws-border-soft: #e9ebed;
  --aws-bg: #ffffff;
  --aws-bg-soft: #f2f3f3;
  --aws-bg-tint: #f1faff;

  --aws-radius: 8px;
  --aws-radius-sm: 4px;
  --aws-shadow: 0 1px 1px rgba(0, 7, 22, 0.12), 0 4px 12px rgba(0, 7, 22, 0.08);
  --aws-shadow-lg: 0 6px 24px rgba(0, 7, 22, 0.18);

  --aws-font: "Amazon Ember", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --aws-font-display: "Amazon Ember Display", "Amazon Ember", "Helvetica Neue",
    Helvetica, Arial, sans-serif;

  --aws-max: 1200px;

  font-family: var(--aws-font);
  color: var(--aws-text);
  background: var(--aws-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

.aws *,
.aws *::before,
.aws *::after {
  box-sizing: border-box;
}

.aws img {
  max-width: 100%;
  display: block;
}

.aws a {
  color: var(--aws-link);
  text-decoration: none;
}
.aws a:hover {
  color: var(--aws-link-hover);
  text-decoration: underline;
}

.aws h1,
.aws h2,
.aws h3,
.aws h4 {
  font-family: var(--aws-font-display);
  color: var(--aws-text);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aws p {
  margin: 0;
}

.aws-shell {
  overflow-x: hidden;
}

.aws-container {
  max-width: var(--aws-max);
  margin: 0 auto;
  padding: 0 22px;
}

/* Skip link */
.aws-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--aws-orange);
  color: #000;
  padding: 10px 16px;
  z-index: 1200;
}
.aws-skip:focus {
  left: 8px;
  top: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.aws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--aws-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--aws-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.aws-btn--primary {
  background: var(--aws-orange);
  color: #0f1b2a;
  border-color: var(--aws-orange);
}
.aws-btn--primary:hover {
  background: var(--aws-orange-hover);
  border-color: var(--aws-orange-hover);
  color: #0f1b2a;
  text-decoration: none;
}
.aws-btn--secondary {
  background: transparent;
  color: var(--aws-blue);
  border-color: var(--aws-blue);
}
.aws-btn--secondary:hover {
  background: #f2f8fd;
  color: var(--aws-blue-hover);
  text-decoration: none;
}
.aws-btn--light {
  background: #fff;
  color: #0f1b2a;
  border-color: #fff;
}
.aws-btn--light:hover {
  background: #eaeded;
  color: #0f1b2a;
  text-decoration: none;
}
.aws-btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: #8d99a8;
}
.aws-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}
.aws-btn--lg {
  padding: 15px 26px;
  font-size: 16px;
}

.aws-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--aws-link);
}
.aws-link-arrow::after {
  content: "»";
  font-weight: 400;
}
.aws-link-arrow:hover {
  color: var(--aws-link-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.aws-utility {
  background: var(--aws-nav-2);
  color: #d5dbdb;
  font-size: 13px;
}
.aws-utility__row {
  display: flex;
  align-items: center;
  height: 39px;
  gap: 8px;
}
.aws-utility__spacer {
  flex: 1;
}
.aws-utility a {
  color: #d5dbdb;
  padding: 0 11px;
  line-height: 39px;
  display: inline-block;
}
.aws-utility a:hover {
  color: #fff;
  background: #2a3550;
  text-decoration: none;
}
.aws-utility__region::after {
  content: "▾";
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Primary global navigation
   -------------------------------------------------------------------------- */
.aws-gnav {
  background: var(--aws-nav);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.aws-gnav__row {
  display: flex;
  align-items: center;
  height: 62px;
  gap: 6px;
}
.aws-gnav__brand {
  display: flex;
  align-items: center;
  padding-right: 8px;
}
.aws-gnav__brand img {
  height: 30px;
  width: auto;
}
.aws-gnav__search {
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--aws-radius-sm);
  height: 36px;
  padding: 0 10px;
  margin: 0 6px;
}
.aws-gnav__search svg {
  width: 16px;
  height: 16px;
  color: #545b64;
  flex: none;
}
.aws-gnav__search input {
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 14px;
  color: #16191f;
  background: transparent;
  padding: 0 8px;
  font-family: var(--aws-font);
}
.aws-gnav__menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  height: 100%;
}
.aws-gnav__item {
  height: 100%;
  display: flex;
  align-items: center;
  position: static;
}
.aws-gnav__link {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 0 10px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.aws-gnav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.aws-gnav__item:hover .aws-gnav__link {
  border-bottom-color: var(--aws-orange);
}
.aws-gnav__spacer {
  flex: 1;
}
.aws-gnav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aws-gnav__signin {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 4px;
}
.aws-gnav__signin:hover {
  color: #fff;
  text-decoration: underline;
}

/* Mega menu */
.aws-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  color: var(--aws-text);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  border-top: 1px solid #e9ebed;
  padding: 28px 0 34px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 999;
}
.aws-gnav__item:hover .aws-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.aws-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 40px;
}
.aws-mega__col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aws-text-muted);
  margin-bottom: 12px;
  font-family: var(--aws-font);
}
.aws-mega__col a {
  display: block;
  font-size: 14px;
  color: var(--aws-link);
  padding: 5px 0;
}
.aws-mega__col a small {
  display: block;
  color: var(--aws-text-muted);
  font-weight: 400;
  font-size: 12px;
}
.aws-mega__feature {
  background: var(--aws-bg-soft);
  border-radius: var(--aws-radius);
  padding: 20px;
}
.aws-mega__feature h4 {
  font-family: var(--aws-font-display);
  font-size: 16px;
  color: var(--aws-text);
  text-transform: none;
  letter-spacing: 0;
}

/* Mobile nav toggle */
.aws-gnav__toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.aws-hero {
  background: var(--aws-squid-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.aws-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding: 64px 0 72px;
}
.aws-hero__eyebrow {
  color: var(--aws-orange);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.aws-hero h1 {
  color: #fff;
  font-size: 54px;
  line-height: 1.05;
  margin-bottom: 20px;
}
.aws-hero p {
  color: #d5dbdb;
  font-size: 18px;
  max-width: 30em;
  margin-bottom: 30px;
}
.aws-hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.aws-hero__media {
  border-radius: var(--aws-radius);
  overflow: hidden;
  box-shadow: var(--aws-shadow-lg);
}
.aws-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aws-hero__glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 153, 0, 0.18), transparent 65%);
  top: -160px;
  right: -120px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
.aws-section {
  padding: 66px 0;
}
.aws-section--soft {
  background: var(--aws-bg-soft);
}
.aws-section--tint {
  background: var(--aws-bg-tint);
}
.aws-section__head {
  margin-bottom: 34px;
}
.aws-section__head h2 {
  font-size: 34px;
  line-height: 1.15;
}
.aws-section__head p {
  color: var(--aws-text-soft);
  font-size: 17px;
  margin-top: 12px;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Get-started cards
   -------------------------------------------------------------------------- */
.aws-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.aws-card {
  background: #fff;
  border: 1px solid var(--aws-border-soft);
  border-radius: var(--aws-radius);
  padding: 26px 22px;
  box-shadow: var(--aws-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aws-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--aws-shadow-lg);
}
.aws-card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--aws-radius-sm);
  background: linear-gradient(135deg, #232f3e, #0972d3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aws-card__icon svg {
  width: 24px;
  height: 24px;
}
.aws-card h3 {
  font-size: 19px;
}
.aws-card p {
  color: var(--aws-text-soft);
  font-size: 14px;
  flex: 1;
}

/* --------------------------------------------------------------------------
   Customer story carousel
   -------------------------------------------------------------------------- */
.aws-stories {
  background: var(--aws-navy-deep);
  color: #fff;
  padding: 70px 0;
}
.aws-stories h2 {
  color: #fff;
  font-size: 34px;
  margin-bottom: 30px;
}
.aws-carousel {
  position: relative;
}
.aws-carousel__track {
  display: flex;
  overflow: hidden;
}
.aws-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.aws-slide[hidden] {
  display: none;
}
.aws-slide__media {
  border-radius: var(--aws-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #1c2838;
}
.aws-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aws-slide__body .aws-slide__tag {
  color: var(--aws-orange);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.aws-slide__body h3 {
  color: #fff;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 16px;
}
.aws-slide__body p {
  color: #d5dbdb;
  font-size: 16px;
  margin-bottom: 22px;
}
.aws-carousel__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
.aws-carousel__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #55606e;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.aws-carousel__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.aws-carousel__dots {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}
.aws-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: #55606e;
  cursor: pointer;
  padding: 0;
}
.aws-dot[aria-selected="true"] {
  background: var(--aws-orange);
  width: 26px;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   Feature announcements (2-up)
   -------------------------------------------------------------------------- */
.aws-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.aws-feature {
  position: relative;
  border-radius: var(--aws-radius);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.aws-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.aws-feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 27, 42, 0.92) 0%,
    rgba(15, 27, 42, 0.35) 55%,
    rgba(15, 27, 42, 0.1) 100%
  );
  z-index: 1;
}
.aws-feature__body {
  position: relative;
  z-index: 2;
  padding: 30px;
}
.aws-feature__tag {
  color: var(--aws-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.aws-feature h3 {
  color: #fff;
  font-size: 24px;
  margin: 10px 0 14px;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Industry grid
   -------------------------------------------------------------------------- */
.aws-industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.aws-industry {
  position: relative;
  border-radius: var(--aws-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  color: #fff;
  display: block;
}
.aws-industry img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.aws-industry__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 27, 42, 0.9),
    rgba(15, 27, 42, 0.15)
  );
}
.aws-industry__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  font-family: var(--aws-font-display);
  font-weight: 700;
  font-size: 18px;
  z-index: 2;
}
.aws-industry:hover {
  text-decoration: none;
}
.aws-industry:hover img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   Global infrastructure / stats
   -------------------------------------------------------------------------- */
.aws-infra {
  background: var(--aws-squid-ink);
  color: #fff;
  padding: 72px 0;
}
.aws-infra__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.aws-infra h2 {
  color: #fff;
  font-size: 34px;
  margin-bottom: 16px;
}
.aws-infra p {
  color: #d5dbdb;
  font-size: 17px;
  margin-bottom: 26px;
}
.aws-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 34px;
}
.aws-stat__num {
  font-family: var(--aws-font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--aws-orange);
  line-height: 1;
}
.aws-stat__label {
  color: #d5dbdb;
  font-size: 14px;
  margin-top: 8px;
}
.aws-infra__map {
  border-radius: var(--aws-radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Account CTA band
   -------------------------------------------------------------------------- */
.aws-account {
  background: var(--aws-nav);
  color: #fff;
  padding: 54px 0;
}
.aws-account__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.aws-account h2 {
  color: #fff;
  font-size: 30px;
}
.aws-account ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.aws-account li {
  color: #d5dbdb;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aws-account li::before {
  content: "✓";
  color: var(--aws-orange);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.aws-footer {
  background: var(--aws-nav);
  color: #d5dbdb;
}
.aws-footer__cta {
  border-bottom: 1px solid #3a4553;
  padding: 34px 0;
}
.aws-footer__cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.aws-footer__cta img {
  height: 34px;
}
.aws-footer__links {
  padding: 46px 0 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 30px;
}
.aws-footer__col h4 {
  color: #fff;
  font-size: 15px;
  font-family: var(--aws-font);
  margin: 0 0 14px;
}
.aws-footer__col a {
  display: block;
  color: #d5dbdb;
  font-size: 13px;
  padding: 5px 0;
}
.aws-footer__col a:hover {
  color: #fff;
  text-decoration: underline;
}
.aws-footer__social {
  border-top: 1px solid #3a4553;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.aws-footer__social .aws-footer__socials {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.aws-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #55606e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d5dbdb;
}
.aws-footer__social a:hover {
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}
.aws-footer__bottom {
  background: var(--aws-nav-2);
  padding: 18px 0;
}
.aws-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  font-size: 12px;
  color: #b5b5b5;
}
.aws-footer__bottom a {
  color: #b5b5b5;
  font-size: 12px;
}
.aws-footer__bottom a:hover {
  color: #fff;
}
.aws-footer__bottom .aws-footer__legal {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .aws-cards,
  .aws-industries {
    grid-template-columns: repeat(2, 1fr);
  }
  .aws-mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .aws-gnav__menu,
  .aws-gnav__search,
  .aws-utility {
    display: none;
  }
  .aws-gnav__toggle {
    display: inline-flex;
  }
  .aws-gnav.is-open .aws-gnav__menu {
    display: flex;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--aws-nav);
    padding: 8px 0;
    height: auto;
    max-height: 70vh;
    overflow-y: auto;
    border-top: 1px solid #3a4553;
  }
  .aws-gnav.is-open .aws-gnav__item {
    height: auto;
  }
  .aws-gnav.is-open .aws-gnav__link {
    height: auto;
    padding: 14px 22px;
    width: 100%;
    border-bottom: 1px solid #2f3b4c;
  }
  .aws-mega {
    display: none;
  }
  .aws-hero__inner,
  .aws-slide,
  .aws-infra__inner,
  .aws-features {
    grid-template-columns: 1fr;
  }
  .aws-hero h1 {
    font-size: 40px;
  }
  .aws-hero__media {
    order: -1;
  }
  .aws-footer__links {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 680px) {
  .aws-cards,
  .aws-industries,
  .aws-stats,
  .aws-footer__links {
    grid-template-columns: 1fr 1fr;
  }
  .aws-hero h1 {
    font-size: 32px;
  }
  .aws-section__head h2,
  .aws-stories h2,
  .aws-infra h2 {
    font-size: 26px;
  }
  .aws-gnav__cta .aws-btn {
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media (max-width: 460px) {
  .aws-cards,
  .aws-industries,
  .aws-footer__links {
    grid-template-columns: 1fr;
  }
}