:root {
  --vfob-c-acc: #6b8e5a;
  --vfob-c-acc-dark: #4f6e41;
  --vfob-c-dark: #1c2018;
  --vfob-c-bg: #fbfaf5;
  --vfob-c-bg-soft: #f0eee3;
  --vfob-c-border: #d8d4c0;
  --vfob-c-text: #1c1f17;
  --vfob-c-muted: rgba(0,0,0,.55);
  --vfob-rhythm: 96px;
  --vfob-radius: 20px;
  --vfob-shadow: 0 4px 24px rgba(28,32,24,.08);
  --vfob-ff-h: 'DM Serif Display', system-ui, serif;
  --vfob-ff-b: 'DM Sans', system-ui, sans-serif;
  --vfob-hue-shift: 0deg;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--vfob-ff-b); background: var(--vfob-c-bg); color: var(--vfob-c-text); font-size: 1rem; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--vfob-c-acc); text-decoration: none; }
a:hover { color: var(--vfob-c-acc-dark); }
ul { list-style: none; }
address { font-style: normal; }

h1, h2, h3, h4 { font-family: var(--vfob-ff-h); line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .75rem; margin-top: 2rem; }
h3 { font-size: 1.15rem; margin-bottom: .5rem; }
p { margin-bottom: 1rem; }

.page-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.section { padding: var(--vfob-rhythm) 0; }
.section:nth-child(even) { background: var(--vfob-c-bg-soft); }

.button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  border-radius: var(--vfob-radius);
  font-family: var(--vfob-ff-b);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.button-acc { background: var(--vfob-c-acc); color: #fff; }
.button-acc:hover { background: var(--vfob-c-acc-dark); color: #fff; }
.button-out { background: transparent; border: 2px solid var(--vfob-c-acc); color: var(--vfob-c-acc); }
.button-out:hover { background: var(--vfob-c-acc); color: #fff; }

.header { background: var(--vfob-c-bg); border-bottom: 1px solid var(--vfob-c-border); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: .9rem; padding-bottom: .9rem; gap: 1rem; }
.header-logo { font-family: var(--vfob-ff-h); font-size: 1.3rem; font-weight: 700; color: var(--vfob-c-text); }
.header-logo:hover { color: var(--vfob-c-acc); }
.header-nav { display: flex; gap: 1.5rem; align-items: center; }
.header-link { color: var(--vfob-c-text); font-size: .95rem; font-weight: 500; transition: color .2s; }
.header-link:hover { color: var(--vfob-c-acc); }
.header-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.header-burger span { display: block; width: 24px; height: 2px; background: var(--vfob-c-text); border-radius: 2px; transition: .3s; }

.hero-section { background: var(--vfob-c-dark); color: #fff; padding: calc(var(--vfob-rhythm) * 1.2) 0; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero-content h1 { color: #fff; }
.hero-sub { color: rgba(255,255,255,.85); font-size: 1.1rem; margin-bottom: 1.5rem; }
.intro-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hero-chips { display: flex; gap: .6rem; flex-wrap: wrap; }
.intro-pill { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); padding: .3rem .8rem; border-radius: 99px; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; }
.hero-img-wrap { border-radius: var(--vfob-radius); overflow: hidden; }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--vfob-radius); }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.5rem; }
.tbl-cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl-cmp th { background: var(--vfob-c-acc); color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 600; white-space: nowrap; }
.tbl-cmp td { padding: .85rem 1rem; border-bottom: 1px solid var(--vfob-c-border); vertical-align: middle; }
.tbl-cmp tbody tr:hover { background: var(--vfob-c-bg-soft); }
.tbl-cmp .top-row td { background: rgba(107,142,90,.06); }
.tbl-name { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 160px; }
.tbl-logo { border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.tbl-badge { background: var(--vfob-c-acc); color: #fff; font-size: .72rem; padding: .2rem .55rem; border-radius: 99px; font-weight: 700; white-space: nowrap; }
.rating-glyph { color: #e8a838; font-weight: 700; font-size: .95rem; white-space: nowrap; }

.featured-section { background: var(--vfob-c-bg-soft); }
.featured { background: var(--vfob-c-bg); border-radius: var(--vfob-radius); box-shadow: var(--vfob-shadow); padding: 2.5rem; }
.featured-badge { display: inline-block; background: var(--vfob-c-acc); color: #fff; font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: 99px; margin-bottom: 1rem; }
.featured-content { display: flex; flex-direction: column; gap: .75rem; }
.featured-logo { margin-bottom: .5rem; }
.featured-rating { margin-bottom: .25rem; }
.featured-bullets { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.featured-bullets li { display: flex; align-items: flex-start; gap: .5rem; }
.featured-bullets i { color: var(--vfob-c-acc); margin-top: .2rem; flex-shrink: 0; }

.gallery-section { background: var(--vfob-c-bg); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.gallery-card { border-radius: var(--vfob-radius); overflow: hidden; box-shadow: var(--vfob-shadow); background: linear-gradient(135deg, var(--vfob-c-acc-dark), var(--vfob-c-acc)); }
.gallery-img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gallery-card p { padding: .75rem 1rem; font-weight: 600; color: var(--vfob-c-bg); background: var(--vfob-c-dark); }

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.step-card { background: var(--vfob-c-bg); border: none; box-shadow: var(--vfob-shadow); border-radius: var(--vfob-radius); padding: 2rem; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--vfob-c-acc); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--vfob-ff-h); font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }

.guides-section { background: var(--vfob-c-bg-soft); }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.guide-card { background: var(--vfob-c-bg); border: none; box-shadow: var(--vfob-shadow); border-radius: var(--vfob-radius); padding: 1.75rem; display: flex; flex-direction: column; gap: .5rem; color: var(--vfob-c-text); transition: box-shadow .2s; }
.guide-card:hover { box-shadow: 0 8px 32px rgba(28,32,24,.14); }
.guide-card h3 { color: var(--vfob-c-text); font-size: 1rem; }
.guide-card p { color: var(--vfob-c-muted); font-size: .9rem; flex: 1; }
.guide-link { color: var(--vfob-c-acc); font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: .35rem; margin-top: auto; }

.faq-section { background: var(--vfob-c-bg); }
.qna-wrap { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.qna { border: 1px solid var(--vfob-c-border); border-radius: var(--vfob-radius); overflow: hidden; background: var(--vfob-c-bg); box-shadow: var(--vfob-shadow); }
.qna-q { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; font-family: var(--vfob-ff-h); font-size: 1rem; }
.qna-q::-webkit-details-marker { display: none; }
.qna-q::after { content: '+'; font-size: 1.3rem; color: var(--vfob-c-acc); transition: transform .2s; flex-shrink: 0; }
details[open] > .qna-q::after { content: '−'; }
.qna-a { padding: 1rem 1.25rem; border-top: 1px solid var(--vfob-c-border); color: var(--vfob-c-muted); }

.cta-section { background: var(--vfob-c-dark); }
.cta-inner { text-align: center; color: #fff; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }

.footer { background: var(--vfob-c-dark); color: rgba(255,255,255,.8); padding: var(--vfob-rhythm) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 2rem; }
.footer-logo { font-family: var(--vfob-ff-h); font-size: 1.2rem; color: #fff; display: block; margin-bottom: .75rem; }
.ft-desc { font-size: .88rem; color: rgba(255,255,255,.65); margin-bottom: .75rem; line-height: 1.5; }
.ft-copy { font-size: .8rem; color: rgba(255,255,255,.4); }
.ft-col h4 { color: #fff; font-size: .9rem; margin-bottom: .75rem; font-family: var(--vfob-ff-b); text-transform: uppercase; letter-spacing: .05em; }
.ft-links { display: flex; flex-direction: column; gap: .4rem; }
.ft-links a { color: rgba(255,255,255,.7); font-size: .88rem; }
.ft-links a:hover { color: #fff; }
.ft-operator { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: .75rem; line-height: 1.6; }
.ft-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1rem; font-size: .8rem; color: rgba(255,255,255,.4); }

.gdpr { position: fixed; bottom: 0; left: 0; right: 0; background: var(--vfob-c-dark); color: rgba(255,255,255,.9); z-index: 9999; display: none; }
.gdpr-inner { max-width: 1240px; margin: 0 auto; padding: 1.25rem 20px; }
.gdpr-inner p { font-size: .9rem; margin-bottom: .75rem; }
.gdpr-inner a { color: var(--vfob-c-acc); }
.gdpr-btns { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.gdpr-prefs { margin-top: .75rem; }
.gdpr-row { margin-bottom: .5rem; font-size: .9rem; }
.gdpr-reopen { position: fixed; bottom: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--vfob-c-acc); color: #fff; border: none; font-size: 1.1rem; cursor: pointer; z-index: 9998; display: flex; align-items: center; justify-content: center; }

.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; color: var(--vfob-c-muted); padding: .75rem 0; margin-bottom: .5rem; }
.crumbs a { color: var(--vfob-c-muted); }
.crumbs a:hover { color: var(--vfob-c-acc); }
.crumbs__sep { opacity: .5; }

.review-layout { display: flex; gap: 2.5rem; align-items: flex-start; padding: var(--vfob-rhythm) 20px; max-width: 1240px; margin: 0 auto; }
.review-main { flex: 1; min-width: 0; }
.review-aside { width: 300px; flex-shrink: 0; }
.byline { color: var(--vfob-c-muted); font-size: .88rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.byline i { color: var(--vfob-c-acc); }
.byline-bottom { color: var(--vfob-c-muted); font-size: .85rem; margin-top: 2rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.meta-row { color: var(--vfob-c-muted); font-size: .88rem; margin-bottom: 1rem; }
.brand-hero { text-align: center; padding: 1.5rem; background: var(--vfob-c-bg-soft); border-radius: var(--vfob-radius); margin: 1rem 0; }
.brand-hero-logo { margin: 0 auto .75rem; }
.brand-hero-cap { font-size: .9rem; color: var(--vfob-c-muted); }
.rating-big { font-size: 1.3rem; margin: .75rem 0; }
.review-cta-top { margin-bottom: 1.5rem; }
.review-cta-bottom { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.pros, .cons { background: var(--vfob-c-bg); border: none; box-shadow: var(--vfob-shadow); border-radius: var(--vfob-radius); padding: 1.25rem; }
.pros h3, .cons h3 { font-size: 1rem; margin-bottom: .75rem; }
.pros ul li, .cons ul li { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; font-size: .9rem; }
.pros i { color: var(--vfob-c-acc); margin-top: .15rem; }
.cons i { color: #c0392b; margin-top: .15rem; }

.fact-table dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; background: var(--vfob-c-bg-soft); padding: 1.25rem; border-radius: var(--vfob-radius); margin: 1rem 0; }
.fact-table dt { color: var(--vfob-c-muted); font-size: .9rem; }
.fact-table dd { font-weight: 600; font-size: .9rem; }

.rbars { margin: 1.5rem 0; }
.rbars h3 { margin-bottom: 1rem; }
.rbar { display: grid; grid-template-columns: 1fr auto; gap: .4rem .75rem; margin-bottom: .75rem; align-items: center; font-size: .9rem; }
.rbar__track { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: var(--vfob-c-border); }
.rbar__fill { height: 100%; border-radius: 99px; background: var(--vfob-c-acc); }

.atglance { border: 1px solid var(--vfob-c-border); border-radius: var(--vfob-radius); padding: 1.25rem; background: var(--vfob-c-bg); box-shadow: var(--vfob-shadow); position: sticky; top: 80px; }
.atglance h4 { font-size: 1rem; margin-bottom: 1rem; font-family: var(--vfob-ff-h); }
.atglance dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.atglance dt { color: var(--vfob-c-muted); font-size: .88rem; }
.atglance dd { font-weight: 600; font-size: .88rem; text-align: right; }
.atglance .button { width: 100%; justify-content: center; }

.disclosure-box { font-size: .85rem; color: var(--vfob-c-muted); border-left: 3px solid var(--vfob-c-acc); padding: .6rem .85rem; background: var(--vfob-c-bg-soft); border-radius: 0 var(--vfob-radius) var(--vfob-radius) 0; margin: 1rem 0; }

.alt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.alt-card { background: var(--vfob-c-bg); border: none; box-shadow: var(--vfob-shadow); border-radius: var(--vfob-radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.alt-card strong { font-size: 1rem; }
.alt-card p { font-size: .88rem; color: var(--vfob-c-muted); flex: 1; }
.alt-card .button { margin-top: auto; justify-content: center; }

.guide-article { padding: var(--vfob-rhythm) 0; }
.guide-article h2 { margin-top: 2rem; }
.guide-article ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.guide-article ul li { margin-bottom: .4rem; }
.guide-hero-img { border-radius: var(--vfob-radius); margin: 1.5rem 0; width: 100%; height: auto; object-fit: cover; background: linear-gradient(135deg, var(--vfob-c-acc-dark), var(--vfob-c-acc)); }

.legal-page h2 { margin-top: 2rem; }
.legal-page ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-page ul li { margin-bottom: .4rem; }
.legal-page address { background: var(--vfob-c-bg-soft); padding: 1rem; border-radius: var(--vfob-radius); margin: 1rem 0; line-height: 1.8; }
.editor-card { display: flex; gap: 1.5rem; align-items: flex-start; background: var(--vfob-c-bg-soft); border-radius: var(--vfob-radius); padding: 1.5rem; margin: 1.5rem 0; }
.editor-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--vfob-c-acc); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--vfob-ff-h); font-size: 1.2rem; font-weight: 700; flex-shrink: 0; }

.cookie-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0; }
.cookie-table th { background: var(--vfob-c-bg-soft); padding: .6rem .85rem; text-align: left; border-bottom: 2px solid var(--vfob-c-border); }
.cookie-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--vfob-c-border); }

.not-found-wrap { text-align: center; padding: 4rem 0; }
.not-found-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .review-layout { flex-direction: column; }
  .review-aside { width: 100%; }
  .atglance { position: static; }
}

@media (max-width: 768px) {
  .header-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--vfob-c-bg); border-bottom: 1px solid var(--vfob-c-border); padding: 1rem 20px; gap: .75rem; z-index: 99; }
  .header-nav.open { display: flex; }
  .header-burger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-img-wrap { display: none; }
  .pros-cons { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .tbl-cmp { font-size: .82rem; }
  .tbl-cmp th, .tbl-cmp td { padding: .6rem .6rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .intro-cta { flex-direction: column; }
  .gdpr-btns { flex-direction: column; }
}