/* ====================
   Base
   ==================== */
* { margin:0; padding:0; box-sizing:border-box }
:root{
  --ffw-blue:#0056A4; /* darker blue */
  --ffw-accent:#FF9800; /* orange accent */
  --ffw-dark:#071835;
  --ffw-ink:#0f172a;
  --ffw-muted:#334155;
  --ffw-bg:#f8fafc;
  --radius:12px;
  --shadow:0 8px 24px rgba(7,24,53,.08);
}
html,body{ height:100% }
body{
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ffw-ink);
  background: var(--ffw-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.container{ width:min(1120px, 92%); margin-inline:auto }

a
/* ====================
   Links & Buttons
   ==================== */
a{ color:inherit; text-decoration:none }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.875rem 1.1rem;
  font-weight:700;
  line-height:1;
  font-size: 1rem;
  letter-spacing: 0.2px;
  text-decoration:none;
  border-radius:12px;
  border:2px solid transparent;
  cursor:pointer;
  transition: transform .06s ease, filter .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background:var(--ffw-blue);
  border-color:var(--ffw-blue);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(.95) }
.btn-ghost{
  background:#fff;
  color:var(--ffw-blue);
  border-color: rgba(0,86,164,.25);
}
.btn-ghost:hover{
  background: rgba(0,86,164,.06);
  border-color: rgba(0,86,164,.4);
}
.pill{ display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .65rem; border-radius:999px; font-size:.9rem; background:#e6f7ff; color:#045275 }

/* ====================
   Header
   ==================== */
header{ position:sticky; top:0; background:#ffffffcc; backdrop-filter: blur(8px); border-bottom:1px solid #e5e7eb; z-index:10 }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 0 }
.logo{ display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.2px; color:var(--ffw-dark) }
.logo .mark{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--ffw-blue); color:#fff; font-weight:900 }
.logo .mark::after{ content:"▶▶"; font-size:.95rem; line-height:1 }
.nav-cta{ display:flex; gap:.6rem; align-items:center }
.nav-cta a{ font-weight:600 }

/* ====================
   Hero
   ==================== */
.hero{ padding:clamp(3rem,6vw,5rem) 0; text-align:center }
.hero h1{ font-size: clamp(2.2rem, 6.2vw, 3.6rem); line-height:1.08; color:var(--ffw-dark); letter-spacing:-.5px }
.hero p.lead{ font-size: clamp(1.05rem, 2.8vw, 1.35rem); color:var(--ffw-muted); margin:1rem auto 1.4rem; max-width:56ch }
.hero .cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1rem }
.hero .highlights{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:clamp(1.5rem,3vw,2rem) auto 0; max-width:880px }
.card{ background:#fff; border-radius:var(--radius); padding:clamp(1rem,2.5vw,1.25rem); box-shadow:var(--shadow); text-align:center }
.card h3{ font-size:1.05rem; margin-bottom:.35rem; color:var(--ffw-ink) }
.card p{ color:#475569; font-size:.98rem }
@media (max-width:800px){ .hero .highlights{ grid-template-columns:1fr } }

/* ====================
   Sections
   ==================== */
.section{ padding:clamp(2.2rem,5vw,3.5rem) 0 }
.section h2{ text-align:center; font-size: clamp(1.6rem,4.2vw,2.2rem); color:var(--ffw-dark); margin-bottom:1rem }
.section p.sub{ text-align:center; color:var(--ffw-muted); margin-bottom:1.8rem }

/* ====================
   Packages
   ==================== */
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
@media (max-width:960px){ .grid{ grid-template-columns:1fr } }
.price{ font-size:1.7rem; font-weight:800; color:var(--ffw-dark) }
.included{ margin-top:.6rem; color:#475569; font-size:.98rem }
.included li{ margin:.35rem 0; list-style:"✓  " inside }

/* ====================
   Process
   ==================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:.8rem }
.step{ background:#fff; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); text-align:center}
.step b{ display:block; margin-bottom:.25rem }
@media (max-width:960px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr } }

/* ====================
   FAQ
   ==================== */
details{ background:#fff; border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow) }
details+details{ margin-top:.75rem }
summary{ cursor:pointer; font-weight:600; color:var(--ffw-ink) }
details p{ margin-top:.6rem; color:#475569 }

/* ====================
   Form
   ==================== */
form input, form textarea, form select {
  width:100%; padding:.65rem .8rem; border:1px solid #cbd5e1;
  border-radius:8px; font:inherit; margin-top:.35rem
}
form textarea{ resize:vertical }
form p{ margin-bottom:1rem }

/* Contact form card */
.form-card{
  max-width:720px;
  margin:0 auto;
  padding:clamp(1rem,2.5vw,2rem);
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}
.form-card p{ margin:0 0 1rem 0 }
.form-card label{
  display:block;
  font-weight:600;
  color:var(--ffw-ink);
  margin-bottom:.4rem;
}
.form-card input,
.form-card select,
.form-card textarea{
  width:100%;
  border:1px solid #d5dbe7;
  border-radius:12px;
  padding:.875rem 1rem;
  background:#f8fafc;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  font:inherit;
}
.form-card textarea{ resize:vertical; min-height:160px }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  border-color:var(--ffw-blue);
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,86,164,.12);
}
.form-card select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%), linear-gradient(135deg,#94a3b8 50%,transparent 50%);
  background-position:calc(100% - 20px) 1.1em, calc(100% - 15px) 1.1em;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.form-card .actions{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:.5rem;
}

/* ====================
   Footer
   ==================== */
footer{ padding:2rem 0; text-align:center; color:#64748b; font-size:.95rem }
.tiny{ font-size:.9rem; color:#64748b }