@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

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

/* ════════ CUSTOM CURSOR ════════ */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, label, [role="button"] { cursor: none; }
}
#cur {
  position: fixed; width: 10px; height: 10px;
  background: #fff; border-radius: 50%;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: width .15s, height .15s;
}
#cur-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 50%; pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%);
  transition: width .28s, height .28s, border-color .28s;
}
body.hov #cur { width: 16px; height: 16px; }
body.hov #cur-ring { width: 54px; height: 54px; border-color: rgba(168,85,247,.7); }

/* ════════ LOADER ════════ */
#loader {
  position: fixed; inset: 0; z-index: 99990;
  background: #0a0018;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 4px; color: #FBBF24;
  animation: pulse-logo 1.2s ease-in-out infinite alternate;
}
@keyframes pulse-logo { from { opacity: .4; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
.loader-bar {
  width: 160px; height: 3px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden;
}
.loader-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #a855f7, #f97316);
  border-radius: 4px;
  animation: load-fill 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes load-fill { to { width: 100%; } }

/* ════════ FLOATING PARTICLES ════════ */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle {
  position: absolute;
  font-size: 1rem;
  opacity: 0;
  animation: float-up linear infinite;
  user-select: none;
}
@keyframes float-up {
  0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .3; }
  100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

:root {
  --yellow: #FBBF24;
  --purple: #a855f7;
  --orange: #f97316;
  --pink:   #ec4899;
  --dark:   #0a0018;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background: url('images/bg.jpg') center top / cover no-repeat fixed;
  min-height: 100vh;
  color: #fff;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 85% at 50% 38%,
    rgba(10,0,30,0.72) 0%,
    rgba(10,0,30,0.08) 100%);
}

.page { position: relative; z-index: 1; }

.glass {
  background: rgba(15,5,40,0.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
}

/* ── PAGE TRANSITION ── */
.page { animation: fadein .35s ease; }
@keyframes fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ════════ NAV ════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 14px 36px;
  background: linear-gradient(to bottom, rgba(10,0,30,0.93), transparent);
  backdrop-filter: blur(10px);
}
.nav-logo {
  font-size: 1rem; font-weight: 900; line-height: 1.2; text-transform: uppercase;
  color: var(--yellow); letter-spacing: 1px; text-decoration: none;
}
.nav-links {
  display: flex; gap: 28px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
}
.nav-links a {
  color: rgba(255,255,255,0.55); text-decoration: none; transition: color .2s;
  padding-bottom: 3px;
}
.nav-links a.active { color: var(--yellow); border-bottom: 2px solid var(--yellow); }
.nav-links a:hover  { color: #fff; }

.nav-socials { display:flex; gap:14px; font-size:.95rem; }
.nav-socials a { color:rgba(255,255,255,0.65); text-decoration:none; transition:color .2s; }
.nav-socials a:hover { color: var(--yellow); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
#nav-toggle { display:none; }
#nav-toggle:checked ~ .page nav .hamburger span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
#nav-toggle:checked ~ .page nav .hamburger span:nth-child(2) { opacity:0; }
#nav-toggle:checked ~ .page nav .hamburger span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.nav-mobile {
  display:none; flex-direction:column; align-items:center; gap:22px;
  position:fixed; inset:0; z-index:490;
  background:rgba(10,0,30,0.97);
  padding-top:100px;
  font-size:1.1rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
}
.nav-mobile a { color:rgba(255,255,255,0.7); text-decoration:none; transition:color .2s; }
.nav-mobile a:hover { color:var(--yellow); }
#nav-toggle:checked ~ .page .nav-mobile { display:flex; }

/* ════════ SECTION HEADER ════════ */
.sec-wrap { padding: 80px 24px 72px; max-width:1100px; margin:0 auto; min-height: calc(100vh - 220px); }
.sec-eyebrow { font-size:.62rem; font-weight:800; letter-spacing:5px; text-transform:uppercase; color:var(--yellow); margin-bottom:6px; }
.sec-h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; letter-spacing:2px; text-transform:uppercase; margin-bottom:36px; }
hr.divider { border:none; border-top:1px solid rgba(255,255,255,.07); }

/* ════════ BUTTONS ════════ */
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 28px; border-radius:100px;
  border:2px solid rgba(255,255,255,.45); background:rgba(255,255,255,.07);
  font-size:.8rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:#fff; text-decoration:none; backdrop-filter:blur(6px);
  transition:all .25s; cursor:pointer;
}
.btn-primary:hover {
  background:rgba(168,85,247,.4); border-color:var(--purple);
  box-shadow:0 0 28px rgba(168,85,247,.45); transform:translateY(-2px);
}
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 26px; border-radius:100px;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.05);
  font-size:.74rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:#fff; text-decoration:none; cursor:pointer;
  transition:all .2s;
}
.btn-outline:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }

/* ════════ FOOTER ════════ */
footer {
  border-top:1px solid rgba(255,255,255,.08);
  padding:44px 24px 32px; text-align:center;
  background: linear-gradient(to bottom, rgba(10,0,30,0.0), rgba(10,0,30,0.85));
}
.foot-logo { font-size:1.3rem; font-weight:900; text-transform:uppercase; color:var(--yellow); letter-spacing:2px; margin-bottom:14px; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.foot-social { display:flex; gap:12px; justify-content:center; margin-bottom:16px; }
.foot-social a {
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  background: rgba(10,0,30,0.55);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.9); text-decoration:none; font-size:.95rem;
  transition:all .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.foot-social a:hover { background:rgba(168,85,247,.45); border-color:var(--purple); color:#fff; transform:scale(1.12); box-shadow:0 4px 20px rgba(168,85,247,.4); }
.foot-copy { font-size:.68rem; color:rgba(255,255,255,.6); letter-spacing:1.5px; text-shadow:0 1px 6px rgba(0,0,0,.8); font-weight:500; }

/* ════════ MARQUEE ════════ */
.marquee-wrap {
  overflow:hidden; padding:15px 0;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.18);
}
.marquee-track { display:flex; gap:52px; animation:mq 22s linear infinite; width:max-content; }
@keyframes mq { to { transform:translateX(-50%); } }
.mq-item { font-size:.68rem; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.18); white-space:nowrap; }
.mq-item em { color:var(--purple); font-style:normal; }

/* ════════ SCROLL REVEAL ════════ */
.rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.rv.in { opacity:1; transform:none; }

/* ════════ MOBILE ════════ */
@media (max-width:768px) {
  /* Hide desktop cursor on touch */
  #cur, #cur-ring { display:none !important; }
  body { cursor:auto !important; }
  a, button, label { cursor:pointer !important; }

  nav { padding:12px 18px; }
  .nav-links, .nav-socials { display:none; }
  .hamburger { display:flex; }

  .sec-wrap { padding:90px 16px 48px; min-height: auto; }
  .sec-h2 { font-size:1.4rem; margin-bottom:20px; }

  /* Footer */
  footer { padding:28px 16px 20px; }
  .foot-logo { font-size:1.1rem; margin-bottom:10px; }
  .foot-social { gap:10px; margin-bottom:12px; }
  .foot-social a { width:38px; height:38px; font-size:.85rem; }
  .foot-copy { font-size:.6rem; }

  /* Marquee smaller */
  .marquee-wrap { padding:12px 0; }
  .mq-item { font-size:.6rem; letter-spacing:2.5px; }

  /* Buttons — bigger tap area */
  .btn-primary { padding:14px 24px; font-size:.78rem; min-height:48px; }
  .btn-outline  { padding:13px 22px; font-size:.72rem; min-height:46px; }

  /* Loader */
  .loader-logo { font-size:1.4rem; }
}

/* iOS fix — background-attachment:fixed breaks on Safari/iOS */
@media (max-width:768px) {
  body {
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }
}

/* Small phones */
@media (max-width:480px) {
  nav { padding:10px 14px; }
  .nav-logo { font-size:.88rem; }

  .sec-wrap { padding:85px 12px 40px; }
  .sec-h2   { font-size:1.25rem; letter-spacing:1px; }
  .sec-eyebrow { font-size:.55rem; }

  footer { padding:24px 12px 16px; }

  /* Marquee */
  .marquee-track { animation-duration: 15s; }
}

/* Landscape phones */
@media (max-width:768px) and (orientation:landscape) {
  .sec-wrap { padding:80px 20px 36px; min-height:auto; }
}