/* ============================================================
   InfyTech — V2 Editorial / Paper / Premium Project Cards
   Hybrid light "paper" sections + real-screenshot project cards.
   Additive. GPU-only motion. Reduced-motion safe.
   ============================================================ */

/* ---------- Paper (light editorial) section ---------- */
.section-paper{ background:#FFFFFF; color:#0E1C2F; position:relative; }
.section-paper .eyebrow{ color:#2563eb; }
.section-paper .h-lg,.section-paper h2,.section-paper h3,.section-paper h4,.section-paper h5{ color:#0E1C2F; }
.section-paper .section-head p,.section-paper p.lead,.section-paper > .container > .section-head p{ color:#475569; }
/* soft seam between dark and paper */
.section-paper::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(7,17,31,0.08),transparent); }

/* ---------- Premium project card: real screenshot in a browser frame ---------- */
.proj-v2{ background:#fff; border-radius:24px; overflow:hidden; border:1px solid rgba(7,17,31,0.07);
  box-shadow:0 36px 80px rgba(7,17,31,0.13), 0 4px 12px rgba(7,17,31,0.06); margin-bottom:46px; }
.proj-v2:last-child{ margin-bottom:0; }

.proj-v2-shot{ position:relative; }
.proj-v2-bar{ display:flex; align-items:center; padding:12px 18px; background:#0b1626; border-bottom:1px solid rgba(255,255,255,0.06); }
.proj-v2-bar i{ width:11px; height:11px; border-radius:50%; margin-right:7px; display:inline-block; }
.proj-v2-bar i.r{ background:#ff5f57; } .proj-v2-bar i.y{ background:#febc2e; } .proj-v2-bar i.g{ background:#28c840; }
.proj-v2-bar .url{ margin:0 auto; display:flex; align-items:center; gap:7px; min-width:200px; max-width:340px;
  font-family:var(--font-mono); font-size:11px; color:#8aa0bd; background:#0a1322; border:1px solid rgba(255,255,255,0.07);
  border-radius:8px; padding:6px 14px; }
.proj-v2-bar .url svg{ width:11px; height:11px; stroke:#5b7da0; fill:none; stroke-width:1.8; }

.proj-v2-img{ position:relative; overflow:hidden; aspect-ratio:1400/770; background:#0E1C2F; }
.proj-v2-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform 1s cubic-bezier(0.16,1,0.3,1); will-change:transform; }
.proj-v2:hover .proj-v2-img img{ transform:scale(1.05); }
.proj-v2-overlay{ position:absolute; left:0; right:0; bottom:0; padding:24px 26px; display:flex; align-items:flex-end; gap:16px;
  background:linear-gradient(0deg, rgba(7,17,31,0.82) 0%, rgba(7,17,31,0.34) 52%, rgba(7,17,31,0) 100%); }
.proj-v2-chip{ width:56px; height:56px; border-radius:14px; background:#fff; display:grid; place-items:center;
  flex:0 0 56px; box-shadow:0 8px 22px rgba(0,0,0,0.34); }
.proj-v2-chip.dark{ background:#0E1C2F; border:1px solid rgba(255,255,255,0.16); }
.proj-v2-chip img{ max-width:40px; max-height:40px; object-fit:contain; }
.proj-v2-titles h3{ color:#fff; font-size:22px; line-height:1.15; margin:0 0 4px; font-family:var(--font-display); }
.proj-v2-ind{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:#7dd3fc; text-transform:uppercase; }

.proj-v2-body{ padding:32px 34px 34px; }
.proj-v2-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.proj-v2-cell h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase;
  color:#2563eb; margin:0 0 9px; }
.proj-v2-cell p{ font-size:14px; line-height:1.62; color:#475569; margin:0; }
.proj-v2-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:1px solid rgba(7,17,31,0.09); }
.proj-v2-cta .pl{ font-size:13px; color:#64748b; }
.proj-v2-cta .pl b{ color:#0E1C2F; font-weight:600; }

/* ink button for paper sections */
.btn-ink{ background:#0E1C2F; color:#fff; padding:13px 26px; border-radius:100px; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .3s; white-space:nowrap; }
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,28,47,0.32); }

/* ---------- Cinematic reveal: screenshot "placed onto paper" ---------- */
.proj-v2.scroll-reveal{ opacity:1; transform:none; }   /* card itself doesn't fade; the shot does the reveal */
.proj-v2 .proj-v2-shot{ clip-path: inset(7% 5% 7% 5% round 18px); opacity:0;
  transition: clip-path 1s cubic-bezier(0.16,1,0.3,1), opacity .8s ease; }
.proj-v2.in-view .proj-v2-shot{ clip-path: inset(0% 0% 0% 0% round 0px); opacity:1; }
.proj-v2 .proj-v2-body{ opacity:0; transform:translateY(16px); transition:opacity .7s ease .25s, transform .7s cubic-bezier(.16,1,.3,1) .25s; }
.proj-v2.in-view .proj-v2-body{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .proj-v2{ border-radius:18px; margin-bottom:30px; }
  .proj-v2-cols{ grid-template-columns:1fr; gap:20px; }
  .proj-v2-body{ padding:22px; }
  .proj-v2-overlay{ padding:16px; gap:12px; }
  .proj-v2-chip{ width:46px; height:46px; flex-basis:46px; border-radius:12px; }
  .proj-v2-chip img{ max-width:32px; max-height:32px; }
  .proj-v2-titles h3{ font-size:17px; }
  .proj-v2-bar .url{ min-width:120px; font-size:10px; }
  .proj-v2-cta{ justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .proj-v2 .proj-v2-img img{ transition:none; }
  .proj-v2 .proj-v2-shot{ clip-path:none !important; opacity:1 !important; transition:none; }
  .proj-v2 .proj-v2-body{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   V2 Phase 2/3 — homepage: compact project cards, CTA, hero
   ============================================================ */

/* ---------- Compact real-screenshot cards (homepage Featured grid) ---------- */
.proj-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.proj-mini{ background:#fff; border-radius:18px; overflow:hidden; border:1px solid rgba(7,17,31,0.07);
  box-shadow:0 24px 54px rgba(7,17,31,0.10), 0 2px 6px rgba(7,17,31,0.05); display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
.proj-mini:hover{ transform:translateY(-6px); box-shadow:0 40px 78px rgba(7,17,31,0.17); }
.proj-mini-shot{ position:relative; }
.proj-mini-bar{ display:flex; align-items:center; padding:9px 13px; background:#0b1626; }
.proj-mini-bar i{ width:8px; height:8px; border-radius:50%; margin-right:5px; }
.proj-mini-bar i.r{ background:#ff5f57; } .proj-mini-bar i.y{ background:#febc2e; } .proj-mini-bar i.g{ background:#28c840; }
.proj-mini-img{ position:relative; overflow:hidden; aspect-ratio:1400/812; background:#0E1C2F; }
.proj-mini-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1); }
.proj-mini:hover .proj-mini-img img{ transform:scale(1.06); }
.proj-mini-overlay{ position:absolute; left:0; right:0; bottom:0; padding:15px 16px; display:flex; align-items:center; gap:11px;
  background:linear-gradient(0deg, rgba(7,17,31,0.88) 0%, rgba(7,17,31,0.28) 58%, transparent 100%); }
.proj-mini-chip{ width:40px; height:40px; border-radius:10px; background:#fff; display:grid; place-items:center; flex:0 0 40px;
  box-shadow:0 5px 14px rgba(0,0,0,0.32); }
.proj-mini-chip.dark{ background:#0E1C2F; border:1px solid rgba(255,255,255,0.16); }
.proj-mini-chip img{ max-width:28px; max-height:28px; object-fit:contain; }
.proj-mini-titles h3{ color:#fff; font-size:15.5px; margin:0 0 2px; line-height:1.18; font-family:var(--font-display); }
.proj-mini-ind{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.05em; color:#7dd3fc; text-transform:uppercase; }
.proj-mini-body{ padding:17px 19px 19px; display:flex; flex-direction:column; gap:13px; flex:1; }
.proj-mini-body p{ font-size:13px; line-height:1.56; color:#475569; margin:0; flex:1; }
.proj-mini-link{ font-size:13px; font-weight:600; color:#0E1C2F; display:inline-flex; align-items:center; gap:6px;
  transition:gap .2s ease; align-self:flex-start; }
.proj-mini:hover .proj-mini-link{ gap:10px; }
/* reveal: screenshots ease onto paper */
.proj-mini.scroll-reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.proj-mini.scroll-reveal.in-view{ opacity:1; transform:none; }
@media(max-width:860px){ .proj-mini-grid{ grid-template-columns:1fr; gap:20px; } }

/* ---------- Final CTA: premium paper card, layered, floating screenshot ---------- */
.cta-v2{ position:relative; border-radius:30px; padding:62px 58px; overflow:hidden;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:46px; align-items:center;
  background:linear-gradient(135deg,#ffffff 0%, #eaf1fb 100%);
  box-shadow:0 50px 110px rgba(7,17,31,0.16); border:1px solid rgba(255,255,255,0.8); }
.cta-v2::before{ content:""; position:absolute; width:440px; height:440px; right:-130px; top:-150px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,174,239,0.20), transparent 64%); pointer-events:none; }
.cta-v2::after{ content:""; position:absolute; width:380px; height:380px; left:-140px; bottom:-170px; border-radius:50%;
  background:radial-gradient(circle, rgba(123,97,255,0.18), transparent 64%); pointer-events:none; }
.cta-v2-content{ position:relative; z-index:3; }
.cta-v2-content .eyebrow{ color:#2563eb; }
.cta-v2-content h2{ color:#0E1C2F; font-size:clamp(28px,3.4vw,46px); line-height:1.07; margin:16px 0 18px; font-family:var(--font-display); }
.cta-v2-content p{ color:#475569; font-size:16px; line-height:1.62; margin:0 0 30px; max-width:450px; }
.cta-v2-visual{ position:relative; z-index:3; min-height:240px; }
.cta-v2-panel{ position:absolute; inset:18px 0 0 28px; border-radius:16px; background:linear-gradient(135deg,#dbe6f5,#eef3fb);
  box-shadow:0 18px 40px rgba(7,17,31,0.08); transform:rotate(4deg); }
.cta-v2-float{ position:relative; border-radius:14px; overflow:hidden; transform:rotate(-3deg);
  box-shadow:0 44px 88px rgba(7,17,31,0.30); border:1px solid rgba(7,17,31,0.12); background:#0b1626; }
.cta-v2-float .b{ display:flex; padding:8px 12px; background:#0b1626; }
.cta-v2-float .b i{ width:8px; height:8px; border-radius:50%; margin-right:5px; }
.cta-v2-float .b i.r{ background:#ff5f57; } .cta-v2-float .b i.y{ background:#febc2e; } .cta-v2-float .b i.g{ background:#28c840; }
.cta-v2-float img{ width:100%; display:block; }
@media(max-width:860px){ .cta-v2{ grid-template-columns:1fr; padding:42px 26px; gap:30px; }
  .cta-v2-visual{ display:none; } }

/* ---------- Hero: bigger type, more breathing room (expensive/effortless) ---------- */
.hero .h-hero{ font-size:clamp(42px, 6.2vw, 78px); line-height:1.03; letter-spacing:-0.025em; }
.hero .lead{ font-size:clamp(17px,1.45vw,20px); line-height:1.6; max-width:600px; margin-left:auto; margin-right:auto; }
.hero .container{ padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(40px,5vw,64px); }
.hero .btn-row{ margin-top:34px; }
.hero .hero-dashboard{ margin-top:clamp(44px,6vw,72px); }

/* ---------- Industry heroes without dashboard: clean centered editorial ---------- */
.svc-hero.solo{ display:block !important; max-width:860px; margin-left:auto; margin-right:auto; text-align:center; }
.svc-hero.solo .lead{ margin-left:auto; margin-right:auto; max-width:660px; }
.svc-hero.solo .btn-row{ justify-content:center; }
.svc-hero.solo .eyebrow{ display:block; }
.page-head:has(.svc-hero.solo){ padding-bottom:clamp(56px,7vw,96px); }

/* ---------- Client feedback: minimal premium quote cards (paper) ---------- */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote-card{ background:#fff; border:1px solid rgba(7,17,31,0.08); border-radius:18px; padding:32px 28px;
  box-shadow:0 18px 44px rgba(7,17,31,0.07); display:flex; flex-direction:column; gap:22px; position:relative; overflow:hidden; }
.quote-card::before{ content:"\201C"; font-family:Georgia,'Times New Roman',serif; font-size:64px; line-height:1;
  color:rgba(37,99,235,0.16); position:absolute; top:14px; right:22px; }
.quote-text{ font-size:15.5px; line-height:1.62; color:#334155; margin:0; font-style:italic; flex:1; position:relative; z-index:1; }
.quote-by{ border-top:1px solid rgba(7,17,31,0.08); padding-top:16px; }
.quote-role{ font-weight:700; color:#0E1C2F; font-size:14px; }
.quote-co{ font-size:13px; color:#64748b; margin-top:2px; }
@media(max-width:860px){ .quote-grid{ grid-template-columns:1fr; gap:18px; } }

/* ============================================================
   FINAL POLISH — large editorial typography + dominant screenshots
   ============================================================ */
.h-lg{ font-size:clamp(36px, 5.6vw, 78px) !important; line-height:1.04 !important; letter-spacing:-0.024em !important; }
.h-xl{ font-size:clamp(40px, 7vw, 98px) !important; line-height:1.02 !important; letter-spacing:-0.03em !important; }
.h-hero{ font-size:clamp(46px, 8vw, 112px) !important; line-height:1.0 !important; letter-spacing:-0.034em !important; }
@media(max-width:760px){
  .h-lg{ font-size:clamp(29px,8vw,40px) !important; }
  .h-xl{ font-size:clamp(33px,9vw,46px) !important; }
  .h-hero{ font-size:clamp(37px,10vw,54px) !important; }
}
/* Portfolio screenshots dominate — show the full site at natural ratio */
.proj-v2-img{ aspect-ratio:auto !important; }
.proj-v2-img img{ position:relative !important; inset:auto !important; width:100% !important; height:auto !important; object-fit:initial !important; }
/* Homepage preview screenshots — taller */
.proj-mini-img{ aspect-ratio:1400/920 !important; }

/* ============================================================
   Editorial split case studies (Buzz/Stripe/Linear) — real screenshots
   Screenshot one side, label + title + Problem/Solution/Outcome + CTA other.
   Alternates direction; stacks on mobile.
   ============================================================ */
.proj-v2{ display:grid !important; grid-template-columns:1.06fr 0.94fr; gap:clamp(34px,4.4vw,70px);
  align-items:center; margin-bottom:clamp(64px,8vw,124px); background:transparent !important;
  border:0 !important; padding:0 !important; }
.proj-v2:last-child{ margin-bottom:0; }
.proj-v2-rev{ grid-template-columns:0.94fr 1.06fr; }
.proj-v2-rev .proj-v2-stage{ order:2; }
.proj-v2-rev .proj-v2-body{ order:1; }
.proj-v2-shot{ box-shadow:0 34px 80px rgba(5,5,5,0.14) !important; border-radius:14px; overflow:hidden; }
.proj-v2-body{ display:flex !important; flex-direction:column; gap:clamp(18px,2.2vw,28px); padding:0 !important; }
.cs-head{ display:flex; flex-direction:column; gap:6px; }
.cs-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#2563eb; }
.cs-title{ font-size:clamp(28px,3.1vw,46px); line-height:1.03; letter-spacing:-0.025em; margin:0; color:#050505; }
.proj-v2-cols{ display:flex !important; flex-direction:column; gap:16px; grid-template-columns:none !important; }
.proj-v2-cell h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#2563eb; margin:0 0 4px; }
.proj-v2-cell p{ margin:0; color:#555; line-height:1.55; }
.proj-v2-cta{ margin-top:6px; }
@media(max-width:900px){
  .proj-v2, .proj-v2-rev{ grid-template-columns:1fr !important; gap:24px; }
  .proj-v2-rev .proj-v2-stage{ order:0; }
  .proj-v2-rev .proj-v2-body{ order:0; }
  .cs-title{ font-size:clamp(26px,7vw,34px); }
}

/* ============================================================
   Text-forward editorial rows (Buzz/Stripe/Linear) — no imagery
   Lead side: number + oversized title + benefit + CTA.
   Detail side: structured spec card (what/problem/approach/outcome + caps).
   Alternates direction; stacks on mobile. CSS-only reveal.
   ============================================================ */
.ed-rows{ display:flex; flex-direction:column; gap:clamp(58px,7.2vw,112px); }
.ed-row{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(34px,4.4vw,76px); align-items:center; }
.ed-row-rev .ed-lead{ order:2; }
.ed-row-rev .ed-detail{ order:1; }
.ed-num{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; color:#2563eb; }
.ed-title{ font-size:clamp(30px,3.5vw,54px); line-height:1.02; letter-spacing:-0.03em; margin:12px 0 16px; color:#050505; }
.ed-copy{ font-size:clamp(16px,1.25vw,19px); line-height:1.58; color:#555; max-width:430px; margin:0 0 26px; }
.ed-cta{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:#050505; transition:gap .2s ease, color .2s ease; }
.ed-cta:hover{ gap:12px; color:#2563eb; }
.ed-detail{ background:#fff; border:1px solid rgba(5,5,5,0.08); border-radius:20px;
  box-shadow:0 18px 50px rgba(5,5,5,0.06); padding:clamp(24px,2.8vw,38px); }
.ed-block{ padding:17px 0; border-top:1px solid rgba(5,5,5,0.07); }
.ed-block:first-child{ border-top:0; padding-top:0; }
.ed-block .l{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#2563eb; margin-bottom:6px; }
.ed-block p{ margin:0; color:#3A4453; line-height:1.55; font-size:15.5px; }
.ed-caps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:19px; border-top:1px solid rgba(5,5,5,0.07); }
.ed-cap{ font-size:12.5px; color:#555; background:#F2F5FA; border:1px solid rgba(5,5,5,0.06); border-radius:100px; padding:6px 13px; }
@media(max-width:880px){
  .ed-row, .ed-row-rev{ grid-template-columns:1fr !important; gap:24px; }
  .ed-row-rev .ed-lead{ order:0; } .ed-row-rev .ed-detail{ order:0; }
  .ed-title{ font-size:clamp(28px,8vw,38px); }
  .ed-copy{ max-width:none; }
}

/* editorial spec-card bullet list */
.ed-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ed-list li{ position:relative; padding-left:22px; color:#3A4453; line-height:1.5; font-size:15.5px; }
.ed-list li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px;
  background:linear-gradient(135deg,var(--blue),var(--purple)); }

/* ============================================================
   About page — principles grid, process flow, CTA (light editorial)
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,3.6vw,56px); }
.about-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.about-item .ai-num{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; color:#2563eb; display:block; margin-bottom:14px; }
.about-item h3{ font-size:clamp(22px,2.2vw,30px); letter-spacing:-0.02em; line-height:1.1; margin:0 0 10px; color:#050505; }
.about-item p{ color:#555; line-height:1.6; margin:0; max-width:440px; font-size:16px; }
.about-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px); }
.about-step .as-num{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(5,5,5,0.12);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px;
  color:#2563eb; margin-bottom:18px; background:#fff; box-shadow:0 6px 18px rgba(5,5,5,0.05); }
.about-step h4{ font-size:18px; margin:0 0 8px; color:#050505; letter-spacing:-0.01em; }
.about-step p{ font-size:14.5px; color:#555; line-height:1.55; margin:0; }
.about-cta{ text-align:center; max-width:780px; margin:0 auto; }
.about-cta p{ color:#555; font-size:clamp(16px,1.3vw,19px); line-height:1.6; max-width:560px; margin:14px auto 28px; }
@media(max-width:820px){ .about-grid, .about-grid.cols-3, .about-flow{ grid-template-columns:1fr !important; gap:30px; } }

/* ============================================================
   PORTFOLIO SHOWCASE GRID — visual-first agency cards (white theme)
   ============================================================ */
.showcase{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.showcase .show-card:first-child{ grid-column:1 / -1; }
.show-card{ display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  border-radius:22px; background:#FFFFFF; border:1px solid rgba(5,5,5,0.07);
  box-shadow:0 10px 40px rgba(10,10,10,0.06); padding:20px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease; }
.show-card:hover{ transform:translateY(-6px); border-color:rgba(123,97,255,0.22);
  box-shadow:0 30px 70px rgba(10,10,10,0.12), 0 0 0 1px rgba(123,97,255,0.06); }
.show-card::before{ content:""; position:absolute; inset:-18% -10% 38% -10%; z-index:0; pointer-events:none;
  background:radial-gradient(55% 60% at 50% 28%, rgba(123,97,255,0.16), rgba(123,97,255,0) 70%);
  opacity:0; transition:opacity .45s ease; filter:blur(8px); }
.show-card:hover::before{ opacity:1; }
.show-shot{ position:relative; z-index:1; border-radius:14px; overflow:hidden;
  border:1px solid rgba(5,5,5,0.08); background:#0E1A2C;
  box-shadow:0 18px 50px rgba(10,10,10,0.14); transform-style:preserve-3d; transition:box-shadow .4s ease; }
.show-card:hover .show-shot{ box-shadow:0 30px 72px rgba(10,10,10,0.20); }
.show-bar{ display:flex; align-items:center; gap:7px; padding:11px 15px; background:#0B1524; border-bottom:1px solid rgba(255,255,255,0.06); }
.show-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.18); flex-shrink:0; }
.show-bar i.r{ background:#ff5f57; } .show-bar i.y{ background:#febc2e; } .show-bar i.g{ background:#28c840; }
.show-bar .url{ flex:1; min-width:0; text-align:center; font-family:var(--font-mono); font-size:11.5px;
  color:rgba(255,255,255,0.5); background:rgba(0,0,0,0.28); border-radius:6px; padding:4px 12px; margin:0 8px;
  display:inline-flex; align-items:center; gap:7px; justify-content:center; white-space:nowrap; overflow:hidden; }
.show-bar .url svg{ width:12px; height:12px; stroke:rgba(255,255,255,0.4); fill:none; stroke-width:2; flex-shrink:0; }
.show-img{ overflow:hidden; aspect-ratio:16/10; background:#0E1A2C; }
.show-img img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.show-card:hover .show-img img{ transform:scale(1.05); }
.show-shot::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(116deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 58%);
  opacity:0; transform:translateX(-26%); transition:opacity .5s ease, transform .85s ease; }
.show-card:hover .show-shot::after{ opacity:1; transform:translateX(26%); }
.show-meta{ position:relative; z-index:1; padding:22px 8px 4px; }
.show-ind{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:#7B61FF; font-weight:600; }
.show-name{ font-size:clamp(22px,2.3vw,30px); font-weight:700; letter-spacing:-0.02em; margin:10px 0 8px; color:#0A0A0A; line-height:1.1; }
.show-sum{ font-size:15px; line-height:1.55; color:#5A6678; margin:0 0 16px; }
.show-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.show-chips span{ font-size:12px; font-weight:500; color:#41506A; background:#F7F8FB; border:1px solid rgba(5,5,5,0.06); border-radius:100px; padding:6px 13px; }
.show-cta{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:#0A0A0A; transition:gap .25s ease, color .25s ease; }
.show-card:hover .show-cta{ gap:12px; color:#7B61FF; }
@media (min-width:900px){
  .show-card:first-child{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:36px; align-items:center; padding:24px; }
  .show-card:first-child .show-meta{ padding:0 14px 0 4px; }
  .show-card:first-child .show-sum{ font-size:16px; }
}
@media (max-width:880px){ .showcase{ grid-template-columns:1fr; gap:22px; } .showcase .show-card:first-child{ grid-column:auto; } }
@media (prefers-reduced-motion:reduce){ .show-card:hover .show-img img{ transform:none !important; } }