/* =============================
       DESIGN TOKENS
    ============================== */
 :root {
     --bg: #0b0c10;
     /* dark background */
     --ink: #f5f5f5;
     /* light text */
     --muted: #9aa0a6;
     /* neutral gray */
     --line: #1f2937;
     /* divider color */
     --accent: #111827;
     /* near black accent */
     --accent-ink: #ffffff;
     --shadow: 0 12px 40px rgba(0, 0, 0, .35);
     --radius: 18px;
     --container: 1200px;
     --easing: cubic-bezier(.2, .8, .2, 1);
 }

 /* =============================
GLOBAL
============================== */
 html {
     scroll-behavior: smooth;
 }

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font: 400 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
     background: var(--bg);
     color: var(--ink);
 }

 .container {
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 20px;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
 }

 /* =============================
       TOP PROGRESS BAR (scroll indicator)
    ============================== */
 .progress {
     position: fixed;
     inset: 0 0 auto 0;
     height: 3px;
     background: linear-gradient(90deg, #000, #6b7280);
     transform-origin: 0 50%;
     transform: scaleX(0);
     z-index: 9999
 }

 @media (prefers-color-scheme: dark) {
     .progress {
         background: linear-gradient(90deg, #fff, #9aa0a6)
     }
 }

 /* =============================
       NAV
    ============================== */
 header {
     position: sticky;
     top: 0;
     z-index: 1000;
     backdrop-filter: saturate(180%) blur(10px);
     background: color-mix(in oklab, var(--bg) 80%, transparent);
     border-bottom: 1px solid var(--line);
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 68px;
 }

 .brand {
     font-weight: 700;
     letter-spacing: .02em
 }

 .brand b {
     font-weight: 800
 }

 .nav a {
     opacity: .8
 }

 .nav a:hover {
     opacity: 1
 }

 .nav ul {
     list-style: none;
     display: flex;
     gap: 20px;
     margin: 0;
     padding: 0
 }

 .cta {
     padding: .6rem .9rem;
     border: 1px solid var(--ink);
     border-radius: 999px;
     transition: transform .2s var(--easing)
 }

 .cta:hover {
     transform: translateY(-1px)
 }

 /* =============================
       ABOUT (as main intro)
    ============================== */
 section {
     padding: 72px 0;
     border-bottom: 1px solid var(--line)
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 40px;
     align-items: center
 }

 .about-photo {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 1s ease forwards .3s;
 }

 .about-photo::before {
     content: "";
     position: absolute;
     inset: 0;
     animation: gradientShift 12s ease infinite;
     z-index: 0;
     transition: background .5s ease;
 }

 .about-photo img {
     position: relative;
     z-index: 1;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: var(--radius);
     box-shadow: var(--shadow)
 }

 @media (prefers-color-scheme: dark) {}

 .about-text {
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 1s ease forwards .6s;
 }

 .about-text h1 {
     margin: 0 0 .2em;
     font-size: clamp(32px, 5vw, 48px);
     line-height: 1.1
 }

 .about-text p {
     color: var(--muted);
     max-width: 60ch;
     margin: 0 0 1em
 }

 @keyframes gradientShift {
     0% {
         background-position: 0% 50%
     }

     50% {
         background-position: 100% 50%
     }

     100% {
         background-position: 0% 50%
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

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

 /* =============================
       WORK GRID
    ============================== */
 .section-title {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 16px
 }

 .section-title h2 {
     font-size: clamp(24px, 3vw, 36px);
     margin: 0
 }

 .section-title p {
     color: var(--muted);
     max-width: 60ch
 }

 .filters {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin: 20px 0 28px
 }

 .filter {
     border: 1px solid var(--line);
     padding: .5rem .8rem;
     border-radius: 999px;
     cursor: pointer;
     background: transparent
 }

 .filter[aria-pressed="true"] {
     background: var(--ink);
     color: var(--bg)
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 16px
 }

 .card {
     grid-column: span 4;
     position: relative;
     overflow: hidden;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: color-mix(in oklab, var(--bg) 92%, var(--line));
     box-shadow: var(--shadow);
     transform: translateY(12px) scale(.98);
     opacity: 0;
     will-change: transform, opacity;
 }

 .card.in {
     opacity: 1;
     transform: none;
     transition: opacity .7s var(--easing), transform .7s var(--easing);
 }

 .card a {
     display: block;
 }

 .thumb {
     aspect-ratio: 16/12;
     background: #d1d5db;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .meta {
     padding: 16px 16px 18px;
 }

 .meta h3 {
     margin: 0 0 6px;
     font-size: 1.05rem;
 }

 .meta p {
     margin: 0;
     color: var(--muted);
     font-size: .95rem;
 }

 /* ✅ Responsive grid */
 @media (max-width: 900px) {
     .card {
         grid-column: span 6;
     }

     /* 2 cards per row */
 }

 @media (max-width: 500px) {
     .card {
         grid-column: span 12;
     }

     /* 1 card per row */
 }

 /* Keep your existing grid & card styles */

 /* --- Your existing holographic card --- */
 .card {
     position: relative;
     overflow: hidden;
     border-radius: var(--radius);
     transition: transform 0.5s ease, box-shadow 0.5s ease;
 }

 .card::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(0deg,
             transparent,
             transparent 30%,
             rgba(0, 255, 255, 0.3));
     transform: rotate(-45deg);
     transition: all 0.5s ease;
     opacity: 0;
     pointer-events: none;
 }

 .card:hover {
     transform: translateY(-4px) scale(1.02);
     box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
 }

 .card:hover::before {
     opacity: 1;
     transform: rotate(-45deg) translateY(100%);
 }

 .card1 {
     perspective: 1000px;
     width: 350px;
     /* mobile default */
     height: 350px;
     margin: 20px auto;
 }

 /* Larger screens (laptop/desktop) */
 @media (min-width: 1024px) {
     .card1 {
         width: 400px;
         height: 400px;
     }
 }

 .card1-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
     /* Safari fix */
     transition: transform 0.6s;
 }

 /* Hover flip (desktop only) */
 @media (hover: hover) and (pointer: fine) {
     .card1:hover .card1-inner {
         transform: rotateY(180deg);
         -webkit-transform: rotateY(180deg);
     }
 }

 /* Tap flip (mobile/tablet) */
 .card1-inner.flipped {
     transform: rotateY(180deg);
     -webkit-transform: rotateY(180deg);
 }

 /* Faces */
 .card1-front,
 .card1-back {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     border-radius: 12px;
     overflow: hidden;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     /* Safari fix */
 }

 .card1-front {
     transform: rotateY(0deg);
     -webkit-transform: rotateY(0deg);
 }

 .card1-back {
     transform: rotateY(180deg);
     -webkit-transform: rotateY(180deg);
 }

 /* =============================
       CASE STUDY STRIPE
    ============================== */
 .stripe {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 24px;
     align-items: center
 }

 .stripe .panel {
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 20px;
     box-shadow: var(--shadow)
 }

 .list {
     display: grid;
     gap: 12px;
     margin: 0;
     padding: 0;
     list-style: none
 }

 .list li {
     display: flex;
     gap: 10px;
     align-items: flex-start
 }

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

 /* =============================
       FOOTER & UTILITIES
    ============================== */
 footer {
     padding: 56px 0
 }

 .foot {
     display: flex;
     gap: 16px;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     color: var(--muted)
 }

 .foot a {
     color: inherit
 }

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: backdrop-filter 0.4s ease, opacity 0.4s ease;
}

.lightbox.open {
    backdrop-filter: blur(10px);
    opacity: 1;
    pointer-events: auto;
}

.lightbox img,
.lightbox video {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 14px;
    transform: scale(1);
    transition: transform 0.3s ease;
    display: none;
    z-index: 10001;
}

.lightbox img.opened,
.lightbox video.opened {
    transform: scale(1.05);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    z-index: 10002;
}

 .social-panel ul {
     display: flex;
     position: relative;
     justify-content: center;
     flex-wrap: wrap;
     /* ✅ allow wrapping on small screens */
     padding: 0;
     margin: 0;
     gap: 10px;
     /* replace margin on <a> with a clean gap */
 }

 .social-panel ul li {
     list-style: none;
 }

 .social-panel ul li a {
     width: 80px;
     /* large on laptops/desktops */
     height: 80px;
     background-color: #fff;
     text-align: center;
     line-height: 80px;
     font-size: 36px;
     display: block;
     border-radius: 50%;
     position: relative;
     overflow: hidden;
     border: 3px solid #fff;
     z-index: 1;
 }

 /* 📱 On medium screens (tablets), shrink a bit */
 @media (max-width: 900px) {
     .social-panel ul li a {
         width: 80px;
         height: 80px;
         line-height: 80px;
         font-size: 28px;
     }
 }

 /* 📱 On very small screens (phones), shrink further */
 @media (max-width: 500px) {
     .social-panel ul li a {
         width: 60px;
         height: 60px;
         line-height: 60px;
         font-size: 22px;
     }
 }

 .social-panel ul li a .icon {
     position: relative;
     color: #262626;
     transition: .5s;
     z-index: 3;
 }

 .social-panel ul li a:hover .icon {
     color: #fff;
     transform: rotateY(360deg);
 }

 .social-panel ul li a:before {
     content: "";
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: #f00;
     transition: .5s;
     z-index: 2;
 }

 .social-panel ul li a:hover:before {
     top: 0;
 }

 .social-panel ul li:nth-child(1) a:before {
     background: #ff0069;
 }

 .social-panel ul li:nth-child(2) a:before {
     background: #3b5999;
 }

 .social-panel ul li:nth-child(3) a:before {
     background: #69C9D0;
 }

 .social-panel ul li:nth-child(4) a:before {
     background: #0077b5;
 }

 .language-toggle {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1000;
     padding: 10px 14px;
     border-radius: 50px;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     color: #333;
     cursor: pointer;
     font-size: 14px;
     font-weight: bold;
     transition: background-color 0.2s;
 }

 .language-toggle:hover {
     background-color: #e0e0e0;
 }

 .card {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.4s ease;
 }

 .card.in {
     opacity: 1;
     transform: translateY(0);
 }

 @media (max-width: 768px) {
     .brand-title {
         font-size: 14px;
         /* adjust until it fits */
     }
 }