*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:"Nunito Sans", Arial, Helvetica, sans-serif;
background:linear-gradient(180deg,#f7f3ee 0%,#efebe6 100%);
color:#1f2f3d;
}

.showcase-hero{
position:relative;
overflow:hidden;
padding:36px 20px 92px;
text-align:center;
background:
radial-gradient(circle at top left, rgba(243,156,18,0.22), transparent 32%),
radial-gradient(circle at top right, rgba(255,122,89,0.16), transparent 28%),
linear-gradient(180deg,#fcfaf8 0%,#f3eee9 100%);
}

.hero-orb{
position:absolute;
width:280px;
height:280px;
border-radius:50%;
filter:blur(10px);
opacity:0.55;
pointer-events:none;
}

.hero-orb-left{
top:-110px;
left:-70px;
background:rgba(243,156,18,0.28);
}

.hero-orb-right{
top:-80px;
right:-60px;
background:rgba(255,122,89,0.2);
}

.back-btn{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:999px;
background:#202a33;
color:#fff;
text-decoration:none;
font-weight:700;
box-shadow:0 12px 24px rgba(32,42,51,0.2);
transition:transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.back-btn:hover{
transform:translateY(-2px);
background:#f39c12;
box-shadow:0 16px 28px rgba(243,156,18,0.28);
}

.hero-copy{
position:relative;
z-index:1;
max-width:760px;
margin:34px auto 0;
}

.eyebrow{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:#ffffff;
color:#f39c12;
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
box-shadow:0 10px 24px rgba(31,47,61,0.08);
}

.hero-copy h1{
margin:18px 0 14px;
font-size:clamp(42px,6vw,68px);
line-height:1;
}

.hero-copy p{
margin:0 auto;
max-width:640px;
font-size:18px;
line-height:1.7;
color:#546473;
}

.showcase-main{
max-width:1280px;
margin:26px auto 0;
padding:0 20px 80px;
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(320px,0.75fr);
align-items:start;
gap:28px;
}

.showcase-card{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,255,255,0.7);
border-radius:28px;
padding:28px;
box-shadow:0 22px 44px rgba(31,47,61,0.12);
}

.showcase-card-featured{
min-width:0;
}

.showcase-card-muted{
background:linear-gradient(180deg,rgba(255,255,255,0.88) 0%,rgba(249,244,238,0.95) 100%);
position:sticky;
top:24px;
}

.showcase-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
flex-wrap:wrap;
gap:18px;
margin-bottom:14px;
}

.section-label{
margin:0 0 6px;
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:#f39c12;
}

.showcase-header h2{
margin:0;
font-size:32px;
line-height:1.1;
}

.status-pill{
margin:12px 0 0;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
padding:10px 16px;
border-radius:999px;
background:#fff7eb;
color:#c87400;
font-size:14px;
font-weight:800;
box-shadow:inset 0 0 0 1px rgba(243,156,18,0.18);
}

.status-pill-muted{
background:#f1f3f5;
color:#485765;
box-shadow:inset 0 0 0 1px rgba(72,87,101,0.12);
}

.showcase-text{
margin:0 0 22px;
max-width:760px;
font-size:17px;
line-height:1.7;
color:#556472;
}

.website-gallery{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}

.website-shot{
margin:0;
overflow:hidden;
border-radius:22px;
background:linear-gradient(180deg,#ffffff 0%,#f7f2eb 100%);
box-shadow:0 18px 34px rgba(31,47,61,0.12);
border:1px solid rgba(221,210,196,0.7);
}

.website-shot a{
display:block;
background:#f3ede7;
}

.website-shot img{
display:block;
width:100%;
height:230px;
object-fit:contain;
object-position:top center;
background:#f3ede7;
transition:transform 0.25s ease, filter 0.25s ease;
}

.website-shot a:hover img{
filter:saturate(1.06) contrast(1.02);
transform:scale(1.01);
}

.website-shot figcaption{
padding:16px 18px 18px;
font-size:15px;
font-weight:800;
letter-spacing:0.02em;
color:#20303d;
}

.construction-panel{
padding:28px;
border-radius:22px;
background:
linear-gradient(135deg, rgba(243,156,18,0.12), rgba(255,122,89,0.1)),
white;
box-shadow:0 18px 34px rgba(31,47,61,0.1);
}

.construction-badge{
display:inline-block;
margin-bottom:14px;
padding:8px 14px;
border-radius:999px;
background:#202a33;
color:#fff;
font-size:13px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
}

.construction-panel h3{
margin:0 0 10px;
font-size:28px;
}

.construction-panel p{
margin:0;
max-width:700px;
font-size:17px;
line-height:1.7;
color:#556472;
}

@media (max-width: 860px){
  .showcase-main{
    grid-template-columns:1fr;
  }

  .showcase-card-muted{
    position:static;
  }

  .showcase-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .website-gallery{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .showcase-hero{
    padding:28px 16px 78px;
  }

  .hero-copy p{
    font-size:16px;
  }

  .showcase-main{
    margin-top:18px;
    padding:0 16px 56px;
  }

  .showcase-card{
    padding:20px;
    border-radius:22px;
  }

  .showcase-header h2{
    font-size:25px;
  }

  .website-shot img{
    height:220px;
  }

  .construction-panel{
    padding:22px;
  }

  .construction-panel h3{
    font-size:24px;
  }
}