@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root {
  --orange: #ff9446;
  --dark: #0f0f0f;
  --dark2: #141414;
  --dark3: #1a1a1a;
  --white: #ffffff;
  --muted: rgba(255,255,255,0.6);
  --border: rgba(255,148,70,0.15);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--dark); color:var(--white); font-family:'Lato',sans-serif; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }

/* ─── CURSOR ─── */
.cursor,.cursor-ring { display:none; pointer-events:none; position:fixed; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); }
@media(hover:hover) and (pointer:fine){
  body { cursor:none; }
  .cursor { display:block; width:10px; height:10px; background:var(--orange); top:0;left:0; }
  .cursor-ring { display:block; width:36px; height:36px; border:1.5px solid rgba(255,148,70,.45); top:0;left:0; transition:transform .28s ease; }
}

/* ─── NAV ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--orange); padding:0 48px;
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.nav-logo { font-size:13px; font-weight:900; color:var(--dark); letter-spacing:.16em; text-transform:uppercase; }
.nav-links { display:flex; gap:8px; list-style:none; }
.nav-links a {
  padding:6px 18px; border:2px solid var(--dark); border-radius:999px;
  color:var(--dark); font-size:10px; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  transition:background .2s,color .2s;
}
.nav-links a:hover,
.nav-links a.active { background:var(--dark); color:var(--orange); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav {
  display:none; position:fixed; top:60px; left:0; right:0;
  background:var(--orange); flex-direction:column; z-index:99;
  padding:8px 20px 20px; box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.mobile-nav.open { display:flex; }
.mobile-nav a { display:block; padding:13px 0; border-bottom:1px solid rgba(0,0,0,.12); color:var(--dark); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.mobile-nav a:last-child { border-bottom:none; }

/* ─── SHARED HELPERS ─── */
.label { font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--orange); font-weight:700; }
.divider { width:44px; height:3px; background:var(--orange); border-radius:2px; margin:14px 0 24px; }
h1,h2,h3 { font-family:'Georgia',serif; font-style:italic; font-weight:900; text-transform:uppercase; color:var(--orange); line-height:.95; }
h1 { font-size:clamp(52px,9vw,120px); }
h2 { font-size:clamp(34px,5vw,64px); }
h3 { font-size:clamp(22px,3vw,36px); }
p { font-size:15px; line-height:1.9; color:rgba(255,255,255,.72); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ─── FOOTER ─── */
footer { background:var(--orange); padding:20px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
footer span { font-size:11px; font-weight:700; color:var(--dark); letter-spacing:.07em; }

/* ─── BACK BUTTON ─── */
.back-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; border:1.5px solid var(--orange); border-radius:999px;
  color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s,color .2s; margin-bottom:40px;
}
.back-btn:hover { background:var(--orange); color:var(--dark); }

/* ─── SKILL TAGS ─── */
.skill-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.skill-tag { padding:5px 14px; border:1px solid var(--orange); border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--orange); }

/* ─── FEATURE LIST ─── */
.features { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.feature { display:flex; gap:13px; align-items:flex-start; }
.feature-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:7px; }
.feature p { font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.7); }
.feature strong { color:var(--white); }

/* ─── SPEC GRID ─── */
.spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
.spec-card { background:rgba(255,148,70,.06); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.spec-card h4 { font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:7px; font-family:'Lato',sans-serif; font-style:normal; }
.spec-card p { font-size:13px; color:rgba(255,255,255,.65); line-height:1.6; }

/* ─── NEXT PROJECT ─── */
.next-project {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--dark3); border:1px solid var(--border);
  border-radius:16px; padding:30px 40px; margin-top:80px;
  transition:border-color .2s;
}
.next-project:hover { border-color:var(--orange); }
.next-project .np-label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:6px; font-weight:700; }
.next-project h3 { color:var(--white); font-size:22px; }
.next-project .np-arrow { font-size:28px; color:var(--orange); }

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  footer { padding:18px 20px; }
  .spec-grid { grid-template-columns:repeat(2,1fr); }
  .next-project { padding:22px 24px; }
}
@media(max-width:540px){
  h1 { font-size:clamp(40px,13vw,60px); }
  h2 { font-size:clamp(28px,8vw,42px); }
  .spec-grid { grid-template-columns:1fr; }
  .back-btn { margin-bottom:28px; }
}