:root {
  --night: #020617;
  --ink: #f5f7ff;
  --muted: #a2aec7;
  --cyan: #4cc3ff;
  --blue: #287bff;
  --pink: #d023e8;
  --green: #26deb1;
  --line: rgba(76, 195, 255, .19);
  --line-strong: rgba(76, 195, 255, .46);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(2, 6, 23, .9), rgba(2, 6, 23, .96)),
    url("./img/tool-background-1.png") center top / cover fixed,
    var(--night);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 0 20%, rgba(40, 123, 255, .14), transparent 28rem),
    radial-gradient(circle at 100% 70%, rgba(208, 35, 232, .12), transparent 30rem),
    linear-gradient(90deg, rgba(76, 195, 255, .025) 1px, transparent 1px),
    linear-gradient(rgba(76, 195, 255, .025) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, blockquote { margin-top: 0; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 80px;
  padding: 9px max(22px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(76, 195, 255, .14);
  background: rgba(2, 6, 23, .84);
  backdrop-filter: blur(22px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand img { width: 132px; height: auto; }
.brand strong {
  padding-left: 12px;
  border-left: 1px solid rgba(76, 195, 255, .28);
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 48%, var(--pink));
  background-clip: text;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { color: #b4bfd6; font-size: .78rem; font-weight: 700; }
.site-header nav a:hover { color: var(--cyan); }
.mini-button {
  justify-self: end;
  padding: 11px 17px;
  border: 1px solid rgba(76, 195, 255, .38);
  border-radius: 999px;
  color: #eaf8ff;
  background: rgba(76, 195, 255, .07);
  font-size: .76rem;
  font-weight: 800;
}
.shell { width: min(1180px, calc(100% - 40px)); margin: 30px auto 0; }
.glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(16, 36, 71, .93), rgba(5, 11, 36, .92) 62%, rgba(29, 9, 53, .87));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 30px 90px rgba(0,0,0,.42);
}
.glass::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), var(--blue) 50%, var(--pink));
}
.eyebrow {
  margin-bottom: 15px;
  color: var(--cyan);
  font-size: .71rem;
  font-weight: 850;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(470px, 1.05fr);
  gap: 52px;
  align-items: center;
  min-height: 640px;
  padding: 68px 60px;
}
.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.7rem, 5vw, 4.55rem);
  font-weight: 780;
  letter-spacing: -.052em;
  line-height: .99;
}
.hero h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(92deg, var(--cyan), #638dff 48%, var(--pink));
  background-clip: text;
  -webkit-background-clip: text;
}
.lead {
  margin-bottom: 29px;
  color: #bac4d9;
  font-size: 1rem;
  line-height: 1.76;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 21px;
  border-radius: 11px;
  font-size: .83rem;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); }
.primary {
  color: #020617;
  background: linear-gradient(110deg, var(--cyan), #799aff 52%, #e35bf7);
  box-shadow: 0 12px 32px rgba(40, 123, 255, .25);
}
.secondary { border: 1px solid rgba(134, 166, 220, .3); background: rgba(255,255,255,.035); }
.proof { display: flex; flex-wrap: wrap; gap: 12px; }
.proof span { color: #aab5cc; font-size: .68rem; font-weight: 700; }
.proof span::before { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; content: ""; background: var(--green); box-shadow: 0 0 8px var(--green); }

.product-preview {
  overflow: hidden;
  border: 1px solid rgba(76, 195, 255, .42);
  border-radius: 18px;
  background: rgba(1, 6, 22, .9);
  box-shadow: 0 35px 70px rgba(0,0,0,.4), 0 0 55px rgba(40,123,255,.09);
}
.preview-bar, .product-preview footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 47px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(76,195,255,.13);
  background: rgba(10,21,47,.84);
}
.preview-bar i { color: var(--cyan); font-size: .45rem; font-style: normal; letter-spacing: 4px; }
.preview-bar strong { font-size: .66rem; letter-spacing: .04em; }
.preview-bar small { justify-self: end; color: var(--green); font-family: var(--font-mono), monospace; font-size: .46rem; font-weight: 800; }
.preview-content { display: grid; grid-template-columns: 46px 1fr; min-height: 370px; }
.preview-content aside { display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 22px; border-right: 1px solid rgba(76,195,255,.12); }
.preview-content aside span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(130,150,190,.17); border-radius: 6px; color: #75819a; font-family: var(--font-mono), monospace; font-size: .46rem; }
.preview-content aside .active { border-color: rgba(76,195,255,.58); color: var(--cyan); background: rgba(76,195,255,.09); }
.preview-content article { padding: 34px 29px; }
.preview-content article > small { display: block; margin-bottom: 12px; color: var(--cyan); font-family: var(--font-mono), monospace; font-size: .52rem; font-weight: 800; letter-spacing: .15em; }
.preview-content h2 { max-width: 390px; margin-bottom: 12px; font-size: 1.43rem; line-height: 1.2; }
.preview-content article > p { color: #929fba; font-size: .72rem; line-height: 1.62; }
.question { margin-top: 22px; padding: 16px; border: 1px solid rgba(76,195,255,.22); border-left: 3px solid var(--cyan); border-radius: 9px; background: rgba(76,195,255,.06); }
.question em { display: block; margin-bottom: 7px; color: #7c89a4; font-size: .48rem; font-style: normal; text-transform: uppercase; }
.question strong { display: block; font-size: .68rem; line-height: 1.55; }
.lines { display: grid; gap: 6px; margin-top: 20px; }
.lines i { width: 100%; height: 5px; border-radius: 99px; background: linear-gradient(90deg, rgba(76,195,255,.22), rgba(40,123,255,.05)); }
.lines i:nth-child(2) { width: 87%; }.lines i:nth-child(3) { width: 70%; }.lines i:last-child { width: 44%; }
.product-preview footer { grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(76,195,255,.1); border-bottom: 0; }
.product-preview footer span { color: #7d89a2; font-size: .5rem; font-weight: 750; text-align: center; text-transform: uppercase; }

.section { padding: 104px 20px; border-bottom: 1px solid rgba(76,195,255,.13); }
.section-head { max-width: 770px; margin-bottom: 43px; }
.section-head.centered { margin-right: auto; margin-left: auto; text-align: center; }
.section-head h2, .workflow h2, .model-flex h2, .final-cta h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4.1vw, 3.3rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.section-head > p:last-child, .section-head > div + p, .workflow > div > p, .model-flex > div > p, .final-cta p {
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.76;
}
.section-head.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: end; max-width: none; }
.section-head.split h2 { margin-bottom: 0; }

.process { padding-right: 0; padding-left: 0; }
.stage-grid { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid rgba(76,195,255,.23); border-radius: 18px; background: rgba(2,8,26,.64); }
.stage-grid article { min-height: 158px; padding: 23px 16px; border-right: 1px solid rgba(76,195,255,.13); border-bottom: 1px solid rgba(76,195,255,.13); }
.stage-grid article:nth-child(5n) { border-right: 0; }.stage-grid article:nth-child(n+6) { border-bottom: 0; }
.stage-grid article > span { display: grid; width: 30px; height: 30px; margin-bottom: 15px; place-items: center; border: 1px solid rgba(76,195,255,.42); border-radius: 8px; color: var(--cyan); background: rgba(76,195,255,.08); font-family: var(--font-mono), monospace; font-size: .52rem; font-weight: 800; }
.stage-grid article:nth-child(3n+2) > span { border-color: rgba(208,35,232,.42); color: #e766f3; background: rgba(208,35,232,.08); }
.stage-grid h3 { margin-bottom: 7px; font-size: .8rem; }.stage-grid p { margin-bottom: 0; color: #8995ae; font-size: .61rem; line-height: 1.55; }

.overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.overview-grid article {
  position: relative;
  min-height: 340px;
  padding: 28px;
  border: 1px solid rgba(76,195,255,.21);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15,31,62,.82), rgba(4,10,30,.85));
  transition: transform .2s ease, border-color .2s ease;
}
.overview-grid article:hover { transform: translateY(-4px); border-color: rgba(76,195,255,.5); }
.overview-grid small { display: block; margin-bottom: 34px; color: var(--cyan); font-family: var(--font-mono), monospace; font-size: .57rem; font-weight: 850; letter-spacing: .16em; }
.overview-grid article:nth-child(2) small { color: #e96af5; }.overview-grid article:nth-child(3) small { color: var(--green); }
.overview-grid b { display: block; margin-bottom: 5px; color: transparent; background: linear-gradient(110deg,var(--cyan),var(--blue),var(--pink)); background-clip: text; font-size: 3.8rem; line-height: 1; -webkit-background-clip: text; }
.overview-grid h3 { max-width: 260px; margin-bottom: 11px; font-size: 1.18rem; line-height: 1.28; }
.overview-grid p { color: #98a5be; font-size: .79rem; line-height: 1.7; }
.overview-grid a { position: absolute; bottom: 26px; font-size: .71rem; font-weight: 800; }

.course-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 15px; }
.course-grid article { grid-column: span 2; min-height: 265px; padding: 26px; border: 1px solid rgba(76,195,255,.19); border-radius: 17px; background: rgba(5,13,34,.76); }
.course-grid article:nth-child(4) { grid-column: 2 / span 2; }
.course-grid header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.course-grid header span { color: transparent; background: linear-gradient(90deg,var(--cyan),var(--pink)); background-clip: text; font-family: var(--font-mono),monospace; font-size: 1.4rem; font-weight: 850; -webkit-background-clip: text; }
.course-grid header small { padding: 5px 8px; border: 1px solid rgba(76,195,255,.18); border-radius: 99px; color: #8c99b3; font-size: .49rem; font-weight: 800; text-transform: uppercase; }
.course-grid h3 { margin-bottom: 11px; font-size: 1.02rem; line-height: 1.3; }.course-grid p { margin-bottom: 0; color: #919eb7; font-size: .74rem; line-height: 1.66; }

.studio-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.studio-grid article { display: grid; grid-template-columns: 46px 1fr; gap: 18px; min-height: 230px; padding: 26px; border: 1px solid rgba(76,195,255,.18); border-radius: 17px; background: linear-gradient(120deg,rgba(14,30,59,.72),rgba(4,10,28,.82)); }
.studio-grid article > b { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(76,195,255,.35); border-radius: 10px; color: var(--cyan); background: rgba(76,195,255,.07); font-family: var(--font-mono),monospace; font-size: .61rem; }
.studio-grid small { display: block; margin: 2px 0 8px; color: var(--cyan); font-family: var(--font-mono),monospace; font-size: .52rem; font-weight: 850; letter-spacing: .14em; }
.studio-grid h3 { margin-bottom: 10px; font-size: 1.05rem; }.studio-grid p { color: #98a5bd; font-size: .76rem; line-height: 1.68; }
.studio-grid em { display: block; padding-top: 13px; border-top: 1px solid rgba(76,195,255,.11); color: #74819b; font-size: .59rem; font-style: normal; font-weight: 700; }

/* AI Application Builder feature */

.app-builder-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
    gap: 70px;
    align-items: center;

    margin: 105px 0;
    padding: 64px 60px;
}

.app-builder-copy h2 {
    margin-bottom: 18px;

    font-size: clamp(2rem, 4.1vw, 3.3rem);
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.app-builder-copy h2 span {
    display: block;

    color: transparent;
    background:
        linear-gradient(
            92deg,
            var(--cyan),
            var(--blue) 48%,
            var(--pink)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.app-builder-copy > p {
    margin-bottom: 15px;

    color: var(--muted);
    font-size: 0.91rem;
    line-height: 1.72;
}

.app-builder-benefits {
    margin: 25px 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.app-builder-benefits span {
    min-height: 46px;
    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 9px;

    border: 1px solid rgba(76, 195, 255, 0.15);
    border-radius: 10px;

    color: #cbd5e7;
    background: rgba(4, 12, 31, 0.56);

    font-size: 0.67rem;
    font-weight: 750;
}

.app-builder-benefits b {
    color: var(--cyan);
    font-family: var(--font-mono), monospace;
    font-size: 0.54rem;
}

.app-builder-action {
    margin-top: 2px;
}

/* Builder output card */

.app-builder-output {
    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(6, 19, 44, 0.98),
            rgba(4, 9, 27, 0.98)
        ) padding-box,
        linear-gradient(
            135deg,
            var(--pink),
            var(--cyan),
            var(--pink)
        ) border-box;

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(76, 195, 255, 0.08);
}

.app-builder-output > header {
    padding: 15px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    border-bottom: 1px solid rgba(76, 195, 255, 0.14);
    background: rgba(3, 10, 27, 0.64);
}

.app-builder-output > header span {
    color: #edf5ff;
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.app-builder-output > header i {
    padding: 5px 7px;

    border: 1px solid rgba(38, 222, 177, 0.25);
    border-radius: 999px;

    color: var(--green);
    background: rgba(38, 222, 177, 0.06);

    font-size: 0.48rem;
    font-style: normal;
    font-weight: 850;
}

.app-builder-file {
    margin: 20px;
    padding: 18px;

    display: flex;
    align-items: center;
    gap: 14px;

    border: 1px solid rgba(76, 195, 255, 0.2);
    border-radius: 13px;

    background:
        linear-gradient(
            110deg,
            rgba(76, 195, 255, 0.09),
            rgba(208, 35, 232, 0.055)
        );
}

.app-builder-file > span {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border: 1px solid rgba(76, 195, 255, 0.37);
    border-radius: 11px;

    color: var(--cyan);
    background: rgba(76, 195, 255, 0.08);

    font-family: var(--font-mono), monospace;
    font-size: 0.72rem;
    font-weight: 850;
}

.app-builder-file strong,
.app-builder-file small {
    display: block;
}

.app-builder-file strong {
    color: #ffffff;
    font-size: 0.88rem;
}

.app-builder-file small {
    margin-top: 3px;

    color: #8290aa;
    font-size: 0.58rem;
}

.app-builder-output ol {
    margin: 0;
    padding: 0 20px 20px;

    display: grid;
    gap: 8px;

    list-style: none;
}

.app-builder-output li {
    padding: 10px 12px;

    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.022);
}

.app-builder-output li > span {
    color: var(--cyan);
    font-family: var(--font-mono), monospace;
    font-size: 0.52rem;
    font-weight: 850;
}

.app-builder-output li strong,
.app-builder-output li small {
    display: block;
}

.app-builder-output li strong {
    color: #e8effc;
    font-size: 0.72rem;
}

.app-builder-output li small {
    margin-top: 2px;

    color: #7f8ca5;
    font-size: 0.57rem;
    line-height: 1.45;
}

.app-builder-output > footer {
    padding: 15px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid rgba(76, 195, 255, 0.14);

    background:
        linear-gradient(
            90deg,
            rgba(76, 195, 255, 0.07),
            rgba(208, 35, 232, 0.05)
        );
}

.app-builder-output > footer small,
.app-builder-output > footer strong {
    display: block;
}

.app-builder-output > footer small {
    color: var(--cyan);
    font-size: 0.47rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.app-builder-output > footer strong {
    margin-top: 2px;

    color: #ffffff;
    font-size: 0.78rem;
}

.app-builder-output > footer > span {
    color: #91a0ba;
    font-size: 0.57rem;
    font-weight: 700;
    text-align: right;
}

.workflow { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; margin: 105px 0; padding: 64px 60px; }
.workflow > div > p { margin-bottom: 25px; }
.workflow blockquote { padding: 16px 18px; border: 1px solid rgba(76,195,255,.22); border-left: 3px solid var(--cyan); border-radius: 9px; color: #9eacc5; background: rgba(76,195,255,.055); font-size: .7rem; line-height: 1.6; }
.workflow blockquote strong { display: block; color: #edf5ff; font-size: .79rem; }
.workflow ol { position: relative; margin: 0; padding: 0; list-style: none; }
.workflow ol::before { position: absolute; top: 25px; bottom: 25px; left: 19px; width: 1px; content: ""; background: linear-gradient(var(--cyan),var(--blue),var(--pink)); }
.workflow li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 17px; padding-bottom: 22px; }
.workflow li > span { z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(76,195,255,.45); border-radius: 50%; color: var(--cyan); background: #07132d; font-family: var(--font-mono),monospace; font-size: .55rem; font-weight: 850; }
.workflow li div { padding: 1px 0 18px; border-bottom: 1px solid rgba(76,195,255,.1); }.workflow li:last-child div { border-bottom: 0; }
.workflow li strong { display: block; margin-bottom: 5px; font-size: .85rem; }.workflow li p { margin: 0; color: #8e9ab3; font-size: .7rem; line-height: 1.55; }

.deliverables { display: grid; grid-template-columns: .85fr 1.15fr; gap: 85px; align-items: center; }
.deliverables .section-head { margin-bottom: 0; }
.deliverables ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.deliverables li { display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 11px 14px; border: 1px solid rgba(76,195,255,.15); border-radius: 10px; color: #cbd3e5; background: rgba(5,13,34,.66); font-size: .7rem; font-weight: 750; }
.deliverables li span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(38,222,177,.35); border-radius: 50%; color: var(--green); font-size: .61rem; }

.model-flex { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.model-flex > div:last-child { max-width: 630px; }.model-flex > div > p { margin-bottom: 16px; }
.orbital { position: relative; width: 320px; height: 320px; margin: auto; border: 1px solid rgba(76,195,255,.26); border-radius: 50%; box-shadow: inset 0 0 55px rgba(40,123,255,.06); }
.orbital::before { position: absolute; inset: 37px; border: 1px dashed rgba(208,35,232,.23); border-radius: 50%; content: ""; }
.orbital div { position: absolute; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(76,195,255,.42); border-radius: 50%; color: var(--cyan); background: #08152d; font-family: var(--font-mono),monospace; font-size: .49rem; font-weight: 850; text-align: center; }
.orbital div:first-child { top: -29px; left: calc(50% - 29px); }.orbital div:nth-child(2) { top: calc(50% - 58px); left: calc(50% - 58px); width: 116px; height: 116px; color: #fff; background: radial-gradient(circle,rgba(76,195,255,.24),rgba(40,123,255,.09) 55%,rgba(208,35,232,.12)); }
.orbital div:last-child { right: -13px; bottom: 40px; color: #e35ff0; }

.creator {
    width: min(820px, calc(100% - 32px));
    margin: 40px auto;
    padding: clamp(26px, 4vw, 42px);

    display: block;

    text-align: center;
}

.creator-content {
    width: min(680px, 100%);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.creator-eyebrow {
    margin: 0 0 14px;

    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.creator blockquote {
    margin: 0;

    color: #f2f6ff;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 700;
    line-height: 1.65;
}

.creator-message {
    margin: 20px 0 0;

    color: #aebbd2;
    font-size: 0.92rem;
    line-height: 1.75;
}

.creator-signature {
    margin-top: 26px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.creator-signature img {
    width: min(350px, 100%);
    height: auto;
    display: block;
}

.creator-signature span {
    color: #8fdfff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.faq > div { max-width: 870px; margin: auto; border-top: 1px solid rgba(76,195,255,.22); }
.faq details { border-bottom: 1px solid rgba(76,195,255,.17); }
.faq summary { display: grid; grid-template-columns: 42px 1fr 28px; gap: 14px; align-items: center; padding: 22px 8px; cursor: pointer; font-size: .9rem; font-weight: 750; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }.faq summary span { color: var(--cyan); font-family: var(--font-mono),monospace; font-size: .56rem; }
.faq summary i { color: var(--cyan); font-size: 1.2rem; font-style: normal; font-weight: 300; text-align: center; transition: transform .16s ease; }.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { max-width: 750px; margin: -4px 0 23px 64px; color: #99a5bd; font-size: .78rem; line-height: 1.7; }

.final-cta { display: grid; grid-template-columns: 1.2fr auto; gap: 55px; align-items: center; margin: 110px 0 50px; padding: 60px; }
.final-cta > div:last-child { display: flex; flex-direction: column; align-items: center; gap: 11px; }.final-cta small { color: #8995ae; font-size: .6rem; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 24px 0 40px; }
.site-footer .brand img { width: 110px; }.site-footer p { margin: 0; color: #707e98; font-size: .62rem; }.site-footer > a { justify-self: end; color: #8f9bb3; font-size: .65rem; font-weight: 750; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; } }
@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding: 60px 48px; }.product-preview { width: min(720px,100%); margin: auto; }
  .creator { grid-template-columns: 150px 1fr; gap: 30px; padding: 50px 42px; }
}
@media (max-width: 790px) {
  .shell { width: min(100% - 26px,700px); }.section { padding: 80px 7px; }
  .section-head.split,.workflow,.deliverables,.model-flex,.creator,.final-cta { grid-template-columns: 1fr; }
  .section-head.split { gap: 18px; }.stage-grid { grid-template-columns: repeat(2,1fr); }
  .stage-grid article:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.stage-grid article:nth-child(2n) { border-right: 0; }.stage-grid article:nth-child(n+9) { border-bottom: 0; }
  .overview-grid { grid-template-columns: 1fr; }.overview-grid article { min-height: 295px; }
  .course-grid { grid-template-columns: repeat(2,1fr); }.course-grid article,.course-grid article:nth-child(4) { grid-column: auto; }.course-grid article:last-child { grid-column: 1 / -1; }
  .studio-grid { grid-template-columns: 1fr; }.workflow { gap: 40px; margin: 82px 0; padding: 48px 34px; }
  .deliverables,.model-flex { gap: 42px; }.model-flex .orbital { order: 2; }
  .creator { gap: 30px; margin: 82px 0; }.creator-mark { display: none; }.creator > div:last-child { padding-left: 0; border-left: 0; }
  .final-cta { gap: 28px; margin-top: 82px; padding: 46px 34px; }.final-cta > div:last-child { align-items: flex-start; }
  .site-footer { grid-template-columns: 1fr auto; }.site-footer p { display: none; }
}
@media (max-width: 560px) {
  .site-header { min-height: 68px; padding-right: 14px; padding-left: 14px; }.brand img { width: 104px; }.site-header .brand strong { display: none; }.mini-button { padding: 9px 12px; font-size: .65rem; }
  .shell { width: calc(100% - 18px); margin-top: 15px; }.hero { min-height: auto; padding: 43px 20px 24px; border-radius: 19px; }.hero h1 { font-size: 2.45rem; }.lead { font-size: .9rem; }
  .actions,.actions .button { width: 100%; }.proof { justify-content: center; }.product-preview { margin-right: -8px; margin-left: -8px; }
  .preview-bar { grid-template-columns: 1fr auto; }.preview-bar strong { display: none; }.preview-content { grid-template-columns: 36px 1fr; min-height: 345px; }.preview-content article { padding: 27px 17px; }.preview-content h2 { font-size: 1.17rem; }
  .section { padding-top: 68px; padding-bottom: 68px; }.section-head h2,.workflow h2,.model-flex h2,.final-cta h2 { font-size: 2rem; }
  .stage-grid { grid-template-columns: 1fr; }.stage-grid article:nth-child(n) { display: grid; grid-template-columns: 38px 1fr; min-height: 0; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }.stage-grid article:last-child { border-bottom: 0; }.stage-grid article > span { grid-row: span 2; margin: 0; }.stage-grid h3,.stage-grid p { grid-column: 2; }.stage-grid h3 { margin: 0 0 4px; }
  .course-grid,.deliverables ul { grid-template-columns: 1fr; }.course-grid article:last-child { grid-column: auto; }.studio-grid article { grid-template-columns: 38px 1fr; gap: 12px; padding: 20px 16px; }.studio-grid article > b { width: 34px; height: 34px; }
  .workflow,.creator { padding: 40px 20px; border-radius: 19px; }.orbital { width: 255px; height: 255px; }.orbital div:first-child { top: -29px; }.creator blockquote { font-size: 1.28rem; }
  .faq summary { grid-template-columns: 30px 1fr 22px; gap: 7px; font-size: .79rem; }.faq details p { margin-left: 37px; }
  .final-cta { padding: 40px 21px; border-radius: 19px; }.final-cta > div:last-child,.final-cta .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 18px; }.site-footer .brand,.site-footer > a { justify-self: center; }
}

@media (max-width: 790px) {
    .app-builder-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;

        margin: 82px 0;
        padding: 48px 34px;
    }

    .app-builder-output {
        width: min(560px, 100%);
    }
}

@media (max-width: 560px) {
    .app-builder-feature {
        padding: 40px 20px;
        border-radius: 19px;
    }

    .app-builder-benefits {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-builder-output > footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .app-builder-output > footer > span {
        text-align: left;
    }
    .demo-unavailable-card {
    padding: 38px 22px 24px;
}

.demo-unavailable-card h2 {
    padding-right: 25px;
}

.demo-walkthrough-button {
    width: 100%;
}
.demo-unavailable-modal.walkthrough-open {
    width: calc(100vw - 16px);
}

.walkthrough-frame-view {
    height: calc(100dvh - 16px);
}

.walkthrough-frame-header {
    padding: 0 10px;
    grid-template-columns: 72px 1fr 38px;
    gap: 7px;
}

.walkthrough-frame-header strong {
    font-size: 0.7rem;
}

.walkthrough-back-button {
    padding: 0 8px;
}
}

/* =========================================
   DEMO AVAILABILITY MODAL
========================================= */

.demo-unavailable-modal {
    width: min(540px, calc(100vw - 30px));
    max-width: none;
    margin: auto;
    padding: 0;
    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 22px;

    color: var(--ink);

    background:
        linear-gradient(
            145deg,
            rgba(10, 23, 50, 0.99),
            rgba(4, 10, 29, 0.99) 68%,
            rgba(26, 8, 43, 0.99)
        ) padding-box,
        linear-gradient(
            110deg,
            var(--cyan),
            var(--blue) 52%,
            var(--pink)
        ) border-box;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.68),
        0 0 50px rgba(76, 195, 255, 0.12);
}

.demo-unavailable-modal::backdrop {
    background: rgba(1, 4, 16, 0.86);
    backdrop-filter: blur(9px);
}

.demo-unavailable-modal[open] {
    animation: demo-modal-enter 180ms ease-out;
}

@keyframes demo-modal-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.demo-unavailable-card {
    position: relative;
    padding: 40px;
    overflow: hidden;
}

.demo-unavailable-card::before {
    position: absolute;
    top: -100px;
    right: -90px;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(208, 35, 232, 0.16);
    border-radius: 50%;

    content: "";
    background: rgba(208, 35, 232, 0.035);
    pointer-events: none;
}

.demo-unavailable-card > * {
    position: relative;
    z-index: 1;
}

.demo-modal-close {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;

    width: 36px;
    height: 36px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(76, 195, 255, 0.25);
    border-radius: 10px;

    color: #b9c7dc;
    background: rgba(255, 255, 255, 0.035);

    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.demo-modal-close:hover,
.demo-modal-close:focus-visible {
    border-color: rgba(76, 195, 255, 0.7);
    color: var(--cyan);
    background: rgba(76, 195, 255, 0.1);
    transform: rotate(4deg);
}

.demo-modal-status {
    margin-bottom: 17px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--cyan);

    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.demo-modal-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 6px var(--cyan),
        0 0 14px rgba(76, 195, 255, 0.55);
}

.demo-unavailable-card h2 {
    max-width: 430px;
    margin: 0 0 17px;

    font-size: clamp(1.65rem, 5vw, 2.15rem);
    line-height: 1.14;
    letter-spacing: -0.025em;
}

.demo-unavailable-card p {
    max-width: 445px;
    margin: 0;

    color: var(--muted);

    font-size: 0.93rem;
    line-height: 1.72;
}

.demo-walkthrough-button {
    width: 100%;
    min-height: 52px;
    margin-top: 28px;
    padding: 0 21px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border-radius: 11px;

    color: #020617;

    background:
        linear-gradient(
            110deg,
            var(--cyan),
            #799aff 52%,
            #e35bf7
        );

    box-shadow:
        0 12px 32px rgba(40, 123, 255, 0.25);

    font-size: 0.83rem;
    font-weight: 850;
    text-decoration: none;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.demo-walkthrough-button:hover,
.demo-walkthrough-button:focus-visible {
    color: #020617;

    box-shadow:
        0 16px 38px rgba(40, 123, 255, 0.34),
        0 0 22px rgba(208, 35, 232, 0.14);

    transform: translateY(-2px);
}

.demo-walkthrough-button span {
    font-size: 1rem;
}

/* Allow the same dialog to expand for the form */

.demo-unavailable-modal {
    transition:
        width 200ms ease,
        max-width 200ms ease;
}

.demo-unavailable-modal.walkthrough-open {
    width: min(980px, calc(100vw - 30px));
}

.demo-walkthrough-button {
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* Embedded walkthrough form */

.walkthrough-frame-view {
    width: 100%;
    height: min(760px, calc(100dvh - 30px));

    grid-template-rows: 64px minmax(0, 1fr);

    background:
        linear-gradient(
            145deg,
            rgba(8, 20, 45, 0.99),
            rgba(3, 9, 27, 0.99)
        );
}

.walkthrough-frame-view:not([hidden]) {
    display: grid;
}

.walkthrough-frame-header {
    padding: 0 18px;

    display: grid;
    grid-template-columns: 90px 1fr 42px;
    align-items: center;
    gap: 12px;

    border-bottom: 1px solid rgba(76, 195, 255, 0.18);

    background:
        linear-gradient(
            90deg,
            rgba(10, 26, 56, 0.98),
            rgba(8, 17, 40, 0.98)
        );
}

.walkthrough-frame-header strong {
    justify-self: center;

    color: #eef7ff;

    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.03em;
}

.walkthrough-back-button,
.walkthrough-frame-close {
    border: 1px solid rgba(76, 195, 255, 0.28);
    border-radius: 9px;

    color: #c9d7ea;
    background: rgba(76, 195, 255, 0.055);

    font: inherit;
    font-weight: 800;
    cursor: pointer;

    transition:
        border-color 160ms ease,
        color 160ms ease,
        background 160ms ease;
}

.walkthrough-back-button {
    min-height: 36px;
    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    font-size: 0.68rem;
}

.walkthrough-frame-close {
    width: 36px;
    height: 36px;
    padding: 0;

    display: grid;
    place-items: center;
    justify-self: end;

    font-size: 1.2rem;
    line-height: 1;
}

.walkthrough-back-button:hover,
.walkthrough-back-button:focus-visible,
.walkthrough-frame-close:hover,
.walkthrough-frame-close:focus-visible {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(76, 195, 255, 0.11);
}

.walkthrough-frame-view iframe {
    width: 100%;
    height: 100%;
    min-height: 0;

    border: 0;

    background: var(--night);
}