/* Aurora — premium theme for the Raibs website (loads on top of the standard stylesheet) */
:root {
  --brand: #2453E8;
  --brand-d: #1A3FC0;
  --brand-soft: #EEF2FF;
  --navy: #0B1A36;
  --navy-2: #13284F;
  --ink: #101C36;
  --ink-2: #435069;
  --muted: #6A7690;
  --line: #E3E7EF;
  --soft: #F6F8FC;
  --r: 14px;
  --r-lg: 20px;
  --shadow: 0 1px 2px rgba(16,28,54,.05), 0 16px 40px -22px rgba(16,28,54,.32);
}
body { font-size: 17px; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
h2, .h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.025em; }

/* primary action is the brand blue in this theme */
.btn { border-radius: 10px; }
.btn.go { background: var(--brand); box-shadow: 0 8px 18px -10px rgba(36,83,232,.9); }
.btn.go:hover { background: var(--brand-d); }
.btn.ghost { border-color: #D5DBE7; }
.btn.lg { padding: .9em 1.6em; }
:focus-visible { outline-color: var(--brand); }

/* header */
.top { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: transparent; transition: border-color .2s, box-shadow .2s; }
.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(16,28,54,.35); }
.top-in { height: 72px; }
.nav-link { font-weight: 500; color: #3A4660; }
.mega { top: 72px; }
.dd-panel { border-radius: 16px; box-shadow: 0 30px 70px -28px rgba(16,28,54,.45); }
.mega { border-radius: 0; }
.mega-foot a, .used-in a { color: var(--brand); }

/* ===== hero ===== */
.au-hero { position: relative; overflow: hidden; padding: 72px 0 64px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 60%, #fff),
    linear-gradient(90deg, rgba(16,28,54,.045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(rgba(16,28,54,.045) 1px, transparent 1px) 0 0 / 56px 56px,
    #fff; }
.au-glow { position: absolute; inset: -260px 0 auto; height: 760px; pointer-events: none;
  background: radial-gradient(520px 320px at 30% 40%, rgba(36,83,232,.20), transparent 70%),
              radial-gradient(420px 260px at 72% 30%, rgba(245,165,36,.20), transparent 70%),
              radial-gradient(380px 260px at 55% 70%, rgba(219,39,119,.10), transparent 70%); filter: blur(10px); }
.au-hero-in { position: relative; text-align: center; display: grid; justify-items: center; }
.au-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  text-decoration: none; font-size: .92rem; color: var(--ink-2); margin-bottom: 26px; }
.au-pill span { background: var(--brand); color: #fff; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.au-pill:hover { border-color: #C9D2E6; color: var(--ink); }
.au-hero h1 { max-width: 15ch; margin-bottom: 20px; }
.au-hero .lead { margin: 0 auto 30px; text-align: center; font-size: 1.22rem; max-width: 62ch; }
.au-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.au-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--ink-2); font-size: .95rem; }
.au-ticks li { display: flex; align-items: center; gap: 6px; }
.au-ticks .ic { color: var(--go); width: 16px; height: 16px; stroke-width: 2.4; }

/* product window (illustration) */
.au-window { position: relative; margin: 56px auto 0; max-width: 1120px; border-radius: 18px; background: #fff; border: 1px solid #DCE2EE;
  box-shadow: 0 2px 4px rgba(16,28,54,.04), 0 50px 100px -40px rgba(16,28,54,.45), 0 0 0 8px rgba(255,255,255,.6); overflow: hidden; text-align: left; }
.au-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F7F9FC; border-bottom: 1px solid var(--line); }
.au-bar i { width: 11px; height: 11px; border-radius: 50%; background: #E1E6EF; }
.au-bar i:nth-child(1) { background: #F87171; } .au-bar i:nth-child(2) { background: #FBBF24; } .au-bar i:nth-child(3) { background: #34D399; }
.au-bar span { margin: 0 auto; font-size: .82rem; color: var(--muted); font-weight: 600; transform: translateX(-26px); }
.au-app { display: grid; grid-template-columns: 210px 1fr; min-height: 400px; font-size: .86rem; }
.au-side { background: #FAFBFD; border-right: 1px solid var(--line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.au-side span { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.au-side span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,28,54,.08); font-weight: 600; }
.au-side b { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--cc); color: #fff; font: 800 .72rem var(--display); }
.au-side .more { color: var(--muted); font-size: .8rem; padding-left: 41px; }
.au-main { padding: 18px 20px 20px; display: grid; gap: 14px; align-content: start; background: #fff; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.au-top b { font: 700 1.15rem var(--display); }
.au-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--muted); min-width: 260px; }
.au-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.au-kpis div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.au-kpis small { color: var(--muted); font-size: .78rem; }
.au-kpis b { font: 700 1.35rem var(--display); letter-spacing: -.02em; }
.au-kpis em { font-style: normal; font-size: .76rem; color: var(--muted); }
.au-kpis em.up { color: var(--go); font-weight: 600; }
.au-panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.au-chart, .au-pipe { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.au-chart small, .au-pipe small { color: var(--muted); font-size: .78rem; font-weight: 600; }
.au-chart svg { width: 100%; height: 130px; }
.au-chart rect { fill: var(--brand); opacity: .9; }
.au-chart rect:last-child { fill: var(--sun); opacity: 1; }
.au-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.au-cols div { background: var(--soft); border-radius: 10px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 120px; }
.au-cols em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--muted); }
.au-cols span { background: #fff; border-radius: 7px; padding: 7px 8px; font-size: .76rem; font-weight: 600; box-shadow: 0 1px 2px rgba(16,28,54,.08); border-left: 3px solid var(--brand); }
.au-cols div:last-child span { border-left-color: var(--go); }

.au-works { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px; margin-top: 44px; color: var(--muted); font-size: .92rem; }
.au-works ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.au-works li { font: 600 .95rem var(--body); color: var(--ink-2); padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }

/* sections */
.band { padding: 96px 0; }
.band.soft { background: var(--soft); }
.center-head { text-align: center; margin-inline: auto; }
.center-head p { margin-inline: auto; }

/* bento of connected apps */
.au-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { --cc: var(--brand); position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  text-decoration: none; overflow: hidden; min-height: 300px; transition: border-color .2s, box-shadow .2s; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: radial-gradient(300px 140px at 85% 0%, color-mix(in srgb, var(--cc) 14%, transparent), transparent); pointer-events: none; }
.tile:hover { border-color: color-mix(in srgb, var(--cc) 40%, var(--line)); box-shadow: var(--shadow); }
.tile.wide { grid-column: span 2; grid-template-columns: 1fr 1.1fr; grid-template-rows: none; align-items: center; }
.t-copy { position: relative; }
.t-app { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, #fff); padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.tile h3 { font-size: 1.4rem; margin-bottom: 6px; }
.tile p { color: var(--ink-2); margin: 0; }
.t-viz { position: relative; align-self: end; }
.t-viz.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.t-viz.pipe div { background: var(--soft); border-radius: 10px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 150px; }
.t-viz.pipe em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); }
.t-viz.pipe span { display: grid; gap: 5px; align-content: center; height: 34px; padding: 0 8px; border-radius: 7px; background: #fff; border-left: 3px solid var(--cc); box-shadow: 0 1px 2px rgba(16,28,54,.08); }
.t-viz.pipe span i { display: block; height: 5px; border-radius: 3px; background: #DCE2EE; width: 80%; }
.t-viz.pipe span i + i { width: 50%; background: #EDF0F6; }
.t-viz.pipe div:last-child span { border-left-color: var(--go); }
.t-viz.invoice { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; font-size: .84rem; box-shadow: var(--shadow); position: relative; }
.t-viz.invoice b { font: 700 .95rem var(--display); margin-bottom: 4px; }
.t-viz.invoice span, .t-viz.invoice strong { display: flex; justify-content: space-between; color: var(--ink-2); }
.t-viz.invoice i { font-style: normal; }
.t-viz.invoice strong { border-top: 1px solid var(--line); padding-top: 6px; color: var(--ink); }
.t-viz.invoice em { position: absolute; top: 12px; right: 12px; font-style: normal; font-weight: 800; font-size: .74rem; color: var(--go); border: 2px solid var(--go); border-radius: 6px; padding: 1px 7px; transform: rotate(-6deg); }
.t-viz.att { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; text-align: center; }
.t-viz.att em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); }
.t-viz.att span { aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, var(--cc) 70%, #fff); }
.t-viz.att span.s0 { background: #FCE4E4; }
.t-viz.att span.s2 { background: #FFF1D6; }
.t-viz.flow { display: grid; gap: 0; justify-items: start; }
.t-viz.flow span { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: .88rem; font-weight: 600; box-shadow: 0 1px 2px rgba(16,28,54,.06); }
.t-viz.flow span .ic { color: var(--cc); }
.t-viz.flow span:nth-of-type(2) { margin-left: 34px; }
.t-viz.flow span:nth-of-type(3) { margin-left: 68px; }
.t-viz.flow i { width: 2px; height: 18px; background: repeating-linear-gradient(var(--cc) 0 4px, transparent 4px 7px); margin-left: 50px; }
.t-viz.flow i:nth-of-type(2) { margin-left: 84px; }
.t-viz.spark { display: grid; gap: 2px; }
.t-viz.spark svg { width: 100%; height: 90px; }
.t-viz.spark path { fill: none; stroke: var(--cc); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.t-viz.spark b { font: 700 1.6rem var(--display); }
.t-viz.spark small { color: var(--muted); }

.t-viz.pos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; align-items: stretch; }
.pos-bill { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 5px; font-size: .82rem; box-shadow: var(--shadow); }
.pos-bill b { font: 700 .9rem var(--display); margin-bottom: 2px; }
.pos-bill span, .pos-bill strong { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.pos-bill i { font-style: normal; white-space: nowrap; }
.pos-bill strong { border-top: 1px dashed var(--line); padding-top: 6px; color: var(--ink); }
.pos-pay { border-radius: 12px; background: color-mix(in srgb, var(--cc) 8%, #fff); border: 1px solid color-mix(in srgb, var(--cc) 25%, #fff); display: grid; justify-items: center; align-content: center; gap: 4px; padding: 12px; text-align: center; }
.pos-pay .qr { width: 64px; height: 64px; border-radius: 6px; margin-bottom: 6px;
  background: conic-gradient(from 90deg at 30% 30%, var(--ink) 25%, transparent 0) 0 0 / 16px 16px, repeating-linear-gradient(45deg, var(--ink) 0 3px, #fff 3px 7px); border: 4px solid #fff; outline: 1px solid var(--line); }
.pos-pay b { font-size: .9rem; color: var(--go); }
.pos-pay small { color: var(--muted); font-size: .78rem; }

/* apps by team */
.au-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.au-tabs button { --cc: var(--ink); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 .95rem var(--body); color: var(--ink-2); cursor: pointer; }
.au-tabs .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cc); }
.au-tabs button:hover { border-color: #C9D2E6; color: var(--ink); }
.au-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.au-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.au-panel[hidden] { display: none; }
.au-all { margin-top: 30px; }

/* cards */
.card { border-radius: var(--r); }
.card-link { padding: 24px 24px 10px; }
.card-foot { padding: 12px 24px 22px; }

/* industries */
.ind { border-radius: var(--r-lg); padding: 26px; gap: 8px; }
.ind::after { height: 4px; }
.ind-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; color: var(--brand); font-size: .95rem; }

/* dark band: stats + why */
.au-dark { background: radial-gradient(900px 420px at 85% 0%, #1D3A78, transparent 60%), var(--navy); color: #C9D3E8; padding: 90px 0; }
.au-dark h2, .au-dark h3 { color: #fff; }
.au-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); margin-bottom: 72px; overflow: hidden; }
.au-stats div { padding: 28px 26px; display: grid; gap: 4px; }
.au-stats div + div { border-left: 1px solid rgba(255,255,255,.12); }
.au-stats b { font: 800 clamp(2.2rem, 4vw, 3.2rem)/1 var(--display); color: #fff; letter-spacing: -.03em; }
.au-stats span { color: #A9B6D3; }
.au-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; }
.au-why .ic { color: var(--sun); width: 26px; height: 26px; margin-bottom: 12px; }
.au-why h3 { margin-bottom: 6px; }
.au-why p { margin: 0; color: #A9B6D3; }

/* steps */
.au-steps li::before { background: var(--brand); color: #fff; }

/* product & inner pages */
.page-head { background: linear-gradient(180deg, var(--brand-soft), #fff); border-bottom: 0; padding: 72px 0 40px; }
.p-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 10%, #fff), #fff 90%); border-bottom: 0; }
.p-card { border-radius: var(--r-lg); }
.feat-grid li { border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.plan { border-radius: var(--r-lg); }
.plan.hi { border-color: var(--brand); }
.badge { background: var(--brand); }
.price-ask, .price-table, .card-form { border-radius: var(--r-lg); }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.search:focus-within, .hero-search:focus-within { box-shadow: 0 0 0 3px rgba(36,83,232,.25); border-color: var(--brand); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(36,83,232,.2); }

/* call to action */
.au-cta-sec { padding: 0 0 96px; }
.au-cta-box { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding: 56px; border-radius: 28px; color: #fff;
  background: radial-gradient(600px 300px at 100% 0%, rgba(245,165,36,.35), transparent 60%), radial-gradient(700px 380px at 0% 100%, #3B6BFF, transparent 60%), var(--brand-d); }
.au-cta-box h2 { color: #fff; margin-bottom: 10px; }
.au-cta-box p { margin: 0; color: #DCE5FF; max-width: 58ch; }

/* footer */
.foot { background: var(--navy); }

@media (max-width: 1100px) {
  .au-app { grid-template-columns: 170px 1fr; }
  .au-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .au-bento { grid-template-columns: 1fr 1fr; }
  .tile.wide { grid-column: span 2; }
  .au-why { grid-template-columns: 1fr 1fr; }
  .au-stats { grid-template-columns: 1fr 1fr; }
  .au-stats div:nth-child(3) { border-left: 0; }
  .au-stats div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .au-panels { grid-template-columns: 1fr; }
  .au-side { display: none; }
  .au-app { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 640px) {
  .au-hero { padding: 48px 0 40px; }
  .au-window { margin-top: 36px; border-radius: 14px; }
  .au-search { display: none; }
  .au-kpis b { font-size: 1.1rem; }
  .au-pipe { display: none; }
  .au-bento, .au-why { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; grid-template-columns: 1fr; }
  .band { padding: 64px 0; }
  .au-cta-box { padding: 32px 24px; border-radius: 20px; }
  .au-stats div { padding: 20px; }
}