/* ============================================================
   HOME.CSS — Homepage-only styles. Not used by subpages.
   Loaded in addition to main.css on index.html only.
   ============================================================ */

/* ── INTRO ── */
#intro{position:fixed;inset:0;z-index:9999;background:#060010;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:opacity 0s}
#intro.exit{opacity:0;transition:opacity 2s ease;pointer-events:none}
.i-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(139,68,255,.2) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(217,70,239,.12) 0%,transparent 40%)}
@keyframes cw {from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ccw{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
.rings{position:absolute;top:50%;left:50%;pointer-events:none}
.ring{position:absolute;border-radius:50%;top:50%;left:50%}
.ring::before{content:'';position:absolute;border-radius:50%;width:8px;height:8px;background:var(--c,rgba(139,68,255,.7));box-shadow:0 0 14px 4px var(--c,rgba(139,68,255,.4));top:0;left:50%;transform:translate(-50%,-50%)}
.r1{width:100px;height:100px;margin:-50px 0 0 -50px;border:1px solid rgba(217,70,239,.5);animation:cw 3s linear infinite;--c:rgba(217,70,239,.8)}
.r2{width:170px;height:170px;margin:-85px 0 0 -85px;border:1px solid rgba(139,68,255,.4);animation:ccw 5s linear infinite;--c:rgba(139,68,255,.7)}
.r3{width:260px;height:260px;margin:-130px 0 0 -130px;border:1px solid rgba(240,171,252,.3);animation:cw 8s linear infinite;--c:rgba(240,171,252,.5)}
.r4{width:370px;height:370px;margin:-185px 0 0 -185px;border:1px solid rgba(139,68,255,.18);animation:ccw 13s linear infinite;--c:rgba(139,68,255,.4)}
.r5{width:500px;height:500px;margin:-250px 0 0 -250px;border:1px solid rgba(217,70,239,.1);animation:cw 20s linear infinite;--c:rgba(217,70,239,.3)}
#sw{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;opacity:0;pointer-events:none;border:2px solid var(--neon);box-shadow:0 0 20px var(--neon)}
@keyframes swBlast{0%{transform:scale(1);opacity:1;border-width:3px}100%{transform:scale(55);opacity:0;border-width:.3px}}
#sw.fire{animation:swBlast 1.8s ease-out forwards}
#stage{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.pw{position:absolute;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;white-space:nowrap;pointer-events:none;will-change:transform,opacity}
#ftitle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;z-index:10;width:min(90vw,700px);transition:opacity .7s ease}
#ftitle::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62%;height:78%;background:radial-gradient(ellipse at center,#060010 0%,#060010 35%,rgba(6,0,16,.8) 55%,transparent 80%);z-index:-1}
#ftitle.show{opacity:1}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.ft-bbf{display:block;font-family:'Bebas Neue',sans-serif;font-size:clamp(6rem,18vw,13rem);letter-spacing:.12em;line-height:.85;background:linear-gradient(135deg,#fff 0%,#e9d5ff 25%,#d946ef 50%,#a855f7 70%,#fff 100%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite;filter:drop-shadow(0 0 30px rgba(217,70,239,.5))}
.ft-sub{display:block;font-family:'Bebas Neue',sans-serif;font-size:clamp(1.2rem,3.4vw,2.3rem);letter-spacing:.14em;color:rgba(255,255,255,.88);margin-top:.4rem;text-shadow:0 0 26px rgba(255,255,255,.25)}
.ft-marketplace{display:block;font-family:'Bebas Neue',sans-serif;font-size:clamp(2.1rem,5.7vw,3.9rem);letter-spacing:.14em;background:linear-gradient(135deg,#f0abfc,#d946ef);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:.3rem;filter:drop-shadow(0 0 32px rgba(217,70,239,.7))}
.ft-tag{display:block;font-family:'Josefin Sans',sans-serif;font-size:clamp(.55rem,1.4vw,.78rem);font-weight:200;letter-spacing:.45em;text-transform:uppercase;color:rgba(200,150,255,.45);margin-top:1rem}
#skip-btn{position:absolute;bottom:2.2rem;right:2.2rem;font-family:'Josefin Sans',sans-serif;font-size:.58rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.25);border:none;background:none;cursor:pointer;z-index:20;transition:color .2s}

/* Current Projects — visible instantly, no fade delay, so it's the first
   clickable thing on the page regardless of intro animation progress */
@keyframes introCtaPulse{0%,100%{box-shadow:0 6px 24px rgba(217,70,239,.5)}50%{box-shadow:0 6px 36px rgba(217,70,239,.8),0 0 0 8px rgba(217,70,239,.12)}}
.intro-projects-cta{
  position:absolute;top:2.2rem;left:50%;transform:translateX(-50%);
  z-index:25;display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,#9333ea,#d946ef);color:#fff;text-decoration:none;
  padding:.75rem 1.4rem;border-radius:50px;
  font-family:'Josefin Sans',sans-serif;
  animation:introCtaPulse 2.4s ease infinite;
  transition:transform .2s ease;
}
.intro-projects-cta:hover{transform:translateX(-50%) translateY(-2px)}
.ipc-text{display:flex;flex-direction:column;gap:.05rem}
.ipc-label{font-size:.5rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ipc-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.06em;line-height:1}
.ipc-arrow{font-size:.85rem}
@media(max-width:640px){
  .intro-projects-cta{top:1.2rem;padding:.6rem 1.1rem}
  .ipc-title{font-size:.82rem}
}
#skip-btn:hover{color:rgba(255,255,255,.7)}

/* ── HERO (homepage-specific container/positioning) ── */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.slides{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2.5s ease;filter:brightness(1.00) saturate(1.15)}
.slide.on{opacity:1;animation:kZoom 14s ease-out forwards}
@keyframes kZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(6,0,16,.45) 0%,rgba(6,0,16,.15) 55%,rgba(6,0,16,.02) 100%),linear-gradient(to top,rgba(6,0,16,.82) 0%,transparent 48%),linear-gradient(to bottom,rgba(6,0,16,.15) 0%,transparent 18%)}
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;background-image:linear-gradient(rgba(139,68,255,1) 1px,transparent 1px),linear-gradient(90deg,rgba(139,68,255,1) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 50% 50%,black 0%,transparent 75%)}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 10% 55%,rgba(139,68,255,.35) 0%,transparent 45%),radial-gradient(ellipse at 90% 25%,rgba(217,70,239,.2) 0%,transparent 38%)}
.hero-body{position:relative;z-index:2;padding:8rem 4.5rem 7rem;max-width:900px}
.hero-stats{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:1.6rem 4.5rem;border-top:1px solid rgba(139,68,255,.2);background:rgba(6,0,16,.6);backdrop-filter:blur(16px);display:flex;align-items:center;flex-wrap:wrap;opacity:0;animation:up .8s .8s forwards}

/* ── PHOTO STRIP ── */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);height:300px}
.ps-cell{position:relative;overflow:hidden}
.ps-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease;filter:brightness(0.80) saturate(1.2)}
.ps-cell:hover .ps-bg{transform:scale(1.06);filter:brightness(1.00) saturate(1.4)}
.ps-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,0,16,.9) 0%,transparent 60%)}
.ps-label{position:absolute;bottom:1.2rem;left:1.2rem}
.ps-cat{font-family:'Josefin Sans',sans-serif;font-size:.55rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);display:block;margin-bottom:.2rem}
.ps-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.06em;color:#fff;display:block}

/* ── SERVICES GRID (homepage overview cards) ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.sc{border-radius:16px;overflow:hidden;position:relative;min-height:320px;transition:transform .3s,box-shadow .3s;border:1px solid rgba(139,68,255,.2);text-decoration:none;display:block}
.sc:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(139,68,255,.3),0 0 0 1px rgba(217,70,239,.4)}
.sc-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.58) saturate(1.3);transition:transform .5s,filter .4s}
.sc:hover .sc-bg{transform:scale(1.06);filter:brightness(0.80) saturate(1.5)}
.sc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,0,16,.95) 0%,rgba(6,0,16,.5) 55%,transparent 100%)}
.sc:hover .sc-ov{background:linear-gradient(to top,rgba(60,0,120,.97) 0%,rgba(60,0,120,.7) 55%,rgba(60,0,120,.25) 100%)}
.sc-body{position:absolute;bottom:0;left:0;right:0;padding:1.8rem}
.sc-num{font-family:'Bebas Neue',sans-serif;font-size:4rem;letter-spacing:.04em;color:rgba(139,68,255,.2);line-height:1;display:block;margin-bottom:.4rem;transition:color .3s}
.sc:hover .sc-num{color:rgba(217,70,239,.4)}
.sc-neon{display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:.55rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);border:1px solid rgba(217,70,239,.4);border-radius:4px;padding:.2rem .6rem;margin-bottom:.6rem}
.sc-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.06em;color:#fff;display:block;margin-bottom:.5rem}
.sc-desc{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.5);line-height:1.65;display:block;max-height:0;overflow:hidden;transition:max-height .4s}
.sc:hover .sc-desc{max-height:90px}
.sc-more{display:block;margin-top:.5rem;font-family:'Josefin Sans',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--neon2)}

/* ── BROKER SECTION LAYOUT ── */
.broker{background:linear-gradient(135deg,#040008,#080014,#0a0018);padding:7rem 4.5rem;position:relative;overflow:hidden;border-top:1px solid rgba(139,68,255,.2);border-bottom:1px solid rgba(139,68,255,.2)}
.broker::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:linear-gradient(rgba(139,68,255,1) 1px,transparent 1px),linear-gradient(90deg,rgba(139,68,255,1) 1px,transparent 1px);background-size:60px 60px}
.b-glow-a{position:absolute;top:-20%;left:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(139,68,255,.2),transparent 70%);pointer-events:none}
.b-glow-b{position:absolute;bottom:-20%;right:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(217,70,239,.15),transparent 70%);pointer-events:none}
.broker-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1}
.bcards{display:flex;flex-direction:column;gap:1rem}

/* ── HOTELS / CREDENTIALS ── */
.cred{padding:6rem 4.5rem;background:var(--bg2)}
.cred-in{max-width:1200px;margin:0 auto;text-align:center}
.cred-in .chips{justify-content:center;margin-top:2.5rem}

/* ── TRIPTYCH ── */
.triptych{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:280px 280px;gap:6px;padding:0 6px 6px}
.tc{position:relative;overflow:hidden;border-radius:8px;cursor:pointer}
.tc:first-child{grid-row:1/3}
.tc-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.72) saturate(1.3);transition:transform .5s,filter .4s}
.tc:hover .tc-bg{transform:scale(1.05);filter:brightness(0.94) saturate(1.5)}
.tc-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,68,255,.15) 0%,rgba(6,0,16,.6) 100%)}
.tc:hover .tc-ov{background:linear-gradient(135deg,rgba(139,68,255,.3) 0%,rgba(6,0,16,.5) 100%)}
.tc-lbl{position:absolute;bottom:1rem;left:1.2rem;font-family:'Josefin Sans',sans-serif;font-size:.55rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ── CONTACT FORM (homepage only — the actual lead-capture form) ── */
.cta-form{display:flex;flex-direction:column;gap:1rem;max-width:480px;margin:0 auto}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cta-form input,.cta-form select,.cta-form textarea{width:100%;padding:.9rem 1.2rem;background:rgba(255,255,255,.05);border:1px solid rgba(139,68,255,.25);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:300;color:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(255,255,255,.25)}
.cta-form input:focus,.cta-form select:focus,.cta-form textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,68,255,.15)}
.cta-form select option{background:#0d0020;color:#fff}
.cta-form textarea{resize:vertical;min-height:100px}
.sub-btn{background:linear-gradient(135deg,var(--purple),var(--neon));color:#fff;border:none;border-radius:10px;padding:1rem 2rem;font-family:'Josefin Sans',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 24px rgba(139,68,255,.4);transition:all .25s}
.sub-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,68,255,.6)}
#fsuccess{display:none;text-align:center;padding:2rem;background:rgba(139,68,255,.12);border:1px solid rgba(139,68,255,.3);border-radius:12px;color:var(--neon2)}

/* ── REPLAY BTN ── */
#replay-btn{position:fixed;bottom:2rem;right:2rem;z-index:500;display:flex;align-items:center;gap:.6rem;font-family:'Josefin Sans',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);background:rgba(139,68,255,.15);border:1px solid rgba(139,68,255,.35);border-radius:50px;padding:.6rem 1.2rem;cursor:pointer;transition:all .25s;backdrop-filter:blur(8px)}
#replay-btn:hover{background:rgba(139,68,255,.35);border-color:var(--purple);color:#fff;box-shadow:0 0 20px rgba(139,68,255,.4)}
#replay-btn svg{width:12px;height:12px;flex-shrink:0}

/* ── HOMEPAGE RESPONSIVE ── */
@media(max-width:900px){
  .hero-body{padding:7rem 2rem 7rem}
  .hero-stats{padding:1.5rem 2rem;flex-wrap:wrap}
  .broker,.cred{padding:5rem 2rem}
  .broker-in{grid-template-columns:1fr;gap:3rem}
  .svc-grid{grid-template-columns:1fr}
  .photo-strip{grid-template-columns:1fr 1fr;height:240px}
  .triptych{grid-template-columns:1fr 1fr;grid-template-rows:200px 200px 200px}
  .tc:first-child{grid-row:1/2}
}
@media(max-width:580px){
  .frow{grid-template-columns:1fr}
  .photo-strip{grid-template-columns:1fr 1fr}
  .triptych{grid-template-columns:1fr;grid-template-rows:repeat(5,200px)}
  .tc:first-child{grid-row:1/2}
}