/* ============================================================
   FTF BAT — Construction & Rénovation de Luxe
   Editorial luxury layout (matches design mockup)
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --bg:         #0a0806;   /* warm near-black            */
  --bg-2:       #0d0a07;
  --panel:      #14100b;   /* card surface               */
  --panel-2:    #100c08;
  --line:       rgba(201,168,106,.16);
  --gray:       #8f8678;
  --gray-soft:  #b3a994;
  --ivory:      #ddd4c4;
  --ivory-dim:  #c3b9a6;
  --gold:       #c9a86a;
  --gold-soft:  #dec18a;
  --gold-deep:  #9a7c47;

  --font-title: 'Playfair Display', Georgia, serif;
  --font-body:  'Inter', system-ui, sans-serif;
  --font-script:'Cormorant Garamond', serif;

  --ease-lux:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0.05, 0.36, 1);

  --edge: clamp(1.25rem, 3.5vw, 3rem);
  --maxw: 1480px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0; background: var(--bg); color: var(--ivory);
  font-family: var(--font-body); font-weight: 300; letter-spacing: .01em;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; height: 100vh; }
.title-font { font-family: var(--font-title); }
::selection { background: var(--gold); color: var(--bg); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2419; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.italic-serif { font-style: italic; font-family: var(--font-title); color: var(--gold-soft); }
.signature { font-family: var(--font-script); font-style: italic; font-weight: 600; color: var(--gold); font-size: 1.9rem; line-height: 1; }
.signature--sm { font-size: 1.25rem; }

/* ---------- BUTTONS ---------- */
.btn-gold {
  position: relative; display: inline-flex; align-items: center; gap: .8rem;
  padding: .95rem 1.9rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--bg); background: var(--gold);
  border: none; border-radius: 3px; overflow: hidden; isolation: isolate;
  transition: box-shadow .6s var(--ease-lux), color .6s var(--ease-lux); cursor: pointer;
}
.btn-gold::before { content:""; position:absolute; inset:0; z-index:-1; background: var(--ivory); transform: translateY(101%); transition: transform .55s var(--ease-lux); }
.btn-gold:hover { box-shadow: 0 0 46px -8px rgba(201,168,106,.55); }
.btn-gold:hover::before { transform: translateY(0); }
.btn-gold .arrow { transition: transform .55s var(--ease-lux); }
.btn-gold:hover .arrow { transform: translateX(5px); }
.btn-gold--lg { padding: 1.15rem 2.4rem; font-size: .78rem; border-radius: 4px; }

/* ============================================================
   GLOBAL FX (grain, vignette, cursor)
   ============================================================ */
.fx-vignette { position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 42%, transparent 56%, rgba(0,0,0,.6) 100%); mix-blend-mode: multiply; }
.fx-grain { position: fixed; inset: -150%; z-index: 91; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(6) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)}20%{transform:translate(-8%,4%)}40%{transform:translate(5%,-9%)}60%{transform:translate(-3%,7%)}80%{transform:translate(7%,3%)}100%{transform:translate(-6%,-4%)} }

.cursor-dot, .cursor-ring { position: fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform: translate(-50%,-50%); mix-blend-mode: difference; }
.cursor-dot { width:6px; height:6px; background: var(--ivory); }
.cursor-ring { width:40px; height:40px; border:1px solid rgba(221,212,196,.5); transition: width .4s var(--ease-lux), height .4s var(--ease-lux), border-color .4s var(--ease-lux), background .4s var(--ease-lux); }
.cursor-ring.is-hover { width:66px; height:66px; border-color: var(--gold); background: rgba(201,168,106,.06); }
@media (hover: hover) and (pointer: fine) { html, body, a, button { cursor: none; } }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring { display:none; } html,body,a,button{cursor:auto;} }

/* ============================================================
   LOADER
   ============================================================ */
.loader { position: fixed; inset:0; z-index:1000; background:#050403; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.loader__brand { font-family: var(--font-title); font-size: clamp(2.2rem,7vw,4.6rem); letter-spacing:.12em; color: var(--ivory); overflow:hidden; }
.loader__brand span { display:inline-block; }
.loader__sub { margin-top:1.1rem; font-size:.62rem; letter-spacing:.5em; text-transform:uppercase; color: var(--gold); }
.loader__bar { position:absolute; bottom:0; left:0; height:2px; width:100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); transform-origin:left; transform: scaleX(0); }
.loader__count { position:absolute; bottom:1.6rem; right: var(--edge); font-size:.78rem; letter-spacing:.2em; color: var(--gray); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav { position: fixed; top:0; left:0; width:100%; z-index:200; padding: 1.3rem var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  transition: padding .6s var(--ease-lux), background .6s var(--ease-lux), backdrop-filter .6s var(--ease-lux), border-color .6s var(--ease-lux);
  border-bottom: 1px solid transparent; }
.nav.is-scrolled { padding:.85rem var(--edge); background: rgba(10,8,6,.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201,168,106,.1); }
.nav__brand { display:flex; align-items:center; gap:.8rem; }
.nav__mark { width:42px; height:42px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; font-family: var(--font-title); color: var(--gold); font-size:1.3rem; flex:none; }
.nav__brandtext { display:flex; flex-direction:column; line-height:1.15; }
.nav__name { font-family: var(--font-title); font-size:1.35rem; letter-spacing:.1em; }
.nav__tagline { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gray); }
.nav__links { display:flex; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav__links a { position:relative; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ivory-dim); font-weight:400; padding:.3rem 0; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--gold); transition: width .5s var(--ease-lux); }
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { width:100%; }
.nav__burger { display:none; flex-direction:column; gap:6px; background:none; border:0; padding:6px; z-index:210; }
.nav__burger span { width:26px; height:1.5px; background: var(--ivory); transition:.4s var(--ease-lux); transform-origin:center; }
.nav.menu-open .nav__burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.menu-open .nav__burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 1024px) { .nav__tagline { display:none; } }
@media (max-width: 900px) { .nav__links, .nav__cta { display:none; } .nav__burger { display:flex; } }

/* ---- MOBILE MENU ---- */
.mobile-menu { position: fixed; inset:0; z-index:205; background:#050403; display:flex; flex-direction:column; justify-content:center; padding: var(--edge); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-lux); pointer-events:none; }
.mobile-menu.is-open { clip-path: inset(0 0 0 0); pointer-events:auto; }
.mobile-menu__links { display:flex; flex-direction:column; gap:1rem; }
.mobile-menu__links a { font-family: var(--font-title); font-size: clamp(1.9rem,8vw,3rem); color: var(--ivory); opacity:0; transform: translateY(20px); transition: opacity .6s var(--ease-lux), transform .6s var(--ease-lux), color .3s; }
.mobile-menu__links a:last-child { color: var(--gold); }
.mobile-menu.is-open .mobile-menu__links a { opacity:1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu__links a:nth-child(1){transition-delay:.15s}
.mobile-menu.is-open .mobile-menu__links a:nth-child(2){transition-delay:.21s}
.mobile-menu.is-open .mobile-menu__links a:nth-child(3){transition-delay:.27s}
.mobile-menu.is-open .mobile-menu__links a:nth-child(4){transition-delay:.33s}
.mobile-menu.is-open .mobile-menu__links a:nth-child(5){transition-delay:.39s}
.mobile-menu.is-open .mobile-menu__links a:nth-child(6){transition-delay:.45s}
.mobile-menu.is-open .mobile-menu__links a:nth-child(7){transition-delay:.51s}
.mobile-menu__foot { position:absolute; bottom: var(--edge); left: var(--edge); right: var(--edge); display:flex; flex-direction:column; gap:.5rem; color: var(--gray); font-size:.85rem; }
.mobile-menu__foot a { color: var(--gold-soft); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(.74) contrast(1.05) saturate(.96); }
.hero__grade { position:absolute; inset:0; background:
  linear-gradient(105deg, rgba(10,8,6,.85) 0%, rgba(10,8,6,.35) 42%, rgba(10,8,6,.15) 70%, rgba(10,8,6,.55) 100%),
  linear-gradient(to bottom, rgba(10,8,6,.5) 0%, transparent 30%, transparent 60%, rgba(10,8,6,.85) 100%); }
.hero__accent-line { position:absolute; right: clamp(3rem, 9vw, 9rem); top: 30%; height: 40%; width:1px; background: linear-gradient(var(--gold), transparent); opacity:.6; }

.hero__content { position:absolute; left: var(--edge); top: 50%; transform: translateY(-50%); z-index:5; max-width: 46rem; }
.hero__title { font-family: var(--font-title); font-weight:500; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height:1.02; letter-spacing:-.02em; color: var(--ivory); margin:0; }
.hero__sub { margin-top:1.6rem; color: var(--ivory-dim); font-weight:300; line-height:1.7; font-size: clamp(.95rem,1.3vw,1.15rem); }
.reveal-mask { overflow:hidden; display:block; }
.reveal-mask > span { display:inline-block; }

.hero__scroll { position:absolute; left: var(--edge); bottom: clamp(2rem,5vh,3.2rem); z-index:5; display:flex; align-items:center; gap:1rem; }
.hero__scroll-ic { width:38px; height:38px; border:1px solid rgba(201,168,106,.5); border-radius:50%; display:grid; place-items:center; color: var(--gold); }
.hero__scroll-ic i { animation: bob 2s var(--ease-soft) infinite; }
@keyframes bob { 0%,100%{transform:translateY(-3px)} 50%{transform:translateY(3px)} }
.hero__scroll-tx { font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color: var(--gold); line-height:1.5; }
.hero__since { position:absolute; right: var(--edge); bottom: clamp(2rem,5vh,3.2rem); z-index:5; text-align:right; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color: var(--gray-soft); line-height:1.6; }

/* ============================================================
   BLOCK SCAFFOLD — numbered editorial sections
   ============================================================ */
.block { position: relative; max-width: var(--maxw); margin:0 auto;
  padding: clamp(2.4rem, 4.5vw, 4rem) var(--edge);
  display: grid; grid-template-columns: clamp(58px, 7vw, 108px) 1fr; gap: clamp(.85rem, 2vw, 2rem); align-items: start; }
.block + .block { padding-top: 0; }
.block__index { position: sticky; top: 6.5rem; }
.block__num { font-family: var(--font-title); font-weight:400; font-size: clamp(2rem, 3.2vw, 3.2rem); line-height:1; color: rgba(201,168,106,.5); display:block; }
.block__label { display:block; margin-top:.9rem; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold-deep); }
@media (max-width: 760px) {
  .block { grid-template-columns: 1fr; gap: 1.4rem; }
  .block__index { position: static; display:flex; align-items:baseline; gap:1rem; }
  .block__num { font-size: 2.4rem; }
  .block__label { margin-top:0; }
}

/* ============================================================
   01 — INTRO
   ============================================================ */
.intro__body { display:grid; grid-template-columns: 1.05fr .95fr .85fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
.intro__statement { font-family: var(--font-title); font-weight:500; font-size: clamp(1.7rem, 2.7vw, 2.7rem); line-height:1.18; letter-spacing:-.01em; color: var(--ivory); margin:0; }
.intro__art { display:flex; justify-content:center; align-items:center; }
.blueprint { width: 100%; max-width: 360px; height:auto; }
.intro__aside { align-self:center; }
.intro__text { color: var(--gray-soft); line-height:1.8; font-size: .95rem; max-width: 30ch; }
.intro__sign { margin-top: 2rem; display:flex; flex-direction:column; gap:.4rem; }
.intro__role { font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gray); }
@media (max-width: 900px) {
  .intro__body { grid-template-columns: 1fr; }
  .intro__art { order:-1; }
  .blueprint { max-width: 280px; }
}

/* ============================================================
   02 — VALEURS
   ============================================================ */
.values-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(201,168,106,.22); border: 1px solid rgba(201,168,106,.22); }
.vcol { position:relative; min-height: clamp(340px, 32vw, 420px); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 2.2rem 1.5rem 3rem; background: var(--panel-2); }
.vcol__bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-color:#15110b; transform: scale(1.06); transition: transform 1.1s var(--ease-lux); }
.vcol__veil { position:absolute; inset:0; z-index:1; background:
  linear-gradient(to bottom, rgba(8,6,4,.5) 0%, rgba(8,6,4,.2) 38%, rgba(8,6,4,.42) 66%, rgba(8,6,4,.82) 100%),
  radial-gradient(70% 38% at 50% 52%, rgba(8,6,4,.32), transparent 70%); }
.vcol__inner { position:relative; z-index:2; }
.vcol__name { font-family: var(--font-title); font-weight:500; font-size: clamp(1.15rem, 1.6vw, 1.55rem); letter-spacing:.04em; margin:0 0 .85rem; color: var(--ivory); text-shadow: 0 2px 22px rgba(0,0,0,.55); }
.vcol__desc { color: var(--ivory-dim); font-size:.82rem; line-height:1.55; max-width: 22ch; margin:0 auto; text-shadow: 0 1px 14px rgba(0,0,0,.65); }
.vcol__num { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:2; font-family: var(--font-title); font-size:.92rem; color: var(--gold); letter-spacing:.1em; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.vcol:hover .vcol__bg { transform: scale(1.16); }
@media (max-width: 820px) { .values-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .values-grid { grid-template-columns: 1fr; } }

/* ============================================================
   03 — SERVICES
   ============================================================ */
.services-row { display:grid; grid-template-columns: repeat(6, 1fr) 1.35fr; border: 1px solid var(--line); background: var(--panel-2); }
.svc { position:relative; padding: 1.5rem 1.1rem 1.3rem; display:flex; flex-direction:column; min-height: clamp(165px, 17vw, 205px); border-right: 1px solid var(--line); transition: background .5s var(--ease-lux); }
.svc:hover { background: rgba(201,168,106,.05); }
.svc__ic { color: var(--gold); font-size:1.2rem; margin-bottom: 1.3rem; }
.svc__num { font-size:.64rem; letter-spacing:.2em; color: var(--gold-deep); margin-bottom:.55rem; }
.svc__name { font-family: var(--font-title); font-weight:500; font-size: clamp(.92rem, 1.05vw, 1.08rem); line-height:1.18; margin:0 0 .55rem; color: var(--ivory); }
.svc__desc { color: var(--gray); font-size:.76rem; line-height:1.5; }
.svc__plus { margin-top:auto; padding-top:1rem; color: var(--gold); font-size:.85rem; transition: transform .5s var(--ease-lux); width: 1.5rem; }
.svc:hover .svc__plus { transform: rotate(90deg); }
.svc-img { position:relative; overflow:hidden; min-height: 100%; }
.svc-img__bg { position:absolute; inset:0; background-size:cover; background-position:center; background-color:#15110b; transform: scale(1.06); transition: transform 1.1s var(--ease-lux); }
.svc-img:hover .svc-img__bg { transform: scale(1.13); }
.svc-img__veil { position:absolute; inset:0; background: linear-gradient(to top, rgba(10,8,6,.55), transparent 60%); }
@media (max-width: 1024px) {
  .services-row { grid-template-columns: repeat(3, 1fr); }
  .svc:nth-child(3n) { border-right: none; }
  .svc-img { grid-column: 1 / -1; min-height: 220px; }
}
@media (max-width: 560px) {
  .services-row { grid-template-columns: repeat(2, 1fr); }
  .svc:nth-child(3n){border-right:1px solid var(--line);} .svc:nth-child(2n){border-right:none;}
}

/* ============================================================
   04 — PROJETS
   ============================================================ */
.projects-row { display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.4vw, 1.25rem); }
.proj { display:flex; flex-direction:column; }
.proj__img { position:relative; aspect-ratio: 4 / 3.1; overflow:hidden; border-radius:4px; }
.proj__bg { position:absolute; inset:0; background-size:cover; background-position:center; background-color:#15110b; transform: scale(1.04); transition: transform 1.1s var(--ease-lux), filter 1.1s var(--ease-lux); filter: brightness(.92); }
.proj:hover .proj__bg { transform: scale(1.12); filter: brightness(1.05); }
.proj__name { font-family: var(--font-title); font-weight:500; font-size: clamp(1.05rem,1.3vw,1.32rem); margin: .9rem 0 .4rem; color: var(--ivory); }
.proj__loc { font-size:.78rem; color: var(--gray-soft); letter-spacing:.02em; }
.proj__year { font-size:.76rem; color: var(--gold); margin-top:.4rem; letter-spacing:.08em; }
.projects__more { display:inline-flex; align-items:center; gap:.7rem; margin-top: 1.8rem; margin-left:auto; width:max-content; float:right;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold); transition: gap .4s var(--ease-lux); }
.projects__more:hover { gap: 1.1rem; }
@media (max-width: 820px) { .projects-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .projects-row { grid-template-columns: 1fr; } }

/* ============================================================
   05 — EN CHIFFRES
   ============================================================ */
.stats-row { display:grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align:center; padding: 1.1rem 1rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat__num { font-family: var(--font-title); font-weight:500; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height:1; color: var(--gold); letter-spacing:-.02em; }
.stat__num .suffix { color: var(--gold); }
.stat__label { margin-top:1rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gray-soft); line-height:1.6; }
@media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2,1fr); gap-row: 2rem; }
  .stat:nth-child(2){border-right:none;} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line); padding-bottom:2.4rem;} .stat:nth-child(3),.stat:nth-child(4){padding-top:2.4rem;} }

/* ============================================================
   06 — PROCESSUS (horizontal timeline)
   ============================================================ */
.proc-steps { position:relative; display:grid; grid-template-columns: repeat(5, 1fr); }
.proc-rail { position:absolute; top: 30px; left:10%; right:10%; height:1px; background: rgba(201,168,106,.22); z-index:0; }
.proc-rail__fill { position:absolute; left:0; top:0; height:100%; width:0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); box-shadow: 0 0 12px rgba(201,168,106,.5); }
.proc-diamond { position:absolute; top:30px; width:8px; height:8px; background: var(--gold); transform: translate(-50%,-50%) rotate(45deg); z-index:1; opacity:.8; }
.pstep { position:relative; z-index:2; text-align:center; padding: 0 .6rem; }
.pstep__node { width:60px; height:60px; margin:0 auto; border-radius:50%; border:1px solid rgba(201,168,106,.4); background: var(--panel); display:grid; place-items:center; color: var(--gold); font-size:1.1rem; transition: .5s var(--ease-lux); }
.pstep.is-active .pstep__node { border-color: var(--gold); box-shadow: 0 0 22px -4px rgba(201,168,106,.7); background: #1b150d; }
.pstep__no { display:block; margin-top:1.4rem; font-size:.7rem; letter-spacing:.2em; color: var(--gold); }
.pstep__name { font-family: var(--font-title); font-weight:500; font-size: clamp(1rem,1.3vw,1.25rem); margin:.5rem 0 .6rem; color: var(--ivory); }
.pstep__desc { color: var(--gray); font-size:.78rem; line-height:1.55; max-width: 18ch; margin:0 auto; }
@media (max-width: 760px) {
  .proc-steps { grid-template-columns: 1fr; gap: 2.2rem; padding-left: 30px; }
  .proc-rail { left:30px; right:auto; top:30px; bottom:30px; width:1px; height:auto; }
  .proc-rail__fill { width:100%; height:0; }
  .proc-diamond { display:none; }
  .pstep { text-align:left; display:grid; grid-template-columns: 60px 1fr; gap: 1.2rem; align-items:center; }
  .pstep__node { margin:0; }
  .pstep__no { margin-top:0; grid-column:2; }
  .pstep__name, .pstep__desc { grid-column:2; margin-left:0; max-width:none; text-align:left; }
  .pstep__node { position:relative; }
}

/* ============================================================
   07 — CTA
   ============================================================ */
.cta { position: relative; min-height: clamp(400px, 52vh, 540px); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding: 4.5rem var(--edge); }
.cta__bg { position:absolute; inset:0; background-size:cover; background-position:center; background-color:#15110b; transform: scale(1.12); filter: brightness(.4) saturate(.95); will-change: transform; }
.cta__veil { position:absolute; inset:0; background: radial-gradient(80% 90% at 50% 50%, rgba(10,8,6,.5), rgba(10,8,6,.9)); }
.cta__glow { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:55vw; height:55vw; max-width:760px; max-height:760px; background: radial-gradient(circle, rgba(201,168,106,.16), transparent 60%); pointer-events:none; }
.cta__num { position:absolute; top: clamp(2rem,5vw,3.5rem); left: var(--edge); z-index:3; font-family: var(--font-title); font-size: clamp(2.4rem,4vw,3.8rem); color: rgba(201,168,106,.5); }
.cta__inner { position:relative; z-index:3; max-width: 52rem; }
.cta__title { font-family: var(--font-title); font-weight:500; font-size: clamp(2rem, 5vw, 4rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 1.2rem; }
.cta__sub { color: var(--ivory-dim); font-size: clamp(.92rem,1.3vw,1.1rem); margin: 0 auto 2.2rem; max-width: 34rem; }
.magnetic { display:inline-block; will-change: transform; }
.cta__features { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1.4rem; margin-top: 2.2rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gray-soft); }
.cta__features i { color: var(--gold); margin-right:.5rem; }
.cta__features .sep { width:1px; height:14px; background: var(--line); }
@media (max-width: 620px) { .cta__features .sep { display:none; } .cta__features { gap:.9rem; flex-direction:column; } }

/* ============================================================
   08 — FOOTER
   ============================================================ */
.footer { background: #070504; }
.footer__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr 1fr; gap: clamp(1.25rem,2.4vw,2.4rem); padding-bottom: 2.8rem; border-bottom: 1px solid var(--line); }
.footer__brand .nav__mark { width:38px; height:38px; }
.footer__brand .nav__name { font-size:1.5rem; }
.footer__tag { color: var(--gold); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; margin-top:1rem; }
.footer__by { color: var(--gray); margin-top:1.2rem; line-height:1.7; font-size:.88rem; max-width: 32ch; }
.footer__founder { color: var(--gray); margin-top:1.2rem; font-size:.9rem; }
.footer__col h4 { font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold); margin:0 0 1.2rem; font-weight:500; }
.footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.footer__col a, .footer__col li { color: var(--gray-soft); font-size:.9rem; transition: color .4s var(--ease-lux); }
.footer__col a:hover { color: var(--gold); }
.footer__contact li { display:flex; gap:.7rem; align-items:flex-start; line-height:1.5; }
.footer__contact i { color: var(--gold-deep); margin-top:.2rem; }
.footer__contact span { color: var(--gray); }
.footer__socials { display:flex; gap:.7rem; margin-top:1.6rem; }
.footer__socials a { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color: var(--ivory-dim); transition:.4s var(--ease-lux); }
.footer__socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.footer__thumbs { display:grid; grid-template-columns: repeat(3, 1fr); gap:.5rem; }
.footer__thumb { aspect-ratio:1; border-radius:3px; background-size:cover; background-position:center; background-color:#15110b; filter: grayscale(.2) brightness(.85); transition:.5s var(--ease-lux); }
.footer__thumb:hover { filter: grayscale(0) brightness(1.05); }
.footer__bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top: 1.6rem; color: var(--gray); font-size:.76rem; letter-spacing:.04em; }
.footer__legal { display:flex; gap:2rem; }
.footer__legal a:hover, .footer__passion { color: var(--gold-soft); }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__bottom { flex-direction:column; } }

/* ============================================================
   REVEAL + REDUCED MOTION
   ============================================================ */
[data-reveal] { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .fx-grain { animation:none; }
  [data-reveal], [data-fade] { opacity:1 !important; transform:none !important; }
  .vcol__bg, .cta__bg, .proj__bg { transform:none; }
}