/* ============================================================
   CodebyCarter — credibility.css
   Three credibility-building sections:
     Portfolio (recent builds incl. shadesupaz.com)
     About Carter (human face)
     Testimonials (social proof)
   ============================================================ */

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{position:relative;overflow:hidden}
.portfolio-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px;
}
.portfolio-card-featured{grid-column:1/-1}

.portfolio-card{
  position:relative;border-radius:24px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .4s ease;
  display:flex;flex-direction:column;
}
.portfolio-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 18px 50px rgba(168,85,247,.10)}

.portfolio-preview{
  aspect-ratio:16/10;
  background:linear-gradient(160deg, #1F2937 0%, #4B5563 100%);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.portfolio-card-featured .portfolio-preview{aspect-ratio:20/9}

.portfolio-browser{
  height:28px;background:rgba(0,0,0,.45);
  display:flex;align-items:center;gap:6px;padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.portfolio-browser i{display:block;width:9px;height:9px;border-radius:50%;background:#3A3A45}
.portfolio-browser .url{
  margin-left:14px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.6);letter-spacing:.04em;
}
.portfolio-browser .live-dot{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#84CC16;font-weight:700;
}
.portfolio-browser .live-dot::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#84CC16;
  box-shadow:0 0 8px #84CC16;animation:pulse 2s ease-in-out infinite;
}

.portfolio-screenshot{
  flex:1;position:relative;overflow:hidden;
  display:grid;place-items:center;
  padding:24px;
}

/* Shades Up AZ — flagship preview */
.portfolio-shades{
  background:linear-gradient(180deg, #FAFAF7 0%, #F2EEE6 100%);
  color:#0A0A0F;
}
.portfolio-shades-content{
  width:100%;max-width:520px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.portfolio-shades-tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#5A5A66;font-weight:600;
}
.portfolio-shades-h{
  font-size:clamp(24px,3vw,40px);line-height:1;font-weight:600;letter-spacing:-.03em;color:#0A0A0F;
}
.portfolio-shades-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.portfolio-shades-row{display:flex;gap:10px;align-items:center}
.portfolio-shades-btn{
  padding:10px 16px;border-radius:99px;font-size:12.5px;font-weight:700;color:#FAFAF7;
  background:linear-gradient(135deg,#0A0A0F,#3A3A45);
}
.portfolio-shades-link{font-size:12px;color:#5A5A66;font-weight:500}
.portfolio-shades-svc{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.portfolio-shades-svc span{
  padding:5px 10px;border-radius:99px;border:1px solid rgba(10,10,15,.12);
  font-size:10.5px;font-family:'JetBrains Mono',monospace;color:#5A5A66;letter-spacing:.04em;
}

/* Generic mini-mock for other portfolio cards */
.portfolio-mini{
  width:100%;display:flex;flex-direction:column;gap:8px;
  padding:14px;border-radius:10px;
  background:#FAFAF7;color:#0A0A0F;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.portfolio-mini-tag{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#5A5A66}
.portfolio-mini-h{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.portfolio-mini-h .ital{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:linear-gradient(135deg,#A855F7,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.portfolio-mini-row{display:flex;gap:6px;align-items:center;margin-top:2px}
.portfolio-mini-btn{padding:5px 10px;border-radius:99px;background:#0A0A0F;color:#FAFAF7;font-size:9.5px;font-weight:700}
.portfolio-mini-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}
.portfolio-mini-blocks > span{aspect-ratio:1;border-radius:5px}

/* Themed preview tints per industry */
.portfolio-preview--detail{background:linear-gradient(160deg,#0A3A3A,#062229)}
.portfolio-preview--detail .portfolio-mini-blocks > span{background:linear-gradient(135deg,#06B6D4,#14B8A6)}
.portfolio-preview--detail .portfolio-mini-h .ital{background:linear-gradient(135deg,#06B6D4,#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent}

.portfolio-preview--realty{background:linear-gradient(160deg,#10182E,#0A0E1C)}
.portfolio-preview--realty .portfolio-mini-blocks > span{background:linear-gradient(135deg,#A855F7,#06B6D4)}
.portfolio-preview--realty .portfolio-mini-h .ital{background:linear-gradient(135deg,#A855F7,#06B6D4);-webkit-background-clip:text;background-clip:text;color:transparent}

.portfolio-preview--salon{background:linear-gradient(160deg,#2A0C2C,#150515)}
.portfolio-preview--salon .portfolio-mini-blocks > span{background:linear-gradient(135deg,#EC4899,#FB923C)}
.portfolio-preview--salon .portfolio-mini-h .ital{background:linear-gradient(135deg,#EC4899,#FB923C);-webkit-background-clip:text;background-clip:text;color:transparent}

.portfolio-meta{padding:26px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.portfolio-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.portfolio-name{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.1}
.portfolio-card-featured .portfolio-name{font-size:30px}
.portfolio-desc{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:4px;max-width:60ch}

.portfolio-result{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.portfolio-result-num{
  font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-feature-settings:"tnum","kern";
}
.portfolio-result-label{
  font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em;line-height:1.4;
}

.portfolio-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c2);font-weight:700;
  transition:gap .25s ease,color .25s ease;
}
.portfolio-link:hover{gap:10px;color:var(--c1)}

@media (max-width:780px){
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-card-featured .portfolio-preview{aspect-ratio:16/10}
}

/* ============================================================
   ABOUT CARTER
   ============================================================ */
.about{position:relative}
.about-grid{
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
  margin-top:60px;
}
.about-avatar{
  width:200px;height:200px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C,#06B6D4);
  background-size:200% 200%;animation:hue 6s linear infinite;
  display:grid;place-items:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:100px;color:#0A0A0F;
  box-shadow:0 30px 80px rgba(168,85,247,.40), inset 0 0 0 4px rgba(255,255,255,.20);
  position:relative;
}
.about-avatar::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C,#06B6D4);
  background-size:200% 200%;animation:hue 8s linear infinite;
  filter:blur(30px);opacity:.45;z-index:-1;
}

.about-text{max-width:62ch;color:var(--text)}
.about-h{font-size:clamp(32px,5vw,52px);line-height:1.02;letter-spacing:-.03em;font-weight:600;margin-bottom:18px}
.about-h .ital{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:linear-gradient(135deg,#A855F7,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-p{font-size:17px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.about-p b{color:var(--text);font-weight:600}
.about-p em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--text)}
.about-stats{display:flex;gap:32px;margin-top:26px;padding-top:24px;border-top:1px solid var(--border)}
.about-stat-num{font-size:28px;font-weight:700;letter-spacing:-.025em;color:var(--text);font-feature-settings:"tnum"}
.about-stat-num .ital{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:linear-gradient(135deg,#A855F7,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-stat-label{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.about-cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px}

@media (max-width:780px){
  .about-grid{grid-template-columns:1fr;gap:32px;text-align:left}
  .about-avatar{width:140px;height:140px;font-size:70px}
  .about-stats{flex-wrap:wrap;gap:20px}
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{position:relative;overflow:hidden}
.testimonials-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
  margin-top:50px;
}
.testimonial{
  padding:28px 26px 24px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);
  position:relative;display:flex;flex-direction:column;gap:18px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .35s ease;
}
.testimonial:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.testimonial::before{
  content:"\201C";position:absolute;top:8px;right:18px;
  font-size:72px;font-family:'Instrument Serif',serif;color:var(--c2);opacity:.22;
  line-height:1;
}
.testimonial-quote{
  font-size:15.5px;line-height:1.55;color:var(--text);
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  position:relative;z-index:1;
}
.testimonial-foot{display:flex;align-items:center;gap:12px;margin-top:auto}
.testimonial-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;color:#0A0A0F;font-weight:700;font-size:15px;
  letter-spacing:-.01em;
}
.testimonial-avatar--1{background:linear-gradient(135deg,#A855F7,#EC4899)}
.testimonial-avatar--2{background:linear-gradient(135deg,#06B6D4,#14B8A6)}
.testimonial-avatar--3{background:linear-gradient(135deg,#FB923C,#F43F5E)}
.testimonial-avatar--4{background:linear-gradient(135deg,#84CC16,#22D3EE)}
.testimonial-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.testimonial-name{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.005em}
.testimonial-biz{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.testimonial-metric{
  display:inline-block;align-self:flex-start;
  padding:5px 10px;border-radius:99px;
  background:rgba(132,204,22,.10);border:1px solid rgba(132,204,22,.30);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;
  color:#84CC16;font-weight:700;
}

@media (max-width:480px){
  .testimonials-grid{grid-template-columns:1fr}
}