/* ================================================================
   CAPLEIA STUDIO — Design System v2 (Lumineux & Conversion)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Palette ── */
  --purple:        #0F6B3A;
  --purple-light:  #1A8C4E;
  --purple-dark:   #0A4A28;
  --purple-xdark:  #0A1A0F;
  --orange:        #FF5C2B;
  --orange-dark:   #E0430F;
  --orange-light:  #FF7A50;
  --amber:         #F59E0B;
  --white:         #ffffff;
  --off-white:     #F5FAF7;
  --cream:         #FFF8F2;
  --light-gray:    #E8F5ED;
  --border:        #D0E8D8;
  --text:          #0F1A12;
  --text-mid:      #2D4A38;
  --text-muted:    #6A8E76;
  --dark-hero:     #0A1A0F;
  --dark-section:  #0F2A18;
  --card-white:    #FFFFFF;

  --nav-h: 70px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --transition: 0.22s ease;
  --shadow-sm: 0 2px 12px rgba(15,107,58,0.08);
  --shadow-md: 0 8px 32px rgba(15,107,58,0.14);
  --shadow-lg: 0 20px 60px rgba(15,107,58,0.18);
  --shadow-orange: 0 8px 32px rgba(255,92,43,0.35);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--white); color:var(--text); overflow-x:hidden; line-height:1.6; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul { list-style:none; }

/* ── Typography ── */
h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; font-weight:700; line-height:1.12; }
h1 { font-size:clamp(2.4rem, 5.5vw, 5rem); letter-spacing:-0.025em; }
h2 { font-size:clamp(1.8rem, 3vw, 2.8rem); letter-spacing:-0.02em; }
h3 { font-size:1.1rem; font-weight:700; }
p  { line-height:1.75; }
.serif { font-family:'Playfair Display',Georgia,serif; }

/* ── Utility ── */
.purple  { color:var(--purple); }
.orange  { color:var(--orange); }
.italic  { font-style:italic; }
.text-muted { color:var(--text-muted); }

.section-label {
  display:inline-block;
  font-size:0.7rem; font-weight:800;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--purple); margin-bottom:0.9rem;
}
.section--dark .section-label,
.section--hero .section-label { color:rgba(180,150,255,0.9); }

.page-hero {
  padding:calc(var(--nav-h) + 4rem) 5rem 4.5rem;
  background:linear-gradient(135deg, var(--dark-hero) 0%, #0F3020 50%, var(--dark-hero) 100%);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 80% 50%, rgba(255,92,43,0.12) 0%, transparent 60%),
             radial-gradient(ellipse at 20% 80%, rgba(15,107,58,0.3) 0%, transparent 50%);
  pointer-events:none;
}
.page-hero > * { position:relative; z-index:1; }
.page-hero h1 { color:var(--white); margin:0.3rem 0 1rem; }
.page-hero p  { max-width:540px; color:rgba(255,255,255,0.7); font-size:1.05rem; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.9rem 2rem;
  font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:50px; transition:all var(--transition);
}
.btn-primary {
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  color:var(--white);
  box-shadow:var(--shadow-orange);
}
.btn-primary:hover {
  background:linear-gradient(135deg, var(--orange-light), var(--orange));
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(255,92,43,0.45);
}
.btn-secondary {
  background:linear-gradient(135deg, var(--purple), var(--purple-dark));
  color:var(--white);
  box-shadow:var(--shadow-md);
}
.btn-secondary:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.btn-outline {
  background:transparent; color:var(--white);
  border:2px solid rgba(255,255,255,0.35);
}
.btn-outline:hover { border-color:var(--white); background:rgba(255,255,255,0.1); transform:translateY(-2px); }

.btn-outline-purple {
  background:transparent; color:var(--purple);
  border:2px solid var(--purple);
}
.btn-outline-purple:hover { background:var(--purple); color:var(--white); transform:translateY(-2px); }

.btn-ghost {
  background:transparent; color:var(--purple);
  border:2px solid var(--border);
}
.btn-ghost:hover { border-color:var(--purple); background:var(--off-white); }

.btn-lg  { padding:1.1rem 2.6rem; font-size:0.88rem; }
.btn-sm  { padding:0.5rem 1.2rem; font-size:0.72rem; }
.btn-block { width:100%; justify-content:center; }

/* ── NAV ── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4rem;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
}
.nav-logo {
  font-family:'Playfair Display',serif;
  font-size:1.3rem; font-weight:700;
  color:var(--text);
}
.nav-logo span { color:var(--orange); }

.nav-links { display:flex; align-items:center; gap:0.2rem; }
.nav-links a {
  padding:0.5rem 1rem;
  font-size:0.8rem; font-weight:600;
  color:var(--text-mid);
  border-radius:50px;
  transition:all var(--transition);
}
.nav-links a:hover { color:var(--purple); background:var(--off-white); }
.nav-links a.active { color:var(--purple); background:var(--light-gray); }

.nav-cta {
  margin-left:0.75rem !important;
  padding:0.6rem 1.5rem !important;
  background:linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  color:var(--white) !important;
  border-radius:50px !important;
  box-shadow:var(--shadow-orange) !important;
}
.nav-cta:hover { transform:translateY(-1px) !important; box-shadow:0 10px 30px rgba(255,92,43,0.4) !important; background:linear-gradient(135deg, var(--orange-light), var(--orange)) !important; }

.nav-burger { display:none; flex-direction:column; gap:5px; width:28px; justify-content:center; }
.nav-burger span { display:block; height:2px; background:var(--text); border-radius:2px; transition:all var(--transition); }

/* ── TRUST BAR ── */
.trust-bar {
  background:var(--white);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:1.4rem 5rem;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust-item {
  display:flex; align-items:center; gap:0.85rem;
  padding:0.5rem 1.5rem;
  border-right:1px solid var(--border);
}
.trust-item:last-child { border-right:none; }
.trust-icon { font-size:1.5rem; flex-shrink:0; }
.trust-text strong { display:block; font-size:0.82rem; font-weight:700; color:var(--text); margin-bottom:0.1rem; }
.trust-text span { font-size:0.75rem; color:var(--text-muted); }

/* ── SECTIONS ── */
.section { padding:6rem 5rem; }
.section--light  { background:var(--off-white); }
.section--cream  { background:var(--cream); }
.section--border { background:var(--white); border-top:1px solid var(--border); }
.section--dark   { background:var(--dark-section); color:var(--white); }
.section--dark h2 { color:var(--white); }
.section--dark .sub { color:rgba(255,255,255,0.6) !important; }
.section--purple {
  background:linear-gradient(135deg, var(--purple-xdark) 0%, #0F3020 100%);
  color:var(--white);
}

.section-header { margin-bottom:3.5rem; }
.section-header h2 { margin-top:0.4rem; }
.section-header .sub { margin-top:0.8rem; max-width:520px; color:var(--text-muted); font-size:0.95rem; }
.section-header.center { text-align:center; }
.section-header.center .sub { margin:0.8rem auto 0; }

/* ── CARDS ── */
.card {
  background:var(--card-white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all var(--transition);
  box-shadow:var(--shadow-sm);
}
.card:hover {
  border-color:var(--purple-light);
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.card-thumb {
  height:360px;
  background:linear-gradient(135deg, var(--light-gray), var(--off-white));
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; position:relative; overflow:hidden;
}
.card-thumb img {
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transition:transform .4s ease;
}
.card:hover .card-thumb img { transform:scale(1.04); }
.card-body { padding:1.4rem 1.6rem; }
.card-tag {
  font-size:0.65rem; font-weight:800; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--purple); margin-bottom:0.4rem;
}
.card-name { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:0.4rem; }
.card-desc { font-size:0.82rem; color:var(--text-muted); line-height:1.55; margin-bottom:0.9rem; }
.card-price { display:none; }
.card-price strong { color:var(--orange); font-size:1.1rem; font-weight:800; }

/* ── GRIDS ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }

/* ── FILTER TABS ── */
.filter-bar { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-pill {
  padding:0.5rem 1.2rem;
  font-size:0.78rem; font-weight:600;
  border:2px solid var(--border);
  border-radius:50px; color:var(--text-mid);
  background:var(--white); cursor:pointer;
  transition:all var(--transition);
}
.filter-pill:hover { border-color:var(--purple); color:var(--purple); }
.filter-pill.active { background:var(--purple); color:var(--white); border-color:var(--purple); box-shadow:var(--shadow-md); }

/* ── FORMS ── */
.form-group { margin-bottom:1.25rem; }
.form-label {
  display:block; font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-mid); margin-bottom:0.5rem;
}
.form-input, .form-select, .form-textarea {
  width:100%;
  background:var(--off-white);
  border:2px solid var(--border);
  color:var(--text); padding:0.8rem 1rem;
  font-family:'Inter',sans-serif; font-size:0.9rem;
  border-radius:var(--radius); outline:none;
  transition:border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--purple); background:var(--white); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted); }
.form-select { appearance:none; -webkit-appearance:none; cursor:pointer; }
.form-textarea { height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── ACCORDION ── */
.accordion-item {
  border:2px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:0.75rem; overflow:hidden;
  background:var(--white);
}
.accordion-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem; cursor:pointer;
  font-weight:700; font-size:0.95rem; color:var(--text);
  transition:background var(--transition);
}
.accordion-header:hover { background:var(--off-white); }
.accordion-header.open { background:var(--light-gray); color:var(--purple); }
.accordion-icon {
  width:24px; height:24px; flex-shrink:0;
  border:2px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; transition:transform var(--transition);
  color:var(--text-muted);
}
.accordion-header.open .accordion-icon { transform:rotate(180deg); border-color:var(--purple); color:var(--purple); }
.accordion-body {
  max-height:0; overflow:hidden;
  transition:max-height 0.4s ease;
  padding:0 1.5rem; font-size:0.9rem; color:var(--text-mid); line-height:1.75;
}
.accordion-body.open { max-height:400px; padding:0 1.5rem 1.5rem; }

/* ── STEPS ── */
.steps-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2.5rem; position:relative;
}
.steps-row::before {
  content:''; position:absolute; top:22px; left:12%; right:12%;
  height:2px;
  background:linear-gradient(to right, var(--purple), var(--orange));
  opacity:0.2;
}
.step { text-align:center; }
.step-num {
  width:46px; height:46px; margin:0 auto 1.2rem;
  background:linear-gradient(135deg, var(--purple), var(--purple-dark));
  color:var(--white); font-weight:800; font-size:0.85rem;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  box-shadow:0 4px 16px rgba(15,107,58,0.3);
}
.step h3 { font-size:0.95rem; font-weight:700; margin-bottom:0.5rem; font-family:'Inter',sans-serif; color:var(--text); }
.step p  { font-size:0.82rem; color:var(--text-muted); line-height:1.6; }

/* ── TESTIMONIALS ── */
.testi-card {
  background:var(--card-white);
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
}
.testi-card:hover { border-color:var(--purple-light); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.testi-stars { color:var(--amber); font-size:0.9rem; margin-bottom:0.9rem; letter-spacing:2px; }
.testi-text  { font-size:0.92rem; color:var(--text-mid); line-height:1.75; margin-bottom:1.3rem; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:0.75rem; }
.testi-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple), var(--orange));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem; color:var(--white); flex-shrink:0;
}
.testi-name  { font-weight:700; font-size:0.88rem; color:var(--text); }
.testi-role  { font-size:0.75rem; color:var(--text-muted); }

/* ── CHIP ── */
.chip {
  display:inline-flex; align-items:center;
  font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.28rem 0.75rem; border-radius:50px;
  border:1.5px solid rgba(15,107,58,0.25);
  color:var(--purple); background:rgba(15,107,58,0.06);
}
.chip-orange {
  border-color:rgba(255,92,43,0.3);
  color:var(--orange); background:rgba(255,92,43,0.07);
}

/* ── ANIMATIONS ── */
.fade-up {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── CTA BAND ── */
.cta-band {
  background:linear-gradient(135deg, var(--purple-xdark) 0%, #0F3020 40%, #0A4A28 100%);
  padding:6rem 5rem; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 50%, rgba(255,92,43,0.18) 0%, transparent 60%),
             radial-gradient(ellipse at 20% 70%, rgba(15,107,58,0.4) 0%, transparent 50%);
  pointer-events:none;
}
.cta-band > * { position:relative; z-index:1; }
.cta-band h2  { color:var(--white); margin-bottom:1rem; }
.cta-band p   { max-width:480px; margin:0 auto 2.5rem; color:rgba(255,255,255,0.7); }
.cta-band .btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── BREADCRUMB ── */
.breadcrumb {
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; color:rgba(255,255,255,0.4); margin-bottom:1.5rem;
}
.breadcrumb a { color:rgba(255,255,255,0.4); transition:color var(--transition); }
.breadcrumb a:hover { color:rgba(255,255,255,0.8); }
.breadcrumb .sep { color:rgba(255,255,255,0.2); }
.breadcrumb .current { color:rgba(255,255,255,0.75); }

/* ── FOOTER ── */
footer {
  background:var(--dark-hero);
  padding:5rem 5rem 2.5rem;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem; margin-bottom:4rem;
}
.footer-brand .nav-logo { color:var(--white); font-size:1.4rem; margin-bottom:1rem; }
.footer-brand .nav-logo span { color:var(--orange); }
.footer-brand p { font-size:0.88rem; color:rgba(255,255,255,0.4); line-height:1.7; max-width:260px; }
.footer-social { display:flex; gap:0.75rem; margin-top:1.5rem; }
.footer-social a {
  width:36px; height:36px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:rgba(255,255,255,0.5);
  transition:all var(--transition);
}
.footer-social a:hover { background:var(--orange); border-color:var(--orange); color:var(--white); }
.footer-col h4 {
  font-size:0.7rem; font-weight:800; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.4);
  margin-bottom:1.2rem;
}
.footer-col ul li { margin-bottom:0.65rem; }
.footer-col ul li a {
  font-size:0.88rem; color:rgba(255,255,255,0.5);
  transition:color var(--transition);
}
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:2rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.78rem; color:rgba(255,255,255,0.25);
}
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:rgba(255,255,255,0.25); transition:color var(--transition); }
.footer-bottom-links a:hover { color:var(--white); }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
  #nav { padding:0 2rem; }
  .section { padding:5rem 3rem; }
  .trust-bar { padding:1.4rem 3rem; }
  .page-hero { padding:calc(var(--nav-h)+3rem) 3rem 3rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .cta-band { padding:4rem 3rem; }
}
@media (max-width:900px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .steps-row { grid-template-columns:repeat(2,1fr); }
  .steps-row::before { display:none; }
  .trust-bar { grid-template-columns:repeat(2,1fr); padding:1.4rem 2rem; }
  .trust-item { border-right:none; border-bottom:1px solid var(--border); padding-bottom:1rem; }
}
@media (max-width:680px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .section { padding:3.5rem 1.5rem; }
  .trust-bar { grid-template-columns:1fr; padding:1.5rem; }
  .page-hero { padding:calc(var(--nav-h)+2rem) 1.5rem 2rem; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
  .cta-band { padding:3rem 1.5rem; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  #nav { padding:0 1.5rem; }
  .nav-mobile-open .nav-links {
    display:flex; flex-direction:column;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(20px);
    padding:1.5rem 1.5rem 2.5rem;
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    gap:0.25rem; z-index:199;
  }
  .nav-mobile-open .nav-links a { padding:0.85rem 1rem; font-size:1rem; color:var(--text); }
  .nav-mobile-open .nav-cta { margin:0.75rem 0 0 !important; padding:0.85rem 1rem !important; }
}