/* modern-styles.css — upgraded modern look for LandAgent landing page */

/* -------------------------
   Design tokens / base
   ------------------------- */
:root{
  --bg-100: #f6f8fc;
  --bg-200: #eef3fb;
  --card: #ffffff;
  --glass: rgba(255,255,255,0.55);
  --accent: #3C52D3;
  --accent-600: #2f43b8;
  --accent-400: #5a75f0;
  --muted: #6b7280;
  --success: #16a34a;
  --danger: #ef4444;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-xs: 0 4px 10px rgba(17,24,39,0.06);
  --shadow-sm: 0 8px 28px rgba(17,24,39,0.08);
  --shadow-lg: 0 20px 60px rgba(17,24,39,0.12);

  --glass-border: rgba(255,255,255,0.6);
  --max-w: 1200px;

  --ease: cubic-bezier(.2,.9,.28,1);
  font-synthesis: none;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  background: radial-gradient(circle at 30% 20%, #26336f, #0a1026);
  color: #f1f5ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  font-size: 16px;
}


a{color:inherit;text-decoration:none}
.container{max-width:var(--max-w);margin:0 auto;padding:16px}


/* -------------------------
   Topbar (fixed, modern)
   ------------------------- */
/* Reduced z-index so modal can sit above the header */
.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000; /* lowered from 9999 to sit under modal */
  backdrop-filter: blur(8px) saturate(110%);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,250,252,0.62));
  border-bottom: 1px solid rgba(15,23,42,0.04);
  box-shadow: 0 6px 30px rgba(12,15,30,0.03);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:5px 5px;
  max-width:var(--max-w);
  margin:0 auto;
}

/* Brand */
.brand{display:flex;gap:14px;align-items:center}
.logo{
  width:48px;height:48px;border-radius:12px;
  background: linear-gradient(160deg,var(--accent), var(--accent-400));
  color:white;font-weight:700;display:grid;place-items:center;font-size:18px;flex-shrink:0;
  box-shadow: var(--shadow-xs), inset 0 -6px 30px rgba(255,255,255,0.03);
  transform: translateZ(0);
}
.brand-text .site-title{
  font-size:18px;
  font-weight:700;
  /* swapped: now uses dark gradient like hero headline */
  background: linear-gradient(90deg,#0f1724 60%, rgba(0,0,0,0.7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted{color:var(--muted);font-size:13px}

/* Nav */
.nav-list{list-style:none;display:flex;gap:14px;align-items:center}
.nav-link{
  padding:8px 10px;border-radius:10px;font-weight:600;color:var(--muted);
  transition: all 240ms var(--ease);
}
.nav-link:hover{ color: var(--accent-600); transform: translateY(-2px); }
.cta{ color:var(--accent-600); font-weight:800; letter-spacing:0.2px }

/* Actions / Buttons */
.nav-actions{display:flex;gap:12px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:0;padding:9px 14px;border-radius:12px;font-weight:700;cursor:pointer;
  background:var(--accent);color:#fff;font-size:14px;box-shadow:var(--shadow-xs);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
.btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn:active{ transform: translateY(-1px); }

.btn.large{padding:11px 18px;font-size:15px}
.btn.ghost{
  background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--accent-600);
  box-shadow:none;font-weight:700;
}
.btn.secondary{
  background: linear-gradient(180deg, rgba(60,82,211,0.08), rgba(90,117,240,0.03));
  color:var(--accent-600); border: 1px solid rgba(90,117,240,0.08);
}
.btn.primary{ background: linear-gradient(90deg,var(--accent),var(--accent-400)); box-shadow: 0 12px 40px rgba(67,92,231,0.12) }

.btn.small{padding:6px 8px;font-size:13px;border-radius:10px}

/* subtle icon circle used in hero/features */
.icon-circle{
  width:56px;height:56px;border-radius:12px;display:grid;place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,250,252,0.6));
  box-shadow: 0 6px 18px rgba(17,24,39,0.04);
}

/* -------------------------
   Hero
   ------------------------- */
.hero{padding:88px 0 56px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;align-items:center;gap:36px}
.hero-copy h2{
  font-size:40px;
  margin-bottom:14px;
  line-height:1.03;
  font-weight:800;
  /* swapped: now uses PropertyManager accent color */
  background: none;
  color: var(--accent);
}
.lead{color:var(--muted);font-size:17px;margin-bottom:22px;max-width:60ch}
.hero-actions{display:flex;gap:12px;align-items:center}

/* device mock with layered depth */
.device-mock{
  background: linear-gradient(180deg,#fff,#f7fbff);
  border-radius:18px;box-shadow:var(--shadow-lg);padding:0px;display:flex;align-items:center;
  justify-content:center;height:300px;position:relative;overflow:hidden;border:1px solid rgba(15,23,42,0.03);
}
.device-mock::after{
  content:"";position:absolute;inset:30% -20%;transform:rotate(-18deg);
  background: radial-gradient(600px 160px at 10% 30%, rgba(90,117,240,0.06), transparent 10%);
  pointer-events:none;
}
.device-mock img{max-width:100%;max-height:240px;opacity:0.98;border-radius:10px;}

/* small CTA hint */
.hero-kicker{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-weight:700;font-size:13px}

/* -------------------------
   Sections & features
   ------------------------- */
.section{padding:56px 0}
.section h3{font-size:22px;margin-bottom:8px;font-weight:800}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.feature{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,248,255,0.9));
  border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);text-align:center;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
  border:1px solid rgba(15,23,42,0.03);
}
.feature:hover{ transform: translateY(-8px); box-shadow: 0 24px 60px rgba(17,24,39,0.10); }
.feature h4{margin-top:12px;margin-bottom:8px;font-size:16px}
.feature p{color:var(--muted);font-size:14px;line-height:1.4}

/* -------------------------
   Pricing
   ------------------------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.pricing-card{
  display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  border:1px solid rgba(15,23,42,0.04);box-shadow:var(--shadow-xs);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.pricing-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.pricing-card .card-body{padding:22px}
.pricing-card .plan-tag{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(60,82,211,0.12),rgba(90,117,240,0.06));font-weight:700;color:var(--accent-600)}
.pricing-card .price{font-size:28px;font-weight:800;margin:14px 0;color:var(--accent-600)}
.pricing-card ul{list-style:disc;padding-left:18px;color:var(--muted)}
.pricing-card .card-footer{padding:18px;background:linear-gradient(180deg,#fff,#fbfdff);display:flex;justify-content:center}

/* highlight recommended card */
.pricing-card.recommended{
  background: linear-gradient(90deg, rgba(94,110,255,0.06), rgba(255,255,255,0.5));
  border: 1px solid rgba(90,117,240,0.12);
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(67,92,231,0.08);
}

/* -------------------------
   Subscribe / CTA block
   ------------------------- */
.subscribe{
  background: linear-gradient(180deg, rgba(90,117,240,0.06), rgba(255,255,255,0.8));
  border-radius:16px;padding:20px;border:1px solid rgba(90,117,240,0.06);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.subscribe .subscribe-cta{margin-top:6px;display:flex;gap:10px;align-items:center}

/* -------------------------
   Footer
   ------------------------- */
.footer{padding:36px 0;color:var(--muted);border-top:1px solid rgba(15,23,42,0.03);margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer-links a{margin-left:12px;color:var(--muted);font-weight:700}

/* -------------------------
   Modal (login/signup)
   ------------------------- */

/* Backdrop covers full viewport and sits above header */
.modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  /* Slightly less heavy gradient to maintain app style; still blocks interaction */
  background: linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.42));
  z-index:11000; /* higher than .topbar */
  padding:16px;
  -webkit-overflow-scrolling: touch;
}

/* Prevent body scroll while modal open */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* Modal wrapper */
.modal{
  width:100%;
  max-width:560px;
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform-origin:center center;
  transition: transform 260ms var(--ease), opacity 220ms var(--ease);
}

/* Make modal content scroll inside viewport on small screens */
.auth-modal{
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 48px); /* leave some breathing room */
  overflow:auto;
  z-index:11001; /* above backdrop */
}

/* Modal header / tabs / body */
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid rgba(15,23,42,0.04)}
.modal-tabs{display:flex;gap:8px;padding:12px 18px;background:linear-gradient(180deg,#fff,#fbfdff)}
.tab{padding:8px 14px;border-radius:10px;background:transparent;border:0;cursor:pointer;font-weight:800;color:var(--muted)}
.tab.active{background: linear-gradient(90deg, rgba(60,82,211,0.12), rgba(90,117,240,0.06)); color: var(--accent-600); box-shadow: 0 6px 20px rgba(67,92,231,0.06)}
.modal-body{padding:18px}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form label{font-size:13px;color:var(--muted)}
.auth-form input{padding:12px 14px;border-radius:10px;border:1px solid #edf2ff;background:#fff;outline:none;transition: box-shadow 160ms var(--ease), border-color 160ms var(--ease)}
.auth-form input::placeholder{color: #cbd5e1}
.auth-form input:focus{border-color:var(--accent-400);box-shadow:0 10px 30px rgba(67,92,231,0.07)}
.form-actions{display:flex;gap:8px;margin-top:20px}
.auth-message{margin-top:10px;color:var(--muted);font-size:13px}
.modal-footer{padding:14px 18px;border-top:1px solid rgba(15,23,42,0.04);text-align:right;color:var(--muted)}

/* small remove button */
.btn.ghost.small{background:transparent;border:0;font-size:20px;line-height:1;padding:4px 8px}

/* -------------------------
   Utilities & responsive
   ------------------------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:22px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .nav-list{display:none}
  .nav-actions{display:flex;gap:8px}
  .device-mock{height:240px}
}
@media (max-width:640px){
  .container{padding:5px}
  .device-mock{height:180px}
  .hero{padding:85px 0 40px}
  .hero-copy h2{font-size:28px}
  .brand-text .site-title{font-size:16px}
  .features-grid{grid-template-columns:1fr}

  /* On very small devices keep modal near top (so browser chrome doesn't cut it off) */
  .modal-backdrop { align-items: flex-start; padding-top: 12px; }
  .auth-modal { max-height: calc(100vh - 24px); border-radius: 10px; }
}

/* helpers */
.text-center{text-align:center}
.muted-2{color:#94a3b8}
.small{font-size:13px}
.rounded{border-radius:12px}
.card{
  background: linear-gradient(180deg,#fff,#fbfdff);
  border-radius:12px;padding:16px;border:1px solid rgba(15,23,42,0.03);
  box-shadow: var(--shadow-xs);
}

/* focus-visible helpers */
a:focus, button:focus, input:focus { outline: 3px solid rgba(60,82,211,0.08); outline-offset:3px; }

/* Tiny entrance animation for hero elements */
.fade-in-up { transform: translateY(8px); opacity: 0; transition: transform 520ms var(--ease), opacity 520ms var(--ease) }
.fade-in-up.active { transform: translateY(0); opacity: 1 }

/* Hero slideshow container */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 260px; /* adjust to fit your hero section */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(17,24,39,0.08);
}

/* Each slide */
.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fadeSlide 16s infinite;
}

.hero-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* Animate each slide with staggered delays */
.hero-slideshow .slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .slide:nth-child(2) { animation-delay: 3s; }
.hero-slideshow .slide:nth-child(3) { animation-delay: 6s; }

/* Keyframes for fade in/out */
@keyframes fadeSlide {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

.hidden { display: none !important; }

/* END */