/* ─── RESET & ROOT ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --clr-bg:       #e2e2e2;
  --clr-surface: #e2e2e2;
  --clr-card:    #d6d6d6;
  --clr-border:  rgba(255,255,255,.07);
  --clr-text:    #333333;
  --clr-muted:   rgba(0, 0, 0, 1);
  --clr-accent:  #3b76ba;
  --clr-accent2: #e8d5a3;
  --clr-white:   #111111;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
  --ease-out:    cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── NOISE OVERLAY ─── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:999;
  pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ─── NAV ─── */
nav {
  position: fixed; top:0; left:0; width:100%; z-index:100;
  padding: 1.4rem 2.5rem;
  display: flex; align-items:center; justify-content:space-between;
  backdrop-filter: blur(12px);
  background: rgb(255 255 255 / 70%);
  border-bottom: 1px solid var(--clr-border);
  transition: padding .4s var(--ease-out), background .4s;
}
nav.scrolled { padding: .9rem 2.5rem; }

.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-white);
  text-decoration: none;
  letter-spacing: -.02em;
}
.logo span { color: var(--clr-accent); }
.logo img{ width: 146px;}

.nav-links { display:flex; gap:2.2rem; list-style:none; }
.nav-links a {
  color: var(--clr-muted);
  text-decoration:none;
  font-size:.82rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  transition: color .3s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--clr-accent);
  transition: width .35s var(--ease-out);
}
.nav-links a:hover { color:var(--clr-accent); }
.nav-links a:hover::after { width:100%; }

.nav-cta {
  background:#1e5286; color:#ffffff;
  border:none; padding:.6rem 1.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em;
  border-radius:2px; cursor:pointer;
  transition: background .3s, transform .2s;
}
.nav-cta:hover { background:var(--clr-accent2); transform:translateY(-1px); }

/* ─── HAMBURGER (mobile) ─── */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:101; }
.hamburger span { width:24px; height:1.5px; background:var(--clr-accent); transition:.3s; }

/* ─── HERO ─── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:7rem 2rem 4rem;
  overflow:hidden;
}

/* gradient mesh bg */
.hero-mesh {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(200,169,110,.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(200,169,110,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(200,169,110,.04) 0%, transparent 70%);
}

/* animated grid lines */
.hero-grid {
  position:absolute; inset:0; z-index:0; opacity:.06;
  background-image:
    linear-gradient(var(--clr-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--clr-accent) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
}

.hero-content { position:relative; z-index:1; max-width:880px; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--clr-border);
  background:#3b76ba;
  padding:.4rem 1rem; border-radius:30px;
  margin-bottom:2rem;
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.15em;
  color: #ffffff;
  animation: fadeDown .8s var(--ease-out) .2s both;
}
.hero-badge .dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--clr-accent);
  animation: pulse 2s infinite;
}

.hero h1 {
  font-family:var(--font-display);
  font-size: clamp(3.2rem, 8vw, 7.2rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--clr-white);
  animation: fadeUp .9s var(--ease-out) .35s both;
}
.hero h1 .line { display:block; }
.hero h1 .accent { color:var(--clr-accent); font-style:italic; font-weight:700; }

.hero-sub {
  max-width:560px; margin:2rem auto 0;
  color:var(--clr-muted);
  font-size:1.05rem; line-height:1.7;
  animation: fadeUp .9s var(--ease-out) .5s both;
}

.hero-tagline {
  margin-top:1.8rem;
  font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--clr-accent);
  animation: fadeUp .9s var(--ease-out) .6s both;
}

.hero-ctas {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top:2.8rem;
  animation: fadeUp .9s var(--ease-out) .72s both;
}

.btn-primary {
  background:var(--clr-accent); color:#ffffff;
  border:none; padding:.9rem 2.2rem;
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.12em;
  border-radius:2px; cursor:pointer;
  transition: background .3s, transform .25s, box-shadow .3s;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-primary:hover {
  background:var(--clr-accent2);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(200,169,110,.25);
}

.btn-secondary {
  background:transparent; color:var(--clr-text);
  border:1px solid var(--clr-border);
  padding:.9rem 2.2rem;
  font-family:var(--font-body); font-weight:500; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.12em;
  border-radius:2px; cursor:pointer;
  transition: border-color .3s, color .3s, transform .25s;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-secondary:hover { border-color:var(--clr-accent); color:var(--clr-accent); transform:translateY(-2px); }

/* scroll indicator */
.scroll-indicator {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--clr-muted); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  animation:fadeIn 1s .9s both;
}
.scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom, var(--clr-accent), transparent);
  animation:scrollPulse 2s infinite;
}

/* ─── ABOUT ─── */
.about {
  padding:8rem 2.5rem;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:6rem; align-items:center;
}
.about-visual {
  position:relative;
}
.about-img-wrap {
  width:100%; aspect-ratio:4/3;
  background:var(--clr-card);
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--clr-border);
  position:relative;
}
/* mockup placeholder */
.about-img-wrap::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(200,169,110,.12) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0' stroke='rgba(200,169,110,.08)' fill='none'/%3E%3C/svg%3E");
  background-size:40px 40px;
}
.about-img-wrap .screen-icon {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.screen-icon svg { width:80px; height:80px; opacity:.25; }

.about-float {
  position:absolute; bottom:-1.5rem; right:-1.5rem;
  background:var(--clr-accent); color:#ffffff;
  padding:1rem 1.4rem; border-radius:4px;
  text-align:left;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.about-float .num { font-family:var(--font-display); font-size:1.8rem; font-weight:900; }
.about-float .label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }

.about-text .section-label {
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--clr-accent); margin-bottom:1rem;
  display:flex; align-items:center; gap:.8rem;
}
.section-label::before {
  content:''; width:28px; height:1px; background:var(--clr-accent);
}

.about-text h2 {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900; line-height:1.1;
  color:var(--clr-white);
  letter-spacing:-.02em;
  margin-bottom:1.8rem;
}
.about-text h2 em { font-style:italic; color:var(--clr-accent); }

.about-text p { color:var(--clr-muted); font-size:1rem; line-height:1.8; margin-bottom:1rem; }

.about-text .highlight-line {
  margin-top:2rem; padding-top:1.6rem;
  border-top:1px solid var(--clr-border);
  font-family:var(--font-display);
  font-size:1.1rem; font-style:italic;
  color:#3b76ba; line-height:1.5;
}

/* ─── SERVICES ─── */
.services {
  padding:7rem 2.5rem;
  background: #dcdbdb;
  position:relative;
  overflow:hidden;
}
.services::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:1px; background:linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.services-header { text-align:center; max-width:700px; margin:0 auto 4.5rem; }
.services-header h2 {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:900; color:var(--clr-white);
  letter-spacing:-.02em; margin-bottom:1rem;
}
.services-header p { color:var(--clr-muted); font-size:1rem; }

.services-grid {
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}

.service-card {
  background:var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:4px;
  padding:2.2rem 2rem;
  position:relative;
  overflow:hidden;
  transition: border-color .4s, transform .4s var(--ease-out);
  cursor:pointer;
  text-decoration:none; color:inherit; display:block;
}
.service-card:hover { border-color:var(--clr-accent); transform:translateY(-4px); }
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--clr-accent), transparent);
  opacity:0; transition:opacity .4s;
}
.service-card:hover::before { opacity:1; }

.service-card .card-num {
  font-family:var(--font-display);
  font-size:2.8rem; font-weight:900;
  color:rgb(59 117 186);
  line-height:1;
  margin-bottom:.6rem;
}
.service-card .card-icon {
  width:40px; height:40px;
  background:rgba(200,169,110,.1);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem;
}
.service-card .card-icon svg { width:20px; height:20px; stroke:var(--clr-accent); fill:none; stroke-width:1.8; }

.service-card h3 {
  font-family:var(--font-display);
  font-size:1.2rem; font-weight:700;
  color:var(--clr-white); margin-bottom:.7rem;
}
.service-card > p { color:var(--clr-muted); font-size:.88rem; line-height:1.65; margin-bottom:1rem; }

.service-card ul { list-style:none; }
.service-card ul li {
  color:var(--clr-muted); font-size:.82rem;
  padding:.3rem 0;
  display:flex; align-items:center; gap:.5rem;
}
.service-card ul li::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--clr-accent); flex-shrink:0;
}

/* wide card for printing */
.service-card.wide { grid-column:span 1; }

/* ─── WHY US ─── */
.why-us {
  padding:7rem 2.5rem;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;
}
.why-header h2 {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:900; color:var(--clr-white);
  letter-spacing:-.02em; line-height:1.1;
  margin-bottom:1.2rem;
}
.why-header h2 em { font-style:italic; color:var(--clr-accent); }
.why-header p { color:var(--clr-muted); font-size:1rem; max-width:440px; }

.why-list { display:flex; flex-direction:column; gap:1.6rem; }
.why-item {
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:1.4rem;
  border:1px solid var(--clr-border);
  border-radius:4px;
  background:var(--clr-card);
  transition:border-color .35s, transform .35s var(--ease-out);
}
.why-item:hover { border-color:rgba(200,169,110,.25); transform:translateX(6px); }

.why-icon {
  flex-shrink:0; width:44px; height:44px;
  background:rgba(200,169,110,.08);
  border:1px solid rgba(200,169,110,.15);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.why-icon svg { width:20px; height:20px; stroke:var(--clr-accent); fill:none; stroke-width:1.8; }

.why-item h4 { color:var(--clr-white); font-size:.95rem; font-weight:600; margin-bottom:.25rem; }
.why-item p { color:var(--clr-muted); font-size:.85rem; line-height:1.6; }

/* ─── TESTIMONIALS ─── */
.testimonials {
  padding:5.5rem 2.5rem;
  background:#dcdbdb;
  position:relative;
}
.testimonials::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:1px; background:linear-gradient(90deg,transparent,var(--clr-border),transparent);
}
.testimonials-inner { max-width:1100px; margin:0 auto; }
.testimonials-header { text-align:center; margin-bottom:3rem; }
.testimonials-header h2 {
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:900; color:var(--clr-white);
}
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }

.t-card {
  background:var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:4px;
  padding:1.8rem;
}
.t-stars { color:var(--clr-accent); font-size:1rem; letter-spacing:.1em; margin-bottom:.9rem; }
.t-card blockquote {
  color:var(--clr-muted); font-size:.88rem; line-height:1.7;
  font-style:italic; margin-bottom:1.2rem;
}
.t-author { display:flex; align-items:center; gap:.8rem; }
.t-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--clr-accent),rgb(31 82 134 / 90%));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:#ffffff;
}
.t-author-info .name { color:var(--clr-white); font-size:.82rem; font-weight:600; }
.t-author-info .role { color:var(--clr-muted); font-size:.75rem; }

/* ─── PROCESS ─── */
.process {
  padding:7rem 2.5rem;
  max-width:1000px; margin:0 auto;
  text-align:center;
}
.process .section-label { justify-content:center; margin-bottom:1rem; }
.process h2 {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:900; color:var(--clr-white);
  margin-bottom:3.5rem; letter-spacing:-.02em;
}

.process-steps {
  display:flex; justify-content:center; flex-wrap:wrap; gap:0;
  position:relative;
}
/* connector line */
.process-steps::before {
  content:''; position:absolute; top:3rem; left:10%; right:10%;
  height:1px; background:linear-gradient(90deg, transparent, var(--clr-border) 15%, var(--clr-border) 85%, transparent);
  z-index:0;
}

.step {
  flex:1 1 140px; max-width:180px;
  position:relative; z-index:1;
  text-align:center;
}
.step-circle {
  width:60px; height:60px; border-radius:50%;
  background:var(--clr-card);
  border:2px solid var(--clr-border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.2rem;
  font-family:var(--font-display); font-weight:900;
  font-size:1.1rem; color:var(--clr-accent);
  position:relative;
  transition: border-color .4s, background .4s;
}
.step:hover .step-circle {
  border-color:var(--clr-accent);
  background:rgba(200,169,110,.08);
  box-shadow:0 0 24px rgba(200,169,110,.18);
}

.step h4 { color:var(--clr-white); font-size:.9rem; font-weight:600; margin-bottom:.4rem; }
.step p { color:var(--clr-muted); font-size:.78rem; line-height:1.55; padding:0 .3rem; }

/* ─── STATS STRIP ─── */
.stats-strip {
  background: linear-gradient(135deg, rgb(28 80 133), rgb(59 118 186));
  border-top:1px solid var(--clr-border);
  border-bottom:1px solid var(--clr-border);
  padding:3rem 2.5rem;
}
.stats-inner {
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  text-align:center;
}
.stat-item .stat-num {
  font-family:var(--font-display);
  font-size:2.4rem; font-weight:900;
  color:var(--clr-accent);
}
.stat-item .stat-label {
  color: #ffffff; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.12em;
  margin-top:.25rem;
}

/* ─── CTA FOOTER HOOK ─── */
.cta-section {
  background-color: #dcdcdc;
  padding:8rem 2.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(200,169,110,.07) 0%, transparent 70%);
}
.cta-content { position:relative; z-index:1; max-width:700px; margin:0 auto; }

.cta-content h2 {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:900; color:var(--clr-white);
  line-height:1.1; letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.cta-content h2 em { font-style:italic; color:var(--clr-accent); }
.cta-content p { color:var(--clr-muted); font-size:1.02rem; line-height:1.75; margin-bottom:2.2rem; }

.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.cta-tagline {
  margin-top:2.4rem;
  font-family:var(--font-display);
  font-style:italic; color:var(--clr-accent2);
  font-size:1.05rem; opacity:.75;
}

/* ─── FOOTER ─── */
footer {
  border-top:1px solid var(--clr-border);
  background:var(--clr-surface);
  padding:3.5rem 2.5rem 2rem;
}
.footer-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem;
}
.footer-brand .logo { display:block; margin-bottom:1rem; font-size:1.2rem; }
.footer-brand p { color:var(--clr-muted); font-size:.82rem; line-height:1.7; max-width:280px; }

footer h5 {
  color:var(--clr-white); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.18em;
  margin-bottom:1rem; font-weight:600;
}
footer ul { list-style:none; }
footer ul li { margin-bottom:.55rem; }
footer ul a {
  color:var(--clr-muted); text-decoration:none; font-size:.84rem;
  transition:color .3s;
}
footer ul a:hover { color:var(--clr-accent); }

.footer-bottom {
  max-width:1100px; margin:2.5rem auto 0;
  padding-top:1.5rem; border-top:1px solid var(--clr-border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.8rem;
}
.footer-bottom p { color:var(--clr-muted); font-size:.76rem; }
.footer-bottom a { color:var(--clr-muted); text-decoration:none; transition:color .3s; }
.footer-bottom a:hover { color:var(--clr-accent); }

/* ─── SCROLL ANIMATIONS ─── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ─── KEYFRAMES ─── */
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes scrollPulse { 0% { opacity:1; transform:scaleY(1); } 100% { opacity:0; transform:scaleY(1.8); } }

/* ─── RESPONSIVE ─── */
@media (max-width:900px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .about { grid-template-columns:1fr; gap:3rem; }
  .why-us { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .testimonials-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
}
@media (max-width:680px) {
  nav .nav-links { display:none; }
  nav .nav-cta.desktop { display:none; }
  .hamburger { display:flex; }
  .mobile-menu {
    display:none; position:fixed; inset:0; z-index:99;
    background:rgba(10,10,10,.97); backdrop-filter:blur(12px);
    flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  }
  .mobile-menu.open { display:flex; }
  .mobile-menu a {
    color:var(--clr-white); text-decoration:none;
    font-family:var(--font-display); font-size:2rem; font-weight:700;
    transition:color .3s;
  }
  .mobile-menu a:hover { color:var(--clr-accent); }

  .services-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .process-steps { flex-direction:column; align-items:center; gap:2rem; }
  .process-steps::before { display:none; }
  .step { max-width:100%; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
}