Metehan

227 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 June 2025

Un code de Metehan

26 April 2025

Un code de Metehan

24 April 2025

Un code de Metehan

HTML

<!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