/* ===== Social portfolio showcase + nav pill ===== */

.ss-nav-new {
  margin-left: 0.45rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #dc8215;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: middle;
  animation: ss-pop 2.6s ease-in-out infinite;
}

.ss-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5.5rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #120c40 0%, #1d155b 50%, #2d2487 100%);
}

.ss-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.ss-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: ss-drift 16s ease-in-out infinite;
}

.ss-orb-1 { width: 420px; height: 420px; left: -120px; top: -100px; background: #dc8215; }
.ss-orb-2 { width: 380px; height: 380px; right: -100px; bottom: -120px; background: #d62976; animation-delay: -6s; }

.ss-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}

.ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ss-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: ss-pulse 2s infinite;
}

.ss-title {
  margin: 1.1rem 0 1rem;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.ss-grad {
  background: linear-gradient(100deg, #ffb347, #ff5c9d 60%, #b57bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ss-text {
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.ss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  font-weight: 600;
}

.ss-chip span,
.ss-float {
  display: grid;
  place-items: center;
}

.ss-chip span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.ss-chip svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.ss-fb { background: #1877f2; }
.ss-ig { background: linear-gradient(135deg, #feda75, #d62976, #962fbf, #4f5bd5); }
.ss-li { background: #0a66c2; }
.ss-ad { background: linear-gradient(135deg, #dc8215, #1d155b); }

.ss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.ss-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ss-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.ss-btn-primary {
  color: #1d155b;
  background: linear-gradient(100deg, #dc8215, #ffb347);
  box-shadow: 0 18px 34px -14px rgba(255, 179, 71, 0.75);
  animation: ss-glow 2.8s ease-out infinite;
}

.ss-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px -14px rgba(255, 179, 71, 0.9);
  animation-play-state: paused;
}

.ss-btn-primary:hover svg { transform: translate(3px, -3px); }

.ss-btn-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ss-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* --- visual --- */

.ss-visual {
  position: relative;
  padding: 2rem 1rem 3rem;
}

.ss-laptop {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: perspective(1400px) rotateY(-9deg) rotateX(4deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: ss-float 7s ease-in-out infinite;
}

.ss-laptop:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0) scale(1.02);
}

.ss-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  background: #f1ecf9;
}

.ss-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6159; }
.ss-bar i:nth-child(2) { background: #ffbd2e; }
.ss-bar i:nth-child(3) { background: #28c940; }

.ss-bar em {
  flex: 1;
  margin-left: 0.6rem;
  padding: 0.15rem 0.6rem;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  font-style: normal;
  font-size: 0.7rem;
  color: #6b667f;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ss-laptop img,
.ss-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.ss-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: ss-sweep 5.5s ease-in-out infinite;
}

.ss-phone {
  position: absolute;
  left: -0.8rem;
  bottom: -0.4rem;
  width: 27%;
  max-width: 180px;
  padding: 6px;
  border-radius: 26px;
  background: #0d0a2b;
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: rotate(-5deg);
  animation: ss-float-2 6s ease-in-out infinite;
}

.ss-phone img { border-radius: 21px; }

.ss-float {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  box-shadow: 0 20px 34px -12px rgba(0, 0, 0, 0.55);
  animation: ss-bob 5s ease-in-out infinite;
}

.ss-float svg { width: 26px; height: 26px; fill: #fff; }
.ss-f1 { top: 0; left: 2%; }
.ss-f2 { top: 4%; right: 6%; animation-delay: -1.6s; }
.ss-f3 { bottom: 5%; right: 7%; animation-delay: -3.2s; }
.ss-f4 { top: 42%; right: -2%; animation-delay: -4.2s; }

/* --- reveal on scroll (only when JS is running) --- */

.js-ss .ss-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-ss .ss-reveal.is-in {
  opacity: 1;
  transform: none;
}

.js-ss .ss-visual.ss-reveal { transition-delay: 0.15s; }

/* --- keyframes --- */

@keyframes ss-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, 40px); } }
@keyframes ss-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes ss-float-2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes ss-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes ss-sweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ss-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes ss-glow { 0% { box-shadow: 0 18px 34px -14px rgba(255, 179, 71, 0.75), 0 0 0 0 rgba(255, 179, 71, 0.5); } 70% { box-shadow: 0 18px 34px -14px rgba(255, 179, 71, 0.75), 0 0 0 16px rgba(255, 179, 71, 0); } 100% { box-shadow: 0 18px 34px -14px rgba(255, 179, 71, 0.75), 0 0 0 0 rgba(255, 179, 71, 0); } }
@keyframes ss-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* --- responsive --- */

@media (max-width: 960px) {
  .ss-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ss-copy { text-align: center; }
  .ss-text { margin-left: auto; margin-right: auto; }
  .ss-chips, .ss-actions { justify-content: center; }
  .ss-visual { max-width: 580px; margin: 0 auto; width: 100%; }
}

@media (max-width: 560px) {
  .ss-section { padding: 4rem 1rem; }
  .ss-visual { padding: 1.5rem 0.4rem 2.5rem; }
  .ss-laptop { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); }
  .ss-phone { width: 34%; left: -0.2rem; }
  .ss-float { width: 42px; height: 42px; border-radius: 14px; }
  .ss-float svg { width: 20px; height: 20px; }
  .ss-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-orb, .ss-dot, .ss-btn-primary, .ss-laptop, .ss-phone, .ss-float, .ss-shine, .ss-nav-new { animation: none; }
  .js-ss .ss-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Footer grid ===== */

.sh-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.sh-footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .sh-footer-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2.5rem;
  }

  .sh-footer-brand {
    grid-column: auto;
  }
}