/* ================= 02 / Expertise: tabbed live demos ================= */
.xp .section__title { margin-bottom: clamp(28px, 4vw, 48px); }

/* tabs */
.xp__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }
.xp__tabs::-webkit-scrollbar { display: none; }
.xp__tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--muted); font: 500 .92rem/1 var(--body); cursor: pointer; overflow: hidden;
  transition: color .2s, border-color .2s, background .2s;
}
.xp__tab:hover { color: var(--text); border-color: #3a3a44; }
.xp__tab.is-active { color: var(--text); border-color: var(--accent); background: #15170f; }
.xp__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xp__ico { width: 18px; height: 18px; flex: none; background: var(--c, var(--accent)); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.xp__ico--lead { --c: var(--accent); --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E"); }
.xp__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.xp__tab.is-active .xp__bar { animation: xpBar var(--xp-dur, 9s) linear forwards; }
.xp.is-paused .xp__tab.is-active .xp__bar { animation-play-state: paused; }
@keyframes xpBar { to { width: 100%; } }

/* stage + panels */
.xp__stage { position: relative; margin-top: 22px; }
.xp__panel { display: grid; gap: 18px; }
.xp__panel[hidden] { display: none; }
.xp__panel.is-active { animation: xpIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes xpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xp__copy h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.xp__copy p { color: var(--muted); margin-top: 8px; max-width: 640px; }
.xp__note { color: #5e5e66; margin-top: 16px; }

/* window frame */
.xp__win {
  --ink: #ecebe6; --sub: #8a8a93; --card: #16161b; --ln: #26262e;
  position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #0f0f13; color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02);
  min-height: 380px;
}
.xp__win--light { --ink: #1f1f1f; --sub: #5f6368; --card: #fff; --ln: #e6e7ea; background: #f7f8fa; }
.xp__bar-top { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--ln); background: color-mix(in srgb, var(--card) 80%, transparent); color: var(--sub); }
.xp__bar-top .mono { font-size: .72rem; }
.xp__dots { display: inline-flex; gap: 6px; }
.xp__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.xp__dots i:nth-child(2) { background: #febc2e; }
.xp__dots i:nth-child(3) { background: #28c840; }

/* ---------- 1. Lead generation ---------- */
.lv { padding: 16px; }
.lv__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ln); }
.lv__live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.lv__count { display: flex; align-items: baseline; gap: 8px; }
.lv__count b { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--accent); }
.lv__count small { color: var(--sub); }
.lv__src { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.lv__src em { font-style: normal; font-size: .7rem; padding: 4px 8px; border-radius: 99px; border: 1px solid var(--ln); color: var(--sub); }
.lv__list { display: grid; gap: 8px; margin-top: 14px; }
.lv__row {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--ln); border-radius: 12px; background: var(--card);
  animation: lvIn .55s cubic-bezier(.2,.8,.2,1);
}
.lv__row.is-new { border-color: color-mix(in srgb, var(--accent) 55%, var(--ln)); box-shadow: 0 0 0 3px rgba(198,255,61,.08); }
.lv__row.is-out { animation: lvOut .35s ease forwards; }
@keyframes lvIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes lvOut { to { opacity: 0; transform: translateX(16px); } }
.lv__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem var(--display); color: #0a0a0c; background: var(--av, var(--accent)); }
.lv__who b { display: block; font-weight: 600; font-size: .95rem; }
.lv__who span { display: block; font-family: var(--mono); font-size: .72rem; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv__meta { display: grid; justify-items: end; gap: 5px; }
.lv__tag { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); white-space: nowrap; }
.lv__tag i { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.lv__time { font-family: var(--mono); font-size: .68rem; color: var(--sub); }

/* ---------- 2. SEO (search results) ---------- */
.sr { display: grid; grid-template-columns: 1fr 230px; gap: 18px; padding: 16px; }
.sr__box { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 99px; background: #fff; border: 1px solid #dfe1e5; box-shadow: 0 1px 6px rgba(32,33,36,.18); color: #202124; font-size: .95rem; }
.sr__box svg { width: 18px; height: 18px; fill: none; stroke: #9aa0a6; stroke-width: 2; flex: none; }
.sr__caret { width: 1.5px; height: 18px; background: #1a73e8; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sr__tabs { display: flex; gap: 18px; margin: 12px 0 6px; padding: 0 6px; font-size: .82rem; color: #5f6368; border-bottom: 1px solid #ebebeb; }
.sr__tabs > * { padding-bottom: 8px; }
.sr__tabs b { color: #1a73e8; font-weight: 500; border-bottom: 3px solid #1a73e8; }
.sr__meta { font-size: .76rem; color: #70757a; margin: 8px 6px 10px; opacity: 0; transition: opacity .4s; }
.sr.is-done .sr__meta { opacity: 1; }
.sr__res { position: relative; padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; }
.sr__res--me { background: #fff; border: 2px solid transparent; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s, border-color .5s, box-shadow .5s; }
.sr.is-done .sr__res--me { opacity: 1; transform: none; border-color: #c6ff3d; box-shadow: 0 0 0 4px rgba(198,255,61,.25), 0 10px 26px -12px rgba(0,0,0,.25); }
.sr__rank { position: absolute; top: -10px; right: 12px; font: 700 .72rem var(--mono); background: #0a0a0c; color: var(--accent); padding: 4px 8px; border-radius: 99px; }
.sr__site { display: flex; align-items: center; gap: 10px; }
.sr__site i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .7rem var(--display); font-style: normal; background: #0a0a0c; color: var(--accent); }
.sr__site b { display: block; font-size: .85rem; font-weight: 500; color: #202124; }
.sr__site small { display: block; font-size: .74rem; color: #4d5156; }
.sr__title { display: block; margin-top: 6px; color: #1a0dab; font-size: 1.12rem; line-height: 1.3; }
.sr__res--me p { font-size: .84rem; color: #4d5156; margin-top: 4px; line-height: 1.45; }
.sr__res--ghost { display: grid; gap: 7px; opacity: .65; }
.sr__res--ghost i { height: 10px; border-radius: 6px; background: #e3e5e8; }
.sr__res--ghost i:nth-child(1) { width: 34%; }
.sr__res--ghost i:nth-child(2) { width: 72%; height: 14px; background: #d6dbf5; }
.sr__res--ghost i:nth-child(3) { width: 90%; }
.sr__perf { align-self: start; background: #fff; border: 1px solid #e6e7ea; border-radius: 14px; padding: 14px; }
.sr__perf .mono { font-size: .68rem; color: #5f6368; }
.sr__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.sr__kpis div { border-radius: 10px; padding: 9px 10px; color: #fff; }
.sr__kpis div:nth-child(1) { background: #4285f4; }
.sr__kpis div:nth-child(2) { background: #5e35b1; }
.sr__kpis div:nth-child(3) { background: #00897b; }
.sr__kpis div:nth-child(4) { background: #e8710a; }
.sr__kpis small { display: block; font-size: .68rem; opacity: .85; }
.sr__kpis b { display: block; font: 600 1.15rem var(--display); margin-top: 2px; }
.sr__chart { width: 100%; height: 70px; }
.sr__chart path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.sr__imp { stroke: #5e35b1; }
.sr__clk { stroke: #4285f4; }
.sr.is-done .sr__chart path { animation: draw 1.6s ease forwards; }
.sr.is-done .sr__clk { animation-delay: .25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- 3. Meta Ads (Ads Manager) ---------- */
.ma { display: grid; grid-template-columns: 1fr 210px; gap: 16px; padding: 16px; align-items: start; }
.ma__table { background: #fff; border: 1px solid #e4e6eb; border-radius: 12px; overflow: hidden; font-size: .8rem; color: #1c1e21; }
.ma__row { display: grid; grid-template-columns: 1.8fr .9fr .6fr .8fr .8fr; gap: 8px; align-items: center; padding: 12px 12px; border-top: 1px solid #edf0f3; }
.ma__row--h { border-top: 0; background: #f5f6f7; color: #65676b; font-size: .72rem; font-weight: 600; }
.ma__row > span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #0a7cff; }
.ma__row b { font-weight: 600; }
.ma__tg { flex: none; width: 26px; height: 15px; border-radius: 99px; background: #0866ff; position: relative; }
.ma__tg::after { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.ma__ok { color: #31a24c; font-weight: 600; }
.ma__ok::before, .ma__learn::before { content: "●"; margin-right: 4px; font-size: .7em; }
.ma__learn { color: #e4a11b; font-weight: 600; }
.ma__phone { position: relative; border-radius: 22px; border: 6px solid #111; background: #f0f2f5; overflow: hidden; height: 330px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); }
.ma__post { background: #fff; margin-top: 10px; }
.ma__ph { display: flex; gap: 8px; align-items: center; padding: 10px; }
.ma__ph i, .ga__site i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .7rem var(--display); font-style: normal; background: linear-gradient(135deg, #0866ff, #a35bff); color: #fff; flex: none; }
.ma__ph b { display: block; font-size: .8rem; color: #050505; }
.ma__ph small { display: block; font-size: .68rem; color: #65676b; }
.ma__creative { height: 150px; display: flex; align-items: flex-end; padding: 12px; color: #fff; font: 600 1rem/1.15 var(--display); background: radial-gradient(circle at 75% 25%, #ffd166 0 16%, transparent 17%), linear-gradient(160deg, #3a7bd5 0%, #1e3c72 55%, #0b1d3a 100%); }
.ma__creative b { font-size: 1.25rem; color: #ffd166; }
.ma__cta { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #f0f2f5; font-size: .74rem; color: #050505; }
.ma__cta b { background: #e4e6eb; padding: 6px 10px; border-radius: 6px; transition: background .2s, color .2s; }
.ma.is-tap .ma__cta b { background: #0866ff; color: #fff; }
.ma__form { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2); transform: translateY(105%); transition: transform .5s cubic-bezier(.2,.8,.2,1); color: #050505; font-size: .78rem; }
.ma.is-form .ma__form { transform: none; }
.ma__form p { margin-bottom: 8px; }
.ma__f { display: block; border: 1px solid #ccd0d5; border-radius: 8px; padding: 6px 9px; margin-bottom: 7px; }
.ma__f small { display: block; font-size: .64rem; color: #65676b; }
.ma__f em { font-style: normal; display: block; min-height: 1.2em; }
.ma__sub { display: block; text-align: center; background: #0866ff; color: #fff; border-radius: 8px; padding: 8px; font-weight: 600; }
.ma__done { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; color: #31a24c; font-weight: 700; font-size: .9rem; opacity: 0; transition: opacity .35s; }
.ma.is-sent .ma__done { opacity: 1; }

/* ---------- 4. Google Ads ---------- */
.ga { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px 16px; padding: 16px; }
.ga__ad { grid-row: span 2; background: #fff; border: 1px solid #e6e7ea; border-radius: 14px; padding: 16px; color: #202124; }
.ga__spons { font-size: .78rem; margin-bottom: 8px; }
.ga__site { display: flex; align-items: center; gap: 10px; }
.ga__site b { display: block; font-size: .85rem; font-weight: 500; }
.ga__site small { display: block; font-size: .74rem; color: #4d5156; }
.ga__title { display: block; margin-top: 8px; color: #1a0dab; font-size: 1.1rem; line-height: 1.3; }
.ga__ad > p:not(.ga__spons) { font-size: .84rem; color: #4d5156; margin-top: 4px; line-height: 1.45; }
.ga__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .84rem; color: #1a0dab; }
.ga__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ga__kpis div { background: #fff; border: 1px solid #e6e7ea; border-radius: 10px; padding: 10px 12px; border-top: 3px solid #4285f4; }
.ga__kpis div:nth-child(2) { border-top-color: #ea4335; }
.ga__kpis div:nth-child(3) { border-top-color: #fbbc04; }
.ga__kpis div:nth-child(4) { border-top-color: #34a853; }
.ga__kpis small { display: block; font-size: .7rem; color: #5f6368; }
.ga__kpis b { display: block; font: 600 1.2rem var(--display); color: #202124; }
.ga__chart { width: 100%; height: 78px; background: #fff; border: 1px solid #e6e7ea; border-radius: 10px; }
.ga__chart path { fill: none; stroke: #1a73e8; stroke-width: 2.6; stroke-dasharray: 420; stroke-dashoffset: 420; }
.ga.is-done .ga__chart path { animation: draw 1.8s ease forwards; }
.ga__kw { grid-column: 1 / -1; display: grid; gap: 6px; background: #fff; border: 1px solid #e6e7ea; border-radius: 12px; padding: 10px 12px; font-size: .8rem; color: #202124; }
.ga__kw li { display: grid; grid-template-columns: 1fr 120px 40px; align-items: center; gap: 10px; }
.ga__kw i { height: 6px; border-radius: 99px; background: #e8eaed; position: relative; overflow: hidden; }
.ga__kw i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: #34a853; border-radius: inherit; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.ga.is-done .ga__kw i::after { width: calc(var(--q) * 10%); }
.ga__kw b { font-family: var(--mono); font-size: .72rem; color: #188038; }

/* ---------- 5. Website development (hosting panel) ---------- */
.wd { display: grid; grid-template-columns: 150px 1fr; min-height: 340px; }
.wd__side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--ln); background: #121218; font-size: .82rem; color: var(--sub); }
.wd__logo { width: 26px; height: 26px; margin: 0 0 12px 6px; background: #8c6cf0; -webkit-mask: url(assets/tools/hostinger.svg) center / contain no-repeat; mask: url(assets/tools/hostinger.svg) center / contain no-repeat; }
.wd__side span { padding: 8px 10px; border-radius: 8px; }
.wd__side .is-on { background: rgba(140,108,240,.16); color: #cbbcff; }
.wd__main { padding: 16px; display: grid; gap: 14px; align-content: start; }
.wd__site { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ln); border-radius: 12px; background: var(--card); }
.wd__fav { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #0a0a0c; border: 1px solid #2c2c34; color: var(--accent); font: 700 .8rem var(--display); }
.wd__site b { display: block; font-size: .95rem; }
.wd__site small { display: block; color: var(--sub); font-size: .76rem; }
.wd__ok { font-style: normal; color: #4ade80; }
.wd__score { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
.wd__score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.wd__score circle { fill: none; stroke: #23232a; stroke-width: 3.2; }
.wd__score .wd__arc { stroke: #4ade80; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1); }
.wd.is-done .wd__arc { stroke-dashoffset: 2; }
.wd__score b { font: 700 .95rem var(--display); color: #4ade80; }
.wd__log { min-height: 150px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #08080b; border: 1px solid var(--ln); color: #b9b8b2; font-size: .74rem; line-height: 1.7; white-space: pre-wrap; overflow: hidden; }
.wd__log .ok { color: #4ade80; }
.wd__log .cmd { color: var(--accent); }
.wd__stack { display: flex; flex-wrap: wrap; gap: 10px; }
.wd__stack i { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ln); background: var(--card); position: relative; }
.wd__stack i::after { content: ""; position: absolute; inset: 9px; background: var(--c); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) and (min-width: 1024px) {
  .sr, .ma { grid-template-columns: 1fr; }
  .sr__perf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .sr__perf .mono { grid-column: 1 / -1; }
  .sr__kpis { margin: 10px 0 0; }
  .ma__phone { display: none; }
}
@media (max-width: 760px) {
  .sr, .ma, .ga { grid-template-columns: 1fr; }
  .ma__phone { display: none; }
  .ga__ad { grid-row: auto; }
  .ma__row { grid-template-columns: 1.6fr .6fr .8fr; }
  .ma__row > :nth-child(2), .ma__row > :nth-child(5) { display: none; }
  .wd { grid-template-columns: 1fr; }
  .wd__side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ln); padding: 8px; }
  .wd__logo { margin: 4px 6px 0; flex: none; }
  .lv__src { display: none; }
  .lv__row { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 9px 10px; }
  .lv__av { width: 34px; height: 34px; }
  .ga__kw li { grid-template-columns: 1fr 70px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .xp__tab.is-active .xp__bar { animation: none; width: 100%; }
}