/* ============= Base ============= */
:root{
  --bg:#0b0f19;
  --bg-2:#0e1424;
  --brand:#111827;
  --white:#fff;
  --muted:#94a3b8;
  --accent:#7c5cff;    /* purple */
  --accent2:#22c55e;   /* green */
  --glass: rgba(255,255,255,.08);
  --glass-stroke: rgba(255,255,255,.25);
}

*{box-sizing:border-box}
html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.bg-body{background:#f7f8fa}

/* Weight helper */
.fw-extrabold{font-weight:800}

/* ============= Navbar ============= */
.nav-absolute{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  background:transparent; transition:all .35s ease;
}
.nav-absolute .navbar-brand{color:#fff} */
.nav-absolute .nav-link{color:#e5e7eb; opacity:.9} */
.nav-absolute .nav-link:hover{opacity:1} */
.nav-absolute.scrolled{
  background:rgba(10,12,20,.6);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.btn-glass{
  background:var(--glass); border:1px solid var(--glass-stroke); color:#fff;
  backdrop-filter: blur(6px);
}
.btn-gradient{
  background:linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
  border:0; color:#fff;
}
.btn-gradient:hover{filter:brightness(.95)}

/* ============= Hero ============= */
.hero{
  position:relative; padding-top:8rem; padding-bottom:7rem; color:#fff; overflow:hidden;
  background: radial-gradient(1200px 600px at -10% -10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 450px at 110% 0%, rgba(34,197,94,.18), transparent 60%),
              linear-gradient(180deg, #0a0f19, #0c1322 70%, #0f162b 100%);
}
.hero .container{position:relative; z-index:3}

/* Animated gradient film */
.hero-gradient{
  position:absolute; inset:0; z-index:1;
  background: radial-gradient(1000px 500px at 20% 10%, rgba(124,92,255,.32), transparent 60%),
              radial-gradient(1100px 600px at 90% 0%, rgba(59,130,246,.25), transparent 60%);
  filter:saturate(1.2);
  animation: pulse 10s ease-in-out infinite alternate;
}
@keyframes pulse{0%{opacity:.9; transform:translateY(0)}100%{opacity:.75; transform:translateY(-12px)}}

/* Blobs */
.blob{
  position:absolute; filter: blur(40px); opacity:.5; z-index:1; border-radius:50%;
  mix-blend-mode: screen;
}
.blob-1{width:420px; height:420px; background:#7c5cff; left:-120px; top:-80px; animation: float1 14s ease-in-out infinite}
.blob-2{width:360px; height:360px; background:#22c55e; right:-120px; top:40px; animation: float2 16s ease-in-out infinite}
@keyframes float1{50%{transform:translate(30px, 20px) scale(1.05)}}
@keyframes float2{50%{transform:translate(-20px, -20px) scale(1.07)}}

/* glass card */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.25);
  border-radius:1.25rem; padding:1.5rem;
  backdrop-filter: blur(12px);
}
.glass-input{
  background:rgba(255,255,255,.12)!important; color:#fff!important; border:1px solid rgba(255,255,255,.25)!important;
}
.glass-input::placeholder{color:#cbd5e1}
.glass-input, .form-select.glass-input{height:52px}

/* chips */
.chip{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  font-weight:600; font-size:.9rem;
}

/* badge */
.badge-soft{
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:.5rem .75rem; border-radius:.6rem; backdrop-filter: blur(6px);
}

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); display:grid; place-items:center; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  transition:transform .25s ease, background .25s ease;
  z-index:3;
}
.scroll-cue:hover{transform:translateX(-50%) translateY(-3px); background:rgba(255,255,255,.22)}

/* tiny particles canvas placeholder (we draw via JS inside .particles) */
.particles{position:absolute; inset:0; z-index:0; pointer-events:none}

/* entrance animations */
.fade-in-up{
  opacity:0; transform:translateY(14px); animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise{to{opacity:1; transform:none}}

/* ============= About section ============= */
.section-contrast{
  position:relative; padding:5rem 0; background:#fff;
}
.about-card{
  background:#ffffff; border:1px solid #eef2f7; border-radius:1rem; padding:1.25rem; box-shadow:0 12px 35px rgba(2,6,23,.06);
}
.about-item{
  display:flex; gap:.6rem; align-items:flex-start; color:#4b5563; margin:.55rem 0;
}
.about-item i{color:#111827}

/* scroll reveal base */
.reveal{opacity:0; transform:translateY(18px)}

/* ============= Utilities ============= */
.shadow-xl{box-shadow:0 30px 90px rgba(0,0,0,.35)!important}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .hero{padding-top:7rem; padding-bottom:5rem}
}
/* ===== Elevated Navbar ===== */
/* ===== Elevated Navbar (fixed, pure white) ===== */
.nav-elevated {
  padding-top: 10px;
  background: white;           /* Always solid white */
  border-bottom: 1px solid #e5e9f2;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
}
/* Brand logo bigger + glowing slightly */
.brand-logo-lg {
  height: 48px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
  transition: transform .3s ease, filter .3s ease;
}
.navbar-brand:hover .brand-logo-lg {
  transform: scale(1.05);
  filter: drop-shadow(0 3px 12px rgba(124,92,255,.35));
}
.brand-name {
  color: #0f172a;
  font-size: 1.35rem;
  letter-spacing: 0.3px;
}

/* Animated underline + glow hover */
.nav-link {
  position: relative;
  color: #0f172a;
  font-weight: 600;
  transition: color .3s ease;
}
.nav-link:hover { color: #3b82f6; }
.nav-underline::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #7c5cff, #3b82f6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-underline:hover::after { transform: scaleX(1); }

/* Buttons on one line */
.btn-nowrap {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Navbar toggler (dark lines) */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.95)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile layout */
@media (max-width: 991.98px) {
  #mainNav.collapse.show {
    background: #fff;
    border-top: 1px solid #eef2f7;
    box-shadow: 0 14px 28px rgba(15,23,42,.1);
  }
  .nav-list {
    width: 100%;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.75rem 0 1.25rem;
    gap: 0.4rem;
  }
  .nav-list .nav-link {
    font-size: 1.15rem;
    line-height: 1.6;
    padding: .6rem 1rem !important;
  }
  .nav-list .btn, .nav-list form .btn {
    width: min(360px, 90%);
    font-size: 1rem;
  }
}

/* Add more gap between nav + hero */
.pt-nav-lg {
  padding-top: calc(90px + 1.5rem);
}
/* Add gap between Sign In and Create Account buttons */
.nav-list .nav-item + .nav-item {
  margin-left: 0.75rem; /* space between items */
}

/* === HERO: Selects readable (closed = white text, open = black items) === */
.glass-card .form-select.glass-input,
.glass-card .form-control.glass-input{
  background: rgba(15,23,42,.55) !important;   /* dark translucent */
  color: #fff !important;                       /* white when CLOSED */
  border: 1px solid rgba(255,255,255,.28) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Floating label text */
.glass-card .form-floating > label{ color: rgba(255,255,255,.75); }

/* DROPDOWN MENU (when opened) */
.glass-card .form-select.glass-input option{
  color: #0f172a;        /* black text in the LIST */
  background: #ffffff;   /* white list background */
}

/* hover & selected states in the list (most browsers) */
.glass-card .form-select.glass-input option:hover{
  background: #f1f5f9;   /* subtle hover */
}
.glass-card .form-select.glass-input option:checked{
  background: #e6f0ff;   /* selected item background */
  color: #0f172a;
}

/* ===== ABOUT (Pro) ===== */
.section-about-pro{
  position:relative; padding:5.75rem 0 5rem; background:#fff; overflow:hidden;
  border-top:1px solid #eef2f7;
}

/* soft gradient ribbon behind the section */
.about-ribbon{
  position:absolute; inset:auto 0 0 0; height:420px; z-index:0;
  background:
    radial-gradient(1200px 420px at 10% 10%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(900px 360px at 95% 0%, rgba(34,197,94,.10), transparent 60%);
  filter:saturate(1.1);
  pointer-events:none;
}

/* kicker */
.about-kicker{
  display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0;
  padding:.35rem .6rem; border-radius:.5rem;
}

/* stats */
.about-stats{ display:flex; gap:1.25rem; flex-wrap:wrap; z-index:1; position:relative }
.stat{ min-width:120px }
.stat .num{
  font-weight:800; font-size:2.1rem; line-height:1;
  background:linear-gradient(90deg,#111827,#3b82f6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat .label{ color:#64748b; margin-top:.25rem }

/* feature cards */
.feature-card.pro{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid #eef2f7; border-radius:16px; padding:1.05rem 1rem; height:100%;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.feature-card.pro:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 50px rgba(2,6,23,.1);
  border-color:#e5e9f2;
}
.feature-card.pro h5{ margin:.65rem 0 .25rem }
.feature-card.pro p{ color:#475569; margin:0 }
.icon-pill{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7c5cff22,#3b82f622); color:#3b82f6; border:1px solid #e6eafe;
}

/* callout */
.about-callout{
  background:#ffffff; border:1px solid #eef2f7; border-radius:14px; padding:1rem 1rem;
  box-shadow:0 24px 70px rgba(2,6,23,.06);
}
.about-list{ list-style:none; padding:0 }
.about-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#475569; margin:.45rem 0 }
.about-list i{ color:#16a34a; margin-top:.15rem }

/* How it works strip */
.how-strip{
  margin-top:2.75rem; display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; padding:12px; border:1px solid #eef2f7; border-radius:16px; background:#fff;
  box-shadow:0 20px 60px rgba(2,6,23,.06);
}
.how-item{
  background:linear-gradient(180deg,#ffffff,#f9fbff); border:1px solid #eef2f7;
  border-radius:12px; padding:14px; transition:transform .2s ease, box-shadow .2s ease;
}
.how-item:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(2,6,23,.08) }
.how-item .step{
  display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.08em;
  color:#3b82f6; background:#eef2ff; border:1px solid #e6eafe; border-radius:999px;
  padding:.1rem .45rem; margin-bottom:.4rem;
}
.how-item h6{ margin:0 0 .15rem; font-weight:700 }
.how-item p{ margin:0; color:#64748b }

/* responsive */
@media (max-width:1199.98px){
  .stat .num{ font-size:1.9rem }
}
@media (max-width:991.98px){
  .section-about-pro{ padding:4.25rem 0 3.5rem }
  .how-strip{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:575.98px){
  .how-strip{ grid-template-columns:1fr }
  .stat .num{ font-size:1.7rem }
}

/* ===== Repository Preview ===== */
.section-browse{
  position:relative; padding:5rem 0; background:#fff;
  border-top:1px solid #eef2f7;
}
.section-browse::before{
  content:""; position:absolute; inset:0 0 auto 0; height:320px; pointer-events:none;
  background:
    radial-gradient(1000px 420px at 0% 0%, rgba(124,92,255,.07), transparent 60%),
    radial-gradient(800px 340px at 100% 0%, rgba(34,197,94,.07), transparent 60%);
}

/* filter pills */
.pill-group{ display:flex; gap:.5rem; flex-wrap:wrap }
.pill{
  border:1px solid #e5e9f2; background:#fff; color:#0f172a; padding:.4rem .7rem;
  border-radius:999px; font-weight:600; font-size:.9rem;
  transition:all .2s ease;
}
.pill:hover{ border-color:#cbd5e1; transform:translateY(-1px) }
.pill.active{ background:#eef2ff; border-color:#dbe4ff; color:#3b82f6 }

/* cards */
.card-browse{
  background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid #eef2f7;
  border-radius:16px; padding:1rem; height:100%;
  box-shadow:0 14px 36px rgba(2,6,23,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card-browse:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(2,6,23,.1); border-color:#e5e9f2 }
.card-browse .meta{ color:#64748b; font-size:.92rem }
.card-browse .excerpt{ color:#475569; margin:.35rem 0 .6rem }
.card-browse .tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.75rem }
.card-browse .tag{
  background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0; padding:.22rem .5rem;
  border-radius:.5rem; font-weight:600; font-size:.8rem;
}
.card-browse .actions{ display:flex; gap:.4rem }

/* tiny top row inside cards */
.card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem }
.badge-soft-pill{
  background:#eef2ff; color:#3b82f6; border:1px solid #e6eafe; padding:.15rem .5rem; border-radius:999px;
  font-weight:700; font-size:.75rem;
}
.card-top .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px #22c55e22 }

/* hide / show for filter */
.repo-card{ display:block }
.repo-card.hidden{ display:none }

/* responsive tweaks */
@media (max-width: 991.98px){
  .section-browse{ padding:4rem 0 }
}
/* Modal tag chips to match cards */
#repoModalTags .tag{
  background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0;
  padding:.22rem .5rem; border-radius:.5rem; font-weight:600; font-size:.8rem;
}
/* ===== FUNDING SECTION ===== */
.section-funding {
  position: relative;
  padding: 6rem 0 5rem;
  background: #fff;
  overflow: hidden;
  border-top: 1px solid #eef2f7;
}
.funding-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 400px at -10% 10%, rgba(124,92,255,.08), transparent 60%),
    radial-gradient(900px 400px at 110% 0%, rgba(34,197,94,.08), transparent 60%);
  filter: saturate(1.2);
  z-index: 0;
}
.section-funding .container { position: relative; z-index: 2; }

/* list */
.funding-list { list-style: none; padding: 0; }
.funding-list li {
  display: flex; align-items: flex-start; gap: .5rem;
  color: #475569; margin: .4rem 0;
}
.funding-list i { color: #16a34a; margin-top: .2rem; }

/* cards area */
.funding-cards {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.fund-card {
  background: linear-gradient(180deg,#ffffff,#f9fbff);
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 1.4rem 1.25rem;
  box-shadow: 0 20px 60px rgba(2,6,23,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fund-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 90px rgba(2,6,23,.09);
  border-color: #e5e9f2;
}
.fund-card .icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg,#7c5cff22,#3b82f622);
  color: #3b82f6;
  border: 1px solid #e6eafe;
  font-size: 1.5rem;
}
.fund-card h5 { margin: .75rem 0 .3rem; font-weight: 700; }
.fund-card p { color: #475569; margin: 0 0 .6rem; }
.fund-card .link {
  color: #3b82f6; font-weight: 600; text-decoration: none;
  transition: color .25s ease;
}
.fund-card .link:hover { color: #7c5cff; }

/* stats */
.funding-stats {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.funding-stats .stat .num {
  font-weight: 800; font-size: 2rem; line-height: 1;
  background: linear-gradient(90deg,#111827,#3b82f6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.funding-stats .stat .label { color: #64748b; }

/* responsive */
@media (max-width: 991.98px) {
  .section-funding { padding: 4rem 0; }
  .funding-cards { flex-direction: row; flex-wrap: wrap; }
  .fund-card { flex: 1 1 calc(50% - .75rem); }
}
@media (max-width: 575.98px) {
  .fund-card { flex: 1 1 100%; }
}
/* ===== Funding & Partnerships ===== */
.section-funding{
  position:relative; padding:5rem 0; background:#fff; border-top:1px solid #eef2f7; overflow:hidden;
}
.section-funding::before{
  content:""; position:absolute; inset:0 0 auto 0; height:300px; pointer-events:none;
  background:
    radial-gradient(1100px 420px at 0% 0%, rgba(124,92,255,.07), transparent 60%),
    radial-gradient(900px 360px at 100% 0%, rgba(34,197,94,.07), transparent 60%);
}

/* cards */
.fund-card{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid #eef2f7; border-radius:16px; padding:1.1rem 1rem; height:100%;
  box-shadow:0 14px 36px rgba(2,6,23,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fund-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(2,6,23,.1); border-color:#e5e9f2 }
.fund-card h5{ margin:.55rem 0 .35rem }
.fund-card p{ color:#475569; margin:0 0 .6rem }
.fund-icon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7c5cff22,#3b82f622); color:#3b82f6; border:1px solid #e6eafe;
}
.mini-list{ list-style:none; padding:0; margin:0 0 .5rem; }
.mini-list li{ display:flex; gap:.5rem; align-items:flex-start; color:#475569; margin:.25rem 0 }
.mini-list i{ color:#16a34a; margin-top:.15rem }
.fund-card .link{ font-weight:700; text-decoration:none }
.fund-card .link:hover{ text-decoration:underline }

/* flow */
.fund-flow{
  margin:1.75rem 0 2rem; display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; padding:12px; border:1px solid #eef2f7; border-radius:16px; background:#fff;
  box-shadow:0 20px 60px rgba(2,6,23,.06);
}
.flow-item{
  background:linear-gradient(180deg,#ffffff,#f9fbff); border:1px solid #eef2f7;
  border-radius:12px; padding:14px; transition:transform .2s ease, box-shadow .2s ease;
}
.flow-item:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(2,6,23,.08) }
.flow-step{
  display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.08em;
  color:#3b82f6; background:#eef2ff; border:1px solid #e6eafe; border-radius:999px;
  padding:.1rem .45rem; margin-bottom:.35rem;
}
.flow-item h6{ margin:0 0 .15rem; font-weight:700 }
.flow-item p{ margin:0; color:#64748b }

/* FAQ styling tweaks */
.faq-intro .faq-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7c5cff22,#3b82f622); color:#3b82f6; border:1px solid #e6eafe; margin-bottom:.65rem;
}
.accordion-button{ font-weight:600 }
.accordion-button:not(.collapsed){ background:#eef2ff; color:#0f172a }
.accordion-item{ border:1px solid #eef2f7; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(2,6,23,.05); margin-bottom:.5rem }

/* CTA band */
.fund-cta{
  margin-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1rem; border:1px solid #eef2f7; border-radius:16px; background:#fff;
  box-shadow:0 24px 70px rgba(2,6,23,.06);
}
.fund-cta .sub{ color:#64748b }

/* small reveal delays */
.delay-1{ animation-delay:.08s!important }
.delay-2{ animation-delay:.16s!important }

/* responsive */
@media (max-width:991.98px){
  .fund-flow{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:575.98px){
  .fund-flow{ grid-template-columns:1fr }
  .fund-cta{ flex-direction:column; align-items:flex-start }
}

/* ===== Contact ===== */
.section-contact{
  position:relative; padding:5rem 0; background:#fff; border-top:1px solid #eef2f7;
}
.contact-kicker{
  display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0;
  padding:.35rem .6rem; border-radius:.5rem;
}

/* Inline info cards */
.contact-card{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid #eef2f7; border-radius:14px; padding:14px 14px;
  box-shadow:0 12px 40px rgba(2,6,23,.06); margin-bottom:.75rem;
}
.icon-pill-xl{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7c5cff22,#3b82f622); color:#3b82f6; border:1px solid #e6eafe;
  flex:0 0 auto; font-size:1.15rem;
}
.contact-card .label{ font-weight:700; color:#0f172a; line-height:1.1 }
.contact-card .value{ color:#475569; text-decoration:none }
.contact-card .value:hover{ text-decoration:underline }

.social-row{ display:flex; gap:.5rem; margin-top:1rem }
.social-dot{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  background:#fff; border:1px solid #e5e9f2; box-shadow:0 8px 20px rgba(2,6,23,.06); color:#0f172a;
}
.social-dot:hover{ transform:translateY(-2px); color:#3b82f6 }

/* Form */
.form-glass{
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.65));
  border:1px solid #eef2f7; border-radius:16px; padding:1rem;
  box-shadow:0 18px 60px rgba(2,6,23,.08); backdrop-filter: blur(8px);
}
.form-glass .form-label{ font-weight:600; color:#0f172a; font-size:.9rem }
.form-glass .glass-input{
  background:#ffffff; border:1px solid #e5e9f2; height:48px;
}
.form-glass textarea.glass-input{ height:auto; min-height:140px }
.form-glass .glass-input:focus{
  border-color:#c7d2fe; box-shadow:0 0 0 .2rem rgba(59,130,246,.12);
}

/* Right panel */
.panel-soft{
  position:relative; border:1px solid #eef2f7; border-radius:16px; padding:16px;
  background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 18px 60px rgba(2,6,23,.06);
  min-height:170px; overflow:hidden;
}
.panel-soft .pin{
  position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#3b82f6,#7c5cff);
  box-shadow:0 12px 30px rgba(59,130,246,.35);
}
.panel-soft .tiny-grid{
  position:absolute; inset:0; background-image:radial-gradient(rgba(2,6,23,.06) 1px, transparent 1px);
  background-size:22px 22px; mask: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,0));
  pointer-events:none;
}

/* Responsive */
@media (max-width: 991.98px){
  .section-contact{ padding:4rem 0 }
}

/* contact */