:root{
  --bg:#0b0f19;
  --bg2:#0e1426;

  --surface:#121a33;
  --surface2:#0f1730;

  /* Strokes as HEX with alpha (RRGGBBAA) */
  --stroke:#ffffff1a;   /* ~ rgba(255,255,255,.10) */
  --stroke2:#ffffff24;  /* ~ rgba(255,255,255,.14) */
  --stroke3:#ffffff33;  /* ~ rgba(255,255,255,.20) */

  --text:#ffffff;
  --muted:#a9b3c7;

  --accent:#f4d06f;
  --accent2:#e7c15f;

  --shadow: 0 18px 48px #00000073;
  --shadow2: 0 10px 24px #00000059;

  --radius:16px;
  --radius2:12px;

  --font:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.5;
  background:
    radial-gradient(900px 420px at 10% 0%, #f4d06f1a, transparent 60%),
    radial-gradient(700px 420px at 85% 20%, #78aaff1a, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

h1,h2,h3{
  margin:0;
  font-weight:800;
  letter-spacing:-.02em;
}

p{ margin:.5rem 0 1rem; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(1120px, 92%);
  margin:0 auto;
}

.section{
  padding:76px 0;
}

.section.alt{
  background: linear-gradient(180deg, #ffffff05, #ffffff00);
  border-top: 1px solid #ffffff0f;
  border-bottom: 1px solid #ffffff0f;
}

.muted{ color:var(--muted); }
.small{ font-size:.92rem; }
.fineprint{ color:var(--muted); margin-top:18px; }

/* =========================
   Header / Nav
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#0b0f19b8;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ffffff14;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.brand-mark{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f4d06f2e;
  border:1px solid #f4d06f59;
  color:var(--accent);
}

.brand-text{ font-size:1.05rem; }

.nav{ position:relative; }

.nav-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:none;
  gap:18px;
  align-items:center;
}

.nav-menu a{
  color:#ffffffe0;
  font-weight:700;
  font-size:.95rem;
  padding:10px 10px;
  border-radius:10px;
}

.nav-menu a:hover{
  background:#ffffff0f;
  text-decoration:none;
}

.nav-toggle{
  background:transparent;
  border:0;
  cursor:pointer;
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  padding:10px;
  border-radius:12px;
}

.nav-toggle:hover{ background:#ffffff0a; }

.nav-toggle-bar{
  width:24px;
  height:2px;
  background:#ffffffe6;
}

.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;
}

@media (min-width: 860px){
  .nav-toggle{ display:none; }
  .nav-menu{ display:flex; }
}

/* Mobile nav open */
.nav-menu.open{
  display:grid;
  gap:8px;
  padding:10px;
}

@media (max-width: 859px){
  .nav-menu{
    position:absolute;
    right:0;
    top:52px;
    background:#0b0f19f0;
    border:1px solid #ffffff1a;
    border-radius:14px;
    box-shadow: var(--shadow);
    min-width:220px;
  }
  .nav-menu a{ padding:12px 12px; }
}

/* =========================
   Buttons
========================= */
.btn,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  border:1px solid transparent;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#161616;
  box-shadow: 0 10px 22px #f4d06f2e;
}

.btn:hover{ transform: translateY(-1px); text-decoration:none; }
.btn:active{ transform: translateY(0); }

.btn-ghost{
  background:#ffffff05;
  border-color:#f4d06f59;
  color:var(--accent);
}

.btn-ghost:hover{
  background:#f4d06f14;
  text-decoration:none;
  transform: translateY(-1px);
}

.btn-small{
  padding:10px 14px;
  border-radius:12px;
}

/* =========================
   Cards / Layout
========================= */
.card{
  background: linear-gradient(180deg, #ffffff05, #ffffff03);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.card-body{ padding:22px; }

.section-head{ margin-bottom:28px; }
.section-head h2{ font-size:2rem; }

.grid{ display:grid; gap:18px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffffeb;
  background:#ffffff0f;
  border:1px solid var(--stroke);
}

/* =========================
   HERO 
========================= */
.hero{
  padding-top:64px;
  padding-bottom:64px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:26px;
  align-items:center;
}

.hero-copy h1{
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height:1.08;
  margin-top:12px;
}

.hero-copy .lead{
  color:var(--muted);
  font-size:1.06rem;
  max-width:56ch;
  margin-top:12px;
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 18px;
}

.proof{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.proof li{
  font-size:.92rem;
  color:#ffffffdb;
  padding:8px 12px;
  border-radius:999px;
  background:#ffffff0d;
  border:1px solid #ffffff14;
}

.hero-card{
  justify-self:center;
  width:min(520px, 100%);
}

@media (min-width: 980px){
  .hero-grid{
    grid-template-columns: 1.08fr .92fr;
    gap:34px;
  }
  .hero-card{ justify-self:end; }
}


.mock{
  background: linear-gradient(180deg, #ffffff0f, #ffffff08);
  border: 1px solid var(--stroke2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 0;
}

.mock-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
  background: #ffffff08;
}

.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  opacity:.95;
  background:#ffffff52;
}

.dot:nth-child(1){ background:#ff5f57; }
.dot:nth-child(2){ background:#febc2e; }
.dot:nth-child(3){ background:#28c840; }

.mock-url{
  margin-left:auto;
  font-size:.82rem;
  font-weight:800;
  color:#ffffffdb;
  padding:6px 10px;
  border-radius:999px;
  background:#0000003d;
  border:1px solid var(--stroke);
}


.mock-body{
  margin: 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  overflow:hidden;
  background-color:#00000033;
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
}

/* Lines under the hero image */
.mock-lines{
  margin: 0 14px 0;
  display:grid;
  gap:8px;
}

.mock-lines span{
  height:8px;
  border-radius:999px;
  background:#ffffff0f;
  border:1px solid #ffffff0f;
}

.mock-lines span:nth-child(1){ width:70%; }
.mock-lines span:nth-child(2){ width:86%; }
.mock-lines span:nth-child(3){ width:62%; }

/* Cards row under the lines */
.mock-cards{
  margin: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.mock-card{
  height:54px;
  border-radius:12px;
  background:#ffffff0f;
  border:1px solid #ffffff14;
}

/* =========================
   WORK
========================= */
.work-card{
  display:grid;
  grid-template-columns: 1fr;
}

.work-thumb{
  height:260px;
  background-size: cover;
  background-position:center;
  border-bottom: 1px solid var(--stroke);
}

.work-thumb-legacy{
  background-image: url("../img/legacyxv2.jpg");
}

.bullets{
  margin:12px 0 0;
  padding-left:18px;
  color:#ffffffe0;
}

.card-actions{ margin-top:16px; }

/* =========================
   SERVICES / PRICING
========================= */
@media (min-width: 900px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .pricing-grid{ grid-template-columns: repeat(3, 1fr); }
}

.pricing-card{ text-align:center; }

.price{
  font-size: 1.65rem;
  font-weight: 900;
  margin: 8px 0 10px;
}

.pricing-card.featured{
  border-color:#f4d06f66;
  box-shadow: 0 18px 46px #f4d06f1a, var(--shadow2);
}

/* =========================
   CONTACT
========================= */
.contact-grid{
  display:grid;
  gap:18px;
  align-items:start;
}

@media (min-width: 980px){
  .contact-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Quick details list tidy */
#contact .bullets{
  margin: 10px 0 0;
  padding-left: 18px;
}

/* Form fields */
.field{
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

label{
  font-weight:800;
  color:#ffffffeb;
}

input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background:#00000038;
  color:#ffffffeb;
  outline:none;
}

input:focus, select:focus, textarea:focus{
  border-color:#f4d06f66;
  box-shadow: 0 0 0 4px #f4d06f1a;
}

.form .btn{
  width:100%;
  margin-top:6px;
}

/* Privacy card paragraph spacing */
#contact .card-body p{ line-height:1.55; }

/* =========================
   FOOTER
========================= */
.site-footer{
  border-top: 1px solid #ffffff14;
  padding: 22px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:14px;
}

.link{
  color:#ffffffcc;
  font-weight:800;
}

.link:hover{
  color:#ffffffef;
  text-decoration:none;
}