/* Base */
:root{
  --bg: #0b1020;
  --white: #fff;
  --muted: rgba(255,255,255,.85);
  --muted-2: rgba(255,255,255,.8);
  --shadow: 0 10px 40px rgba(0,0,0,.25);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--white);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
.container{
  width:100%;
  max-width: 64rem; /* ~max-w-4xl */
  margin: 0 auto;
  padding: 0 1.5rem;
}
.narrow{ max-width: 48rem; }
.center{ text-align:center }
.mb-32{ margin-bottom:2rem }

/* Hero */
.hero{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding: 0 1.5rem;
}
.title{
  font-size: clamp(2.6rem, 8vw, 4.5rem); /* text-5xl md:text-7xl */
  font-weight: 800;
  margin: 0 0 .75rem;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.subtitle{
  font-size: clamp(1.1rem, 3vw, 1.5rem); /* text-xl md:text-2xl */
  margin: 0 0 .25rem;
  color: var(--muted);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.subtitle-2{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0 0 2rem;
  color: var(--muted-2);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.chevron{
  position:absolute;
  bottom: 2rem;
  animation: bounce 1.5s infinite;
  opacity:.95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(6px) }
}

/* Animated gradient background (as in screenshot) */
.gradient-animated{
  background: radial-gradient(1000px 700px at 25% -10%, rgba(135, 206, 250, 0.40), transparent 60%),
              radial-gradient(900px 600px at 110% 20%, rgba(255, 102, 244, 0.35), transparent 60%),
              linear-gradient(135deg, #5b8df7, #b059ff 35%, #ff5fcb 70%);
  background-size: 160% 160%;
  animation: gradientShift 12s ease-in-out infinite alternate;
}
@keyframes gradientShift{
  0%{ background-position: 0% 50%, 100% 50%, 0% 50% }
  100%{ background-position: 100% 50%, 0% 50%, 100% 50% }
}

/* Sections */
.section{ padding: 5rem 1.5rem }
.muted-bg{ background: rgba(255,255,255,.08) }
.h2{
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 1rem;
  color:#fcfbf8;
}
.lead{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .9rem 1.5rem;
  border-radius: .6rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px) }
.with-icon .icon{ display:block }

.gradient-primary{
  background-image: linear-gradient(90deg, #7c3aed, #2563eb);
  color:#fff;
}
.gradient-primary:hover{ opacity:.95; box-shadow:0 12px 34px rgba(124,58,237,.35) }

/* Footer */
.footer{
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}

/* Simple fade-in */
.fade-in{ opacity:0; transform: translateY(10px); transition: all .6s ease }
.fade-in.in{ opacity:1; transform:none }
.fade-in-delay{ opacity:0; transform: translateY(10px); transition: all .6s ease .2s }
.fade-in-delay.in{ opacity:1; transform:none }

:root{--accent:#ff5ea6;--accent-2:#ffd34d}
  html,body{height:100%;}
  body{margin:0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#061124; background:#000; overflow:hidden;}

  header{position:fixed; inset:0 0 auto 0; z-index:90; pointer-events:auto}
  .topbar{display:flex; justify-content:center; align-items:center; padding:18px 12px; background:transparent}
  .topbar img{height:93px; display:block;}

  .bg-anim{position:relative; width:100%; height:100vh; overflow:hidden}
  .bg-anim::before{content:''; position:absolute; inset:0; z-index:0; background-image: url('bg-img.png'); background-size: cover; background-position: center center; will-change: transform, filter; transform-origin: center center; filter: saturate(1.05) contrast(1.06) brightness(1.01); animation: bg-zoom-pan 12s ease-in-out infinite;}

  .flow{position:absolute; inset:-30% -30% -30% -30%; z-index:1; pointer-events:none; mix-blend-mode:overlay; filter:blur(80px); opacity:0.9}
  .flow.f1{background: radial-gradient(circle at 18% 30%, rgba(255,160,200,0.95) 0%, rgba(255,160,200,0.6) 18%, rgba(255,160,200,0.3) 38%, transparent 60%); animation: move1 10s ease-in-out infinite, fade1 6s ease-in-out infinite}
  .flow.f2{background: radial-gradient(circle at 78% 20%, rgba(255,235,160,0.95) 0%, rgba(255,235,160,0.72) 18%, rgba(255,235,160,0.32) 38%, transparent 60%); animation: move2 12s ease-in-out infinite, fade2 7s ease-in-out infinite}
  .flow.f3{background: radial-gradient(circle at 8% 8%, rgba(180,220,255,0.95) 0%, rgba(180,220,255,0.6) 18%, rgba(180,220,255,0.25) 38%, transparent 60%); animation: move3 14s ease-in-out infinite, fade3 8s ease-in-out infinite}

  @keyframes move1{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-9%,5%) scale(1.07)}50%{transform:translate(6%,-4%) scale(1.03)}75%{transform:translate(-5%,-5%) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
  @keyframes move2{0%{transform:translate(0,0) scale(1)}25%{transform:translate(9%,-6%) scale(1.06)}50%{transform:translate(-5%,3%) scale(1.03)}75%{transform:translate(5%,5%) scale(1.04)}100%{transform:translate(0,0) scale(1)}}
  @keyframes move3{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-8%,-4%) scale(1.06)}50%{transform:translate(4%,6%) scale(1.03)}75%{transform:translate(-4%,4%) scale(1.04)}100%{transform:translate(0,0) scale(1)}}

  @keyframes fade1{0%{opacity:0.75}50%{opacity:0.95}100%{opacity:0.75}} 
  @keyframes fade2{0%{opacity:0.65}50%{opacity:0.95}100%{opacity:0.65}} 
  @keyframes fade3{0%{opacity:0.7}50%{opacity:0.98}100%{opacity:0.7}}

  @keyframes bg-zoom-pan{0%{transform:scale(1) translate(0,0) rotate(0deg)}20%{transform:scale(1.03) translate(-1.2%,-0.6%) rotate(.2deg)}40%{transform:scale(1.02) translate(1%,-1.0%) rotate(-.28deg)}60%{transform:scale(1.04) translate(-0.4%,0.9%) rotate(.34deg)}80%{transform:scale(1.02) translate(0.9%,-0.3%) rotate(-.18deg)}100%{transform:scale(1) translate(0,0) rotate(0deg)}}

  .hero-wrap{position:relative; z-index:6; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:0}
  .hero-card{position:absolute; inset:0; z-index:6; background: rgba(255,255,255,0.04); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); border:1px solid rgba(255,255,255,0.06); border-radius:0; display:flex; align-items:center; justify-content:center; padding:80px 36px; box-sizing:border-box;}

  .hero-inner{max-width:980px; width:100%; text-align:center; margin:0 auto; font-family: , sans-serif; font-style: normal;}

  h1.display-4{font-weight:800; color:#fff; font-size: clamp(2.8rem, 2.5vw, 4.8rem); line-height:1.02; text-shadow: 0 10px 48px rgb(0 0 0 / 25%); margin:0 0 0.4rem 0;}

  p.lead{margin: 43px auto 24px; font-weight: 400; line-height: 1.33; font-size: 1.125rem; color:#fff; text-shadow: 0 10px 48px rgb(0 0 0 / 10%); opacity:0.98;}

  .btn-wrapper{margin-top:56px}
  .btn-mail{display:inline-block; padding:16px 36px; font-weight:900; border-radius:12px; border:1px solid transparent; box-sizing:border-box; color:#fff; background:#000; transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease; box-shadow: 0 10px 28px rgba(0,0,0,0.25); font-size:1.05rem;}
  .btn-mail:hover{color:#000; background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); box-shadow: 0 10px 28px rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.12);}

  @media (max-width:768px){.hero-card{padding:40px 18px} h1.display-4{font-size: clamp(1.8rem, 11vw, 3.2rem)} .topbar img{height:72px} .btn-wrapper{margin-top:28px}}

  
    /* Enforce non-italic for all textual elements */
    body, body * {
      font-style: normal !important;
    }