/* ARCHIETALIC PATCH v1.1 - Premium Live Projects Showcase
   Upload to: assets/css/patch-live-projects.css
   This patch only improves the Live Projects / Case Studies section.
   It does not change global layout, header, logo, hero spacing, or background. */

:root{
  --ap-cyan:#31c9ff;
  --ap-blue:#2d6bff;
  --ap-violet:#8d5cff;
  --ap-gold:#f4ca67;
  --ap-ink:#06101f;
  --ap-card:rgba(255,255,255,.065);
  --ap-border:rgba(255,255,255,.14);
}

#live-projects.cinematic-projects,
.cinematic-projects{
  position:relative;
  padding:clamp(72px,8vw,124px) 0!important;
  background:
    radial-gradient(circle at 16% 10%,rgba(49,201,255,.13),transparent 32%),
    radial-gradient(circle at 84% 32%,rgba(141,92,255,.12),transparent 34%),
    linear-gradient(180deg,#050b17 0%,#08162a 48%,#050b17 100%)!important;
  overflow:hidden;
}

.cinematic-projects::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  opacity:.32;
  pointer-events:none;
}

.cinematic-head{
  position:relative;
  z-index:2;
  max-width:980px!important;
  margin:0 auto clamp(30px,4vw,52px)!important;
  text-align:center;
}

.cinematic-head .kicker,
#live-projects .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid rgba(49,201,255,.28);
  border-radius:999px;
  background:rgba(49,201,255,.08);
  color:#93e9ff;
  font-weight:950;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}

.cinematic-head h2{
  margin:18px auto 18px!important;
  font-size:clamp(40px,6vw,84px)!important;
  line-height:.92!important;
  letter-spacing:clamp(-3px,-.35vw,-1px)!important;
  background:linear-gradient(90deg,#fff 0%,#cfeaff 36%,var(--ap-cyan) 62%,var(--ap-gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.cinematic-head p{
  max-width:820px;
  margin:0 auto!important;
  color:#b9c8dc!important;
  font-size:clamp(16px,1.5vw,19px)!important;
  line-height:1.7!important;
}

.case-study{
  --tiltX:0deg;
  --tiltY:0deg;
  --mx:50%;
  --my:50%;
  position:relative!important;
  z-index:2;
  width:min(1420px, calc(100% - clamp(34px,6vw,112px)))!important;
  margin:clamp(32px,4.5vw,68px) auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  align-items:center!important;
  gap:clamp(30px,4vw,58px)!important;
  padding:clamp(20px,2.7vw,34px)!important;
  border:1px solid var(--ap-border)!important;
  border-radius:clamp(26px,3vw,42px)!important;
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(49,201,255,.14),transparent 24%),
    linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;
  box-shadow:0 34px 120px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08)!important;
  overflow:hidden!important;
  transform:perspective(1400px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease!important;
  will-change:transform;
}

.case-study::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,.12) 34%,transparent 58%);
  opacity:0;
  transform:translateX(-40%);
  transition:opacity .4s ease, transform .85s ease;
  pointer-events:none;
}
.case-study:hover{
  border-color:rgba(49,201,255,.34)!important;
  box-shadow:0 42px 140px rgba(0,0,0,.46),0 0 90px rgba(49,201,255,.13)!important;
}
.case-study:hover::after{opacity:1;transform:translateX(40%)}

.case-study.alt{grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr)!important;}
.case-study.alt .case-media{order:2!important;}
.case-study.alt .case-copy{order:1!important;}
.case-media,.case-copy{position:relative;z-index:2;min-width:0;}

.browser-frame{
  position:relative;
  overflow:hidden!important;
  border-radius:clamp(20px,2vw,30px)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:#06101f!important;
  box-shadow:0 28px 90px rgba(0,0,0,.46)!important;
  transform:none!important;
  transition:transform .38s ease, box-shadow .38s ease!important;
}
.case-study:hover .browser-frame{transform:translateY(-5px) scale(1.01)!important;box-shadow:0 34px 110px rgba(0,0,0,.56)!important;}
.browser-top{
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 16px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(11,22,42,.95),rgba(5,12,24,.88))!important;
}
.browser-top span{width:10px!important;height:10px!important;border-radius:50%!important;display:block!important;}
.browser-top span:nth-child(1){background:#ff5f57!important}.browser-top span:nth-child(2){background:#ffbd2e!important}.browser-top span:nth-child(3){background:#28c840!important}
.browser-top em{font-style:normal!important;margin-left:10px!important;color:#aebfd4!important;font-size:12px!important;font-weight:900!important;letter-spacing:.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.browser-frame img{
  width:100%!important;
  height:clamp(290px,33vw,470px)!important;
  object-fit:cover!important;
  object-position:top center!important;
  display:block!important;
  padding:0!important;
  transition:transform 1.5s ease, object-position 5s ease!important;
  background:#061225!important;
}
.case-study:hover .browser-frame img{transform:scale(1.045)!important;object-position:bottom center!important;}

.phone-frame{
  position:absolute!important;
  right:clamp(-12px,-1vw,-4px)!important;
  bottom:clamp(-28px,-2vw,-16px)!important;
  width:clamp(108px,11vw,158px)!important;
  height:clamp(196px,20vw,288px)!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  background:#07111f!important;
  padding:8px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 34px rgba(49,201,255,.14)!important;
  overflow:hidden!important;
}
.case-study.alt .phone-frame{left:clamp(-12px,-1vw,-4px)!important;right:auto!important;}
.phone-frame img{width:100%!important;height:100%!important;border-radius:22px!important;object-fit:cover!important;object-position:top center!important;}

.live-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  width:max-content!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(46,255,169,.12)!important;
  border:1px solid rgba(46,255,169,.34)!important;
  color:#8dffd5!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  box-shadow:0 0 22px rgba(46,255,169,.10)!important;
}
.live-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#2effa9;box-shadow:0 0 16px #2effa9;animation:apLivePulse 1.5s ease-in-out infinite;}
@keyframes apLivePulse{50%{opacity:.45;transform:scale(.75)}}

.case-copy h3{
  margin:16px 0!important;
  font-size:clamp(38px,5.3vw,78px)!important;
  line-height:.88!important;
  letter-spacing:clamp(-3px,-.28vw,-1.4px)!important;
  background:linear-gradient(90deg,#fff,#d8edff 42%,var(--ap-cyan) 74%,var(--ap-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.case-lead{
  color:#c8d7eb!important;
  font-size:clamp(16px,1.45vw,20px)!important;
  line-height:1.68!important;
  margin:0 0 18px!important;
}
.case-details{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin:20px 0!important;
}
.case-details div{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.05)!important;
  padding:14px!important;
}
.case-details b{display:block!important;color:#8fe8ff!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.10em!important;margin-bottom:6px!important;}
.case-details span{color:#edf6ff!important;font-weight:850!important;font-size:14px!important;line-height:1.42!important;}
.case-stack{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:18px 0 22px!important;}
.case-stack span{border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important;border-radius:999px!important;padding:7px 10px!important;color:#e6f3ff!important;font-size:12px!important;font-weight:900!important;}
.case-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center!important;}
.case-actions a{
  position:relative!important;
  overflow:hidden!important;
  text-decoration:none!important;
  border-radius:15px!important;
  padding:13px 16px!important;
  font-size:13px!important;
  font-weight:950!important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease!important;
}
.case-actions a::after{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(255,255,255,.24),transparent);transform:translateX(-120%);transition:.65s ease;pointer-events:none;
}
.case-actions a:hover{transform:translateY(-2px)!important;}
.case-actions a:hover::after{transform:translateX(120%)}
.case-actions .cta,.case-actions a:first-child{background:linear-gradient(135deg,var(--ap-blue),var(--ap-violet))!important;color:white!important;box-shadow:0 16px 40px rgba(45,107,255,.22)!important;}
.case-actions .ghost,.case-actions a:last-child{border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.055)!important;color:#fff!important;}

.proof-note{
  width:min(1120px, calc(100% - clamp(34px,6vw,112px)))!important;
  margin:20px auto 0!important;
  border:1px solid rgba(244,202,103,.22)!important;
  background:linear-gradient(135deg,rgba(244,202,103,.10),rgba(49,201,255,.06))!important;
  border-radius:24px!important;
  padding:22px!important;
  color:#e6edf8!important;
  line-height:1.7!important;
  text-align:center!important;
}

@media(max-width:1100px){
  .case-study,.case-study.alt{grid-template-columns:1fr!important;gap:26px!important;}
  .case-study.alt .case-media,.case-study.alt .case-copy{order:initial!important;}
  .case-copy h3{font-size:clamp(38px,8vw,62px)!important;}
}
@media(max-width:720px){
  .case-study{width:min(100% - 34px, 680px)!important;padding:18px!important;border-radius:28px!important;}
  .case-details{grid-template-columns:1fr!important;}
  .phone-frame{display:none!important;}
  .browser-frame img{height:260px!important;}
  .case-actions{display:grid!important;grid-template-columns:1fr!important;}
  .case-actions a{width:100%!important;text-align:center!important;display:grid!important;place-items:center!important;}
  .cinematic-head{text-align:left!important;width:min(100% - 34px, 680px)!important;}
  .proof-note{width:min(100% - 34px, 680px)!important;text-align:left!important;}
}

@media (prefers-reduced-motion: reduce){
  .case-study,.browser-frame,.browser-frame img,.case-actions a,.case-study::after{animation:none!important;transition:none!important;transform:none!important;}
}