/* ============================================================
   CAD Elevate — landing page
   Dark precision-engineering aesthetic. Amber accent tuned to
   the brass gear in the renders. Compositor-friendly motion.
   ============================================================ */

:root{
  --bg:        #0a0c0f;
  --bg-2:      #0e1116;
  --surface:   #12161c;
  --surface-2: #171c23;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);
  --text:      #e9edf3;
  --muted:     #8a95a4;
  --faint:     #5b6572;

  --accent:    #f4a63e;   /* machined amber */
  --accent-2:  #ff7a3c;   /* copper */
  --accent-ink:#1b1206;

  --plate-1:   #eef1f5;   /* light render tile — melts into render bg */
  --plate-2:   #dfe4ea;

  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 2rem);
  --r: 14px;
  --r-lg: 20px;

  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3{ font-family:var(--f-display); font-weight:600; line-height:1.06; letter-spacing:-.02em; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.mono{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.1rem;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(244,166,62,.18); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(244,166,62,0); } }

/* ---------- Buttons ---------- */
.btn{
  --bg-btn:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.15rem; border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:var(--accent-ink); font-weight:600; font-size:.95rem;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow:0 6px 22px -8px rgba(244,166,62,.55);
  cursor:pointer; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(244,166,62,.7); }
.btn--sm{ padding:.5rem .95rem; font-size:.86rem; }
.btn--lg{ padding:.9rem 1.5rem; font-size:1rem; }
.btn--ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); box-shadow:none; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line-soft);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:66px; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; }
.brand__mark{ color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.brand__lock{ display:flex; flex-direction:column; line-height:1.12; }
.brand__name{ font-size:1rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.brand__role{ font-size:.58rem; color:var(--muted); letter-spacing:.14em; margin-top:2px; }
.brand--sm .brand__name{ font-size:.95rem; }
@media (max-width:760px){
  .brand__role{ display:none; }
  .brand__name{ font-size:.78rem; letter-spacing:-.02em; }
  .brand__mark svg{ width:30px; height:30px; }
  .brand{ gap:.5rem; }
}
.nav__links{ display:flex; gap:1.6rem; margin-left:auto; font-size:.94rem; color:var(--muted); }
.nav__links a{ position:relative; transition:color .25s; }
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--accent); transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav .btn{ margin-left:.25rem; }
@media (max-width:760px){ .nav__links{ display:none; } .nav__inner{ justify-content:space-between; } .nav .btn{ margin-left:auto; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(3rem,5vw,4.5rem); }
.hero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 68%);
          mask-image:radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 68%);
  opacity:.6; pointer-events:none;
}
.hero::before{
  content:""; position:absolute; width:60vw; height:60vw; right:-14vw; top:-22vw;
  background:radial-gradient(circle, rgba(244,166,62,.16), transparent 62%);
  pointer-events:none;
}
.hero__inner{ position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.2fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.hero__title{ font-size:clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem); font-weight:700; margin:.2rem 0 1.25rem; }
.hero__title .hl{ color:var(--accent); position:relative; white-space:nowrap; }
.hero__title .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.5em; background:linear-gradient(90deg, rgba(244,166,62,.22), rgba(255,122,60,.05)); z-index:-1; border-radius:3px; }
@media (max-width:560px){ .hero__title .hl{ white-space:normal; } }
.hero__sub{ color:var(--muted); font-size:clamp(1.02rem, .98rem + .3vw, 1.2rem); max-width:34rem; margin:0 0 1.9rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.4rem; }
.hero__stats{ list-style:none; margin:0; padding:1.4rem 0 0; display:flex; gap:clamp(1.2rem,4vw,2.6rem); border-top:1px solid var(--line-soft); }
.hero__stats b{ display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:700; color:var(--text); line-height:1; }
.hero__stats span{ font-size:.8rem; color:var(--faint); }

.hero__visual{ position:relative; }
.hero__plate{
  position:relative; border-radius:var(--r-lg);
  background:radial-gradient(120% 120% at 50% 25%, var(--plate-1), var(--plate-2));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.5);
  overflow:hidden; aspect-ratio:1/1;
  animation:float 7s ease-in-out infinite;
}
.hero__plate img{ width:100%; height:100%; object-fit:cover; }
.hero__tag{ position:absolute; top:.85rem; left:.85rem; z-index:2; color:#4a5261; background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.06); padding:.3rem .6rem; border-radius:7px; font-size:.66rem; }
.hero__spec{ position:absolute; right:.4rem; bottom:-.5rem; color:var(--faint); background:var(--bg); padding:.35rem .7rem; border:1px solid var(--line); border-radius:8px; }
@keyframes float{ 50%{ transform:translateY(-14px); } }
@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ max-width:440px; }
}
@media (prefers-reduced-motion: reduce){ .hero__plate{ animation:none; } .eyebrow .dot{ animation:none; } }

/* ---------- Strip ---------- */
.strip{ border-block:1px solid var(--line-soft); background:var(--bg-2); }
.strip__inner{ display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; padding-block:1.1rem; color:var(--faint); font-size:.72rem; }
.strip__inner span{ position:relative; }
.strip__inner span::before{ content:"◇"; color:var(--accent); margin-right:.7rem; opacity:.5; }

/* ---------- Sections ---------- */
.section{ padding:clamp(4rem,8vw,7rem) 0; }
.section--alt{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.section__head{ max-width:44rem; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.section__head h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.section__lead{ color:var(--muted); margin:1rem 0 0; font-size:1.08rem; }

/* ---------- Services ---------- */
.services{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.svc{
  grid-column:span 2;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.6rem 1.5rem;
  transition:transform .4s var(--ease), border-color .3s, background .3s;
}
.svc--wide{ grid-column:span 3; }
@media (min-width:861px){ .svc--wide{ grid-row:span 1; } }
.svc:hover{ transform:translateY(-4px); border-color:rgba(244,166,62,.4); background:var(--surface-2); }
.svc__icon{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; margin-bottom:1.1rem;
  color:var(--accent); background:rgba(244,166,62,.1); border:1px solid rgba(244,166,62,.22); }
.svc__icon svg{ width:23px; height:23px; }
.svc h3{ font-size:1.16rem; margin-bottom:.5rem; }
.svc p{ color:var(--muted); font-size:.96rem; margin:0; }
.svc--accent{ background:linear-gradient(160deg, rgba(244,166,62,.12), var(--surface) 55%); border-color:rgba(244,166,62,.28); }
.svc--accent .svc__icon{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
@media (max-width:860px){ .services{ grid-template-columns:1fr 1fr; } .svc,.svc--wide{ grid-column:span 1; } }
@media (max-width:520px){ .services{ grid-template-columns:1fr; } }

/* ---------- Projects ---------- */
.projects{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.proj{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .3s;
}
.proj:hover{ transform:translateY(-5px); border-color:rgba(244,166,62,.4); }
.proj__plate{
  position:relative; aspect-ratio:16/11;
  background:radial-gradient(120% 120% at 50% 30%, var(--plate-1), var(--plate-2));
  overflow:hidden;
}
.proj__plate img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.proj:hover .proj__plate img{ transform:scale(1.05); }
.proj__view{
  position:absolute; right:.8rem; bottom:.8rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--text); background:rgba(10,12,15,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.4rem .8rem;
  cursor:pointer; transition:background .25s, color .25s, transform .25s var(--ease);
}
.proj__view:hover{ background:var(--accent); color:var(--accent-ink); transform:scale(1.05); }
.proj__body{ padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.proj__body h3{ font-size:1.22rem; }
.proj__ps{ margin:0; color:var(--muted); font-size:.94rem; }
.proj__ps b{ color:var(--accent); font-weight:600; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:.4rem 0 0; padding:0; }
.tags li{ color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:.28rem .55rem; font-size:.66rem; }
@media (max-width:760px){ .projects{ grid-template-columns:1fr; } }

/* ---------- Process ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; counter-reset:s; }
.step{ position:relative; padding:1.8rem 1.5rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.step__n{ font-size:1.4rem; color:var(--accent); font-weight:600; display:block; margin-bottom:1rem; }
.step h3{ font-size:1.2rem; margin-bottom:.5rem; }
.step p{ color:var(--muted); margin:0; font-size:.96rem; }
.step:not(:last-child)::after{ content:"→"; position:absolute; right:-1rem; top:50%; transform:translateY(-50%); color:var(--faint); font-size:1.1rem; z-index:2; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } .step:not(:last-child)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-1.1rem; transform:translateX(-50%); } }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:minmax(250px,.82fr) 1.18fr; gap:clamp(2rem,5vw,4.2rem); align-items:start; }
.about__portrait{ display:flex; flex-direction:column; }
.about__photo{ position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(244,166,62,.4); box-shadow:0 34px 64px -32px rgba(0,0,0,.75); }
.about__photo::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none; }
.about__photo img{ width:100%; height:100%; object-fit:cover; }
.about__id{ margin:1.15rem 0 1.25rem; }
.about__id b{ display:block; font-family:var(--f-display); font-size:1.2rem; font-weight:700; letter-spacing:-.01em; }
.about__id span{ display:block; color:var(--accent); margin-top:.35rem; font-size:.64rem; }
.about__copy{ padding-top:.25rem; }
.about__copy h2{ font-size:clamp(1.7rem, 1.2rem + 2vw, 2.5rem); margin:.2rem 0 1.1rem; }
.about__copy p{ color:var(--muted); margin:0 0 1.6rem; font-size:1.05rem; }
.about__badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.about__badges span{ color:var(--text); border:1px solid var(--line); border-radius:7px; padding:.4rem .7rem; font-size:.68rem; background:var(--surface); }
.about__stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.about__stats li{ background:var(--surface); padding:1.15rem 1.2rem; }
.about__stats b{ display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:700; color:var(--accent); line-height:1; }
.about__stats span{ font-size:.75rem; color:var(--faint); }
@media (max-width:760px){ .about{ grid-template-columns:1fr; } .about__portrait{ max-width:340px; } }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; padding:clamp(4rem,8vw,6.5rem) 0; text-align:center; background:var(--bg-2); border-top:1px solid var(--line-soft); }
.cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%, rgba(244,166,62,.14), transparent 60%); pointer-events:none; }
.cta__inner{ position:relative; max-width:40rem; }
.cta .eyebrow{ justify-content:center; }
.cta h2{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.2rem); margin-bottom:1rem; }
.cta__sub{ color:var(--muted); margin:0 auto 2rem; max-width:32rem; }
.cta__alt{ color:var(--faint); margin-top:1.6rem; }
.cta__alt a{ color:var(--muted); border-bottom:1px solid var(--line); transition:color .25s, border-color .25s; }
.cta__alt a:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line-soft); }
.foot__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.8rem; color:var(--faint); }
.foot__inner p{ margin:0; font-size:.68rem; }
.foot__top{ transition:color .25s; }
.foot__top:hover{ color:var(--accent); }
.brand--sm .brand__txt{ font-size:1rem; }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.5rem;
  background:rgba(5,7,10,.86); backdrop-filter:blur(8px); }
.lb[hidden]{ display:none; }
.lb__stage{ width:100%; max-width:720px; text-align:center; }
.lb__title{ color:var(--accent); margin:0 0 .8rem; }
.lb__main{ width:100%; border-radius:var(--r-lg); background:radial-gradient(120% 120% at 50% 30%, var(--plate-1), var(--plate-2)); aspect-ratio:16/12; object-fit:cover; border:1px solid rgba(255,255,255,.14); }
.lb__thumbs{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.9rem; }
.lb__thumbs button{ width:66px; height:52px; border-radius:9px; overflow:hidden; border:1.5px solid var(--line); background:var(--plate-1); cursor:pointer; padding:0; transition:border-color .2s, transform .2s var(--ease); }
.lb__thumbs button.is-active{ border-color:var(--accent); }
.lb__thumbs button:hover{ transform:translateY(-2px); }
.lb__thumbs button.is-360{ display:grid; place-items:center; background:var(--surface); color:var(--accent); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.05em; }
.lb__thumbs img{ width:100%; height:100%; object-fit:cover; }
.lb__hint{ color:var(--faint); margin-top:1rem; }
.lb__close{ position:absolute; top:1.1rem; right:1.3rem; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:1rem; cursor:pointer; transition:background .25s, transform .25s; }
.lb__close:hover{ background:var(--accent); color:var(--accent-ink); transform:rotate(90deg); }

/* ---------- Reveal on scroll ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }