:root{
  --bg:#120B22;
  --panel:#1E1433;
  --panel-2:#251A3D;
  --magenta:#FF3E9E;
  --amber:#FFB020;
  --text:#F5F3FA;
  --muted:#A79BC4;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  margin:0;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Sora',sans-serif;}
a{text-decoration:none;color:inherit;}

/* ---------- FLOATING NAV ---------- */
.nav-wrap{
  position:fixed;
  top:1.25rem;left:0;right:0;
  display:flex;justify-content:center;
  z-index:1000;
}
.pill-nav{
  background:rgba(30,20,51,.7);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
  padding:.55rem .6rem .55rem 1.3rem;
  display:flex;align-items:center;gap:1.75rem;
}
.logo-lockup{display:flex;align-items:center;gap:.6rem;}
.pill-nav .brand{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.2px;}
.domain-tag{color:var(--muted);font-weight:500;font-size:.82em;}
.logo-lockup svg circle{animation:live-pulse 2.4s ease-in-out infinite;transform-origin:58px 20px;}
@keyframes live-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
@media (prefers-reduced-motion: reduce){
  .logo-lockup svg circle{animation:none;}
}
.pill-nav .links{display:flex;gap:1.4rem;}
.pill-nav .links a{
  font-size:.82rem;color:var(--muted);font-weight:500;
  transition:color .2s;
}
.pill-nav .links a:hover{color:#fff;}
.pill-nav .cta{
  background:linear-gradient(135deg,var(--magenta),var(--amber));
  color:#160c28;
  font-weight:600;
  font-size:.8rem;
  padding:.55rem 1.2rem;
  border-radius:100px;
}
@media (max-width:767px){
  .pill-nav .links{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:8rem 0 5rem;
  text-align:center;
  overflow:hidden;
}
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  z-index:0;
}
.glow-1{width:480px;height:480px;background:var(--magenta);top:-120px;left:-100px;}
.glow-2{width:420px;height:420px;background:var(--amber);bottom:-140px;right:-80px;}
.hero-inner{position:relative;z-index:2;}
.hero-kicker{
  display:inline-block;
  font-size:.8rem;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  padding:.4rem 1rem;
  border-radius:100px;
  margin-bottom:1.75rem;
}
.hero h1{
  font-size:clamp(2.6rem,6.5vw,4.8rem);
  font-weight:800;
  line-height:1.05;
  max-width:800px;
  margin:0 auto;
  background:linear-gradient(135deg,#fff 40%, var(--magenta) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  color:var(--muted);
  max-width:480px;
  margin:1.75rem auto 2.5rem;
  font-size:1.02rem;
}
.btn-glow{
  background:linear-gradient(135deg,var(--magenta),var(--amber));
  color:#160c28;
  font-weight:700;
  padding:.85rem 1.9rem;
  border-radius:100px;
  border:none;
  display:inline-block;
}
.btn-outline-soft{
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:.85rem 1.9rem;
  border-radius:100px;
  display:inline-block;
}

.floating-card{
  position:relative;
  max-width:310px;
  margin:3.5rem auto 0;
  transform:rotate(-3deg);
  border-radius:22px;
  overflow:hidden;
  background:#0A0A0E;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 60px -15px rgba(255,62,158,.35), 0 0 40px rgba(0,0,0,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.floating-card:hover{
  transform:rotate(-1deg) scale(1.02);
  box-shadow:0 35px 70px -15px rgba(255,62,158,.45), 0 0 50px rgba(0,0,0,.7);
}
.floating-card img{width:100%;height:auto;display:block;}
.floating-card .live-badge{
  position:absolute;top:.85rem;left:.85rem;
  background:rgba(18,11,34,.8);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  padding:.32rem .75rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.4px;
  color:#fff;
  display:flex;align-items:center;gap:.4rem;
  z-index:2;
}
.live-dot{width:7px;height:7px;background:var(--magenta);border-radius:50%;}


/* ---------- BENTO ---------- */
.section{padding:6rem 0;}
.section-head{max-width:560px;margin:0 auto 3rem;text-align:center;}
.section-head .eyebrow{color:var(--amber);font-size:.8rem;font-weight:600;margin-bottom:.6rem;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:700;}

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  gap:1.25rem;
}
.tile{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  padding:1.5rem;
  position:relative;
  overflow:hidden;
}
.tile-reel{
  grid-column:span 2;
  grid-row:span 2;
  padding:0;
}
.tile-reel img{width:100%;height:100%;object-fit:cover;display:block;}
.tile-reel .tag{
  position:absolute;bottom:1.25rem;left:1.25rem;z-index:2;
}
.tile-reel .tag h3{font-size:1.3rem;margin:0 0 .25rem;}
.tile-reel .tag p{margin:0;color:var(--muted);font-size:.85rem;}
.tile-reel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%, rgba(18,11,34,.92) 100%);
}
.tile-stat{
  grid-column:span 1;
  grid-row:span 1;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--panel-2);
}
.tile-stat .num{font-family:'Sora',sans-serif;font-size:2.1rem;font-weight:800;color:var(--amber);}
.tile-stat .label{color:var(--muted);font-size:.8rem;margin-top:.25rem;}
.tile-quote{
  grid-column:span 2;
  grid-row:span 1;
  display:flex;flex-direction:column;justify-content:center;
}
.tile-quote p{font-size:1.05rem;font-style:italic;margin-bottom:.75rem;}
.tile-quote span{color:var(--muted);font-size:.82rem;}
.tile-small{
  grid-column:span 1;
  grid-row:span 1;
}
.tile-small img{width:100%;height:100%;object-fit:cover;border-radius:14px;position:absolute;inset:0;}
.tile-small .tag{position:relative;z-index:2;align-self:flex-start;background:rgba(18,11,34,.7);backdrop-filter:blur(6px);font-size:.7rem;padding:.3rem .6rem;border-radius:100px;}
.tile-small::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%, rgba(18,11,34,.85) 100%);border-radius:20px;}
.tile-cta{
  grid-column:span 2;
  grid-row:span 1;
  background:linear-gradient(135deg, rgba(255,62,158,.18), rgba(255,176,32,.18));
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
}
.tile-cta h3{font-size:1.15rem;margin:0;}
.tile-cta a{
  background:#fff;color:var(--bg);
  font-weight:700;font-size:.82rem;
  padding:.55rem 1.1rem;border-radius:100px;
  white-space:nowrap;
}

@media (max-width:991px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .tile-reel{grid-column:span 2;grid-row:span 2;}
  .tile-quote,.tile-cta{grid-column:span 2;}
}
@media (max-width:575px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;}
  .tile-reel{grid-column:span 1;height:260px;}
  .tile-quote,.tile-cta,.tile-stat,.tile-small{grid-column:span 1;height:auto;min-height:140px;}
}

/* ---------- PROCESS ---------- */
.process-strip{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  margin-top:3rem;
  position:relative;
}
.process-strip::before{
  content:"";
  position:absolute;
  top:34px;left:8%;right:8%;
  height:1px;
  background:linear-gradient(90deg,var(--magenta),var(--amber));
  opacity:.4;
}
.process-node{flex:1;text-align:center;position:relative;z-index:2;}
.process-circle{
  width:68px;height:68px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:700;
  margin:0 auto 1.25rem;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(135deg,var(--magenta),var(--amber)) border-box;
  border:2px solid transparent;
}
.process-node h3{font-size:1.1rem;margin-bottom:.5rem;}
.process-node p{color:var(--muted);font-size:.88rem;max-width:220px;margin:0 auto;}
@media (max-width:767px){
  .process-strip{flex-direction:column;}
  .process-strip::before{display:none;}
}

/* ---------- CONTACT SECTION ---------- */
.contact-section{
  padding:5rem 0 6rem;
  position:relative;
  overflow:hidden;
}
.contact-section::before{
  content:"";
  position:absolute;
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(255,62,158,.15), transparent 70%);
  top:20%;left:-100px;
  border-radius:50%;
  pointer-events:none;
}
.contact-section::after{
  content:"";
  position:absolute;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(255,176,32,.12), transparent 70%);
  bottom:10%;right:-100px;
  border-radius:50%;
  pointer-events:none;
}
.email-highlight{
  color:var(--amber);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s;
}
.email-highlight:hover{color:var(--magenta);}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:2.5rem;
  align-items:start;
  position:relative;
  z-index:2;
}

/* Info Column */
.info-card{
  background:rgba(30,20,51,.65);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:2.5rem 2rem;
  height:100%;
}
.info-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--amber);
  background:rgba(255,176,32,.1);
  border:1px solid rgba(255,176,32,.25);
  padding:.3rem .75rem;
  border-radius:100px;
  margin-bottom:1.25rem;
}
.info-card h3{
  font-size:1.65rem;
  font-weight:700;
  margin-bottom:.75rem;
}
.info-card p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--muted);
  margin-bottom:2rem;
}
.info-list{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.info-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.9rem 1.1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  transition:background .2s, border-color .2s, transform .2s;
  color:inherit;
}
.info-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,62,158,.3);
  transform:translateY(-2px);
}
.info-icon{
  width:38px;height:38px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,62,158,.2), rgba(255,176,32,.2));
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  color:var(--text);
  flex-shrink:0;
}
.info-label{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
}
.info-val{
  display:block;
  font-weight:600;
  font-size:.95rem;
  color:#fff;
}
.capabilities-box{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.cap-tag{
  font-size:.75rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:.35rem .75rem;
  border-radius:100px;
  color:var(--muted);
}

/* Contact Form Column */
.contact-card{
  background:rgba(30,20,51,.75);
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  padding:2.5rem 2.25rem;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  position:relative;
}
.contact-card .form-label{
  font-size:.82rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.4rem;
}
.contact-card .req{color:var(--magenta);}
.contact-card .form-control,
.contact-card .form-select,
.contact-card textarea,
.custom-input{
  background:rgba(18,11,34,.85) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:14px !important;
  color:#fff !important;
  padding:.85rem 1.15rem !important;
  font-size:.95rem !important;
  transition:border-color .2s, box-shadow .2s, background .2s !important;
}
.contact-card .form-control:focus,
.contact-card .form-select:focus,
.contact-card textarea:focus,
.custom-input:focus{
  background:rgba(26,16,48,.98) !important;
  border-color:var(--magenta) !important;
  box-shadow:0 0 0 3px rgba(255,62,158,.25) !important;
  color:#fff !important;
  outline:none !important;
}
.contact-card .form-control::placeholder,
.contact-card textarea::placeholder,
.custom-input::placeholder{
  color:rgba(212,201,237,.55) !important;
  font-size:.9rem;
}
.contact-card .form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFB020' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important;
  background-position:right 1.1rem center !important;
  background-size:16px 12px !important;
}
.contact-card .form-select option,
select.custom-input option{
  background:#1E1433 !important;
  color:#fff !important;
}

.secure-badge{
  font-size:.75rem;
  color:var(--muted);
  display:inline-block;
}

/* Alerts */
.alert-success-custom{
  background:rgba(40,167,69,.15);
  border:1px solid rgba(40,167,69,.35);
  color:#75f58c;
  border-radius:12px;
  padding:1rem 1.25rem;
  display:flex;
  gap:.75rem;
  font-size:.88rem;
}
.alert-danger-custom{
  background:rgba(220,53,69,.15);
  border:1px solid rgba(220,53,69,.35);
  color:#ff8a95;
  border-radius:12px;
  padding:1rem 1.25rem;
  display:flex;
  gap:.75rem;
  font-size:.88rem;
}
.alert-icon{
  width:24px;height:24px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:currentColor;
  color:#120B22;
  font-weight:800;
  font-size:.8rem;
  flex-shrink:0;
}

/* Form Success State */
.form-success-state{
  text-align:center;
  padding:3rem 1.5rem;
}
.success-icon-wrap{
  width:72px;height:72px;
  border-radius:50%;
  margin:0 auto 1.5rem;
  background:linear-gradient(135deg, var(--magenta), var(--amber));
  display:flex;align-items:center;justify-content:center;
  color:#120B22;
  box-shadow:0 10px 30px rgba(255,62,158,.35);
}
.form-success-state h3{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:.75rem;
}
.form-success-state p{
  color:var(--muted);
  font-size:.95rem;
  max-width:420px;
  margin:0 auto 1.5rem;
  line-height:1.6;
}

@media (max-width:991px){
  .contact-grid{grid-template-columns:1fr;gap:2rem;}
  .contact-card{padding:2rem 1.5rem;}
}


/* ---------- FOOTER ---------- */
footer{
  padding:3rem 0;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.85rem;
}
.footer-logo{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-bottom:.5rem;}
.footer-logo .brand{font-family:'Sora',sans-serif;font-weight:700;font-size:1.1rem;color:#fff;}
footer .social{display:flex;justify-content:center;gap:1.25rem;margin:1.25rem 0;}
footer .social a{color:var(--muted);font-size:.85rem;}
footer .social a:hover{color:var(--amber);}