/* ============================================
   Flolane CRM — Stylesheet
   Design tokens: ink navy, paper white, road amber
   Type: Space Grotesk (display) + Inter (body)
   ============================================ */

:root{
  --ink: #0B1F33;
  --inkdeep: #071A2C;
  --paper: #F3F4F1;
  --primary: #18B394;
  --primary-hover: #139A7F;
  --primary-light: #3CC7AA;
  --primary-dark: #0F7F69;
  --steel: #5B6B7C;
  --white: #FFFFFF;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-300: #CBD5E1;
  --radius-lg: 1rem;
  --radius-md: 0.75rem;
  --max-width: 1280px;
  --max-width-narrow: 1024px;
  --max-width-prose: 768px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: #1e293b;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display{
  font-family: 'Space Grotesk', sans-serif;
}

img{ display: block; max-width: 100%; }

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow{
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-prose{
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- utility ---------- */
.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.clickable-image{
    cursor:pointer;
    transition:.3s;
}

.clickable-image:hover{
    transform:scale(1.02);
    opacity:.95;
}

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:40px;
}

.lightbox.hidden{
    display:none;
}

.lightbox img{
    width:min(1000px,80vw);
    max-height:80vh;
    object-fit:contain;
    border-radius:16px;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}

#closeLightbox{
    position:absolute;
    top:20px;
    right:35px;
    font-size:48px;
    color:white;
    cursor:pointer;
    user-select:none;
}

#closeLightbox:hover{
    opacity:.7;
}



.lightbox{
    opacity:0;
    transition:opacity .25s ease;
}

.lightbox:not(.hidden){
    opacity:1;
}

.lightbox img{
    transform:scale(.92);
    transition:transform .25s ease;
}

.lightbox:not(.hidden) img{
    transform:scale(1);
}





.btn{
  display: inline-block;
  padding: 0.9rem 1.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-amber{
  background: var(--primary);
  color: var(--white);
}
.btn-amber:hover{ background: var(--primary-hover); }

.btn-outline{
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--white);
}
.btn-outline:hover{ background: var(--white); color: var(--ink); }

/* ---------- navbar ---------- */
.navbar{
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}

.nav-logo{ height: 2.75rem; }

.nav-links{
  display: none;
  gap: 2.5rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-links a:hover{ color: var(--primary); }

.nav-right{ display: flex; align-items: center; gap: 0.75rem; }

.nav-cta{ display: none; }

.menu-btn{
  background: none;
  border: none;
  padding: 0.5rem;
  color: #334155;
  cursor: pointer;
}

.mobile-menu{
  display: none;
  flex-direction: column;
  gap: 1rem;
  font-weight: 500;
  padding-bottom: 1.5rem;
}

.mobile-menu.open{ display: flex; }

.mobile-menu .btn{ text-align: center; }

@media (min-width: 768px){
  .nav-links{ display: flex; }
  .nav-cta{ display: inline-block; }
  .menu-btn{ display: none; }
  .mobile-menu{ display: none !important; }
}

/* ---------- hero ---------- */
.hero{
  background: linear-gradient(160deg, var(--inkdeep) 0%, var(--ink) 55%, #0E3A66 100%);
}

.hero-inner{
  padding: 5rem 0;
}

.hero-grid{
  display: grid;
  gap: 4rem;
  align-items: center;
}

.hero-copy{ color: var(--white); order: 2; }
.hero-image{ order: 1; }

.hero-image img{
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  border: 1px solid #334155;
}

.hero-copy h1{
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 1.25rem;
}

.hero-copy p{
  font-size: 1.125rem;
  color: var(--slate-300);
  margin-top: 1.5rem;
  max-width: 34rem;
  line-height: 1.6;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

.hero-stats{
  display: flex;
  gap: 1.25rem;
  margin-top: 3rem;
}

.ticket{
  border: 1.5px dashed rgba(24,179,148,0.45);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.05);
}

.ticket h3{
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary);
}

.ticket p{
  color: var(--slate-300);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

@media (min-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr 1fr; }
  .hero-copy{ order: 1; }
  .hero-image{ order: 2; }
  .hero-copy h1{ font-size: 3rem; }
}

/* ---------- story / route motif ---------- */
.story{
  padding: 6rem 0;
  background: var(--white);
}

.story h2{
  font-size: 2rem;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 3.5rem;
}

.route{
  position: relative;
  padding-left: 2.5rem;
  border-left: 2px dashed rgba(24,179,148,0.35);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.route-stop{ position: relative; }

.route-stop::before{
  content: '';
  position: absolute;
  left: -2.6rem;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--white);
}

.route-stop.final::before{ background: var(--ink); }

.route-stop p{
  font-size: 1.0625rem;
  color: var(--slate-700);
  line-height: 1.7;
}

/* ---------- features ---------- */
.features{
  padding: 6rem 0;
  background: var(--paper);
}

.features-intro{ max-width: 42rem; }

.features-intro h2{
  font-size: 2rem;
  font-weight: 600;
  margin-top: 0.75rem;
  line-height: 1.25;
}

.features-intro p{
  color: var(--slate-500);
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.feature-grid{
  display: grid;
  gap: 2rem;
  margin-top: 3.5rem;
  grid-template-columns: 1fr;
}

.feature-card{
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.feature-card-body{ padding: 1.75rem; }

.feature-card h3{
  font-size: 1.25rem;
  font-weight: 600;
}

.feature-card p{
  margin-top: 0.75rem;
  color: var(--slate-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (min-width: 768px){
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px){
  .feature-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- benefits ---------- */
.benefits{
  padding: 6rem 0;
  background: var(--white);
}

.benefits-grid{
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}

.benefits-grid h2{
  font-size: 2rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

.benefits-grid > div:first-child p{
  color: var(--slate-500);
  margin-top: 1.25rem;
  font-size: 1.0625rem;
}

.benefit-list{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.0625rem;
}

.benefit-list div{
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.benefit-list span{
  color: var(--primary);
  font-weight: 700;
}

@media (min-width: 768px){
  .benefits-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- contact ---------- */
.contact{
  padding: 6rem 0;
  background: var(--ink);
}

.contact-head{ text-align: center; }

.contact-head h2{
  font-size: 2.25rem;
  font-weight: 600;
  margin-top: 1rem;
  color: var(--white);
}

.contact-head p{
  color: var(--slate-300);
  font-size: 1.125rem;
  margin-top: 1.25rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-grid{
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
  grid-template-columns: 1fr;
}

.contact-card{
  background: var(--white);
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  padding: 2.5rem;
}

.contact-card h3{
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.contact-card > p{
  color: var(--slate-600);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.contact-field{ margin-bottom: 1.5rem; }

.contact-field:last-child{ margin-bottom: 0; }

.contact-field .label{
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 600;
}

.contact-field a.email{
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
}
.contact-field a.email:hover{ text-decoration: underline; }

.contact-field p{ color: var(--slate-700); margin-top: 0.25rem; }

.contact-card .btn{ margin-top: 2.5rem; }

.check-item{
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.check-item:last-child{ margin-bottom: 0; }

.check-item .check{ color: var(--primary); font-size: 1.5rem; }

.check-item h4{ font-weight: 600; color: #1e293b; }

.check-item p{ color: var(--slate-600); margin-top: 0.25rem; }

@media (min-width: 1024px){
  .contact-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- footer ---------- */
.footer{
  background: var(--inkdeep);
  color: var(--slate-300);
}

.footer-inner{ padding: 3rem 0; }

.footer-grid{
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.footer-logo{ height: 2.75rem; margin-bottom: 1.25rem; }

.footer h4{
  color: var(--white);
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer ul{ list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.footer a:hover{ color: var(--white); }

.footer hr{
  border: none;
  border-top: 1px solid #334155;
  margin: 2.5rem 0;
}

.footer-bottom{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.875rem;
}

@media (min-width: 768px){
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .footer-bottom{ flex-direction: row; justify-content: space-between; }
}

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .feature-card{ transition: none; }
}




/* ===== Floating Image Preview ===== */

.feature-card{
    position:relative;
    overflow:visible;
}

.feature-card img{
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
}

.feature-card.preview-active{
    z-index:100;
}
@media(max-width:1024px){
    .feature-card.preview-active img{
        transform:translateX(-50%) scale(1.4);
        width:90%;
    }
}

@media(max-width:768px){
    .feature-card.preview-active img{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        width:100%;
        max-width:100%;
    }
}