:root { --portfolio-dark: #071321; --portfolio-blue: #159cf5; }

.portfolio-hero { overflow: hidden; padding: 112px 0 104px; color: #fff; background: radial-gradient(circle at 78% 20%, rgba(21,156,245,.3), transparent 28%), linear-gradient(135deg, #071321, #0b2943); }
.portfolio-hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: 70px; align-items: center; }
.portfolio-hero h1 { max-width: 780px; margin-bottom: 25px; font-size: clamp(2.8rem, 6.4vw, 5.5rem); letter-spacing: -.055em; }
.portfolio-hero h1 em { color: #55b9fa; font-style: normal; }
.portfolio-hero .hero-lead { color: #c8d7e5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.portfolio-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 22px; border: 1px solid transparent; border-radius: 999px; font-weight: 900; transition: transform .2s ease, background .2s ease; }
.portfolio-button:hover { transform: translateY(-3px); }
.portfolio-button.primary { color: #fff; background: var(--portfolio-blue); box-shadow: 0 14px 34px rgba(21,156,245,.28); }
.portfolio-button.secondary { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.portfolio-summary { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.06); box-shadow: 0 28px 70px rgba(0,0,0,.2); }
.portfolio-summary div { min-height: 145px; display: flex; flex-direction: column; justify-content: center; padding: 24px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.portfolio-summary div:nth-child(2n) { border-right: 0; }
.portfolio-summary div:nth-last-child(-n+2) { border-bottom: 0; }
.portfolio-summary strong { color: #55b9fa; font-size: 1.65rem; }
.portfolio-summary span { margin-top: 4px; color: #c8d7e5; font-size: .84rem; }

.portfolio-intro { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.7fr); gap: 80px; align-items: end; padding-top: 100px; padding-bottom: 70px; }
.portfolio-intro h2, .capability-heading h2 { margin-bottom: 0; font-size: clamp(2.2rem,4.2vw,4rem); }
.portfolio-intro > p { margin: 0; color: #405367; font-size: 1.06rem; line-height: 1.8; }

.project-list { padding-bottom: 115px; }
.project-case { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.project-case.reverse .project-visual { order: 2; }
.project-visual { position: relative; min-width: 0; overflow: hidden; border-radius: 25px; background: #0b1d30; box-shadow: 0 22px 65px rgba(8,28,48,.16); }
.project-visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.project-number { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 49px; height: 49px; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(7,19,33,.72); backdrop-filter: blur(10px); font-size: .78rem; font-weight: 900; }
.project-type { margin: 0 0 13px; color: #087cc6; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.project-copy h2 { margin-bottom: 17px; font-size: clamp(2rem,4vw,3.45rem); }
.project-lead { margin: 0 0 28px; color: #405367; font-size: 1.09rem; line-height: 1.72; }
.project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.project-facts section { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.project-facts h3, .feature-heading { margin-bottom: 8px; font-size: 1rem; }
.project-facts p { margin: 0; color: #526779; font-size: .9rem; line-height: 1.66; }
.feature-heading { margin-top: 26px; }
.feature-list { padding-left: 1.15rem; color: #405367; }
.feature-list li + li { margin-top: 7px; }
.feature-list li::marker { color: var(--portfolio-blue); }
.technology-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.technology-list span { padding: 7px 10px; color: #31506c; border-radius: 8px; background: #eaf2f8; font-size: .76rem; font-weight: 800; }
.role-note { margin: 20px 0 0; padding-top: 18px; color: #526779; border-top: 1px solid var(--line); font-size: .9rem; }
.text-link { display: inline-block; margin-top: 19px; color: #087cc6; font-weight: 900; }

.capabilities { padding: 100px 0; color: #fff; background: var(--portfolio-dark); }
.capability-heading { max-width: 760px; margin-bottom: 48px; }
.capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.11); border-radius: 22px; overflow: hidden; }
.capability-grid article { min-height: 245px; padding: 28px; border-right: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.capability-grid article:last-child { border-right: 0; }
.capability-grid span { color: #55b9fa; font-size: .72rem; font-weight: 900; }
.capability-grid h3 { margin: 35px 0 12px; font-size: 1.3rem; }
.capability-grid p { margin: 0; color: #9fb2c4; font-size: .92rem; }

.portfolio-contact { padding: 82px 0; color: #fff; background: var(--portfolio-blue); }
.portfolio-contact .contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.portfolio-contact h2 { margin-bottom: 10px; font-size: clamp(2.15rem,4.8vw,4.4rem); }
.portfolio-contact p:last-child { margin-bottom: 0; }
.portfolio-button.light { flex: 0 0 auto; color: var(--portfolio-dark); background: #fff; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 950px) {
  .portfolio-hero-grid, .portfolio-intro, .project-case { grid-template-columns: 1fr; }
  .portfolio-hero-grid, .portfolio-intro, .project-case { gap: 42px; }
  .project-case.reverse .project-visual { order: initial; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid article:nth-child(2) { border-right: 0; }
  .capability-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 640px) {
  .portfolio-hero { padding: 76px 0 70px; }
  .portfolio-hero h1 { font-size: clamp(2.55rem,13vw,3.55rem); }
  .hero-actions { display: grid; }
  .portfolio-button { width: 100%; }
  .portfolio-summary div { min-height: 122px; padding: 19px; }
  .portfolio-intro { padding-top: 72px; padding-bottom: 45px; }
  .project-list { padding-bottom: 78px; }
  .project-case { padding: 52px 0; }
  .project-facts { grid-template-columns: 1fr; gap: 12px; }
  .project-lead { font-size: 1.03rem; }
  .capabilities { padding: 75px 0; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { min-height: 205px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .capability-grid article:last-child { border-bottom: 0; }
  .portfolio-contact { padding: 66px 0; }
  .portfolio-contact .contact-inner { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ===== Standout + realism pass ===== */
.portfolio-hero{position:relative;isolation:isolate}
.portfolio-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 72%)}
.portfolio-hero:after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(21,156,245,.35),transparent 66%);animation:glow 9s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(-60px,40px) scale(1.15)}}
.status-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 15px;border:1px solid rgba(126,226,189,.35);border-radius:99px;background:rgba(126,226,189,.08);color:#b8f1dc;font-size:.78rem;font-weight:800;letter-spacing:.04em}
.status-pill i{width:9px;height:9px;border-radius:50%;background:#7ee2bd;box-shadow:0 0 0 0 rgba(126,226,189,.6);animation:ping 2s infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px rgba(126,226,189,0)}}
.portfolio-hero h1 em{background:linear-gradient(100deg,#55b9fa,#7ee2bd);-webkit-background-clip:text;background-clip:text;color:transparent}
.portfolio-summary{backdrop-filter:blur(14px)}
.portfolio-summary strong{font-family:"Space Grotesk",sans-serif}

.project-case{position:relative}
.project-case .project-visual{display:block;overflow:visible;background:none;box-shadow:none;border-radius:0;align-self:start;position:sticky;top:120px}
.frame{position:relative;border-radius:20px;overflow:hidden;background:#0b1d30;box-shadow:0 2px 0 rgba(255,255,255,.5) inset,0 30px 70px rgba(8,28,48,.22),0 0 0 1px rgba(7,19,33,.1);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.project-case:hover .frame{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 40px 90px rgba(8,28,48,.28),0 0 0 1px rgba(21,156,245,.3)}
.frame img{width:100%;aspect-ratio:3/2;object-fit:cover}
.frame-tag{position:absolute;right:16px;bottom:16px;padding:6px 11px;border-radius:99px;background:rgba(7,19,33,.72);backdrop-filter:blur(8px);color:#dcecf8;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.project-number{z-index:2}

/* browser + phone mockup built from real screenshots */
.browser{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 34px 80px rgba(8,28,48,.28),0 0 0 1px rgba(7,19,33,.12);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.project-case:hover .browser{transform:translateY(-6px)}
.browser-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;background:#eef3f7;border-bottom:1px solid rgba(7,19,33,.08)}
.browser-bar span{width:10px;height:10px;border-radius:50%;background:#ff5f57}.browser-bar span:nth-child(2){background:#febc2e}.browser-bar span:nth-child(3){background:#28c840}
.browser-bar b{flex:1;max-width:340px;margin:0 auto;padding:4px 14px;border-radius:99px;background:#fff;color:#5b7083;font-size:.7rem;font-weight:700;text-align:center;box-shadow:inset 0 0 0 1px rgba(7,19,33,.07)}
.browser>img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top}
.phone{position:absolute;right:-18px;bottom:-34px;width:31%;padding:7px;border-radius:26px;background:#071321;box-shadow:0 26px 55px rgba(8,28,48,.4),0 0 0 1.5px #2b3d50;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.project-case:hover .phone{transform:translateY(-12px)}
.phone:before{content:"";position:absolute;top:12px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:9px;background:#071321;z-index:2}
.phone img{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:20px}
.has-phone{padding-bottom:30px}

.project-meta{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 18px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;background:#eaf2f8;color:#31506c;font-size:.74rem;font-weight:800}
.badge.live{background:#e1f8ee;color:#0b7a50}.badge.live:before,.badge.wip:before,.badge.done:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.wip{background:#fff3dc;color:#9a6208}.badge.done{background:#e3f1ff;color:#0a67a8}
.project-copy h2{background:linear-gradient(100deg,#071321,#0b3a5f);-webkit-background-clip:text;background-clip:text;color:transparent}
.project-facts section{transition:transform .25s,box-shadow .25s,border-color .25s}
.project-facts section:hover{transform:translateY(-3px);border-color:rgba(21,156,245,.4);box-shadow:0 14px 34px rgba(8,28,48,.09)}
.technology-list span{transition:background .2s,color .2s,transform .2s}
.technology-list span:hover{background:#159cf5;color:#fff;transform:translateY(-2px)}
.role-note{background:linear-gradient(90deg,rgba(21,156,245,.08),transparent);padding:16px 18px;border-top:0;border-left:3px solid #159cf5;border-radius:0 12px 12px 0}
.text-link{padding:12px 20px;border-radius:99px;background:#071321;color:#fff;transition:transform .2s,background .2s}.text-link:hover{background:#159cf5;transform:translateY(-3px)}

.capability-grid article{position:relative;transition:background .3s}
.capability-grid article:hover{background:rgba(21,156,245,.1)}
.capability-grid article:before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,#159cf5,#7ee2bd);transition:width .4s}
.capability-grid article:hover:before{width:100%}
.capability-grid span{font-family:"Space Grotesk",sans-serif;font-size:.9rem}
.portfolio-contact{background:linear-gradient(120deg,#159cf5,#0a74c4)}

@media(max-width:950px){.project-case .project-visual{position:relative;top:0}.phone{right:8px}}
@media(prefers-reduced-motion:reduce){.frame,.browser,.phone,.status-pill i,.portfolio-hero:after{transition:none;animation:none}}

/* Fix: fixed height attributes were overriding aspect-ratio and stretching images */
.frame img,.browser>img,.phone img{height:auto}
.frame img{aspect-ratio:3/2}
.has-phone .project-number{top:-16px;left:-16px;box-shadow:0 8px 20px rgba(7,19,33,.25)}
@media(max-width:640px){.has-phone .project-number{top:-12px;left:-6px}.phone{right:4px;bottom:-26px;width:34%}}
/* Real screenshots keep their natural proportions (no cropping) */
.frame img{aspect-ratio:auto;object-fit:contain}