/* Cloudasys — IaaS Landing */
:root{
  --cld-bg: #04042c;
  --cld-accent: #9243f9;
  --ink: #04042c;
  --muted: #555;
}

/* HERO (full-bleed) */
.iaas-hero { background: #000; }
.iaas-hero .container-fluid { padding-left:0; padding-right:0; }
.iaas-hero-wrap { position: relative; height: min(70vh, 720px); overflow: hidden; }
.iaas-hero-bg {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.7);
}

/* HERO Heading (desktop + responsive) */
.iaas-hero-overlay h1,
.iaas-hero h1 {
  font-weight: 700;
  color:#ff7854;
  font-size: 3rem;       /* default desktop size */
  line-height: 1.2;
}

@media (max-width: 992px) {
  .iaas-hero-overlay h1,
  .iaas-hero h1 {
    font-size: 2.25rem;  /* Tablets */
  }
}

@media (max-width: 576px) {
  .iaas-hero-overlay h1,
  .iaas-hero h1 {
    font-size: 1.75rem;  /* Mobile */
    line-height: 1.3;
  }
}

.iaas-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,4,44,0.1) 0%, rgba(4,4,44,0.6) 50%, rgba(4,4,44,0.88) 100%);
  color: #fff; display: flex; align-items: end; padding: 36px 0;
}
.iaas-hero .lead { color: #e8e8e8; margin: 10px 0 18px; max-width: 900px; }
.hero-ctas .btn-default { border-color: rgba(255,255,255,.35); color:#fff; background: transparent; }
.hero-ctas .btn-default:hover { background: rgba(255,255,255,.12); }
.hero-bullets { list-style: none; padding:0; margin: 14px 0 0; display: flex; gap: 16px; flex-wrap: wrap; color:#e6e6e6; }
.hero-bullets i { color: var(--cld-accent); }

/* INTRO */
.iaas-intro .section-title { color: var(--ink); font-weight: 700; }
.iaas-intro .section-subtitle { color: var(--muted); }
.pill-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pill { border:1px solid #ddd; border-radius: 999px; padding:6px 12px; font-weight:600; color:#333; background:#fff; }
.mini-card { background:#fff; border:1px solid #eee; border-radius: 12px; padding: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.checklist { list-style:none; padding:0; margin:0; }
.checklist li::before { content:"✓"; color: #2e7d32; font-weight:700; margin-right:8px; }

/* FEATURES */
.iaas-features { background:#f9f9f9; }
.feature-icon { color: var(--cld-accent); font-size: 28px; margin-bottom: 10px; }
.iaas-features h4 { color: var(--ink); }

/* ARCHITECTURE */
.iaas-arch .arch-box { border:1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.iaas-arch .arch-box img { width:100%; display:block; }
.iaas-arch .section-title { color: var(--ink); }

/* PRICING EXPLAINER */
.iaas-pricing-explainer {
  background: #04042c; color:#fff; text-align:center; padding: 40px 0;
}
.iaas-pricing-explainer .section-title { color:#fff; }
.iaas-pricing-explainer .section-subtitle { color:#e6e6e6; }
.price-pills { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.price-pills span { background:#9243f9; color:#fff; border-radius:999px; padding:6px 12px; font-weight:600; }

/* FAQ */
.iaas-faq .faq-accordion{ max-width: 980px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid #e9e9e9; }
.faq-q{
  width: 100%; text-align: left; padding: 16px 12px; background: #fff; border: 0;
  font-weight: 600; color: var(--ink); cursor: pointer;
}
.faq-q:focus{ outline: 2px solid rgba(146,67,249,.35); }
.faq-a{ display:none; padding: 0 12px 16px 12px; color:#444; line-height:1.55; }
.faq-item.open .faq-a{ display:block; }

/* Utility spacing (rely on your existing roomy-XX too) */
.roomy-60{ padding-top:60px; padding-bottom:60px; }
.m-top-10{ margin-top: 10px; }
.m-top-20{ margin-top: 20px; }
.m-bottom-20{ margin-bottom: 20px; }
.m-bottom-30{ margin-bottom: 30px; }


/* ---- Fix IaaS hero H1 size on small screens (force override) ---- */
body .iaas-hero .iaas-hero-overlay h1 {
  font-size: clamp(1.6rem, 6vw, 2.4rem) !important;  /* mobile-first, scales up */
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}

/* tighten the hero on phones so the heading doesn't get pushed off-screen */
@media (max-width: 576px){
  .iaas-hero-wrap{
    height: min(60vh, 520px) !important;
  }
  .iaas-hero .iaas-hero-overlay{
    padding: 16px 0 18px !important;  /* less vertical padding */
  }
  .iaas-hero .lead{
    font-size: 0.98rem !important;
  }
  .hero-ctas .btn{
    width: 100%;
  }
  .hero-bullets{
    font-size: .95rem;
  }
}