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

:root{
  --ink:#0d0d0c;
  --paper:#f6f4ef;
  --forge:#161614;
  --ember:#ccf24d;
  --ember-bright:#d8ff5c;
  --muted:#75736d;
  --muted-light:rgba(246,244,239,.55);
  --border:rgba(13,13,12,0.1);
  --font-display:'Clash Display','Syne',sans-serif;
  --font-body:'General Sans','DM Sans',system-ui,sans-serif;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.005em;
}

body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:9999;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* LOGO MARK */
.logo-mark{
  width:32px;height:32px;
  flex-shrink:0;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.5rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .3s, background .3s;
}

nav.scrolled{
  padding:1rem 3rem;
  background:rgba(22,22,20,.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(246,244,239,.06);
}

.nav-logo{
  display:flex;align-items:center;
  text-decoration:none;
}

.nav-logo-img{
  height:38px;width:auto;display:block;
  transition:height .3s;
}

nav.scrolled .nav-logo-img{height:32px}

.nav-links{
  display:flex;align-items:center;gap:2.25rem;
  list-style:none;
}

.nav-links a{
  color:var(--muted-light);
  text-decoration:none;
  font-size:.9375rem;
  font-weight:500;
  transition:color .2s;
}

.nav-links a:hover{color:var(--paper)}

.nav-cta{
  background:var(--ember);
  color:var(--ink)!important;
  padding:.5625rem 1.375rem;
  border-radius:100px;
  font-weight:600!important;
  font-size:.9375rem!important;
  transition:background .2s, transform .15s!important;
}

.nav-cta:hover{background:var(--ember-bright)!important;transform:translateY(-1px)}

/* HAMBURGER TOGGLE */
.nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  flex-direction:column;gap:5px;
  padding:6px;
  z-index:110;
}
.nav-toggle span{
  display:block;width:24px;height:2px;
  background:var(--paper);border-radius:2px;
  transition:transform .3s, opacity .3s;
}
nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{
  min-height:100vh;
  background:var(--forge);
  display:grid;
  grid-template-rows:1fr auto;
  padding:0 3rem 4rem;
  position:relative;
  overflow:hidden;
}

.hero-bg-circle{
  position:absolute;
  width:1000px;height:1000px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(204,242,77,.07) 0%, transparent 65%);
  top:-250px;right:-250px;
  pointer-events:none;
}

.hero-emblem{
  position:absolute;
  right:4%;
  top:50%;
  transform:translateY(-50%) rotate(-4deg);
  height:78vh;
  max-height:760px;
  width:auto;
  opacity:.10;
  pointer-events:none;
  z-index:0;
  filter:grayscale(35%) brightness(1.15);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 45%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 45%, transparent 78%);
}

.hero-content{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:4rem;
  align-items:end;
  padding-top:12rem;
  max-width:1400px;
  margin:0 auto;
  width:100%;
  position:relative;
  z-index:1;
}

.hero-left h1{
  font-family:var(--font-display);
  font-size:clamp(3.5rem,6.5vw,6.5rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.035em;
  color:var(--paper);
  margin-bottom:2rem;
}

.hero-left h1 em{
  font-style:normal;
  color:var(--ember);
  position:relative;
}

.hero-sub{
  font-size:1.1875rem;
  color:var(--muted-light);
  line-height:1.6;
  max-width:400px;
  font-weight:400;
}

.hero-right{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:2.25rem;
  padding-bottom:.5rem;
}

.hero-stat-row{
  display:flex;
  gap:2.75rem;
  padding-top:2rem;
  border-top:1px solid rgba(246,244,239,.1);
}

.hero-stat-num{
  display:block;
  font-family:var(--font-display);
  font-size:2.125rem;
  font-weight:600;
  color:var(--paper);
  letter-spacing:-.025em;
}

.hero-stat-label{
  display:block;
  font-size:.875rem;
  color:rgba(246,244,239,.45);
  margin-top:.375rem;
  font-weight:400;
}

.hero-cta-group{
  display:flex;
  gap:1rem;
  align-items:center;
}

.btn-primary{
  background:var(--ember);
  color:var(--ink);
  padding:.9375rem 2rem;
  border-radius:100px;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform .2s, background .2s;
  letter-spacing:-.01em;
}

.btn-primary:hover{transform:translateY(-2px);background:var(--ember-bright)}

.btn-ghost{
  color:var(--muted-light);
  padding:.9375rem 1.5rem;
  font-size:1rem;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:color .2s;
}

.btn-ghost:hover{color:var(--paper)}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(204,242,77,.1);
  border:1px solid rgba(204,242,77,.2);
  border-radius:100px;
  padding:.4375rem 1rem;
  font-size:.875rem;
  font-weight:500;
  color:var(--ember);
  margin-bottom:1.75rem;
  width:fit-content;
}

.pulse{
  width:6px;height:6px;
  background:var(--ember);
  border-radius:50%;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}

/* MARQUEE */
.marquee-section{
  background:var(--ember);
  padding:1.125rem 0;
  overflow:hidden;
  white-space:nowrap;
}

.marquee-track{
  display:inline-flex;
  animation:marquee 22s linear infinite;
}

.marquee-item{
  font-family:var(--font-display);
  font-size:.9375rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:0 2.5rem;
  display:inline-flex;
  align-items:center;
  gap:2.5rem;
}

.marquee-item::after{content:'✦';opacity:.45}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* SECTIONS */
section{padding:7rem 3rem}
.section-inner{max-width:1400px;margin:0 auto}

.section-label{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.25rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.section-label::before{
  content:'';
  display:block;
  width:28px;height:1px;
  background:currentColor;
}

/* SERVICES */
.forge-section{background:var(--paper)}

.forge-header{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:4rem;
  align-items:end;
  margin-bottom:4.5rem;
}

.forge-header h2{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.5vw,4.25rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
}

.forge-header p{
  font-size:1.125rem;
  color:var(--muted);
  line-height:1.6;
  max-width:380px;
  align-self:end;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
}

.service-card{
  background:var(--paper);
  padding:2.5rem 2rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  transition:background .25s;
}

.service-card:hover{background:#efece4}

.service-icon{
  width:48px;height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.service-icon svg{width:24px;height:24px}
.service-icon.dark{background:var(--forge)}

.service-card h3{
  font-family:var(--font-display);
  font-size:1.3125rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
}

.service-card p{
  font-size:.9688rem;
  color:var(--muted);
  line-height:1.6;
  flex:1;
}

.service-price{
  font-family:var(--font-display);
  font-size:1.625rem;
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--ink);
}

.service-price span{
  font-size:.9375rem;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  font-family:var(--font-body);
}

/* PROCESS */
.process-section{background:var(--forge);color:var(--paper)}
.process-section .section-label{color:rgba(246,244,239,.45)}

.process-section h2{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.5vw,4.25rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1;
  margin-bottom:4.5rem;
  max-width:640px;
}

.process-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(246,244,239,.1);
  border-radius:24px;
  overflow:hidden;
}

.step{
  padding:3rem 2.5rem;
  background:var(--forge);
}

.step-num{
  font-family:var(--font-display);
  font-size:3.5rem;
  font-weight:600;
  color:rgba(246,244,239,.09);
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:2rem;
}

.step h3{
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:.875rem;
  color:var(--paper);
}

.step p{
  font-size:.9688rem;
  color:rgba(246,244,239,.55);
  line-height:1.6;
}

.step-badge{
  display:inline-flex;
  margin-top:1.5rem;
  background:rgba(204,242,77,.12);
  border:1px solid rgba(204,242,77,.22);
  color:var(--ember);
  padding:.4375rem .9375rem;
  border-radius:100px;
  font-size:.875rem;
  font-weight:500;
}

/* PRICING */
.pricing-section{background:#efece4}

.pricing-header{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  margin-bottom:3.5rem;
}

.pricing-header h2{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.5vw,4.25rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1;
}

.pricing-note{
  font-size:.9688rem;
  color:var(--muted);
  max-width:260px;
  text-align:right;
  line-height:1.55;
}

.pricing-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.pricing-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:24px;
  padding:2.75rem;
  transition:transform .25s;
}

.pricing-card:hover{transform:translateY(-4px)}

.pricing-card.featured{
  background:var(--forge);
  border-color:transparent;
  color:var(--paper);
}

.pricing-card-label{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.5rem;
}

.pricing-card.featured .pricing-card-label{color:rgba(246,244,239,.45)}

.pricing-card-price{
  font-family:var(--font-display);
  font-size:3.75rem;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:.625rem;
}

.pricing-card-desc{
  font-size:.9688rem;
  color:var(--muted);
  margin-bottom:2rem;
  line-height:1.55;
}

.pricing-card.featured .pricing-card-desc{color:rgba(246,244,239,.55)}

.pricing-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.875rem;
  margin-bottom:2.5rem;
}

.pricing-features li{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.9688rem;
  color:var(--ink);
}

.pricing-card.featured .pricing-features li{color:rgba(246,244,239,.85)}

.feat-check{
  width:21px;height:21px;
  background:var(--ember);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.feat-check svg{width:11px;height:11px}

.btn-card{
  display:block;
  text-align:center;
  padding:.9375rem;
  border-radius:100px;
  font-weight:600;
  font-size:.9688rem;
  text-decoration:none;
  transition:transform .2s, background .2s;
}

.btn-card:hover{transform:translateY(-1px)}
.btn-card-dark{background:var(--ink);color:var(--paper)}
.btn-card-ember{background:var(--ember);color:var(--ink)}

/* CTA */
.cta-section{
  background:var(--ember);
  padding:7rem 3rem;
  text-align:center;
}

.cta-section h2{
  font-family:var(--font-display);
  font-size:clamp(3rem,6.5vw,5.5rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:.95;
  color:var(--ink);
  margin-bottom:1.5rem;
}

.cta-section p{
  font-size:1.1875rem;
  color:rgba(13,13,12,.6);
  max-width:420px;
  margin:0 auto 3rem;
  line-height:1.6;
}

/* CONTACT */
.contact-section{background:var(--paper)}
.contact-inner{max-width:720px;margin:0 auto}

.contact-inner h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,3.5rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.05;
  margin-bottom:1rem;
}

.contact-inner > p{
  color:var(--muted);
  font-size:1.125rem;
  margin-bottom:3rem;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}

.form-field{display:flex;flex-direction:column;gap:.5rem}

.form-field label{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
}

.form-field input,
.form-field select,
.form-field textarea{
  background:#efece4;
  border:1px solid transparent;
  border-radius:14px;
  padding:1rem 1.25rem;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  transition:border-color .2s, background .2s;
  outline:none;
  width:100%;
}

.form-field input::placeholder,
.form-field textarea::placeholder{color:#a3a199}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--ink);
  background:#eae7df;
}

.form-field textarea{resize:none}

.form-submit{
  margin-top:1.5rem;
  width:100%;
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:1.1875rem;
  border-radius:100px;
  font-family:var(--font-body);
  font-size:1.0625rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .15s;
  letter-spacing:-.01em;
}

.form-submit:hover{background:#000;transform:translateY(-2px)}

.form-fine{
  text-align:center;
  margin-top:1.25rem;
  font-size:.875rem;
  color:var(--muted);
}

.form-fine a{color:var(--ink);text-underline-offset:3px}

/* FOOTER */
footer{
  background:var(--forge);
  padding:3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.footer-logo{
  display:flex;align-items:center;
  text-decoration:none;
}

.footer-logo-img{
  height:34px;width:auto;display:block;
}

.footer-copy{font-size:.875rem;color:rgba(246,244,239,.35)}

.footer-links{display:flex;gap:2rem;list-style:none}

.footer-links a{
  font-size:.875rem;
  color:rgba(246,244,239,.4);
  text-decoration:none;
  transition:color .2s;
}

.footer-links a:hover{color:var(--paper)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* MOBILE */
@media(max-width:768px){
  nav{padding:1.25rem 1.5rem}
  nav.scrolled{padding:1rem 1.5rem}
  .nav-toggle{display:flex}
  .nav-links{
    display:none;
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(22,22,20,.97);
    backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;justify-content:center;
    gap:2rem;z-index:105;
    padding:2rem;
  }
  nav.nav-open .nav-links{
    display:flex;
  }
  .nav-links a{
    font-size:1.5rem;
    color:var(--paper);
  }
  .nav-links .nav-cta{
    font-size:1.125rem!important;
    padding:.75rem 2rem;
  }
  section{padding:5rem 1.5rem}
  .hero{padding:0 1.5rem 3rem}
  .hero-content{grid-template-columns:1fr;padding-top:8rem;gap:2.5rem}
  .hero-right{display:none}
  .hero-emblem{right:-18%;height:60vh;opacity:.07}
  .forge-header{grid-template-columns:1fr;gap:1.5rem}
  .services-grid{grid-template-columns:1fr}
  .service-card{padding:2.25rem 1.75rem}
  .process-steps{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr!important}
  .pricing-header{grid-template-columns:1fr}
  .pricing-note{text-align:left;max-width:none;margin-top:1rem}
  footer{flex-direction:column;gap:2rem;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center}
  .form-row{grid-template-columns:1fr}
}