.bw-page {
  --bw-bg: #07111f;
  --bw-panel: rgba(255, 255, 255, .065);
  --bw-panel-2: rgba(255, 255, 255, .095);
  --bw-line: rgba(255, 255, 255, .14);
  --bw-line-strong: rgba(101, 212, 255, .34);
  --bw-text: #eef6ff;
  --bw-muted: #a8bbd1;
  --bw-soft: #d8e9fb;
  --bw-blue: #30a7ff;
  --bw-blue-2: #1264d8;
  --bw-cyan: #65d4ff;
  --bw-shadow: 0 28px 90px rgba(0, 0, 0, .32);
  background: radial-gradient(circle at 15% 0%, rgba(48, 167, 255, .18), transparent 36%),
  radial-gradient(circle at 92% 10%, rgba(101, 212, 255, .10), transparent 30%),
  linear-gradient(180deg, #07111f 0%, #0a1728 45%, #07111f 100%);
  color: var(--bw-text);
  overflow: hidden;
}

.bw-section {
  padding: 86px 0;
  position: relative
}

.bw-section-tight {
  padding: 62px 0
}

.bw-container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto
}

.bw-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #91a7bd;
  font-size: 13px;
  margin-bottom: 20px
}

.bw-breadcrumb a {
  color: #bfe6ff
}

.bw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(101, 212, 255, .24);
  background: rgba(48, 167, 255, .10);
  color: #bceaff;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 18px
}

.bw-kicker:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #61e3a6;
  box-shadow: 0 0 0 6px rgba(97, 227, 166, .12)
}

.bw-hero {
  padding: 88px 0 78px;
  position: relative;
  isolation: isolate
}

.bw-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, .28), rgba(7, 17, 31, .94));
  z-index: -1
}

.bw-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 38px;
  align-items: stretch
}

.bw-hero-copy, .bw-hero-visual, .bw-panel, .bw-card, .bw-equal-card {
  height: 100%
}

.bw-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.bw-hero h1 {
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: .98;
  margin: 0 0 24px;
  letter-spacing: -2.4px
}

.bw-gradient {
  background: linear-gradient(90deg, #fff, #a2e2ff 55%, #5db6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.bw-lead {
  font-size: 18px;
  line-height: 1.78;
  color: #c4d4e6;
  margin: 0 0 30px;
  max-width: 740px
}

.bw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 28px
}

.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(135deg, var(--bw-blue), var(--bw-blue-2));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 16px 44px rgba(18, 100, 216, .28);
  transition: .25s
}

.bw-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 62px rgba(48, 167, 255, .34)
}

.bw-btn.secondary {
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
  color: #d8e9fb
}

.bw-proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px
}

.bw-proof {
  padding: 17px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .052);
  transition: .25s
}

.bw-proof:hover {
  transform: translateY(-3px);
  border-color: rgba(101, 212, 255, .25);
  background: rgba(48, 167, 255, .075)
}

.bw-proof b {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 15px
}

.bw-proof span {
  display: block;
  color: #9fb3ca;
  font-size: 13px;
  line-height: 1.48
}

.bw-hero-visual {
  padding: 1px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(101, 212, 255, .34), rgba(255, 255, 255, .08), rgba(48, 167, 255, .18));
  box-shadow: var(--bw-shadow)
}

.bw-visual-inner {
  height: 100%;
  min-height: 640px;
  border-radius: 33px;
  padding: 24px;
  background: radial-gradient(circle at 70% 10%, rgba(48, 167, 255, .24), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045)), #081423;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden
}

.bw-image-placeholder {
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(135deg, rgba(48, 167, 255, .14), rgba(255, 255, 255, .045));
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: end
}

.bw-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: .82
}

.bw-image-placeholder:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, .14), rgba(7, 17, 31, .82))
}

.bw-image-caption {
  position: relative;
  z-index: 1;
  padding: 20px
}

.bw-image-caption b {
  display: block;
  font-size: 20px;
  margin-bottom: 7px
}

.bw-image-caption span {
  display: block;
  color: #c5d5e7;
  line-height: 1.55;
  font-size: 14px
}

.bw-visual-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1
}

.bw-visual-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  transition: .25s
}

.bw-visual-card:hover {
  transform: translateY(-4px);
  border-color: rgba(101, 212, 255, .30);
  background: rgba(48, 167, 255, .08)
}

.bw-visual-card small {
  display: block;
  color: #89d9ff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  margin-bottom: 6px
}

.bw-visual-card b {
  display: block;
  color: #fff;
  margin-bottom: 8px
}

.bw-visual-card span {
  display: block;
  color: #aebfd4;
  font-size: 13px;
  line-height: 1.55
}

.bw-prompt {
  margin-top: auto;
  padding: 16px;
  border-radius: 22px;
  border: 1px dashed rgba(101, 212, 255, .35);
  background: rgba(48, 167, 255, .07);
  color: #b8dfff;
  font-size: 12.5px;
  line-height: 1.62
}

.bw-head {
  max-width: 940px;
  margin-bottom: 34px
}

.bw-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

.bw-head h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -1.6px
}

.bw-head p {
  margin: 0;
  color: #c2d3e6;
  line-height: 1.8;
  font-size: 16px
}

.bw-equal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch
}

.bw-panel {
  padding: 32px;
  border-radius: 32px;
  border: 1px solid var(--bw-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .04));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .20);
  transition: .28s;
  overflow: hidden
}

.bw-panel:hover, .bw-card:hover, .bw-equal-card:hover {
  transform: translateY(-5px);
  border-color: var(--bw-line-strong);
  box-shadow: 0 32px 95px rgba(0, 0, 0, .30)
}

.bw-panel h3 {
  font-size: 31px;
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: -1px
}

.bw-panel p {
  color: #b7c9dc;
  line-height: 1.74;
  margin: 0 0 18px
}

.bw-pain-list {
  display: grid;
  gap: 13px
}

.bw-pain {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  padding: 16px;
  border-radius: 19px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .043);
  transition: .24s
}

.bw-pain:hover {
  background: rgba(48, 167, 255, .075);
  border-color: rgba(101, 212, 255, .25)
}

.bw-pain i {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bw-blue), var(--bw-blue-2));
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900
}

.bw-pain b {
  display: block;
  margin-bottom: 5px;
  color: #fff
}

.bw-pain span {
  display: block;
  color: #a8bbd1;
  line-height: 1.55;
  font-size: 14px
}

.bw-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.bw-card, .bw-equal-card {
  position: relative;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid var(--bw-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .04));
  box-shadow: 0 20px 70px rgba(0, 0, 0, .18);
  transition: .28s;
  overflow: hidden
}

.bw-card:before, .bw-equal-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0, rgba(101, 212, 255, .16), transparent 38%);
  opacity: 0;
  transition: .28s;
  pointer-events: none
}

.bw-card:hover:before, .bw-equal-card:hover:before {
  opacity: 1
}

.bw-card > *, .bw-equal-card > * {
  position: relative;
  z-index: 1
}

.bw-num {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(48, 167, 255, .12);
  border: 1px solid rgba(101, 212, 255, .22);
  color: #bfe6ff;
  font-weight: 900;
  margin-bottom: 15px
}

.bw-card h3, .bw-equal-card h3 {
  font-size: 22px;
  line-height: 1.22;
  margin: 0 0 12px
}

.bw-card p, .bw-equal-card p {
  margin: 0;
  color: #b1c3d8;
  line-height: 1.68
}

.bw-card ul, .bw-equal-card ul {
  margin: 16px 0 0;
  padding-left: 19px;
  color: #a4b7cc;
  line-height: 1.72
}

.bw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px
}

.bw-tags span {
  font-size: 12px;
  color: #cfe6ff;
  background: rgba(48, 167, 255, .09);
  border: 1px solid rgba(101, 212, 255, .18);
  border-radius: 999px;
  padding: 7px 10px
}

.bw-journey {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px
}

.bw-step {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  transition: .25s
}

.bw-step:hover {
  transform: translateY(-4px);
  border-color: rgba(101, 212, 255, .26);
  background: rgba(48, 167, 255, .075)
}

.bw-step small {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--bw-blue), var(--bw-blue-2));
  font-weight: 900;
  margin-bottom: 14px;
  color: #fff
}

.bw-step h3 {
  font-size: 18px;
  margin: 0 0 10px
}

.bw-step p {
  margin: 0;
  color: #aabdd2;
  line-height: 1.62;
  font-size: 14px
}

.bw-architecture {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 26px;
  align-items: stretch
}

.bw-arch-map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px
}

.bw-arch-box {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .047);
  transition: .25s
}

.bw-arch-box:hover {
  transform: translateY(-4px);
  border-color: rgba(101, 212, 255, .28);
  background: rgba(48, 167, 255, .075)
}

.bw-arch-box small {
  display: block;
  color: #89d9ff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 7px
}

.bw-arch-box b {
  display: block;
  margin-bottom: 7px;
  color: #fff
}

.bw-arch-box span {
  display: block;
  color: #aebfd3;
  line-height: 1.58;
  font-size: 14px
}

.bw-roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.bw-road {
  padding: 24px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .052);
  transition: .25s
}

.bw-road:hover {
  transform: translateY(-4px);
  border-color: rgba(101, 212, 255, .28);
  background: rgba(48, 167, 255, .072)
}

.bw-road b {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(48, 167, 255, .12);
  border: 1px solid rgba(101, 212, 255, .2);
  color: #bfe6ff;
  font-size: 12px
}

.bw-road h3 {
  font-size: 20px;
  margin: 0 0 10px
}

.bw-road p {
  margin: 0;
  color: #aebfd3;
  line-height: 1.6
}

.bw-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.bw-faq details {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .052);
  border-radius: 22px;
  padding: 20px;
  transition: .25s
}

.bw-faq details:hover {
  border-color: rgba(101, 212, 255, .28);
  background: rgba(48, 167, 255, .07)
}

.bw-faq summary {
  cursor: pointer;
  font-weight: 900;
  color: #fff
}

.bw-faq p {
  color: #b4c6d9;
  line-height: 1.72;
  margin: 14px 0 0
}

.bw-cta {
  padding: 1px;
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(101, 212, 255, .35), rgba(255, 255, 255, .08), rgba(18, 100, 216, .30));
  box-shadow: var(--bw-shadow)
}

.bw-cta-inner {
  border-radius: 35px;
  background: radial-gradient(circle at 82% 10%, rgba(48, 167, 255, .24), transparent 34%), rgba(255, 255, 255, .065);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center
}

.bw-cta h2 {
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -1.3px;
  margin: 0 0 12px
}

.bw-cta p {
  margin: 0;
  color: #bfd0e2;
  line-height: 1.72;
  max-width: 780px
}

@media (max-width: 1080px) {
  .bw-hero-grid, .bw-equal-grid, .bw-architecture {
    grid-template-columns: 1fr
  }

  .bw-visual-inner {
    min-height: 520px
  }

  .bw-journey {
    grid-template-columns: repeat(3, 1fr)
  }

  .bw-roadmap {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 820px) {
  .bw-grid-3 {
    grid-template-columns: 1fr 1fr
  }

  .bw-proof-row, .bw-visual-stack {
    grid-template-columns: 1fr
  }

  .bw-faq {
    grid-template-columns: 1fr
  }

  .bw-cta-inner {
    grid-template-columns: 1fr
  }
}

@media (max-width: 640px) {
  .bw-container {
    width: min(100% -28px, 1200px)
  }

  .bw-section {
    padding: 58px 0
  }

  .bw-hero {
    padding: 52px 0 56px
  }

  .bw-hero h1 {
    font-size: clamp(33px, 10vw, 46px);
    letter-spacing: -1.2px;
    line-height: 1.04
  }

  .bw-lead {
    font-size: 15.5px;
    line-height: 1.68
  }

  .bw-actions {
    display: grid;
    grid-template-columns: 1fr
  }

  .bw-btn {
    width: 100%;
    padding: 12px 15px
  }

  .bw-grid-3, .bw-journey, .bw-roadmap, .bw-arch-map {
    grid-template-columns: 1fr
  }

  .bw-panel, .bw-card, .bw-equal-card {
    padding: 22px;
    border-radius: 24px
  }

  .bw-panel h3, .bw-cta h2 {
    font-size: 29px;
    letter-spacing: -.8px
  }

  .bw-head h2 {
    font-size: 30px;
    letter-spacing: -.8px
  }

  .bw-visual-inner {
    min-height: auto
  }

  .bw-image-placeholder {
    min-height: 300px
  }
}

.bw-warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.bw-warning-list span {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  color: #cfe0f2;
  font-size: 13px;
  font-weight: 800;
}

.bw-warning-list span:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #65d4ff;
  box-shadow: 0 0 0 5px rgba(101, 212, 255, .10);
  margin-right: 8px;
}

.bw-hero{
    position:relative;
    overflow:hidden;
}

.bw-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;

    background:
      linear-gradient(
        180deg,
        rgba(7,17,31,.76) 0%,
        rgba(7,17,31,.65) 15%,
        rgba(7,17,31,.94) 100%
      ),
      url("../images/business-website-hero-bg.png");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:.75;
}

.bw-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
      radial-gradient(circle at 15% 20%, rgba(101,212,255,.10), transparent 28%),
      radial-gradient(circle at 85% 18%, rgba(101,212,255,.08), transparent 24%);
}

.bw-hero-grid{
    position:relative;
    z-index:2;
}

.bw-section-purpose{
    position:relative;
    overflow:hidden;
}

.bw-section-purpose::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;

    background:
        linear-gradient(
            180deg,
            rgba(7,17,31,.88) 0%,
            rgba(7,17,31,.75) 15%,
            rgba(7,17,31,.96) 100%
        ),
        url("../images/business-website-purpose-bg.png");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:.75;
}

.bw-section-purpose::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        radial-gradient(circle at 12% 15%, rgba(101,212,255,.08), transparent 25%),
        radial-gradient(circle at 88% 20%, rgba(101,212,255,.06), transparent 22%);

    pointer-events:none;
}

.bw-section-purpose > .bw-container{
    position:relative;
    z-index:2;
}

.bw-section-scope{
    position:relative;
    overflow:hidden;
}

.bw-section-scope::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;

    background:
        linear-gradient(
            180deg,
            rgba(7,17,31,.88) 0%,
            rgba(7,17,31,.65) 15%,
            rgba(7,17,31,.96) 100%
        ),
        url("../images/business-website-scope-bg.png");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:.75;
}

.bw-section-scope::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        radial-gradient(circle at 15% 20%, rgba(101,212,255,.08), transparent 25%),
        radial-gradient(circle at 85% 18%, rgba(101,212,255,.06), transparent 22%);

    pointer-events:none;
}

.bw-section-scope .bw-container{
    position:relative;
    z-index:2;
}