*{box-sizing:border-box}
:root{
  --bg:#120a10; --panel:#1a0f16; --fg:#fff4ec; --muted:#c2a08f;
  --line:rgba(251,146,60,.18); --accent:#FB923C; --accent2:#E11D77;
  --radius:14px; --maxw:1120px;
}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(18,10,16,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:16px; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; font-size:15px; color:var(--fg)}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px}
.nav-links{margin-left:auto; display:flex; gap:24px; align-items:center}
.nav-links a{color:var(--muted); font-size:14px}
.nav-links a:hover{color:var(--fg); text-decoration:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px; font-weight:600; font-size:14px;
  border:1px solid transparent; cursor:pointer; transition:.18s; text-align:center}
.btn-primary{background:linear-gradient(96deg,var(--accent),var(--accent2)); color:#fff}
.btn-primary:hover{filter:brightness(1.1); text-decoration:none}
.btn-ghost{border-color:var(--line); color:var(--fg); background:rgba(251,146,60,.05)}
.btn-ghost:hover{border-color:var(--accent); text-decoration:none}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}

/* hero */
.hero{position:relative; padding:96px 0 74px; text-align:center; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% -20%;
  background:radial-gradient(closest-side at 28% 32%, rgba(225,29,119,.22), transparent 70%),
             radial-gradient(closest-side at 74% 66%, rgba(251,146,60,.2), transparent 70%);
  filter:blur(10px); z-index:0}
.hero>*{position:relative; z-index:1}
h1{margin:0 0 18px; font-size:clamp(32px,5.6vw,54px); font-weight:700; line-height:1.12;
  letter-spacing:-.01em;
  background:linear-gradient(96deg,#FFEDD5 8%,var(--accent) 48%,var(--accent2) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:0 auto 30px; max-width:680px; color:var(--muted); font-size:clamp(16px,2.3vw,19px)}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* sections */
section{padding:66px 0}
h2{margin:0 0 12px; font-size:clamp(24px,3.6vw,34px); font-weight:700; letter-spacing:-.01em}
.sub{margin:0 0 36px; color:var(--muted); max-width:660px}
.eyebrow{display:inline-block; margin-bottom:14px; padding:5px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(251,146,60,.06);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}

/* grids */
.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{display:block; padding:26px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel),rgba(26,15,22,.4)); transition:.2s; color:var(--fg)}
a.card:hover{border-color:rgba(251,146,60,.5); transform:translateY(-3px); text-decoration:none}
.card h3{margin:0 0 9px; font-size:18px; font-weight:650}
.card p{margin:0; color:var(--muted); font-size:14.5px}
.card .ico{display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:16px; border-radius:11px;
  background:linear-gradient(150deg,rgba(251,146,60,.22),rgba(225,29,119,.16));
  border:1px solid var(--line); font-size:20px}
.card .more{display:inline-block; margin-top:15px; font-size:13.5px; color:var(--accent); font-weight:600}

/* list */
ul.check{margin:0; padding:0; list-style:none}
ul.check li{position:relative; padding-left:26px; margin-bottom:11px; color:var(--muted)}
ul.check li::before{content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700}

/* form */
.form-wrap{max-width:620px; margin:0 auto; padding:32px; border:1px solid var(--line);
  border-radius:18px; background:linear-gradient(165deg,var(--panel),rgba(26,15,22,.5))}
.field{margin-bottom:16px}
label{display:block; margin-bottom:7px; font-size:13.5px; font-weight:600; color:var(--fg)}
input,select,textarea{width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:rgba(18,10,16,.75); color:var(--fg);
  font:inherit; font-size:15px; transition:.16s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(251,146,60,.14)}
textarea{min-height:112px; resize:vertical}
select option{background:#1a0f16; color:var(--fg)}
.hint{margin-top:14px; font-size:12.5px; color:var(--muted); text-align:center}
.hp{position:absolute!important; left:-9999px}

/* footer */
footer{border-top:1px solid var(--line); padding:42px 0 34px; margin-top:20px}
.foot{display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.foot-col h4{margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg)}
.foot-col a{display:block; color:var(--muted); font-size:14px; margin-bottom:8px}
.foot-col a:hover{color:var(--accent); text-decoration:none}
.copy{margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  font-size:12.5px; color:rgba(194,160,143,.6); text-align:center; letter-spacing:.05em}

/* article */
.crumb{margin-bottom:18px; font-size:13.5px; color:var(--muted)}
article{max-width:820px}
article h2{margin-top:42px}
article p{color:var(--muted)}
.tag{display:inline-block; padding:4px 12px; margin:0 6px 6px 0; border-radius:999px;
  border:1px solid var(--line); font-size:12.5px; color:var(--accent)}
.callout{margin:34px 0; padding:24px; border-radius:var(--radius);
  border:1px solid var(--line); background:rgba(251,146,60,.05)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* hide Netlify badge */
#netlify-badge,.netlify-badge,[id*="netlify-badge"],
a[href*="netlify.com"][target="_blank"][rel*="nofollow"]{display:none!important}