/* Cool silver and deep teal theme. Project artwork and Suham's portrait retain their source colors. */
:root { --silver-0: #f4f7f6; --silver-1: #e9efed; --silver-2: #c9d4d3; --ink: #142124; --teal: #0d665d; --teal-bright: #4fb6a4; }
::selection, .elenavoss-body ::selection { color: var(--ink) !important; background: #aad7cf !important; }
::-webkit-scrollbar-thumb { background: #8eaaa7 !important; }
::-webkit-scrollbar-thumb:hover { background: var(--teal) !important; }

/* Keep the hero's real portrait sharp; recolor its separate atmospheric backdrop. */
.hero-container { background: #aebbbd !important; }
.suham-hero-background { filter: grayscale(1) saturate(.2) contrast(1.04) brightness(1.08) !important; }
.hero-container::before { background: linear-gradient(90deg, rgba(15,37,41,.30), transparent 39%, rgba(9,34,40,.18)) !important; }
.hero-golden-aura { background: radial-gradient(ellipse at 50% 30%, rgba(233,249,245,.24), transparent 75%) !important; }
.suham-hero-features li:hover { background: linear-gradient(110deg, rgba(8,41,43,.55), rgba(71,164,153,.14)) !important; border-color: rgba(145,225,212,.65) !important; box-shadow: 0 15px 35px rgba(8,34,41,.28) !important; }
.suham-hero-features img, .suham-hero-features li:hover img { filter: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(493%) hue-rotate(111deg) brightness(103%) contrast(96%) drop-shadow(0 0 8px rgba(103,205,190,.65)) !important; }
.suham-hero-signature { color: #d8fbf4 !important; text-shadow: 0 2px 12px rgba(11,49,53,.45) !important; }
.hero-feature-row:hover .hero-item-title, .hero-gold-text { color: #7dd3c4 !important; }
.hero-gold-divider { background-color: var(--teal-bright) !important; }
.hero-icon-box { border-color: rgba(112,215,199,.7) !important; box-shadow: 0 0 16px rgba(43,142,131,.3) !important; }
.hero-feature-row:hover .hero-icon-box { border-color: #85dbce !important; box-shadow: 0 0 22px rgba(67,170,153,.55) !important; }
.hero-sig-img { filter: drop-shadow(0 0 14px rgba(73,174,158,.4)) !important; }

/* The curved handoff belongs to the gallery / About boundary. */
#about {
  overflow: visible !important;
  color: var(--ink) !important;
  background: linear-gradient(180deg, var(--silver-1) 0%, var(--silver-0) 55%, #e3eae9 100%) !important;
  isolation: isolate;
}
#about::before {
  top: -10vw !important;
  left: -10% !important;
  width: 120% !important;
  height: 14vw !important;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
  background: var(--silver-1) !important;
  pointer-events: none;
}
.about-stage { position: relative; z-index: 1; padding: clamp(86px, 9vw, 145px) 0 clamp(90px, 10vw, 160px); text-align: center; }
.about-eyebrow { margin: 0 4vw 20px; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .24em; }
.about-studio-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 18px; border: 1px solid #b4d4cd; border-radius: 999px; background: #dcece5; color: #155447; font-size: 14px; font-weight: 600; }
.about-intro { max-width: 1200px; margin: 25px auto 0; padding: 0 24px; }
.about-intro h2 { margin: 0; font-size: clamp(60px, 7vw, 124px); line-height: .98; letter-spacing: -.065em; font-weight: 750; }
.about-intro h2 span { color: var(--teal) !important; }
.about-intro h2 em { font-style: normal; color: #253f41; }
.about-lead { max-width: 760px; margin: 26px auto 0; color: #536364; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.45; }
.about-video-viewport { position: relative; height: clamp(300px, 28vw, 430px); width: 100%; margin: 52px auto 0; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.about-video-viewport.is-dragging { cursor: grabbing; }
.about-video-card { position: absolute; top: 28px; left: 0; width: clamp(170px, 13.6vw, 220px); height: clamp(260px, 23vw, 355px); overflow: hidden; border-radius: 19px; background: #1d353a; box-shadow: 0 18px 42px rgba(22,51,55,.2); transform-origin: center; will-change: transform; pointer-events: none; }
.about-video-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-video-card::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(5,22,26,.8)); pointer-events: none; }
.about-video-label { position: absolute; z-index: 1; bottom: 17px; left: 15px; max-width: calc(100% - 44px); color: white; text-align: left; font-size: 13px; font-weight: 750; line-height: 1.15; text-shadow: 0 2px 6px #071b1d; }
.about-play-mark { position: absolute; z-index: 1; right: 12px; bottom: 13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: white; background: rgba(236,255,249,.22); backdrop-filter: blur(9px); font-size: 10px; }
.about-hand-note { position: absolute; z-index: 2; color: var(--teal); font-family: 'Caveat', cursive; font-size: clamp(22px, 2.1vw, 36px); font-weight: 700; line-height: .85; pointer-events: none; }
.about-hand-note-left { left: 7%; top: 29%; transform: rotate(-11deg); }
.about-hand-note-right { right: 6%; top: 36%; transform: rotate(10deg); }
.about-actions { justify-content: center; margin: 16px auto 0; padding: 0 20px; }
.about-actions a { min-height: 54px; gap: 40px; border-color: var(--teal); color: var(--teal); background: transparent; }
.about-actions a:first-child { color: white; background: var(--teal); }
.about-actions a:hover, .about-actions a:focus-visible { color: white; background: #094b45; }
.about-actions a:focus-visible { outline-color: var(--teal); }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1500px; gap: 18px; margin: clamp(64px, 7vw, 112px) auto 0; padding: 0 5vw; text-align: left; }
.about-facts > div { min-height: 210px; padding: clamp(26px, 2.5vw, 40px); border: 1px solid #c5d7d3; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(215,234,229,.62)); box-shadow: 0 14px 30px rgba(19,64,62,.07); }
.about-facts span { color: var(--teal); }
.about-facts strong { color: var(--ink); font-size: clamp(22px, 2vw, 30px); }
.about-facts p { color: #516467; }

/* Silver gallery. The project screenshots keep their own colors. */
.circle-clip, #portfolio > div:nth-child(2), #portfolio .portfolio-gallery-card > div[class*="bg-linear"] { background: linear-gradient(135deg, #edf2f1, #cdd9d9 60%, #afc2c2) !important; }
#portfolio .w-px.origin-top { background-color: var(--teal) !important; box-shadow: 0 0 7px rgba(13,102,93,.45) !important; }
#portfolio span.rounded-full { box-shadow: 0 1px 6px rgba(7, 77, 56, .2); }
#portfolio .portfolio-card-yellow { border-color: var(--teal) !important; background: linear-gradient(135deg, #dce9e7, #b8cecc) !important; box-shadow: 0 20px 50px -10px rgba(20,76,72,.25) !important; }
.portfolio-gallery-controls button:hover, .portfolio-gallery-controls button:focus-visible, .portfolio-repo-link:hover { background: #9bddd1 !important; }

#work-with-me { background: linear-gradient(180deg, #687b80 0%, #27383d 30%, #10191d 66%, #070707 100%) !important; }
#work-with-me::before { content: none !important; display: none !important; }
#work-with-me .absolute.inset-0.h-px { background-color: #69bbaa !important; }
#work-with-me svg[stroke="#FACC15"] { stroke: #70c6b7 !important; }
.radial-mask-bg-fill { background: linear-gradient(105deg, #c4e3dd, #62af9f) !important; }
.services-card.active, .services-card:hover { border-color: #62af9f !important; }
.services-card [class*="text-[#FACC15]"], #testimonials [class*="text-[#FACC15]"] { color: #68c2b1 !important; }
.services-card.active [class*="text-[#FACC15]"], .services-card:hover [class*="text-[#FACC15]"] { color: var(--teal) !important; }
.services-card.active .border-white\/30, .services-card:hover .border-white\/30 { color: #c6eee6 !important; }
#testimonials button[class*="from-[#CA8A04]"], #testimonials [class*="from-[#CA8A04]"] { background: linear-gradient(110deg, #16756a, #74bcb0) !important; }
#footer::before { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(123,189,179,.30), rgba(123,189,179,.08) 55%, transparent 80%) !important; }
#footer p span[style*="#FDE047"] { color: #9ddccc !important; text-shadow: 0 0 24px rgba(91,176,163,.4) !important; }
#footer a[style*="#FDE047"] { color: var(--ink) !important; background: #b7ddd4 !important; box-shadow: 0 0 25px rgba(91,176,163,.28) !important; }
.mobile-certificates figure { border-color: rgba(116,188,176,.45) !important; }
.contact-notice { color: #b6e6da !important; }

@media (max-width: 1025px) { .about-facts { grid-template-columns: 1fr; max-width: 740px; } .about-facts > div { min-height: 0; } }
@media (max-width: 700px) {
  #about::before { top: -12vw !important; height: 18vw !important; }
  .about-stage { padding-top: 66px; padding-bottom: 85px; }
  .about-eyebrow { font-size: 11px; }
  .about-studio-badge { font-size: 11px; }
  .about-intro { margin-top: 24px; }
  .about-intro h2 { font-size: clamp(45px, 11.4vw, 65px); line-height: 1.03; }
  .about-lead { margin-top: 22px; font-size: 16px; }
  .about-video-viewport { height: 275px; margin-top: 36px; }
  .about-video-card { top: 20px; width: 138px; height: 218px; border-radius: 14px; }
  .about-video-label { bottom: 12px; left: 10px; font-size: 11px; }
  .about-play-mark { right: 7px; bottom: 8px; width: 22px; height: 22px; }
  .about-hand-note { display: none; }
  .about-actions { margin-top: 8px; }
  .about-actions a { min-height: 48px; font-size: 13px; gap: 14px; padding: 9px 15px; }
  .about-facts { margin-top: 70px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .about-video-card { will-change: auto; } }