/* ===== Shiftpilot Landing — Light Theme (full) ===== */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg:#f7fbff;
  --surface:#ffffff;
  --surface-2:#f3f7fb;
  --text:#0e1a24;
  --muted:#4b6673;
  --accent:#01dbf1;
  --accent-dark:#006e87;
  --border:#e1ebf3;
  --border-2:#d7e4ee;
  --shadow:0 10px 30px rgba(28,58,84,.08);
  --radius:16px;
  --font-size:15px;
}

/* Base */
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, #e8f6ff 0, transparent 70%),
    radial-gradient(1200px 800px at 90% -20%, #f2fbff 0, transparent 70%),
    var(--bg);
  font: var(--font-size)/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@media (min-width:2560px) {
  :root {
    --font-size:19px;
    --shadow:0 16px 48px rgba(28,58,84,.12);
    --radius:20px;
  }
  body { font-size:var(--font-size) }
}
a{color:inherit;text-decoration:none;transition:opacity .18s ease, transform .18s ease}
a:hover{opacity:.95}

/* Container */
.container{max-width:1160px;margin:0 auto;padding:0 20px}

@media (min-width:2560px) {
  .container { max-width:1600px; padding:0 60px }
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:70px; gap:.8rem;
}

/* 4K scaling for topbar */
@media (min-width:2560px) {
  .topbar-inner { height:100px }
  .logo-wrap { width:56px; height:56px }
  .logo-svg { width:36px; height:36px }
  .brand .title { font-size:1.4rem }
  .nav a { font-size:1.1rem; padding:.6rem 1rem }
  .nav a.cta { padding:.7rem 1.2rem }
  .menu-btn { width:56px; height:56px; font-size:1.4rem }
}
.brand{display:flex; align-items:center; gap:.7rem; min-width:0}
.logo-wrap{
  width:40px; height:40px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 4px 10px rgba(9,40,64,.05);
}
.logo-svg{display:block; width:26px; height:26px}
.brand .title{font-weight:900; letter-spacing:.2px; font-size:1.05rem; white-space:nowrap}
.nav{display:flex; align-items:center; gap:.9rem}
.nav a{
  padding:.45rem .7rem; border-radius:10px; border:1px solid transparent;
  font-weight:600; color:#214458; line-height:1;
}
.nav a:hover{background:#f2f7fb; border-color:var(--border); transform:translateY(-1px)}
.cta{
  background:var(--accent); color:#00313f; border:1px solid #00c6da;
  padding:.55rem .9rem; border-radius:12px; font-weight:800; box-shadow:var(--shadow)
}
.cta.is-disabled,
.btn.is-disabled{
  opacity:.58;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
  filter:grayscale(.15);
}
.cta.is-disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cta.is-disabled:hover,
.btn.is-disabled:hover{transform:none;opacity:.58}
.menu-btn{display:none}

@media (max-width:860px){
  .nav{display:none}
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; background:#fff; border:1px solid var(--border)
  }
}

/* Hero */
.hero{ padding:72px 0 36px }
.hero-inner{
  display:grid;
  grid-template-columns: minmax(280px,1.1fr) minmax(260px,.9fr);
  gap:2rem; align-items:center;
}
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#025869; background:rgba(1,219,241,.16);
  border:1px solid rgba(1,219,241,.45); padding:.3rem .55rem; border-radius:999px;
  font-weight:800; letter-spacing:.2px; font-size:.8rem;
}
.hero h1{
  margin:.7rem 0 .4rem; font-size:clamp(1.9rem, 2.5vw + 1rem, 3rem);
  line-height:1.1; letter-spacing:.2px;
}
.hero p{ color:var(--muted); margin:0 0 1.2rem; font-size:1.05rem }
.hero-ctas{display:flex; flex-wrap:wrap; gap:.6rem}

/* 4K scaling */
@media (min-width:2560px) {
  .hero { padding:120px 0 60px }
  .hero h1 { font-size:4rem; margin:.8rem 0 .6rem }
  .hero p { font-size:1.4rem; margin:0 0 2rem }
  .hero-ctas { gap:1rem }
  .btn { padding:1rem 1.5rem; font-size:1.1rem }
  .eyebrow { font-size:0.95rem; padding:.4rem .7rem }
}

/* Generic buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:#0e1a24; font-weight:700; cursor:pointer;
  font:inherit; line-height:1;
  box-shadow:0 4px 10px rgba(9,40,64,.05); white-space:nowrap; transition:transform .18s ease;
}
.hero-ctas form{
  margin:0;
  display:inline-flex;
}
.hero-login-note{
  flex-basis:100%;
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.btn:hover{ transform: translateY(-1px) }
.btn.primary{ background:var(--accent); color:#002f3b; border-color:#00c6da; box-shadow:var(--shadow) }
.btn.light{ background:#fff }

/* Google-styled button */
.btn.google{
  background:#fff;
  color:#3c4043;
  border:1px solid #dadce0;
  font-weight:500;
  padding-left:14px;              /* tighter left since SVG has own margin */
}
.btn.google svg{
  flex:0 0 18px;
  display:block;
}

/* Demo button */
.btn.demo{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  border:none;
  box-shadow:0 4px 15px rgba(102, 126, 234, 0.4);
  font-weight:700;
  position:relative;
  overflow:hidden;
}
.btn.demo::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left .5s ease;
}
.btn.demo:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 20px rgba(102, 126, 234, 0.6);
}
.btn.demo:hover::before{
  left:100%;
}

@media (min-width:2560px) {
  .btn { padding:1rem 1.5rem; border-radius:16px; font-size:1.05rem }
  .btn.google svg { flex:0 0 24px }
}

/* Hero mock */
.hero-card{
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow);
}
.hero-mock{
  aspect-ratio:16/10; width:100%; border-radius:14px; border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0)),
    radial-gradient(900px 380px at 20% -10%, rgba(1,219,241,.14), transparent 60%),
    #ffffff;
  position:relative; overflow:hidden;
}
.mock-bar{position:absolute; inset:0 0 auto 0; height:44px; background:#f5f9fc; border-bottom:1px solid var(--border)}
.mock-chip{
  position:absolute; inset:auto 16px 16px auto; padding:.45rem .6rem;
  border-radius:10px; border:1px solid var(--border); background:#fff; color:#0e1a24; font-weight:700
}
.mock-kpis{
  position:absolute; left:16px; right:16px; top:58px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.mock-kpi{
  border:1px solid var(--border); background:#fff; border-radius:10px;
  padding:8px 10px; display:flex; flex-direction:column; gap:2px;
}
.mock-kpi span{ font-size:.68rem; color:var(--muted); line-height:1.1 }
.mock-kpi strong{ font-size:.95rem; line-height:1.1; color:var(--text) }
.mock-chart{
  position:absolute; left:16px; right:16px; bottom:56px; top:114px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  overflow:hidden; padding:8px;
}
.mock-grid{
  position:absolute; inset:8px;
  background:
    linear-gradient(to top, rgba(66,133,244,.09) 1px, transparent 1px) 0 100%/100% 25%,
    linear-gradient(to right, rgba(66,133,244,.08) 1px, transparent 1px) 0 0/16.6% 100%;
}
.mock-legend{
  position:absolute; left:12px; right:12px; top:10px;
  display:flex; align-items:center; gap:12px; font-size:.67rem; color:#415c6b;
}
.mock-legend span{ display:inline-flex; align-items:center; gap:5px; font-weight:700 }
.mock-legend .dot{ width:8px; height:8px; border-radius:50%; display:inline-block }
.mock-legend .dot.curr{ background:#007c96 }
.mock-legend .dot.prev{ background:#7bb7df }
.mock-bars{
  position:absolute; left:14px; right:14px; bottom:30px;
  height:52px; display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
  align-items:end;
}
.mock-bars .bar-group{ display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100% }
.mock-bars .bar{
  width:8px; border-radius:7px 7px 3px 3px;
  border:1px solid rgba(0,110,135,.22);
}
.mock-bars .bar.curr{ background:linear-gradient(180deg, rgba(1,219,241,.85), rgba(0,110,135,.82)) }
.mock-bars .bar.prev{ background:linear-gradient(180deg, rgba(162,210,239,.8), rgba(117,171,208,.75)) }
.mock-bars .bp1{ height:34% } .mock-bars .bc1{ height:38% }
.mock-bars .bp2{ height:40% } .mock-bars .bc2{ height:45% }
.mock-bars .bp3{ height:53% } .mock-bars .bc3{ height:60% }
.mock-bars .bp4{ height:49% } .mock-bars .bc4{ height:54% }
.mock-bars .bp5{ height:62% } .mock-bars .bc5{ height:70% }
.mock-bars .bp6{ height:74% } .mock-bars .bc6{ height:82% }
.mock-x{
  position:absolute; left:14px; right:14px; bottom:9px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
  font-size:.62rem; color:#5b7482; font-weight:700;
}
.mock-x span{ text-align:center }
.mock-trend{
  position:absolute; left:10px; right:10px; top:10px; bottom:10px;
  width:calc(100% - 20px); height:calc(100% - 20px);
  transform:translateY(-10px);
  pointer-events:none;
}
.mock-trend polyline{
  fill:none; stroke:#2b4f9d; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}

@media (min-width:2560px) {
  .hero-card { padding:1.5rem }
  .mock-bar { height:60px }
  .mock-chip { font-size:1rem; padding:.6rem .9rem; inset:auto 24px 24px auto }
  .mock-kpis { left:24px; right:24px; top:78px; gap:12px }
  .mock-kpi { border-radius:12px; padding:10px 12px }
  .mock-kpi span { font-size:.8rem }
  .mock-kpi strong { font-size:1.15rem }
  .mock-chart { left:24px; right:24px; top:152px; bottom:78px; border-radius:12px; padding:12px }
  .mock-legend { left:20px; right:20px; top:14px; gap:18px; font-size:.78rem }
  .mock-legend .dot { width:10px; height:10px }
  .mock-bars { left:20px; right:20px; bottom:28px; height:74px; gap:14px }
  .mock-bars .bar { width:11px; border-radius:8px 8px 4px 4px }
  .mock-x { left:20px; right:20px; bottom:10px; gap:14px; font-size:.72rem }
}

/* Features */
.features{ padding:40px 0 10px }
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; align-items:stretch }
@media (max-width:980px){ .grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr } }

/* 4K scaling for features */
@media (min-width:2560px) {
  .features { padding:80px 0 20px }
  .section-title { font-size:2rem; margin:0 0 1.2rem }
  .section-subtitle { font-size:1.3rem !important }
  .grid { gap:1.5rem }
  .card { padding:1.5rem }
  .badge { font-size:0.95rem; padding:.4rem .7rem }
  .card h3 { font-size:1.4rem; margin:.3rem 0 .6rem }
  .card p { font-size:1.1rem }
}
.card{
  background:linear-gradient(180deg, #ffffff, #f7fbff);
  border:1px solid var(--border); border-radius:16px; padding:1rem;
  box-shadow:var(--shadow); height:100%;
  display:flex; flex-direction:column;
}
.kicker{ color:#0e1a24; font-weight:800; letter-spacing:.2px; font-size:.9rem; margin-bottom:.2rem }
.card h3{ margin:.2rem 0 .4rem }
.card p{ margin:0; color:var(--muted) }
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .5rem; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:#214458; font-weight:700; font-size:.8rem
}

/* Pricing section */
@media (min-width:2560px) {
  .kicker { font-size:1rem; margin-bottom:.3rem }
  .card h3 { font-size:1.3rem }
}

/* Strip for security section */
.strip{
  margin:42px auto;
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(1,219,241,.12), rgba(1,219,241,.04));
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:1160px;
  box-sizing:border-box;
}

@media (min-width:2560px) {
  .strip { margin:80px auto; padding:32px; gap:24px }
  .strip .text { font-size:1.3rem; min-width:360px; flex-basis:auto }
  .pill { font-size:1rem; padding:.6rem .95rem }
}
.strip .text{
  flex:1 1 320px;
  min-width:260px;
  font-weight:800;
  line-height:1.2;
  color:#0e1a24;
  display:flex; align-items:center;
}
.strip .actions{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; min-width:fit-content;
}
.pill{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.45rem .7rem;
  font-weight:700;
  color:#214458;
  white-space:nowrap;
}
@media (max-width: 820px){
  .strip{ justify-content:flex-start }
  .strip .actions{ width:100%; justify-content:flex-start; flex-wrap:wrap }
}
@media (max-width: 420px){
  .strip{ padding:14px }
}

/* Footer */
.footer{ padding:30px 0 60px; color:#5c7481 }
.footer-inner{
  display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:center;
}
@media (max-width:860px){ .footer-inner{ grid-template-columns:1fr; gap:.6rem } }
.brand.foot{ display:flex; align-items:center; gap:.7rem }
.brand.foot .title{ font-weight:900 }
.footer-side{ display:flex; gap:1rem; align-items:center; justify-content:flex-end; flex-wrap:wrap }
.footer-links{ display:flex; gap:.9rem; flex-wrap:wrap }
.link-muted{ color:#56798b }
.link-muted.is-disabled{ opacity:.58; cursor:not-allowed; pointer-events:none }
.hr{ height:1px; margin:26px 0; background:linear-gradient(90deg, transparent, var(--border), transparent) }

@media (min-width:2560px) {
  .footer { padding:60px 0 120px; font-size:1.1rem }
  .brand.foot .logo-wrap { width:48px; height:48px }
  .brand.foot .logo-svg { width:32px; height:32px }
  .brand.foot .title { font-size:1.2rem }
  .footer-links { gap:1.5rem }
  .link-muted { font-size:1.1rem }
  .hr { margin:50px 0 }
}

/* Cookie note */
.cookie{
  position:fixed; inset:auto 16px 16px 16px; z-index:40;
  border-radius:14px; border:1px solid var(--border); background:#fff;
  padding:.8rem 1rem; display:none; gap:.8rem; align-items:center; 
  box-shadow:var(--shadow); max-width:400px; font-size:14px; color:var(--muted)
}
.cookie.show{ display:flex; animation:slideUp .3s ease-out }
@keyframes slideUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } }
.cookie-text{ flex:1 }
.cookie-text a{ color:var(--accent); font-weight:600 }
.cookie .btn{
  padding:.6rem 1.2rem; white-space:nowrap;
  border:none; border-radius:10px; background:var(--accent); color:#fff; 
  font-weight:600; cursor:pointer; transition:background .2s ease, transform .2s ease;
  font-size:14px
}
.cookie .btn:hover{ background:var(--accent-dark); transform:scale(1.05) }
.cookie .btn:active{ transform:scale(.98) }

@media (min-width:2560px) {
  .cookie { padding:1.2rem 1.5rem; max-width:600px; font-size:1.1rem; inset:auto 32px 32px 32px }
  .cookie .btn { padding:.8rem 1.5rem; font-size:1rem }
}

/* Small helpers */
.section-title{ margin:0 0 .6rem; font-size:1.25rem }
.section-subtitle{ margin:0 0 1.5rem; font-size:0.95rem; color:#4b6673; line-height:1.6 }
.hr[role="separator"]{ display:block }