.indispensables-page { position: relative; overflow: hidden; padding-bottom: 38px; background: linear-gradient(180deg, #fffafd 0, #fff 43%, #fefeff 100%); color: #0d153e; }
.indispensables-hero { position: relative; min-height: 430px; overflow: hidden; border-bottom: 1px solid #f0ebf5; background: radial-gradient(circle at 50% 20%, #fff 0, rgb(255 255 255 / 20%) 48%, transparent 68%), linear-gradient(145deg, #fff8fb, #fff 48%, #fbf8ff); }
.indispensables-hero__inner { position: relative; z-index: 2; width: min(calc(100% - 40px), 760px); margin: 0 auto; padding: 62px 0 48px; text-align: center; }
.indispensables-hero h1 { margin: 0 0 13px; color: #0a123e; font-size: clamp(44px, 5vw, 68px); font-weight: 870; letter-spacing: -.055em; line-height: 1.02; }
.indispensables-lead { margin: 0; color: #7233e6; font-size: clamp(19px, 2vw, 26px); line-height: 1.35; }
.indispensables-lead strong { font-weight: 790; }
.indispensables-intro { margin: 15px auto 31px; color: #3e496c; font-size: 17px; line-height: 1.55; }
.indispensables-search { display: grid; min-height: 66px; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid #e3dfec; border-radius: 16px; padding: 7px 10px 7px 23px; background: #fff; box-shadow: 0 10px 28px rgb(65 43 113 / 10%); }
.indispensables-search > svg { width: 25px; height: 25px; fill: none; stroke: #4f5b7b; stroke-width: 1.8; stroke-linecap: round; }
.indispensables-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #11183e; font: inherit; font-size: 15px; }
.indispensables-search input::placeholder { color: #8991aa; opacity: 1; }
.indispensables-search button { min-width: 119px; min-height: 50px; border: 0; border-radius: 12px; padding: 0 22px; background: linear-gradient(135deg, #7c3aed, #6630dc); color: #fff; font: inherit; font-size: 14px; font-weight: 780; box-shadow: 0 7px 18px rgb(103 48 220 / 23%); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.indispensables-search button:hover { box-shadow: 0 10px 23px rgb(103 48 220 / 29%); transform: translateY(-1px); }
.indispensables-search:focus-within { border-color: #a886ef; box-shadow: 0 0 0 4px rgb(119 65 230 / 10%), 0 10px 28px rgb(65 43 113 / 10%); }
.indispensables-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 25px; }
.indispensables-filters button { min-height: 36px; border: 1px solid #d8cdf6; border-radius: 999px; padding: 0 21px; background: rgb(255 255 255 / 82%); color: #4c28b7; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.indispensables-filters button:hover { border-color: #9b7be9; transform: translateY(-1px); }
.indispensables-filters button[aria-pressed="true"] { border-color: #6d36df; background: #6d36df; color: #fff; }
.indispensables-shape { position: absolute; border-radius: 48% 52% 44% 56%; filter: blur(.2px); }
.indispensables-shape--left { width: 250px; height: 390px; top: 55px; left: -155px; background: linear-gradient(145deg, #ffe5f1, #f4d8ff); transform: rotate(-7deg); }
.indispensables-shape--right { width: 255px; height: 330px; right: -170px; bottom: -80px; background: linear-gradient(150deg, #f3dcff, #eee3ff); transform: rotate(12deg); }
.indispensables-dots { position: absolute; width: 130px; height: 105px; top: 0; right: 24px; opacity: .55; background-image: radial-gradient(#f6bfdc 2px, transparent 2px); background-size: 13px 13px; }
.indispensables-catalog { position: relative; z-index: 3; width: min(calc(100% - 58px), 1180px); margin: -6px auto 0; border: 1px solid #e9e5ef; border-radius: 24px; padding: 34px 24px 25px; background: rgb(255 255 255 / 94%); box-shadow: 0 18px 50px rgb(63 43 102 / 8%); }
.indispensables-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.indispensables-card { display: grid; min-height: 168px; grid-template-columns: 66px minmax(0, 1fr); align-items: start; gap: 17px; border: 1px solid #e4e3eb; border-radius: 17px; padding: 23px 18px; background: #fff; box-shadow: 0 8px 20px rgb(35 36 76 / 5%); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.indispensables-card:hover, .indispensables-card:focus-visible { border-color: #bca8ee; box-shadow: 0 14px 28px rgb(58 40 112 / 11%); transform: translateY(-2px); }
.indispensables-card[hidden] { display: none; }
.indispensables-card__logo { display: grid; width: 66px; height: 66px; overflow: hidden; place-items: center; border-radius: 15px; padding: 7px; background: linear-gradient(145deg, #3c20a7, #6d35e4); color: #fff; box-shadow: 0 8px 18px rgb(48 38 110 / 15%); }
.indispensables-card__logo img { width: 100%; height: 100%; border-radius: 10px; background: #fff; object-fit: contain; }
.indispensables-card__logo b { font-size: 20px; font-weight: 850; letter-spacing: -.04em; }
.indispensables-card--2 .indispensables-card__logo { background: linear-gradient(145deg, #48d6a4, #27b87e); }
.indispensables-card--3 .indispensables-card__logo { background: linear-gradient(145deg, #1682f5, #175bd7); }
.indispensables-card--4 .indispensables-card__logo { background: linear-gradient(145deg, #ff3e65, #df4f91); }
.indispensables-card--5 .indispensables-card__logo { background: linear-gradient(145deg, #19bc9a, #087f70); }
.indispensables-card--6 .indispensables-card__logo { background: linear-gradient(145deg, #ffbf20, #ff9b22); }
.indispensables-card--7 .indispensables-card__logo { background: linear-gradient(145deg, #16c475, #05a462); }
.indispensables-card--8 .indispensables-card__logo { background: linear-gradient(145deg, #082f53, #061a35); }
.indispensables-card__body { display: flex; min-width: 0; min-height: 118px; flex-direction: column; align-items: flex-start; }
.indispensables-card__body strong { margin: 2px 0 5px; color: #10163d; font-size: 17px; font-weight: 820; letter-spacing: -.025em; line-height: 1.16; }
.indispensables-card__body small { display: -webkit-box; overflow: hidden; color: #4f5977; font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.indispensables-card__body em { margin-top: auto; border: 1px solid #ded3f9; border-radius: 999px; padding: 4px 11px; color: #5c31c8; font-size: 11px; font-style: normal; line-height: 1; }
.indispensables-all { display: flex; width: max-content; min-width: 265px; min-height: 55px; align-items: center; justify-content: center; gap: 21px; margin: 28px auto 0; border: 1px solid #7343e4; border-radius: 10px; color: #6b31dd; font-size: 15px; font-weight: 760; }
.indispensables-all:hover { background: #f8f5ff; }
.indispensables-all svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.indispensables-empty { grid-column: 1 / -1; border: 1px dashed #d8d0e8; border-radius: 16px; padding: 46px 24px; background: #fbf9ff; text-align: center; }
.indispensables-empty[hidden] { display: none; }
.indispensables-empty h2 { margin: 0 0 7px; font-size: 21px; }
.indispensables-empty p { margin: 0; color: #66708d; font-size: 13px; }
.indispensables-empty a, .indispensables-empty button { display: inline-flex; margin-top: 15px; border: 0; background: transparent; color: #6730d8; font: inherit; font-size: 13px; font-weight: 760; cursor: pointer; }
.indispensables-values { display: grid; width: min(calc(100% - 58px), 1180px); min-height: 130px; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 27px auto 0; border: 1px solid #ebe7f1; border-radius: 22px; padding: 21px 34px; background: #fff; box-shadow: 0 10px 30px rgb(48 35 89 / 5%); }
.indispensables-values article { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 18px; }
.indispensables-value-icon { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #f0eaff, #f8f3ff); color: #713be0; }
.indispensables-value-icon svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.indispensables-value-icon--flag { grid-template-columns: repeat(3, 13px); justify-content: center; }
.indispensables-value-icon--flag i { width: 13px; height: 28px; background: #1f5dd3; }.indispensables-value-icon--flag i:nth-child(2) { background: #fff; }.indispensables-value-icon--flag i:nth-child(3) { background: #ef3c50; }
.indispensables-values h2 { margin: 0 0 7px; color: #11173d; font-size: 16px; font-weight: 820; }
.indispensables-values p { margin: 0; color: #56617e; font-size: 12px; line-height: 1.5; }
@media (max-width: 1050px) { .indispensables-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.indispensables-values { padding-inline: 24px; }.indispensables-values article { grid-template-columns: 58px 1fr; gap: 13px; }.indispensables-value-icon { width: 58px; height: 58px; } }
@media (max-width: 790px) { .indispensables-hero { min-height: 405px; }.indispensables-hero__inner { padding-top: 48px; }.indispensables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.indispensables-values { grid-template-columns: 1fr; padding: 24px; }.indispensables-values article { grid-template-columns: 64px 1fr; }.indispensables-value-icon { width: 64px; height: 64px; }.indispensables-shape--left { left: -205px; }.indispensables-shape--right { right: -210px; } }
@media (max-width: 540px) { .indispensables-page { padding-bottom: 24px; }.indispensables-hero { min-height: 430px; }.indispensables-hero__inner { width: min(calc(100% - 26px), 760px); padding-top: 42px; }.indispensables-hero h1 { font-size: 42px; }.indispensables-lead { font-size: 18px; }.indispensables-intro { font-size: 14px; }.indispensables-intro br { display: none; }.indispensables-search { min-height: 58px; grid-template-columns: 23px minmax(0, 1fr) auto; padding-left: 15px; }.indispensables-search button { min-width: auto; min-height: 44px; padding-inline: 16px; }.indispensables-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-right: -13px; margin-left: -13px; padding: 0 13px 6px; scrollbar-width: none; }.indispensables-filters::-webkit-scrollbar { display: none; }.indispensables-filters button { flex: 0 0 auto; }.indispensables-catalog, .indispensables-values { width: calc(100% - 24px); }.indispensables-catalog { border-radius: 18px; padding: 18px 12px 20px; }.indispensables-grid { grid-template-columns: 1fr; gap: 12px; }.indispensables-card { min-height: 136px; grid-template-columns: 58px minmax(0, 1fr); padding: 17px 15px; }.indispensables-card__logo { width: 58px; height: 58px; }.indispensables-card__body { min-height: 100px; }.indispensables-all { width: 100%; min-width: 0; }.indispensables-values { border-radius: 18px; }.indispensables-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .indispensables-card, .indispensables-search button, .indispensables-filters button { transition: none; } }