:root{
  --bg0:#06060b;
  --bg1:#090a12;
  --panel: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.52);
  --a1:#8b5cf6;
  --a2:#22d3ee;
  --a3:#f472b6;
  --shadow: 0 18px 70px rgba(0,0,0,.45);
  --shadow2: 0 10px 40px rgba(0,0,0,.25);
  --r: 18px;
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

*{box-sizing:border-box}
html,body{height:100%}
html, body { overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #060610);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:24px}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.tiny{font-size:12px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.bg-glow{
  position:fixed; inset:-24vmax; pointer-events:none; z-index:-2;
  background:
    radial-gradient(70vmax 55vmax at 18% 18%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(70vmax 55vmax at 84% 16%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(70vmax 55vmax at 55% 88%, rgba(244,114,182,.12), transparent 64%);
  filter: blur(22px);
  transform: translateZ(0);
  opacity: .95;
}
.blobs{position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.55; filter: blur(20px); transform: translateZ(0);}
.blob{
  position:absolute; width: 44vmax; height: 44vmax; border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(244,114,182,.12), transparent 60%);
  mix-blend-mode: screen;
  opacity:.55;
  animation: floaty 12s ease-in-out infinite;
}
.blob.b1{left:-14%; top:10%;}
.blob.b2{left:62%; top:-10%; animation-duration: 14s; opacity:.50}
.blob.b3{left:14%; top:62%; animation-duration: 16s; opacity:.45}
@keyframes floaty{0%,100%{transform: translate(0,0) scale(1)} 50%{transform: translate(28px,-22px) scale(1.05)}}
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode: overlay; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

.card{
  border-radius: var(--r);
  border:1px solid var(--stroke);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.soft{
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.glow-hover{
  position:relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}
.glow-hover:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
}
.glow-hover:after{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  opacity:0; transition: opacity .18s ease;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(520px 220px at 90% 70%, rgba(139,92,246,.16), transparent 55%);
}
.glow-hover:hover:after{opacity:1}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(6,6,12,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0;}
.brand img{
  width:42px; height:42px; border-radius:16px; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
  flex:0 0 auto;
}
.brand .name{font-weight:950; letter-spacing:.2px; white-space:nowrap}
.brand .sub{font-size:12px; color:var(--muted); margin-top:3px; white-space:nowrap}

.linksWrap{position:relative; flex: 1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;}
.navArrow{
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  cursor:pointer;
  display:none;
  align-items:center; justify-content:center;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  flex:0 0 auto;
}
.navArrow:hover{ transform: translateY(-1px); filter:brightness(1.08); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.navArrow:active{ transform: translateY(0); }

.links{
  display:flex; gap:6px; align-items:center; white-space:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  scrollbar-width:none; padding: 6px 4px; border-radius:999px; min-width:0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.links::-webkit-scrollbar{display:none}
.links a{
  font-size:13px; color:var(--muted); padding:10px 12px; border-radius:999px;
  border:1px solid transparent; flex:0 0 auto;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.links a:hover{
  color:var(--text);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.links a.active{
  color:#07070c;
  background: linear-gradient(135deg, rgba(34,211,238,.88), rgba(139,92,246,.88));
  border-color: rgba(255,255,255,.18);
}

.nav-right{display:flex; align-items:center; gap:10px; flex:0 0 auto; white-space:nowrap;}
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:11px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
  white-space:nowrap;
}
.pill:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); filter:brightness(1.06)}
.pill.primary{
  background: linear-gradient(135deg, rgba(34,211,238,.88), rgba(139,92,246,.88));
  color:#07070c; border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(34,211,238,.10);
}

@media(max-width:980px){
  .brand .sub{display:none}
  .nav .wrap{padding-top:12px; padding-bottom:12px;}
  .nav-right .pill{ padding:10px 12px; }
}
@media(max-width:560px){
  .links a{ padding:9px 10px; font-size:12.5px; }
  .brand img{ width:38px; height:38px; border-radius:14px; }
  .brand .name{ font-size:13px; }
  .nav-right{ gap:8px; }
  .nav-right .pill{ padding:9px 10px; font-size:13px; }
  .navArrow{ width:34px; height:34px; }
}

header{padding:44px 0 8px}
.hero{display:grid; grid-template-columns: 1.15fr .85fr; gap:14px;}
@media(max-width:980px){ .hero{grid-template-columns:1fr} header{padding:26px 0 8px} }

.hero-left{padding:26px; position:relative; overflow:hidden}
.hero-left:after{
  content:""; position:absolute; inset:-1px; border-radius: var(--r); pointer-events:none;
  background:
    radial-gradient(1200px 400px at 30% 0%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(1200px 420px at 100% 40%, rgba(139,92,246,.14), transparent 55%),
    radial-gradient(900px 420px at 70% 100%, rgba(244,114,182,.10), transparent 60%);
  opacity:.85; mask: linear-gradient(#000, transparent 120%);
}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:1}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-size:12px; color:var(--muted);
  transition: transform .14s ease, filter .14s ease;
}
.chip:hover{ transform: translateY(-2px); filter:brightness(1.08); }
.dot{width:8px; height:8px; border-radius:999px; background: linear-gradient(135deg, var(--a2), var(--a1)); display:inline-block;}

h1{
  margin:0 0 12px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height:1.02;
  letter-spacing:-.9px;
  position:relative; z-index:1;
}
.grad{
  background: linear-gradient(135deg, var(--a2), var(--a1), var(--a3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{
  margin:0 0 18px; line-height:1.75; color:var(--muted);
  font-size:15px; max-width:78ch; position:relative; z-index:1;
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; position:relative; z-index:1}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:950;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, filter .14s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-2px) scale(1.01); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); filter:brightness(1.07)}
.btn.primary{ background: linear-gradient(135deg, rgba(139,92,246,.92), rgba(244,114,182,.72)); color:#07070c; border-color: rgba(255,255,255,.18); }
.btn.linkedin{ background: linear-gradient(135deg, rgba(34,211,238,.84), rgba(139,92,246,.84)); color:#07070c; border-color: rgba(255,255,255,.18); }
.btn.ghost{ background: rgba(255,255,255,.02); }

.hero-right{padding:14px; display:flex; flex-direction:column; gap:10px}
.profile{
  padding:16px; display:flex; gap:12px; align-items:center;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  position:relative; overflow:hidden;
}
.orb{
  position:absolute; right:-24px; top:-24px; width:90px; height:90px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.22), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(244,114,182,.14), transparent 60%);
  filter: blur(.2px);
  opacity:.8;
  animation: spin 8s linear infinite;
}
.orb:after{ content:""; position:absolute; inset:10px; border-radius:999px; border:1px dashed rgba(255,255,255,.18); opacity:.7; }
@keyframes spin{to{transform: rotate(360deg)}}
.avatar{
  width:76px; height:76px; border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  flex:0 0 auto;
  transition: transform .18s ease;
}
.profile:hover .avatar{transform: scale(1.03)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.profile b{display:block; font-size:14px}
.profile span{display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.4}
.stat{
  padding:14px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.stat strong{display:block; font-size:14px}
.stat p{margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.55}

section{padding:22px 0}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin:12px 0 12px;
}
.type-title{
  margin:0; font-size:16px; letter-spacing:.2px;
  min-height: 22px; display:flex; align-items:flex-end; gap:8px;
}
.caret{
  width:10px; height:18px; border-right:2px solid rgba(255,255,255,.7);
  transform: translateY(2px);
  animation: blink 1s steps(1) infinite;
  opacity:.9;
}
@keyframes blink{50%{opacity:0}}
.section-head p{margin:0; color:var(--muted2); font-size:13px}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:980px){ .grid3{grid-template-columns:1fr} }
.tile{
  padding:16px; border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  position:relative; overflow:hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}
.tile:before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(420px 220px at 100% 60%, rgba(139,92,246,.10), transparent 60%);
  opacity:.9;
}
.tile > *{ position:relative; z-index:1; }
.tile:hover{transform: translateY(-3px) scale(1.01); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); filter:brightness(1.06)}
.tile h3{margin:0 0 8px; font-size:14px}
.tile p{margin:0; color:var(--muted); font-size:13px; line-height:1.6}

/* Packs */
.packsTrack{
  display:flex; gap:12px; overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding: 4px 2px 14px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.packsTrack::-webkit-scrollbar{display:none}
.packCard{
  flex: 0 0 92%;
  scroll-snap-align:start;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height: 520px;
  padding-top: 18px;
}
@media(min-width: 760px){ .packCard{ flex-basis: 58%; } }
@media(min-width: 980px){
  .packCard{ flex-basis: calc(33.333% - 8px); min-height: 560px; }
  .packsTrack{ overflow: hidden; scroll-snap-type:none; mask-image:none; padding-bottom: 2px; }
}
.packBadge{
  position:absolute;
  top:10px;
  left:12px;
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(34,211,238,.35);
  background: rgba(34,211,238,.12);
  backdrop-filter: blur(10px);
  font-weight:950;
  color: rgba(255,255,255,.92);
  z-index:6;
}
.packTop{
  padding:18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.packTop:before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(520px 240px at 100% 70%, rgba(139,92,246,.10), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.packTop > *{ position:relative; z-index:1; }
.packTitle{ font-weight:950; font-size:14px; }
.packDesc{ margin-top:6px; color:var(--muted); font-size:12.8px; line-height:1.55; max-width: 52ch; }
.packPrice{
  margin-top:12px;
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border-radius:999px;
  color:#07070c;
  font-weight:950;
  background: linear-gradient(135deg, rgba(34,211,238,.90), rgba(139,92,246,.92));
  border:1px solid rgba(255,255,255,.16);
  width: fit-content;
}
.packPrice small{ opacity:.84; font-size:11px; font-weight:900; }
.packInner{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:0; }
.packListWrap{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding:10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow:hidden;
}
.packList{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  max-height: 320px;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
  padding-right: 6px;
}
.packList::-webkit-scrollbar{ width:10px; }
.packList::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius:999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.packList li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.packList li:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05);}
.packList li i{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--a2), var(--a1));
  margin-top:4px; flex:0 0 auto; display:inline-block;
}
.packCtaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;}
.packCtaRow .btn{ width:100%; }

/* Portfolio */
.seg{
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:950;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.seg:hover{transform: translateY(-2px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); filter:brightness(1.07)}
.seg.active{ color:#07070c; background: linear-gradient(135deg, rgba(139,92,246,.88), rgba(34,211,238,.72)); border-color: rgba(255,255,255,.16); }

.gallery-actions{display:flex; gap:10px; flex-wrap:wrap}
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
@media(max-width:980px){ .gallery{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .gallery{grid-template-columns:1fr} }

.shot{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
  position:relative;
}
.shot:hover{transform: translateY(-3px) scale(1.01); border-color: rgba(255,255,255,.18); filter:brightness(1.06)}
.shot img{
  width:100%;
  height: 320px;
  object-fit: contain;
  background: rgba(6,6,12,.42);
  padding:12px;
  display:block;
  filter:saturate(1.03) contrast(1.02);
}
.cap{
  position:absolute; left:10px; right:10px; bottom:10px;
  border-radius:14px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,6,12,.72);
  backdrop-filter: blur(12px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cap b{font-size:12px}
.cap span{font-size:11px; color:var(--muted)}
.miniTag{
  font-size:11px; font-weight:950; padding:6px 9px; border-radius:999px;
  border:1px solid rgba(139,92,246,.35);
  background: rgba(139,92,246,.16);
  white-space:nowrap;
}

/* Sites web (carrousel) */
.sitesWrap{ position:relative; margin-top:12px; border-radius: var(--r); }
.sitesTrack{
  display:flex; gap:12px; overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding: 4px 2px 14px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sitesTrack::-webkit-scrollbar{display:none}
.siteCard{
  flex: 0 0 92%;
  scroll-snap-align:start;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height: 520px;
}
@media(min-width: 760px){ .siteCard{ flex-basis: 58%; } }
@media(min-width: 980px){
  .siteCard{ flex-basis: calc(50% - 6px); min-height: 560px; }
  .sitesTrack{ overflow: hidden; scroll-snap-type:none; mask-image:none; padding-bottom: 2px; }
}
.siteTop{
  padding:16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.siteTop:before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(520px 240px at 100% 70%, rgba(139,92,246,.10), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.siteTop > *{ position:relative; z-index:1; }
.siteTitle{ font-weight:950; font-size:14px; }
.siteDesc{ margin-top:6px; color:var(--muted); font-size:12.8px; line-height:1.55; max-width: 60ch; }
.sitePreview{ position:relative; flex: 1 1 auto; background: rgba(6,6,12,.35); border-top: 1px solid rgba(255,255,255,.06); }
.siteFrame{ width:100%; height:100%; border:0; display:block; background: rgba(0,0,0,.2); }
.siteBottom{ padding:14px 16px 16px; display:flex; gap:10px; flex-wrap:wrap; }
.siteBottom .btn{ width:100%; }
@media(min-width: 520px){ .siteBottom .btn{ width:auto; } }

@media(max-width: 720px){
  .sitePreview{ display:block; height:260px; overflow:hidden; }
  .siteFrame{
    width: 140%;
    height: 360px;
    transform: scale(.72);
    transform-origin: 0 0;
  }
}

.pageHead{
  padding:18px;
  margin-top:14px;
}
.pageHead h1{ margin:0 0 8px; font-size: clamp(26px, 3.2vw, 38px); letter-spacing:-.6px; }
.pageHead p{ margin:0; color:var(--muted); line-height:1.7; font-size:14px; }

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:980px){ .contact-grid{grid-template-columns:1fr} }

.field{display:grid; gap:8px; margin-top:12px}
label{font-size:12px; color:var(--muted); font-weight:850}
input, textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,6,12,.35);
  color:var(--text);
  padding:12px 12px;
  font-family: var(--font);
  outline:none;
  transition: border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}
textarea{min-height:140px; resize:vertical}
input:focus, textarea:focus{
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 0 4px rgba(34,211,238,.10);
  filter:brightness(1.03);
}

footer{padding:28px 0 60px; color:var(--muted2); font-size:13px;}
.foot{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top:18px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.72);
  display:none; align-items:center; justify-content:center;
  padding:18px;
  z-index:1000;
}
.lightbox.open{display:flex}
.lb-card{
  width:min(1100px, 96vw);
  max-height: min(92vh, 920px);
  display:flex; flex-direction:column;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,6,12,.80);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 120px rgba(0,0,0,.6);
  overflow:hidden;
  animation: pop .18s ease-out;
}
@keyframes pop{from{transform: scale(.98); opacity:.7} to{transform: scale(1); opacity:1}}
.lb-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.lb-top b{font-size:13px}
.lb-top .lb-actions{display:flex; gap:8px; align-items:center;}
.lb-top button{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:12px;
  padding:8px 10px;
  font-weight:950;
  transition: transform .14s ease, filter .14s ease;
}
.lb-top button:hover{transform: translateY(-1px); filter:brightness(1.08)}
.lb-img{
  flex: 1 1 auto;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.03);
  padding: 10px;
  overflow:auto;
  cursor: zoom-in;
}
.lb-img img{
  max-width: 100%;
  max-height: 100%;
  width:auto; height:auto;
  object-fit: contain;
  display:block;
  border-radius: 12px;
  background: rgba(0,0,0,.15);
  transform-origin: center center;
  transition: transform .12s ease;
}
.lb-img.zoom{ cursor: zoom-out; }
.lb-img.zoom img{ max-width: none; max-height: none; }

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease;}
.reveal.on{opacity:1; transform: translateY(0);}

/* Avis (carrousel) — version stylée + FIX MOBILE */
.reviews{
  position:relative;
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(800px 220px at 10% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 260px at 100% 70%, rgba(139,92,246,.12), transparent 60%),
    rgba(255,255,255,.03);
  overflow:hidden;
  padding:14px;
  box-shadow: 0 22px 90px rgba(0,0,0,.48);
  min-height: 210px;
}
.reviews:before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 220px at 15% 10%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(520px 220px at 92% 80%, rgba(244,114,182,.08), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.reviewsHead{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 2px 10px;
}
.reviewsHead .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,6,12,.35);
  backdrop-filter: blur(10px);
  font-weight:950;
  font-size:12px;
}
.reviewsHead .spark{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--a2), var(--a1), var(--a3));
  box-shadow: 0 10px 24px rgba(34,211,238,.14);
}

/* ✅ IMPORTANT : overflow-x:auto (sinon 0 swipe sur mobile) */
.reviews-track{
  position:relative;
  z-index:2;
  display:flex;
  gap:12px;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  scroll-snap-type:x mandatory;
  padding: 2px;

  scrollbar-width:none;
  touch-action: pan-y;
}
.reviews-track::-webkit-scrollbar{ display:none; }

.review{
  flex: 0 0 100%;
  scroll-snap-align:start;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:14px;
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
@media(min-width:980px){
  .review{ flex-basis: calc(50% - 6px); }
}
.review:before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(420px 220px at 100% 70%, rgba(139,92,246,.10), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
.review > *{ position:relative; z-index:1; }

.revTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.revName{
  font-weight:950;
  font-size:13px;
  letter-spacing:.2px;
}
.revMeta{
  font-size:11px;
  color: rgba(255,255,255,.58);
  margin-top:4px;
}

.revStars{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.stars{
  font-size:12px;
  letter-spacing:1px;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(139,92,246,.95), rgba(244,114,182,.9));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  filter: drop-shadow(0 10px 18px rgba(34,211,238,.08));
}
.starsPulse{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(139,92,246,.95));
  box-shadow: 0 0 0 0 rgba(34,211,238,.22);
  animation: pulse 1.6s ease-in-out infinite;
  opacity:.9;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,211,238,.20); transform: scale(1); }
  60%{ box-shadow: 0 0 0 10px rgba(34,211,238,0); transform: scale(1.08); }
  100%{ box-shadow: 0 0 0 0 rgba(34,211,238,0); transform: scale(1); }
}

.revText{
  margin:12px 0 0;
  color: rgba(255,255,255,.74);
  font-size:13.2px;
  line-height:1.72;
}
.revQuote{
  position:absolute;
  right:12px;
  bottom:10px;
  font-size:38px;
  line-height:1;
  opacity:.10;
  transform: rotate(8deg);
  user-select:none;
}

.revArrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(6,6,12,.55);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
  z-index:3;
}
.revArrow:hover{
  transform: translateY(-50%) scale(1.06);
  filter:brightness(1.1);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}
.revArrow:active{ transform: translateY(-50%) scale(1.02); }
.revArrow.left{ left:10px; }
.revArrow.right{ right:10px; }

.revDots{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:10px;
}
.revDot{
  width:8px;height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  opacity:.65;
  transition: transform .14s ease, opacity .14s ease, width .14s ease, background .14s ease;
}
.revDot.on{
  opacity:1;
  width:22px;
  background: linear-gradient(135deg, rgba(34,211,238,.85), rgba(139,92,246,.85));
  border-color: rgba(255,255,255,.20);
}

.revProgress{
  position:relative;
  z-index:2;
  height:6px;
  border-radius:999px;
  margin:10px 2px 2px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.revProgress > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(34,211,238,.92), rgba(139,92,246,.92), rgba(244,114,182,.70));
  filter: drop-shadow(0 10px 20px rgba(34,211,238,.08));
}

/* Burger + drawer (ton système actuel) */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.burger:hover{ transform: translateY(-1px); filter:brightness(1.08); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.burger span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background: rgba(255,255,255,.86);
}
@media(max-width: 760px){
  .links{ display:none; }
  .nav-right{ display:none !important; }
  .burger{ display:inline-flex; }
}

.mobileMenu{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:none;
  z-index:1200;
  padding:16px;
}
.mobileMenu.open{ display:flex; align-items:flex-start; justify-content:flex-end; }

.mobileCard{
  width:min(420px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,6,12,.86);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  overflow:hidden;
  animation: pop .16s ease-out;
}
.mobileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mobileClose{
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  cursor:pointer;
  font-weight:950;
  transition: transform .12s ease, filter .12s ease;
}
.mobileClose:hover{ transform: translateY(-1px); filter:brightness(1.08); }

.mobileLinks{
  display:grid;
  padding:12px 14px;
  gap:8px;
}
.mLink{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  font-weight:900;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.mLink:hover{ transform: translateY(-1px); filter:brightness(1.06); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); }

.mobileCtas{
  padding: 0 14px 14px;
  display:grid;
  gap:10px;
}
.mobileCtas .btn{ width:100%; justify-content:center; }

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  .blob, .orb{ animation:none !important; }
  .reveal{ transition:none !important; }
  .caret{ animation:none !important; opacity:1; }
  html{ scroll-behavior:auto; }
}