:root {
	--cream:   #faf6ef;
	--sand:    #f0e9dc;
	--stone:   #e2d8c8;
	--ink:     #1c1a17;
	--body:    #3d3830;
	--muted:   #9a8e7e;
	--accent:  #d4600a;
	--border:  rgba(28,26,23,0.1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
	background: var(--cream);
	color: var(--body);
	font-family: 'DM Sans', sans-serif;
	font-weight: 300;
	line-height: 1.65;
	overflow-x: hidden;
  }

  /* ── NAV ── */
  nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 0 40px;
	height: 68px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(250,246,239,0.92);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
  }

  .logo {
	font-family: 'Syne', sans-serif !important;
	text-decoration: none;
	color: black;
	font-size: 18px;
	font-weight: 800;
  }

  .nav-links {
	display: flex;
	align-items: center;
	gap: 32px;
  }

  .nav-links a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.2s;
  }

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

  .nav-cta {
	background: var(--accent) !important;
	color: #fff !important;
	padding: 9px 20px;
	border-radius: 4px;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	font-size: 0.85rem !important;
	transition: background 0.2s !important;
  }

  .nav-cta:hover { background: #b85008 !important; color: #fff !important; }

  /* ── HERO ── */
  .hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 120px 40px 80px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
  }

  .hero::before {
	content: '';
	position: absolute;
	width: 700px; height: 700px;
	background: radial-gradient(circle, rgba(212,96,10,0.07) 0%, transparent 65%);
	top: -80px; right: -120px;
	pointer-events: none;
  }

  .hero::after {
	content: '';
	position: absolute;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 65%);
	bottom: 40px; left: -60px;
	pointer-events: none;
  }

  .hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	margin-bottom: 28px;
  }

  .hero-tag::before {
	content: '';
	width: 24px; height: 1.5px;
	background: var(--accent);
	flex-shrink: 0;
  }

  .hero h1 {
	font-family: 'Syne', sans-serif;
	font-weight: 800;
	font-size: clamp(2.2rem, 7vw, 5.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--ink);
	max-width: 820px;
	margin-bottom: 36px;
  }

  .hero h1 em {
	font-style: normal;
	color: var(--accent);
  }

  .hero h1 .underline {
	position: relative;
	display: inline-block;
  }

  .hero h1 .underline::after {
	content: '';
	position: absolute;
	bottom: 6px; left: 0; right: 0;
	height: 3px;
	background: var(--accent);
	border-radius: 2px;
	opacity: 0.3;
  }

  .hero-sub {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
	max-width: 880px;
  }

  .hero-desc {
	max-width: 360px;
	color: var(--muted);
	font-size: 0.95rem;
  }

  .hero-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
  }

  .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 14px 28px;
	font-weight: 500;
	font-size: 0.9rem;
	border-radius: 4px;
	transition: background 0.2s, transform 0.2s;
  }

  .btn-primary:hover { background: #b85008; transform: translateY(-2px); }

  .btn-outline {
	display: inline-block;
	color: var(--ink);
	text-decoration: none;
	padding: 14px 28px;
	border: 1.5px solid var(--stone);
	font-size: 0.9rem;
	border-radius: 4px;
	transition: border-color 0.2s, background 0.2s;
  }

  .btn-outline:hover { border-color: var(--ink); background: var(--sand); }

  /* ── STATS ── */
  .stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 40px;
	background: var(--ink);
  }

  .stat {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	transition: background 0.25s;
  }

  .stat:hover { background: rgba(255,255,255,0.07); }

  .stat-num {
	font-family: 'Syne', sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
  }

  .stat-label {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.4;
  }

  .stat-bar {
	width: 100%;
	height: 2px;
	background: rgba(255,255,255,0.07);
	border-radius: 2px;
	margin-top: auto;
	padding-top: 20px;
	position: relative;
  }

  .stat-bar::after {
	content: '';
	position: absolute;
	top: 20px; left: 0;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
  }

  .stat:nth-child(1) .stat-bar::after { width: 70%; }
  .stat:nth-child(2) .stat-bar::after { width: 55%; }
  .stat:nth-child(3) .stat-bar::after { width: 100%; }

  /* ── SECTIONS ── */
  .section {
	padding: 100px 40px;
	border-bottom: 1px solid var(--border);
  }

  .section.alt { background: var(--sand); }

  .section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 52px;
	gap: 40px;
  }

  .section-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent);
	margin-bottom: 10px;
  }

  .section-title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(1.7rem, 3.5vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
  }

  /* ── PROJECTS ── */
  .projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 16px;
  }

  .project-card {
	background: var(--cream);
	border: 1.5px solid var(--stone);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
	cursor: pointer;
	display: flex;
	flex-direction: column;
  }

  .project-card:hover {
	border-color: var(--accent);
	box-shadow: 0 8px 28px rgba(212,96,10,0.09);
	transform: translateY(-3px);
  }

  .project-card:hover .project-link { gap: 10px; }

  .project-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top;
	display: block;
  }

  .project-img-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--stone);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
  }

  .project-body {
	padding: 24px 28px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
  }

  .project-tag {
	display: inline-block;
	font-size: 0.61rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: rgba(212,96,10,0.08);
	color: var(--accent);
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 12px;
	align-self: flex-start;
  }

  .project-card h3 {
	font-family: 'Syne', sans-serif;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
  }

  .project-card p {
	font-size: 0.83rem;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 20px;
	flex: 1;
  }

  .project-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid var(--stone);
  }

  .project-link {
	font-size: 0.78rem;
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.2s;
  }

  .project-tech {
	font-size: 0.7rem;
	color: var(--muted);
	letter-spacing: 0.04em;
  }

  /* ── PROCESS ── */
  .process-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 2px;
	background: var(--stone);
	border-radius: 8px;
	overflow: hidden;
  }

  .process-step {
	padding: 36px 30px;
	background: var(--sand);
  }

  .step-num {
	font-family: 'Syne', sans-serif;
	font-size: 2.2rem;
	font-weight: 800;
	color: rgba(212,96,10,0.14);
	line-height: 1;
	margin-bottom: 14px;
  }

  .process-step h3 {
	font-family: 'Syne', sans-serif;
	font-size: 0.93rem;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--ink);
  }

  .process-step p {
	font-size: 0.81rem;
	color: var(--muted);
	line-height: 1.6;
  }

  /* ── SERVICES ── */
  .services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
  }

  .service-card {
	background: var(--cream);
	border: 1.5px solid var(--stone);
	border-top: 3px solid var(--stone);
	padding: 36px;
	border-radius: 8px;
	transition: border-top-color 0.25s, box-shadow 0.25s;
  }

  .service-card:hover {
	border-top-color: var(--accent);
	box-shadow: 0 6px 22px rgba(212,96,10,0.08);
  }

  .service-card h3 {
	font-family: 'Syne', sans-serif;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 10px;
  }

  .service-card p {
	font-size: 0.82rem;
	color: var(--muted);
	margin-bottom: 28px;
	line-height: 1.65;
  }

  .service-price {
	font-family: 'Syne', sans-serif;
	font-size: 1.55rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
  }

  .service-price-note {
	font-size: 0.72rem;
	color: var(--muted);
	margin-top: 5px;
  }

  /* ── CTA ── */
  .cta-section {
	background: var(--ink);
	padding: 120px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
  }

  .cta-section::before {
	content: '';
	position: absolute;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(212,96,10,0.1) 0%, transparent 65%);
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
  }

  .cta-section h2 {
	font-family: 'Syne', sans-serif;
	font-size: clamp(2rem, 5vw, 3.8rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--cream);
	margin-bottom: 14px;
	position: relative;
  }

  .cta-section p {
	color: rgba(250,246,239,0.48);
	max-width: 360px;
	margin-bottom: 40px;
	font-size: 0.92rem;
	position: relative;
  }

  /* ── FOOTER ── */
  footer {
	padding: 28px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--border);
	font-size: 0.75rem;
	color: var(--muted);
	background: var(--cream);
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
  }

  .hero-tag { animation: fadeUp 0.55s ease both; }
  .hero h1  { animation: fadeUp 0.55s 0.1s ease both; }
  .hero-sub { animation: fadeUp 0.55s 0.2s ease both; }

  /* ── MOBILE ── */
  @media (max-width: 680px) {
	nav { padding: 0 20px; }
	.nav-links a:not(.nav-cta) { display: none; }
	.hero { padding: 110px 20px 60px; }
	.stats { grid-template-columns: 1fr 1fr; padding: 20px; }
	.stat { padding: 28px 20px; }
	.stat:nth-child(3) { grid-column: span 2; }
	.section { padding: 60px 20px; }
	.section-header { flex-direction: column; }
	.cta-section { padding: 80px 20px; }
	footer { flex-direction: column; gap: 8px; text-align: center; }
  }