/* =========================================================
   Vyve — Health-Tech Company Homepage
   3D / glassmorphism / mesh-gradient visual system.
   Layered on top of styles.css (shared nav/footer/buttons).
   ========================================================= */

:root{
  --violet:#7B4BC9;
  --violet-deep:#4B2E83;
  --glow:#C9A7FF;
  --ink-3d:#241a2e;
}

/* richer base just for the company homepage */
body.home{
  background:#0e0a14;
  color:#ECE6F2;
}
body.home .wrap{position:relative;z-index:2;}

/* ---------- animated mesh-gradient backdrop ---------- */
.mesh{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#0e0a14;
}
.mesh::before, .mesh::after{
  content:""; position:absolute; inset:-25%;
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(123,75,201,.55), transparent 60%),
    radial-gradient(35% 35% at 80% 20%, rgba(222,124,118,.45), transparent 60%),
    radial-gradient(45% 45% at 70% 80%, rgba(143,169,140,.40), transparent 60%),
    radial-gradient(40% 40% at 25% 85%, rgba(108,74,115,.55), transparent 60%);
  filter:blur(40px);
  animation:meshmove 22s ease-in-out infinite alternate;
}
.mesh::after{animation-duration:32s;animation-direction:alternate-reverse;opacity:.7;}
@keyframes meshmove{
  0%{transform:translate3d(-4%,-3%,0) rotate(0deg) scale(1.05);}
  50%{transform:translate3d(5%,3%,0) rotate(8deg) scale(1.15);}
  100%{transform:translate3d(-3%,4%,0) rotate(-6deg) scale(1.08);}
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ---------- nav on dark ---------- */
body.home .nav{
  background:rgba(20,14,28,.55); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.home .nav .brand{color:#fff;}
body.home .nav-links a{color:rgba(236,230,242,.78);}
body.home .nav-links a:hover{color:#fff;}

/* glass utility */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}

.gradient-text{
  background:linear-gradient(100deg,#fff 10%, var(--glow) 45%, var(--rose) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow.on-dark{color:var(--glow);}

/* ---------- HERO ---------- */
.hero3d{padding:64px 0 90px; perspective:1400px;}
.hero3d-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
.hero3d h1{font-size:clamp(44px,6.4vw,86px); line-height:1.02; color:#fff; letter-spacing:-.02em; margin:14px 0 0;}
.hero3d .lede{font-size:21px; color:rgba(236,230,242,.80); margin:24px 0 34px; max-width:540px;}
.hero3d .hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.btn-glow{background:linear-gradient(100deg,var(--violet),var(--rose)); color:#fff; box-shadow:0 12px 40px rgba(123,75,201,.5);}
.btn-glow:hover{color:#fff; box-shadow:0 18px 60px rgba(123,75,201,.7); transform:translateY(-2px);}
.btn-outline{background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.22);}
.btn-outline:hover{background:rgba(255,255,255,.12); color:#fff;}

.hero-badge{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; color:#fff;}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 12px #7CFFB2;animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* 3D floating scene */
.scene{position:relative; transform-style:preserve-3d; min-height:480px;}
.float-card{
  position:absolute; border-radius:24px; padding:18px; width:210px;
  transform-style:preserve-3d; transition:transform .2s ease;
  animation:floaty 7s ease-in-out infinite;
}
.float-card .fc-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:12px;}
.float-card b{display:block;color:#fff;font-size:15px;}
.float-card span{font-size:12px;color:rgba(236,230,242,.6);}
.fc-1{top:0; left:6%; transform:translateZ(60px) rotateY(-12deg) rotateX(6deg); animation-delay:0s;}
.fc-2{top:120px; right:0; transform:translateZ(110px) rotateY(10deg) rotateX(-4deg); animation-delay:1.2s;}
.fc-3{top:250px; left:0; transform:translateZ(30px) rotateY(-8deg) rotateX(8deg); animation-delay:2.1s;}
.fc-4{top:330px; right:8%; transform:translateZ(90px) rotateY(12deg) rotateX(-6deg); animation-delay:.6s;}
@keyframes floaty{0%,100%{translate:0 0;}50%{translate:0 -16px;}}

/* central glowing orb */
.orb{
  position:absolute; top:50%; left:50%; width:230px;height:230px; margin:-115px 0 0 -115px;
  border-radius:50%; transform:translateZ(0);
  background:radial-gradient(circle at 35% 30%, #fff, var(--glow) 30%, var(--violet) 60%, var(--violet-deep) 100%);
  box-shadow:0 0 80px rgba(123,75,201,.7), inset -20px -20px 60px rgba(75,46,131,.6);
  animation:orbspin 18s linear infinite;
}
.orb::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;font-size:60px;color:rgba(255,255,255,.9);}
@keyframes orbspin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:18px 0; background:rgba(255,255,255,.02);}
.marquee-track{display:flex; gap:48px; white-space:nowrap; animation:scrollx 28s linear infinite; width:max-content;}
.marquee-track span{font-family:var(--serif); font-size:22px; color:rgba(236,230,242,.5); display:flex; align-items:center; gap:14px;}
.marquee-track span::after{content:"✦"; color:var(--rose); font-size:14px;}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- section heads on dark ---------- */
body.home section{padding:100px 0;}
.sh{max-width:720px; margin:0 auto 60px; text-align:center;}
.sh h2{font-size:clamp(30px,4.2vw,52px); color:#fff;}
.sh p{color:rgba(236,230,242,.72); font-size:19px; margin-top:14px;}

/* stat row */
.stats3d{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat{border-radius:20px; padding:28px 22px; text-align:center;}
.stat b{font-family:var(--serif); font-size:clamp(34px,4vw,52px); display:block; line-height:1;}
.stat span{font-size:14px; color:rgba(236,230,242,.65); margin-top:8px; display:block;}

/* ---------- tilt cards (what we do) ---------- */
.tilt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.tilt{border-radius:24px; padding:32px 28px; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; will-change:transform;}
.tilt .t-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;margin-bottom:18px; transform:translateZ(40px);}
.tilt h3{color:#fff; font-size:22px; transform:translateZ(28px);}
.tilt p{color:rgba(236,230,242,.7); font-size:16px; margin:8px 0 0; transform:translateZ(18px);}
.glow-violet{background:linear-gradient(145deg,var(--violet),var(--violet-deep)); box-shadow:0 0 30px rgba(123,75,201,.5);}
.glow-rose{background:linear-gradient(145deg,var(--rose),#b5524c); box-shadow:0 0 30px rgba(222,124,118,.5);}
.glow-sage{background:linear-gradient(145deg,var(--sage),#5f7a5c); box-shadow:0 0 30px rgba(143,169,140,.5);}
.glow-gold{background:linear-gradient(145deg,var(--gold),#a9772f); box-shadow:0 0 30px rgba(214,164,92,.5);}

/* ---------- apps portfolio 3D grid ---------- */
.apps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.app-card{border-radius:24px; overflow:hidden; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; will-change:transform;}
.app-shot{aspect-ratio:16/10; display:grid; place-items:center; position:relative; overflow:hidden;}
.app-shot .ph-icon{font-size:46px;}
.app-shot .badge{position:absolute; top:12px; left:12px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:rgba(0,0,0,.35); color:#fff; backdrop-filter:blur(6px);}
.app-meta{padding:20px 22px 24px;}
.app-meta h3{color:#fff; font-size:21px; margin:0 0 6px;}
.app-meta p{color:rgba(236,230,242,.68); font-size:14px; margin:0;}
.app-shot.s-cycle{background:linear-gradient(150deg,#7B4BC9,#DE7C76);}
.app-shot.s-sleep{background:linear-gradient(150deg,#4B2E83,#7B4BC9);}
.app-shot.s-peri{background:linear-gradient(150deg,#DE7C76,#D6A45C);}
.app-shot.s-nutri{background:linear-gradient(150deg,#1c1622,#7CFFB2);}
.app-shot.s-clin{background:linear-gradient(150deg,#243b55,#8FA98C);}
.app-shot.s-more{background:linear-gradient(150deg,#2a2030,#4B2E83); border:1px dashed rgba(255,255,255,.25);}
.app-card.more{display:grid; place-items:center; text-align:center; min-height:260px; padding:30px;}
.app-card.more b{font-family:var(--serif); font-size:40px; color:#fff; display:block;}
.app-card.more span{color:rgba(236,230,242,.7); font-size:15px;}

/* ---------- image showcase band ---------- */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;}
.showcase .show-img{border-radius:28px; overflow:hidden; aspect-ratio:4/3;}
.show-slot{width:100%;height:100%;display:grid;place-items:center;text-align:center;
  background:linear-gradient(150deg,rgba(123,75,201,.35),rgba(222,124,118,.30));
  border:1px dashed rgba(255,255,255,.25); color:rgba(255,255,255,.85);}
.show-slot .ph-icon{font-size:46px;margin-bottom:8px;}
.show-slot .ph-label{font-size:13px;font-weight:600;padding:0 24px;}

/* ---------- team / founders ---------- */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:860px; margin:0 auto;}
.founder{border-radius:26px; padding:34px; display:flex; gap:22px; align-items:flex-start; transform-style:preserve-3d; transition:transform .25s ease;}
.founder .pfp{width:84px;height:84px;border-radius:22px;flex-shrink:0;display:grid;place-items:center;font-family:var(--serif);font-size:34px;color:#fff;}
.pfp-n{background:linear-gradient(145deg,var(--violet),var(--violet-deep));}
.pfp-s{background:linear-gradient(145deg,var(--rose),var(--gold));}
.founder h3{color:#fff; font-size:23px; margin:0;}
.founder .role{color:var(--glow); font-size:14px; font-weight:600; margin:4px 0 12px;}
.founder p{color:rgba(236,230,242,.72); font-size:15px; margin:0;}

/* ---------- blog preview ---------- */
.blog3d{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.b3{border-radius:22px; overflow:hidden; transition:transform .2s ease; display:flex; flex-direction:column;}
.b3:hover{transform:translateY(-6px);}
.b3 .b3-top{aspect-ratio:16/9; display:grid; place-items:center; font-size:34px;}
.b3 .b3-body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column;}
.b3 .cat{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--glow);}
.b3 h3{color:#fff; font-size:18px; margin:8px 0 0; line-height:1.25;}

/* ---------- big CTA ---------- */
.cta3d{text-align:center;}
.cta3d-card{border-radius:34px; padding:70px 50px; max-width:820px; margin:0 auto;}
.cta3d-card h2{font-size:clamp(32px,4.4vw,56px); color:#fff;}
.cta3d-card p{color:rgba(236,230,242,.78); font-size:20px; margin-top:14px;}

/* ---------- footer on dark ---------- */
body.home footer{background:#0a070f; border-top:1px solid rgba(255,255,255,.08); position:relative; z-index:2;}
body.home .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; }
body.home footer, body.home footer a{color:rgba(236,230,242,.62);}
body.home footer a:hover{color:#fff;}
body.home .foot-grid h4{color:#fff;}
.foot-authors{border-top:1px solid rgba(255,255,255,.08); margin-top:8px; padding-top:26px; display:flex; gap:30px; flex-wrap:wrap;}
.foot-author{display:flex; gap:14px; align-items:center;}
.foot-author .pfp{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-family:var(--serif);font-size:18px;color:#fff;flex-shrink:0;}
.foot-author b{color:#fff; font-size:14px; display:block;}
.foot-author span{font-size:12px; color:rgba(236,230,242,.6);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

@media (max-width:920px){
  .hero3d-grid{grid-template-columns:1fr; gap:30px;}
  .scene{min-height:420px; margin-top:20px;}
  .stats3d{grid-template-columns:repeat(2,1fr);}
  .tilt-grid,.apps-grid,.blog3d{grid-template-columns:1fr;}
  .showcase{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  body.home .foot-grid{grid-template-columns:1fr 1fr;}
  body.home section{padding:72px 0;}
}
@media (max-width:560px){
  .stats3d{grid-template-columns:1fr 1fr;}
  .founder{flex-direction:column;}
  body.home .foot-grid{grid-template-columns:1fr;}
}