:root{
  /* Rengi değiştirmek için sadece bu değeri güncelleyin. */
  --brand: #6c5ce7;
  --ink: #101223;
  --muted: #687086;
  --body-bg: #f5f6fb;
  --panel: #ffffff;
  --line: rgba(16,18,35,.10);
  --soft: color-mix(in srgb, var(--brand), white 90%);
  --soft-2: color-mix(in srgb, var(--brand), white 95%);
  --brand-dark: color-mix(in srgb, var(--brand), black 34%);
  --brand-deep: color-mix(in srgb, var(--brand), black 58%);
  --brand-light: color-mix(in srgb, var(--brand), white 24%);
  --shadow: 0 24px 70px rgba(15,18,36,.12);
  --shadow-soft: 0 16px 42px rgba(15,18,36,.08);
  --radius: 26px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
  radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--brand), transparent 90%), transparent 28%),
  radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--brand), transparent 92%), transparent 26%),
  linear-gradient(180deg, #fff 0%, var(--body-bg) 44%, #fff 100%);
  overflow-x:hidden;
}
::selection{background:var(--brand);color:#fff;}
a{text-decoration:none;}
.text-brand{color:var(--brand)!important;}
.bg-soft{background:var(--soft)!important;}
.section-pad{padding:86px 0;}
.section-title{font-weight:900;letter-spacing:-.045em;}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  padding:.42rem .82rem;
  border-radius:999px;
  color:var(--brand-dark);
  background:var(--soft);
  border:1px solid color-mix(in srgb, var(--brand), white 76%);
  font-weight:850;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.btn{letter-spacing:-.01em;}
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-deep);
  --bs-btn-active-border-color: var(--brand-deep);
  box-shadow:0 14px 30px color-mix(in srgb, var(--brand), transparent 72%);
  font-weight:850;
}
.btn-brand-soft{
  color:var(--brand-dark);
  background:var(--soft);
  border:1px solid color-mix(in srgb, var(--brand), white 68%);
  font-weight:850;
}
.btn-brand-soft:hover{color:#fff;background:var(--brand);border-color:var(--brand);}
.glass-card{
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--shadow-soft);
  border-radius:var(--radius);
}

/* Navbar + compact premium header */
.hero{
  min-height:650px;
  position:relative;
  color:#fff;
  background:
  radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--brand), white 18%) 0%, transparent 24%),
  radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand), white 4%) 0%, transparent 23%),
  linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-dark) 48%, color-mix(in srgb, var(--brand), black 16%) 100%);
  overflow:visible;
  padding-bottom:94px;
  isolation:isolate;
}
.hero:before,
.hero:after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  pointer-events:none;
  z-index:0;
}
.hero:before{width:330px;height:330px;right:-90px;top:82px;}
.hero:after{width:210px;height:210px;left:-70px;bottom:56px;}
.hero-grid{
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
  linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(180deg, #000 0%, transparent 86%);
  z-index:0;
  border-radius:0 0 42px 42px;
  overflow:hidden;
}
.navbar-shell{
  position:sticky;
  top:12px;
  z-index:30;
}
.main-nav{
  border-radius:999px;
  padding:.46rem .62rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
}
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.62rem;
  color:#fff!important;
  font-weight:950;
  letter-spacing:-.035em;
}
.brand-mark{
  width:36px;height:36px;
  display:inline-grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
  flex:0 0 auto;
}
.main-nav .nav-link{
  color:rgba(255,255,255,.78)!important;
  font-weight:800;
  padding:.43rem .78rem!important;
  border-radius:999px;
  font-size:.94rem;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active{color:#fff!important;background:rgba(255,255,255,.12);}
.navbar-toggler{border:0;box-shadow:none!important;}
.navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(2);}
.hero-content{position:relative;z-index:2;padding-top:58px;}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.52rem;
  padding:.46rem .8rem;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(14px);
  font-weight:850;
  font-size:.9rem;
}
.hero h1{
  font-size:clamp(2.25rem, 4.5vw, 4.65rem);
  line-height:.98;
  font-weight:950;
  letter-spacing:-.07em;
  margin-top:1rem;
  max-width:700px;
}
.hero p.lead{color:rgba(255,255,255,.78);font-weight:500;max-width:620px;font-size:1.16rem!important;}
.hero .btn-lg{--bs-btn-padding-y:.72rem;--bs-btn-padding-x:1.2rem;font-size:1rem;}
.hero-stat{
  padding:.82rem .95rem;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  min-width:122px;
}
.hero-stat strong{display:block;font-size:1.25rem;line-height:1;font-weight:950;}
.hero-stat span{color:rgba(255,255,255,.68);font-size:.82rem;}
.hero-visual{
  position:relative;
  min-height:390px;
}
.floating-card{
  position:absolute;
  border-radius:24px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(22px);
  box-shadow:0 28px 80px rgba(0,0,0,.22);
}
.hero-window{inset:18px 0 auto auto;width:min(520px, 100%);padding:13px;}
.hero-mini{right:18px;bottom:20px;width:220px;padding:16px;z-index:3;}
.hero-side{left:2px;bottom:68px;width:196px;padding:14px;z-index:4;}
.hero-side,.hero-mini{display:none;}
.hero .col-lg-6:first-child > .d-flex.flex-wrap.gap-3.mt-5{margin-top:1.55rem!important;}
.window-bar{display:flex;gap:7px;align-items:center;padding:6px 8px 12px;}
.dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.48);}
.hero-dashboard{
  border-radius:18px;
  background:#f8f9ff;
  color:var(--ink);
  overflow:hidden;
  min-height:290px;
  display:grid;
  grid-template-columns:130px 1fr;
}
.dash-sidebar{background:#11142a;color:#fff;padding:16px 12px;}
.dash-pill{height:9px;border-radius:999px;background:rgba(255,255,255,.16);margin-bottom:11px;}
.dash-main{padding:16px;}
.dash-head{height:42px;border-radius:16px;background:linear-gradient(135deg, var(--soft), #fff);margin-bottom:13px;}
.dash-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.dash-box{height:74px;border-radius:16px;background:#fff;border:1px solid rgba(15,18,36,.08);box-shadow:0 8px 22px rgba(15,18,36,.06);}
.dash-chart{height:112px;border-radius:18px;background:linear-gradient(180deg,#fff,var(--soft-2));border:1px solid rgba(15,18,36,.08);position:relative;overflow:hidden;}
.dash-chart:before{
  content:"";position:absolute;left:18px;right:18px;bottom:22px;height:56px;
  background:linear-gradient(135deg, transparent 0 14%, var(--brand) 14% 20%, transparent 20% 32%, var(--brand-light) 32% 38%, transparent 38% 54%, var(--brand) 54% 60%, transparent 60%);
  opacity:.55;clip-path:polygon(0 75%,12% 42%,24% 56%,38% 26%,52% 50%,67% 16%,82% 46%,100% 24%,100% 100%,0 100%);
}

/* Version tabs */
.version-dock-wrap{
  position:absolute;
  left:0;right:0;bottom:-48px;
  z-index:20;
  transform:none;
}
.version-dock{
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(15,18,36,.22);
  border:1px solid rgba(255,255,255,.92);
}
.version-pills{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.version-pills .nav-item{min-width:0;}
.version-pills .nav-link{
  width:100%;
  height:100%;
  min-height:66px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:.78rem .9rem;
  text-align:left;
  white-space:normal;
  font-weight:900;
  line-height:1.15;
  box-shadow:0 8px 24px rgba(15,18,36,.045);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  overflow:hidden;
}
.version-pills .nav-link i{font-size:1rem;}
.version-pills .nav-link small{display:block;color:var(--muted);font-weight:750;margin-top:.18rem;font-size:.77rem;line-height:1.2;}
.version-pills .nav-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--brand), white 68%);box-shadow:0 14px 34px rgba(15,18,36,.09);}
.version-pills .nav-link.active{
  color:#fff;
  border-color:transparent;
  background:
  linear-gradient(135deg, color-mix(in srgb, var(--brand), white 8%), var(--brand-dark));
  box-shadow:0 18px 40px color-mix(in srgb, var(--brand), transparent 66%);
}
.version-pills .nav-link.active small{color:rgba(255,255,255,.76);}
main{padding-top:82px;}
.anchor-offset{scroll-margin-top:118px;}

/* Version content */
.version-summary{
  border-radius:var(--radius);
  padding:30px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(16,18,35,.08);
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.version-summary:after{
  content:"";
  position:absolute;
  inset:auto -56px -76px auto;
  width:170px;height:170px;
  border-radius:999px;
  background:var(--soft);
  z-index:0;
}
.version-summary > *{position:relative;z-index:1;}
.version-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}
.version-meta span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .72rem;
  border-radius:999px;
  background:var(--soft-2);
  color:var(--brand-dark);
  border:1px solid color-mix(in srgb, var(--brand), white 82%);
  font-weight:850;
  font-size:.84rem;
}
.screen-card{
  border-radius:30px;
  padding:16px;
  background:
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(135deg, color-mix(in srgb, var(--brand), white 70%), rgba(255,255,255,.9), color-mix(in srgb, var(--brand), white 84%)) border-box;
  border:1px solid transparent;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.screen-card:before{
  content:"";
  position:absolute;
  inset:-120px -100px auto auto;
  width:260px;height:260px;
  border-radius:999px;
  background:var(--soft);
  pointer-events:none;
}
.screen-card .carousel{position:relative;z-index:1;}
.screen-mock{
  overflow:hidden;
  border-radius:22px;
  background:#0f1226;
  min-height:408px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.screen-top{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:#0d1022;
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.screen-address{width:48%;height:12px;border-radius:999px;background:rgba(255,255,255,.12);}
.screen-body{
  min-height:362px;
  background:#f6f7fc;
  display:grid;
  grid-template-columns:200px 1fr;
  color:var(--ink);
}
.screen-nav{padding:21px 16px;background:#15182e;color:#fff;}
.screen-logo-line{height:21px;border-radius:999px;background:rgba(255,255,255,.18);margin-bottom:24px;}
.screen-menu-line{height:12px;border-radius:999px;background:rgba(255,255,255,.15);margin-bottom:14px;}
.screen-menu-line.active{background:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb, var(--brand), transparent 82%);}
.screen-content{padding:22px;}
.screen-title-line{height:23px;width:52%;border-radius:999px;background:#15182e;margin-bottom:17px;}
.screen-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:15px;}
.screen-metric{height:86px;border-radius:19px;background:#fff;border:1px solid rgba(15,18,36,.08);box-shadow:0 8px 20px rgba(15,18,36,.05);position:relative;overflow:hidden;}
.screen-metric:before{content:"";position:absolute;left:17px;top:17px;width:40%;height:11px;border-radius:999px;background:var(--soft);}
.screen-metric:after{content:"";position:absolute;left:17px;bottom:17px;width:56%;height:19px;border-radius:999px;background:color-mix(in srgb, var(--brand), white 60%);}
.screen-lower{display:grid;grid-template-columns:1.25fr .75fr;gap:13px;}
.screen-chart,.screen-table{height:174px;border-radius:21px;background:#fff;border:1px solid rgba(15,18,36,.08);box-shadow:0 8px 20px rgba(15,18,36,.05);position:relative;overflow:hidden;}
.screen-chart:before{content:"";position:absolute;left:18px;right:18px;bottom:22px;height:92px;background:var(--soft);clip-path:polygon(0 80%,12% 58%,24% 66%,36% 35%,48% 48%,60% 22%,72% 46%,84% 18%,100% 36%,100% 100%,0 100%);}
.screen-chart:after{content:"";position:absolute;left:18px;right:18px;bottom:22px;height:3px;background:var(--brand);transform:rotate(-8deg);transform-origin:left center;opacity:.8;}
.screen-table{padding:18px;}
.screen-table span{display:block;height:12px;border-radius:999px;background:#eef0f7;margin-bottom:14px;}
.screen-table span:nth-child(2n){width:76%;}
.screen-table span:nth-child(3n){background:var(--soft);}
.carousel-control-prev,
.carousel-control-next{width:48px;height:48px;border-radius:999px;top:50%;transform:translateY(-50%);background:rgba(16,18,35,.56);backdrop-filter:blur(8px);}
.carousel-control-prev{left:20px;}.carousel-control-next{right:20px;}
.carousel-indicators{margin-bottom:0;bottom:-34px;}
.carousel-indicators [data-bs-target]{background-color:var(--brand);width:8px;height:8px;border-radius:999px;}

.feature-card{
  height:100%;
  padding:25px;
  border-radius:25px;
  border:1px solid rgba(16,18,35,.08);
  background:rgba(255,255,255,.94);
  box-shadow:0 12px 30px rgba(15,18,36,.055);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-soft);border-color:color-mix(in srgb, var(--brand), white 70%);}
.icon-box{
  width:54px;height:54px;
  border-radius:19px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--soft),#fff);
  color:var(--brand-dark);
  border:1px solid color-mix(in srgb, var(--brand), white 78%);
  font-size:1.35rem;
  margin-bottom:17px;
}
.feature-card h5{font-weight:900;letter-spacing:-.025em;}
.feature-card p{color:var(--muted);margin-bottom:0;}
.info-card{
  height:100%;
  padding:30px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(16,18,35,.08);
  box-shadow:var(--shadow-soft);
}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:13px;}
.info-list li{display:flex;gap:.8rem;color:var(--muted);}
.info-list i{color:var(--brand);font-size:1.15rem;flex:0 0 auto;}
.demo-box{
  border-radius:23px;
  padding:22px;
  background:linear-gradient(135deg,var(--soft),#fff);
  border:1px solid color-mix(in srgb, var(--brand), white 78%);
}
.price-card{
  position:relative;
  overflow:hidden;
  height:100%;
  border-radius:30px;
  padding:30px;
  background:#fff;
  border:1px solid rgba(16,18,35,.08);
  box-shadow:var(--shadow);
}
.price-card:before{
  content:"";
  position:absolute;right:-68px;top:-82px;width:220px;height:220px;border-radius:999px;
  background:var(--soft);
}
.price-card > *{position:relative;z-index:1;}
.price-tag{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:1;
  color:var(--brand-dark);
}
.bank-box{
  padding:18px;
  border-radius:22px;
  background:var(--soft-2);
  border:1px dashed color-mix(in srgb, var(--brand), white 58%);
}
.bank-row{
  display:flex;
  gap:12px;
  justify-content:space-between;
  border-bottom:1px solid rgba(16,18,35,.08);
  padding:.65rem 0;
  font-size:.94rem;
}
.bank-row:last-child{border-bottom:0;}
.bank-row span:first-child{color:var(--muted);font-weight:800;}
.bank-row span:last-child{font-weight:900;text-align:right;}
.offer-card{
  height:100%;
  border-radius:30px;
  padding:30px;
  background:
  radial-gradient(circle at 100% 0%, rgba(255,255,255,.15), transparent 32%),
  linear-gradient(145deg,var(--brand-deep),var(--brand-dark));
  color:#fff;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.offer-card:before{content:"";position:absolute;inset:auto -70px -120px auto;width:280px;height:280px;border-radius:999px;background:rgba(255,255,255,.09);}
.offer-card > *{position:relative;z-index:1;}
.offer-card .form-control,
.offer-card .form-select,
.offer-card textarea{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.offer-card .form-control::placeholder,
.offer-card textarea::placeholder{color:rgba(255,255,255,.58);}
.offer-card .form-select option{color:#111;}
.offer-card label{color:rgba(255,255,255,.78);font-weight:850;}
.footer{
  padding:72px 0 26px;
  color:#fff;
  background:
  radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--brand), white 10%), transparent 25%),
  linear-gradient(145deg, #080a18, var(--brand-deep));
  position:relative;
  overflow:hidden;
}
.footer:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);background-size:48px 48px;opacity:.35;}
.footer .container{position:relative;z-index:2;}
.footer h5{font-weight:900;letter-spacing:-.02em;}
.footer a{color:rgba(255,255,255,.72);display:inline-block;margin:.35rem 0;}
.footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;color:rgba(255,255,255,.64);}
.social a{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.10);color:#fff;margin-right:8px;}
.social a:hover{background:var(--brand);}
.modal-content{border:0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);}
.modal-header{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border:0;}
.btn-close{filter:invert(1);opacity:.9;}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .25rem color-mix(in srgb, var(--brand), transparent 82%);}

@media (max-width: 1199.98px){
  .hero-window{width:min(480px,100%);}
  .hero-side{display:none;}
  .hero-mini{right:10px;}
  .main-nav .nav-link{padding:.42rem .62rem!important;}
}
@media (max-width: 991.98px){
  .hero{min-height:auto;padding-bottom:164px;}
  .main-nav{border-radius:24px;}
  .main-nav .navbar-collapse{padding-top:12px;}
  .main-nav .btn{margin-top:6px;width:100%;}
  .hero-content{padding-top:48px;}
  .hero h1{max-width:100%;}
  .hero-visual{min-height:350px;margin-top:28px;}
  .hero-window{left:0;right:0;width:100%;}
  .hero-mini{display:none;}
  .version-dock-wrap{bottom:-105px;}
  .version-dock{border-radius:22px;}
  .version-pills{grid-template-columns:1fr;gap:8px;}
  .version-pills .nav-link{min-height:58px;display:block;}
  main{padding-top:132px;}
  .screen-body{grid-template-columns:1fr;}
  .screen-nav{display:none;}
  .screen-metrics{grid-template-columns:1fr;}
  .screen-lower{grid-template-columns:1fr;}
  .category-heading{align-items:flex-start;flex-direction:column;}
}
@media (max-width: 575.98px){
  .section-pad{padding:66px 0;}
  .hero{padding-bottom:184px;}
  .hero h1{letter-spacing:-.055em;}
  .hero p.lead{font-size:1.02rem!important;}
  .hero-stat{min-width:calc(50% - 8px);}
  .hero-visual{display:none;}
  .version-dock-wrap{bottom:-118px;}
  .version-dock{padding:8px;border-radius:20px;}
  .version-pills .nav-link{min-height:54px;padding:.64rem .75rem;border-radius:15px;font-size:.94rem;}
  .version-pills .nav-link small{font-size:.72rem;}
  main{padding-top:146px;}
  .screen-mock{min-height:350px;}
  .screen-body{min-height:304px;}
  .screen-content{padding:18px;}
  .screen-metrics{gap:10px;}
  .screen-metric{height:72px;}
  .carousel-control-prev,.carousel-control-next{display:none;}
  .price-card,.offer-card,.info-card,.version-summary{padding:24px;}
  .bank-row{flex-direction:column;gap:3px;}
  .bank-row span:last-child{text-align:left;word-break:break-word;}
  .category-panel{padding:24px;border-radius:26px;}
  .category-card{min-height:auto;padding:22px;}
  .category-arrow{display:none;}
}



.category-panel{
  position:relative;
  overflow:hidden;
  padding:32px;
  border-radius:32px;
  background:linear-gradient(180deg,#fff,var(--soft-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.category-panel:before{
  content:"";
  position:absolute;
  right:-120px;
  top:-140px;
  width:310px;
  height:310px;
  border-radius:999px;
  background:var(--soft);
  opacity:.9;
  pointer-events:none;
}
.category-panel:after{
  content:"";
  position:absolute;
  left:28px;
  bottom:-75px;
  width:220px;
  height:220px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16,18,35,.06);
  pointer-events:none;
}
.category-panel > *{position:relative;z-index:2;}
.category-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.25rem;
  margin-bottom:24px;
}
.category-heading p{max-width:620px;color:var(--muted);margin-bottom:0;}
.category-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  padding:.68rem .95rem;
  border-radius:999px;
  color:var(--brand-dark);
  background:#fff;
  border:1px solid color-mix(in srgb, var(--brand), white 76%);
  font-weight:900;
  box-shadow:0 10px 24px rgba(15,18,36,.06);
  white-space:nowrap;
}
.category-card{
  position:relative;
  height:100%;
  min-height:164px;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:26px 28px;
  border-radius:26px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(16,18,35,.08);
  box-shadow:0 14px 34px rgba(15,18,36,.06);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.category-card:after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:-74px;
  width:170px;
  height:170px;
  border-radius:999px;
  background:var(--soft);
  opacity:.95;
  z-index:0;
}
.category-card > *{position:relative;z-index:2;}
.category-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--brand), white 64%);
  box-shadow:0 22px 48px rgba(15,18,36,.10);
}
.category-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 14px 30px color-mix(in srgb, var(--brand), transparent 72%);
  font-size:1.45rem;
}
.category-card h4{
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:-.025em;
  margin:.36rem 0 .45rem;
}
.category-card p{color:var(--muted);margin-bottom:0;}
.category-meta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .58rem;
  border-radius:999px;
  color:var(--brand-dark);
  background:var(--soft);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.category-arrow{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-left:auto;
  border-radius:999px;
  color:var(--brand-dark);
  background:#fff;
  border:1px solid rgba(16,18,35,.08);
  box-shadow:0 10px 22px rgba(15,18,36,.06);
}


/* Product list */
.toolbar-card{
  position:sticky;
  top:92px;
  z-index:10;
  border-radius:28px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(16,18,35,.08);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px);
  padding:16px;
}
.search-wrap{position:relative;}
.search-wrap i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);}
.search-wrap .form-control{padding-left:48px;min-height:50px;border-radius:18px;}
.toolbar-card .form-select{min-height:50px;border-radius:18px;font-weight:750;}
.result-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 18px;
  border-radius:18px;
  background:var(--soft);
  color:var(--brand-dark);
  font-weight:900;
  white-space:nowrap;
}
.product-item{transition:opacity .2s ease, transform .2s ease;}
.product-item.d-none{display:none!important;}
.product-card{
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(15,18,36,.07);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--brand), white 68%);
}
.product-card:before{
  content:"";
  position:absolute;
  right:-90px;
  top:-100px;
  width:230px;
  height:230px;
  border-radius:999px;
  background:var(--soft);
  pointer-events:none;
}
.product-head{position:relative;z-index:2;padding:18px 18px 0;}
.product-visual{
  position:relative;
  min-height:188px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,var(--brand-deep),var(--brand-dark));
  color:#fff;
  padding:16px;
}
.product-visual:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.55;
}

.mini-browser{position:relative;z-index:2;border-radius:18px;background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 20px 45px rgba(0,0,0,.22);}
.mini-top{display:flex;align-items:center;gap:5px;padding:10px 12px;border-bottom:1px solid rgba(16,18,35,.08);}
.mini-top span{width:8px;height:8px;border-radius:999px;background:#d8dbe6;}
.mini-body{padding:13px;}
.mini-row{height:10px;border-radius:999px;background:#eef0f7;margin-bottom:10px;}
.mini-row.short{width:58%;background:var(--soft);}
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.mini-metrics span{height:42px;border-radius:14px;background:var(--soft-2);}
.mini-chart{height:46px;border-radius:16px;background:linear-gradient(135deg,var(--soft),#fff);border:1px solid rgba(16,18,35,.06);}
.product-body{position:relative;z-index:2;padding:22px;}
.product-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.product-badge,
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  padding:.34rem .62rem;
  font-weight:900;
  font-size:.74rem;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}
.product-badge{color:var(--brand-dark);background:var(--soft);}
.status-badge{color:#168456;background:#e9f8f0;}
.product-card h3{font-size:1.33rem;font-weight:930;letter-spacing:-.035em;margin-bottom:.5rem;}
.product-card p{color:var(--muted);margin-bottom:1rem;}
.feature-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.feature-chips span{
  padding:.38rem .66rem;
  border-radius:999px;
  background:#f6f7fb;
  color:#555b6d;
  border:1px solid rgba(16,18,35,.06);
  font-size:.82rem;
  font-weight:800;
}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(16,18,35,.08);padding-top:16px;}
.price small{display:block;color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.price strong{font-size:1.35rem;font-weight:950;letter-spacing:-.045em;color:var(--brand-dark);}
.card-actions{display:flex;gap:8px;}
.card-actions .btn{--bs-btn-padding-y:.52rem;--bs-btn-padding-x:.78rem;}

.empty-state{
  display:none;
  padding:44px;
  border-radius:32px;
  background:#fff;
  border:1px dashed color-mix(in srgb, var(--brand), white 55%);
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.empty-state.show{display:block;}
.empty-state i{font-size:2.7rem;color:var(--brand);}


.compare-card{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  padding:34px;
  color:#fff;
  background:linear-gradient(145deg,var(--brand-deep),var(--brand-dark));
  box-shadow:var(--shadow);
}
.compare-card:before{content:"";position:absolute;right:-90px;bottom:-130px;width:330px;height:330px;border-radius:999px;background:rgba(255,255,255,.09);}
.compare-card > *{position:relative;z-index:2;}
.compare-row{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr .8fr;
  gap:1px;
  overflow:hidden;
  border-radius:22px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
}
.compare-cell{padding:16px;background:rgba(255,255,255,.08);}
.compare-cell strong{font-weight:900;}
.compare-cell span{color:rgba(255,255,255,.70);}