:root {
  --ace:#E75526;
  --ace2:#ff7b4f;
  --night:#07090d;
  --panel:#10141c;
  --panel2:#151b25;
  --text:#f7f8fa;
  --muted:#9ba5b4;
  --stroke:rgba(255, 255, 255, .1);
  --glow:rgba(231, 85, 38, .28)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:Inter, "Segoe UI", Arial, sans-serif;
  line-height:1.6;
  overflow-x:hidden
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 82% 8%, rgba(231, 85, 38, .14), transparent 28%),
    radial-gradient(circle at 8% 42%, rgba(62, 94, 255, .08), transparent 25%),
    linear-gradient(#07090d, #090c12)
}
body>header {
  height:82px;
  max-width:none;
  padding:0 max(28px, calc((100vw - 1240px)/2));
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(7, 9, 13, .78);
  border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(18px)
}
.brand {
  display:flex;
  align-items:center
}
.brand img {
  display:block;
  width:175px;
  height:auto;
  background:#fff;
  border-radius:5px
}
nav {
  gap:32px
}
nav a {
  color:#c9cfd8;
  font-weight:600;
  transition:.25s
}
nav a:hover {
  color:#fff
}
.nav-cta, .button, form button {
  background:linear-gradient(135deg, var(--ace), var(--ace2));
  color:#fff!important;
  border:0;
  border-radius:8px;
  box-shadow:0 8px 30px var(--glow);
  transition:transform .25s, box-shadow .25s
}
.nav-cta:hover, .button:hover, form button:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 38px rgba(231, 85, 38, .4)
}
.hero {
  position:relative;
  min-height:760px;
  max-width:1240px;
  grid-template-columns:1.08fr .92fr;
  gap:80px;
  padding:110px 28px 90px
}
.hero-copy {
  position:relative;
  z-index:2
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#ff9c7d;
  font-size:11px;
  letter-spacing:2.3px;
  margin-bottom:24px
}
.eyebrow:before {
  content:"";
  width:28px;
  height:1px;
  background:var(--ace)
}
.hero h1 {
  font:700 clamp(50px, 6vw, 84px)/.98 "Segoe UI", Arial, sans-serif;
  letter-spacing:-4px;
  margin:0 0 30px
}
.hero h1 em {
  font-style:normal;
  color:transparent;
  background:linear-gradient(90deg, var(--ace), #ff9b77);
  background-clip:text;
  -webkit-background-clip:text
}
.hero>div>p {
  color:var(--muted);
  font-size:19px;
  max-width:640px
}
.actions {
  margin-top:38px
}
.button {
  padding:14px 24px
}
.text-link {
  color:#fff
}
.trust-row {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:50px;
  color:var(--muted);
  font-size:13px
}
.trust-row strong {
  color:#fff
}
.pulse {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ee59b;
  box-shadow:0 0 0 0 rgba(78, 229, 155, .5);
  animation:pulse 2s infinite
}
.ai-orbit {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(231, 85, 38, .17), transparent 62%)
}
.ai-core {
  width:160px;
  height:160px;
  display:grid;
  place-items:center;
  border-radius:32px;
  background:linear-gradient(145deg, #1b222e, #0d1118);
  border:1px solid rgba(255, 255, 255, .16);
  box-shadow:0 0 80px var(--glow);
  animation:float 5s ease-in-out infinite
}
.ai-core span {
  font-size:52px;
  font-weight:800;
  color:var(--ace)
}
.ring {
  position:absolute;
  border:1px solid rgba(231, 85, 38, .35);
  border-radius:50%;
  animation:spin 18s linear infinite
}
.ring.one {
  inset:15%
}
.ring.two {
  inset:4%;
  animation-direction:reverse;
  animation-duration:28s
}
.ring:before, .ring:after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ace);
  box-shadow:0 0 18px var(--ace)
}
.ring:before {
  top:8%;
  left:20%
}
.ring:after {
  right:2%;
  bottom:35%
}
.data-chip {
  position:absolute;
  padding:10px 14px;
  background:rgba(16, 20, 28, .88);
  border:1px solid var(--stroke);
  border-radius:8px;
  color:#dbe1e8;
  font-size:12px;
  backdrop-filter:blur(8px);
  animation:float 4s ease-in-out infinite
}
.chip-a {
  left:1%;
  top:25%
}
.chip-b {
  right:0;
  bottom:24%;
  animation-delay:-2s
}
.chip-c {
  left:15%;
  bottom:7%;
  animation-delay:-1s
}
.marquee {
  overflow:hidden;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  background:#0b0e14
}
.marquee-track {
  display:flex;
  width:max-content;
  gap:58px;
  padding:18px 0;
  color:#7f8997;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.8px;
  animation:marquee 25s linear infinite
}
.marquee-track span:before {
  content:"+";
  color:var(--ace);
  margin-right:12px
}
.section {
  background:transparent;
  padding:120px max(28px, calc((100% - 1184px)/2))
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px
}
.section h2, .forms h2 {
  font:700 clamp(38px, 4vw, 58px)/1.05 "Segoe UI", Arial, sans-serif;
  letter-spacing:-2px
}
.section-head p {
  max-width:450px;
  color:var(--muted)
}
.cards {
  background:transparent;
  gap:18px;
  margin-top:60px
}
.cards article {
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg, var(--panel2), var(--panel));
  border:1px solid var(--stroke);
  border-radius:15px;
  padding:38px;
  min-height:300px;
  transition:.3s
}
.cards article:after {
  content:"";
  position:absolute;
  right:-70px;
  bottom:-80px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:var(--glow);
  filter:blur(35px);
  opacity:0;
  transition:.3s
}
.cards article:hover {
  transform:translateY(-7px);
  border-color:rgba(231, 85, 38, .48)
}
.cards article:hover:after {
  opacity:1
}
.cards b {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  background:rgba(231, 85, 38, .12);
  border:1px solid rgba(231, 85, 38, .3);
  border-radius:10px;
  color:#ff8b67
}
.cards h3 {
  font:700 25px "Segoe UI", Arial;
  margin-top:45px
}
.cards p {
  color:var(--muted)
}
.solutions {
  max-width:1184px;
  margin:auto;
  padding:30px 28px 120px
}
.solution-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px
}
.solution {
  padding:25px;
  border-left:2px solid var(--ace);
  background:rgba(255, 255, 255, .025)
}
.solution h4 {
  margin:0 0 7px;
  font-size:17px
}
.solution p {
  color:var(--muted);
  font-size:14px;
  margin:0
}
.forms {
  position:relative;
  max-width:1240px;
  gap:28px;
  padding:110px 28px
}
.forms:before {
  content:"";
  position:absolute;
  inset:40px -15vw 0;
  background:linear-gradient(180deg, rgba(231, 85, 38, .06), transparent);
  border-top:1px solid rgba(231, 85, 38, .18);
  z-index:-1
}
.forms>div {
  background:rgba(16, 20, 28, .82);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:42px;
  backdrop-filter:blur(10px)
}
.forms p {
  color:var(--muted)
}
form label {
  color:#cfd5dd
}
input, select, textarea {
  background:#0b0f15;
  border:1px solid #29303b;
  color:#fff;
  border-radius:8px;
  outline:none;
  transition:.2s
}
input:focus, select:focus, textarea:focus {
  border-color:var(--ace);
  box-shadow:0 0 0 3px rgba(231, 85, 38, .12)
}
input[type="date"] {
  color-scheme:dark;
  padding-right:14px
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor:pointer;
  filter:invert(42%) sepia(92%) saturate(1952%) hue-rotate(348deg)
    brightness(97%) contrast(86%);
  opacity:1;
  width:18px;
  height:18px
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter:invert(100%);
  transform:scale(1.08)
}
form button {
  padding:14px 22px
}
output {
  color:#ff9c7d
}
body>footer {
  border-top:1px solid var(--stroke);
  background:#07090d;
  color:#697382;
  padding:38px
}
#chat-toggle {
  background:linear-gradient(135deg, var(--ace), var(--ace2));
  box-shadow:0 8px 35px rgba(231, 85, 38, .5);
  transition:.25s
}
#chat-toggle:hover {
  transform:scale(1.07)
}
#chat {
  background:var(--panel);
  border:1px solid var(--stroke);
  box-shadow:0 22px 70px #000a
}
#chat header {
  background:linear-gradient(120deg, #141a23, #221713);
  border-bottom:1px solid rgba(231, 85, 38, .3)
}
.messages {
  background:#0c1016
}
.messages .bot {
  background:#171d26;
  color:#e9edf2
}
.messages .user {
  background:rgba(231, 85, 38, .18);
  color:#fff
}
#chat form {
  background:#10151d;
  border-color:var(--stroke)
}
#chat form input {
  background:transparent;
  border:0;
  box-shadow:none
}
#chat form button {
  align-items:center;
  align-self:center;
  background:var(--ace);
  color:#fff;
  display:inline-flex;
  flex:0 0 40px;
  justify-content:center;
  margin-left:8px;
  margin-top:0
}
#chat form button svg {
  display:block;
  fill:currentColor;
  height:18px;
  transition:transform .2s ease;
  width:18px
}
#chat form button:hover:not(:disabled) svg {
  transform:translateX(2px)
}
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s, transform .7s
}
.reveal.visible {
  opacity:1;
  transform:none
}
@keyframes pulse {
  70% {
    box-shadow:0 0 0 9px rgba(78, 229, 155, 0)
  }
}
@keyframes float {
  50% {
    transform:translateY(-12px)
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    min-height:auto
  }
  .ai-orbit {
    max-width:500px;
    margin:auto;
    width:100%
  }
  .section-head {
    display:block
  }
  .cards, .solution-grid, .forms {
    grid-template-columns:1fr
  }
  .forms>div {
    padding:30px
  }
  .hero h1 {
    letter-spacing:-2.5px
  }
}
@media(max-width:600px) {
  body>header {
    padding:0 18px
  }
  .brand img {
    width:142px
  }
  nav {
    gap:8px
  }
  .nav-cta {
    padding:9px 12px
  }
  .hero {
    padding:78px 20px
  }
  .hero h1 {
    font-size:47px
  }
  .ai-orbit {
    display:none
  }
  .section {
    padding:85px 20px
  }
  .forms {
    padding:80px 20px
  }
  .actions {
    align-items:flex-start;
    flex-direction:column
  }
  .trust-row {
    align-items:flex-start
  }
  .solution-grid {
    gap:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    scroll-behavior:auto!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}
.brand img {
  width:192px;
  background:transparent;
  border-radius:0
}
.messages {
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:var(--ace) #111720;
  overscroll-behavior:contain;
  scroll-behavior:smooth
}
.messages::-webkit-scrollbar {
  width:8px
}
.messages::-webkit-scrollbar-track {
  background:#111720
}
.messages::-webkit-scrollbar-thumb {
  background:linear-gradient(var(--ace), var(--ace2));
  border-radius:10px;
  border:2px solid #111720
}
.messages::-webkit-scrollbar-thumb:hover {
  background:#ff7650
}