/* Flarenet — bold, energetic: flare orange + ink, Syne display, chunky outlines and offset shadows. */
:root {
  --ink: #16121d;
  --flare-deep: #c2410c;          /* orange that passes contrast for text on light backgrounds */
  --primary-soft: #ffe7da;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
}
body { letter-spacing: -.003em; }
a { color: var(--flare-deep); }
h1, h2 { font-weight: 800; letter-spacing: -.025em; }
h3 { font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
.eyebrow { color: var(--flare-deep); font-family: var(--font-display); letter-spacing: .12em; }
.lead { color: #4d4654; }
::selection { background: #ffd2bd; }

/* Header & nav */
.site-header { background: #fffaf6; border-bottom: 2px solid var(--ink); backdrop-filter: none; }
.main-nav a { font-weight: 600; }
.main-nav a[aria-current="page"] { color: var(--ink); background: var(--primary-soft); }

/* Buttons: chunky, outlined, offset shadow */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.btn-primary:hover { background: #ff6d38; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn-secondary { border: 2px solid var(--ink); }
.btn-secondary:hover { border-color: var(--ink); background: var(--primary-soft); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Cards, packages, steps */
.steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card, .price-card, .steps li, .faq details { border: 2px solid var(--ink); }
.card { box-shadow: none; }
a.card:hover { transform: translate(-2px, -2px); border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.card-icon { background: var(--primary); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; }
.price-card { box-shadow: none; }
.price-card.featured { border-width: 2px; box-shadow: 8px 8px 0 var(--primary), 8px 8px 0 2px var(--ink); }
.price-card .badge-top { border: 2px solid var(--ink); }
.price { font-weight: 800; }
.svc-card-foot { border-top: 2px dashed #e6d6ca; }
.svc-card-foot .icon, .svc-facts .icon, .trust-item .icon { color: var(--flare-deep); }
.callout { border-left-color: var(--primary); background: var(--primary-soft); }
.chip { border-color: #e6d6ca; }
a.chip:hover { border-color: var(--ink); color: var(--ink); }
.svc-hero { background: linear-gradient(180deg, #ffe7da, transparent 85%); }
.svc-compare .is-featured { background: #fff0e6; }

/* CTA band: ink with a flare glow */
.cta-band { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 90, 31, .55), transparent 55%), var(--ink); color: #fffaf6; border: 2px solid var(--ink); }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cta-band .btn-secondary { background: var(--primary); color: var(--ink); border-color: var(--primary); }
.cta-band .btn-secondary:hover { background: #ff6d38; }

/* Footer */
.site-footer { border-top: 2px solid var(--ink); background: #fffaf6; }
.site-footer a:hover { color: var(--flare-deep); }

/* ------------------------------------------------------------------ home: hero */
.fl-hero { padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 85% 30%, rgba(255, 176, 31, .25), transparent 40%),
    linear-gradient(transparent 31px, rgba(22, 18, 29, .05) 32px) 0 0 / 100% 32px,
    linear-gradient(90deg, transparent 31px, rgba(22, 18, 29, .05) 32px) 0 0 / 32px 100%; }
.fl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.fl-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.3rem); line-height: .98; letter-spacing: -.04em; margin-bottom: .35em; }
.fl-flare { position: relative; display: inline-block; color: var(--ink); z-index: 0; }
.fl-flare::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: -.02em; height: .28em; background: var(--primary); z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.fl-hero .lead { max-width: 46ch; font-size: clamp(1.08rem, 1.7vw, 1.28rem); }
.fl-kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; margin-bottom: 1.2rem; }
.fl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(255, 90, 31, .25); }
.fl-hero .hero-points .icon { color: var(--flare-deep); }
.fl-hero-art svg { width: 100%; height: auto; display: block; max-width: 460px; margin-left: auto; }

/* ticker */
.fl-ticker { background: var(--ink); color: #fffaf6; overflow: hidden; border-block: 2px solid var(--ink); }
.fl-ticker-track { display: flex; width: max-content; animation: fl-scroll 46s linear infinite; }
.fl-ticker ul { display: flex; list-style: none; margin: 0; padding: 14px 0; }
.fl-ticker li { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 2vw, 1.35rem); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; display: flex; align-items: center; }
.fl-ticker li::after { content: "\2726"; color: var(--primary); margin: 0 26px; font-size: .9em; }
@keyframes fl-scroll { to { transform: translateX(-50%); } }

/* bento of featured services */
.fl-make-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 32px; }
.fl-make-head h2 { margin: 0; }
.fl-make-head .lead { margin: 0; }
.fl-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fl-bento > .grid { display: contents; }
.fl-bento .svc-card:first-child { grid-column: span 2; grid-row: span 2; background: var(--primary); }
.fl-bento .svc-card:first-child h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.fl-bento .svc-card:first-child p.muted { color: var(--ink); font-size: 1.08rem; max-width: 46ch; }
.fl-bento .svc-card:first-child .card-icon { background: #fffaf6; width: 60px; height: 60px; }
.fl-bento .svc-card:first-child .svc-card-foot { border-top-color: rgba(22, 18, 29, .35); }
.fl-bento .svc-card:first-child .svc-card-foot .icon, .fl-bento .svc-card:first-child .muted { color: var(--ink); }
.fl-bento-ask { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius); background: var(--ink); color: #fffaf6; text-decoration: none; border: 2px solid var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.fl-bento-ask:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--primary); }
.fl-bento-ask strong { font-family: var(--font-display); font-size: 1.25rem; }
.fl-bento-ask span { color: #d9d2de; }
.fl-bento-ask-icon { color: var(--primary) !important; }
.fl-bento-ask-icon .icon { width: 32px; height: 32px; }
.fl-bento-ask-link { margin-top: auto; color: var(--primary) !important; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }

/* starter packages */
.fl-start { background: #fff; border-block: 2px solid var(--ink); }

/* process (ink section) */
.fl-process { background: var(--ink); color: #fffaf6; }
.fl-process .eyebrow { color: var(--primary); }
.fl-process .lead { color: #cfc7d6; }
.fl-process .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fl-process .steps li { background: transparent; border: 2px solid #3b3345; padding: 20px 18px; }
.fl-process .steps li::before { width: auto; height: auto; background: none; color: var(--primary); font-family: var(--font-display); font-size: 2.6rem; line-height: 1; display: block; place-items: initial; margin-bottom: 14px; content: "0" counter(step); }
.fl-process .steps h3 { color: #fffaf6; }
.fl-process .steps p { color: #cfc7d6; }

/* the deal */
.fl-deal-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.fl-deal-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.fl-deal-intro p { color: var(--muted); font-size: 1.05rem; }
.fl-deal-list { list-style: none; padding: 0; margin: 0; counter-reset: deal; display: grid; gap: 0; }
.fl-deal-list li { counter-increment: deal; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 22px 0; border-top: 2px solid var(--ink); }
.fl-deal-list li:last-child { border-bottom: 2px solid var(--ink); }
.fl-deal-list li::before { content: counter(deal, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--primary); grid-row: span 2; line-height: 1.1; -webkit-text-stroke: 1px var(--ink); }
.fl-deal-list h3 { margin: 0 0 .3em; font-size: 1.25rem; }
.fl-deal-list p { margin: 0; color: var(--muted); }

/* FAQ excerpt */
.fl-faq { background: var(--surface-2); border-top: 2px solid var(--ink); }
.fl-faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
.faq summary { font-family: var(--font-display); font-weight: 700; }

@media (max-width: 980px) {
  .fl-hero-grid, .fl-make-head, .fl-deal-grid, .fl-faq-grid { grid-template-columns: 1fr; }
  .fl-hero-art svg { max-width: 360px; margin: 0 auto; }
  .fl-process .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-deal-intro { position: static; }
  .fl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-bento .svc-card:first-child { grid-row: auto; }
}
@media (max-width: 760px) {
  .fl-bento, .fl-process .steps { grid-template-columns: 1fr; }
  .fl-bento .svc-card:first-child { grid-column: auto; }
  .fl-hero-art { order: -1; }
  .fl-hero-art svg { max-width: 240px; }
}