/*
Theme Name: STL3D Studio Pro
Author: OpenAI
Version: 1.0
*/

:root{
 --bg:#060b16;
 --panel:#0f172a;
 --line:rgba(255,255,255,.08);
 --blue:#2563eb;
 --sky:#38bdf8;
 --text:#f8fafc;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
 background:linear-gradient(180deg,#060b16,#0b1220);
 color:var(--text);
 font-family:Arial,sans-serif;
}

.container{
 width:min(1400px,92%);
 margin:auto;
}

header{
 position:sticky;
 top:0;
 z-index:999;
 background:rgba(6,11,22,.85);
 backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line);
}

.navbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:22px 0;
}

.logo{
 font-size:30px;
 font-weight:800;
 color:var(--sky);
}

nav a{
 color:white;
 text-decoration:none;
 margin-left:24px;
 opacity:.9;
}

.hero{
 min-height:88vh;
 display:grid;
 grid-template-columns:1.1fr .9fr;
 align-items:center;
 gap:60px;
}

.hero h1{
 font-size:78px;
 line-height:1;
 margin-bottom:22px;
}

.hero p{
 font-size:21px;
 opacity:.78;
 margin-bottom:35px;
 max-width:620px;
}

.btn{
 display:inline-block;
 padding:16px 28px;
 border-radius:14px;
 background:linear-gradient(90deg,var(--blue),var(--sky));
 text-decoration:none;
 color:white;
 font-weight:bold;
 margin-right:14px;
 box-shadow:0 0 35px rgba(56,189,248,.3);
}

.hero-card{
 height:560px;
 border-radius:30px;
 background:
 radial-gradient(circle at 20% 20%,rgba(56,189,248,.28),transparent 30%),
 radial-gradient(circle at 80% 30%,rgba(37,99,235,.28),transparent 30%),
 linear-gradient(180deg,#101827,#060b16);
 border:1px solid var(--line);
 box-shadow:0 0 60px rgba(56,189,248,.14);
}

.section{
 padding:90px 0;
}

.section-title{
 font-size:46px;
 margin-bottom:40px;
}

.filters{
 display:flex;
 gap:14px;
 margin-bottom:30px;
 flex-wrap:wrap;
}

.filter{
 padding:12px 18px;
 border-radius:999px;
 border:1px solid var(--line);
 background:rgba(255,255,255,.04);
}

.grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:28px;
}

.product{
 background:rgba(255,255,255,.04);
 border:1px solid var(--line);
 border-radius:24px;
 overflow:hidden;
 transition:.3s;
}

.product:hover{
 transform:translateY(-8px);
 box-shadow:0 0 35px rgba(56,189,248,.15);
}

.thumb{
 height:290px;
 background:
 radial-gradient(circle at top,rgba(56,189,248,.24),transparent 40%),
 linear-gradient(180deg,#111827,#0a1020);
}

.content{
 padding:22px;
}

.content h3{
 margin-bottom:10px;
 font-size:24px;
}

.meta{
 display:flex;
 justify-content:space-between;
 margin-top:18px;
 opacity:.8;
}

.badge{
 display:inline-block;
 margin-top:12px;
 background:rgba(56,189,248,.12);
 color:var(--sky);
 padding:8px 12px;
 border-radius:999px;
 font-size:13px;
}

.feature-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:24px;
}

.feature{
 background:rgba(255,255,255,.04);
 border:1px solid var(--line);
 padding:30px;
 border-radius:24px;
}

.cta{
 background:
 radial-gradient(circle at top,rgba(56,189,248,.2),transparent 35%),
 #0f172a;
 border:1px solid var(--line);
 padding:70px;
 border-radius:34px;
 text-align:center;
}

.cta h2{
 font-size:54px;
 margin-bottom:18px;
}

footer{
 padding:40px 0;
 text-align:center;
 border-top:1px solid var(--line);
 opacity:.7;
 margin-top:80px;
}

@media(max-width:900px){
 .hero{
  grid-template-columns:1fr;
  padding:70px 0;
 }
 .hero h1{
  font-size:52px;
 }
}