:root{
  --navy:#0E1015;
  --gold:#C7A552;
  --off:#FAFAFA;
  --overlay: rgba(14,16,21,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--navy);color:var(--off);font-family:ui-serif, Georgia, 'Times New Roman', serif;}

body{opacity:1; transition: opacity .35s ease;}
body.page-fade-out{opacity:0.01}

header, footer{
  background:rgba(14,16,21,.76); backdrop-filter: blur(6px);
  border-color: rgba(199,165,82,.14);
}
header{
  position:relative; z-index:20;
  border-bottom:1px solid rgba(199,165,82,.14);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px
}
footer{border-top:1px solid rgba(199,165,82,.14); padding:28px; text-align:center; color:var(--gold)}

.brand{display:flex;gap:10px;align-items:center}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(199,165,82,.35)}
.brand span{letter-spacing:.14em;font-weight:800}
nav a{color:var(--off);text-decoration:none;opacity:.95;margin-left:18px}
nav a:hover{color:var(--gold)}

.hero{position:relative;min-height:84vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.canvas-bg, .canvas-overlay{position:absolute;inset:0;}
.canvas-bg{
  background:url('assets/hero-bg.jpg') center/cover no-repeat;
  transform:scale(1.2); opacity:0; filter:blur(6px);
  animation:canvasIn 2000ms ease forwards;
}
.canvas-overlay{background:linear-gradient(to bottom, rgba(14,16,21,.25), rgba(14,16,21,.35));opacity:0;animation:overlayIn 2400ms ease forwards 900ms}

.v-brush{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none; opacity:0; transform:scale(1.2);
  animation:vIn 2000ms ease forwards 200ms}
.v-brush img{width:min(48vw,540px);max-width:92vw;height:auto;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55));}

.center-copy{position:relative;z-index:5;text-align:center;padding:24px;margin-top:min(44vh,300px)}
.center-copy h1{font-size:clamp(24px,3.2vw,40px);margin:0 0 10px 0;font-weight:800;opacity:0;animation:lineIn 900ms ease forwards 1800ms}
.center-copy p{opacity:0;animation:lineIn 900ms ease forwards 2000ms}
.btn{display:inline-block;background:var(--gold);color:var(--navy);padding:12px 18px;border-radius:10px;font-weight:800;text-decoration:none;
  margin-top:12px;box-shadow:0 8px 22px rgba(199,165,82,.28);transition:.18s transform,.18s box-shadow;opacity:0;animation:lineIn 900ms ease forwards 2200ms}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(199,165,82,.35)}

.after-integrate .v-brush{opacity:.42 !important; transition:opacity 900ms ease;}
.after-integrate .canvas-bg{filter:blur(.7px)}

@keyframes canvasIn{
  0%{opacity:0; transform:scale(1.2); filter:blur(6px)}
  60%{opacity:1; transform:scale(1.02); filter:blur(1px)}
  100%{opacity:1; transform:scale(1); filter:blur(0)}
}
@keyframes vIn{
  0%{opacity:0; transform:scale(1.2)}
  100%{opacity:1; transform:scale(1)}
}
@keyframes lineIn{to{opacity:1; transform:none}}
@keyframes overlayIn{to{opacity:1}}

.section{padding:60px 24px;max-width:1100px;margin:0 auto;border-top:1px solid rgba(199,165,82,.12)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:rgba(255,255,255,.02);border:1px solid rgba(199,165,82,.12);border-radius:16px;padding:18px}

form.contact{max-width:600px;margin:0 auto;display:grid;gap:12px}
input,textarea{background:transparent;border:1px solid var(--gold);color:var(--off);padding:12px;border-radius:10px}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(199,165,82,.35)}