/* Palette: primary #1b1d1a, light #e6f0f1, accent #fe3f1a */
:root{
  --bg:#0f1110;
  --primary:#1b1d1a;
  --light:#e6f0f1;
  --accent:#fe3f1a;
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.06);
}
html,body,#app{
  height:100%;
}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(254,63,26,0.06), transparent 6%),
              radial-gradient(900px 400px at 90% 90%, rgba(230,240,241,0.03), transparent 6%),
              var(--bg);
  color:var(--light);
  overflow-y:auto;
  overflow-x:hidden;
}

/* Custom cursor */
.cursor {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  background: var(--light);
  opacity:0.9;
  z-index:9999;
  transition: width .18s ease, height .18s ease, background .18s ease, transform .08s ease;
  box-shadow: 0 0 20px rgba(254,63,26,0.18);
}

/* Container (centered card) */
.container-card{
  width:420px;
  max-width:92%;
  margin:auto;
  margin-top:3vh;
  border-radius:20px;

  backdrop-filter: blur(8px) saturate(120%);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  );

  border:1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.02) inset;

  padding:36px;
  display:block;

  /* IMPORTANT FOR MOBILE */
  height:auto;
  overflow:visible;
}

/* Form elements */
.form-title{
  font-size:26px;
  font-weight:700;
  letter-spacing:0.3px;
}
.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgb(34, 34, 34);
  color:var(--light);
  outline:none;
}
.btn{
  padding:12px 16px;
  border-radius:12px;
  background: linear-gradient(90deg,var(--accent), #ff7b4f);
  color:white;
  border:none;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 20px rgba(254,63,26,0.18);
}

/* Header and footer */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 40px;
}
.logo-row img{ height:30px; }
.menu a{ margin-left:18px; color:var(--light); text-decoration:none; font-weight:600; }

/* Glass service cards */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.service-card{
  padding:18px;
  border-radius:16px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  transform-style:preserve-3d;
  transition: transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .3s;
}
.service-card:hover{
  transform: translateY(-12px) rotateX(6deg) rotateY(6deg) scale(1.02);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

/* Responsive */
@media (max-width:900px){
  .container-card{
    height:auto;
    max-height:none;
  }
}

/* Social Media Icons Styling */
.social-icons, .social-header {
  display: flex;
  gap: 14px;
  align-items: center;
}
.social-icons a, .social-header a, .social-icon {
  color: var(--light);
  font-size: 18px;
  transition: color 0.2s ease, transform 0.18s ease;
  text-decoration: none;
}
.social-icons a:hover, .social-header a:hover {
  color: var(--accent);
  transform: translateY(-3px) scale(1.08);
}

/* ===== ADMIN LOGIN WIDTH FIX (FINAL) ===== */
.admin-login .left-panel{
  align-items: center; /* stop full-width stretch */
}

.admin-login .admin-form{
  width: 100%;
  max-width: 360px;   /* THIS controls input width */
}

/* Admin login input width control (ACTUAL FIX) */
.admin-login .input{
  max-width: 360px;
}


/* ================= LANDING PAGE CARDS ================= */

.lp-section{
  padding:72px 20px;
  background:var(--bg);
  color:var(--light);
}

.lp-section.alt{
  background:var(--primary);
}

.lp-title{
  text-align:center;
  margin-bottom:48px;
  font-size:42px;
}

.lp-desc{
  max-width:720px;
  margin:18px auto 48px;
  text-align:center;
  line-height:1.8;
  opacity:0.9;
}

/* Card grid */
.lp-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}

/* Card */
.lp-card{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  );
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:28px;

  /* equal height */
  height:100%;
  display:flex;
  flex-direction:column;
}

/* remove all shadows / hover effects */
.lp-card,
.lp-card:hover{
  box-shadow:none !important;
  transform:none !important;
}

/* Icon */
.lp-icon{
  font-size:32px;
  margin-bottom:10px;
}