:root {
  --ink: #131313;
  --paper: #f3f0e9;
  --paper-2: #e9e4da;
  --accent: #ff5c35;
  --lime: #d7ff4f;
  --line: rgba(19,19,19,.16);
  --white: #fffdf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img { width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='.8'/%3E%3C/svg%3E");
}
.cursor-glow {
  width: 360px; height: 360px; border-radius: 50%; position: fixed; pointer-events: none;
  background: radial-gradient(circle, rgba(255,92,53,.12), transparent 68%);
  transform: translate(-50%,-50%); z-index: 0;
}
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; height: 86px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4vw; background: rgba(243,240,233,.78); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(19,19,19,.08);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Manrope,sans-serif; font-weight: 800; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: white; border-radius: 50%; }
.nav-links { display: flex; align-items: center; gap: 34px; font-weight: 600; font-size: .92rem; }
.nav-links a { position: relative; }
.nav-links a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--ink); transition:.3s; }
.nav-links a:hover::after { width:100%; }
.nav-cta { padding: 12px 18px; border: 1px solid var(--ink); border-radius: 999px; transition:.25s; }
.nav-cta:hover { background: var(--ink); color:white; }
.menu-toggle { display:none; background:none; border:0; }

.section-pad { padding: 130px 6vw; position: relative; }
.hero { min-height: 100vh; padding-top: 150px; display:grid; grid-template-columns: .92fr 1.08fr; align-items:center; gap:5vw; }
.eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase; font-size:.72rem; letter-spacing:.16em; font-weight:700; }
.eyebrow span { width:28px; height:1px; background:currentColor; }
.hero h1, .section-heading h2, .services h2, .about h2, .contact h2 {
  font-family: Manrope,sans-serif; letter-spacing:-.055em; line-height:.96; margin:24px 0;
}
.hero h1 { font-size: clamp(4rem, 7.2vw, 7.8rem); max-width: 810px; }
em { font-family: Georgia,serif; font-weight:400; }
.hero-text { max-width: 620px; font-size:1.15rem; line-height:1.75; color:#55504a; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:38px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:28px; padding:16px 24px; border-radius:999px; font-weight:700; transition:.3s; }
.btn-primary { background:var(--ink); color:white; }
.btn-primary:hover { transform:translateY(-3px); background:var(--accent); }
.text-link { display:inline-flex; align-items:center; gap:14px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:5px; }
.hero-proof { margin-top:48px; display:flex; align-items:center; gap:16px; }
.avatars { display:flex; }
.avatars img { width:38px; height:38px; object-fit:cover; border-radius:50%; border:3px solid var(--paper); margin-left:-10px; }
.avatars img:first-child { margin-left:0; }
.hero-proof p { margin:0; font-size:.85rem; }
.hero-proof span { color:#6e6963; }
.hero-visual { position:relative; min-height:680px; display:grid; place-items:center; }
.main-mockup { width:min(92%,720px); background:#161616; border-radius:24px; padding:10px; box-shadow:0 40px 90px rgba(0,0,0,.2); transform:rotate(2.5deg); transition:transform .2s ease-out; z-index:2; }
.browser-bar { height:43px; display:flex; align-items:center; gap:7px; padding:0 10px; color:#bbb; }
.browser-bar span { width:8px; height:8px; border-radius:50%; background:#646464; }
.browser-bar small { margin-left:auto; margin-right:auto; font-size:.68rem; }
.mockup-image { position:relative; overflow:hidden; border-radius:16px; height:560px; }
.mockup-image img { height:100%; object-fit:cover; }
.mockup-overlay { position:absolute; inset:auto 0 0; padding:55px 38px 35px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.72)); }
.mockup-overlay p { text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; }
.mockup-overlay h3 { font:500 2.3rem/1.05 Manrope,sans-serif; max-width:310px; margin:12px 0 0; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); }
.orb-one { width:320px; height:320px; top:18px; right:0; background:var(--lime); }
.orb-two { width:190px; height:190px; left:0; bottom:20px; background:var(--accent); }
.floating-card { position:absolute; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.55); box-shadow:0 20px 50px rgba(0,0,0,.12); z-index:3; }
.card-stat { left:-8px; top:130px; padding:20px 24px; border-radius:18px; }
.card-stat strong { display:block; font:800 1.8rem Manrope,sans-serif; }
.card-stat span { color:#666; font-size:.78rem; }
.card-badge { right:-5px; bottom:80px; padding:18px 20px; border-radius:50%; width:145px; height:145px; display:grid; place-content:center; text-align:center; font-size:.74rem; transform:rotate(-8deg); }
.card-badge strong { margin-top:4px; }

.logo-strip { padding:30px 6vw 46px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; gap:50px; align-items:center; }
.logo-strip p { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; }
.logos { width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#77726b; font:700 .92rem Manrope,sans-serif; }

.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:75px; }
.section-heading h2, .services h2, .about h2 { font-size:clamp(3.2rem,6vw,6.4rem); }
.section-heading > p { max-width:430px; line-height:1.7; color:#5d5953; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:95px 34px; align-items:start; }
.project-image { display:block; position:relative; overflow:hidden; border-radius:4px; background:#ddd; }
.project-image img { height:500px; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.project-image-tall img { height:720px; }
.project-image:hover img { transform:scale(1.035); }
.project-large { margin-top:110px; }
.project-large:first-child { margin-top:0; }
.project-arrow { position:absolute; right:20px; top:20px; width:52px; height:52px; border-radius:50%; background:var(--white); display:grid; place-items:center; font-size:1.2rem; transform:scale(0); transition:.3s; }
.project-image:hover .project-arrow { transform:scale(1); }
.project-label { position:absolute; left:18px; top:18px; background:rgba(255,255,255,.9); padding:8px 12px; border-radius:999px; font-size:.7rem; font-weight:700; }
.project-meta { display:flex; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid var(--line); margin-top:18px; }
.project-meta h3 { margin:0 0 7px; font:700 1.35rem Manrope,sans-serif; }
.project-meta p, .project-meta span { margin:0; color:#6c6862; font-size:.82rem; }

.services { background:var(--ink); color:var(--white); display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; }
.eyebrow.light { color:#cbc7bf; }
.services-intro { position:sticky; top:140px; align-self:start; }
.services-intro > p:last-child { color:#aaa59e; max-width:430px; line-height:1.7; }
.service-list article { display:grid; grid-template-columns:55px 1fr 40px; gap:26px; padding:38px 0; border-top:1px solid rgba(255,255,255,.16); }
.service-list article:last-child { border-bottom:1px solid rgba(255,255,255,.16); }
.service-number { color:#827f79; font-size:.8rem; }
.service-list h3 { margin:0 0 12px; font:700 1.7rem Manrope,sans-serif; }
.service-list p { margin:0; color:#aaa59e; line-height:1.65; max-width:560px; }
.service-icon { font-size:1.5rem; }

.about { display:grid; grid-template-columns:1.08fr .92fr; gap:7vw; align-items:center; }
.about-image { position:relative; }
.about-image img { height:740px; object-fit:cover; }
.about-caption { position:absolute; left:20px; bottom:20px; background:var(--lime); padding:12px 16px; font-size:.74rem; font-weight:700; }
.about-copy > p:not(.eyebrow) { color:#605b54; line-height:1.8; max-width:580px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:45px 0; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats strong { display:block; font:800 2.5rem Manrope,sans-serif; }
.stats span { font-size:.76rem; color:#6f6a63; }

.testimonial { background:var(--accent); text-align:center; display:flex; flex-direction:column; align-items:center; }
.quote-mark { font:400 8rem Georgia,serif; line-height:.5; }
.testimonial blockquote { font:500 clamp(2.3rem,4.8vw,5.4rem)/1.08 Manrope,sans-serif; letter-spacing:-.045em; max-width:1250px; margin:32px auto 50px; }
.client { display:flex; align-items:center; gap:14px; text-align:left; }
.client img { width:50px; height:50px; object-fit:cover; border-radius:50%; }
.client strong,.client span { display:block; }
.client span { font-size:.78rem; opacity:.72; margin-top:3px; }

.contact { min-height:760px; background:#171717; color:white; overflow:hidden; }
.contact h2 { font-size:clamp(4rem,8vw,9rem); max-width:1200px; position:relative; z-index:2; }
.contact h2 em { color:var(--lime); }
.contact-link { display:inline-flex; gap:22px; align-items:center; font:700 clamp(1.3rem,2.3vw,2.4rem) Manrope,sans-serif; border-bottom:2px solid white; padding-bottom:8px; position:relative; z-index:2; }
.contact-details { margin-top:100px; display:grid; grid-template-columns:repeat(3,1fr); gap:25px; position:relative; z-index:2; }
.contact-details > div { padding-top:18px; border-top:1px solid rgba(255,255,255,.22); }
.contact-details span { color:#8f8f8f; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.contact-details p { margin:10px 0 0; }
.contact-orb { position:absolute; width:620px; height:620px; border-radius:50%; background:var(--accent); right:-130px; top:-120px; filter:blur(1px); opacity:.82; }

footer { padding:28px 4vw; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#0d0d0d; color:#ddd; font-size:.78rem; border-top:1px solid #333; }
footer .brand-mark { background:white; color:#111; }

.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.15s; }

@media (max-width: 980px) {
  .hero,.services,.about { grid-template-columns:1fr; }
  .hero { padding-top:130px; }
  .hero-visual { min-height:600px; }
  .services-intro { position:static; }
  .project-image img { height:420px; }
  .project-image-tall img { height:580px; }
  .section-heading { align-items:start; flex-direction:column; gap:25px; }
  .logos span:nth-child(n+4) { display:none; }
}

@media (max-width: 700px) {
  .site-header { height:72px; }
  .menu-toggle { display:block; width:42px; height:42px; position:relative; z-index:2; }
  .menu-toggle span { width:22px; height:1px; background:var(--ink); position:absolute; left:10px; transition:.3s; }
  .menu-toggle span:first-child { top:16px; } .menu-toggle span:last-child { top:24px; }
  .menu-toggle.active span:first-child { transform:rotate(45deg); top:20px; }
  .menu-toggle.active span:last-child { transform:rotate(-45deg); top:20px; }
  .nav-links { position:fixed; inset:0; padding:120px 7vw; background:var(--paper); flex-direction:column; align-items:flex-start; font:700 2rem Manrope,sans-serif; transform:translateY(-100%); transition:.45s; }
  .nav-links.open { transform:none; }
  .nav-cta { font-size:1rem; }
  .section-pad { padding:90px 5.5vw; }
  .hero h1 { font-size:clamp(3.3rem,16vw,5.3rem); }
  .hero-visual { min-height:480px; }
  .mockup-image { height:390px; }
  .mockup-overlay h3 { font-size:1.65rem; }
  .orb-one { width:220px; height:220px; }
  .orb-two { width:130px; height:130px; }
  .card-stat { top:45px; left:0; }
  .card-badge { width:110px; height:110px; right:0; bottom:20px; font-size:.62rem; }
  .logo-strip { overflow:hidden; gap:25px; }
  .logos { gap:30px; justify-content:flex-start; }
  .project-grid { grid-template-columns:1fr; gap:70px; }
  .project-large { margin-top:0; }
  .project-image img,.project-image-tall img { height:480px; }
  .service-list article { grid-template-columns:40px 1fr; }
  .service-icon { display:none; }
  .about-image img { height:510px; }
  .stats { grid-template-columns:1fr; }
  .contact-details { grid-template-columns:1fr; margin-top:70px; }
  .contact-orb { width:380px; height:380px; }
  footer { flex-direction:column; text-align:center; }
}