:root{
  --bg: #0b0f1a;
  --bg2: #070a12;
  --text: rgba(238,242,255,.92);
  --muted: rgba(238,242,255,.70);
  --muted2: rgba(238,242,255,.55);

  --blue1: #3b82f6;
  --blue2: #06b6d4;

  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;

  --radius: 18px;
  --radius2: 24px;

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --container: 1180px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -120px, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(6,182,212,.14), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(var(--container), calc(100% - 2*var(--s4)));
  margin:0 auto;
}

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid transparent;
}

.nav.scrolled{
  background:rgba(10,12,22,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--s3) 0;
  gap:var(--s4);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-weight:700;
  letter-spacing:-0.02em;
  white-space:nowrap;
}

.brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--blue1), var(--blue2));
  box-shadow:0 0 18px rgba(59,130,246,.55);
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 2.5vw, 30px);
}

.nav-links a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(238,242,255,.76);
  transition:color .18s ease;
}

.nav-links a:hover{ color:rgba(238,242,255,.98); }

.back-btn{
  padding:11px 14px;
  font-size:14px;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  font-weight:600;
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .22s ease, background .22s ease;
}

.btn-primary{
  background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(6,182,212,.90));
  color:#06101f;
  box-shadow:0 14px 45px rgba(59,130,246,.22);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 60px rgba(59,130,246,.30);
}

.btn-ghost{
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.07);
  transform:translateY(-2px);
}

.cta-row{
  display:flex;
  gap:var(--s3);
  align-items:center;
  flex-wrap:wrap;
}

/* HERO */
.case-hero{
  min-height:calc(100vh - 77px);
  display:flex;
  align-items:center;
  padding:clamp(58px, 7vw, 92px) 0 var(--s7);
}

.case-hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:clamp(42px, 7vw, 90px);
}

.project-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  margin-bottom:var(--s4);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(238,242,255,.78);
  font-size:13px;
}

.project-badge img{
  width:28px;
  height:28px;
  border-radius:8px;
}

.section-title{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(238,242,255,.72);
  margin:0 0 var(--s3);
}

.case-hero h1{
  margin:0 0 var(--s3);
  font-size:clamp(58px, 7vw, 92px);
  line-height:.98;
  letter-spacing:-0.05em;
}

.case-lead{
  max-width:650px;
  margin:0 0 var(--s4);
  color:var(--muted);
  line-height:1.75;
  font-size:clamp(16px, 1.5vw, 19px);
}

.tech-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:var(--s5);
}

.tech-row span,
.result-tags span{
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:rgba(238,242,255,.76);
  font-size:13px;
}

.case-cta{ justify-content:flex-start; }

.hero-visual{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-visual img{
  position:relative;
  z-index:2;
  width:min(100%, 510px);
  max-height:650px;
  object-fit:contain;
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.35));
}

.hero-glow{
  position:absolute;
  width:68%;
  aspect-ratio:1;
  border-radius:999px;
  background:radial-gradient(circle, rgba(6,182,212,.22), rgba(59,130,246,.10) 44%, transparent 72%);
  filter:blur(10px);
}

/* COMMON */
main section{
  padding:var(--s8) 0;
}

.section-intro{
  max-width:800px;
  margin-bottom:var(--s6);
}

.section-headline{
  font-size:clamp(30px, 3.5vw, 44px);
  line-height:1.1;
  letter-spacing:-0.025em;
  margin:0 0 var(--s4);
}

.section-intro > p{
  margin:0 0 var(--s3);
  color:var(--muted);
  line-height:1.75;
  font-size:16px;
}

.light-section{
  background:#f7f9ff;
  color:#0b1020;
}

.light-section .section-title{ color:rgba(11,16,32,.62); }
.light-section .section-headline{ color:#0b1020; }

.light-section .section-intro > p{
  color:rgba(11,16,32,.70);
}

/* PROJECT STATS */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s4);
}

.stat-card{
  padding:var(--s5);
  border-radius:18px;
  border:1px solid rgba(10,16,32,.08);
  background:#fff;
  box-shadow:0 14px 40px rgba(15,23,42,.09);
}

.stat-label{
  display:block;
  margin-bottom:12px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,16,32,.52);
}

.stat-card strong{
  display:block;
  margin-bottom:10px;
  font-size:21px;
  color:#0b1020;
}

.stat-card p{
  margin:0;
  color:rgba(11,16,32,.68);
  line-height:1.6;
  font-size:14px;
}

/* FEATURES */
.feature-showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(45px, 8vw, 110px);
  align-items:center;
  padding:var(--s6) 0;
}

.feature-showcase + .feature-showcase{
  border-top:1px solid rgba(255,255,255,.08);
}

.feature-showcase.reverse .feature-copy{ order:2; }
.feature-showcase.reverse .feature-image{ order:1; }

.feature-number{
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--s3);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(6,182,212,.16));
  border:1px solid rgba(255,255,255,.10);
  color:rgba(238,242,255,.82);
  font-weight:700;
  font-size:13px;
}

.feature-copy h3{
  margin:0 0 var(--s3);
  font-size:clamp(25px, 3vw, 36px);
  letter-spacing:-0.025em;
}

.feature-copy > p{
  margin:0 0 var(--s4);
  color:var(--muted);
  line-height:1.75;
}

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

.feature-list li{
  position:relative;
  padding-left:27px;
  color:rgba(238,242,255,.82);
  line-height:1.55;
}

.feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--blue1), var(--blue2));
  box-shadow:0 0 16px rgba(59,130,246,.34);
}

.feature-image{
  display:flex;
  justify-content:center;
  align-items:center;
}

.feature-image img{
  width:min(100%, 470px);
  max-height:650px;
  object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.30));
}

/* DEVELOPMENT */
.dev-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s4);
}

.dev-card{
  padding:var(--s5);
  border:1px solid rgba(10,16,32,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 40px rgba(15,23,42,.09);
  transition:transform .18s ease, box-shadow .18s ease;
}

.dev-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 55px rgba(15,23,42,.13);
}

.dev-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--s3);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(59,130,246,.13), rgba(6,182,212,.10));
  font-size:20px;
}

.dev-card h3{
  margin:0 0 10px;
  font-size:18px;
}

.dev-card p{
  margin:0;
  color:rgba(11,16,32,.68);
  line-height:1.65;
  font-size:14px;
}

/* RESULT */
.result-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--s6);
  align-items:center;
}

.result-copy > p{
  color:var(--muted);
  line-height:1.75;
  margin:0 0 var(--s3);
}

.result-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:var(--s4);
}

.result-card{
  padding:var(--s6);
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow2);
  text-align:center;
}

.result-icon{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:26px;
  margin:0 auto var(--s4);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.result-card h3{
  margin:0 0 10px;
  font-size:27px;
}

.result-card p{
  margin:0 auto;
  max-width:38ch;
  color:var(--muted);
  line-height:1.65;
}

/* FINAL CTA */
.case-cta-section{
  padding-top:0;
}

.case-cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  padding:var(--s6);
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 250px at 85% 15%, rgba(6,182,212,.15), transparent 70%),
    rgba(255,255,255,.05);
  box-shadow:var(--shadow2);
}

.case-cta-box h2{
  margin:0 0 10px;
  font-size:clamp(27px, 3vw, 38px);
  letter-spacing:-0.025em;
}

.case-cta-box p{
  margin:0;
  max-width:680px;
  color:var(--muted);
  line-height:1.7;
}

.case-cta-box .btn{
  flex:0 0 auto;
}

/* FOOTER */
footer{
  padding:var(--s6) 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(238,242,255,.62);
  font-size:14px;
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  flex-wrap:wrap;
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}

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

/* RESPONSIVE */
@media (max-width: 980px){
  .nav-links{ display:none; }

  .case-hero{
    min-height:auto;
    padding-top:var(--s7);
  }

  .case-hero-grid,
  .feature-showcase,
  .result-grid{
    grid-template-columns:1fr;
  }

  .case-hero-copy{
    text-align:center;
  }

  .project-badge{
    margin-left:auto;
    margin-right:auto;
  }

  .case-lead{
    margin-left:auto;
    margin-right:auto;
  }

  .tech-row,
  .case-cta{
    justify-content:center;
  }

  .hero-visual{
    min-height:0;
    margin-top:var(--s4);
  }

  .hero-visual img{
    max-height:570px;
  }

  .stats-grid,
  .dev-grid{
    grid-template-columns:1fr 1fr;
  }

  .feature-showcase.reverse .feature-copy,
  .feature-showcase.reverse .feature-image{
    order:initial;
  }

  .feature-copy{
    max-width:700px;
  }

  .feature-image img{
    max-height:590px;
  }

  .case-cta-box{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width: 640px){
  .container{
    width:min(var(--container), calc(100% - 32px));
  }

  .back-btn{
    font-size:12px;
    padding:10px 12px;
  }

  .case-hero h1{
    font-size:clamp(50px, 17vw, 72px);
  }

  main section{
    padding:var(--s7) 0;
  }

  .stats-grid,
  .dev-grid{
    grid-template-columns:1fr;
  }

  .stat-card,
  .dev-card{
    padding:var(--s4);
  }

  .feature-showcase{
    padding:var(--s5) 0;
    gap:var(--s5);
  }

  .feature-image img,
  .hero-visual img{
    width:min(100%, 400px);
  }

  .result-card,
  .case-cta-box{
    padding:var(--s5);
  }

  .footer-row{
    justify-content:center;
    text-align:center;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    scroll-behavior:auto !important;
  }

  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}