/* ==========================================
   BUTTONS PREMIUM
========================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:14px 24px;

  border-radius:16px;

  font-weight:600;
  font-size:0.95rem;

  text-decoration:none;

  transition:0.3s ease;

  cursor:pointer;
}

.btn-primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7c3aed
    );

  box-shadow:
    0 14px 30px rgba(168,85,247,0.28);
}

.btn-primary:hover{
  transform:translateY(-3px);

  box-shadow:
    0 20px 40px rgba(168,85,247,0.38);
}

.btn-ghost{
  color:#ffffff;

  background:
    rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);
}

.btn-ghost:hover{
  transform:translateY(-3px);

  border-color:rgba(168,85,247,0.22);

  background:
    rgba(255,255,255,0.06);
}

/* =========================================================
   BASE CARDS
========================================================= */

.hero-card,
.feature-card,
.service-card,
.project-card,
.contact-form,
.about-card {
  background: linear-gradient(180deg, var(--surface-strong), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.project-card,
.service-card,
.feature-card,
.plan-card {
  position: relative;
  overflow: hidden;
}

.project-card::before,
.service-card::before,
.feature-card::before,
.plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
  opacity: 0;
  transition: 0.4s;
}

.project-card:hover::before,
.service-card:hover::before,
.feature-card:hover::before,
.plan-card:hover::before {
  opacity: 1;
}

/* =========================================================
   LEGAL MODAL
========================================================= */

.legal-modal{
  position:fixed;
  inset:0;
  z-index:1200;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  opacity:0;
  visibility:hidden;

  background:rgba(3,7,18,0.78);
  backdrop-filter:blur(16px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.legal-modal.active{
  opacity:1;
  visibility:visible;
}

.legal-modal-open{
  overflow:hidden;
}

.legal-modal-panel{
  position:relative;

  width:min(720px,100%);
  max-height:min(86vh,760px);
  overflow:auto;

  padding:34px;

  border:1px solid rgba(192,132,252,0.22);
  border-radius:28px;

  background:
    radial-gradient(
      circle at top left,
      rgba(168,85,247,0.18),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(15,23,42,0.98),
      rgba(7,10,18,0.98)
    );

  box-shadow:
    0 30px 90px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);

  transform:translateY(14px) scale(0.98);

  transition:
    transform 0.3s ease;
}

.legal-modal.active .legal-modal-panel{
  transform:translateY(0) scale(1);
}

.legal-modal-close{
  position:absolute;
  top:18px;
  right:18px;

  width:40px;
  height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:#e5e7eb;
  font-size:1.35rem;
  line-height:1;

  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;

  background:rgba(255,255,255,0.06);

  cursor:pointer;
  transition:0.25s ease;
}

.legal-modal-close:hover,
.legal-modal-close:focus-visible{
  color:#ffffff;
  border-color:rgba(192,132,252,0.38);
  background:rgba(168,85,247,0.18);
  outline:none;
}

.legal-modal-eyebrow{
  display:inline-flex;
  margin-bottom:14px;
  padding:7px 12px;

  color:#d8b4fe;
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;

  border:1px solid rgba(168,85,247,0.24);
  border-radius:999px;
  background:rgba(168,85,247,0.10);
}

.legal-modal h2{
  max-width:560px;
  margin:0 52px 14px 0;

  color:#ffffff;
  font-size:clamp(1.9rem,4vw,2.8rem);
  line-height:1;
}

.legal-modal-description{
  max-width:620px;
  margin-bottom:24px;

  color:#b8c3d8;
  font-size:1rem;
  line-height:1.75;
}

.legal-modal-list{
  display:grid;
  gap:12px;
}

.legal-modal-item{
  padding:18px;

  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;

  background:rgba(255,255,255,0.045);
}

.legal-modal-item h3{
  margin-bottom:8px;

  color:#f8fafc;
  font-size:1rem;
}

.legal-modal-item p{
  color:#aab5c5;
  line-height:1.65;
}

.legal-modal-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;

  margin-top:26px;
}

.legal-modal-link,
.legal-modal-ok{
  min-height:42px;
  padding:11px 16px;

  border-radius:999px;

  font:inherit;
  font-weight:800;
  text-decoration:none;

  cursor:pointer;
  transition:0.25s ease;
}

.legal-modal-link{
  color:#cbd5e1;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(255,255,255,0.045);
}

.legal-modal-ok{
  color:#ffffff;
  border:1px solid rgba(192,132,252,0.34);
  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7c3aed
    );

  box-shadow:
    0 14px 30px rgba(168,85,247,0.28);
}

.legal-modal-link:hover,
.legal-modal-link:focus-visible,
.legal-modal-ok:hover,
.legal-modal-ok:focus-visible{
  transform:translateY(-2px);
  outline:none;
}

.legal-modal-link:hover,
.legal-modal-link:focus-visible{
  color:#ffffff;
  border-color:rgba(192,132,252,0.36);
  background:rgba(168,85,247,0.12);
}

.legal-modal-ok:hover,
.legal-modal-ok:focus-visible{
  box-shadow:
    0 18px 40px rgba(168,85,247,0.36);
}