:root{
  --bg:#0b0c10;
  --bg-2:#0f1116;
  --fg:#e9eaf2;
  --muted:#b6b7c2;

  /* True golds */
  --gold-1:#F5D37D;
  --gold-2:#D6B45A;
  --gold-3:#CBA135;
  --gold-4:#A57D2A;

  --glass-1:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.04);
  --ring:rgba(203,161,53,.28);
  --radius:18px;
  --shadow:0 24px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--fg);
  background: radial-gradient(1200px 1200px at 15% -10%, #1b1e26 0%, var(--bg) 45%) fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}

/* Background layers */
#bg-stars{ position:fixed; inset:0; z-index:0; }
#aurora{
  position:fixed; inset:-20%; z-index:0;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(245,211,125,.16), transparent 60%),
    radial-gradient(45% 35% at 80% 30%, rgba(214,180,90,.12), transparent 60%),
    radial-gradient(55% 45% at 50% 80%, rgba(203,161,53,.10), transparent 60%);
  filter: blur(60px) saturate(120%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform: translateY(-2%) scale(1.02) }
  100%{ transform: translateY(2%) scale(1.08) }
}

/* Header */
.brand{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(18px,4vw,36px);
}
.logo{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg);
  font-weight:800; font-family: Montserrat, Inter, sans-serif; letter-spacing:.3px;
}
.logo img{ width:56px; height:56px; object-fit:contain; filter: drop-shadow(0 8px 24px rgba(203,161,53,.35)); }
.logo span{ font-size: clamp(20px,3.2vw,24px); }

.links{ display:flex; align-items:center; gap:10px; }
.link{ color:var(--muted); text-decoration:none; font-weight:600; }
.link:hover{ color:#fff; text-shadow:0 0 12px rgba(245,211,125,.35) }
.dot{ width:4px; height:4px; border-radius:50%; background:var(--gold-2); opacity:.7 }

/* Glass container */
.glass{
  background: linear-gradient(to bottom right, var(--glass-1), var(--glass-2));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Extra padding variants for glass sections */
.pad-xl{ padding: clamp(28px, 5vw, 48px); }

/* Hero */
.hero{
  margin-inline:auto; width:min(1200px,100%);
  margin-top:10px; padding:clamp(28px,6vw,64px);
  text-align:center; display:grid; gap:18px; justify-items:center;
  position:relative; z-index:1;
  animation: rise .8s ease both .1s;
}
@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

.eyebrow{
  color:var(--muted); text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:.92rem; margin:0;
}
.title{
  margin:0;
  font-size:clamp(44px,7vw,96px);
  line-height:1.05; font-weight:800; font-family: Montserrat, Inter, sans-serif;
}
.title .line-1,
.title .line-2{ display:block }
.title .line-2{
  will-change: transform;
  transform-origin:center;
}
.gold-gradient{
  background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 35%, var(--gold-3) 65%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 10px 30px rgba(203,161,53,.28));
}
.type{ white-space:nowrap } /* keeps the typed word on a single line */
.cursor{
  display:inline-block; width:1ch; height:1em; translate:0 .18em;
  background:linear-gradient(180deg, #fff, var(--gold-1));
  animation:blink .9s steps(1,end) infinite;
}
@keyframes blink{ 50%{opacity:0} }

.subtitle{
  margin:0 auto; max-width:70ch; color:var(--muted);
  font-size:clamp(16px,2.2vw,19px);
}

/* CTAs */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  padding:16px 20px; border-radius:14px;
  font-weight:800; letter-spacing:.3px; transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.btn.primary{
  color:#121212;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 16px 36px rgba(203,161,53,.32);
}
.btn.primary:hover{ transform: translateY(-1px); filter:saturate(112%) }
.btn.primary:active{ transform: translateY(0) scale(.98) }
.btn.ghost{
  color:var(--fg);
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.18);
}
.btn.ghost:hover{ background: rgba(255,255,255,.06) }

/* Pills */
.pills{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  list-style:none; padding:0; margin:6px 0 0;
}
.pills li{
  padding:8px 12px; border-radius:999px; color:var(--muted);
  background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
  font-weight:700; font-size:14px;
}

/* Sections */
.section{ position:relative; z-index:1; width:min(1200px,100%); margin:56px auto; padding:0 24px; }
.section-title{ margin:0 0 16px; font-weight:800; letter-spacing:.4px; font-size:clamp(20px,3vw,30px) }

/* Services cards */
.cards{
  display:grid; gap:14px;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
}
.card{
  padding:16px; border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  min-height:120px;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, opacity .4s ease, translate .4s ease;
  opacity:0; translate: 0 10px;
}
.card h3{ margin:0 0 6px; font-size:18px; font-weight:800 }
.card p{ margin:0; color:var(--muted) }
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(203,161,53,.18);
  border-color: rgba(203,161,53,.35);
}

/* Tech marquee */
.marquee{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  opacity:0; translate: 0 10px; transition: opacity .4s ease, translate .4s ease;
}
.marquee__track{
  display:flex; gap:28px; padding:14px 28px; white-space:nowrap;
  animation:scroll 38s linear infinite;
}
.marquee span{
  display:inline-block; padding:8px 12px; border-radius:999px; font-weight:700;
  color:#121212; background:linear-gradient(135deg, var(--gold-1), var(--gold-3));
}
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* FORMS — prettier */
.pretty label{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px;
}
.pretty select{
  appearance:none;
  background:rgba(0,0,0,.35);
  color:var(--fg);
}
.notify-form{
  margin-inline:auto; width:min(900px,100%);
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center
}
.notify-form input{
  flex:1; min-width:260px;
  padding:16px 18px; border-radius:999px; color:var(--fg);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  outline:none; font-size:16px;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0); /* for smooth focus glow */
}
.notify-form input:focus{
  border-color:var(--gold-3); box-shadow:0 0 0 4px var(--ring)
}
.notify-form .btn{
  border-radius:999px; padding:16px 22px;
}
.links-row{
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.links-row.roomy{
  margin-top:26px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Project form */
.form{
  display:grid; grid-template-columns: repeat(2,1fr); gap:14px;
  padding:22px; border-radius:16px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
}
.form label{ display:flex; flex-direction:column; gap:6px; font-weight:600 }
.form input, .form textarea, .form select{
  padding:14px 16px; border-radius:12px; color:var(--fg);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  outline:none; font-size:16px;
}
.form input:focus, .form textarea:focus, .form select:focus{
  border-color:var(--gold-3); box-shadow:0 0 0 4px var(--ring)
}
.form .full{ grid-column:1/-1 }
.form .form-note{ color:var(--muted); margin:8px 0 0 }

/* Footer */
.footer{
  margin-top:56px; padding:32px 24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  color:var(--muted);
}
.foot-right{ display:flex; gap:10px; align-items:center }

/* Accessibility & responsive */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Reveal-on-scroll base hidden; .in-view toggled via JS */
.reveal .card.in-view{ opacity:1; translate: 0 0 }
.marquee.in-view{ opacity:1; translate: 0 0 }

@media (max-width:720px){
  .title{ font-size:clamp(36px,8.5vw,72px) }
  .form{ grid-template-columns:1fr }
}

/* Submit loading state */
.btn.loading {
  opacity: .7;
  pointer-events: none;
  position: relative;
}
.btn.loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.35);
  border-top-color: rgba(0,0,0,.85);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }