/* Aikex portal — brand green #2aae67 */
:root {
  --brand: #2aae67;
  --brand-deep: #1f8f54;
  --ink: rgba(0, 0, 0, 0.88);
  --muted: rgba(0, 0, 0, 0.48);
  --line: rgba(0, 0, 0, 0.06);
  --paper: #f4f7f5;
  --card: #fff;
  --radius: 16px;
  --font: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.wrap { min-height: 100vh; overflow-x: hidden; }

/* —— Hero —— */
.banner {
  position: relative;
  color: rgba(255, 255, 255, 0.95);
  padding: 120px 24px 96px;
  text-align: center;
}
.banner__inner {
  position: absolute;
  inset: 0 0 auto;
  left: 50%;
  z-index: -1;
  width: 150%;
  min-width: 1440px;
  height: 100%;
  transform: translateX(-50%);
  border-radius: 0 0 48% 48%;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(0,0,0,0.08), transparent 50%),
    linear-gradient(165deg, #34c478 0%, var(--brand) 45%, var(--brand-deep) 100%);
  overflow: hidden;
}
.lang {
  position: absolute;
  top: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  font-size: 14px;
  z-index: 2;
}
.lang a {
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}
.lang a:hover,
.lang a.active { color: #fff; }
.lang .sep { color: rgba(255, 255, 255, 0.3); }

.banner__bd {
  animation: rise 0.9s ease both;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner__logo {
  width: 220px;
  height: 64px;
  margin-bottom: 20px;
  background: no-repeat center / contain url("logo.svg");
}
.banner__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.banner__sub {
  margin: 0 0 36px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.12em;
}

.banner__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
}
.pill:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.pill__ico {
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* —— Catalog —— */
.catalog {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  animation: rise 0.8s 0.15s ease both;
}
.catalog__head {
  text-align: center;
  margin-bottom: 36px;
}
.catalog__head h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
}
.catalog__head > p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tab:hover { color: var(--brand); border-color: rgba(42, 174, 103, 0.35); }
.tab.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  min-height: 108px;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 174, 103, 0.35);
  box-shadow: 0 12px 28px rgba(31, 143, 84, 0.1);
}
.card.is-hide { display: none; }

.card__ico {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #e8f8ef, #d4f0e0);
  display: grid;
  place-items: center;
  position: relative;
}
.card__ico::after {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--brand);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.card__body strong {
  font-size: 16px;
  font-weight: 700;
}
.card__body em {
  font-style: normal;
  font-size: 12px;
  color: var(--brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__body span {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}

.footer {
  padding: 0 24px 48px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.footer a:hover { color: var(--brand); }
.copy { font-size: 12px; color: rgba(0, 0, 0, 0.35); }

/* —— Icon masks (white silhouette SVGs) —— */
[data-ico="mall"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='black' d='M4 6h16l-1.5 13H5.5L4 6Zm3 3 .8 8h8.4L17 9H7Zm4.5 10a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-5 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E"); }
[data-ico="pay"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm2-1a1 1 0 0 0-1 1v2h16V7a1 1 0 0 0-1-1H5Zm-1 5v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6H4Zm4 5h6v1.5H8V16Z'/%3E%3C/svg%3E"); }
[data-ico="oauth"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a5 5 0 0 1 5 5v1h1a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3h1V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v1h6V7a3 3 0 0 0-3-3Zm-6 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H6Zm6 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E"); }
[data-ico="grid"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z'/%3E%3C/svg%3E"); }
[data-ico="qr"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h8v8H3V3Zm2 2v4h4V5H5Zm8-2h8v8h-8V3Zm2 2v4h4V5h-4ZM3 13h8v8H3v-8Zm2 2v4h4v-4H5Zm10 0h2v2h-2v-2Zm4 0h2v2h-2v-2Zm-4 4h2v2h-2v-2Zm2 2h2v2h-2v-2Zm2-2h2v2h-2v-2Zm-6-4h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
[data-ico="ai"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 13.5 8.5 20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5L12 2Zm7 11 .9 3.1L23 17l-3.1.9L19 21l-.9-3.1L15 17l3.1-.9L19 13ZM5 14l.7 2.3L8 17l-2.3.7L5 20l-.7-2.3L2 17l2.3-.7L5 14Z'/%3E%3C/svg%3E"); }
[data-ico="shield"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5.2-3.6 10-8 10.5C7.6 21 4 16.2 4 11V5l8-3Zm0 2.2L6 6.4V11c0 4 2.7 7.8 6 8.2 3.3-.4 6-4.2 6-8.2V6.4L12 4.2Zm3.2 5.2 1.2 1.2-5 5-3-3 1.2-1.2 1.8 1.8 3.8-3.8Z'/%3E%3C/svg%3E"); }
[data-ico="shop"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v3l-1 3v11H5V10L4 7V4Zm2 2v1.2L7 10h10l1-2.8V6H6Zm1 6v7h4v-5h2v5h4v-7H7Z'/%3E%3C/svg%3E"); }
[data-ico="mini"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 2h8a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8Zm4 14a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E"); }
[data-ico="platform"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v4H3V5Zm2 2v0h14v0H5Zm-2 6h8v8H3v-8Zm10 0h8v3h-8v-3Zm0 5h8v3h-8v-3ZM5 13v4h4v-4H5Z'/%3E%3C/svg%3E"); }
[data-ico="dns"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v5H4V4Zm0 7h16v5H4v-5Zm0 7h16v2H4v-2Zm3-12.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E"); }
[data-ico="link"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 13.5a4 4 0 0 1 0-5.7l2.1-2.1a4 4 0 1 1 5.7 5.7l-1.2 1.2-1.4-1.4 1.2-1.2a2 2 0 1 0-2.8-2.8l-2.1 2.1a2 2 0 0 0 0 2.8l1.4 1.4Zm3 0a4 4 0 0 1 0 5.7l-2.1 2.1a4 4 0 1 1-5.7-5.7l1.2-1.2 1.4 1.4-1.2 1.2a2 2 0 1 0 2.8 2.8l2.1-2.1a2 2 0 0 0 0-2.8L12.1 12l1.4 1.4Z'/%3E%3C/svg%3E"); }
[data-ico="sms"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8l-4 3v-3H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v10h2v1.2L7.2 16H20V6H4Zm3 3h10v2H7V9Zm0 4h7v2H7v-2Z'/%3E%3C/svg%3E"); }
[data-ico="edit"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m15.5 3.5 5 5L8 21H3v-5L15.5 3.5Zm0 2.8L5 17v2h2L17.7 8.3l-2.2-2Z'/%3E%3C/svg%3E"); }
[data-ico="book"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h11a3 3 0 0 1 3 3v14l-3-2-3 2-3-2-3 2-3-2V5a2 2 0 0 1 2-2Zm0 2v12.2l1-.7 3 2 3-2 3 2 1-.7V6a1 1 0 0 0-1-1H5Zm2 3h8v2H7V8Zm0 4h6v2H7v-2Z'/%3E%3C/svg%3E"); }
[data-ico="film"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3V5Zm2 2v2h2V7H5Zm4 0v10h6V7H9Zm8 0v2h2V7h-2ZM5 11v2h2v-2H5Zm14 0v2h2v-2h-2ZM5 15v2h2v-2H5Zm14 0v2h2v-2h-2Z'/%3E%3C/svg%3E"); }
[data-ico="heart"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.5-4.6-9.8-9.2C.4 8.2 2.2 5 5.5 5c1.9 0 3.4 1 4.2 2.2C10.5 6 12 5 13.9 5c3.3 0 5.1 3.2 3.3 6.8C19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E"); }
[data-ico="car"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 11 6.5 6h11L19 11h1a1 1 0 0 1 1 1v5h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3v-5a1 1 0 0 1 1-1h1Zm1.7-3 1 3h8.6l1-3H6.7ZM6 16.5A.5.5 0 1 0 6 17.5a.5.5 0 0 0 0-1Zm12 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z'/%3E%3C/svg%3E"); }
[data-ico="nav"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm0 6h10v2H4v-2Z'/%3E%3C/svg%3E"); }
[data-ico="image"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v8.5l4-4 3 3 5-5L20 12.5V6H4Zm5 2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E"); }
[data-ico="blog"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a2 2 0 0 1 2 2v16l-4-2.5L13 21l-4-2.5L5 21V5a2 2 0 0 1 2-2Zm0 2v12.2l2.5-1.5L12 18l3.5-2.3L18 17.2V5H5Zm3 3h8v2H8V8Zm0 4h6v2H8v-2Z'/%3E%3C/svg%3E"); }
[data-ico="apps"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z'/%3E%3C/svg%3E"); }
[data-ico="status"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-1 3h2v6.2l4.2 2.4-1 1.7L11 14.4V7Z'/%3E%3C/svg%3E"); }
[data-ico="demo"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v12H3V5Zm2 2v8h14V7H5Zm5 12h4v2H10v-2Z'/%3E%3C/svg%3E"); }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .banner { padding: 100px 16px 72px; }
  .lang { right: 16px; top: 20px; }
  .banner__sub { letter-spacing: 0.06em; }
  .grid { grid-template-columns: 1fr; }
  .catalog { padding-top: 32px; }
}