Metehan

36 Metehan

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>M.HAN STUDIO — Digital Craft Agency</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
  --gold: #D4A017;
  --gold-bright: #F5C842;
  --gold-dim: #8B6914;
  --black: #0A0A08;
  --black-mid: #111109;
  --black-card: #161612;
  --black-glass: rgba(10,10,8,0.7);
  --green: #39FF14;
  --green-dim: #1A7A05;
  --green-glow: rgba(57,255,20,0.15);
  --cream: #F0EDD8;
  --slate: #4A4A3E;
  --border-gold: rgba(212,160,23,0.25);
  --border-green: rgba(57,255,20,0.2);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--cream);
  font-family:'Syne',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--black);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}

/* TYPOGRAPHY */
.font-display{font-family:'Bebas Neue',sans-serif;}
.font-mono{font-family:'DM Mono',monospace;}

/* GLASS */
.glass{
  background:rgba(22,22,18,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-gold);
}
.glass-green{
  background:rgba(10,10,8,0.8);
  backdrop-filter:blur(20px);
  border:1px solid var(--border-green);
}

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

/* CURSOR */
#cursor{
  position:fixed;
  width:12px;height:12px;
  background:var(--gold);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transition:transform .15s ease, background .2s;
  mix-blend-mode:difference;
}
#cursor-ring{
  position:fixed;
  width:36px;height:36px;
  border:1px solid var(--gold);
  border-radius:50%;
  pointer-events:none;
  z-index:99998;
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s;
  transform:translate(-50%,-50%);
  opacity:.5;
}

/* NAVBAR */
#nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:20px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:all .4s ease;
}
#nav.scrolled{
  background:rgba(10,10,8,0.92);
  backdrop-filter:blur(20px);
  padding:14px 40px;
  border-bottom:1px solid var(--border-gold);
}
.nav-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:28px;
  letter-spacing:.1em;
  color:var(--gold-bright);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-logo span{
  color:var(--green);
}
.nav-links{
  display:flex;
  gap:32px;
  list-style:none;
}
.nav-links a{
  font-family:'DM Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:rgba(240,237,216,.6);
  text-decoration:none;
  transition:color .3s;
}
.nav-links a:hover{color:var(--gold-bright);}
.nav-cta{
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 24px;
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}
.nav-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
  z-index:-1;
}
.nav-cta:hover::before{transform:scaleX(1);}
.nav-cta:hover{color:var(--black);}

/* HERO */
#hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:120px 40px 80px;
  position:relative;
  overflow:hidden;
}
.hero-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(212,160,23,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,.04) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-glow{
  position:absolute;
  width:800px;height:800px;
  background:radial-gradient(circle, rgba(57,255,20,.06) 0%, transparent 70%);
  top:-200px;right:-200px;
  pointer-events:none;
  animation:glowPulse 6s ease-in-out infinite;
}
.hero-glow2{
  position:absolute;
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(212,160,23,.08) 0%, transparent 70%);
  bottom:-100px;left:-100px;
  pointer-events:none;
  animation:glowPulse 8s ease-in-out infinite reverse;
}
@keyframes glowPulse{
  0%,100%{opacity:1;}
  50%{opacity:.4;}
}
.hero-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:16px;
  opacity:0;
  animation:fadeUp .8s .2s ease forwards;
}
.hero-eyebrow::before{
  content:'';
  width:40px;height:1px;
  background:var(--green);
}
.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,13vw,200px);
  line-height:.88;
  letter-spacing:-.01em;
  color:var(--cream);
  max-width:16ch;
  opacity:0;
  animation:fadeUp 1s .4s ease forwards;
}
.hero-title .gold{color:var(--gold-bright);}
.hero-title .stroke{
  -webkit-text-stroke:2px var(--gold-dim);
  color:transparent;
}
.hero-sub{
  font-size:16px;
  color:rgba(240,237,216,.55);
  max-width:50ch;
  line-height:1.7;
  margin-top:28px;
  opacity:0;
  animation:fadeUp .8s .7s ease forwards;
}
.hero-actions{
  display:flex;
  gap:16px;
  margin-top:44px;
  flex-wrap:wrap;
  opacity:0;
  animation:fadeUp .8s .9s ease forwards;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  background:var(--gold);
  color:var(--black);
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:500;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}
.btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px);}
.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  border:1px solid rgba(57,255,20,.4);
  color:var(--green);
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:all .3s;
}
.btn-outline:hover{background:var(--green-glow);border-color:var(--green);transform:translateY(-2px);}

.hero-stats{
  display:flex;
  gap:48px;
  margin-top:80px;
  padding-top:40px;
  border-top:1px solid var(--border-gold);
  opacity:0;
  animation:fadeUp .8s 1.1s ease forwards;
  flex-wrap:wrap;
}
.stat-item .num{
  font-family:'Bebas Neue',sans-serif;
  font-size:52px;
  line-height:1;
  color:var(--gold-bright);
}
.stat-item .num span{color:var(--green);}
.stat-item .lbl{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(240,237,216,.4);
  margin-top:4px;
}

/* MARQUEE */
.marquee-section{
  padding:20px 0;
  overflow:hidden;
  border-top:1px solid var(--border-gold);
  border-bottom:1px solid var(--border-gold);
  background:var(--black-mid);
  position:relative;
}
.marquee-track{
  display:flex;
  gap:0;
  width:max-content;
  animation:marqueeRoll 25s linear infinite;
}
.marquee-item{
  font-family:'Bebas Neue',sans-serif;
  font-size:14px;
  letter-spacing:.3em;
  color:rgba(240,237,216,.2);
  padding:0 40px;
  display:flex;
  align-items:center;
  gap:40px;
  white-space:nowrap;
}
.marquee-item .dot{
  width:6px;height:6px;
  background:var(--gold);
  border-radius:50%;
  flex-shrink:0;
}
.marquee-item.green .dot{background:var(--green);}
@keyframes marqueeRoll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* SERVICES */
#services{
  padding:120px 40px;
  max-width:1400px;
  margin:0 auto;
}
.section-label{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.section-label::before{content:'';width:24px;height:1px;background:var(--green);}
.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,7vw,100px);
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--cream);
  margin-bottom:60px;
}
.section-title .g{color:var(--gold-bright);}

/* BENTO GRID */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto;
  gap:16px;
}
.bento-card{
  background:var(--black-card);
  border:1px solid rgba(212,160,23,.12);
  padding:36px;
  position:relative;
  overflow:hidden;
  transition:border-color .4s, transform .4s;
  cursor:pointer;
}
.bento-card::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transition:transform .4s ease;
}
.bento-card:hover::after{transform:scaleX(1);}
.bento-card:hover{border-color:var(--gold);transform:translateY(-4px);}
.bento-card.green-card{border-color:rgba(57,255,20,.12);}
.bento-card.green-card::after{background:linear-gradient(90deg,transparent,var(--green),transparent);}
.bento-card.green-card:hover{border-color:var(--green);}

.bc1{grid-column:span 5;grid-row:span 2;}
.bc2{grid-column:span 4;}
.bc3{grid-column:span 3;}
.bc4{grid-column:span 7;}
.bc5{grid-column:span 5;}
.bc6{grid-column:span 12;}

.card-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:80px;
  color:rgba(212,160,23,.06);
  line-height:1;
  position:absolute;
  top:16px;right:20px;
}
.card-icon{
  width:44px;height:44px;
  border:1px solid var(--border-gold);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  font-size:18px;
}
.card-icon.gi{border-color:var(--border-green);}
.card-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:32px;
  letter-spacing:.02em;
  color:var(--cream);
  line-height:1;
  margin-bottom:12px;
}
.card-desc{
  font-size:13px;
  color:rgba(240,237,216,.5);
  line-height:1.7;
  max-width:34ch;
}
.card-arrow{
  position:absolute;
  bottom:32px;right:32px;
  width:36px;height:36px;
  border:1px solid var(--border-gold);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  color:var(--gold-dim);
  transition:all .3s;
}
.bento-card:hover .card-arrow{
  background:var(--gold);
  color:var(--black);
  border-color:var(--gold);
}
.green-card .card-arrow{border-color:var(--border-green);color:var(--green-dim);}
.green-card:hover .card-arrow{background:var(--green);color:var(--black);border-color:var(--green);}

/* PROJECTS — SPLIT LAYOUT */
#projects{
  padding:120px 40px;
  background:var(--black-mid);
  position:relative;
  overflow:hidden;
}
#projects .inner{max-width:1400px;margin:0 auto;}
.project-list{margin-top:60px;}
.project-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:60px 0;
  border-bottom:1px solid var(--border-gold);
  position:relative;
}
.project-item:last-child{border-bottom:none;}
.project-item.reverse .project-visual{order:1;}
.project-item.reverse .project-info{order:2;}
.project-visual{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--black-card);
  border:1px solid var(--border-gold);
}
.project-visual img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(30%) brightness(.85);
  transition:filter .6s ease, transform .6s ease;
}
.project-item:hover .project-visual img{
  filter:grayscale(0%) brightness(1);
  transform:scale(1.04);
}
.proj-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(212,160,23,.15), transparent 60%);
  pointer-events:none;
}
.proj-tag{
  position:absolute;
  top:16px;left:16px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:6px 12px;
  background:var(--gold);
  color:var(--black);
}
.project-info .proj-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:80px;
  color:rgba(212,160,23,.07);
  line-height:1;
  margin-bottom:-20px;
}
.project-info h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,4vw,60px);
  line-height:.95;
  color:var(--cream);
  margin-bottom:16px;
}
.project-info p{
  font-size:14px;
  color:rgba(240,237,216,.5);
  line-height:1.75;
  max-width:44ch;
  margin-bottom:28px;
}
.proj-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.proj-tag-item{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid var(--border-gold);
  color:rgba(240,237,216,.4);
}
.proj-tag-item.green{border-color:var(--border-green);color:rgba(57,255,20,.5);}
.proj-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
  transition:gap .3s;
}
.proj-link:hover{gap:16px;}

/* CAPABILITIES / PROCESS */
#process{
  padding:120px 40px;
  max-width:1400px;
  margin:0 auto;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  margin-top:60px;
  border:1px solid var(--border-gold);
}
.process-step{
  padding:48px 36px;
  position:relative;
  border-right:1px solid var(--border-gold);
  transition:background .4s;
}
.process-step:last-child{border-right:none;}
.process-step:hover{background:rgba(212,160,23,.04);}
.step-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:72px;
  color:rgba(212,160,23,.08);
  line-height:1;
  margin-bottom:-8px;
}
.step-num.gn{color:rgba(57,255,20,.08);}
.step-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;
  color:var(--cream);
  margin-bottom:12px;
}
.step-desc{
  font-size:13px;
  color:rgba(240,237,216,.45);
  line-height:1.65;
}
.step-dot{
  width:8px;height:8px;
  background:var(--gold);
  border-radius:50%;
  position:absolute;
  top:32px;right:32px;
}
.step-dot.gn{background:var(--green);}

/* STATS */
#stats{
  background:var(--black-card);
  border-top:1px solid var(--border-gold);
  border-bottom:1px solid var(--border-gold);
  padding:80px 40px;
  position:relative;
  overflow:hidden;
}
#stats .inner{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}
.stat-big{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 40px;
  border-right:1px solid var(--border-gold);
}
.stat-big:last-child{border-right:none;}
.stat-big .n{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,5vw,80px);
  color:var(--gold-bright);
  line-height:1;
}
.stat-big .n .g{color:var(--green);}
.stat-big .l{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(240,237,216,.35);
}

/* TESTIMONIALS */
#testimonials{
  padding:120px 40px;
  background:var(--black-mid);
  overflow:hidden;
}
#testimonials .inner{max-width:1400px;margin:0 auto;}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:60px;
}
.testi-card{
  background:var(--black-card);
  border:1px solid var(--border-gold);
  padding:40px;
  position:relative;
  overflow:hidden;
  transition:border-color .3s, transform .4s;
}
.testi-card:hover{border-color:var(--gold);transform:translateY(-6px);}
.testi-card::before{
  content:'"';
  font-family:'Bebas Neue',sans-serif;
  font-size:160px;
  color:rgba(212,160,23,.05);
  position:absolute;
  top:-20px;left:20px;
  line-height:1;
  pointer-events:none;
}
.testi-text{
  font-size:14px;
  font-style:italic;
  color:rgba(240,237,216,.75);
  line-height:1.8;
  margin-bottom:32px;
  position:relative;
  z-index:1;
}
.testi-author{
  display:flex;
  align-items:center;
  gap:14px;
}
.testi-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-dim), var(--green-dim));
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;
  color:var(--black);
}
.testi-name{
  font-family:'DM Mono',monospace;
  font-size:12px;
  color:var(--cream);
  font-weight:500;
}
.testi-role{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(240,237,216,.35);
  margin-top:2px;
}
.testi-card.featured{
  border-color:rgba(57,255,20,.25);
  grid-row:span 1;
}
.testi-card.featured:hover{border-color:var(--green);}

/* FAQ */
#faq{
  padding:120px 40px;
  max-width:1400px;
  margin:0 auto;
}
.faq-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
  margin-top:60px;
}
.faq-sticky{
  position:sticky;
  top:120px;
  align-self:start;
}
.faq-sticky h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,4vw,64px);
  line-height:.95;
  color:var(--cream);
  margin-bottom:20px;
}
.faq-sticky p{
  font-size:14px;
  color:rgba(240,237,216,.45);
  line-height:1.7;
  margin-bottom:36px;
}
.faq-list{border-top:1px solid var(--border-gold);}
.faq-item{border-bottom:1px solid var(--border-gold);}
.faq-q{
  width:100%;
  text-align:left;
  padding:24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:transparent;
  border:none;
  cursor:pointer;
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
  letter-spacing:.03em;
  color:var(--cream);
  transition:color .3s;
}
.faq-q:hover{color:var(--gold-bright);}
.faq-icon{
  width:28px;height:28px;
  border:1px solid var(--border-gold);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  color:var(--gold);
  transition:transform .3s, background .3s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--gold);color:var(--black);}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, opacity .4s;
  opacity:0;
}
.faq-item.open .faq-a{max-height:200px;opacity:1;}
.faq-a p{
  font-size:14px;
  color:rgba(240,237,216,.55);
  line-height:1.75;
  padding-bottom:24px;
}

/* CTA */
#cta{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 40px;
  position:relative;
  overflow:hidden;
  background:var(--black-card);
  border-top:1px solid var(--border-gold);
}
#cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(57,255,20,.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 60%, rgba(212,160,23,.07) 0%, transparent 60%);
  pointer-events:none;
}
.cta-label{
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:20px;
  position:relative;
}
.cta-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(72px,12vw,180px);
  line-height:.88;
  letter-spacing:-.02em;
  position:relative;
  margin-bottom:28px;
}
.cta-title .line1{color:var(--cream);}
.cta-title .line2{
  -webkit-text-stroke:2px var(--gold);
  color:transparent;
}
.cta-sub{
  font-size:16px;
  color:rgba(240,237,216,.45);
  max-width:40ch;
  line-height:1.7;
  margin-bottom:48px;
  position:relative;
}
.cta-btns{display:flex;gap:16px;justify-content:center;position:relative;flex-wrap:wrap;}

/* FOOTER */
footer{
  background:var(--black);
  border-top:1px solid var(--border-gold);
  padding:60px 40px 32px;
}
.footer-inner{
  max-width:1400px;
  margin:0 auto;
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:60px;
  padding-bottom:60px;
  border-bottom:1px solid var(--border-gold);
}
.footer-brand .logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:32px;
  color:var(--gold-bright);
  letter-spacing:.08em;
  margin-bottom:16px;
  display:block;
  text-decoration:none;
}
.footer-brand .logo span{color:var(--green);}
.footer-brand p{
  font-size:13px;
  color:rgba(240,237,216,.35);
  line-height:1.7;
  max-width:28ch;
}
.footer-col h4{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{
  font-size:13px;
  color:rgba(240,237,216,.4);
  text-decoration:none;
  transition:color .3s;
}
.footer-col ul li a:hover{color:var(--cream);}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-bottom p{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:rgba(240,237,216,.25);
  letter-spacing:.1em;
}
.footer-socials{display:flex;gap:16px;}
.footer-socials a{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:rgba(240,237,216,.3);
  text-decoration:none;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .3s;
}
.footer-socials a:hover{color:var(--gold);}

/* FLOATING CONTACT BTN */
.float-btn{
  position:fixed;
  bottom:40px;right:40px;
  z-index:500;
  width:56px;height:56px;
  background:var(--green);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 0 30px rgba(57,255,20,.3);
  animation:floatBounce 3s ease-in-out infinite;
  text-decoration:none;
  transition:transform .3s, box-shadow .3s;
}
.float-btn:hover{transform:scale(1.15);box-shadow:0 0 50px rgba(57,255,20,.5);}
.float-btn svg{width:22px;height:22px;}
@keyframes floatBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

/* ANIMATIONS */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);filter:blur(8px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}
.reveal{
  opacity:0;
  transform:translateY(40px);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s;
}
.reveal.visible{opacity:1;transform:translateY(0);filter:blur(0);}
.reveal-l{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal-l.visible{opacity:1;transform:translateX(0);}
.reveal-r{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal-r.visible{opacity:1;transform:translateX(0);}

/* CANVAS HERO BG */
#hero-canvas{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.35;
}

/* INNER Z-INDEX */
#hero .hero-content{position:relative;z-index:2;}

/* MOBILE RESPONSIVE */
@media(max-width:900px){
  #nav{padding:16px 20px;}
  .nav-links{display:none;}
  #hero{padding:100px 20px 60px;}
  #services,#process,#faq,#cta{padding:80px 20px;}
  #projects{padding:80px 20px;}
  #testimonials{padding:80px 20px;}
  .bento{grid-template-columns:1fr;gap:12px;}
  .bc1,.bc2,.bc3,.bc4,.bc5,.bc6{grid-column:span 1;}
  .project-item{grid-template-columns:1fr;gap:32px;}
  .process-grid{grid-template-columns:1fr 1fr;}
  #stats .inner{grid-template-columns:1fr 1fr;}
  .stat-big{border-right:none;border-bottom:1px solid var(--border-gold);padding:20px 0;}
  .testi-grid{grid-template-columns:1fr;}
  .faq-layout{grid-template-columns:1fr;gap:40px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .stat-big:last-child{border-bottom:none;}
  .hero-stats{gap:28px;}
}
</style>
</head>
<body>

<div id="cursor"></div>
<div id="cursor-ring"></div>

<nav id="nav">
  <a href="#" class="nav-logo">M<span>.</span>HAN <span style="color:var(--cream);font-size:14px;margin-left:4px;">STUDIO</span></a>
  <ul class="nav-links">
    <li><a href="#services">Services</a></li>
    <li><a href="#projects">Work</a></li>
    <li><a href="#process">Process</a></li>
    <li><a href="#testimonials">Clients</a></li>
    <li><a href="#faq">FAQ</a></li>
  </ul>
  <a href="#cta" class="nav-cta">Start a Project</a>
</nav>

<section id="hero">
  <canvas id="hero-canvas"></canvas>
  <div class="hero-grid-bg"></div>
  <div class="hero-glow"></div>
  <div class="hero-glow2"></div>
  <div class="hero-content">
    <div class="hero-eyebrow">Digital Craft Agency · Est. 2024 · Istanbul</div>
    <h1 class="hero-title">
      <span class="gold">We Build</span><br>
      <span class="stroke">What You</span><br>
      Imagine.
    </h1>
    <p class="hero-sub">Premium web experiences for brands that demand excellence. From luxury fashion to Web3 — we craft digital worlds that convert, captivate, and endure.</p>
    <div class="hero-actions">
      <a href="#projects" class="btn-primary">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        View Our Work
      </a>
      <a href="#cta" class="btn-outline">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        Start Project
      </a>
    </div>
    <div class="hero-stats">
      <div class="stat-item">
        <div class="num">2500<span>+</span></div>
        <div class="lbl">Projects Delivered</div>
      </div>
      <div class="stat-item">
        <div class="num">98<span>%</span></div>
        <div class="lbl">Client Satisfaction</div>
      </div>
      <div class="stat-item">
        <div class="num"><span><</span>24h</div>
        <div class="lbl">Quote Turnaround</div>
      </div>
      <div class="stat-item">
        <div class="num">15<span>+</span></div>
        <div class="lbl">Years Excellence</div>
      </div>
    </div>
  </div>
</section>

<div class="marquee-section">
  <div class="marquee-track">
    <div class="marquee-item"><span class="dot"></span>WEB DESIGN<span class="dot"></span>UI/UX<span class="dot"></span>DEVELOPMENT<span class="dot"></span>BRANDING</div>
    <div class="marquee-item green"><span class="dot"></span>LUXURY FASHION<span class="dot"></span>REAL ESTATE<span class="dot"></span>AUTOMOTIVE<span class="dot"></span>WEB3 & NFT</div>
    <div class="marquee-item"><span class="dot"></span>SMART SYSTEMS<span class="dot"></span>CORPORATE<span class="dot"></span>E-COMMERCE<span class="dot"></span>PORTFOLIOS</div>
    <div class="marquee-item green"><span class="dot"></span>WEB DESIGN<span class="dot"></span>UI/UX<span class="dot"></span>DEVELOPMENT<span class="dot"></span>BRANDING</div>
    <div class="marquee-item"><span class="dot"></span>LUXURY FASHION<span class="dot"></span>REAL ESTATE<span class="dot"></span>AUTOMOTIVE<span class="dot"></span>WEB3 & NFT</div>
    <div class="marquee-item green"><span class="dot"></span>SMART SYSTEMS<span class="dot"></span>CORPORATE<span class="dot"></span>E-COMMERCE<span class="dot"></span>PORTFOLIOS</div>
  </div>
</div>

<section id="services">
  <div class="section-label">What We Do</div>
  <h2 class="section-title reveal">Everything Digital.<br><span class="g">Under One Roof.</span></h2>
  <div class="bento">
    
    <div class="bento-card bc1 reveal">
      <div class="card-num">01</div>
      <div class="card-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="4" width="16" height="12" rx="1" stroke="#D4A017" stroke-width="1.5"/><path d="M6 8h8M6 11h5" stroke="#D4A017" stroke-width="1.5" stroke-linecap="round"/></svg>
      </div>
      <div class="card-title">Premium<br>Web Design</div>
      <div class="card-desc">Editorial-grade UI/UX for luxury brands, startups, and agencies. Every pixel deliberate, every interaction intentional.</div>
      <div class="card-arrow">→</div>
    </div>
    
    <div class="bento-card bc2 green-card reveal" style="transition-delay:.1s">
      <div class="card-num" style="color:rgba(57,255,20,.06)">02</div>
      <div class="card-icon gi">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="#39FF14" stroke-width="1.5"/><path d="M9 5v4l3 2" stroke="#39FF14" stroke-width="1.5" stroke-linecap="round"/></svg>
      </div>
      <div class="card-title">E-Commerce<br>Solutions</div>
      <div class="card-desc">Fashion, lifestyle, and product stores that sell.</div>
      <div class="card-arrow">→</div>
    </div>
    
    <div class="bento-card bc3 reveal" style="transition-delay:.2s">
      <div class="card-num">03</div>
      <div class="card-icon">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 14L9 4l5 10" stroke="#D4A017" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 10h6" stroke="#D4A017" stroke-width="1.5" stroke-linecap="round"/></svg>
      </div>
      <div class="card-title">Branding<br>Identity</div>
      <div class="card-desc">Visual systems that lead.</div>
      <div class="card-arrow">→</div>
    </div>
    
    <div class="bento-card bc4 reveal" style="transition-delay:.15s">
      <div class="card-num">04</div>
      <div class="card-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 10C3 6.13 6.13 3 10 3s7 3.13 7 7-3.13 7-7 7-7-3.13-7-7z" stroke="#D4A017" stroke-width="1.5"/><path d="M10 3c-2.5 2-4 4.5-4 7s1.5 5 4 7M10 3c2.5 2 4 4.5 4 7s-1.5 5-4 7M3 10h14" stroke="#D4A017" stroke-width="1.5"/></svg>
      </div>
      <div class="card-title">Full-Stack Development & System Architecture</div>
      <div class="card-desc">Backend systems, APIs, database design, and cloud infrastructure. Built to scale from day one.</div>
      <div class="card-arrow">→</div>
    </div>
    
    <div class="bento-card bc5 green-card reveal" style="transition-delay:.25s">
      <div class="card-num" style="color:rgba(57,255,20,.06)">05</div>
      <div class="card-icon gi">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 15l4-4 3 3 4-7" stroke="#39FF14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="2" y="2" width="16" height="16" rx="2" stroke="#39FF14" stroke-width="1.5"/></svg>
      </div>
      <div class="card-title">Web3 & NFT<br>Platforms</div>
      <div class="card-desc">Next-gen blockchain-facing experiences. Wallets, minting pages, DAO dashboards.</div>
      <div class="card-arrow">→</div>
    </div>
    
    <div class="bento-card bc6 reveal" style="transition-delay:.3s;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:32px 40px;">
      <div style="display:flex;align-items:center;gap:28px;flex-wrap:wrap;">
        <div class="card-icon" style="margin-bottom:0;">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M2 9h14M9 2l7 7-7 7" stroke="#D4A017" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div>
          <div class="card-title" style="font-size:24px;margin-bottom:4px;">Corporate & Enterprise Portals</div>
          <div class="card-desc" style="max-width:60ch;">Zero-downtime office web migrations, internal tools, and enterprise-grade portals built for performance and security.</div>
        </div>
      </div>
      <a href="#cta" class="btn-outline" style="white-space:nowrap;">View Case Studies</a>
    </div>
  </div>
</section>

<section id="projects">
  <div class="inner">
    <div class="section-label">Selected Work</div>
    <h2 class="section-title reveal">Projects That<br><span class="g">Speak Louder.</span></h2>
    <div class="project-list">

<div class="project-item reveal">
        <div class="project-visual reveal-l">
          <img src="https://images.unsplash.com/photo-1544636331-e26879cd4d9b?q=80&w=1200&auto=format&fit=crop" alt="Luxury Automotive">
          <div class="proj-overlay"></div>
          <div class="proj-tag">Automotive</div>
        </div>
        <div class="project-info reveal-r">
          <div class="proj-num">01</div>
          <h3>LUXOVIA — Luxury<br>Automotive Platform</h3>
          <p>A cinematic dark-UI for Sweden's premium car rental & showroom. Performance meets luxury in every scroll. Inspired by editorial automotive photography.</p>
          <div class="proj-tags">
            <span class="proj-tag-item">React</span>
            <span class="proj-tag-item">Three.js</span>
            <span class="proj-tag-item green">Dark UI</span>
            <span class="proj-tag-item">GSAP</span>
          </div>
          <a href="#" class="proj-link">View Case Study →</a>
        </div>
      </div>

<div class="project-item reverse reveal">
        <div class="project-visual reveal-r">
          <img src="https://images.unsplash.com/photo-1613977257363-707ba9348227?q=80&w=1200&auto=format&fit=crop" alt="Real Estate">
          <div class="proj-overlay"></div>
          <div class="proj-tag">Real Estate</div>
        </div>
        <div class="project-info reveal-l">
          <div class="proj-num">02</div>
          <h3>PEAKVISTA — Luxury<br>Real Estate</h3>
          <p>Seoul's premium property marketplace. Clean brutalist architecture meets lime-accent design. Property search, filter, and AR-ready floor plans.</p>
          <div class="proj-tags">
            <span class="proj-tag-item">Next.js</span>
            <span class="proj-tag-item green">Minimal UI</span>
            <span class="proj-tag-item">Mapbox</span>
            <span class="proj-tag-item">Framer</span>
          </div>
          <a href="#" class="proj-link">View Case Study →</a>
        </div>
      </div>

<div class="project-item reveal">
        <div class="project-visual reveal-l">
          <img src="https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=1200&auto=format&fit=crop" alt="NFT Platform">
          <div class="proj-overlay" style="background:linear-gradient(135deg,rgba(57,255,20,.12),transparent 60%)"></div>
          <div class="proj-tag" style="background:var(--green);color:var(--black);">Web3</div>
        </div>
        <div class="project-info reveal-r">
          <div class="proj-num">03</div>
          <h3>DIGI-BUNNY —<br>NFT Launch Platform</h3>
          <p>The execution layer for 5,000 unique NFT warriors. Dark atmospheric design with neon accents, wallet connect, and live minting UI. Anonymous by design.</p>
          <div class="proj-tags">
            <span class="proj-tag-item green">Solidity</span>
            <span class="proj-tag-item green">Web3.js</span>
            <span class="proj-tag-item">React</span>
            <span class="proj-tag-item">Dark UI</span>
          </div>
          <a href="#" class="proj-link" style="color:var(--green);">View Case Study →</a>
        </div>
      </div>

<div class="project-item reverse reveal">
        <div class="project-visual reveal-r">
          <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=1200&auto=format&fit=crop" alt="Fashion">
          <div class="proj-overlay"></div>
          <div class="proj-tag">Fashion</div>
        </div>
        <div class="project-info reveal-l">
          <div class="proj-num">04</div>
          <h3>VIBE — Kids Fashion<br>E-Commerce</h3>
          <p>Bold editorial kidswear store. Crimson and cream palette, oversized typography, and a scroll experience that feels like flipping through a magazine.</p>
          <div class="proj-tags">
            <span class="proj-tag-item">Shopify</span>
            <span class="proj-tag-item">Editorial UI</span>
            <span class="proj-tag-item green">Heloxone</span>
            <span class="proj-tag-item">Animation</span>
          </div>
          <a href="#" class="proj-link">View Case Study →</a>
        </div>
      </div>

</div>
  </div>
</section>

<section id="process">
  <div class="section-label">How We Work</div>
  <h2 class="section-title reveal">Our <span class="g">Process.</span></h2>
  <div class="process-grid reveal">
    <div class="process-step">
      <div class="step-dot"></div>
      <div class="step-num">01</div>
      <div class="step-title">Discovery</div>
      <div class="step-desc">Deep dive into your brand, audience, and competitive landscape. We ask the hard questions before touching a pixel.</div>
    </div>
    <div class="process-step">
      <div class="step-dot" style="background:var(--green)"></div>
      <div class="step-num gn">02</div>
      <div class="step-title">Blueprint</div>
      <div class="step-desc">Architecture, wireframes, and a guaranteed flat-rate proposal. You get a minute-by-minute project roadmap.</div>
    </div>
    <div class="process-step">
      <div class="step-dot"></div>
      <div class="step-num">03</div>
      <div class="step-title">Execution</div>
      <div class="step-desc">Design and development in parallel sprints. Daily updates, weekly demos. Zero surprises.</div>
    </div>
    <div class="process-step">
      <div class="step-dot" style="background:var(--green)"></div>
      <div class="step-num gn">04</div>
      <div class="step-title">Launch & Scale</div>
      <div class="step-desc">Go live with confidence. We handle QA, deployment, and post-launch optimization. You just grow.</div>
    </div>
  </div>
</section>

<section id="stats">
  <div class="inner">
    <div class="stat-big reveal">
      <div class="n"><span id="c1">0</span><span class="g">+</span></div>
      <div class="l">Projects Delivered</div>
    </div>
    <div class="stat-big reveal" style="transition-delay:.1s">
      <div class="n"><span id="c2">0</span><span class="g">%</span></div>
      <div class="l">Client Satisfaction</div>
    </div>
    <div class="stat-big reveal" style="transition-delay:.2s">
      <div class="n"><span class="g"><</span><span id="c3">0</span>h</div>
      <div class="l">Quote Turnaround</div>
    </div>
    <div class="stat-big reveal" style="transition-delay:.3s">
      <div class="n"><span id="c4">0</span><span class="g">+</span></div>
      <div class="l">Industry Awards</div>
    </div>
  </div>
</section>

<section id="testimonials">
  <div class="inner">
    <div class="section-label">Client Voices</div>
    <h2 class="section-title reveal">Don't Take Our<br><span class="g">Word for It.</span></h2>
    <div class="testi-grid">
      <div class="testi-card reveal">
        <div class="testi-text">"The level of professionalism was staggering. They treated our brand with more care than our in-house team ever could. The final site blew our entire leadership team away."</div>
        <div class="testi-author">
          <div class="testi-avatar">E</div>
          <div>
            <div class="testi-name">Elena V.</div>
            <div class="testi-role">Private Collector & Gallerist</div>
          </div>
        </div>
      </div>
      <div class="testi-card featured reveal" style="transition-delay:.1s;border-color:rgba(57,255,20,.25);">
        <div class="testi-text">"We moved our entire digital presence over a weekend. Come Monday, every page was live, indexed, and converting better than before. Genuinely remarkable execution."</div>
        <div class="testi-author">
          <div class="testi-avatar" style="background:linear-gradient(135deg,var(--green-dim),var(--gold-dim))">M</div>
          <div>
            <div class="testi-name">Marcus T.</div>
            <div class="testi-role">COO, TechFlow International</div>
          </div>
        </div>
      </div>
      <div class="testi-card reveal" style="transition-delay:.2s">
        <div class="testi-text">"Zero friction. One call, and the entire vision was understood. It didn't feel like working with an agency — it felt like working with someone who actually cared about the outcome."</div>
        <div class="testi-author">
          <div class="testi-avatar">S</div>
          <div>
            <div class="testi-name">Sarah J.</div>
            <div class="testi-role">Lead Architect, Studio Forma</div>
          </div>
        </div>
      </div>
      <div class="testi-card reveal" style="transition-delay:.15s">
        <div class="testi-text">"Worth every penny. The peace of mind knowing my brand's digital face was in elite hands is priceless. They delivered two weeks ahead of schedule."</div>
        <div class="testi-author">
          <div class="testi-avatar">D</div>
          <div>
            <div class="testi-name">David L.</div>
            <div class="testi-role">Founder, Resonance Records</div>
          </div>
        </div>
      </div>
      <div class="testi-card reveal" style="transition-delay:.25s">
        <div class="testi-text">"Flawless international delivery. From brief to launch across three time zones — communication and execution were both spectacular. Our new platform tripled conversions."</div>
        <div class="testi-author">
          <div class="testi-avatar" style="background:linear-gradient(135deg,var(--gold-dim),var(--green-dim))">C</div>
          <div>
            <div class="testi-name">Camille B.</div>
            <div class="testi-role">Brand Director, Maison Léon</div>
          </div>
        </div>
      </div>
      <div class="testi-card reveal" style="transition-delay:.3s">
        <div class="testi-text">"The team was polite, precise, and phenomenally fast. It is rare to see this level of craftsmanship in digital work. Our Web3 launch sold out in under 3 hours."</div>
        <div class="testi-author">
          <div class="testi-avatar">J</div>
          <div>
            <div class="testi-name">James W.</div>
            <div class="testi-role">Founder, Pixel Protocol DAO</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq">
  <div class="section-label">Answers</div>
  <div class="faq-layout">
    <div class="faq-sticky reveal-l">
      <h3>Frequently<br><span style="color:var(--gold-bright)">Asked.</span></h3>
      <p>Every detail accounted for. If your question isn't here, our team is ready to respond within 2 hours.</p>
      <a href="#cta" class="btn-primary">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1l6 6-6 6M1 7h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Contact Us
      </a>
    </div>
    <div class="faq-list reveal-r">
      <div class="faq-item">
        <button class="faq-q">How long does a typical project take? <span class="faq-icon">+</span></button>
        <div class="faq-a"><p>Landing pages: 5–10 days. Full websites: 3–6 weeks. Enterprise platforms: 8–16 weeks. Every project receives a guaranteed flat-rate timeline before work begins.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-q">Do you work with international clients? <span class="faq-icon">+</span></button>
        <div class="faq-a"><p>Absolutely. We work with clients across Europe, the Middle East, North America, and Asia. Time zones are never a barrier — we structure communication around your schedule.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-q">What technologies do you specialize in? <span class="faq-icon">+</span></button>
        <div class="faq-a"><p>React, Next.js, Vue, Tailwind, Node.js, Python, MySQL, Supabase, Three.js, GSAP, Framer Motion, Shopify, and custom CMS solutions. We match the stack to your needs, not the other way around.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-q">Do you offer post-launch support? <span class="faq-icon">+</span></button>
        <div class="faq-a"><p>Yes. Every project includes a 30-day post-launch warranty. Ongoing maintenance and feature development retainers are available for long-term partnerships.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-q">How is pricing structured? <span class="faq-icon">+</span></button>
        <div class="faq-a"><p>Fixed-price proposals only. No hourly surprises. We scope the project thoroughly upfront, so you always know exactly what you're getting and for how much.</p></div>
      </div>
    </div>
  </div>
</section>

<section id="cta">
  <div class="cta-label">Ready to Build Something Extraordinary?</div>
  <div class="cta-title reveal">
    <div class="line1">Let's Make</div>
    <div class="line2">Magic.</div>
  </div>
  <p class="cta-sub reveal">One conversation. A clear plan. A flawless execution. Your next great digital product starts here.</p>
  <div class="cta-btns reveal">
    <a href="mailto:hello@mhan.studio" class="btn-primary" style="font-size:13px;padding:16px 40px;">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 3l6 5 6-5M1 3h12v8H1z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Request a Quote
    </a>
    <a href="#projects" class="btn-outline" style="font-size:13px;padding:16px 40px;">View All Work</a>
  </div>
</section>

<footer>
  <div class="footer-inner">
    <div class="footer-top">
      <div class="footer-brand">
        <a href="#" class="logo">M<span>.</span>HAN STUDIO</a>
        <p>Premium digital experiences for brands that demand the extraordinary. Based in Istanbul, built for the world.</p>
      </div>
      <div class="footer-col">
        <h4>Services</h4>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Branding</a></li>
          <li><a href="#">Web3 & NFT</a></li>
          <li><a href="#">E-Commerce</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Company</h4>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Process</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Legal</h4>
        <ul>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Terms of Service</a></li>
          <li><a href="#">Cookie Policy</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© 2026 M.HAN STUDIO. All rights reserved. Istanbul, Turkey.</p>
      <div class="footer-socials">
        <a href="#">Instagram</a>
        <a href="#">Behance</a>
        <a href="#">Dribbble</a>
        <a href="#">LinkedIn</a>
      </div>
    </div>
  </div>
</footer>

<a href="#cta" class="float-btn" title="Start a Project">
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 11h14M11 4l7 7-7 7" stroke="#0A0A08" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>

// NAVBAR SCROLL
window.addEventListener('scroll',()=>{
  document.getElementById('nav').classList.toggle('scrolled',window.scrollY>50);
});

// HERO CANVAS — animated topographic grid
const canvas = document.getElementById('hero-canvas');
const ctx = canvas.getContext('2d');
function resizeC(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}
resizeC();
window.addEventListener('resize',resizeC);
let t=0;
function drawCanvas(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  const lines=50;
  for(let i=0;i<lines;i++){
    ctx.beginPath();
    const alpha=Math.max(0.02,(0.25-(i/lines)*0.2));
    const isGreen = i%7===0;
    ctx.strokeStyle = isGreen ? `rgba(57,255,20,${alpha*1.5})` : `rgba(212,160,23,${alpha})`;
    ctx.lineWidth=.8;
    for(let x=-20;x<=canvas.width+20;x+=8){
      const nx=x-canvas.width/2;
      const wave=Math.sin(nx*.006+t*.8+i*.15)*60+Math.cos(nx*.003-t*.5)*40;
      const py=canvas.height/2+wave+(i-lines/2)*14;
      x===-20?ctx.moveTo(x,py):ctx.lineTo(x,py);
    }
    ctx.stroke();
  }
  t+=.005;
  requestAnimationFrame(drawCanvas);
}
drawCanvas();

// SCROLL REVEAL
const revealEls=document.querySelectorAll('.reveal,.reveal-l,.reveal-r');
const obs=new IntersectionObserver(entries=>{
  entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');obs.unobserve(e.target);}});
},{threshold:.12,rootMargin:'0px 0px -60px 0px'});
revealEls.forEach(el=>{
  el.style.transitionDelay=el.style.transitionDelay||'0s';
  obs.observe(el);
});

// STAT COUNTERS
const counters=[{id:'c1',target:2500},{id:'c2',target:98},{id:'c3',target:24},{id:'c4',target:47}];
const statsObs=new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(e.isIntersecting){
      counters.forEach(c=>{
        const el=document.getElementById(c.id);
        if(!el) return;
        let cur2=0;
        const inc=c.target/60;
        const timer=setInterval(()=>{
          cur2+=inc;
          if(cur2>=c.target){el.textContent=c.target;clearInterval(timer);}
          else el.textContent=Math.ceil(cur2);
        },20);
      });
      statsObs.disconnect();
    }
  });
},{threshold:.3});
const statsSection=document.getElementById('stats');
if(statsSection) statsObs.observe(statsSection);

// FAQ
document.querySelectorAll('.faq-q').forEach(btn=>{
  btn.addEventListener('click',()=>{
    const item=btn.parentElement;
    const wasOpen=item.classList.contains('open');
    document.querySelectorAll('.faq-item').forEach(i=>i.classList.remove('open'));
    if(!wasOpen) item.classList.add('open');
  });
});
</script>
</body>
</html>

CSS

Metehan

Recommended