*{
  margin: 0px;
  padding: 0px;
}

:root{
  --glass-fill: rgba(255,255,255,0.055);
  --glass-fill-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.14);
  --ember: #ff6a4d;
  --ember-soft: rgba(255,106,77,0.16);
  --blue: #3b7ef8;
  --violet: #9b5cf6;
  --cyan: #22d3ee;
}

body{
  background:
    radial-gradient(circle at top left, rgba(59,126,248,0.14), transparent 30%),
    linear-gradient(135deg, #060608 0%, #090b11 100%);
  color: #f0f0f8;
  font-family: 'DM Sans', sans-serif;
}

/* ================================
   SCROLL REVEAL
   ================================ */

.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.app-shell{
  min-height: 100vh;
  background: transparent;
}

section{
    padding: 100px 8%;
}

.container{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.container-fluid{
    width: 95%;
    margin: auto;
}

.row{
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}

.align-center{
    align-items: center;
}

.justify-between{
    justify-content: space-between;
}
.col- {
    padding:12px
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Palanquin Dark", sans-serif;
    font-weight: 800;
    color: #f0f0f8 !important;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: 0.9375rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

p {
    font-family: 'DM Sans', sans-serif;
    color: #f0f0f8;
    font-size: 0.9375rem;
    line-height: 1.6;
}

a {
    font-family: 'DM Sans', sans-serif;
    color: #f0f0f8;
    text-decoration: none;
}

span {
    font-family: 'DM Sans', sans-serif;
    color: #f0f0f8;
}

/* Navbar */
.mynav{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: rgba(6, 6, 8, 0.8);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0.75rem 0;
}

a.navbar-brand{
	font-family: "Syne", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #60a5fa, #a855f7);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.name{
	padding-top: 20px;
}

ul.navbar-nav{
	list-style-type: none;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-items: center;
	padding-top: 10px;
	/* margin-right: 30px; */
}

ul.navbar-nav a{
	color: #ffffff;
	text-decoration: none;
  border: none;
}

ul.navbar-nav a:hover,
ul.navbar-nav .nav-link.active{
	color: #ffffff;
  background: rgba(59,126,248,0.16);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  transform: translateY(-1px);
}

.offcanvas {
  background:#060608;
	border-left: 2px solid black;
}

.offcanvas-title {
	font-family: "Uncial Antiqua", system-ui;
	color: #B89B72;
	font-size: 1.3rem;
}

.offcanvas-body{
	color: #B89B72;
	font-family: 'DM Sans', sans-serif;
	padding: 14px 0px;
	border-bottom: 1px solid #2A2420;
}

.offcanvas-body .nav-link:hover {
	color: #E6D3B3;
}




.nav-link{
  background:transparent;
  border:none;
  color:#f0f0f8;
}

/* .cta-btn{
  background:#3b7ef8;
  border:none;
  color:#f0f0f8;

  padding:12px 18px;

  border-radius:12px;
} */



/* HERO */

.hero-section{
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
}

.hero-section::before{
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(155,92,246,0.22), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.hero-section .container-fluid{
  position: relative;
  z-index: 1;
}

.hero-left h2{
  font-size: 3.5rem;
  line-height: 1.04;
  margin: 24px 0;
  color: #f0f0f8;
  max-width: 620px;
  letter-spacing: -0.01em;
}

.hero-left p{
  color: rgba(240,240,248,0.72);
  max-width: 520px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero-left{
  position: relative;
}

.hero-left > *{
  animation: hero-rise 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-left .live-pill{ animation-delay: 0ms; }
.hero-left h2{ animation-delay: 90ms; }
.hero-left p{ animation-delay: 170ms; }
.hero-left .hero-button{ animation-delay: 250ms; }
.hero-left .hero-stats{ animation-delay: 330ms; }

@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-left > *{ animation: none; opacity: 1; transform: none; }
}



/* LIVE PILL */

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;

  border-radius:999px;

  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border:1px solid var(--glass-border);

  color:#22d3ee;

  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#22d3ee;
  box-shadow: 0 0 0 0 rgba(34,211,238,0.6);
  animation: live-pulse 2s ease-out infinite;
}

@keyframes live-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,211,238,0.5); }
  70%{ box-shadow: 0 0 0 8px rgba(34,211,238,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

@media (prefers-reduced-motion: reduce){
  .live-dot{ animation: none; }
}



/* HERO BUTTONS */

.hero-button{
  display:flex;
  gap:14px;
  margin-top:32px;
  flex-wrap: wrap;
}

.hero-primary-btn{
  background: linear-gradient(135deg, var(--ember), #ff4d6d);
  border:none;
  padding:15px 24px;
  border-radius:999px;
  color:#f0f0f8;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(255,106,77,0.28);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}

.hero-primary-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(255,106,77,0.38);
}

.hero-secondary-btn{
  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--glass-border);
  padding:15px 24px;
  border-radius:999px;
  color:#f0f0f8;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-secondary-btn:hover{
  background: var(--glass-fill-strong);
  border-color: rgba(255,255,255,0.24);
}

.trust-line{
  margin-top: 16px;
  font-size: 0.8rem;
  color: rgba(240,240,248,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}



/* STATS */

.hero-stats{
  display:flex;
  gap:14px;
  margin-top:40px;
  flex-wrap: wrap;
}

.stat-box{
  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--glass-border);
  padding:16px 20px;
  border-radius:18px;
  min-width:130px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-box:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.26);
}

.stat-box h3{
  margin:0;
  color:#f0f0f8 !important;
  font-size: 1.4rem;
}

.stat-box span{
  color:rgba(240,240,248,0.45);
  font-size: 0.8rem;
}



/* HERO VISUAL */

.hero-ui{
  position:relative;
  height:600px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}

.hero-ui::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,8,0.15) 0%, rgba(6,6,8,0.55) 65%, rgba(6,6,8,0.85) 100%),
    linear-gradient(135deg, rgba(59,126,248,0.25), rgba(155,92,246,0.3));
  mix-blend-mode: normal;
  z-index: 1;
}

.hero-ui img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.15) contrast(1.05);
}



/* FLOATING CARD */

.floating-card{
  position:absolute;
  z-index: 2;

  width:300px;

  background: var(--glass-fill-strong);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  color: #f0f0f8;
  border:1px solid var(--glass-border);

  border-radius:22px;

  padding:20px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);

  top:32px;
  right:36px;

  animation: float-a 6s ease-in-out infinite;
}

@keyframes float-a{
  0%, 100%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(-14px) rotate(0.5deg); }
}

.card-top{
  display:flex;
  justify-content:space-between;
}

.card-tag{
  color:#9b5cf6;

  background:rgba(155,92,246,0.16);

  padding:7px 12px;

  border-radius:999px;

  font-size:11px;
  font-weight: 700;
}

.card-live{
  color:#22d3ee;

  background:rgba(34,211,238,0.16);

  padding:7px 12px;

  border-radius:999px;

  font-size:11px;
  font-weight: 700;
}

.floating-card p{
  color:rgba(240,240,248,0.55);
}



/* ATTENDEES */

.attendees{
  display:flex;
  align-items:center;
  margin-top:20px;
}

.mini-avatar{
  width:30px;
  height:30px;

  border-radius:50%;
  background-size: cover;
  background-position: center;

  border:2px solid rgba(18,18,26,0.9);

  margin-right:-10px;
}

.attendees span{
  margin-left:16px;
  color:rgba(240,240,248,0.5);
  font-size: 0.8rem;
}



/* FEED PREVIEW */

.feed-preview{
  position:absolute;
  z-index: 2;

  width:280px;

  left:24px;
  bottom:110px;

  background: var(--glass-fill-strong);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);

  border:1px solid var(--glass-border);

  border-radius:20px;

  padding:18px;
  color: #f0f0f8;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);

  animation: float-b 7s ease-in-out infinite;
  animation-delay: 0.6s;
}

@keyframes float-b{
  0%, 100%{ transform: translateY(0) rotate(1deg); }
  50%{ transform: translateY(-10px) rotate(-0.5deg); }
}

.feed-header{
  display:flex;
  gap:12px;
  align-items:center;
}

.feed-avatar{
  width:42px;
  height:42px;

  border-radius:50%;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.1);
}

.feed-header span{
  color:rgba(240,240,248,0.5);
  font-size:12px;
}

.feed-preview p{
  margin-top:14px;
  line-height:1.6;
  font-size: 0.875rem;
}

.feed-actions{
  display: flex;
  gap: 16px;
  margin-top: 14px;
  color: rgba(240,240,248,0.45);
  font-size: 0.8rem;
}

.feed-actions span i{
  margin-right: 5px;
  color: var(--ember);
}



/* SMALL FLOAT */

.small-floating-card{
  position:absolute;
  z-index: 2;

  right:36px;
  bottom:48px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: var(--glass-fill-strong);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);

  border:1px solid var(--glass-border);

  padding:12px 16px;

  border-radius:16px;

  color:#f0f0f8;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);

  animation: float-c 5.5s ease-in-out infinite;
  animation-delay: 1.1s;
}

.small-floating-card i{
  color: var(--cyan);
}

@keyframes float-c{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce){
  .floating-card, .feed-preview, .small-floating-card{ animation: none; }
}

@media (max-width: 991px){
  .floating-card, .feed-preview, .small-floating-card{ display: none; }
  .hero-ui{ height: 380px; }
}



/* FEATURES */

.feature-section{
  padding:80px 0;
}

.section-head{
  margin-bottom:40px;
}

.section-head h2{
  max-width: 680px;
}

.section-tag{
  color:#22d3ee;
  font-size:13px;
}

.section-head h2{
  margin-top:12px;
  font-size:48px;
}



/* FEATURE CARDS */

.feature-card{
  background: rgba(18,18,26,0.88);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:24px;
  padding:30px;
  margin-bottom:24px;
  min-height:240px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(96,165,250,0.35);
  box-shadow: 0 16px 34px rgba(0,0,0,0.24);
}

.large-feature{
  min-height:300px;
}

.feature-label{
  color:#9b5cf6;
  font-size:12px;
}

.feature-card h3{
  margin-top:20px;
  font-size:28px;
}

.feature-card p{
  color:rgba(240,240,248,0.45);

  max-width:400px;

  line-height:1.7;
}



/* CTA */

.cta-section{
  padding:80px 0;
}

.cta-box{
  background: linear-gradient(135deg, rgba(18,18,26,0.94), rgba(24,24,34,0.9));
  border:1px solid rgba(255,255,255,0.07);
  border-radius:32px;
  padding:80px 20px;
  text-align:center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.24);
}

.cta-box h2{
  font-size:54px;
}

.cta-box p{
  color:rgba(240,240,248,0.45);
  margin:20px 0;
}

.cta-main-btn{
  background:#3b7ef8;
  border:none;

  padding:16px 22px;

  border-radius:16px;

  color:#f0f0f8;
}



/* FOOTER */

.footer{
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,0.07);
  background: rgba(6,6,8,0.4);
}

.footer-logo{
  font-family:"Syne", sans-serif;
  font-size:20px;

  background:linear-gradient(90deg,#3b7ef8,#9b5cf6);

 
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:20px;
}

.footer-links a{
  color:rgba(240,240,248,0.45);
  text-decoration:none;
}

.footer-copy{
  text-align:right;
  color:rgba(240,240,248,0.45);
}



/* MOBILE */

@media(max-width:991px){

  .hero-left{
    text-align:center;
    margin-bottom:60px;
  }

  .hero-left h1{
    font-size:52px;
  }

  .hero-left p{
    margin:auto;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-stats{
    justify-content:center;
    flex-wrap:wrap;
  }

  .hero-ui{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:20px;
  }

  .floating-card,
  .feed-preview,
  .small-floating-card{
    position:relative;
    width:100%;

    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
  }

  .section-head h2{
    font-size:36px;
  }

  .cta-box h2{
    font-size:38px;
  }

  .footer{
    text-align:center;
  }

  .footer-links{
    margin:20px 0;
  }

  .footer-copy{
    text-align:center;
  }

}



@media(max-width:768px){

  .nav-center{
    display:none;
  }

  .hero-left h1{
    font-size:42px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .hero-primary-btn,
  .hero-secondary-btn{
    width:100%;
  }

  .cta-box{
    padding:50px 20px;
  }

}