:root{
  --panel: rgba(18,22,28,.72);
  --ring: rgba(255,255,255,.10);
  --text: #f8fbff;
  --muted: #e6eefc;
  --brand: #ffd166;
  --brand-2: #fca311;
  --shadow: 0 12px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:#0b1220;
}
.top{position:fixed; inset:0 0 auto 0; padding:14px 22px; z-index:30;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent); backdrop-filter: blur(4px);}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{width:38px; height:38px; border-radius:50%; box-shadow:var(--shadow)}
.brand-name{font-size:20px; text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hero{min-height:100svh; background-image:url('images/hero-bg.jpg'); background-size:cover; background-position:center; position:relative;}
.hero .overlay{position:absolute; inset:0;
  background: radial-gradient(1200px 800px at 50% 15%, rgba(255,223,150,.18), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.65)); mix-blend-mode:multiply;}
.hero-inner{position:relative; z-index:10; max-width:1100px; margin:0 auto; padding:20svh 24px 60px; text-align:center;}
h1{font-size:clamp(42px, 6vw, 64px); margin:0 0 12px; line-height:1.02; text-shadow:0 6px 24px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.4)}
.tag{max-width:840px; margin:0 auto 28px; color:var(--muted); font-size:clamp(16px,2.2vw,20px); text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cta{display:flex; gap:16px; justify-content:center; margin: 20px 0 28px;}
.btn{display:inline-block; padding:12px 20px; border-radius:999px; text-decoration:none; font-weight:700; letter-spacing:.2px; border:1px solid var(--ring);
  background:rgba(255,255,255,.06); color:var(--text); transition:.2s transform cubic-bezier(.2,.9,.2,1), box-shadow .2s, filter .2s; backdrop-filter:blur(2px);}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.btn.primary{background:linear-gradient(180deg, var(--brand), var(--brand-2)); color:#1a1304; border:0;}
.btn.ghost{background:rgba(0,0,0,.25)}
.cards{display:grid; grid-template-columns:1fr; gap:18px; margin:6vh auto 0; max-width:980px;}
@media(min-width:860px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--panel); border-radius:18px; padding:18px 20px; text-align:left; border:1px solid var(--ring); box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; letter-spacing:.5px; font-size:14px; text-transform:uppercase; color:#e7eefc}
.contact{margin:30px 0 0; color:#e8f0ff; text-shadow:0 1px 0 rgba(0,0,0,.35)}
.contact a{color:#c7e0ff}
.foot{text-align:center; color:#cfd9ea; padding:24px 12px 40px; font-size:13px; opacity:.9}