/* ==========================================================================
   VS GROUP THAILAND — Simple Split-Screen Profile (Black & Gold)
   ========================================================================== */

:root{
  --black: #060606;
  --black-soft: #0d0d0d;
  --charcoal: #141414;
  --gold: #d4af37;
  --gold-light: #f0dc94;
  --gold-dark: #8f6e32;
  --gold-highlight: #fff6d8;
  --cream: #f5f0e6;
  --grey: #a3a3a3;
  --font-serif: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --transition: 0.4s cubic-bezier(.25,.8,.25,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(60,50,25,.28) 0%, rgba(20,17,10,0) 60%),
    radial-gradient(ellipse 1200px 800px at 50% 100%, rgba(255,255,255,.025) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #121110 0%, #0a0908 22%, #060605 55%, #0a0908 100%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
}
/* subtle vertical wall seam + vignette for depth, like studio wall lighting */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(0,0,0,.55) 100%);
}
body > *{ position:relative; z-index:1; }

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.gold{color:var(--gold); font-style:normal;}
::selection{background:var(--gold); color:#000;}

/* Cursor glow */
.cursor-glow{
  position:fixed; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.07), transparent 70%);
  pointer-events:none; z-index:1; transform:translate(-50%,-50%);
  display:none;
}
@media(min-width:900px){ .cursor-glow{display:block;} }

/* ---------- Top bar : logo mounted on the wall like a plaque ---------- */
.top-bar{
  display:flex;
  justify-content:center;
  padding: 34px 0 26px;
  animation: fadeDown .8s ease both;
  position:relative;
}
/* soft gallery spotlight glowing down onto the plaque from above */
.top-bar::before{
  content:'';
  position:absolute;
  top:-60px; left:50%; transform:translateX(-50%);
  width:420px; height:220px;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.16) 0%, rgba(212,175,55,.05) 45%, transparent 75%);
  pointer-events:none;
  z-index:0;
}

.logo-plaque{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 30px 16px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(20,18,14,.55) 12%, rgba(5,4,3,.65) 60%, rgba(0,0,0,.55) 100%);
  border: 1px solid rgba(212,175,55,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -12px 22px rgba(0,0,0,.45) inset,
    0 24px 40px -12px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter: blur(1px);
  transition: var(--transition);
}

/* Bigger, cleaner plaque on larger screens */
@media(min-width: 901px){
  .top-bar{ padding: 48px 0 36px; }
  .top-bar::before{ width: 560px; height: 280px; }
  .logo-plaque{ padding: 30px 54px 26px; border-radius: 16px; }
  .brand-logo{ height: 118px; }
}

/* soft cast shadow of the plaque onto the wall below it */
.top-bar-shadow{
  position:absolute;
  left:50%; bottom:-10px; transform:translateX(-50%);
  width:60%; height:16px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55) 0%, transparent 75%);
  z-index:-1;
}

.brand-heading{
  margin: 0;
  font-size: 0;
  line-height: 0;
  font-weight: 400;
}
.brand-logo{
  height: 78px;
  width: auto;
  display:block;
  filter: drop-shadow(0 2px 10px rgba(212,175,55,.2));
}

/* ---------- Split screen ---------- */
.split-screen{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

/* ---------- LEFT PANEL (Founder) ---------- */
.left-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 40px 50px;
  position:relative;
  text-align:center;
}
/* faint seam instead of a hard divider, keeps one seamless wall feel */
.left-panel::after{
  content:'';
  position:absolute; top:8%; bottom:8%; right:0;
  width:1px;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,.18) 50%, transparent);
}

.photo-wrap{
  position:relative;
  width: 220px;
  padding: 14px;
  margin-bottom: 22px;
  animation: fadeUp .9s ease both .1s;
}
.photo-wrap::before{
  content:'';
  position:absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(212,175,55,.22) 0%, rgba(212,175,55,.06) 45%, transparent 72%);
  z-index:-1;
  border-radius:50%;
}
.photo-wrap img{
  filter: grayscale(6%) contrast(1.05) drop-shadow(0 22px 34px rgba(0,0,0,.65));
  animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{transform: translateY(0);}
  50%{transform: translateY(-10px);}
}
.corner{
  position:absolute; width:26px; height:26px; border:2px solid var(--gold);
}
.corner.tl{top:0; left:0; border-right:none; border-bottom:none;}
.corner.tr{top:0; right:0; border-left:none; border-bottom:none;}
.corner.bl{bottom:0; left:0; border-right:none; border-top:none;}
.corner.br{bottom:0; right:0; border-left:none; border-top:none;}

.name{
  font-family: var(--font-serif); font-weight:700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  animation: fadeUp .9s ease both .25s;
}
.role{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top: 10px;
  animation: fadeUp .9s ease both .35s;
}
.role-title{
  color: var(--cream); font-size: .95rem; font-weight:400; letter-spacing:.5px;
}
.role-brand{
  color: var(--gold); font-size: .72rem; font-weight:600;
  letter-spacing: 3px; text-transform:uppercase;
}
.divider{
  width:60px; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 20px auto;
  animation: growLine .8s ease both .45s;
}
@keyframes growLine{ from{width:0; opacity:0;} to{width:60px; opacity:1;} }

.details{
  animation: fadeUp .9s ease both .55s;
}
.details li{
  display:flex; align-items:center; gap:10px;
  font-size: .85rem; color: var(--cream); font-weight:300;
  padding: 7px 0;
}
.details li i{
  color: var(--gold); width:16px; text-align:center; font-size:.85rem;
}
.founder-bio{
  max-width: 340px;
  margin: 18px auto 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--grey);
  font-weight: 300;
  animation: fadeUp .9s ease both .65s;
}
.founder-bio strong{
  color: var(--cream);
  font-weight: 500;
}

/* ---------- RIGHT PANEL (Ventures) ---------- */
.right-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 40px 60px;
}

.eyebrow{
  color: var(--gold); letter-spacing:4px; font-size:.72rem; text-transform:uppercase;
  margin-bottom: 12px;
  animation: fadeUp .9s ease both .15s;
}
.heading{
  font-family: var(--font-serif); font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 40px; text-align:center;
  animation: fadeUp .9s ease both .3s;
}

.venture-buttons{
  display:flex; flex-direction:column; gap:22px; width:100%; max-width: 420px;
}

.venture-btn{
  display:flex; align-items:center; gap:18px;
  background: linear-gradient(160deg, var(--charcoal), #0e0e0e);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 8px;
  padding: 20px 22px;
  position:relative; overflow:hidden;
  transition: var(--transition);
  animation: fadeUp .9s ease both;
}
.venture-buttons .venture-btn:nth-child(1){animation-delay:.45s;}
.venture-buttons .venture-btn:nth-child(2){animation-delay:.6s;}

.venture-btn::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(212,175,55,.15), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.venture-btn:hover::before{ transform: translateX(100%); }

.venture-btn:hover{
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.7);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 24px rgba(212,175,55,.1);
}

.v-icon{
  flex-shrink:0;
  width: 52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color:#0a0a0a; font-size:1.3rem;
  transition: transform .5s ease;
}
.venture-btn:hover .v-icon{ transform: rotateY(360deg); }

.v-text{ flex:1; display:flex; flex-direction:column; gap:3px; text-align:left; }
.v-title{ font-family: var(--font-serif); font-weight:700; font-size:1.05rem; color:var(--cream); }
.v-sub{ font-size:.78rem; color:var(--grey); font-weight:300; }

.v-arrow{
  color: var(--gold); font-size:1.1rem; transition: transform .35s ease;
}
.venture-btn:hover .v-arrow{ transform: translateX(6px); }

/* ---------- Footer ---------- */
.footer{
  text-align:center; padding: 16px 20px;
  border-top: 1px solid rgba(212,175,55,.12);
  animation: fadeUp 1s ease both .8s;
}
.footer p{ font-size:.72rem; color:var(--grey); letter-spacing:.3px; }
.footer a{
  color: var(--grey);
  transition: color .3s ease;
}
.footer a:hover{ color: var(--gold); }

/* ---------- Keyframes ---------- */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes fadeDown{
  from{ opacity:0; transform: translateY(-16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media(max-width: 860px){
  .split-screen{ grid-template-columns: 1fr; }
  .left-panel{
    border-right:none; border-bottom:1px solid rgba(212,175,55,.15);
    padding: 34px 30px;
  }
  .right-panel{ padding: 40px 30px; }
  .photo-wrap{ width:170px; }
}

@media(max-width:420px){
  .venture-btn{ padding:16px; gap:14px; }
  .v-icon{ width:44px; height:44px; font-size:1.1rem; }
}