/* ═══════════════════════════════════════════════════════════════════
   CARDS.CSS — Portfolio soul cards, testimonials, services, pricing
   ═══════════════════════════════════════════════════════════════════ */

/* ─── BASE RESET ────────────────────────────────────────────────── */
.soul-card.portfolio-soul,
.soul-card.service-soul,
.soul-card.testimonial-soul {
  background: transparent;
  border: none;
  border-radius: 14px;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* ─── CARD SHELL ────────────────────────────────────────────────── */
.pc-inner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(6,2,2,0.88);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.25s ease, box-shadow 0.25s ease;
}
.soul-card:hover .pc-inner { transform: translateY(-9px); }

/* Per-circle glow on hover */
.circle-1  .soul-card:hover .pc-inner { border-color:rgba(80,200,60,.45);  box-shadow:0 20px 60px rgba(60,180,40,.22),  inset 0 1px 0 rgba(120,255,80,.07); }
.circle-2  .soul-card:hover .pc-inner { border-color:rgba(180,80,220,.45); box-shadow:0 20px 60px rgba(160,60,200,.22), inset 0 1px 0 rgba(200,120,255,.07); }
.circle-3  .soul-card:hover .pc-inner { border-color:rgba(80,140,220,.45); box-shadow:0 20px 60px rgba(60,120,200,.22), inset 0 1px 0 rgba(120,180,255,.07); }
.circle-4  .soul-card:hover .pc-inner { border-color:rgba(220,160,0,.50);  box-shadow:0 20px 60px rgba(200,140,0,.24),  inset 0 1px 0 rgba(255,200,60,.08); }
.circle-5  .soul-card:hover .pc-inner { border-color:rgba(255,100,0,.55);  box-shadow:0 20px 60px rgba(255,80,0,.26),   inset 0 1px 0 rgba(255,140,60,.09); }
.circle-6  .soul-card:hover .pc-inner { border-color:rgba(160,40,255,.55); box-shadow:0 20px 60px rgba(140,20,240,.26), inset 0 1px 0 rgba(200,100,255,.09); }
.circle-7  .soul-card:hover .pc-inner { border-color:rgba(255,40,40,.55);  box-shadow:0 20px 60px rgba(255,20,20,.26),  inset 0 1px 0 rgba(255,100,100,.09); }
.circle-8  .soul-card:hover .pc-inner { border-color:rgba(140,60,255,.55); box-shadow:0 20px 60px rgba(120,40,240,.26), inset 0 1px 0 rgba(180,100,255,.09); }
.circle-9  .soul-card:hover .pc-inner { border-color:rgba(80,160,255,.55); box-shadow:0 20px 60px rgba(60,140,255,.28), inset 0 1px 0 rgba(140,210,255,.10); }

/* ─── CORNER ACCENT LINES ────────────────────────────────────────── */
.pc-inner::before,
.pc-inner::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, width 0.3s ease, height 0.3s ease;
}
.pc-inner::before { top:0; left:0;  border-top:2px solid currentColor; border-left:2px solid currentColor;  border-radius:14px 0 0 0; }
.pc-inner::after  { bottom:0; right:0; border-bottom:2px solid currentColor; border-right:2px solid currentColor; border-radius:0 0 14px 0; }
.soul-card:hover .pc-inner::before,
.soul-card:hover .pc-inner::after { opacity:1; width:60px; height:60px; }
.circle-1 .soul-card:hover .pc-inner { color:rgba(80,200,60,.6); }
.circle-2 .soul-card:hover .pc-inner { color:rgba(180,80,220,.6); }
.circle-3 .soul-card:hover .pc-inner { color:rgba(80,140,220,.6); }
.circle-4 .soul-card:hover .pc-inner { color:rgba(220,160,0,.65); }
.circle-5 .soul-card:hover .pc-inner { color:rgba(255,100,0,.7); }
.circle-6 .soul-card:hover .pc-inner { color:rgba(160,40,255,.7); }
.circle-7 .soul-card:hover .pc-inner { color:rgba(255,40,40,.7); }
.circle-8 .soul-card:hover .pc-inner { color:rgba(140,60,255,.7); }
.circle-9 .soul-card:hover .pc-inner { color:rgba(80,160,255,.72); }

/* ─── IMAGE AREA ────────────────────────────────────────────────── */
.pc-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.pc-img img {
  width:100%; height:100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.soul-card:hover .pc-img img { transform: scale(1.07); }

/* Bottom gradient over image */
.pc-img::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}

/* No-image placeholder — category-colored SVG icon */
.pc-img-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
}
.pc-ph-svg { opacity:.18; transition:opacity .3s ease, transform .4s ease; }
.soul-card:hover .pc-ph-svg { opacity:.28; transform:scale(1.1) rotate(3deg); }

/* Tinted placeholder bg per circle */
.circle-1 .pc-img-ph { background:linear-gradient(135deg,rgba(20,40,12,.6),rgba(8,20,4,.8)); }
.circle-2 .pc-img-ph { background:linear-gradient(135deg,rgba(40,12,50,.6),rgba(20,4,28,.8)); }
.circle-3 .pc-img-ph { background:linear-gradient(135deg,rgba(8,20,50,.6),rgba(4,8,30,.8)); }
.circle-4 .pc-img-ph { background:linear-gradient(135deg,rgba(50,30,0,.6),rgba(28,14,0,.8)); }
.circle-5 .pc-img-ph { background:linear-gradient(135deg,rgba(60,15,0,.6),rgba(36,6,0,.8)); }
.circle-6 .pc-img-ph { background:linear-gradient(135deg,rgba(30,5,55,.6),rgba(16,2,36,.8)); }
.circle-7 .pc-img-ph { background:linear-gradient(135deg,rgba(55,5,5,.6),rgba(32,2,2,.8)); }
.circle-8 .pc-img-ph { background:linear-gradient(135deg,rgba(24,5,48,.6),rgba(12,2,28,.8)); }
.circle-9 .pc-img-ph { background:linear-gradient(135deg,rgba(0,10,30,.6),rgba(0,4,18,.8)); }

/* Badges */
.pc-play-badge {
  position:absolute; top:10px; left:10px; z-index:3;
  width:32px; height:32px;
  background:rgba(255,70,0,.88);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,140,60,.5);
  transition:transform .2s ease, background .2s ease;
}
.pc-play-badge:hover { transform:scale(1.18); background:rgba(255,100,20,1); }
.pc-play-badge svg  { margin-left:2px; }

.pc-featured-badge {
  position:absolute; top:10px; right:10px; z-index:3;
  padding:3px 9px;
  background:rgba(255,200,0,.12);
  border:1px solid rgba(255,200,0,.32);
  border-radius:999px;
  font-size:.65rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,220,80,.95);
  backdrop-filter:blur(6px);
}

/* Live / status badge */
.pc-live-badge {
  position:absolute; bottom:10px; right:10px; z-index:3;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px;
  background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.3);
  border-radius:999px;
  font-size:.65rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(80,220,160,.95);
  backdrop-filter:blur(6px);
}
.pc-live-dot {
  width:5px; height:5px;
  background:#10b981;
  border-radius:50%;
  animation:live-blink 1.4s ease-in-out infinite;
}
@keyframes live-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ─── CARD BODY ─────────────────────────────────────────────────── */
.pc-body {
  padding:1rem 1.2rem 1.1rem;
  display:flex; flex-direction:column;
  gap:0; flex:1;
}

/* Meta row: categories + year */
.pc-meta {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:.55rem; gap:.5rem;
}
.pc-cats { display:flex; gap:.3rem; flex-wrap:wrap; }
.pc-cat {
  display:inline-block;
  padding:2px 8px; border-radius:999px;
  font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent;
}
.circle-1 .pc-cat { background:rgba(80,200,60,.1);   color:#6ae050; border-color:rgba(80,200,60,.2); }
.circle-2 .pc-cat { background:rgba(180,80,220,.1);  color:#cc80ff; border-color:rgba(180,80,220,.2); }
.circle-3 .pc-cat { background:rgba(80,140,220,.1);  color:#80bbff; border-color:rgba(80,140,220,.2); }
.circle-4 .pc-cat { background:rgba(220,160,0,.1);   color:#ffcc40; border-color:rgba(220,160,0,.2); }
.circle-5 .pc-cat { background:rgba(255,100,0,.1);   color:#ff9950; border-color:rgba(255,100,0,.2); }
.circle-6 .pc-cat { background:rgba(160,40,255,.1);  color:#cc80ff; border-color:rgba(160,40,255,.2); }
.circle-7 .pc-cat { background:rgba(255,40,40,.1);   color:#ff8080; border-color:rgba(255,40,40,.2); }
.circle-8 .pc-cat { background:rgba(140,60,255,.1);  color:#bb88ff; border-color:rgba(140,60,255,.2); }
.circle-9 .pc-cat { background:rgba(80,160,255,.1);  color:#88ccff; border-color:rgba(80,160,255,.2); }

.pc-year {
  font-size:.65rem; color:rgba(180,165,150,.4);
  text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; white-space:nowrap;
  font-family:'JetBrains Mono',monospace;
}

/* Title */
.pc-title {
  font-size:1rem; font-weight:700;
  color:rgba(255,245,235,.96);
  line-height:1.3; margin-bottom:.5rem;
  letter-spacing:-.015em;
}

/* Excerpt */
.pc-excerpt {
  font-size:.82rem;
  color:rgba(205,185,165,.62);
  line-height:1.62;
  margin-bottom:.8rem;
  flex:1;
}

/* Tech tags */
.pc-tags {
  display:flex; flex-wrap:wrap;
  gap:.28rem; margin-bottom:.8rem;
}
.pc-tag {
  font-size:.63rem;
  font-family:'JetBrains Mono',monospace;
  padding:2px 7px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:4px;
  color:rgba(195,182,170,.55);
  transition:border-color .2s, color .2s;
}
.soul-card:hover .pc-tag { border-color:rgba(255,255,255,.12); color:rgba(215,202,190,.72); }

/* Stat row (lines of code, stars, etc.) */
.pc-stats {
  display:flex; gap:1rem;
  margin-bottom:.8rem;
}
.pc-stat {
  display:flex; align-items:center; gap:.35rem;
  font-size:.7rem;
  color:rgba(180,165,150,.45);
}
.pc-stat svg { opacity:.55; flex-shrink:0; }

/* Divider */
.pc-divider {
  height:1px;
  background:rgba(255,255,255,.04);
  margin-bottom:.8rem;
}

/* Footer */
.pc-footer {
  display:flex; gap:.45rem;
  align-items:center; flex-wrap:wrap;
}
.pc-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:.38rem .85rem;
  border-radius:7px;
  font-size:.74rem; font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  border:1px solid transparent;
  transition:all .18s ease;
}
.pc-btn-primary {
  background:rgba(255,100,0,.16);
  color:rgba(255,155,70,.95);
  border-color:rgba(255,100,0,.28);
}
.pc-btn-primary:hover {
  background:rgba(255,100,0,.28);
  color:#ffcc88;
  border-color:rgba(255,120,20,.48);
  transform:translateX(2px);
}
.pc-btn-ghost {
  background:rgba(255,255,255,.04);
  color:rgba(190,182,175,.6);
  border-color:rgba(255,255,255,.07);
}
.pc-btn-ghost:hover {
  background:rgba(255,255,255,.09);
  color:rgba(225,218,212,.88);
  border-color:rgba(255,255,255,.14);
}
/* Accent primary per circle */
.circle-4 .pc-btn-primary { background:rgba(220,160,0,.14); color:#ffcc40; border-color:rgba(220,160,0,.26); }
.circle-4 .pc-btn-primary:hover { background:rgba(220,160,0,.26); }
.circle-6 .pc-btn-primary { background:rgba(160,40,255,.14); color:#cc80ff; border-color:rgba(160,40,255,.28); }
.circle-6 .pc-btn-primary:hover { background:rgba(160,40,255,.26); }
.circle-9 .pc-btn-primary { background:rgba(80,160,255,.14); color:#88ccff; border-color:rgba(80,160,255,.28); }
.circle-9 .pc-btn-primary:hover { background:rgba(80,160,255,.26); }

.pc-spacer { flex:1; }
.pc-date {
  font-size:.62rem;
  color:rgba(175,160,148,.32);
  font-family:monospace;
  letter-spacing:.04em;
}

/* ─── SERVICE CARD icon hover ────────────────────────────────────── */
.service-soul .pc-img-ph { height:100px; }
.service-soul .pc-icon-wrap {
  opacity:.35;
  transition:opacity .3s, transform .4s;
}
.service-soul:hover .pc-icon-wrap { opacity:.6; transform:scale(1.12) rotate(-4deg); }

/* ─── TESTIMONIAL CARDS ─────────────────────────────────────────── */
.testimonial-soul.soul-card {
  background:transparent; border:none; padding:0;
}
.testimonial-soul .pc-inner {
  padding:1.35rem 1.4rem;
  display:flex; flex-direction:column;
  gap:.85rem;
  background:rgba(6,2,10,.88);
}
.t-stars { display:flex; gap:3px; }
.t-star {
  width:13px; height:13px;
  background:#443020;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.t-star.lit { background:#ffcc00; }
.t-quote-mark {
  position:absolute; top:1rem; right:1.25rem;
  font-size:4rem; line-height:1;
  color:rgba(120,50,200,.1); font-style:normal;
  pointer-events:none; user-select:none;
}
.t-text {
  font-size:.85rem;
  color:rgba(210,195,222,.78);
  line-height:1.72; font-style:italic;
  position:relative; z-index:1;
}
.t-divider { height:1px; background:rgba(255,255,255,.05); }
.t-author {
  display:flex; align-items:center; gap:.7rem;
}
.t-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#5a1a8a,#2a0a40);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:700;
  color:rgba(200,150,255,.9);
  border:1.5px solid rgba(140,60,255,.25);
  flex-shrink:0;
}
.t-name    { font-size:.85rem; font-weight:700; color:rgba(220,200,255,.9); }
.t-project { font-size:.72rem; color:rgba(155,130,195,.52); margin-top:1px; }

/* ─── PRICING (Greed) ─────────────────────────────────────────────── */
.greed-plan {
  background:rgba(0,0,0,.52);
  border:1px solid rgba(200,150,0,.16);
  border-radius:10px;
  padding:1.4rem 1.2rem;
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:.45rem;
  transition:transform .28s ease, border-color .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.greed-plan:hover {
  transform:translateY(-7px) scale(1.02);
  border-color:rgba(220,160,0,.4);
  box-shadow:0 16px 44px rgba(180,120,0,.2), inset 0 1px 0 rgba(255,220,100,.08);
}
.greed-plan--hl {
  border-color:rgba(220,170,0,.38) !important;
  background:rgba(55,38,0,.38);
  box-shadow:0 0 40px rgba(180,120,0,.12);
}
.plan-name { font-size:.73rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(220,180,80,.62); font-weight:700; }
.plan-price { font-size:2.1rem; font-weight:900; color:#eecc40; letter-spacing:-.04em; line-height:1; }
.plan-price sup { font-size:.62em; vertical-align:super; opacity:.8; }
.plan-price sub { font-size:.42em; vertical-align:baseline; opacity:.52; margin-left:2px; }

/* ─── LIGHT THEME CARD OVERRIDES ─────────────────────────────────── */
[data-theme="light"] .pc-inner {
  background:rgba(20,4,4,.78);
  border-color:rgba(255,255,255,.1);
}
[data-theme="light"] .pc-title   { color:rgba(255,250,245,.97); }
[data-theme="light"] .pc-excerpt { color:rgba(215,195,175,.7); }
[data-theme="light"] .testimonial-soul .pc-inner { background:rgba(14,4,22,.82); }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:640px) {
  .pc-body  { padding:.85rem .95rem .95rem; }
  .pc-title { font-size:.95rem; }
  .pc-btn   { padding:.35rem .75rem; }
}