:root{
  --bg:#ffffff;
  --bg2:#f7faff;
  --text:#0b1530;
  --muted:#5e6b85;
  --line:rgba(11,21,48,.10);
  --brand:#4f8cff;
  --brand2:#2f6fff;
  --btn-bg:#ffffff;
  --btn-bg-hover:#f4f8ff;
  --shadow:0 20px 80px rgba(37,73,140,.10);
  --card-shadow:0 18px 40px rgba(37,73,140,.14);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 18%, rgba(79,140,255,.06), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow:hidden;
}

body.splash-lock{
  overflow:hidden;
}

.splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 36%, rgba(79,140,255,.08), transparent 42%),
    linear-gradient(180deg, #ffffff, #f7faff);
  opacity:1;
  transition:opacity 900ms ease, visibility 900ms ease;
}

.splash.hidden{
  visibility:hidden;
  pointer-events:none;
}

.splash.fade-out{
  opacity:0;
}

.splash-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:1;
}

.splash-inner{
  position:relative;
  z-index:2;
  width:min(980px, 82vw);
  display:grid;
  place-items:center;
}

.splash-logo{
  width:min(820px, 72vw);
  max-width:100%;
  height:auto;
  display:block;
  opacity:0;
  transform:scale(.94);
  animation:splashLogoIn 1400ms ease forwards;
  filter:
    drop-shadow(0 0 10px rgba(90,140,255,.10))
    drop-shadow(0 0 30px rgba(90,140,255,.08));
}

@keyframes splashLogoIn{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}

.card-app{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(79,140,255,.05), transparent 30%),
    linear-gradient(180deg, #ffffff, #f7faff);
  overflow:hidden;
}

.main-network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.34;
}

.card-stage{
  position:relative;
  z-index:2;
  width:min(1720px, 100%);
  display:grid;
  gap:24px;
  justify-items:center;
}

.card-wrap{
  position:relative;
  z-index:2;
  width:100%;
  min-height:0;
  display:flex;
  justify-content:center;
  align-items:center;
  animation:cardReveal 1200ms ease both;
  animation-delay:2.6s;
  opacity:0;
  transform:translateY(22px) scale(.985);
}

.business-card{
  display:block;
  width:auto;
  height:auto;
  max-width:min(94vw, 1700px);
  max-height:72vh;
  object-fit:contain;
  filter:
    drop-shadow(0 18px 42px rgba(37,73,140,.16))
    drop-shadow(0 0 10px rgba(255,255,255,.30));
}

.card-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  padding:14px;
  border:1px solid rgba(11,21,48,.08);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  box-shadow:0 22px 56px rgba(15,35,80,.10);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  animation:cardReveal 1200ms ease both;
  animation-delay:3s;
  opacity:0;
  transform:translateY(16px);
}

@keyframes cardReveal{
  to{opacity:1;transform:translateY(0) scale(1)}
}

.btn{
  min-height:60px;
  min-width:176px;
  padding:10px 18px 10px 14px;
  border-radius:16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.01em;
  border:1px solid rgba(11,21,48,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.96));
  color:var(--text);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  box-shadow:0 10px 24px rgba(20,45,90,.06);
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(47,111,255,.22);
  background:linear-gradient(180deg, #ffffff, #f5f8ff);
  box-shadow:0 14px 30px rgba(20,45,90,.10);
}

.btn-primary{
  background:linear-gradient(135deg, #123b8f, #2f6fff);
  color:#ffffff;
  border:1px solid rgba(18,59,143,.34);
  box-shadow:0 14px 30px rgba(18,59,143,.22);
}

.btn-primary:hover{
  background:linear-gradient(135deg, #0f3279, #2b66ea);
  border-color:rgba(18,59,143,.44);
  box-shadow:0 18px 34px rgba(18,59,143,.28);
}

.btn-website .icon{
  color:#123b8f;
}

.btn-linkedin .icon{
  color:#0A66C2;
}

.btn-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:rgba(10,102,194,.08);
  color:currentColor;
}

.btn-primary .btn-icon{
  background:rgba(255,255,255,.14);
}

.icon{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}

@media (max-width: 1100px){
  .business-card{max-width:96vw;max-height:64vh}
}

@media (max-width: 700px){
  .card-app{padding:14px}
  .business-card{max-width:98vw;max-height:58vh}
  .card-actions{width:100%;gap:12px;padding:12px}
  .btn{flex:1 1 calc(50% - 12px);min-width:145px}
  .splash-logo{width:min(92vw, 700px)}
}

@media (max-width: 520px){
  .btn{flex:1 1 100%}
  .business-card{max-height:52vh}
}

@media (prefers-reduced-motion: reduce){
  .splash,
  .splash-logo,
  .card-wrap,
  .card-actions{animation:none !important;transition:none !important}

  .card-wrap,
  .card-actions,
  .splash-logo{opacity:1 !important;transform:none !important}
}