/* Prompt.Filmmaker — Brand Styles */
:root{
  --color-primary:#57b6bf;
  --color-s1:#BF8358;
  --color-s2:#5B7C80;
  --color-s3:#6A5D54;
  --color-s4:#363F40;
  --ink:#0e1516;
  --muted:#6e7d7f;
  --bg:#0b0f10;
  --card:#12181a;
  --ring: rgba(87,182,191,.35);
  --radius:20px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#e9f1f2;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(87,182,191,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(191,131,88,.12), transparent 55%),
              linear-gradient(180deg,#0a0e0f,#0c1112 30%, #0e1315 70%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,.brand__name{font-family:'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing:.5px}

a{color:var(--color-primary); text-decoration:none}
a:hover{opacity:.9}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; backdrop-filter: blur(10px);
  background: rgba(11,15,16,.6); border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{display:flex; align-items:center; gap:12px}
.brand__logo{width:48px;height:48px; object-fit:contain; border-radius:12px; background:#fff}
.brand__name{font-size:28px; line-height:1}
.brand__tag{display:block; font-size:12px; color:var(--muted); margin-top:2px}

.nav a{margin:0 10px; padding:8px 12px; border-radius:12px}
.nav a:hover{background:rgba(255,255,255,.05)}

.hero{
  position:relative;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px;
  align-items:center; padding:64px 24px 40px; max-width:1100px; margin:0 auto;
}
.hero__copy h1{
  font-size: clamp(42px, 6vw, 84px);
  line-height: .95; margin:0 0 14px;
}
.hero__copy h1 span{color:var(--color-primary); text-shadow: 0 6px 28px var(--ring)}
.hero__copy p{max-width:58ch; color:#cfe4e6}
.cta-row{display:flex; gap:12px; margin:20px 0 8px}
.btn{
  --bg:var(--color-primary);
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:700; border:1px solid transparent;
  box-shadow: var(--shadow);
}
.btn--primary{background:var(--bg); color:#0b0f10}
.btn--ghost{background:transparent; color:#e9f1f2; border-color:rgba(255,255,255,.14)}
.btn--secondary{background:var(--color-s2); color:#fff}
.btn:hover{transform: translateY(-1px); box-shadow: 0 14px 40px rgba(0,0,0,.45)}

.trust{display:flex; gap:18px; padding:0; margin:18px 0 0; list-style:none; color:#b9c8c9; font-size:14px}
.trust li{display:flex; gap:8px}
.trust li::before{content:'✔'; color:var(--color-primary)}

.hero__art{position:relative; display:flex; align-items:center; justify-content:center}
.hero__art img{width:100%; max-width:420px; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.hero__art .badge{
  position:absolute; top:6%; right:8%;
  background:var(--color-s1); padding:8px 12px; border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}

.hero__bg{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(600px 280px at 70% 20%, rgba(91,124,128,.25), transparent 60%),
    conic-gradient(from 180deg at 30% 0%, rgba(106,93,84,.15), transparent);
}

.section{padding:56px 24px; max-width:1100px; margin:0 auto}
.section__head h2{font-size: clamp(28px, 4.5vw, 56px); margin:0}
.section__head p{color:#c7d8da; margin:.35rem 0 1.5rem}

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

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow); position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(450px 120px at 20% -10%, var(--ring), transparent 55%);
  opacity:.7;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.45) }
.card__media{display:flex; align-items:center; justify-content:center; height:110px; margin-bottom:8px}
.card__media img{height:64px; width:64px; object-fit:contain; background:white; border-radius:12px; padding:6px}
.card__title{font-size:28px; margin:.1rem 0 .25rem}
.card__body{color:#c6d6d8; min-height:64px}

.feature{
  background: var(--card);
  border:1px solid rgba(255,255,255,.06);
  padding:18px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.feature svg{width:28px;height:28px; fill:var(--color-primary)}
.feature h3{font-size:24px; margin:.35rem 0 .25rem}

.how .steps{counter-reset: step; max-width:900px; margin:0 auto; padding-left:0}
.how .steps li{list-style:none; background:var(--card); border:1px solid rgba(255,255,255,.06); margin:12px 0; padding:12px 16px; border-radius:16px; display:flex; gap:12px; align-items:center}
.how .steps li span{display:inline-grid; place-items:center; width:28px;height:28px; border-radius:999px; background:var(--color-primary); color:#081012; font-weight:900}

.site-footer{padding:28px 24px; border-top:1px solid rgba(255,255,255,.06); margin-top:28px}
.footer__inner{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.brand--footer .brand__logo{width:36px;height:36px}

@media (max-width: 880px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .brand__tag{display:none}
  .cta-row{justify-content:center}
  .trust{justify-content:center; flex-wrap:wrap}
}