/* ============================================================
   Anvilship — site stylesheet
   Brand: charcoal + forest green + accent green
   Type:  Outfit (headings) + DM Sans (body)
   ============================================================ */

:root {
  /* Brand palette */
  --charcoal:    #1A1A1A;
  --graphite:    #2D2D2D;
  --forest:      #2D6A4F;
  --forest-h:    #245840;
  --accent:      #52B788;
  --accent-h:    #40916C;
  --pale:        #B7E4C7;
  --warm-gray:   #6B6B6B;
  --light-gray:  #E8E8E8;
  --off-white:   #F5F5F0;
  --white:       #FFFFFF;

  /* Surfaces */
  --bg:          var(--off-white);
  --surface:     var(--white);
  --text:        var(--charcoal);
  --muted:       var(--warm-gray);
  --border:      var(--light-gray);

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* Type scale */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;
  --t-4xl:  48px;
  --t-5xl:  64px;

  /* Layout */
  --max-width: 1200px;
  --radius:    14px;
  --radius-sm: 8px;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4 { font-family: 'Outfit', -apple-system, sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--t-5xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }

@media (max-width: 720px) {
  h1 { font-size: var(--t-4xl); }
  h2 { font-size: var(--t-2xl); }
}

/* ============================================================
   Layout helpers
   ============================================================ */

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

.section {
  padding: var(--s9) 0;
}
.section-tight { padding: var(--s8) 0; }

@media (max-width: 720px) {
  .section { padding: var(--s8) 0; }
  .section-tight { padding: var(--s7) 0; }
}

.muted { color: var(--muted); }
.center { text-align: center; }
.eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--forest);
  margin-bottom: var(--s3);
}
.eyebrow.on-dark { color: var(--accent); }

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 245, 240, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  max-width: var(--max-width);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  color: var(--charcoal);
}
.brand-icon { width: 32px; height: 32px; }
.brand-name span { color: var(--forest); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.nav-links a {
  font-size: var(--t-sm);
  color: var(--charcoal);
  font-weight: 500;
}
.nav-links a:hover { color: var(--forest); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--s2) var(--s4);
  background: var(--charcoal);
  color: var(--white) !important;
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--forest) !important; }

.nav-toggle { display: none; }

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--s2);
  }
  .nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--charcoal);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: var(--s3) var(--s5);
  }
  .nav-links.active { display: flex; }
  .nav-links a {
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a:last-child { border-bottom: none; }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.15s;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--forest);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--forest-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(45, 106, 79, 0.25);
}
.btn-dark {
  background: var(--charcoal);
  color: var(--white);
}
.btn-dark:hover {
  background: var(--graphite);
}
.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-ghost:hover {
  background: var(--charcoal);
  color: var(--white);
}
.btn-ghost.on-dark {
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.btn-ghost.on-dark:hover {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}
.btn-lg {
  padding: var(--s4) var(--s6);
  font-size: var(--t-lg);
}

/* ============================================================
   Hero (charcoal background)
   ============================================================ */

.hero {
  background: var(--charcoal);
  color: var(--white);
  padding: var(--s9) 0 var(--s8);
  position: relative;
  overflow: hidden;
}
.hero-content { max-width: 820px; }
.hero-content .eyebrow { display: inline-block; }
.hero h1 {
  color: var(--white);
  margin-bottom: var(--s5);
}
.hero h1 .accent { color: var(--accent); }
.hero p.lede {
  font-size: var(--t-xl);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--s6);
  max-width: 680px;
}
.hero-actions {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.hero-meta {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.5);
}

/* Two-column hero with screenshot on the right */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: center;
}
.hero-split .hero-content { max-width: none; }
.hero-split .hero-content p.lede { max-width: none; }
.hero-visual { position: relative; }

/* Browser/app window frame around screenshot */
.window-frame {
  background: #2D2D2D;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.4s ease;
}
.window-frame:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg);
}
.window-bar {
  background: #1F1F1F;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.window-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green  { background: #28CA41; }
.window-title {
  margin-left: 12px;
  color: rgba(255,255,255,0.55);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.window-frame img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .window-frame {
    transform: none;
  }
  .window-frame:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  .hero { padding: var(--s8) 0 var(--s7); }
  .hero p.lede { font-size: var(--t-lg); }
}

/* ============================================================
   Sections — generic
   ============================================================ */

.section-header {
  max-width: 720px;
  margin: 0 auto var(--s7);
  text-align: center;
}
.section-header.left { text-align: left; margin-left: 0; }
.section-header h2 { margin-bottom: var(--s4); }
.section-header p {
  font-size: var(--t-lg);
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto;
}
.section-header.left p { margin-left: 0; }

.section-dark {
  background: var(--charcoal);
  color: var(--white);
}
.section-dark h2 { color: var(--white); }
.section-dark .section-header p { color: rgba(255,255,255,0.65); }

.section-forest {
  background: var(--forest);
  color: var(--white);
}
.section-forest h2 { color: var(--white); }
.section-forest .section-header p { color: rgba(255,255,255,0.85); }

/* ============================================================
   Cards
   ============================================================ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.cards.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards.cards-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }

@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards.cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards, .cards.cards-2, .cards.cards-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s6);
  transition: all 0.15s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--pale);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: var(--s4);
}
.card h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s2);
}
.card p {
  color: var(--muted);
  font-size: var(--t-base);
}

.card-dark {
  background: var(--graphite);
  border-color: rgba(255,255,255,0.08);
}
.card-dark h3 { color: var(--white); }
.card-dark p { color: rgba(255,255,255,0.65); }
.card-dark:hover { border-color: var(--accent); }
.card-dark .card-icon { background: rgba(82,183,136,0.15); color: var(--accent); }

/* ============================================================
   Step list (numbered)
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: var(--s5); }
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: var(--t-base);
  margin-bottom: var(--s4);
}
.step h3 { margin-bottom: var(--s3); }
.step p { color: var(--muted); }

/* ============================================================
   Pricing table
   ============================================================ */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s7);
}
.price-card.featured {
  border-color: var(--forest);
  position: relative;
}
.price-card.featured::before {
  content: "Recommended";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--forest);
  color: var(--white);
  padding: var(--s1) var(--s4);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: var(--t-xl);
  margin-bottom: var(--s2);
}
.price-amount {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: var(--t-4xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s1);
}
.price-amount .currency {
  font-size: var(--t-xl);
  color: var(--muted);
  font-weight: 500;
  margin-right: var(--s1);
}
.price-period {
  color: var(--muted);
  font-size: var(--t-sm);
  margin-bottom: var(--s5);
}
.price-features { margin-bottom: var(--s5); }
.price-features li {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-base);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.price-features li:last-child { border-bottom: none; }
.price-features li::before {
  content: "✓";
  color: var(--forest);
  font-weight: 700;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  padding: var(--s5) 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: var(--t-lg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  color: var(--charcoal);
}
.faq-question::after {
  content: "+";
  font-size: var(--t-2xl);
  color: var(--forest);
  transition: transform 0.2s;
  font-weight: 300;
  line-height: 1;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  display: none;
  padding-bottom: var(--s5);
  color: var(--muted);
  line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; }

/* ============================================================
   CTA banner
   ============================================================ */

.cta-banner {
  background: var(--forest);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--s8) var(--s7);
  text-align: center;
}
.cta-banner h2 {
  color: var(--white);
  margin-bottom: var(--s4);
}
.cta-banner p {
  font-size: var(--t-lg);
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto var(--s5);
}

/* ============================================================
   Footer
   ============================================================ */

footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.65);
  padding: var(--s8) 0 var(--s5);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s7);
  margin-bottom: var(--s7);
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}
.footer-brand { color: var(--white); }
.footer-brand p {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.5);
  max-width: 280px;
}
.footer-col h4 {
  color: var(--white);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s4);
}
.footer-col ul li { margin-bottom: var(--s2); }
.footer-col a {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.65);
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--t-xs);
  color: rgba(255,255,255,0.45);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* ============================================================
   Misc
   ============================================================ */

.feature-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--t-lg);
  line-height: 1.7;
}
.feature-prose p { margin-bottom: var(--s4); }
.feature-prose strong { color: var(--charcoal); }

.note-box {
  background: var(--pale);
  border-left: 4px solid var(--forest);
  padding: var(--s4) var(--s5);
  border-radius: var(--radius-sm);
  font-size: var(--t-base);
  color: var(--charcoal);
  margin: var(--s5) 0;
}
.note-box strong { color: var(--forest); }

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s7);
  display: flex;
  gap: var(--s6);
  align-items: flex-start;
  transition: all 0.15s;
}
.product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
@media (max-width: 720px) {
  .product-card { flex-direction: column; gap: var(--s4); padding: var(--s5); }
}
.product-card .product-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card h3 {
  font-size: var(--t-2xl);
  margin-bottom: var(--s2);
}
.product-card .product-tagline {
  color: var(--muted);
  margin-bottom: var(--s4);
}
.product-card .product-status {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
.status-live { background: var(--pale); color: var(--forest); }
.status-beta { background: #FEF3C7; color: #92400E; }