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

#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}
:root {
  --bg: #09090f; --surface: #13131e; --border: rgba(255,255,255,0.07);
  --accent: #6c63ff; --accent2: #a78bfa; --gold: #f5c842;
  --text: #e8e8f0; --muted: #7a7a9a; --card-r: 18px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.65; }

.hero-section, .timeline-wrapper, .cta-section, .site-footer { position: relative; z-index: 2; }
img { display: block; max-width: 100%; height: auto; }

@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(9px); } }
@keyframes gridDrift { 0% { transform:translateY(0); } 100% { transform:translateY(60px); } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(108,99,255,0.6); } 50% { box-shadow:0 0 0 10px rgba(108,99,255,0); } }
@keyframes blink { 0%,100% { border-color:#f5c842; } 50% { border-color:transparent; } }
@keyframes introFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* HERO */
.hero-section {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 65% 50%, rgba(108,99,255,0.13) 0%, transparent 70%), #09090f;
}
.hero-bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(108,99,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(108,99,255,0.055) 1px, transparent 1px);
  background-size: 60px 60px; animation: gridDrift 22s linear infinite;
}
.hero-content {
  position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; gap: 4rem; max-width: 1200px; width: 100%; padding: 0 2.5rem;
}
.hero-text { flex: 1; max-width: 560px; }
.hero-born { font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent2); margin-bottom:1rem; opacity:0; animation:fadeUp .8s ease .2s forwards; }
.hero-name {
  font-family:'Playfair Display',serif; font-size:clamp(3.2rem,7vw,5.8rem); font-weight:700;
  line-height:1.25; letter-spacing:-0.02em;
  background:linear-gradient(135deg,#fff 30%,#a78bfa 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:0; animation:fadeUp .8s ease .4s forwards;
}
.hero-titles { margin-top:1.25rem; font-size:1.35rem; color:var(--muted); min-height:2rem; opacity:0; animation:fadeUp .8s ease .6s forwards; }
.title-rotating { display:inline-block; color:var(--gold); font-weight:500; border-right:2px solid var(--gold); padding-right:3px; white-space:nowrap; animation:blink .75s step-end infinite; }
.hero-scroll-cta { margin-top:1.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; opacity:0; animation:fadeUp .8s ease .9s forwards; }
.hero-scroll-cta p { font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); max-width:480px; line-height:1.6; }
.scroll-arrow { width:42px; height:42px; border:1px solid rgba(108,99,255,0.35); border-radius:50%; display:flex; align-items:center; justify-content:center; animation:bounce 2.2s ease-in-out infinite; }
.scroll-arrow svg { width:18px; height:18px; color:var(--accent2); }
.hero-image-wrap { position:relative; flex:0 0 auto; width:clamp(260px,34vw,460px); opacity:0; animation:fadeIn 1.4s ease .5s forwards; }
.hero-me-img { width:100%; height:auto; filter:drop-shadow(0 0 70px rgba(108,99,255,0.45)); position:relative; z-index:2; }
.hero-glow { position:absolute; bottom:-50px; left:50%; transform:translateX(-50%); width:65%; height:130px; background:radial-gradient(ellipse,rgba(108,99,255,0.55) 0%,transparent 70%); filter:blur(35px); z-index:1; }

/* TIMELINE WRAPPER — scroll-snap container */
.timeline-wrapper {
  position: relative;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  scrollbar-width: none;
}
.timeline-wrapper::-webkit-scrollbar { display: none; }

/* TIMELINE ITEM — full viewport section */
.timeline-item {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 4rem 4vw;
  position: relative;
  box-sizing: border-box;
}

/* LEFT: card left, opposite right */
.timeline-item.left  { flex-direction: row; }
/* RIGHT: card right, opposite left */
.timeline-item.right { flex-direction: row-reverse; }

/* Slide-in animations */
.timeline-item.left  .tl-card     { opacity:0; transform:translateX(-60px); transition:opacity .7s ease, transform .7s ease; }
.timeline-item.left  .tl-opposite { opacity:0; transform:translateX(60px);  transition:opacity .7s ease .15s, transform .7s ease .15s; }
.timeline-item.right .tl-card     { opacity:0; transform:translateX(60px);  transition:opacity .7s ease, transform .7s ease; }
.timeline-item.right .tl-opposite { opacity:0; transform:translateX(-60px); transition:opacity .7s ease .15s, transform .7s ease .15s; }
.timeline-item .tl-connector      { opacity:0; transform:translateY(20px);  transition:opacity .5s ease .3s, transform .5s ease .3s; }

.timeline-item.visible .tl-card,
.timeline-item.visible .tl-opposite,
.timeline-item.visible .tl-connector { opacity:1; transform:translate(0,0); }

/* CONNECTOR — centered badge between the two panels */
.tl-connector { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; flex-shrink:0; z-index:10; }
.tl-dot { width:clamp(14px,1.2vw,22px); height:clamp(14px,1.2vw,22px); border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 0 0 3px var(--accent), 0 0 20px rgba(108,99,255,0.6); animation:pulse 3s ease-in-out infinite; flex-shrink:0; }
.tl-year { font-size:clamp(.68rem,0.9vw,1rem); font-weight:700; letter-spacing:.1em; color:var(--accent2); text-transform:uppercase; white-space:nowrap; background:var(--bg); padding:4px 12px; border-radius:20px; border:1px solid rgba(108,99,255,0.3); }

/* CARD */
.tl-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--card-r); overflow:hidden; transition:border-color .3s, box-shadow .3s; flex:0 0 42%; align-self:center; }
.tl-card:hover { border-color:rgba(108,99,255,0.35); box-shadow:0 8px 40px rgba(108,99,255,0.12); }
.tl-card-inner { padding:clamp(1rem,2vw,2rem); }
.tl-logos { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.tl-logo { height:clamp(28px,2.5vw,48px); width:auto; object-fit:contain; }
.tl-title { font-family:'Playfair Display',serif; font-size:clamp(1.4rem,2.2vw,2.8rem); font-weight:700; color:#fff; line-height:1.2; margin-bottom:.4rem; }
.tl-subtitle { font-size:clamp(.72rem,1vw,1rem); letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); margin-bottom:.9rem; }
.tl-body { font-size:clamp(.88rem,1.1vw,1.25rem); color:var(--muted); line-height:1.7; margin-bottom:1.2rem; }
.tl-body strong { color:var(--text); font-weight:600; }
.tl-body em { color:var(--gold); font-style:normal; }

/* OPPOSITE PANEL */
.tl-opposite { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem 1.5rem; text-align:center; align-self:center; position:relative; flex:0 0 42%; }
.tl-opposite--me { padding:1.5rem; overflow:visible; }
.tl-opp-me { width:100%; height:100%; min-height:380px; max-height:70vh; object-fit:contain; object-position:center; border-radius:var(--card-r); filter:drop-shadow(0 0 30px rgba(108,99,255,0.55)) drop-shadow(0 0 80px rgba(108,99,255,0.25)); display:block; }
.tl-opp-logos { display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
.tl-opp-logo { height:clamp(44px,4vw,80px); width:auto; object-fit:contain; }
.tl-opp-logo-large { height:clamp(60px,5.5vw,110px); width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.55; }
.tl-opp-logo-overlay { position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); height:38px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; z-index:5; }
.tl-opp-label { font-family:'Playfair Display',serif; font-size:clamp(1rem,1.8vw,2.2rem); font-weight:700; color:rgba(255,255,255,0.75); line-height:1.3; }
.tl-opp-sub { font-size:clamp(.72rem,1vw,1rem); letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); }

/* GALLERY */
.tl-gallery { margin-top:.75rem; }
.tl-single-img { width:100%; height:clamp(300px,55vh,700px); object-fit:cover; border-radius:10px; }
.carousel { position:relative; overflow:hidden; border-radius:10px; width:100%; height:clamp(300px,55vh,700px); }
.carousel-track { position:relative; width:100%; height:100%; }
.carousel-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; justify-content:center; }
.carousel-slide.active { opacity:1; }
.carousel-slide img,
.carousel-slide video { width:100%; height:100%; object-fit:contain; display:block; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.1); color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:.95rem; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:5; }
.carousel-btn:hover { background:var(--accent); }
.carousel-btn.prev { left:8px; }
.carousel-btn.next { right:8px; }
.carousel-dots { display:flex; justify-content:center; gap:6px; padding:8px 0 6px; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:var(--muted); cursor:pointer; transition:background .2s, transform .2s; }
.carousel-dot.active { background:var(--accent); transform:scale(1.35); }

/* CTA */
.cta-section { position:relative; background:linear-gradient(180deg,var(--bg) 0%,#0d0d1a 100%); padding:8rem 2rem; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(108,99,255,0.1) 0%,transparent 70%); pointer-events:none; }
.cta-inner { position:relative; z-index:2; max-width:800px; margin:0 auto; text-align:center; }
.cta-heading { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,5vw,3.5rem); font-weight:700; background:linear-gradient(135deg,#fff 30%,var(--accent2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem; }
.cta-sub { font-size:1rem; color:var(--muted); margin-bottom:3rem; line-height:1.7; }
.cta-form { display:flex; flex-direction:column; gap:1.25rem; text-align:left; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); font-weight:500; }
.form-group input, .form-group textarea { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.85rem 1.1rem; color:var(--text); font-family:'Inter',sans-serif; font-size:.95rem; outline:none; transition:border-color .25s, box-shadow .25s; resize:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,99,255,0.15); }
.form-group input::placeholder, .form-group textarea::placeholder { color:#3a3a5a; }
.cta-btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:.95rem 2.2rem; font-size:.95rem; font-weight:600; cursor:pointer; transition:background .25s, transform .2s, box-shadow .25s; align-self:flex-end; }
.cta-btn svg { width:18px; height:18px; }
.cta-btn:hover { background:#5a52e0; transform:translateY(-2px); box-shadow:0 8px 24px rgba(108,99,255,0.4); }
.form-success { display:none; text-align:center; color:#4ade80; font-size:.95rem; padding:.75rem; background:rgba(74,222,128,0.08); border-radius:8px; border:1px solid rgba(74,222,128,0.2); }
.form-success.show { display:block; }
.form-success.error { color:#f87171; background:rgba(248,113,113,0.08); border-color:rgba(248,113,113,0.2); }
.cta-links { margin-top:2rem; display:flex; justify-content:center; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.cta-link { color:var(--accent2); font-size:.9rem; text-decoration:none; transition:color .2s; }
.cta-link:hover { color:var(--accent); }
.cta-links-divider { color:var(--muted); }

/* SOCIAL LINKS */
.cta-social { margin-top:2.5rem; text-align:center; }
.cta-social-label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:1rem; text-transform:uppercase; letter-spacing:.1em; }
.cta-social-links { display:flex; justify-content:center; gap:1.25rem; }
.cta-social-link { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--muted); transition:all .25s; }
.cta-social-link:hover { background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px); }
.cta-social-link svg { width:20px; height:20px; }

/* FOOTER */
.site-footer { text-align:center; padding:2rem; font-size:.8rem; color:var(--muted); border-top:1px solid var(--border); }

/* RESPONSIVE */
@media (max-width:960px) {
  .hero-section { flex-direction:column; padding-top:4rem; }
  .hero-image-wrap { width:clamp(140px,45vw,220px); flex:none; order:-1; }
  .hero-content { flex-direction:column; text-align:center; padding:1rem 1.5rem 2rem; gap:1rem; width:100%; }
  .hero-text { max-width:100%; flex:none; width:100%; }
  .hero-scroll-cta { align-items:center; }
  /* Disable scroll-snap container on mobile — let page scroll naturally */
  .timeline-wrapper { height:auto; overflow-y:visible; scroll-snap-type:none; }
  .timeline-item, .timeline-item.left, .timeline-item.right { flex-direction:column; gap:1.5rem; padding:3rem 1.5rem; min-height:auto; scroll-snap-align:none; }
  .timeline-item .tl-card, .timeline-item .tl-opposite { flex:none; max-width:100%; width:100%; }
  .timeline-item .tl-connector { flex-direction:row; justify-content:center; }
  /* Always show cards on mobile (no slide-in opacity:0 trap) */
  .timeline-item .tl-card,
  .timeline-item .tl-opposite,
  .timeline-item .tl-connector { opacity:1; transform:none; transition:none; }
  .tl-opp-me { min-height:220px; max-height:280px; }
  .form-row { grid-template-columns:1fr; }
  .cta-btn { align-self:stretch; }
}
@media (max-width:480px) {
  .tl-card-inner { padding:1.25rem; }
  .tl-opp-me { min-height:180px; }
}