:root{
  --primary:#2a78be;
  --accent-orange:#f7a423;
  --gradient:linear-gradient(135deg,#2a78be,#06B6D4);
  --tabgradient:linear-gradient(180deg,#ededed 10%,#efefef 50%, #ffffff 100%);
  --shadow:0 20px 40px rgba(28,9,80,.35);

    --bg:#f5f1ff;
  --card:#ffffff;
  --pill:#fefefe;
  --ink:#1c0950;
  --cta:#2477bd;
  --radius:14px;
}
body{background:#f8fafc}
a, .btn-link{--bs-link-color:#0ea5e9}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-accent{background:var(--accent-orange);border-color:var(--accent-orange);color:#fff}
.btn-outline-primary:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
.text-gradient{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-accent{color:var(--accent-orange)}
.bg-gradient{background:var(--gradient)!important}
.rounded-4{border-radius:1rem}

/* v3.1 Two-column hero */
.hero-2col .hero-title{letter-spacing:-.5px}
.hero-accent{display:inline-block;width:18px;height:18px;margin-left:6px;transform:rotate(45deg);background:var(--accent-orange);vertical-align:middle;border-radius:4px}
.hero-mock{background:#fff;border-radius:1rem;padding:8px}
.hero-mock img{box-shadow:0 .75rem 1.5rem rgba(0,0,0,.06)}

/* Quick summaries */
.summary-card{background:#fff;transition:transform .25s ease, box-shadow .25s ease}
.summary-card:hover{transform:translateY(-4px);box-shadow:0 .75rem 1.25rem rgba(0,0,0,.08)}

/* Demo brand logos (wordmarks) */
.logo-svg{display:inline-flex;align-items:center;justify-content:center;width:160px;height:60px;border-radius:12px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 .25rem .75rem rgba(0,0,0,.04);font-weight:800;letter-spacing:2px}
.brand-atlas{color:#0f172a}
.brand-nova{color:#334155}
.brand-orion{color:#111827}
.brand-quantum{color:#0f766e}
.brand-lumina{color:#1d4ed8}
.brand-vertex{color:#7c3aed}
.brand-nimbus{color:#0369a1}
.brand-apex{color:#b45309}
.brand-stellar{color:#6d28d9}
.brand-pioneer{color:#15803d}

/* Testimonials */
.testi-card .avatar{width:56px;height:56px;border-radius:50%}

/* Footer visual */
.footer-visual{background:#0f172a}
.footer-topbar{position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--primary),var(--accent-orange))}

/* Breadcrumb hero */
.breadcrumb-hero{padding:30px 0;position:relative;overflow:hidden}
.breadcrumb-hero h1{margin:0}
.breadcrumb{--bs-breadcrumb-divider: '›';}
.wave-sep{
  position:absolute;
  left:0;right:0;
  bottom:-1px;
  height:24px;
  background:linear-gradient(to right,transparent 0%,rgba(50,150,250,.25) 15%,transparent 100%);
  filter:blur(10px)
}
.breadcrumb .breadcrumb-item a{
      text-decoration: none;
    font-weight: 500;
}

/* Cards and hovers */
.solution-card,.product-card,.story-card,.pricing-card,.cta-banner,.stat-card,.about-metric{background:#fff}
.solution-card,.product-card{transition:transform .25s ease, box-shadow .25s ease}
.solution-card:hover,.product-card:hover{transform:translateY(-4px);box-shadow:0 .75rem 1.25rem rgba(0,0,0,.08)}
.story-card canvas{margin-top:.5rem}
.hover-float{transition:transform .25s ease, box-shadow .25s ease}
.hover-float:hover{transform:translateY(-6px);box-shadow:0 1rem 2rem rgba(79,70,229,.15)}
.pricing-card.featured{border:2px solid var(--primary);box-shadow:0 .5rem 1.5rem rgba(79,70,229,.12)}


/*tab slider*/
.wrap{ max-width:1200px; margin:24px auto; padding:16px; }

.slider{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
  background:linear-gradient(#fff,#fff) padding-box,
           radial-gradient(1400px 700px at 70% 30%, #efe9ff, #ffffff) border-box;
  border:1px solid #f0ebff;
  border-radius:24px;
  padding:3px;
  box-shadow:var(--shadow);
}

/* LEFT TABS */
.tabs{
  position:relative;
  height:584px;
  overflow:hidden;
  border-radius:24px 5px 0px 24px;
  background:var(--tabgradient);
}
.tabs__inner{
  position:absolute; inset:0;
  overflow-y:auto;
  scroll-behavior:smooth;
  padding:8px;
  overflow: hidden;
}
.tab{
  display:grid;
  grid-template-columns:56px 1fr;
  grid-template-rows:auto auto;
  grid-column-gap:14px;
  align-items:center;
  /*padding:14px;*/
  height:140px;
  border-radius:16px;
  background:#fff;
  margin:8px 6px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 2px 0 rgba(28,9,80,.25);
}
.tab:hover{ transform:translateX(25px); box-shadow:0 8px 20px rgba(28,9,80,.10); }
.tab.active{ outline:2px solid #e2d8ff; transform:translateX(25px); background:#ffffff; }
.tab__img{
  width:56px; height:56px; 
  border-radius:0px 12px 12px 0px;
  background: rgba(36, 119, 189, .75);
  color:rgba(250,250,250,1);
  position: absolute;
  
}

.tab__img i{
  margin: 8px;
}

.tab:hover .tab__img,
.tab.active .tab__img{
  background: rgba(35, 125, 175, .10);
  color:#f7a423;
}

.tab__title{
      margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height:1.2;
    color: var(--bs-heading-color);
}
.tab__desc{
  grid-column:2/3; font-size:14px; color:#57458f; opacity:.9;
}

/* RIGHT STAGE */
.stage{
  position:relative;
  height:650px;
  border-radius:20px;
  background:#fff;
  overflow:hidden;
}
.stage__bg{
  position:absolute; inset:0;
  background:var(--pill);
  border-radius:0 14px 14px 0;
}
.slide{
  position:absolute; inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.slide.active{ opacity:1; pointer-events:auto; }

.pill{
  display:inline-block; font-weight:500;
  font-size:18px; padding:8px 12px; border-radius:10px;
  background:var(--pill);
}

.pill-p{
  padding-left: 12px;
}

.media-wrap{
  position:relative;
  width:750px; max-width:calc(100% - 48px);
  height:410px;
  margin:18px 0 0 60px;
  border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow);
  /* circle reveal */
  clip-path:circle(0% at 50% 50%);
  transition:clip-path .75s cubic-bezier(.22,1,.36,1);
}
.slide.active .media-wrap{ clip-path:circle(71% at 50% 50%); }

.media-wrap video, .media-wrap img{
  position:absolute; 
  inset:0; 
  width:120%; 
  height:100%; 
  object-fit:contain;
  display:block;
}

.cta{
  /*justify-self:center;*/
  justify-self: auto;
  margin-top:18px;
  padding:0 44px; height:50px; line-height:50px;
  color:#fff; background:var(--cta); border:none; border-radius:25px;
  font-weight:600; font-size:18px; cursor:pointer;
  box-shadow:0 20px 40px rgba(28,9,80,.35);
  text-decoration:none; display:inline-block;
}

/* arrows */
.arrows{ position:absolute; right:50px; bottom:35px; display:flex; gap:8px }
.arrow{
  width:44px; height:44px; border-radius:50%;
  background:#ededed url('https://www.sliderrevolution.com/wp-content/uploads/revslider/2024Type-Slider-Vert/Nav-Arrow.svg') center/95% no-repeat;
  box-shadow:var(--shadow); border:1px solid #eee;
  cursor:pointer; transform:scaleX(-1);
  
}
.arrow.next{ transform:none; }

/* Responsive */
@media (max-width: 1024px){
  .slider{ grid-template-columns:260px 1fr; }
  .media-wrap{ margin-left:24px; height:320px; }
}
@media (max-width: 820px){
  .slider{ grid-template-columns:1fr; }
  .tabs{ height:auto; max-height:320px; }
  .stage{ height:auto; min-height:520px; }
  .media-wrap{ margin-left:0; height:300px; }
}

  .footer-visual .logo{
    width: 150px;
  }