/* ============================================================
   ALEBID — FRONT PAGE CSS  (1:1 design from index.html)
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  padding-top: 88px;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,255,70,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,255,70,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}
.hero-glow {
  position: absolute; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(212,255,70,.07) 0%, transparent 65%);
  border-radius: 50%; pointer-events: none; z-index: 0;
  top: -100px; left: -200px;
  animation: glowPulse 5s ease-in-out infinite;
}
.hero-bg-word {
  position: absolute; right: -20px; top: 50%;
  transform: translateY(-50%);
  font-size: 18vw; font-weight: 900;
  color: rgba(212,255,70,.025); letter-spacing: -.06em;
  user-select: none; pointer-events: none; z-index: 0; white-space: nowrap;
}

@keyframes glowPulse { 0%,100%{opacity:.07} 50%{opacity:.13} }
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 56px; position: relative; z-index: 2;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 32px;
}
.hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--accent); }
.hero-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
.hero-title {
  font-size: clamp(44px,6vw,88px); font-weight: 900;
  letter-spacing: -.05em; text-transform: uppercase; line-height: .88; margin-bottom: 32px;
}
.hero-title .acc { color: var(--accent); }
.hero-title .out { -webkit-text-stroke:1px rgba(245,245,240,.18); color:transparent; display:block; }
.hero-desc {
  font-size: 12px; font-weight: 300; line-height: 1.9;
  color: rgba(245,245,240,.5); letter-spacing: .02em;
  max-width: 460px; margin-bottom: 48px;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--border); padding-top: 32px;
}
.h-stat { padding: 0 24px 0 0; }
.h-stat + .h-stat { border-left:1px solid var(--border); padding-left:24px; }
.h-stat-val { font-size:clamp(22px,2.5vw,34px); font-weight:900; color:var(--accent); letter-spacing:-.04em; line-height:1; margin-bottom:6px; }
.h-stat-lbl { font-size:9px; font-weight:500; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; line-height:1.4; }

.hero-right { position:relative; overflow:hidden; background:var(--gray); }
.hero-photo-frame { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.hero-photo-placeholder {
  width:100%; height:100%; background:linear-gradient(180deg,var(--gray) 0%,var(--gray2) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.hero-photo-placeholder svg { width:56px; height:56px; stroke:rgba(212,255,70,.2); fill:none; stroke-width:1; }
.hero-photo-placeholder span { font-size:9px; font-weight:500; letter-spacing:.2em; color:rgba(136,136,136,.3); text-transform:uppercase; }
.hero-photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,var(--black) 0%,transparent 30%),linear-gradient(to top,var(--black) 0%,transparent 40%);
  pointer-events:none;
}
.hero-badge { position:absolute; bottom:48px; right:40px; z-index:3; background:var(--accent); padding:20px 24px; }
.hb-val { font-size:36px; font-weight:900; color:var(--black); letter-spacing:-.04em; line-height:1; }
.hb-lbl { font-size:8px; font-weight:700; letter-spacing:.18em; color:rgba(10,10,10,.6); text-transform:uppercase; }

/* ── WHY SECTION ──────────────────────────────────────────── */
.why-sec { padding:100px 56px; background:var(--gray); }
.why-top { display:grid; grid-template-columns:1fr 1.6fr; gap:80px; align-items:end; margin-bottom:72px; }
.why-desc-col { font-size:12px; font-weight:300; line-height:1.9; color:rgba(245,245,240,.45); letter-spacing:.02em; padding-bottom:4px; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.why-card {
  background:var(--gray2); border:1px solid transparent; padding:40px;
  position:relative; overflow:hidden; transition:border-color .35s,background .35s; cursor:none;
}
.why-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; z-index:2; }
.why-card:hover::before { transform:scaleX(1); }
.why-card:hover { border-color:rgba(212,255,70,.25); background:var(--gray3); }
.why-card.featured { background:var(--accent); }
.why-card.featured::before { background:var(--black); }
.why-card.featured:hover { background:#c8f230; border-color:transparent; }
.why-card.featured .wc-icon { color:var(--black); }
.why-card.featured .wc-num { color:rgba(10,10,10,.12); }
.why-card.featured .wc-title { color:var(--black); }
.why-card.featured .wc-desc { color:rgba(10,10,10,.65); }
.wc-num { font-size:60px; font-weight:900; color:rgba(212,255,70,.06); letter-spacing:-.05em; line-height:1; position:absolute; right:20px; top:16px; user-select:none; pointer-events:none; transition:color .35s; }
.why-card:hover .wc-num { color:rgba(212,255,70,.1); }
.wc-icon { width:44px; height:44px; border:1px solid rgba(212,255,70,.2); display:flex; align-items:center; justify-content:center; margin-bottom:28px; color:var(--accent); transition:border-color .3s; }
.why-card:hover .wc-icon { border-color:var(--accent); }
.wc-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.wc-title { font-size:13px; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; line-height:1.3; margin-bottom:16px; color:var(--white); }
.wc-desc { font-size:11px; font-weight:300; line-height:1.85; color:rgba(245,245,240,.5); letter-spacing:.01em; }

/* ── CASES CAROUSEL ───────────────────────────────────────── */
.cases-sec { padding:100px 0; overflow:hidden; }
.cases-header { padding:0 56px 56px; display:flex; align-items:flex-end; justify-content:space-between; }
.cases-nav { display:flex; gap:2px; align-items:center; }
.cs-nav-btn { width:52px; height:52px; background:var(--gray2); border:1px solid transparent; display:flex; align-items:center; justify-content:center; cursor:none; transition:all .3s; font-family:'Unbounded',sans-serif; }
.cs-nav-btn:hover { background:var(--gray3); border-color:rgba(212,255,70,.25); }
.cs-nav-btn svg { width:18px; height:18px; stroke:var(--white); fill:none; stroke-width:2; transition:stroke .3s; }
.cs-nav-btn:hover svg { stroke:var(--accent); }
.cs-counter { font-size:10px; font-weight:600; letter-spacing:.12em; color:var(--muted); padding:0 20px; user-select:none; }
.cs-counter span { color:var(--accent); }
.cases-track-wrap { padding:0 56px; overflow:hidden; }
.cases-track { display:flex; gap:2px; transition:transform .65s cubic-bezier(.16,1,.3,1); will-change:transform; }
.carousel-card { flex-shrink:0; width:calc((100vw - 112px - 6px)/3); }
.cases-cta-bar { padding:40px 56px 0; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); margin-top:48px; }
.ccb-stats { display:flex; gap:56px; }
.ccb-val { font-size:28px; font-weight:900; color:var(--accent); letter-spacing:-.04em; line-height:1; }
.ccb-lbl { font-size:9px; font-weight:500; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-top:4px; }

/* ── CASE CARD ─────────────────────────────────────────────── */
.case-card { background:var(--gray); border:1px solid transparent; position:relative; overflow:hidden; cursor:none; transition:border-color .35s,background .35s; display:flex; flex-direction:column; }
.case-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; z-index:10; }
.case-card:hover::before { transform:scaleX(1); }
.case-card:hover { border-color:rgba(212,255,70,.25); background:var(--gray2); }
.case-card:hover .card-arrow { opacity:1; transform:translate(0,0); }
.case-card:hover .vis-extra { opacity:1; transform:translateY(0); }
.card-vis-strip { position:relative; overflow:hidden; min-height:260px; display:flex; align-items:flex-end; flex-shrink:0; }
.vis-photo { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s; filter:brightness(.75) saturate(.85); }
.case-card:hover .vis-photo { transform:scale(1.05); filter:brightness(.6) saturate(.7); }
.vis-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.3) 45%,transparent 100%),linear-gradient(to bottom,rgba(10,10,10,.4) 0%,transparent 30%); z-index:1; }
.vis-scanline { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); top:0; z-index:2; transform:translateY(-2px); opacity:0; transition:opacity .4s,transform .8s ease; }
.case-card:hover .vis-scanline { opacity:1; transform:translateY(260px); }
.vis-badge-top { position:absolute; top:16px; left:16px; z-index:4; display:flex; gap:6px; flex-wrap:wrap; }
.vis-pill { font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; backdrop-filter:blur(8px); border:1px solid rgba(212,255,70,.3); color:var(--accent); background:rgba(10,10,10,.6); line-height:1; }
.vis-pill.solid { background:var(--accent); color:var(--black); border-color:var(--accent); }
.vis-info { position:relative; z-index:3; width:100%; padding:20px 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.vis-metric-badge { display:flex; flex-direction:column; gap:2px; }
.vmb-val { font-size:36px; font-weight:900; color:var(--accent); letter-spacing:-.04em; line-height:1; text-shadow:0 2px 20px rgba(0,0,0,.8); }
.vmb-label { font-size:8px; font-weight:700; letter-spacing:.18em; color:rgba(212,255,70,.6); text-transform:uppercase; }
.vis-extra { display:flex; flex-direction:column; align-items:flex-end; gap:4px; transition:opacity .3s,transform .3s; opacity:0; transform:translateY(6px); }
.ve-item { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; background:rgba(10,10,10,.7); backdrop-filter:blur(8px); color:var(--white); border-left:2px solid var(--accent); white-space:nowrap; }
.card-overlay { position:absolute; inset:0; background:rgba(212,255,70,.03); opacity:0; transition:opacity .35s; pointer-events:none; z-index:5; }
.case-card:hover .card-overlay { opacity:1; }
.card-body { flex:1; display:flex; flex-direction:column; position:relative; z-index:2; padding:40px; }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.card-tag { font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border:1px solid rgba(212,255,70,.2); color:var(--muted); }
.card-tag.primary { background:var(--accent); color:var(--black); border-color:var(--accent); }
.card-num { font-size:11px; font-weight:700; letter-spacing:.08em; color:rgba(212,255,70,.25); }
.card-niche { font-size:9px; font-weight:500; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; margin-bottom:10px; }
.card-title { font-size:clamp(15px,1.8vw,20px); font-weight:800; letter-spacing:-.02em; text-transform:uppercase; line-height:1.15; margin-bottom:20px; }
.card-metrics { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.card-metric-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(0,0,0,.3); border-left:2px solid rgba(212,255,70,.2); transition:border-color .3s; }
.case-card:hover .card-metric-row { border-left-color:var(--accent); }
.cm-label { font-size:9px; font-weight:500; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
.cm-val { font-size:16px; font-weight:900; color:var(--accent); letter-spacing:-.02em; }
.card-desc { font-size:11px; font-weight:300; line-height:1.8; color:rgba(245,245,240,.45); margin-bottom:24px; flex:1; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(212,255,70,.06); }
.card-period { font-size:9px; font-weight:500; letter-spacing:.12em; color:rgba(136,136,136,.5); text-transform:uppercase; }
.card-arrow { font-size:18px; color:var(--accent); opacity:0; transform:translate(-6px,6px); transition:all .35s; text-decoration:none; }
.card-visual-num { position:absolute; bottom:-16px; right:16px; font-size:100px; font-weight:900; color:rgba(212,255,70,.025); letter-spacing:-.05em; user-select:none; pointer-events:none; line-height:1; z-index:0; }
.vis-photo-placeholder { position:absolute; inset:0; background:var(--gray2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.vpp-icon { width:48px; height:48px; border:1px solid rgba(212,255,70,.2); display:flex; align-items:center; justify-content:center; }
.vpp-icon svg { width:22px; height:22px; stroke:rgba(212,255,70,.3); fill:none; stroke-width:1.5; }
.vpp-text { font-size:9px; font-weight:600; letter-spacing:.15em; color:rgba(136,136,136,.4); text-transform:uppercase; }

/* ── ABOUT ─────────────────────────────────────────────────── */
.about-sec { padding:100px 56px; background:var(--black); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:56px; }
.about-bio { font-size:12px; font-weight:300; line-height:1.9; color:rgba(245,245,240,.5); letter-spacing:.02em; margin-bottom:40px; }
.about-points { display:flex; flex-direction:column; gap:2px; }
.ap-item { display:flex; align-items:flex-start; gap:18px; padding:20px 24px; background:var(--gray2); border:1px solid transparent; transition:border-color .3s,background .3s; }
.ap-item:hover { border-color:rgba(212,255,70,.2); background:var(--gray3); }
.ap-num { font-size:9px; font-weight:700; color:var(--accent); letter-spacing:.12em; flex-shrink:0; padding-top:2px; }
.ap-text { font-size:11px; font-weight:400; line-height:1.7; color:rgba(245,245,240,.65); letter-spacing:.01em; }
.about-right { position:relative; display:flex; justify-content:flex-start; }
.about-photo-block { position:relative; background:var(--gray2); width:400px; height:400px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.about-photo-block img { width:100%; height:100%; object-fit:cover; filter:brightness(.9) saturate(.85); }
.about-photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; }
.about-photo-placeholder svg { width:56px; height:56px; stroke:rgba(212,255,70,.2); fill:none; stroke-width:1; }
.about-photo-placeholder span { font-size:9px; font-weight:500; letter-spacing:.2em; color:rgba(136,136,136,.3); text-transform:uppercase; }
.about-badge { position:absolute; bottom:-2px; left:-2px; background:var(--accent); padding:24px 28px; }
.ab-val { font-size:32px; font-weight:900; color:var(--black); letter-spacing:-.04em; line-height:1; }
.ab-lbl { font-size:8px; font-weight:700; letter-spacing:.18em; color:rgba(10,10,10,.55); text-transform:uppercase; margin-top:4px; }
.about-platforms { position:absolute; top:24px; right:-24px; display:flex; flex-direction:column; gap:2px; }
.plat-pill { background:var(--black); padding:10px 16px; font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--white); text-transform:uppercase; border-left:2px solid var(--accent); white-space:nowrap; }

/* ── PROCESS ───────────────────────────────────────────────── */
.process-sec { padding:100px 56px; background:var(--black); overflow:hidden; }
.process-header { display:flex; align-items:baseline; gap:28px; margin-bottom:64px; }
.process-title { font-size:clamp(32px,5vw,64px); font-weight:900; letter-spacing:-.05em; text-transform:uppercase; line-height:.9; }
.process-sub { font-size:11px; font-weight:500; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; white-space:nowrap; padding-left:4px; }
.process-labels { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-bottom:16px; }
.proc-label { font-size:11px; font-weight:300; color:rgba(245,245,240,.35); letter-spacing:.02em; padding-left:4px; }
.process-numbers { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-bottom:48px; }
.process-numbers::after { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:linear-gradient(90deg,rgba(212,255,70,.12),rgba(212,255,70,.35) 50%,rgba(212,255,70,.12)); transform:translateY(-50%); z-index:0; }
.proc-num-wrap { display:flex; align-items:center; gap:0; position:relative; z-index:1; }
.proc-dash { font-size:18px; font-weight:300; color:rgba(212,255,70,.2); flex-shrink:0; padding:0 2px; }
.proc-num { font-size:clamp(40px,4.5vw,60px); font-weight:900; color:var(--accent); letter-spacing:-.04em; line-height:1; }
.process-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid rgba(212,255,70,.08); padding-top:40px; }
.proc-card { padding-right:32px; position:relative; }
.proc-card+.proc-card { border-left:1px solid rgba(212,255,70,.06); padding-left:28px; padding-right:24px; }
.pc-step-title { font-size:12px; font-weight:800; color:var(--accent); letter-spacing:-.01em; text-transform:uppercase; line-height:1.3; margin-bottom:16px; }
.pc-step-desc { font-size:11px; font-weight:300; line-height:1.8; color:rgba(245,245,240,.45); letter-spacing:.01em; }

/* ── VS ────────────────────────────────────────────────────── */
.vs-sec { padding:0 56px 100px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.vs-col { padding:56px 48px; position:relative; overflow:hidden; }
.vs-col.bad { background:rgba(255,255,255,.025); }
.vs-col.good { background:var(--accent); }
.vs-label { font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:32px; display:flex; align-items:center; gap:10px; }
.vs-col.bad .vs-label { color:rgba(245,245,240,.3); }
.vs-col.good .vs-label { color:rgba(10,10,10,.5); }
.vs-icon { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; }
.vs-col.bad .vs-icon { background:rgba(255,80,80,.15); color:#FF5050; }
.vs-col.good .vs-icon { background:rgba(10,10,10,.15); color:var(--black); }
.vs-title { font-size:clamp(22px,2.5vw,36px); font-weight:900; letter-spacing:-.04em; text-transform:uppercase; line-height:.9; margin-bottom:40px; }
.vs-col.bad .vs-title { color:rgba(245,245,240,.3); }
.vs-col.good .vs-title { color:var(--black); }
.vs-list { display:flex; flex-direction:column; gap:16px; }
.vs-item { font-size:11px; font-weight:400; line-height:1.6; display:flex; align-items:flex-start; gap:14px; padding-bottom:16px; border-bottom:1px solid rgba(245,245,240,.05); }
.vs-col.bad .vs-item { color:rgba(245,245,240,.35); }
.vs-col.good .vs-item { color:rgba(10,10,10,.7); border-color:rgba(10,10,10,.08); }
.vs-check { width:16px; height:16px; flex-shrink:0; margin-top:2px; }

/* ── SERVICES ──────────────────────────────────────────────── */
.services-sec { padding:100px 56px; background:var(--gray); }
.services-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:56px; }
.srv-card { background:var(--gray2); padding:36px 28px; border:1px solid transparent; position:relative; overflow:hidden; transition:border-color .35s,background .35s; cursor:none; }
.srv-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
.srv-card:hover::before { transform:scaleX(1); }
.srv-card:hover { border-color:rgba(212,255,70,.2); background:var(--gray3); }
.srv-card.featured { grid-column:span 5; background:transparent; border:1px solid rgba(212,255,70,.15); display:flex; align-items:center; justify-content:space-between; padding:40px 56px; }
.srv-card.featured:hover { border-color:rgba(212,255,70,.4); background:rgba(212,255,70,.02); }
.srv-num { font-size:9px; font-weight:700; letter-spacing:.14em; color:rgba(212,255,70,.3); text-transform:uppercase; margin-bottom:24px; }
.srv-icon { width:40px; height:40px; border:1px solid rgba(212,255,70,.2); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent); transition:border-color .3s; }
.srv-card:hover .srv-icon { border-color:var(--accent); }
.srv-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.srv-name { font-size:12px; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; line-height:1.3; color:var(--white); margin-bottom:12px; }
.srv-desc { font-size:10px; font-weight:300; line-height:1.7; color:rgba(245,245,240,.4); letter-spacing:.01em; }
.srv-card.featured .srv-left .srv-num { margin-bottom:12px; }
.srv-card.featured .srv-left .srv-name { font-size:clamp(18px,2vw,26px); margin-bottom:0; }
.srv-card.featured .srv-right { display:flex; align-items:center; gap:40px; }
.srv-feat-badge { display:flex; flex-direction:column; gap:4px; padding:16px 24px; border:1px solid rgba(212,255,70,.2); text-align:center; min-width:120px; }
.sfb-val { font-size:26px; font-weight:900; color:var(--accent); letter-spacing:-.03em; }
.sfb-lbl { font-size:8px; font-weight:600; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }

/* ── PRICING ───────────────────────────────────────────────── */
.pricing-sec { padding:100px 56px; }
.pricing-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:2px; margin-top:56px; }
.price-main { background:var(--gray2); padding:56px 48px; position:relative; overflow:hidden; }
.price-main::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); }
.price-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(212,255,70,.08); border:1px solid rgba(212,255,70,.2); padding:6px 14px; margin-bottom:40px; }
.price-badge span { font-size:9px; font-weight:700; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.price-badge-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
.price-old { font-size:14px; font-weight:500; color:var(--muted); letter-spacing:.02em; text-decoration:line-through; margin-bottom:8px; }
.price-current { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.price-val { font-size:clamp(52px,6vw,80px); font-weight:900; color:var(--accent); letter-spacing:-.05em; line-height:1; }
.price-cur { font-size:20px; font-weight:700; color:var(--accent); letter-spacing:-.02em; align-self:flex-start; padding-top:12px; }
.price-period { font-size:10px; font-weight:500; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-bottom:40px; }
.price-actions { display:flex; gap:14px; flex-wrap:wrap; }
.price-checklist { background:var(--gray); padding:56px 48px; }
.pc-title { font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-bottom:32px; }
.pc-list { display:flex; flex-direction:column; gap:0; }
.pc-item { display:flex; align-items:flex-start; gap:18px; padding:16px 0; border-bottom:1px solid rgba(212,255,70,.05); font-size:11px; font-weight:400; line-height:1.5; color:rgba(245,245,240,.65); letter-spacing:.01em; }
.pc-check { color:var(--accent); flex-shrink:0; font-size:11px; margin-top:2px; }

/* ── CTA ───────────────────────────────────────────────────── */
.cta-sec { background:var(--accent); padding:100px 56px; position:relative; overflow:hidden; }
.cta-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(10,10,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.06) 1px,transparent 1px); background-size:72px 72px; pointer-events:none; }
.cta-bg-word { position:absolute; right:-40px; top:50%; transform:translateY(-50%); font-size:20vw; font-weight:900; color:rgba(10,10,10,.04); letter-spacing:-.06em; user-select:none; pointer-events:none; white-space:nowrap; }
.cta-inner { position:relative; z-index:1; }
.cta-label { font-size:10px; font-weight:600; letter-spacing:.2em; color:rgba(10,10,10,.5); text-transform:uppercase; margin-bottom:20px; display:flex; align-items:center; gap:14px; }
.cta-label::before { content:''; display:block; width:32px; height:1px; background:rgba(10,10,10,.25); }
.cta-title { font-size:clamp(40px,6vw,88px); font-weight:900; letter-spacing:-.05em; text-transform:uppercase; color:var(--black); line-height:.88; margin-bottom:40px; }
.cta-actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn-dark { font-family:'Unbounded',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--white); background:var(--black); border:none; padding:22px 48px; text-transform:uppercase; cursor:none; transition:all .3s; display:inline-block; text-decoration:none; }
.btn-dark:hover { background:var(--gray2); box-shadow:0 8px 40px rgba(0,0,0,.4); }
.btn-dark-ghost { font-family:'Unbounded',sans-serif; font-size:11px; font-weight:500; letter-spacing:.1em; color:var(--black); background:transparent; border:1px solid rgba(10,10,10,.25); padding:22px 48px; text-transform:uppercase; cursor:none; transition:all .3s; display:inline-block; text-decoration:none; }
.btn-dark-ghost:hover { border-color:var(--black); background:rgba(10,10,10,.08); }

/* ── FOOTER ────────────────────────────────────────────────── */
footer { padding:56px 56px 40px; background:var(--gray); border-top:1px solid var(--border); }
.footer-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:56px; }
.footer-logo-mark { font-size:22px; font-weight:900; letter-spacing:-.03em; margin-bottom:8px; }
.footer-logo-mark span { color:var(--accent); }
.footer-logo-sub { font-size:8px; font-weight:500; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.footer-col-title { font-size:9px; font-weight:700; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:20px; }
.footer-col a { display:block; font-size:10px; font-weight:400; letter-spacing:.08em; color:rgba(245,245,240,.5); text-decoration:none; text-transform:uppercase; margin-bottom:12px; transition:color .3s; cursor:none; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:32px; border-top:1px solid rgba(212,255,70,.05); }
.footer-copy { font-size:9px; font-weight:400; letter-spacing:.1em; color:rgba(136,136,136,.4); text-transform:uppercase; }
.footer-geo { display:flex; gap:20px; }
.footer-geo span { font-size:8px; font-weight:600; letter-spacing:.16em; color:rgba(212,255,70,.25); text-transform:uppercase; padding:4px 10px; border:1px solid rgba(212,255,70,.1); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:1100px) {
  /* Hero */
  .hero { grid-template-columns:1fr; overflow:hidden; }
  .hero-bg-word { display:none; }
  .hero-left {
    padding:100px 24px 72px;
    overflow:hidden;
    width:100%;
    box-sizing:border-box;
  }
  .hero-title {
    letter-spacing: -.02em !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .hero-desc { max-width:100%; }
  .hero-actions { flex-direction:column; gap:12px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width:100%; text-align:center; display:block; padding:16px 20px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:24px; }
  .h-stat+.h-stat { border-left:none; padding-left:0; }
  .h-stat { padding-right:0; }

  .why-sec { padding:72px 24px; }
  .why-top { grid-template-columns:1fr; gap:24px; }
  .why-grid { grid-template-columns:1fr; }
  .cases-sec { padding:72px 0; }
  .cases-header { padding:0 24px 40px; flex-direction:column; align-items:flex-start; gap:24px; }
  .cases-track-wrap { padding:0 24px; }
  .carousel-card { width:calc(100vw - 48px); }
  .cases-cta-bar { padding:32px 24px 0; flex-direction:column; gap:24px; }
  .ccb-stats { gap:32px; }
  .about-sec { padding:72px 24px; }
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .about-platforms { display:none; }
  .about-photo-block { width:100%; height:320px; }

  /* ── Process: числа поруч з кожним кроком ── */
  .process-sec { padding:72px 24px; overflow:hidden; }
  .process-header { flex-direction:column; gap:10px; }

  /* Ховаємо окремі рядки з лейблами і числами */
  .process-labels { display:none !important; }
  .process-numbers { display:none !important; }

  /* CSS-лічильник — генерує число перед кожною карткою */
  .process-cards {
    display:flex !important;
    flex-direction:column !important;
    padding-top:0 !important;
    gap:0 !important;
    counter-reset: proc-step;
  }
  .proc-card {
    display:flex !important;
    flex-direction:row !important;
    gap:20px;
    align-items:flex-start;
    border-left:none !important;
    border-bottom:1px solid rgba(212,255,70,.08);
    padding:20px 0 !important;
    margin:0 !important;
    counter-increment: proc-step;
  }
  .proc-card:last-child { border-bottom:none !important; }
  .proc-card+.proc-card { border-left:none !important; padding-left:0 !important; border-top:none !important; }

  /* Число через ::before */
  .proc-card::before {
    content: counter(proc-step, decimal-leading-zero);
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -.04em;
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
    padding-top: 2px;
  }

  /* Текст картки */
  .pc-step-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .pc-step-desc { font-size: 10px; line-height: 1.7; color:rgba(245,245,240,.45); }

  .vs-sec { padding:0 24px 72px; grid-template-columns:1fr; }
  .services-sec { padding:72px 24px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .srv-card.featured { grid-column:span 2; flex-direction:column; gap:24px; }
  .srv-card.featured .srv-right { flex-wrap:wrap; gap:16px; }
  .pricing-sec { padding:72px 24px; }
  .pricing-grid { grid-template-columns:1fr; }
  .cta-sec { padding:72px 24px; }
  footer { padding:48px 24px 32px; }
  .footer-top { flex-direction:column; gap:40px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; gap:16px; text-align:center; }
}
@media(max-width:640px) {
  .services-grid { grid-template-columns:1fr; }
  .srv-card.featured { grid-column:span 1; }
}
@media(max-width:480px) {
  .hero-left { padding:80px 16px 48px !important; }
  .hero-desc { font-size:10px; }
  .process-sec { padding:52px 16px; }
  .proc-card::before { font-size:22px; min-width:36px; }
}
@media(max-width:375px) {
  .hero-left { padding:72px 14px 36px !important; }
  .process-sec { padding:44px 14px; }
}