/* =====================================================================
   YakClick — Rich homepage components (software-company caliber)
   Built on brand.css tokens. All visuals are hand-crafted CSS/SVG.
   ===================================================================== */

/* ---------- shared section chrome ---------- */
.yc-band { padding: clamp(64px, 9vw, 120px) 0; }
.yc-band--tint { background: var(--yc-surface); border-block: 1px solid var(--yc-line-soft); }
.yc-band--ink { background: var(--yc-ink); color: #C6D0E0; }
:root[data-theme="light"] .yc-band--ink { background: #0F1520; }
.yc-head2 { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.yc-head2 h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; margin: 0 0 14px; }
.yc-head2 p { font-size: var(--yc-fs-lg); color: var(--yc-text-soft); margin: 0; }
.yc-band--ink .yc-head2 h2 { color: #fff; }
.yc-band--ink .yc-head2 p { color: #9FB0C8; }

/* ================= HERO with product dashboard mockup ================= */
.yc-hero2 { position: relative; overflow: hidden; padding: clamp(52px,7vw,96px) 0 clamp(64px,8vw,110px); }
.yc-hero2::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(60% 70% at 82% -8%, color-mix(in srgb, var(--yc-blue) 26%, transparent), transparent 60%),
    radial-gradient(46% 55% at -6% 108%, color-mix(in srgb, var(--yc-blue) 14%, transparent), transparent 55%);
}
.yc-hero2::after { /* subtle grid */
  content:""; position:absolute; inset:0; z-index:-2; opacity:.4;
  background-image:linear-gradient(var(--yc-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--yc-line-soft) 1px, transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
}
.yc-hero2__grid { display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; }
.yc-hero2__visual { position:relative; } /* anchor for floating chips — prevents them escaping to the viewport */
.yc-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border:1px solid var(--yc-line); background:var(--yc-surface);
  border-radius:6px; font-size:var(--yc-fs-xs); color:var(--yc-text-soft); margin-bottom:22px; box-shadow:var(--yc-shadow-sm); }
.yc-pill b { background:var(--yc-blue); color:#fff; font-family:var(--yc-font-mono); font-size:10px; padding:3px 8px; border-radius:4px; letter-spacing:.06em; }
.yc-hero2 h1 { font-size:clamp(32px,4.6vw,50px); line-height:1.08; letter-spacing:-.02em; margin:0 0 20px; }
.yc-hero2 h1 .accent { color:var(--yc-blue); }
.yc-hero2 .lead { font-size:var(--yc-fs-lg); color:var(--yc-text-soft); max-width:52ch; margin:0 0 30px; }
.yc-hero2__cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.yc-hero2__note { display:flex; align-items:center; gap:8px; margin-top:22px; font-size:var(--yc-fs-sm); color:var(--yc-text-faint); }
.yc-hero2__note svg { width:16px; height:16px; color:var(--yc-success); }

/* browser window + dashboard mock */
.yc-window { position:relative; border-radius:10px; background:var(--yc-surface); border:1px solid var(--yc-line);
  box-shadow:var(--yc-shadow-lg); overflow:hidden; color:var(--yc-text); /* reset inherited hero text color */ }
.yc-window__bar { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--yc-line-soft); background:var(--yc-surface-2); }
.yc-window__bar .dot { width:11px; height:11px; border-radius:50%; }
.yc-window__bar .dot:nth-child(1){ background:#ff5f57; } .yc-window__bar .dot:nth-child(2){ background:#febc2e; } .yc-window__bar .dot:nth-child(3){ background:#28c840; }
.yc-window__url { margin-inline-start:12px; flex:1; height:22px; border-radius:6px; background:var(--yc-paper); border:1px solid var(--yc-line-soft);
  display:flex; align-items:center; padding:0 10px; font-family:var(--yc-font-mono); font-size:11px; color:var(--yc-text-faint); }
.yc-window { max-width:100%; }
.yc-dash { display:grid; grid-template-columns:clamp(96px,24vw,150px) minmax(0,1fr); min-height:340px; }
@media (max-width:480px){ .yc-dash{ grid-template-columns:minmax(0,1fr); } .yc-dash__side{ display:none; } }
.yc-dash__side { background:var(--yc-surface-2); border-inline-end:1px solid var(--yc-line-soft); padding:16px 12px; display:flex; flex-direction:column; gap:6px; }
.yc-dash__logo { display:flex; align-items:center; gap:8px; padding:4px 8px 12px; font-weight:800; font-size:13px; }
.yc-dash__logo .b { width:16px; height:16px; border-radius:5px; background:var(--yc-blue); }
.yc-dash__nav { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:12px; color:var(--yc-text-faint); }
.yc-dash__nav.active { background:var(--yc-blue-tint); color:var(--yc-blue); font-weight:600; }
.yc-dash__nav i { width:14px; height:14px; border-radius:4px; background:currentColor; opacity:.5; display:inline-block; }
.yc-dash__main { padding:18px; display:flex; flex-direction:column; gap:14px; }
.yc-dash__tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.yc-dash .yc-tile .n { font-size:clamp(15px,1.6vw,21px); } /* higher specificity than base .yc-tile .n */
.yc-tile { background:var(--yc-surface); border:1px solid var(--yc-line-soft); border-radius:12px; padding:12px 14px; }
.yc-tile .l { font-size:10px; color:var(--yc-text-faint); text-transform:uppercase; letter-spacing:.06em; font-family:var(--yc-font-mono); }
.yc-tile .n { font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:3px; }
.yc-tile .t { font-size:10px; color:var(--yc-success); margin-top:2px; font-weight:600; }
.yc-dash__chart { background:var(--yc-surface); border:1px solid var(--yc-line-soft); border-radius:12px; padding:14px; flex:1; display:flex; flex-direction:column; }
.yc-dash__chart .ct { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.yc-dash__chart .ct b { font-size:12px; } .yc-dash__chart .ct span { font-size:10px; color:var(--yc-text-faint); font-family:var(--yc-font-mono); }
.yc-dash__chart svg { width:100%; height:100%; min-height:96px; display:block; }
.yc-float { position:absolute; background:var(--yc-surface); border:1px solid var(--yc-line); border-radius:12px; box-shadow:var(--yc-shadow); padding:10px 13px; display:flex; align-items:center; gap:10px; }
.yc-float .ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; }
.yc-float .t { font-size:12px; font-weight:700; } .yc-float .s { font-size:10px; color:var(--yc-text-faint); }
.yc-float--a { top:-16px; inset-inline-start:-22px; } .yc-float--a .ic{ background:var(--yc-success); }
.yc-float--b { bottom:-18px; inset-inline-end:-18px; } .yc-float--b .ic{ background:var(--yc-blue); }
@media (max-width:960px){ .yc-hero2__grid{ grid-template-columns:1fr; gap:40px; } .yc-hero2__visual{ order:-1; } .yc-float--a{ inset-inline-start:0; } .yc-float--b{ inset-inline-end:0; } }

/* ================= HERO v4 — light & friendly (Hostinger-style) ================= */
.yc-hero4 { position:relative; overflow:hidden; padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--yc-blue) 6%, var(--yc-paper)) 0%, var(--yc-paper) 78%); }
.yc-hero4::before { content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(46% 56% at 88% 0%, color-mix(in srgb, var(--yc-blue) 13%, transparent), transparent 62%); }
.yc-hero4 .yc-container { position:relative; z-index:1; }
.yc-hero4__grid { display:grid; grid-template-columns:.76fr 1.24fr; gap:clamp(32px,3.5vw,52px); align-items:center; }
.yc-hero4__grid > * { min-width:0; } /* let columns shrink below content width on phones */
.yc-hero4 .eyebrow4 { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--yc-blue); margin-bottom:18px; }
.yc-hero4 h1 { font-size:clamp(32px,4.5vw,52px); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px; font-weight:800; color:var(--yc-text); }
.yc-hero4 h1 .accent { color:var(--yc-blue); }
.yc-hero4 .lead { font-size:var(--yc-fs-lg); color:var(--yc-text-soft); max-width:52ch; margin:0 0 22px; }
.yc-hero4__list { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
.yc-hero4__list li { display:flex; align-items:flex-start; gap:11px; font-size:var(--yc-fs-base); font-weight:550; color:var(--yc-text); }
.yc-hero4__list .ck { width:22px; height:22px; border-radius:50%; background:var(--yc-blue-tint); color:var(--yc-blue);
  display:grid; place-items:center; flex:none; margin-top:1px; }
.yc-hero4__list .ck svg { width:13px; height:13px; }
.yc-hero4__cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.yc-hero4__note { display:flex; align-items:center; gap:8px; margin-top:18px; font-size:var(--yc-fs-sm); color:var(--yc-text-faint); }
.yc-hero4__note svg { width:15px; height:15px; color:var(--yc-success); }
.yc-hero4 .yc-window { box-shadow:0 24px 70px rgba(20,40,90,.18), 0 4px 16px rgba(20,40,90,.07); }
/* light trust row under hero */
.yc-trustrow { border-top:1px solid var(--yc-line-soft); margin-top:clamp(40px,5vw,60px); padding-top:24px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; position:relative; z-index:1; }
.yc-trustrow .lbl { font-family:var(--yc-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yc-text-faint); }
.yc-trustrow .item { display:inline-flex; align-items:center; gap:9px; color:var(--yc-text-soft); font-weight:650; font-size:14.5px; }
.yc-trustrow .item svg { width:19px; height:19px; color:var(--yc-blue); }
@media (max-width:960px){ .yc-hero4__grid{ grid-template-columns:1fr; } }

/* light stats (Hostinger-style big numbers) */
.yc-statgrid2 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.yc-statgrid2 > div { background:var(--yc-surface); border:1px solid var(--yc-line); border-radius:16px; padding:30px 22px; text-align:center; }
.yc-statgrid2 .n { font-size:clamp(30px,3.6vw,42px); font-weight:800; color:var(--yc-blue); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.yc-statgrid2 .l { color:var(--yc-text-soft); font-size:var(--yc-fs-sm); margin-top:6px; font-weight:550; }
@media (max-width:760px){ .yc-statgrid2{ grid-template-columns:1fr 1fr; } }

/* ================= HERO v3 — dark premium (enterprise standard) ================= */
.yc-hero3 { position:relative; overflow:hidden; background:#0A0E16; color:#E9EEF7; padding:clamp(64px,8vw,110px) 0 clamp(56px,7vw,96px); }
.yc-hero3::before { content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(55% 65% at 78% 8%, rgba(40,112,232,.34), transparent 62%),
    radial-gradient(40% 50% at 12% 100%, rgba(40,112,232,.16), transparent 58%); }
.yc-hero3::after { content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(75% 65% at 60% 20%, #000, transparent 78%); mask-image:radial-gradient(75% 65% at 60% 20%, #000, transparent 78%); }
.yc-hero3 .yc-container { position:relative; z-index:1; }
.yc-hero3__grid { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(40px,5vw,72px); align-items:center; }
.yc-hero3 .eyebrow3 { font-family:var(--yc-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#6E9DF2; margin-bottom:20px; display:block; }
.yc-hero3 h1 { color:#fff; font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-.02em; margin:0 0 20px; font-weight:700; }
.yc-hero3 h1 .accent { background:linear-gradient(90deg,#6E9DF2,#9DC0FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.yc-hero3 .lead { font-size:var(--yc-fs-lg); color:#B3BECE; max-width:52ch; margin:0 0 32px; }
.yc-hero3__cta { display:flex; flex-wrap:wrap; gap:14px; }
.yc-hero3 .btn-yc-ghost { border-color:rgba(255,255,255,.28); color:#fff; }
.yc-hero3 .btn-yc-ghost:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,.06); }
.yc-hero3__meta { display:flex; gap:26px; flex-wrap:wrap; margin-top:30px; font-size:var(--yc-fs-sm); color:#7C899C; }
.yc-hero3__meta span { display:inline-flex; align-items:center; gap:8px; }
.yc-hero3__meta svg { width:15px; height:15px; color:#5FBF92; }
/* trust row inside dark hero */
.yc-hero3__trust { position:relative; z-index:1; margin-top:clamp(44px,6vw,70px); padding-top:26px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.yc-hero3__trust .lbl { font-family:var(--yc-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5A6A82; }
.yc-hero3__trust .item { display:inline-flex; align-items:center; gap:9px; color:#8FA0B8; font-weight:600; font-size:14.5px; }
.yc-hero3__trust .item svg { width:19px; height:19px; color:#5B8DF5; }
/* window on dark */
.yc-hero3 .yc-window { border-color:rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04); }
/* richer dashboard table */
.yc-dash__table { background:var(--yc-surface); border:1px solid var(--yc-line-soft); border-radius:10px; overflow:hidden; }
.yc-dash__table .tr { display:grid; grid-template-columns:1.5fr 1fr .8fr; gap:8px; padding:8px 12px; font-size:11px; align-items:center; border-top:1px solid var(--yc-line-soft); color:var(--yc-text-soft); }
.yc-dash__table .tr:first-child { border-top:0; background:var(--yc-surface-2); font-family:var(--yc-font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--yc-text-faint); }
.yc-dash__table .st { justify-self:start; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:4px; background:color-mix(in srgb,var(--yc-success) 14%,transparent); color:var(--yc-success); }
.yc-dash__table .st.b { background:var(--yc-blue-tint); color:var(--yc-blue); }
@media (max-width:960px){ .yc-hero3__grid{ grid-template-columns:1fr; } }

/* ================= dashboard slideshow (hero product window) ================= */
.yc-dashshow { position:relative; height:545px; overflow:hidden; }
.yc-slide { position:absolute; inset:0; opacity:0; transform:translateX(14px); pointer-events:none;
  transition:opacity .5s var(--yc-ease), transform .5s var(--yc-ease); display:grid; grid-template-columns:clamp(140px,15vw,210px) minmax(0,1fr); }
.yc-slide.active { opacity:1; transform:none; pointer-events:auto; }
[dir="rtl"] .yc-slide { transform:translateX(-14px); } [dir="rtl"] .yc-slide.active { transform:none; }
@media (prefers-reduced-motion: reduce){ .yc-slide{ transition:none; } }
/* sidebar */
.d2side { background:var(--yc-surface-2); border-inline-end:1px solid var(--yc-line-soft); padding:14px 10px; display:flex; flex-direction:column; gap:3px; }
.d2side .lg { display:flex; align-items:flex-start; gap:7px; font-weight:800; font-size:12px; line-height:1.3; padding:4px 8px 12px; color:var(--yc-text); }
.d2side .lg i { width:15px; height:15px; border-radius:4px; background:var(--yc-blue); display:inline-block; flex:0 0 15px; margin-top:1px; }
.d2nav { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; font-size:11.5px; color:var(--yc-text-faint); }
.d2nav svg { width:13px; height:13px; flex:none; }
.d2nav.on { background:var(--yc-blue-tint); color:var(--yc-blue); font-weight:650; }
/* main area */
.d2main { padding:16px 20px; display:flex; flex-direction:column; gap:13px; min-width:0; background:var(--yc-surface); }
/* larger-scale overrides (higher specificity so they win over base rules below) */
.yc-slide .d2head b { font-size:15px; }
.yc-slide .d2card svg.chart { height:86px; }
.yc-slide .d2tr { font-size:11.5px; padding:8px 14px; }
.yc-slide .d2nav { font-size:12.5px; padding:9px 10px; }
.d2head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.d2head b { font-size:13.5px; color:var(--yc-text); }
.d2head .right { display:flex; align-items:center; gap:8px; }
.d2head .search { height:24px; width:120px; border-radius:6px; background:var(--yc-paper); border:1px solid var(--yc-line-soft);
  font-family:var(--yc-font-mono); font-size:9.5px; color:var(--yc-text-faint); display:flex; align-items:center; padding:0 8px; gap:5px; }
.d2head .avc { width:24px; height:24px; border-radius:50%; background:var(--yc-blue); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; }
.d2tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.d2tile { background:var(--yc-surface); border:1px solid var(--yc-line-soft); border-radius:10px; padding:10px 12px; min-width:0; }
.d2tile .tl { display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--yc-text-faint); text-transform:uppercase; letter-spacing:.05em; font-family:var(--yc-font-mono); }
.d2tile .tl svg { width:12px; height:12px; color:var(--yc-blue); flex:none; }
.d2tile .tv { font-size:clamp(16px,1.7vw,23px); font-weight:800; color:var(--yc-text); margin-top:4px; font-variant-numeric:tabular-nums; }
.d2tile .td { display:inline-flex; align-items:center; font-size:9.5px; font-weight:700; margin-top:4px; padding:1px 7px; border-radius:99px;
  background:color-mix(in srgb,var(--yc-success) 14%,transparent); color:var(--yc-success); }
.d2tile .td.down { background:color-mix(in srgb,var(--yc-danger) 12%,transparent); color:var(--yc-danger); }
.d2card { background:var(--yc-surface); border:1px solid var(--yc-line-soft); border-radius:10px; padding:11px 13px; }
.d2card .ch { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.d2card .ch b { font-size:11.5px; color:var(--yc-text); }
.d2card .ch span { font-size:9.5px; color:var(--yc-text-faint); font-family:var(--yc-font-mono); }
.d2card svg.chart { width:100%; height:74px; display:block; }
.d2table { border:1px solid var(--yc-line-soft); border-radius:10px; overflow:hidden; background:var(--yc-surface); }
.d2tr { display:grid; grid-template-columns:1.4fr 1fr .9fr; gap:8px; padding:7px 12px; font-size:10.5px; align-items:center; color:var(--yc-text-soft); border-top:1px solid var(--yc-line-soft); }
.d2tr:first-child { border-top:0; background:var(--yc-surface-2); font-family:var(--yc-font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--yc-text-faint); }
.d2st { justify-self:start; font-size:9px; font-weight:700; padding:2px 8px; border-radius:5px; background:color-mix(in srgb,var(--yc-success) 14%,transparent); color:var(--yc-success); }
.d2st.b { background:var(--yc-blue-tint); color:var(--yc-blue); }
.d2st.r { background:color-mix(in srgb,var(--yc-danger) 12%,transparent); color:var(--yc-danger); }
/* dots */
.yc-dashdots { display:flex; justify-content:center; gap:8px; padding:12px 0 14px; background:var(--yc-surface); border-top:1px solid var(--yc-line-soft); }
.yc-dashdots button { width:8px; height:8px; border-radius:99px; border:none; padding:0; cursor:pointer; background:var(--yc-line); transition:width .25s var(--yc-ease), background-color .25s; }
.yc-dashdots button.on { width:26px; background:var(--yc-blue); }
@media (max-width:480px){ .yc-slide{ grid-template-columns:minmax(0,1fr); } .d2side{ display:none; } .yc-dashshow{ height:440px; } }

/* ================= client wall (Trusted by) ================= */
.yc-clients { text-align:center; }
.yc-clients h2 { font-size:clamp(20px,2.4vw,26px); margin:0 0 8px; }
.yc-clients .sub { color:var(--yc-text-faint); font-size:var(--yc-fs-sm); margin:0 0 26px; }
.yc-clientwall { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:900px; margin:0 auto; }
.yc-client-chip { display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1px solid var(--yc-line);
  border-radius:10px; background:var(--yc-surface); color:var(--yc-text-soft); font-weight:650; font-size:14.5px;
  transition:border-color .15s var(--yc-ease), color .15s var(--yc-ease); }
.yc-client-chip:hover { border-color:color-mix(in srgb,var(--yc-blue) 40%,var(--yc-line)); color:var(--yc-text); }
.yc-client-chip svg { width:16px; height:16px; color:var(--yc-blue); flex:none; }

/* ================= Solutions by industry ================= */
.yc-inds { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.yc-ind { background:var(--yc-surface); border:1px solid var(--yc-line); border-radius:10px; padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s var(--yc-ease), box-shadow .15s var(--yc-ease); }
.yc-ind:hover { border-color:color-mix(in srgb,var(--yc-blue) 45%,var(--yc-line)); box-shadow:var(--yc-shadow-sm); }
.yc-ind__ic { width:40px; height:40px; border-radius:8px; background:var(--yc-blue-tint); color:var(--yc-blue); display:grid; place-items:center; }
.yc-ind__ic svg { width:20px; height:20px; }
.yc-ind h4 { font-size:15.5px; margin:2px 0 0; color:var(--yc-text); }
.yc-ind p { font-size:13px; color:var(--yc-text-faint); margin:0; flex:1; }
.yc-ind .go { font-size:13px; font-weight:650; color:var(--yc-blue); display:inline-flex; align-items:center; gap:5px; }
[dir="rtl"] .yc-ind .go svg { transform:scaleX(-1); }
@media (max-width:1020px){ .yc-inds{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .yc-inds{ grid-template-columns:1fr 1fr;} }
@media (max-width:440px){ .yc-inds{ grid-template-columns:1fr;} }

/* ================= team grid (About) ================= */
.yc-team { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.yc-member { background:var(--yc-surface); border:1px solid var(--yc-line); border-radius:16px; padding:28px 22px; text-align:center;
  transition:transform .15s var(--yc-ease), box-shadow .15s var(--yc-ease); }
.yc-member:hover { transform:translateY(-2px); box-shadow:var(--yc-shadow); }
.yc-member .avx { width:78px; height:78px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center;
  font-weight:800; font-size:22px; color:#fff; letter-spacing:.02em;
  background:linear-gradient(135deg, var(--yc-blue), var(--yc-blue-300)); }
.yc-member:nth-child(2n) .avx { background:linear-gradient(135deg, var(--yc-blue-700), var(--yc-blue)); }
.yc-member .nm { font-weight:700; font-size:var(--yc-fs-base); color:var(--yc-text); }
.yc-member .rl { font-size:var(--yc-fs-sm); color:var(--yc-blue); font-weight:600; margin-top:3px; }
.yc-member .xp { font-size:13px; color:var(--yc-text-faint); margin-top:6px; }
.yc-member .avph { width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:top; display:block;
  margin:0 auto 16px; border:4px solid var(--yc-blue-tint); background:var(--yc-surface-2); }
.yc-team--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1020px){ .yc-team--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:860px){ .yc-team{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .yc-team, .yc-team--4{ grid-template-columns:1fr; } }

/* ================= client quotes (photo + rating) ================= */
.yc-quote2 { background:var(--yc-surface); border:1px solid var(--yc-line); border-radius:16px; padding:28px; display:flex; flex-direction:column;
  transition:transform .15s var(--yc-ease), box-shadow .15s var(--yc-ease); }
.yc-quote2:hover { transform:translateY(-2px); box-shadow:var(--yc-shadow); }
.yc-quote2 .stars { color:#F5A623; letter-spacing:3px; font-size:15px; margin-bottom:14px; }
.yc-quote2 .qm { font-family:Georgia,serif; font-size:44px; line-height:1; color:var(--yc-blue); opacity:.35; margin-bottom:10px; }
.yc-quote2 p { font-size:var(--yc-fs-base); color:var(--yc-text); line-height:1.65; margin:0 0 22px; flex:1; }
.yc-quote2 .who { border-top:1px solid var(--yc-line-soft); padding-top:16px; display:flex; align-items:center; gap:13px; }
.yc-quote2 .who img { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:top;
  border:2.5px solid var(--yc-blue-tint); background:var(--yc-surface-2); flex:none; }
.yc-quote2 .who .avi { width:48px; height:48px; border-radius:50%; background:var(--yc-blue-tint); color:var(--yc-blue);
  display:grid; place-items:center; font-weight:800; font-size:15px; flex:none; }
.yc-quote2 .nm { font-weight:700; font-size:var(--yc-fs-sm); color:var(--yc-text); }
.yc-quote2 .rl { font-size:var(--yc-fs-xs); color:var(--yc-text-faint); margin-top:1px; }

/* ================= trust / logo strip ================= */
.yc-trust { border-block:1px solid var(--yc-line-soft); background:var(--yc-surface); }
.yc-trust .yc-container{ padding-block:26px; display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center; }
.yc-trust .lbl { font-family:var(--yc-font-mono); font-size:var(--yc-fs-xs); color:var(--yc-text-faint); text-transform:uppercase; letter-spacing:.1em; }
.yc-trust .item { display:flex; align-items:center; gap:9px; color:var(--yc-text-soft); font-weight:650; font-size:15px; opacity:.85; }
.yc-trust .item svg{ width:22px; height:22px; color:var(--yc-blue); }

/* ================= feature rows (alternating) ================= */
.yc-featrow { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.yc-featrow + .yc-featrow { margin-top:clamp(56px,8vw,110px); }
.yc-featrow--rev .yc-featrow__text { order:2; }
.yc-featrow__text .eye { font-family:var(--yc-font-mono); font-size:var(--yc-fs-xs); color:var(--yc-blue); letter-spacing:.12em; text-transform:uppercase; }
.yc-featrow__text h3 { font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; margin:10px 0 14px; }
.yc-featrow__text p { color:var(--yc-text-soft); font-size:var(--yc-fs-lg); margin:0 0 20px; }
.yc-checks { display:grid; gap:12px; margin:0 0 26px; }
.yc-checks li { list-style:none; display:flex; align-items:flex-start; gap:11px; color:var(--yc-text); font-size:var(--yc-fs-sm); }
.yc-checks svg { width:20px; height:20px; color:var(--yc-blue); flex:none; margin-top:1px; }
/* feature visuals */
.yc-viz { border-radius:18px; border:1px solid var(--yc-line); background:var(--yc-surface); box-shadow:var(--yc-shadow); padding:22px; position:relative; overflow:hidden; }
.yc-viz::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(80% 60% at 100% 0%, var(--yc-blue-tint), transparent 60%); }
.yc-viz > * { position:relative; z-index:1; }
.yc-viz__row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--yc-line-soft); border-radius:12px; background:var(--yc-surface); margin-bottom:10px; }
.yc-viz__row:last-child{ margin-bottom:0; }
.yc-viz__row .av { width:36px; height:36px; border-radius:9px; background:var(--yc-blue-tint); color:var(--yc-blue); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; }
.yc-viz__row .g1 { height:9px; width:60%; background:var(--yc-surface-2); border-radius:5px; } .yc-viz__row .g2{ height:7px; width:40%; background:var(--yc-line-soft); border-radius:5px; margin-top:6px; }
.yc-viz__row .badge { margin-inline-start:auto; font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; background:color-mix(in srgb,var(--yc-success) 15%,transparent); color:var(--yc-success); }
.yc-viz__bars { display:flex; align-items:flex-end; gap:10px; height:120px; padding:10px 4px 0; }
.yc-viz__bars span { flex:1; border-radius:6px 6px 0 0; background:linear-gradient(var(--yc-blue), var(--yc-blue-300)); opacity:.85; }
@media (max-width:820px){ .yc-featrow{ grid-template-columns:1fr; gap:32px; } .yc-featrow--rev .yc-featrow__text{ order:0; } }

/* ================= stats band ================= */
.yc-statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); border-radius:var(--yc-radius-lg); overflow:hidden; }
.yc-statgrid > div { background:var(--yc-ink); padding:34px 24px; text-align:center; }
:root[data-theme="light"] .yc-statgrid > div { background:#0F1520; }
.yc-statgrid .n { font-size:clamp(30px,4vw,44px); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.yc-statgrid .n .u { color:var(--yc-blue-300); }
.yc-statgrid .l { color:#9FB0C8; font-size:var(--yc-fs-sm); margin-top:6px; }
@media (max-width:760px){ .yc-statgrid{ grid-template-columns:1fr 1fr; } }

/* ================= process steps ================= */
.yc-steps4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:st; }
.yc-step4 { position:relative; padding-top:14px; }
.yc-step4::before{ counter-increment:st; content:"0" counter(st); font-family:var(--yc-font-mono); font-size:13px; color:var(--yc-blue); font-weight:700;
  background:var(--yc-blue-tint); width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px; }
.yc-step4 h4 { font-size:var(--yc-fs-lg); margin:0 0 8px; }
.yc-step4 p { color:var(--yc-text-soft); font-size:var(--yc-fs-sm); margin:0; }
.yc-step4:not(:last-child)::after{ content:""; position:absolute; top:22px; inset-inline-start:56px; width:calc(100% - 44px); height:2px;
  background:repeating-linear-gradient(90deg,var(--yc-line) 0 6px,transparent 6px 12px); }
[dir="rtl"] .yc-step4:not(:last-child)::after{ background:repeating-linear-gradient(-90deg,var(--yc-line) 0 6px,transparent 6px 12px); }
@media (max-width:820px){ .yc-steps4{ grid-template-columns:1fr 1fr; } .yc-step4::after{ display:none; } }
@media (max-width:460px){ .yc-steps4{ grid-template-columns:1fr; } }

/* ================= testimonials ================= */
.yc-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.yc-quote { background:var(--yc-surface); border:1px solid var(--yc-line); border-radius:var(--yc-radius-lg); padding:28px; display:flex; flex-direction:column; }
.yc-quote .stars { color:#F5A623; letter-spacing:2px; margin-bottom:14px; font-size:14px; }
.yc-quote p { font-size:var(--yc-fs-base); color:var(--yc-text); line-height:1.6; margin:0 0 20px; flex:1; }
.yc-quote .who { display:flex; align-items:center; gap:12px; }
.yc-quote .who .av { width:42px; height:42px; border-radius:50%; background:var(--yc-blue); color:#fff; display:grid; place-items:center; font-weight:800; }
.yc-quote .who .nm { font-weight:700; font-size:var(--yc-fs-sm); } .yc-quote .who .rl { font-size:var(--yc-fs-xs); color:var(--yc-text-faint); }
@media (max-width:820px){ .yc-quotes{ grid-template-columns:1fr; } }

/* ================= big final CTA ================= */
.yc-cta2 { position:relative; overflow:hidden; border-radius:var(--yc-radius-lg);
  background:linear-gradient(120deg, var(--yc-blue-700), var(--yc-blue) 60%, var(--yc-blue-600)); color:#fff; padding:clamp(44px,7vw,80px); text-align:center; }
.yc-cta2::before{ content:""; position:absolute; inset:0; opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:38px 38px;
  -webkit-mask-image:radial-gradient(60% 100% at 50% 0%,#000,transparent 70%); mask-image:radial-gradient(60% 100% at 50% 0%,#000,transparent 70%); }
.yc-cta2 > * { position:relative; }
.yc-cta2 h2 { color:#fff; font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; margin:0 0 14px; }
.yc-cta2 p { color:rgba(255,255,255,.9); font-size:var(--yc-fs-lg); max-width:56ch; margin:0 auto 30px; }
.yc-cta2 .btn-yc-primary { background:#fff; color:var(--yc-blue-700); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.yc-cta2 .btn-yc-primary:hover { background:#eef3ff; color:var(--yc-blue-700); }
.yc-cta2 .btn-yc-ghost { border-color:rgba(255,255,255,.5); color:#fff; }
.yc-cta2 .btn-yc-ghost:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,.1); }