/* ═══ HOME PAGE ═══ */
/* HERO */
.hero { min-height:100vh; padding:100px 28px 80px; position:relative; overflow:hidden; display:flex; align-items:center }
#hc { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.22 }
.halos { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.hl1 { position:absolute; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(34,197,94,.14),transparent 65%); top:-200px; right:-150px; filter:blur(80px); animation:halo 7s ease-in-out infinite }
.hl2 { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.09),transparent 65%); bottom:-100px; left:10%; filter:blur(80px); animation:halo 9s ease-in-out infinite .5s }
@keyframes halo { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:.7} }
.hero-in { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; max-width:1080px; margin:0 auto; width:100% }
/* Eyebrow */
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.22); color:var(--g); font-size:13px; font-weight:500; padding:6px 14px; border-radius:99px; margin-bottom:22px }
.edot { width:7px; height:7px; background:var(--g); border-radius:50%; animation:edot 2s infinite }
@keyframes edot { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5);opacity:.6} }
/* Title morph */
.hero-title { min-height:80px; margin-bottom:20px; overflow:hidden }
.hero-title.ready { animation:none }
.hero-desc { font-size:17px; color:rgba(255,255,255,.57); margin-bottom:32px; line-height:1.65; max-width:480px }
.hctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px }
/* Stats */
.hstats { display:flex; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:18px 24px; width:fit-content }
.hst { text-align:center; padding:0 18px }
.hst:first-child { padding-left:0 }
.hst:last-child { padding-right:0 }
.hn,.hsuf { font-family:'Manrope',sans-serif; font-size:26px; font-weight:800; color:var(--g); letter-spacing:-.02em }
.hlbl { font-size:12px; color:rgba(255,255,255,.4); margin-top:3px }
.hdiv { width:1px; height:36px; background:rgba(255,255,255,.1) }
/* Dashboard visual */
.dash-frame { background:rgba(15,23,42,.92); border:1px solid rgba(255,255,255,.1); border-radius:var(--rl); overflow:hidden; box-shadow:var(--sh-lg); animation:dfloat 7s ease-in-out infinite; position:relative }
@keyframes dfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.dash-bar { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(15,23,42,.7) }
.ddots { display:flex; gap:5px }
.ddots span { width:10px; height:10px; border-radius:50%; display:block }
.durl { flex:1; background:rgba(255,255,255,.05); border-radius:5px; padding:4px 12px; font-size:11px; color:rgba(255,255,255,.3); font-family:monospace }
.dlive { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--g) }
.lp { width:6px; height:6px; background:var(--g); border-radius:50%; animation:lp 1.2s infinite }
@keyframes lp { 0%,100%{opacity:1} 50%{opacity:.2} }
.dash-bd { display:grid; grid-template-columns:140px 1fr }
.dsb { border-right:1px solid rgba(255,255,255,.07); padding:14px 12px; background:rgba(15,23,42,.5) }
.dbrand { display:flex; align-items:center; gap:7px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:#fff; margin-bottom:18px }
.sbn { display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:6px; font-size:12px; color:rgba(255,255,255,.4); margin-bottom:2px; cursor:pointer; transition:background .15s }
.sbn:hover { background:rgba(255,255,255,.06) }
.sbn.act { background:rgba(34,197,94,.12); color:var(--g); font-weight:500 }
.dmain { padding:12px; background:rgba(15,23,42,.3) }
.dkpis { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px }
.dkpi { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:7px; padding:9px 10px }
.dkpi.gn .kv { color:var(--g) }
.kv { font-family:'Manrope',sans-serif; font-size:16px; font-weight:700; color:#fff }
.kl { font-size:10px; color:rgba(255,255,255,.4); margin-top:1px }
.dmap { background:rgba(15,23,42,.6); border-radius:7px; height:100px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.06); margin-bottom:7px }
.mgrid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(34,197,94,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.05) 1px,transparent 1px); background-size:18px 18px }
.tp { position:absolute; width:10px; height:10px }
.tp span { display:block; width:10px; height:10px; background:var(--g); border-radius:50%; border:2px solid rgba(255,255,255,.9); position:relative; z-index:1 }
.tp::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--g); opacity:.4; animation:rip 2.5s ease-out infinite }
@keyframes rip { 0%{transform:scale(.5);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
.p1{top:28%;left:18%} .p2{top:52%;left:44%} .p2::after{animation-delay:.6s}
.p3{top:22%;left:68%} .p3::after{animation-delay:1.1s} .p4{top:64%;left:72%} .p4::after{animation-delay:.3s}
.mc { position:absolute; font-size:9px; color:rgba(255,255,255,.3); font-weight:500; pointer-events:none; font-family:monospace }
.dticker { display:flex; align-items:center; gap:7px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.15); border-radius:6px; padding:6px 10px }
.tdot { width:6px; height:6px; background:var(--g); border-radius:50%; animation:lp 1.2s infinite; flex-shrink:0 }
.dticker code { font-size:10px; color:rgba(34,197,94,.85); font-family:monospace; transition:opacity .3s }
.vbadge { position:absolute; bottom:-14px; left:24px; display:flex; align-items:center; gap:6px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25); color:var(--g); font-size:11px; font-weight:600; padding:5px 12px; border-radius:99px }
/* STRIP */
.strip { background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); padding:14px 0; overflow:hidden }
.strip-in { display:flex; align-items:center; white-space:nowrap; animation:scroll 30s linear infinite }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.si { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.4); padding:4px 24px }
.sd { width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.sd.g{background:var(--g)} .sd.o{background:var(--go)}
.ss { display:inline-block; width:1px; height:14px; background:rgba(255,255,255,.1); vertical-align:middle; margin:0 4px }
/* SERVICES DIRECTORY */
.svc-sec { background:var(--n2) }
.sgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.scard { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:border-color .25s, transform .2s; position:relative }
.scard:hover { border-color:rgba(34,197,94,.3); transform:translateY(-2px) }
.scard.open { border-color:rgba(34,197,94,.5); grid-column:span 3; transform:none }
.scard-top { padding:28px; position:relative }
.sci { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px }
.sci.gn{background:rgba(34,197,94,.12);color:var(--g)} .sci.go{background:rgba(212,175,55,.12);color:var(--go)}
.scard h3 { color:#fff; margin-bottom:8px; font-size:18px }
.scard p { font-size:14px; color:rgba(255,255,255,.47); line-height:1.6; margin-bottom:14px }
.stechs { display:flex; flex-wrap:wrap; gap:6px }
.stechs span { font-size:11px; font-weight:500; padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45) }
.expand-ic { position:absolute; top:22px; right:22px; font-size:20px; color:rgba(255,255,255,.2); transition:transform .3s, color .2s }
.scard.open .expand-ic { transform:rotate(45deg); color:var(--g) }
.scard-detail { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1) }
.scard.open .scard-detail { max-height:300px }
.scard-detail-in { padding:0 28px 28px }
.scard-detail ul { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px }
.scard-detail li { font-size:14px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:8px }
.scard-detail li::before { content:'✓'; color:var(--g); flex-shrink:0 }
.scard-detail a { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--g); transition:gap .2s }
.scard-detail a:hover { gap:10px }
/* BENTO WAKTI */
.bento-sec { background:var(--n) }
.bento { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.bcard { position:relative; overflow:hidden; background:var(--gl); border:1px solid var(--gl2); border-radius:var(--rl); padding:32px; display:block; transition:border-color .25s, transform .2s }
.bcard:hover { transform:translateY(-3px) }
.bcard.big { grid-row:1/5; border-color:rgba(34,197,94,.2) }
.bcard.big:hover { border-color:rgba(34,197,94,.5) }
.bcard-bg { position:absolute; inset:0; z-index:0; opacity:.06 }
.tbg { background:radial-gradient(circle at 80% 20%,var(--g),transparent 60%) }
.ebg { background:radial-gradient(circle at 80% 20%,var(--go),transparent 60%) }
.bbg { background:radial-gradient(circle at 80% 20%,#fff,transparent 60%) }
.bcard>*:not(.bcard-bg) { position:relative; z-index:1 }
.bbadge { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px; border-radius:99px; margin-bottom:12px; letter-spacing:.05em; text-transform:uppercase }
.bbadge.gn{background:rgba(34,197,94,.12);color:var(--g)} .bbadge.go{background:rgba(212,175,55,.12);color:var(--go)} .bbadge.mu{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35)}
.bcard h3 { color:#fff; margin-bottom:8px; font-size:20px }
.bcard p { font-size:14px; color:rgba(255,255,255,.47); line-height:1.6; margin-bottom:20px }
.blearn { font-size:14px; font-weight:600; color:rgba(255,255,255,.3); transition:color .2s }
.bcard:hover .blearn { color:var(--g) }
/* WHY */
.why-sec { background:var(--n2) }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.why-card { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--r); padding:28px; transition:transform .2s, border-color .25s }
.why-card:hover { transform:translateY(-2px); border-color:rgba(34,197,94,.2) }
.why-num { font-family:'Manrope',sans-serif; font-size:48px; font-weight:800; color:rgba(34,197,94,.12); letter-spacing:-.03em; margin-bottom:8px; transition:color .3s }
.why-card:hover .why-num { color:rgba(34,197,94,.25) }
.why-card h3 { color:#fff; margin-bottom:8px }
.why-card p { font-size:14px; color:rgba(255,255,255,.48); line-height:1.6 }
/* PROCESS */
.proc-sec { background:var(--n) }
.ptl { display:flex; flex-direction:column; max-width:680px; margin:0 auto }
.pstep { display:flex; gap:24px; align-items:flex-start; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.pstep:last-child { border-bottom:none }
.pnum { font-family:'Manrope',sans-serif; font-size:32px; font-weight:800; color:rgba(34,197,94,.15); letter-spacing:-.03em; min-width:52px; flex-shrink:0; line-height:1; transition:color .3s }
.pstep:hover .pnum { color:var(--g) }
.pstep h3 { color:#fff; margin-bottom:6px }
.pstep p { font-size:14px; color:rgba(255,255,255,.47); line-height:1.65 }
/* GAME */
.game-sec { background:var(--n2) }
.game-wrap { max-width:680px; margin:0 auto }
.game-hud { display:flex; justify-content:space-between; margin-bottom:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rs); padding:12px 20px }
.ghud-item { font-size:14px; font-weight:600; color:rgba(255,255,255,.7); font-family:'Manrope',sans-serif }
.gprog { height:3px; background:rgba(255,255,255,.08); border-radius:2px; margin-bottom:14px; overflow:hidden }
.gprog-fill { height:100%; background:linear-gradient(90deg,var(--g),var(--go)); border-radius:2px; width:100%; transition:width .5s linear }
.garena { background:rgba(10,18,30,.85); border:1px solid rgba(34,197,94,.15); border-radius:var(--r); height:360px; position:relative; overflow:hidden; cursor:crosshair }
.gstart,.gover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(10,18,30,.92); z-index:10 }
.gstart-ic { font-size:64px; animation:gbounce 1s ease-in-out infinite }
@keyframes gbounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.gover h3 { font-family:'Manrope',sans-serif; font-size:24px; color:#fff }
.gover p { font-size:16px; color:rgba(255,255,255,.6) }
.bug,.bug-star,.bug-skull { position:absolute; font-size:28px; cursor:pointer; user-select:none; z-index:5; transition:transform .1s; animation:bwiggle .5s ease-in-out infinite alternate }
@keyframes bwiggle { 0%{transform:rotate(-8deg) scale(1)} 100%{transform:rotate(8deg) scale(1.05)} }
.bug-star { animation:bspin 1s linear infinite }
@keyframes bspin { to{transform:rotate(360deg)} }
.bug-skull { animation:bfloat 2s ease-in-out infinite }
@keyframes bfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.bug:active,.bug-star:active,.bug-skull:active { transform:scale(.7) }
.hit-fx { position:fixed; font-size:20px; font-weight:700; pointer-events:none; z-index:9999; animation:hitup .8s ease-out forwards; font-family:'Manrope',sans-serif }
@keyframes hitup { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-50px)} }
.game-legend { text-align:center; margin-top:12px; font-size:13px; color:rgba(255,255,255,.35) }
/* CTA */
.cta-sec { background:var(--n) }
/* LOGOS CLIENTS */
.logos-sec { background:var(--n); padding:32px 0; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05) }
.logos-label { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.25); text-align:center; margin-bottom:20px }
.logos-grid { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap }
.logo-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:10px 20px; transition:border-color .2s }
.logo-chip:hover { border-color:rgba(255,255,255,.15) }
.logo-chip span { font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:rgba(255,255,255,.4) }
.logo-chip .lc-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0 }

/* TESTIMONIALS */
.test-sec { background:var(--n2) }
.tgrid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.tcard3 { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--r); padding:28px; display:flex; flex-direction:column; gap:16px }
.tcard3-stars { color:var(--go); font-size:14px; letter-spacing:2px }
.tcard3-quote { font-size:14px; color:rgba(255,255,255,.65); line-height:1.75; flex:1; font-style:italic }
.tcard3-quote::before { content:'"'; font-size:28px; color:var(--g); font-style:normal; line-height:1; display:block; margin-bottom:-6px }
.tcard3-author { display:flex; flex-direction:column; gap:3px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06) }
.tcard3-name { font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:#fff }
.tcard3-role { font-size:12px; color:rgba(255,255,255,.35) }

/* PRICING & FAQ → déplacés dans base.css */

/* PORTFOLIO */
.port-sec { background:var(--n2) }
.pgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.pjcard { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--r); overflow:hidden; transition:border-color .25s,transform .2s }
.pjcard:hover { border-color:rgba(34,197,94,.35); transform:translateY(-3px) }
.pjcard-header { height:160px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:14px 16px }
.pjcard-header.cf { background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.05)) }
.pjcard-header.mf { background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.05)) }
.pjcard-header.wb { background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(99,102,241,.05)) }
.pjcard-header.bgt { background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.03)) }
/* Screenshot scroll effect */
.pjh-scroll { padding:0; cursor:zoom-in }
.pjh-img { width:100%; height:160px; display:block; object-fit:cover; object-position:top center; transform:translateY(0); transition:transform 3s ease }
.pjcard-header.pjh-scroll:hover .pjh-img { transform:translateY(-38%) }
.pjh-overlay { position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(0,0,0,.75)); display:flex; align-items:flex-end; padding:10px 14px; gap:6px; opacity:0; transition:opacity .3s; pointer-events:none }
.pjh-overlay span { font-size:11px; color:rgba(255,255,255,.85); font-weight:600; font-family:monospace; flex:1 }
.pjh-overlay svg { flex-shrink:0; opacity:.7 }
.pjcard-header.pjh-scroll:hover .pjh-overlay { opacity:1 }
/* Logo image (si fichier fourni) */
.pj-logo-img { max-height:70px; max-width:160px; object-fit:contain; position:relative; z-index:2 }
/* Fallback brand display */
.pj-brand-fallback { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; z-index:2 }
.pj-brand-initial { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; color:#fff; letter-spacing:-.02em }
.pj-brand-name { font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:.01em }
.pj-logo-svg { filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)) }
.pjtype { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:3px 9px; border-radius:99px; white-space:nowrap }
.pjbadge { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:99px; white-space:nowrap }
.pjbadge.done { background:rgba(34,197,94,.12); color:var(--g); border:1px solid rgba(34,197,94,.2) }
.pjbadge.wip { background:rgba(99,102,241,.12); color:#a5b4fc; border:1px solid rgba(99,102,241,.25) }
.pjcard-body { padding:20px 22px 22px }
.pjcard-body h3 { color:#fff; margin-bottom:8px; font-size:18px }
.pjcard-body>p { font-size:13px; color:rgba(255,255,255,.5); line-height:1.6; margin-bottom:14px }
.pjtechs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.pjtechs span { font-size:11px; font-weight:500; padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45) }
.pjlink { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--g); transition:gap .2s }
.pjlink:hover { gap:9px }
.port-foot { text-align:center; margin-top:32px }
.port-foot p { font-size:13px; color:rgba(255,255,255,.3); font-style:italic }

/* BLOG TEASER */
.blog-tgrid{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:840px){.blog-tgrid{grid-template-columns:1fr}}

/* RESPONSIVE */
@media(max-width:900px) {
  .tgrid3{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .bento{grid-template-columns:1fr}
  .bcard.big{grid-row:auto}
  .sgrid{grid-template-columns:1fr 1fr}
  .scard.open{grid-column:span 2}
}
@media(max-width:768px) {
  .hero-title{min-height:auto}
  .hstats{flex-wrap:wrap;gap:12px}
  .dash-frame{max-width:100%}
  .why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px) {
  .price-grid{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr}
  .scard.open{grid-column:span 1}
  .hstats{flex-wrap:wrap}
  .hdiv{display:none}
  .hst{padding:0 12px}
  .pgrid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .hero-desc{font-size:15px}
}
@media(max-width:480px) {
  .hctas{flex-direction:column;align-items:flex-start}
  .hst{padding:0 8px}
  .hstats{padding:14px 16px}
  .dash-bd{grid-template-columns:1fr}
  .dsb{display:none}
  .sdi ul{grid-template-columns:1fr}
}
/* scard-detail inner */
.sdi { padding:0 28px 28px }
.sdi ul { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px }
.sdi li { font-size:14px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:8px }
.sdi li::before { content:'✓'; color:var(--g); flex-shrink:0 }
.sdi a { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--g); transition:gap .2s }
.sdi a:hover { gap:10px }