/*
Theme Name: 899 Per Month
Theme URI: https://marqetrix.com/
Author: Marqetrix Web Solutions
Author URI: https://marqetrix.com/
Description: A clean basic WordPress theme with simple responsive templates.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 899permonth
*/



:root {
  /* Core palette */
  --navy:       #0B1F3A;
  --navy2:      #142B4E;
  --navy3:      #1C3660;
  --gold:       #C8922A;
  --gold2:      #E0A83A;
  --gold3:      #F5D98A;
  --gold-bg:    #FBF5E8;
  --gold-line:  #EDD9A3;
  --cream:      #F9F7F3;
  --cream2:     #F2EDE4;
  --cream3:     #E8E0D2;
  --white:      #FFFFFF;
  --ink:        #0B1F3A;
  --body:       #3D5068;
  --mid:        #637A95;
  --muted:      #8FA3BB;
  --line:       #DDD5C5;
  --line2:      #EAE4DA;
  --green:      #1A6B3C;
  --green-bg:   #EBF8F1;
  --red:        #B83232;
  --shadow-sm:  0 1px 3px rgba(11,31,58,.06),0 2px 8px rgba(11,31,58,.04);
  --shadow:     0 4px 16px rgba(11,31,58,.08),0 1px 4px rgba(11,31,58,.04);
  --shadow-lg:  0 12px 40px rgba(11,31,58,.12),0 4px 12px rgba(11,31,58,.06);
  --shadow-xl:  0 24px 64px rgba(11,31,58,.18),0 6px 20px rgba(11,31,58,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:'DM Serif Display',Georgia,serif}

/* ── KEYFRAMES ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.a1{animation:fadeUp .75s .05s cubic-bezier(.16,1,.3,1) both}
.a2{animation:fadeUp .75s .18s cubic-bezier(.16,1,.3,1) both}
.a3{animation:fadeUp .75s .3s cubic-bezier(.16,1,.3,1) both}
.a4{animation:fadeUp .75s .42s cubic-bezier(.16,1,.3,1) both}
.a5{animation:fadeIn .9s .55s ease both}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:200;
  height:72px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line2);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;
}
.nav-logo{
  font-family:'DM Serif Display',serif;
  font-size:21px;color:var(--navy);
  text-decoration:none;letter-spacing:-.3px;
  display:flex;align-items:center;gap:10px;
}
.nav-logo-mark{
  width:34px;height:34px;border-radius:8px;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.nav-logo-mark svg{width:18px;height:18px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--mid);
  text-decoration:none;transition:color .15s;
}
.nav-links a:hover{color:var(--navy)}
.nav-right{display:flex;gap:10px;align-items:center}
.btn-ghost-nav{
  font-size:14px;font-weight:500;color:var(--navy);
  background:none;border:1.5px solid var(--line);border-radius:6px;
  padding:9px 20px;font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:all .15s;
}
.btn-ghost-nav:hover{border-color:var(--navy)}
.btn-cta-nav{
  font-size:14px;font-weight:600;color:var(--white);
  background:var(--navy);border:none;border-radius:6px;
  padding:10px 22px;font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:8px;
}
.btn-cta-nav .pill{
  background:var(--gold);color:var(--navy);
  border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;
}
.btn-cta-nav:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(11,31,58,.22)}

.site-header { position: sticky; top: 0; z-index: 9999; width: 100%; }

.main-nav { position: sticky; top: 0; z-index: 200; height: 72px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line2); display: flex; align-items: center; justify-content: space-between; padding: 0 60px; }

.nav-logo { font-family: 'DM Serif Display', serif; font-size: 21px; color: var(--navy); text-decoration: none; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; white-space: nowrap; z-index: 5; }

.nav-logo-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--navy); display: flex; align-items: center; justify-content: center; }

.nav-logo-mark svg { width: 18px; height: 18px; }

.nav-dropdown { display: flex; align-items: center; gap: 32px; }

.nav-links { display: flex; gap: 32px; align-items: center; }

.nav-links a { font-size: 14px; font-weight: 500; color: var(--mid); text-decoration: none; transition: color .15s; }

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

.nav-right { display: flex; gap: 10px; align-items: center; }

.btn-ghost-nav { font-size: 14px; font-weight: 500; color: var(--navy); background: none; border: 1.5px solid var(--line); border-radius: 6px; padding: 9px 20px; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .15s; }

.btn-ghost-nav:hover { border-color: var(--navy); }

.btn-cta-nav { font-size: 14px; font-weight: 600; color: var(--white); background: var(--navy); border: none; border-radius: 6px; padding: 10px 22px; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .18s; display: flex; align-items: center; gap: 8px; }

.btn-cta-nav .pill { background: var(--gold); color: var(--navy); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

.btn-cta-nav:hover { background: var(--navy2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(11, 31, 58, .22); }

.mobile-menu-toggle { display: none; }

.mobile-menu-icon { display: none; }

.main-nav {
  position: relative;
  top: 0;
  z-index: 200;
  height: 72px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}

.nav-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 21px;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}

.nav-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-logo-mark svg {
  width: 18px;
  height: 18px;
}

.nav-dropdown {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}

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

.nav-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-cta-nav {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all .18s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-cta-nav .pill {
  background: var(--gold);
  color: var(--navy);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.btn-cta-nav:hover {
  background: var(--navy2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(11, 31, 58, .22);
}

.mobile-menu-toggle {
  display: none;
}

.mobile-menu-icon {
  display: none;
}

/* ── FOOTER ── */
footer{
  background:var(--navy2);
  border-top:1px solid rgba(255,255,255,.06);
  padding:60px 60px 28px;
}
.footer-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:44px;max-width:1280px;margin:0 auto;
  padding-bottom:48px;margin-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand{}
.footer-logo{
  font-family:'DM Serif Display',serif;
  font-size:21px;color:var(--white);
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.footer-logo-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 2.5s ease-in-out infinite}
.footer-tagline{font-size:13px;color:rgba(255,255,255,.3);line-height:1.65;max-width:210px;font-weight:300}
.footer-heading{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.42);text-decoration:none;transition:color .15s;font-weight:300}
.footer-links a:hover{color:var(--gold2)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1280px;margin:0 auto;
  font-size:12px;color:rgba(255,255,255,.2);font-weight:300;
}
.footer-bottom-links{display:flex;gap:22px}
.footer-bottom-links a{color:rgba(255,255,255,.2);text-decoration:none;transition:color .15s}
.footer-bottom-links a:hover{color:rgba(255,255,255,.5)}