/* ----------------- Fonts (optional, self-hosted Lato) ----------------- */
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }

/* ----------------- Theme ----------------- */
:root{
  --bg:#ffffff;
  --bg-2:#f8fafc;
  --panel:#ffffff;
  --rule:#e2e8f0;
  --ink:#1e293b;
  --muted:#64748b;
  /* ORANGE brand like your login */
  --accent:#FF7C48;   /* default */
  --accent-2:#FF6217; /* hover/active */
  --shadow:0 6px 18px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Lato', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  line-height:1.55;
}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* ----------------- Nav ----------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* height:64px;  <-- remove this */
  min-height:64px;     /* keep the tall feel on desktop */
  height:auto;         /* let it grow when items wrap */
  padding:8px 0;       /* gives a bit of breathing room */
}

.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.brand-name{font-weight:700; letter-spacing:.2px}
.brand-name .accent{color:var(--accent)}
.brand-byline{
  text-align:center; color:var(--muted); font-size:.9rem; padding:8px 0;
  background:var(--bg-2); border-top:1px solid var(--rule);
}
.nav-links{display:flex; gap:20px}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta .btn{margin-left:6px}

/* ----------------- Buttons ----------------- */
.button-row{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:8px 20px; border:1px solid transparent;
  font-weight:700; letter-spacing:.2px;
}
.btn.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 14px rgba(37,99,235,.18)}
.btn.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.btn-outline{background:#fff; color:var(--ink); border-color:var(--rule)}
.btn.btn-outline:hover{background:#f1f5f9}
.btn.small{padding:8px 1rem}
.btn-lg{padding:15px 26px}

/* ----------------- Hero ----------------- */
.hero{
  padding:72px 0;
  background:
    radial-gradient(70vw 70vw at 50% -10%, rgba(59,130,246,.12), rgba(255,255,255,0)),
    var(--bg);
}
.hero-grid{display:grid; grid-template-columns:minmax(280px, 620px) 1fr; gap:40px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--rule); background:#fff; color:var(--muted);
  border-radius:999px; font-size:.82rem;
}
.pill .dot{width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block; box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.hero-copy h1{margin:12px 0 10px; font-size:52px; line-height:1.08; letter-spacing:.2px}
.accent-text{background:linear-gradient(90deg, #60A5FA, #3B82F6); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:#334155; font-size:1.125rem; max-width:60ch}
.footnote{margin-top:8px; color:#94a3b8; font-size:.85rem}

.hero-visual .window{
  border:1px solid var(--rule); background:linear-gradient(180deg,#ffffff,#f8fafc);
  border-radius:16px; box-shadow:var(--shadow);
}
.window-bar{display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--rule); background:#f8fafc}
.win-dot{width:10px; height:10px; border-radius:50%; display:inline-block; opacity:.9}
.win-dot.red{background:#ef4444} .win-dot.yellow{background:#f59e0b} .win-dot.green{background:#10b981}
.win-url{margin-left:8px; color:#64748b; font-size:.75rem}
.window-body{
  padding:18px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; grid-template-rows:160px 90px; gap:12px
}
.pane{border:1px solid var(--rule); background:#ffffff; border-radius:10px}
.pane.main{
  grid-column:1 / span 2; grid-row:1 / span 1;
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(96,165,250,.10));
}
.pane.row{grid-column:1 / span 3; grid-row:2 / span 1}
.mock-note{margin:6px 10px 12px; color:#94a3b8; font-size:.8rem}

/* ----------------- Built with ----------------- */
.integrations{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--bg-2); padding:28px 0;
}
.integrations-title{text-align:center; color:#94a3b8; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem}
.logo-strip{
  list-style:none; margin:10px auto 0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(6, minmax(0,1fr)); color:#64748b; max-width:1120px
}
.logo-strip li{display:flex; align-items:center; justify-content:center; opacity:.9}

/* ----------------- Features ----------------- */
.features{padding:72px 0}
.features h2{text-align:center; font-size:30px; margin:0 0 6px}
.subtitle{text-align:center; color:var(--muted); margin:0 0 22px}
.cards{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr))}
.card{
  background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:18px;
  box-shadow:var(--shadow);
}
.card-badge{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px;
  background:rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.35)
}
.card h3{margin:10px 0 6px; font-size:1.05rem}
.card p{margin:0; color:#475569}

/* ----------------- Demo ----------------- */
.demo{
  padding:72px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.demo h3{margin:0 0 6px; font-size:24px}
.demo p{color:#475569}
.demo ul{margin:10px 0 0 18px; color:#475569}
.video-frame{border:1px solid var(--rule); border-radius:14px; background:#ffffff; box-shadow:var(--shadow)}
.video-inner{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:#94a3b8}

/* ----------------- FAQ ----------------- */
.faq{background:var(--bg-2); padding:28px 0}
.faq{padding:72px 0}
.faq h2{text-align:center; font-size:30px; margin:0 0 16px}
.faq-grid{display:grid; gap:14px; grid-template-columns:1fr 1fr}
.faq details{background:var(--bg-2); border:1px solid var(--rule); border-radius:12px; padding:14px 16px}
.faq summary{cursor:pointer; font-weight:700}
.faq p{color:#475569; margin:6px 0 0}

/* ----------------- CTA ----------------- */
.cta{
  padding:72px 0; background:linear-gradient(90deg, rgba(59,130,246,.10), rgba(148,163,184,.06));
  border-top:1px solid var(--rule);
}
.cta-box{
  border:1px solid rgba(37,99,235,.25);
  background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.8));
  border-radius:20px; padding:36px; text-align:center; box-shadow:var(--shadow)
}
.cta h3{margin:0 0 6px; font-size:26px}
.cta p{color:#475569; margin:0 0 14px}

/* ----------------- Footer ----------------- */
.footer{
  border-top:1px solid var(--rule); background:var(--bg-2); color:var(--ink);
  padding:48px 0;
}

.footer-inner { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 0 20px; 
}
.footer-cols{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:18px}
.brand-row{display:flex; gap:8px; align-items:center}
.muted{color:var(--muted)}
.footer a{color:#334155; text-decoration:none}
.footer a:hover{color:#0f172a; text-decoration:underline}
.footer h5{margin:0 0 6px; font-size:.95rem}
.footer ul{list-style:none; margin:0; padding:0}
.copyright{margin-top:16px; font-size:12px; text-align:center; color:#64748b}

/* Pure white / transparent-orange style buttons */
.btn {
  font-size: 0.95rem; /* fixed text size */
  padding: 10px 18px; /* fixed height/width padding */
}
.btn.btn-outline {
  background-color: transparent;
  color: #FF7C48;
  border: solid #FF7C48;
  border-radius: 100px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: none;
}

.btn.btn-outline:hover {
  background-color: #FF6217;
  color: #fff;
  border-color: #FF6217;
}

.btn.btn-primary.accent-text {
  background: linear-gradient(90deg, #60A5FA, #3B82F6);
  border: none; /* optional, removes default border */
  color: #fff;  /* makes text white so it’s readable */
}

.btn.btn-primary.accent-text:hover {
  opacity: 0.9; /* subtle hover effect */
}


/* Footer: deep navy band with white type and orange outline CTA */
.footer {
  background: #0c2340 !important;
  color: #fff !important;
  border-top: none !important;
  padding-top: 2.5em !important;
  padding-left: 2.5em !important;
  padding-right: 2.5em !important;
  padding-bottom: 0.5em !important;
}
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr auto; /* brand | product | company | CTA */
  gap: 40px;
  align-items: start;
}
.footer h4, .footer h5 { margin: 0 0 10px; color: #fff; }
.footer .muted { color: #d4dee2 !important; }
.footer a { color: #e6edf5 !important; text-decoration: none; }
.footer a:hover { color: #FF7C48 !important; }
.footer .brand-row .accent { color: #FF7C48 !important; }
.footer-cols > div:last-child { justify-self: end; }
.footer .copyright { margin-top: 18px; color: rgba(255,255,255,.7); font-size: .9rem; }

/* Outline CTA on dark footer */
.footer .copyright {
  grid-column: 1 / -1;           /* span full width of footer grid */
  text-align: center;
  margin-top: 30px;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

.footer .btn.btn-primary:hover,
.footer .btn.btn-outline:hover {
  color: #fff !important; 
   text-decoration: none; /* keep text white on hover in footer */
}

#features,
#integrations,
#faq,
#demo {
  scroll-margin-top: 80px; /* match or slightly exceed your nav height */
}

#apply .cta-box {
  display: flex;
  flex-direction: column; /* stack heading + form */
  align-items: center;    /* center horizontally */
  text-align: center;     /* center text */
}

#apply form {
  width: 100%;
  max-width: 500px;
  margin-top: 1rem;
}


#apply form label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

#apply form input,
#apply form select,
#apply form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

#apply form textarea {
  min-height: 100px;
  resize: vertical;
}

#apply form .checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}



.slider {
  overflow: hidden;
  max-width: 800px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.slides {
  display: flex;
  animation: slideShow 28s infinite;
}

.slides img {
  width: 100%;
  flex-shrink: 0;
  object-fit: contain;
}

@keyframes slideShow {
  0%, 10%    { transform: translateX(0%); }       /* 1st image */
  12%, 22%   { transform: translateX(-100%); }    /* 2nd */
  24%, 34%   { transform: translateX(-200%); }    /* 3rd */
  36%, 46%   { transform: translateX(-300%); }    /* 4th */
  48%, 58%   { transform: translateX(-400%); }    /* 5th */
  60%, 70%   { transform: translateX(-500%); }    /* 6th */
  72%, 82%   { transform: translateX(-600%); }    /* 7th */
  84%, 94%   { transform: translateX(-700%); }    /* 8th */
  100%       { transform: translateX(0%); }       /* loop back */
}

/* Pause control */
.slides.paused { animation-play-state: paused; }

/* Modal */
.slide-modal.open { display: flex; }
.slide-modal img {
  max-width: 90vw; max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  background: #fff;
}

.modal-close:focus { outline: 2px solid #3B82F6; }

.slide-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

.modal-content {
  position: relative; /* button will be positioned relative to this */
  display: inline-block;
}

.modal-content img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  background: #fff;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 22px;
  border: none;
  background: #fff;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.nav-zone {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
}

.left-zone { left: 0; }
.right-zone { right: 0; }

/* Optional: subtle visual cue on hover */
.left-zone:hover,
.right-zone:hover {
  background: rgba(0,0,0,0.05);
}


/* ----------------- Responsive ----------------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:900px){

    .nav-inner{
    flex-wrap: wrap;      /* allow brand, links, CTAs to drop to new lines */
    row-gap: 10px;
  }
  .brand{ order:1; }

  .nav-links{
    order:2;
    width:100%;
    justify-content:center;
    display:flex;
    flex-wrap:wrap;
    column-gap:16px;
  }

  .nav-cta{
    order:3;
    width:100%;
    display:flex;
    justify-content:center;
    gap:8px;              /* distance between the two buttons */
    flex-wrap:wrap;       /* allow buttons to break to next line if needed */
  }

  .nav-cta .btn{
    padding:10px 14px;    /* smaller pills on mobile */
    font-size:.95rem;
  }

  .logo-strip{ grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 10px; }

}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .hero-copy h1{font-size:38px}
}

@media screen and (max-width: 40em) {

  .footer .footer-inner { padding: 0 16px; }

  .footer-cols {
    grid-template-columns: 1fr;  /* one column */
    column-gap: 8px;             /* small horizontal gap if any */
    row-gap: 10px;               /* fix invalid 'px' */
  }

  .footer-cols > div:last-child { justify-self: stretch; } /* CTA aligns full width */
      .nav-inner{
    flex-wrap: wrap;      /* allow brand, links, CTAs to drop to new lines */
    row-gap: 10px;
  }

    .demo-grid {
    display: flex;
    flex-direction: column; /* stack text first, slider second */
    gap: 1.5rem;            /* spacing between them */
  }

  .demo-copy,
  .demo-media {
    width: 100%;            /* take full width on mobile */
  }

  .demo-media {
    order: 2; /* ensure it comes after text, if flex/grid order matters */
  }
}