:root{
  --p1:#4811BF;
  --p2:#8C5CF2;
  --p3:#AD8DF2;
  --g:#09A603;

  --bg:#F6F7FA;
  --surface:#FFFFFF;
  --ink:#162429;
  --muted: rgba(22,36,41,.70);
  --line: rgba(22,36,41,.10);

  --radius: 22px;
  --radius2: 26px;

  --shadow: 0 18px 50px rgba(22,36,41,.10);
  --shadow2: 0 10px 28px rgba(22,36,41,.10);

  --grad: linear-gradient(135deg, rgba(72,17,191,.92), rgba(140,92,242,.88));
  --grad-soft: linear-gradient(135deg, rgba(72,17,191,.10), rgba(9,166,3,.07));
  --grad-glow:
    radial-gradient(900px 600px at 20% 0%, rgba(173,141,242,.22), transparent 65%),
    radial-gradient(860px 620px at 90% 10%, rgba(9,166,3,.14), transparent 62%),
    radial-gradient(520px 420px at 45% 40%, rgba(72,17,191,.12), transparent 60%);

  --focus: 0 0 0 4px rgba(140,92,242,.22);

  --container: 1440px;
}

/* base */
*{ box-sizing:border-box; }
html, html, body{ overflow-x: hidden; }

body{ height:100%; }
html.no-scroll{ overflow:hidden; }
body{
  margin:0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button, input{ font: inherit; }
::selection{ background: rgba(72,17,191,.18); }

.skip{
  position:absolute; left:-999px; top:0;
  background:#fff; color:var(--ink);
  padding:.6rem .8rem; border-radius: 12px;
  border: 1px solid var(--line);
  z-index: 50;
}
.skip:focus{ left: 1rem; top: 1rem; box-shadow: var(--shadow2); outline:none; }

.container{
  width: min(var(--container), 90vw);
  margin-inline: auto;
}

.muted{ color: var(--muted); }
.center{ text-align:center; display:grid; place-items:center; gap:.75rem; }
.mt{ margin-top: 1.15rem; }

/* background glow */
.bg-glow{
  position: fixed;
  inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
  z-index: -1;
  opacity: .95;
}

/* headings */
.h1{
  font-weight: 740;
  letter-spacing: -.04em;
  font-size: clamp(2.0rem, 1.35rem + 2.6vw, 3.55rem);
  line-height: 1.05;
  margin: .8rem 0 1rem;
}
.h2{
  font-weight: 740;
  letter-spacing: -.03em;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.15rem);
  line-height: 1.12;
  margin: 0 0 .6rem;
}
.h3{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(1.1rem, 1.0rem + .55vw, 1.45rem);
  margin: 0 0 .35rem;
}
.lead{
  font-size: clamp(1.02rem, .98rem + .28vw, 1.16rem);
  color: var(--muted);
  max-width: 70ch;
  margin: 0 0 1.25rem;
}

.grad{
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--g));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

/* buttons */
.btn{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor:pointer;
  border-radius: 999px;
  padding: .78rem 1.05rem;
  font-weight: 720;
  letter-spacing: -.01em;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  box-shadow: none;
  white-space: nowrap;
}
.btn:focus-visible{ outline:none; box-shadow: var(--focus); }
.btn:hover{ transform: translateY(-1px); }

.btn--sm{ padding: .58rem .9rem; font-size: .95rem; }
.btn--primary{
  color: #fff;
  background: var(--grad);
  box-shadow: 0 12px 26px rgba(72,17,191,.16);
}
.btn--primary:hover{ box-shadow: 0 16px 34px rgba(72,17,191,.18); }
.btn--soft{
  border-color: rgba(72,17,191,.18);
  background: rgba(255,255,255,.62);
}
.btn--soft:hover{ border-color: rgba(72,17,191,.26); background: rgba(255,255,255,.78); }
.btn--ghost{
  border-color: rgba(22,36,41,.10);
  background: rgba(255,255,255,.40);
}
.btn--ghost:hover{ background: rgba(255,255,255,.65); border-color: rgba(72,17,191,.16); }

/* hero */
.hero{
  padding: clamp(2.0rem, 1.2rem + 3vw, 4.4rem) 0 1.25rem;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.25rem, 1rem + 2vw, 2.4rem);
  align-items: start;
}
.badge{
  display:inline-flex;
  gap: .55rem;
  align-items:center;
  padding: .48rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
  color: rgba(22,36,41,.78);
  font-weight: 680;
  font-size: .92rem;
}
.badge__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--p2));
  box-shadow: 0 0 0 4px rgba(140,92,242,.18);
}

.hero__cta{ display:flex; gap:.6rem; flex-wrap: wrap; align-items:center; }

.metrics{
  margin-top: 1.25rem;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}
.metric{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(22,36,41,.10);
  border-radius: 16px;
  padding: .85rem .9rem;
  box-shadow: 0 10px 24px rgba(22,36,41,.06);
}
.metric__k{
  font-weight: 740;
  letter-spacing: -.02em;
  font-size: 1.1rem;
}
.metric__t{
  font-weight: 600;
  color: rgba(22,36,41,.62);
  font-size: .9rem;
  margin-top: .15rem;
}

.trust{
  margin-top: 1.15rem;
  display:grid;
  gap: .55rem;
}
.trust__label{
  color: rgba(22,36,41,.64);
  font-weight: 680;
  font-size: .92rem;
}
.trust__pills{
  display:flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding: .42rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.55);
  color: rgba(22,36,41,.72);
  font-weight: 600;
  font-size: .9rem;
}



/* hero tiles (premium board) */
.hero__visual{
  position: relative;
  min-height: 520px;
  overflow: visible;
}

.hero__rings span{
  position:absolute;
  inset:auto;
  border-radius: 999px; /* або під твій радіус */
  border: 1px solid rgba(72,17,191,.14);
  filter: blur(.2px);
  opacity: .75;
  z-index: 0;
  overflow: hidden;
}

.hero__rings span:nth-child(1){ width: 460px; height: 460px; right: -60px; top: 35px; }
.hero__rings span:nth-child(2){ width: 620px; height: 620px; right: -150px; top: -60px; border-color: rgba(9,166,3,.14); opacity: .50; }
.hero__rings span:nth-child(3){ width: 330px; height: 330px; right: 10px; bottom: 45px; opacity: .38; }

.heroTiles{
  position: relative;
  z-index: 1;
  /* more compact board */
  width: min(560px, 100%);
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 78px;
  gap: 12px;
}

/* base tile */
.tile{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(22,36,41,.10);
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(22,36,41,.10);
  padding: .95rem .95rem .9rem;
  backdrop-filter: blur(12px);
  overflow: hidden;
  position: relative;
}

.tile__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .5rem;
}

.tile__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.66);
  color: rgba(22,36,41,.70);
  flex: 0 0 auto;
}
.tile__icon svg{
  width: 22px;
  height: 22px;
  display:block;
}
.tile__icon--brand{ border-color: rgba(72,17,191,.18); background: rgba(72,17,191,.08); color: var(--p1); }
.tile__icon--ok{ border-color: rgba(9,166,3,.20); background: rgba(9,166,3,.08); color: #067902; }

.tile__title{
  font-weight: 840;
  letter-spacing: -.02em;
  margin: .02rem 0 .32rem;
  font-size: 1.06rem;
}
.tile__text{
  margin: 0 0 .72rem;
  color: rgba(22,36,41,.66);
  font-weight: 520;
  line-height: 1.48;
  font-size: .95rem;
}

/* placements */
.tile--a{ 
  grid-column: 2 / 7; 
  grid-row: 1 / 5; 
  z-index: 3; 
}
.tile--b{ 
  grid-column: 1 / 5; 
  grid-row: 4 / 7; 
  z-index: 3; 
  transform: translate(10px, -70px);
}
.tile--c{ 
  grid-column: 3 / 7; 
  grid-row: 6 / 8; 
  z-index: 4; 
  transform: translateY(-100px); 
}
.tile--d{
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  z-index: 4;
  padding: .85rem .85rem .8rem;
  transform: translate(340px, 50px);
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(173,141,242,.22), transparent 55%),
    rgba(255,255,255,.82);
}

/* mini tweaks */
.mini--wide{ margin-top: .2rem; }
.paper--mini{ height: 78px; margin-top: .25rem; border-radius: 16px; }
.chips--tight{ margin-top: .25rem; gap: .38rem; }
.kpi{ display:grid; gap:.1rem; }
.kpi__k{ font-weight: 860; letter-spacing: -.02em; }
.kpi__t{ color: rgba(22,36,41,.58); font-weight: 560; font-size: .9rem; }
.tile__kpi{ display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.spark{
  margin-top: .65rem;
  display:flex;
  gap: .35rem;
  align-items:flex-end;
  height: 50px;
  padding: .25rem .15rem 0;
}
.spark span{
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(72,17,191,.82), rgba(9,166,3,.28));
}

/* safety: never let any svg/img blow up a tile */
.tile svg, .tile img{ max-width: 100%; height: auto; }

@media (max-width: 980px){
  .hero__visual{ min-height: auto; }
  .heroTiles{
    width: 100%;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .tile{ grid-column: auto; grid-row: auto; transform: none !important; }
  .tile--a, .tile--b, .tile--c, .tile--d{ grid-column: auto; grid-row: auto; }
  .hero__rings{ opacity: .35; }
  .heroShowcase{
    display: none;
  }
}


/* sections */
.section{ padding: clamp(2.4rem, 1.6rem + 2.5vw, 4rem) 0; }
.section--alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  border-top: 1px solid rgba(22,36,41,.06);
  border-bottom: 1px solid rgba(22,36,41,.06);
}
.section__head{ margin-bottom: 1.35rem; }
.section__head--row{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.section__head.center{ text-align:center; }

/* grids */
.grid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature{
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: var(--shadow2);
  padding: 1.15rem 1.1rem 1.05rem;
}
.feature__icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: var(--grad-soft);
  border: 1px solid rgba(72,17,191,.14);
  font-size: 1.1rem;
  margin-bottom: .7rem;
}
.feature__title{
  margin: 0 0 .35rem;
  font-weight: 740;
  letter-spacing: -.02em;
  font-size: 1.05rem;
}
.feature__text{ margin:0; color: rgba(22,36,41,.68); font-weight: 500; }

/* split + mosaic */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: center;
}
.ticks{ margin: .9rem 0 0; padding: 0; list-style: none; display:grid; gap: .55rem; }
.tick{
  display:inline-grid; place-items:center;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: rgba(9,166,3,.10);
  border: 1px solid rgba(9,166,3,.20);
  color: #067902;
  font-weight: 740;
  margin-right: .55rem;
}
.split__cta{ display:flex; gap:.6rem; margin-top: 1rem; flex-wrap: wrap; }

.mosaic{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 88px;
  gap: .9rem;
}
.mosaic__a{ 
  grid-column: 1 / span 2; /* ширина */ 
  grid-row: 1 / span 2; /* висота */
}
.mosaic__b{ 
  grid-column: 5 / span 4; 
  grid-row: 1 / span 4; 
}
.mosaic__c{ 
  grid-column: 3 / span 2; 
  grid-row: 1 / span 2; 
}
.mosaic__d{ 
  grid-column: 1 / span 4; 
  grid-row: 3 / span 2; 
}

.shot{
  height: 100%;
  border-radius: var(--radius2);
  border: 1px solid rgba(22,36,41,.10);
  background:
    radial-gradient(500px 240px at 15% 0%, rgba(173,141,242,.22), transparent 60%),
    radial-gradient(420px 240px at 95% 20%, rgba(9,166,3,.14), transparent 60%),
    rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}
.shot__cap{
  padding: .75rem .9rem;
  font-weight: 740;
  letter-spacing: -.02em;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.shot__body{
  padding: .85rem .9rem 1rem;
  display:grid;
  gap: .65rem;
  height: 100%;
  align-content: start;
}
.shot__metric{
  display:flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(22,36,41,.70);
  font-weight: 680;
  font-size: .92rem;
}
.shot__hint{
  margin-top: auto;
  color: rgba(22,36,41,.64);
  font-weight: 600;
  font-size: .9rem;
}
.bars{
  display:flex;
  gap: .35rem;
  align-items:flex-end;
  height: 78px;
  padding: .25rem 0;
}
.bars span{
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(72,17,191,.85), rgba(9,166,3,.30));
}
.paper{
  height: 86px;
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  position: relative;
}
.paper:before{
  content:"";
  position:absolute;
  left: 16px; right: 16px; top: 18px;
  height: 10px;
  border-radius: 999px;
  background: rgba(22,36,41,.08);
  box-shadow: 0 18px 0 rgba(22,36,41,.07), 0 36px 0 rgba(22,36,41,.06);
}

/* tools */
.segmented{
  display:inline-flex;
  gap: .35rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(22,36,41,.10);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width:none;
}
.segmented::-webkit-scrollbar{ display:none; }
.segmented__btn{
  appearance:none;
  border: 0;
  background: transparent;
  padding: .6rem .9rem;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 740;
  color: rgba(22,36,41,.72);
  transition: background .15s ease, color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.segmented__btn:hover{ background: rgba(72,17,191,.08); color: var(--p1); }
.segmented__btn.is-active{ background: var(--grad); color: #fff; box-shadow: 0 12px 26px rgba(72,17,191,.16); }

.toolshead{
  margin-top: 1rem;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.search{
  position: relative;
  min-width: 280px;
}
.search__input{
  width: 100%;
  padding: .72rem 1rem .72rem 2.2rem;
  border-radius: 16px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 18px rgba(22,36,41,.05);
}
.search__input:focus{ outline:none; box-shadow: var(--focus); }
.search__icon{
  position:absolute;
  left: .8rem; top: 50%;
  transform: translateY(-50%);
  color: rgba(22,36,41,.55);
  font-weight: 740;
}

.toolgrid{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.tool{
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: 0 12px 24px rgba(22,36,41,.06);
  padding: 1.05rem 1.05rem 1rem;
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.tool:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(22,36,41,.10);
  border-color: rgba(72,17,191,.18);
  background: rgba(255,255,255,.92);
}
.tool__ico{
  width: 44px; height: 44px;
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.70);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  color: rgba(22,36,41,.70);
}
.tool__ico svg{ width: 22px; height: 22px; stroke: currentColor; }
.tool__ico--brand{ background: rgba(72,17,191,.08); border-color: rgba(72,17,191,.18); color: var(--p1); }
.tool__ico--ok{ background: rgba(9,166,3,.08); border-color: rgba(9,166,3,.20); color: #067902; }
.tool__title{
  margin: 0;
  font-weight: 740;
  letter-spacing: -.02em;
  font-size: 1.05rem;
}
.tool__desc{
  margin: .28rem 0 .85rem;
  color: rgba(22,36,41,.66);
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.5;
}
.tool__actions{ display:flex; gap:.55rem; flex-wrap: wrap; }

/* compare table */
.tablewrap{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: var(--shadow2);
  overflow:auto;
}
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.table th, .table td{
  padding: .9rem .95rem;
  border-bottom: 1px solid rgba(22,36,41,.08);
  text-align: left;
}
.table thead th{
  font-weight: 740;
  letter-spacing: -.01em;
  color: rgba(22,36,41,.78);
  background: rgba(72,17,191,.05);
}
.table td:nth-child(2), .table td:nth-child(3),
.table th:nth-child(2), .table th:nth-child(3){
  text-align: center;
}
.yes{ color: #067902; font-weight: 740; font-size: 1.05rem; }
.no{ color: rgba(22,36,41,.45); font-weight: 740; }

/* quotes */
.quote{
  margin:0;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: var(--shadow2);
  padding: 1.05rem 1.05rem 1rem;
}
.quote__text{
  margin:0 0 .9rem;
  font-weight: 600;
  color: rgba(22,36,41,.76);
  font-size: 1.02rem;
  line-height: 1.45;
}
.quote__cap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(22,36,41,.08);
}
.quote__who{ font-weight: 740; }
.quote__meta{ color: rgba(22,36,41,.60); font-weight: 680; font-size: .92rem; }

/* FAQ */
.brandmark{
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: var(--shadow2);
  display:grid;
  place-items:center;
  margin: 0 auto .8rem;
}
.accordion{
  display:grid;
  gap: .75rem;
  max-width: 880px;
  margin: 0 auto;
}
.acc{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.acc__q{
  cursor:pointer;
  padding: 1rem 1.05rem;
  list-style: none;
  font-weight: 740;
  letter-spacing: -.01em;
  position: relative;
}
.acc__q::-webkit-details-marker{ display:none; }
.acc__q:after{
  content:"+";
  position:absolute;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
  color: rgba(22,36,41,.70);
}
.acc[open] .acc__q:after{ content:"–"; }
.acc__a{
  padding: 0 1.05rem 1.05rem;
  color: rgba(22,36,41,.70);
  font-weight: 500;
  line-height: 1.55;
}

/* footer */
.footer{
  padding: 2.3rem 0 2.1rem;
  background: rgba(246,247,250,.65);
  border-top: 1px solid rgba(22,36,41,.08);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr .75fr .9fr;
  gap: 1.25rem;
}
.footer__brand .muted{ margin: .75rem 0 1.1rem; }
.footer__cta{ display:flex; gap:.6rem; flex-wrap: wrap; }
.footer__col{
  display:flex;
  flex-direction: column;
  gap: .5rem;
}
.footer__h{
  margin: .15rem 0 .35rem;
  font-weight: 850;
  letter-spacing: -.02em;
  font-size: 1rem;
}
.footer__link{
  color: rgba(22,36,41,.68);
  font-weight: 600;
  padding: .25rem 0;
}
.footer__link:hover{ color: var(--p1); }
.footer__mini{ margin-top: .75rem; display:flex; flex-direction: column; gap: .5rem; }
.footnote{ margin: 1.2rem 0 0; color: rgba(22,36,41,.55); font-weight: 600; }

/* responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ min-height: 520px; }
  .card--big{ max-width: 100%; justify-self: stretch; transform: none; }
  .card--mid{ max-width: 100%; justify-self: stretch; transform: none !important; }
  .metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split{ grid-template-columns: 1fr; }
  .toolgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .brand__pill{ display:none; }
  .metrics{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .grid4{ grid-template-columns: 1fr; }
  .toolgrid{ grid-template-columns: 1fr; }
  .toolshead{ flex-direction: column; align-items: stretch; }
  .search{ min-width: 0; width: 100%; }
}



/* ===========================
   NEW: vivid premium cards
   (Hero showcase + "Один Hub" mosaic)
=========================== */

/* chips / badges (missing in base file; used across layout) */
.chips{ display:flex; flex-wrap: wrap; gap: .45rem; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .42rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.58);
  color: rgba(22,36,41,.74);
  font-weight: 650;
  font-size: .9rem;
  box-shadow: 0 10px 18px rgba(22,36,41,.04);
}
.chip--brand{
  border-color: rgba(72,17,191,.18);
  background: rgba(72,17,191,.08);
  color: rgba(72,17,191,.98);
}
.chip--ok{
  border-color: rgba(9,166,3,.22);
  background: rgba(9,166,3,.08);
  color: #067902;
}
.ok{ color:#067902; }
.warn{ color:#B26A00; }

/* ---------- HERO: new "device + floating widgets" ---------- */
.hero__visual{ min-height: 560px; }

.heroShowcase{
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin-left: auto;
  padding: 6px;
}

.device{
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(22,36,41,.10);
  background:
    radial-gradient(860px 360px at 10% 0%, rgba(173,141,242,.28), transparent 55%),
    radial-gradient(760px 340px at 90% 0%, rgba(9,166,3,.18), transparent 60%),
    rgba(255,255,255,.82);
  box-shadow: 0 18px 55px rgba(22,36,41,.12);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.device:before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 30px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(72,17,191,.20), rgba(9,166,3,.16), rgba(255,255,255,0));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events:none;
  opacity:.9;
}

.device__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: .9rem .95rem .6rem;
  border-bottom: 1px solid rgba(22,36,41,.08);
  background: rgba(255,255,255,.35);
}

.device__tabs{ display:flex; gap:.35rem; }
.device__tab{
  width: 26px; height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.60);
}
.device__tab.is-on{
  background: var(--grad);
  border-color: rgba(72,17,191,.20);
}

.device__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem .95rem .2rem;
}
.device__h{
  font-weight: 860;
  letter-spacing: -.02em;
}
.device__sub{
  margin-top: .15rem;
  font-weight: 600;
  color: rgba(22,36,41,.62);
  font-size: .94rem;
}

.device__score{ text-align:right; }
.scorePill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .42rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(72,17,191,.16);
  background: rgba(255,255,255,.58);
  box-shadow: 0 12px 22px rgba(22,36,41,.06);
}
.scorePill__dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(9,166,3,.8));
  box-shadow: 0 0 0 4px rgba(9,166,3,.12);
}
.scorePill__k{ font-weight: 900; letter-spacing: -.02em; }
.scorePill__s{ opacity: .75; font-weight: 700; }
.device__note{ font-size: .9rem; margin-top:.2rem; }

.device__body{ padding: .75rem .95rem 1rem; }
.device__row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: .85rem;
}

.miniCard{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
  padding: .65rem .7rem .6rem;
}
.miniCard__t{ font-weight: 700; font-size: .9rem; color: rgba(22,36,41,.62); }
.miniCard__k{ font-weight: 840; letter-spacing: -.02em; margin-top:.1rem; }
.miniCard__bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(22,36,41,.08);
  overflow:hidden;
  margin-top: .5rem;
}
.miniCard__bar span{
  display:block; height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(72,17,191,.80), rgba(9,166,3,.28));
}

.device__split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: .75rem;
  align-items:start;
}

.todo, .topicMix{
  border-radius: 22px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.68);
  padding: .75rem .8rem;
  box-shadow: 0 14px 28px rgba(22,36,41,.06);
}
.todo__cap, .topicMix__cap{ font-weight: 820; letter-spacing: -.01em; margin-bottom: .5rem; }
.todo__list{ list-style:none; padding:0; margin:0; display:grid; gap:.42rem; }
.todo__item{
  display:flex; gap:.55rem; align-items:flex-start;
  color: rgba(22,36,41,.72);
  font-weight: 600;
  font-size: .95rem;
}
.todo__mark{
  width: 22px; height: 22px;
  border-radius: 8px;
  display:grid; place-items:center;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.65);
  color: rgba(22,36,41,.68);
  flex: 0 0 auto;
  margin-top: 1px;
}
.todo__item.is-done .todo__mark{
  border-color: rgba(9,166,3,.22);
  background: rgba(9,166,3,.10);
  color: #067902;
}
.todo__item.is-on .todo__mark{
  border-color: rgba(72,17,191,.20);
  background: rgba(72,17,191,.10);
  color: rgba(72,17,191,.96);
}
.todo__item.is-on{ color: rgba(22,36,41,.86); }

.topicMix__bars{ display:grid; gap:.45rem; }
.tbar{
  display:flex; align-items:center; gap:.55rem;
  font-weight: 700;
  color: rgba(22,36,41,.64);
  font-size: .93rem;
}
.tbar__l{ width: 78px; }
.tbar__v{
  flex:1;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(72,17,191,.76), rgba(9,166,3,.22));
}
.topicMix__hint{
  margin-top: .55rem;
  color: rgba(22,36,41,.62);
  font-weight: 600;
  font-size: .92rem;
}

.device__foot{
  display:flex;
  flex-wrap: wrap;
  gap:.45rem;
  padding: .8rem .95rem 1rem;
  border-top: 1px solid rgba(22,36,41,.08);
  background: rgba(255,255,255,.35);
}

.float{
  position:absolute;
  border-radius: 24px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 18px 45px rgba(22,36,41,.12);
  backdrop-filter: blur(14px);
  padding: .85rem .85rem .8rem;
  width: 220px;
}
.float__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.6rem;
  margin-bottom: .65rem;
}
.float__icon{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
}
.float--a{ right: -6px; top: 48px; transform: rotate(1.2deg); }
.float--b{ left: -10px; bottom: 70px; transform: rotate(-1.2deg); }
.float--c{ right: 12px; bottom: -8px; transform: rotate(.6deg); width: 240px; }

@media (prefers-reduced-motion: no-preference){
  .float{ animation: floaty 7.5s ease-in-out infinite; }
  .float--b{ animation-duration: 8.4s; }
  .float--c{ animation-duration: 7.9s; }
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.float--a{ --r: 1.2deg; }
.float--b{ --r: -1.2deg; }
.float--c{ --r: .6deg; }

.ring{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: .65rem;
  align-items:center;
}
.ring__svg{ width: 120px; height: 120px; }
.ring__bg{
  fill: none;
  stroke: rgba(22,36,41,.10);
  stroke-width: 12;
}
.ring__fg{
  fill:none;
  stroke: url(#rg);
  stroke-width: 12;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-dasharray: 276.46; /* 2πr where r=44 */
  stroke-dashoffset: 276.46;
  transition: stroke-dashoffset 900ms cubic-bezier(.2,.9,.2,1);
}
.ring__txt{ display:grid; gap:.05rem; }
.ring__k{ font-weight: 920; letter-spacing:-.02em; font-size: 1.45rem; }
.ring__t{ color: rgba(22,36,41,.62); font-weight: 650; }

.float__meta{ margin-top: .4rem; display:grid; gap:.35rem; }
.metaRow{
  display:flex; justify-content: space-between; gap: 1rem;
  font-weight: 650;
  color: rgba(22,36,41,.70);
  font-size: .93rem;
}

.rank{ display:grid; gap:.45rem; }
.rank__row{
  display:grid;
  grid-template-columns: 18px 1fr 48px;
  align-items:center;
  gap:.55rem;
  padding: .5rem .55rem;
  border-radius: 16px;
  border: 1px solid rgba(22,36,41,.08);
  background: rgba(255,255,255,.55);
}
.rank__row.is-you{
  border-color: rgba(72,17,191,.18);
  background: rgba(72,17,191,.08);
}
.rank__n{ font-weight: 900; opacity:.8; }
.rank__name{ font-weight: 780; }
.rank__k{ text-align:right; font-weight: 900; }
.rank__hint{ margin-top:.5rem; color: rgba(22,36,41,.62); font-weight: 600; font-size: .92rem; }

.printPack{
  height: 82px;
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.74));
  position: relative;
  overflow:hidden;
}
.printPack__line{
  position:absolute;
  left: 16px; right: 16px;
  height: 10px;
  border-radius: 999px;
  background: rgba(22,36,41,.08);
}
.printPack__line:nth-child(1){ top: 16px; }
.printPack__line:nth-child(2){ top: 34px; opacity:.9; }
.printPack__line:nth-child(3){ top: 52px; opacity:.8; }
.printPack__stamp{
  position:absolute;
  right: 14px; bottom: 12px;
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: .9rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(9,166,3,.22);
  background: rgba(9,166,3,.10);
  color: #067902;
}
.printPack__t{ margin-top:.55rem; color: rgba(22,36,41,.66); font-weight: 600; font-size: .92rem; }

/* responsive hero */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .heroShowcase{ width: 100%; }
  .hero__visual{ min-height: auto; }
  .float{ position: static; width: auto; margin-top: .9rem; }
  .ring{ grid-template-columns: 110px 1fr; }
}

/* ---------- SHOWCASE: refreshed mosaic ---------- */
.mosaic--fresh{ gap: 1rem; }
.shot__capIcon{ opacity:.85; }

.shot--kids{
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(72,17,191,.18), transparent 60%),
    radial-gradient(420px 240px at 100% 20%, rgba(9,166,3,.14), transparent 55%),
    rgba(255,255,255,.74);
}
.shot--teacher{
  background:
    radial-gradient(560px 280px at 15% 0%, rgba(173,141,242,.22), transparent 62%),
    radial-gradient(420px 240px at 92% 20%, rgba(9,166,3,.14), transparent 60%),
    rgba(255,255,255,.74);
}
.shot--parents{
  background:
    radial-gradient(540px 260px at 25% 0%, rgba(9,166,3,.16), transparent 60%),
    radial-gradient(520px 260px at 100% 20%, rgba(72,17,191,.16), transparent 60%),
    rgba(255,255,255,.74);
}
.shot--print{
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(72,17,191,.16), transparent 60%),
    rgba(255,255,255,.74);
}

.streak{
  display:grid;
  gap:.1rem;
  padding:.65rem .7rem;
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.60);
  box-shadow: 0 14px 22px rgba(22,36,41,.06);
}
.streak__k{ font-weight: 900; letter-spacing:-.02em; }
.streak__t{ color: rgba(22,36,41,.62); font-weight: 600; font-size: .92rem; }

.choiceRow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.55rem;
  margin-top:.7rem;
}
.choice{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.56);
  padding: .55rem .6rem;
}
.choice__t{ font-weight: 760; color: rgba(22,36,41,.62); font-size: .9rem; }
.choice__k{ font-weight: 900; letter-spacing:-.02em; margin-top:.15rem; }

.classSplit{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: .9rem;
  align-items:center;
}
.bars--tall{ height: 110px; }
.miniList{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.60);
  padding: .65rem .7rem;
  display:grid;
  gap:.4rem;
}
.miniList__row{
  display:flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  color: rgba(22,36,41,.70);
}

.digest{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
  padding: .65rem .7rem;
  box-shadow: 0 14px 22px rgba(22,36,41,.06);
}
.digest__pill{
  display:inline-flex;
  align-items:center;
  padding:.32rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(72,17,191,.18);
  background: rgba(72,17,191,.08);
  color: rgba(72,17,191,.98);
  font-weight: 760;
  font-size: .86rem;
}
.digest__list{
  margin:.55rem 0 0;
  padding-left: 1.1rem;
  color: rgba(22,36,41,.72);
  font-weight: 600;
  line-height: 1.6;
}
.paper--wide{ height: 96px; border-radius: 22px; }

/* mosaic responsive improvements */
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
  .mosaic{ grid-auto-rows: auto; grid-template-columns: 1fr; }
  .mosaic__a, .mosaic__b, .mosaic__c, .mosaic__d{ grid-column: auto !important; grid-row: auto !important; }
}


/* Audience switch (premium, not "cards") */
.audience{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(22,36,41,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(242,242,242,.55));
  box-shadow: 0 20px 60px rgba(22,36,41,.10);
  padding: 14px;
  overflow: hidden;
}

.audience::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(140,92,242,.22), rgba(9,166,3,.10), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
}

.audience__tabs{
  display:flex;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(22,36,41,.06);
  border: 1px solid rgba(22,36,41,.08);
}

.audience__tab{
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: .65rem .9rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: rgba(22,36,41,.82);
  background: transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.audience__tab:hover{ transform: translateY(-1px); }

.audience__tab.is-active{
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(22,36,41,.14);
}

.audience__panels{
  margin-top: 14px;
}

.audience__panel{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.08);
  background: rgba(255,255,255,.70);
  padding: clamp(1rem, .8rem + 1vw, 1.25rem);
}

.audience__head{
  display:grid;
  gap: .45rem;
  margin-bottom: .95rem;
}

.audience__badge{
  display:inline-flex;
  width: fit-content;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(72,17,191,.18);
  background: rgba(72,17,191,.06);
  color: rgba(72,17,191,.95);
  font-weight: 700;
  font-size: .85rem;
}

.audience__title{
  font-size: clamp(1.15rem, 1rem + .9vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}

.audience__lead{
  margin: 0;
  color: rgba(22,36,41,.72);
}

.audience__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.audience__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: .55rem;
}

.audience__list li{
  display:flex;
  gap: .55rem;
  align-items:flex-start;
  color: rgba(22,36,41,.88);
}

.aDot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(140,92,242,1), rgba(9,166,3,.85));
  margin-top: .35rem;
  flex: 0 0 auto;
}

.audience__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.aStat{
  border-radius: 16px;
  border: 1px solid rgba(22,36,41,.08);
  background: rgba(242,242,242,.55);
  padding: .75rem .8rem;
  display:grid;
  gap: .15rem;
}

.aStat__k{
  font-weight: 750;
  letter-spacing: -.02em;
}

.aStat__t{
  color: rgba(22,36,41,.62);
  font-size: .92rem;
}

@media (max-width: 860px){
  .audience__tabs{ flex-direction: column; border-radius: 18px; }
  .audience__tab{ flex: unset; }
  .audience__stats{ grid-template-columns: 1fr; }
}
[hidden] { display: none !important; }

/* ===========================
   Header dropdown (audience nav)
   =========================== */

.nav--audiences{
  gap: .15rem;
  padding: .28rem;
}

/* dropdown wrapper */
.navdrop{
  position: relative;
}

/* trigger */
.navdrop__trigger{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  user-select:none;
}

.navdrop__chev{
  font-size: .85em;
  opacity: .7;
  transform: translateY(1px);
}

/* menu panel */
.navdrop__menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 290px;
  padding: .45rem;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: 0 18px 46px rgba(22,36,41,.14);
  backdrop-filter: blur(14px);
  display: none;
  z-index: 80;
}

/* show on hover/focus */
.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu{
  display: block;
}

/* menu items */
.navdrop__item{
  display:flex;
  gap:.7rem;
  padding: .7rem .8rem;
  border-radius: 14px;
  color: rgba(22,36,41,.86);
  text-decoration:none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.navdrop__item:hover{
  background: rgba(72,17,191,.07);
  border-color: rgba(72,17,191,.16);
  transform: translateY(-1px);
}

.navdrop__itemTitle{
  font-weight: 760;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.navdrop__itemDesc{
  margin-top: .15rem;
  font-size: .9rem;
  line-height: 1.35;
  color: rgba(22,36,41,.62);
  font-weight: 560;
}

/* subtle divider line between groups (optional) */
.navdrop__sep{
  height: 1px;
  margin: .35rem .45rem;
  background: rgba(22,36,41,.08);
}

/* keep dropdown usable on small screens:
   nav is hidden under 980px in your CSS already :contentReference[oaicite:3]{index=3},
   so dropdown won’t interfere with drawer */
/* ===========================
   Header dropdown fixes
   - не зникає при наведенні
   - суцільно білий фон
   - компактні пункти з іконкою + назвою
   =========================== */

.navdrop{
  position: relative;
}

/* "місток" між кнопкою і меню (саме це лікує зникання) */
.navdrop::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  height: 18px;            /* зона, по якій курсор "переїжджає" */
  background: transparent;
}

/* меню */
.navdrop__menu{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 260px;

  padding: .45rem;
  border-radius: 18px;

  background: #fff;        /* суцільна біла заливка */
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: 0 18px 46px rgba(22,36,41,.14);

  display: none;
  z-index: 80;
}

/* показувати меню при hover / focus */
.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu{
  display: block;
}

/* пункт меню: іконка + назва */
.navdrop__item{
  display:flex;
  align-items:center;
  gap: .65rem;

  padding: .62rem .72rem;
  border-radius: 14px;

  color: rgba(22,36,41,.84);
  text-decoration:none;

  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.navdrop__item:hover{
  background: rgba(72,17,191,.07);
  border-color: rgba(72,17,191,.16);
  transform: translateY(-1px);
}

/* іконка */
.navdrop__ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display:grid;
  place-items:center;

  border: 1px solid rgba(22,36,41,.10);
  background: rgba(72,17,191,.06);
  color: var(--p1);
  flex: 0 0 auto;
}

.navdrop__ico svg{
  width: 18px;
  height: 18px;
  display:block;
}

/* назва */
.navdrop__itemTitle{
  font-weight: 740;
  letter-spacing: -.01em;
  line-height: 1.15;
}
/* ============================================================
   External icons (Font Awesome) — sizing + alignment
   ============================================================ */

.navdrop__icon i,
.tool__ico i{
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}

/* ============================================================
   Header audience dropdown (stable hover + opaque bg)
   ============================================================ */

.nav--audiences{ gap: .15rem; padding: .28rem; }

.navdrop{
  position: relative;
}

.navdrop__trigger{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  user-select:none;
}

.navdrop__chev{
  font-size: .85em;
  opacity: .7;
  transform: translateY(1px);
}

.navdrop__menu{
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 280px;
  margin-top: 10px;
  padding: .45rem;

  border-radius: 18px;

  background: #fff; /* суцільна біла */
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: 0 18px 46px rgba(22,36,41,.14);

  display: none;
  z-index: 999;
}

.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu{
  display: block;
}

.navdrop__item{
  display:flex;
  align-items:center;
  gap: .7rem;

  padding: .7rem .8rem;
  border-radius: 14px;
  color: rgba(22,36,41,.86);
  text-decoration:none;

  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.navdrop__item:hover{
  background: rgba(72,17,191,.07);
  border-color: rgba(72,17,191,.16);
  transform: translateY(-1px);
}

.navdrop__icon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 18px;
  color: var(--p1);
}

.navdrop__itemTitle{
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* ============================================================
   Tools cards — icon block (for Font Awesome)
   (під твій існуючий layout .tool / .tool__ico)
   ============================================================ */

.tool__ico{
  display:grid;
  place-items:center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(72,17,191,.06);
  color: var(--p1);
}

.tool--ok .tool__ico{
  background: rgba(9,166,3,.08);
  color: var(--g1, #09A603);
}
/* === Tools: premium glass cards === */
.tool{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(520px 240px at 10% 0%, rgba(173,141,242,.22), transparent 60%),
    rgba(255,255,255,.78);
  border: 1px solid rgba(22,36,41,.10);
  box-shadow: 0 12px 30px rgba(22,36,41,.08);
  backdrop-filter: blur(12px);

  padding: 1.05rem 1.05rem 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* subtle top highlight */
.tool::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 240px at 20% 0%, rgba(72,17,191,.12), transparent 60%);
  opacity: .8;
  pointer-events:none;
}

/* gradient border on hover (simple version) */
.tool:hover{
  transform: translateY(-1px);
  border-color: rgba(72,17,191,.22);
  box-shadow: 0 18px 44px rgba(22,36,41,.12);
}

/* accent variable from existing tool--brand / tool--ok (tools.js already outputs tool--${accent}) */
.tool{ --tool-accent: rgba(72,17,191,1); }
.tool--brand{ --tool-accent: rgba(72,17,191,1); }
.tool--ok{ --tool-accent: rgba(9,166,3,1); }

.tool__ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.65);
  color: var(--tool-accent);
}

/* body layout */
.tool__body{ flex: 1; min-width: 0; }
.tool__title{
  margin: 0;
  font-weight: 840;
  letter-spacing: -.02em;
}

/* CTA as “pill” instead of big primary button */
.tool__actions{ margin-top: .7rem; }
.tool__cta{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.65);
  font-weight: 740;
  color: rgba(22,36,41,.86);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.tool:hover .tool__cta{
  border-color: rgba(72,17,191,.20);
  background: rgba(255,255,255,.82);
  transform: translateY(-1px);
}
/* ===========================
   Tools card: split layout
   (media + content, equal height)
=========================== */
.tool--split{
  padding: 0;                 /* тепер падінги на внутрішніх колонках */
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0;
  align-items: stretch;       /* <- ключ: колонки однакової висоти */
  overflow: hidden;
  min-height: 132px;
}

.tool--split .tool__media{
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(22,36,41,.08);
  background:
    radial-gradient(260px 140px at 30% 20%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(260px 140px at 70% 80%, color-mix(in srgb, var(--tool-accent) 18%, transparent), transparent 65%),
    rgba(255,255,255,.55);
}

.tool--split .tool__media i{
  font-size: 48px;            /* велика “ілюстрація” */
  line-height: 1;
  color: var(--tool-accent);
  filter: drop-shadow(0 12px 18px rgba(22,36,41,.10));
}

.tool--split .tool__content{
  padding: 1.05rem 1.05rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;    /* вертикально по центру як на макеті */
  gap: .85rem;
  min-width: 0;
}

/* адаптив: на мобілці стає “рядками” */
@media (max-width: 560px){
  .tool--split{
    grid-template-columns: 1fr;
    grid-template-rows: 140px auto;
  }
  .tool--split .tool__media{
    border-right: 0;
    border-bottom: 1px solid rgba(22,36,41,.08);
  }
}