/* =========================================================
   eWorkPulse — Premium Minimalist SaaS Website
   Brand: Navy #193E62 · Green #65AC49 · Sidebar Dark #1A2636
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  --navy:         #193E62;
  --navy-deep:    #112c46;
  --navy-mid:     #1A2636;
  --brand:        #65AC49;
  --brand-dark:   #4d8a37;
  --brand-light:  #eef7ea;
  --brand-muted:  #b8dfaa;

  --white:        #ffffff;
  --off-white:    #f8fafc;
  --gray-50:      #f4f6f8;
  --gray-100:     #e2e8f0;
  --gray-200:     #c9d4dd;
  --gray-400:     #8898aa;
  --gray-600:     #4a5568;
  --gray-800:     #1e293b;
  --text:         #1e293b;
  --muted:        #5a6a7e;

  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;

  --shadow-xs: 0 1px 4px rgba(25,62,98,.04);
  --shadow-sm: 0 2px 8px rgba(25,62,98,.06);
  --shadow-md: 0 6px 24px rgba(25,62,98,.08);
  --shadow-lg: 0 16px 48px rgba(25,62,98,.10);
  --shadow-xl: 0 32px 64px rgba(25,62,98,.14);

  --transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Outfit',sans-serif;letter-spacing:-.02em;line-height:1.2}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:3px}

/* ─── Layout ──────────────────────────────────────────── */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:100px 0}

/* ─── Typography Utilities ──────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-light);
  padding:5px 12px;border-radius:30px;
}
.eyebrow-navy{color:var(--navy);background:rgba(25,62,98,.06)}

.section-headline{
  font-size:clamp(28px,4vw,42px);font-weight:800;color:var(--navy);
  margin:16px 0 18px;
}
.section-sub{font-size:17px;color:var(--muted);max-width:640px;margin:0 auto;line-height:1.75}

.text-brand{color:var(--brand)}
.text-navy{color:var(--navy)}
.text-center{text-align:center}

/* ─── Navigation ─────────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:999;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(25,62,98,.07);
  padding:0 5%;height:68px;
}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-logo-box{
  height:30px;
  display:flex;align-items:center;justify-content:center;
}
.nav-logo-box img{height:55px}
.nav-brand-text{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--navy)}
.nav-brand-text span{color:var(--brand)}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--muted);
  padding:7px 14px;border-radius:8px;transition:var(--transition);
}
.nav-links a:hover,.nav-links a.active{color:var(--navy);background:var(--gray-50)}
.nav-cta{
  background:var(--brand);color:var(--white)!important;
  box-shadow:0 4px 14px rgba(101,172,73,.3);
}
.nav-cta:hover{background:var(--brand-dark)!important;transform:translateY(-1px)}
.nav-login{
  background:#2E689E!important;color:var(--white)!important;
  box-shadow:0 4px 14px rgba(46,104,158,.3);
}
.nav-login:hover{background:#23527d!important;transform:translateY(-1px)}

.nav-hamburger{display:none;flex-direction:column;gap:4px;padding:6px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:1px;transition:var(--transition)}

/* ─── Buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;
  padding:12px 24px;border-radius:10px;transition:var(--transition);
  white-space:nowrap;
}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:0 4px 14px rgba(25,62,98,.25)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:0 8px 20px rgba(25,62,98,.3)}
.btn-brand{background:var(--brand);color:var(--white);box-shadow:0 4px 14px rgba(101,172,73,.3)}
.btn-brand:hover{background:var(--brand-dark);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--gray-100);box-shadow:var(--shadow-sm)}
.btn-outline:hover{border-color:var(--navy);background:var(--off-white);transform:translateY(-1px)}
.btn-lg{font-size:16px;padding:15px 30px;border-radius:12px}
.btn-sm{font-size:13px;padding:8px 16px;border-radius:8px}

/* ─── Hero ──────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:center;
  padding:60px 0 80px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(101,172,73,.06) 0%,transparent 70%),
             radial-gradient(ellipse 50% 50% at 10% 80%,rgba(25,62,98,.04) 0%,transparent 70%);
  pointer-events:none;
}
.hero-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px}
.hero-live-badge{
  background:var(--brand-light);color:var(--brand);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:30px;
  display:flex;align-items:center;gap:5px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-headline{font-size:clamp(36px,4.5vw,54px);font-weight:900;color:var(--navy);margin-bottom:20px}
.hero-headline .highlight{
  background:linear-gradient(135deg,var(--brand),#3d8f28);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{font-size:18px;color:var(--muted);margin-bottom:36px;max-width:520px;line-height:1.75}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-social-proof{
  display:flex;align-items:center;gap:12px;margin-top:32px;
  font-size:13px;color:var(--muted);
}
.hero-avatars{display:flex}
.hero-avatars .av{
  width:28px;height:28px;border-radius:50%;border:2px solid white;
  margin-left:-8px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:white;
}
.av-1{background:var(--navy)}
.av-2{background:var(--brand)}
.av-3{background:#6366f1}
.av-4{background:#f59e0b}

/* ─── Hero Dashboard Mockup ──────────────────────────── */
.hero-visual{position:relative}
.hero-card{
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);border:1px solid var(--gray-100);
  overflow:hidden;animation:floatCard 6s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.dashboard-chrome{background:#f1f5f9;border-bottom:1px solid var(--gray-100);padding:12px 16px;display:flex;align-items:center;gap:8px}
.chrome-dots{display:flex;gap:5px}
.chrome-dot{width:10px;height:10px;border-radius:50%}
.chrome-dot.red{background:#ff5f57}
.chrome-dot.yellow{background:#ffbd2e}
.chrome-dot.green{background:#28c840}
.chrome-url{flex:1;background:white;border-radius:6px;padding:5px 12px;font-size:11px;color:var(--muted);margin:0 12px}

.dashboard-body{display:flex;height:280px}
.dash-sidebar{width:52px;background:var(--navy-mid);flex-shrink:0;padding:12px 8px;display:flex;flex-direction:column;gap:8px}
.dash-sidebar-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer}
.dash-sidebar-icon.active{background:var(--brand)}
.dash-sidebar-icon.inactive{opacity:.45}

.dash-main{flex:1;padding:16px;background:#fafbfc;overflow:hidden}
.dash-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.dash-kpi{background:white;border-radius:10px;padding:10px 12px;border:1px solid var(--gray-100)}
.dash-kpi-label{font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:600;letter-spacing:.06em}
.dash-kpi-value{font-size:18px;font-weight:800;color:var(--navy);margin-top:2px}
.dash-kpi-sub{font-size:9px;color:var(--brand);font-weight:600;margin-top:2px}

.dash-chart-row{display:grid;grid-template-columns:1.6fr 1fr;gap:8px}
.dash-chart-box{background:white;border-radius:10px;padding:12px;border:1px solid var(--gray-100)}
.dash-chart-title{font-size:10px;font-weight:700;color:var(--navy);margin-bottom:8px}
.dash-bar-group{display:flex;align-items:flex-end;gap:4px;height:80px}
.dash-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.dash-bar-fill{width:100%;border-radius:3px 3px 0 0;transition:height 0.5s ease}
.dash-bar-x{font-size:8px;color:var(--muted)}

.dash-donut{position:relative;width:60px;height:60px;margin:4px auto}
.dash-donut svg{transform:rotate(-90deg)}
.dash-donut-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--navy)}

/* ─── Floating Widgets ──────────────────────────────── */
.floating-widget{
  position:absolute;background:white;border-radius:12px;
  box-shadow:var(--shadow-lg);border:1px solid var(--gray-100);
  padding:10px 14px;font-size:12px;
}
.fw-top-right{top:-16px;right:-20px;min-width:140px}
.fw-bot-left{bottom:30px;left:-30px;min-width:130px}
.fw-label{font-size:10px;color:var(--muted);font-weight:600;margin-bottom:4px}
.fw-value{font-size:18px;font-weight:800;color:var(--navy)}
.fw-trend{font-size:10px;color:var(--brand);font-weight:600}
.fw-user{display:flex;align-items:center;gap:8px}
.fw-av{width:26px;height:26px;border-radius:50%;background:var(--brand-light);color:var(--brand);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fw-status{width:8px;height:8px;border-radius:50%;background:var(--brand);border:1.5px solid white}

/* ─── Logos Strip ──────────────────────────────────── */
.logos-strip{
  background:var(--off-white);border-top:1px solid var(--gray-100);
  border-bottom:1px solid var(--gray-100);padding:36px 0;
}
.logos-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-400);text-align:center;margin-bottom:24px;font-weight:600}
.logos-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap}
.logo-item{font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:var(--gray-400);display:flex;align-items:center;gap:6px;transition:var(--transition)}
.logo-item:hover{color:var(--navy)}

/* ─── Feature Cards Grid ────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.feature-card{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-md);padding:32px;
  transition:var(--transition);position:relative;overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--brand));
  transform:scaleX(0);transform-origin:left;transition:var(--transition);
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gray-200)}
.feature-card:hover::before{transform:scaleX(1)}

.feature-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:20px;
}
.fi-navy{background:rgba(25,62,98,.08);color:var(--navy)}
.fi-brand{background:var(--brand-light);color:var(--brand)}
.fi-purple{background:#f3f0ff;color:#7c3aed}
.fi-amber{background:#fffbeb;color:#b45309}
.fi-red{background:#fff1f2;color:#e11d48}
.fi-teal{background:#f0fdfa;color:#0d9488}

.feature-card h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:10px}
.feature-card p{font-size:14px;color:var(--muted);line-height:1.7}
.feature-card-tag{
  display:inline-block;margin-top:16px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--brand);
}

/* ─── Module Deep-Dive Split Rows ──────────────────── */
.module-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:72px;align-items:center;
  border-bottom:1px solid var(--gray-100);
  
}
.module-row.reverse{direction:rtl}
.module-row.reverse > *{direction:ltr}
.module-row:last-child{border-bottom:none}

.module-content .eyebrow{margin-bottom:16px}
.module-content h2{font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--navy);margin-bottom:16px}
.module-content .desc{font-size:16px;color:var(--muted);margin-bottom:28px;line-height:1.8}
.check-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
.check-icon{width:22px;height:22px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px}

.module-visual{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-lg);padding:28px;
  box-shadow:var(--shadow-md);
}

/* ─── UI Mockup Components ──────────────────────────── */
.mock-card{background:var(--off-white);border:1px solid var(--gray-100);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.mock-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mock-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;flex-shrink:0}
.mock-name{font-size:13px;font-weight:600;color:var(--navy)}
.mock-app{font-size:11px;color:var(--muted)}
.mock-status-pill{padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-left:auto}
.sp-active{background:var(--brand-light);color:var(--brand)}
.sp-idle{background:#fffbeb;color:#b45309}
.sp-offline{background:var(--gray-100);color:var(--gray-400)}
.mock-prog-track{height:5px;background:var(--gray-100);border-radius:3px;overflow:hidden;margin-top:4px}
.mock-prog-fill{height:100%;border-radius:3px;background:var(--brand)}

.timeline-row{display:flex;gap:2px;height:24px;border-radius:6px;overflow:hidden;border:1px solid var(--gray-100);margin-bottom:8px}
.tl-active{background:var(--navy);flex:5}
.tl-idle{background:#fcd34d;flex:1}
.tl-productive{background:var(--brand)}
.tl-unproductive{background:#f87171}
.tl-neutral{background:#94a3b8}

.screenshot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.screenshot-thumb{background:var(--gray-100);border-radius:8px;aspect-ratio:16/9;border:1px solid var(--gray-200);overflow:hidden;position:relative}
.screenshot-thumb .prod-badge{position:absolute;bottom:4px;right:4px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.sb-productive{background:var(--brand);color:white}
.sb-neutral{background:var(--gray-400);color:white}

.policy-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--gray-100)}
.policy-row:last-child{border-bottom:none}
.policy-name{font-size:12px;font-weight:600;color:var(--navy);flex:1}
.policy-type{font-size:10px;padding:2px 7px;border-radius:20px;background:rgba(25,62,98,.08);color:var(--navy);font-weight:600}
.policy-cat{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600}
.pc-productive{background:var(--brand-light);color:var(--brand)}
.pc-unproductive{background:#fff1f2;color:#e11d48}
.pc-neutral{background:var(--gray-100);color:var(--gray-600)}

.report-table-mini{width:100%;font-size:12px;border-collapse:collapse}
.report-table-mini th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:0 0 8px;text-align:left;border-bottom:1px solid var(--gray-100)}
.report-table-mini td{padding:8px 0;border-bottom:1px solid var(--gray-50);color:var(--text);font-weight:500;vertical-align:middle}
.report-table-mini tr:last-child td{border-bottom:none}
.report-score-bar{display:flex;align-items:center;gap:6px}
.rs-track{width:60px;height:5px;background:var(--gray-100);border-radius:3px;overflow:hidden}
.rs-fill{height:100%;border-radius:3px;background:var(--brand)}

/* ─── Metrics Strip ─────────────────────────────────── */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--gray-100);border-radius:var(--radius-md);overflow:hidden}
.metric-box{
  padding:40px 32px;text-align:center;
  border-right:1px solid var(--gray-100);
  background:var(--white);
  transition:var(--transition);
}
.metric-box:last-child{border-right:none}
.metric-box:hover{background:var(--off-white)}
.metric-num{font-family:'Outfit',sans-serif;font-size:clamp(32px,4vw,44px);font-weight:900;color:var(--navy);line-height:1}
.metric-num .accent{color:var(--brand)}
.metric-label{font-size:14px;color:var(--muted);margin-top:8px}

/* ─── FAB (Features · Advantages · Benefits) ─────────── */
.fab-section{background:var(--off-white);padding:100px 0}
.fab-tabs{display:flex;gap:4px;background:var(--white);border:1px solid var(--gray-100);border-radius:12px;padding:4px;margin:40px auto 50px;max-width:520px}
.fab-tab{
  flex:1;padding:11px;border-radius:10px;font-family:'Outfit',sans-serif;
  font-weight:600;font-size:14px;text-align:center;color:var(--muted);transition:var(--transition);
}
.fab-tab.active{background:var(--navy);color:var(--white);box-shadow:0 4px 12px rgba(25,62,98,.2)}
.fab-panel{display:none;grid-template-columns:repeat(3,1fr);gap:24px;animation:fadeUp .4s ease}
.fab-panel.active{display:grid}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.fab-card{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-md);padding:28px;transition:var(--transition);
}
.fab-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.fab-card-num{
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--brand);text-transform:uppercase;margin-bottom:12px;
}
.fab-card h4{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px}
.fab-card p{font-size:14px;color:var(--muted);line-height:1.7}

/* ─── How It Works ─────────────────────────────────── */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.how-grid::before{
  content:'';position:absolute;top:28px;left:40px;right:40px;height:2px;
  background:linear-gradient(90deg,var(--brand-muted),var(--navy-mid));
  z-index:0;
}
.how-step{text-align:center;position:relative;z-index:1}
.how-step-num{
  width:56px;height:56px;border-radius:50%;margin:0 auto 20px;
  background:var(--navy);color:var(--white);
  font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:4px solid var(--off-white);box-shadow:0 0 0 2px var(--navy);
}
.how-step.brand .how-step-num{background:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.how-step h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px}
.how-step p{font-size:13px;color:var(--muted);line-height:1.65}

/* ─── Testimonials ──────────────────────────────────── */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.testimonial-card{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-md);padding:32px;
  transition:var(--transition);
}
.testimonial-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.testimonial-stars{color:#f59e0b;margin-bottom:16px;font-size:14px}
.testimonial-quote{font-size:15px;color:var(--text);line-height:1.75;margin-bottom:24px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-av{width:40px;height:40px;border-radius:50%;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;color:white}
.av-navy{background:var(--navy)}
.av-brand{background:var(--brand)}
.av-purple{background:#7c3aed}
.author-name{font-size:14px;font-weight:700;color:var(--navy)}
.author-role{font-size:12px;color:var(--muted)}

/* ─── CTA Strip ─────────────────────────────────────── */
.cta-strip{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  padding:80px 0;position:relative;overflow:hidden;
}
.cta-strip::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 80% 50%,rgba(101,172,73,.15) 0%,transparent 60%);
}
.cta-strip .container{position:relative;z-index:1;text-align:center}
.cta-strip h2{font-size:clamp(28px,3.5vw,42px);font-weight:800;color:white;margin-bottom:14px}
.cta-strip p{color:rgba(255,255,255,.65);font-size:17px;margin-bottom:36px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-white{background:white;color:var(--navy);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn-ghost{background:rgba(255,255,255,.1);color:white;border:1.5px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}

/* ─── Pricing ──────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.plan-card{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-md);padding:32px;
  display:flex;flex-direction:column;transition:var(--transition);
}
.plan-card.popular{
  border-color:var(--brand);border-width:2px;
  box-shadow:0 8px 32px rgba(101,172,73,.15);
  position:relative;
}
.plan-popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:white;font-size:11px;font-weight:700;
  padding:4px 14px;border-radius:20px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 4px 10px rgba(101,172,73,.3);
}
.plan-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.plan-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.plan-price{font-family:'Outfit',sans-serif;font-size:44px;font-weight:900;color:var(--navy);line-height:1}
.plan-price sub{font-size:16px;font-weight:500;color:var(--muted)}
.plan-price sup{font-size:20px;font-weight:700;vertical-align:super}
.plan-period{font-size:13px;color:var(--muted);margin:6px 0 20px}
.plan-divider{height:1px;background:var(--gray-100);margin:20px 0}
.plan-features{list-style:none;flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text)}
.plan-check{color:var(--brand);font-weight:700;margin-top:2px}
.plan-x{color:var(--gray-200);font-weight:700;margin-top:2px}

.billing-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:40px}
.billing-label{font-weight:600;font-size:15px;color:var(--muted)}
.billing-label.active{color:var(--navy)}
.toggle-track{
  width:50px;height:28px;border-radius:20px;background:var(--navy);
  position:relative;cursor:pointer;box-shadow:0 2px 8px rgba(25,62,98,.3);
}
.toggle-knob{
  width:22px;height:22px;background:white;border-radius:50%;
  position:absolute;top:3px;left:3px;transition:var(--transition);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.toggle-track.annual .toggle-knob{left:25px}
.billing-save{background:var(--brand-light);color:var(--brand);font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}

/* ─── Contact ──────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-form-card{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-md);
}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:600;font-size:13px;color:var(--navy);margin-bottom:6px}
.form-input{
  width:100%;padding:12px 16px;border:1.5px solid var(--gray-100);border-radius:10px;
  font-size:14px;font-family:'Inter',sans-serif;color:var(--text);background:var(--off-white);outline:none;transition:var(--transition);
}
.form-input:focus{border-color:var(--brand);background:white;box-shadow:0 0 0 3px rgba(101,172,73,.1)}
.contact-info-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px}
.contact-icon{
  width:44px;height:44px;border-radius:12px;background:var(--brand-light);
  color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.ci-label{font-weight:700;font-size:15px;color:var(--navy);margin-bottom:4px}
.ci-value{font-size:14px;color:var(--muted)}

/* ─── Footer ──────────────────────────────────────── */
.footer{background:var(--navy-mid);color:rgba(255,255,255,.7);padding:70px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-brand-text{font-size:14px;color:rgba(255,255,255,.5);margin-top:14px;max-width:280px;line-height:1.75}
.footer-col h5{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:rgba(255,255,255,.6);transition:var(--transition)}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:13px;color:rgba(255,255,255,.35);
}
.footer-bottom-brand{display:flex;align-items:center;gap:10px}
.footer-logo-sm{height:55px;border-radius:7px;display:flex;align-items:center;justify-content:center}

/* ─── Responsive ──────────────────────────────────── */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;text-align:center;padding:40px 0 60px}
  .hero-sub{margin:0 auto 36px}
  .hero-actions{justify-content:center}
  .hero-social-proof{justify-content:center}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .module-row{grid-template-columns:1fr;gap:40px;padding:50px 0}
  .module-row.reverse{direction:ltr}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .metrics-grid .metric-box{border-bottom:1px solid var(--gray-100)}
  .how-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .how-grid::before{display:none}
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  section{padding:70px 0}
  .navbar{height:60px}
  .nav-links{
    display:none;position:fixed;top:60px;left:0;right:0;
    background:white;flex-direction:column;padding:20px;
    border-bottom:1px solid var(--gray-100);box-shadow:var(--shadow-md);
  }
  .nav-links.open{display:flex}
  .nav-hamburger{display:flex}
  .features-grid{grid-template-columns:1fr}
  .fab-panel{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .fab-tabs{flex-direction:column;max-width:100%}
  .how-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
}