/* maqet.io homepage — layout & section styles (UI kit only; not a token file). */

.mq-page { background: var(--c-paper); color: var(--text-body); }
.mq-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }

/* theme hooks driven by tweaks */
.mq-page[data-accent="blue"] { --c-accent: #2D6BFF; --c-accent-bright: #5388ff; --c-accent-deep: #1B4FCC; --c-accent-ink: #1B4FCC; --c-accent-soft: #E7EEFF; --c-accent-on: #06163F; }
.mq-page[data-accent="ink"] { --c-accent: #141417; --c-accent-bright: #232328; --c-accent-deep: #000; --c-accent-ink: #141417; --c-accent-soft: #E4E4E8; --c-accent-on: #F6F5F0; }

/* ---- NAV ---- */
.mq-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--bw) solid var(--c-ink-950); }
.mq-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mq-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mq-logo__word { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--text-strong); }
.mq-logo__dot { color: var(--c-accent-ink); }
.mq-nav__links { display: flex; gap: 28px; }
.mq-nav__links a { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--c-ink-700); text-decoration: none; }
.mq-nav__links a:hover { color: var(--c-ink-950); }
.mq-nav__cta { display: flex; align-items: center; gap: 12px; }
@media (max-width: 880px){ .mq-nav__links { display: none; } .mq-nav__cta .mq-btn--quiet { display: none; } }

/* ---- HERO ---- */
.mq-hero { padding: clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); }
.mq-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.mq-hero--stacked .mq-hero__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.mq-hero--stacked .mq-hero__proof { justify-content: center; }
.mq-hero--stacked .mq-hero__actions { justify-content: center; }
.mq-hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 6.5vw, 5.5rem); line-height: 0.95; letter-spacing: -0.045em; color: var(--text-strong); margin: 18px 0 0; text-wrap: balance; }
.mq-mark { position: relative; color: var(--c-accent-ink); white-space: nowrap; }
.mq-mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.34em; background: var(--c-accent); z-index: -1; border-radius: 2px; }
.mq-hero__sub { font-size: clamp(1.0625rem,1.4vw,1.25rem); line-height: 1.55; color: var(--c-ink-700); max-width: 30ch; margin: 22px 0 0; }
.mq-hero--stacked .mq-hero__sub { max-width: 52ch; }
.mq-hero__actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.mq-hero__proof { display: flex; align-items: center; gap: 22px; margin-top: 44px; flex-wrap: wrap; }
.mq-hero__proof .mq-metric__value { font-size: clamp(1.75rem,2.6vw,2.4rem); }
.mq-hero__sep { width: 1.5px; height: 38px; background: var(--c-ink-200); }

/* hero visual : wireframe -> converti */
.mq-hero__visual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; background: var(--c-white); border: var(--bw-bold) solid var(--c-ink-950); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-hard-lg); }
.mq-hero__visual.is-grid { background-color: var(--c-white); background-image: var(--bg-blueprint); background-size: 22px 22px; }
.mq-wf { padding: 8px 6px; min-height: 200px; }
.mq-wf__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-400); }
.mq-wf__tag--ok { color: var(--c-accent-deep); }
.mq-wf__ph { border: var(--bw-bold) dashed var(--c-ink-300); border-radius: 6px; }
.mq-wf__arrow { display: inline-flex; color: var(--c-ink-950); }
.mq-wf__arrow svg { width: 26px; height: 26px; }
.mq-blk { border-radius: 6px; }
.mq-blk--d { background: var(--c-ink-900); }
.mq-blk--ok { background: var(--c-accent); }
@media (max-width: 900px){ .mq-hero__grid { grid-template-columns: 1fr; } .mq-hero__visual { order: -1; } }

/* ---- TRUST ---- */
.mq-trust { border-top: var(--bw) solid var(--c-ink-950); border-bottom: var(--bw) solid var(--c-ink-950); background: var(--c-ink-950); }
.mq-trust__inner { display: flex; align-items: center; gap: 28px; padding: 16px var(--space-6); flex-wrap: wrap; }
.mq-trust__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-400); white-space: nowrap; }
.mq-trust__row { display: flex; gap: 26px; flex-wrap: wrap; }
.mq-trust__item { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--c-paper); letter-spacing: -0.01em; }

/* ---- SECTION shell ---- */
.mq-section { padding: var(--section-y) 0; }
.mq-section__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-bottom: clamp(2rem,4vw,3.5rem); max-width: 720px; }
.mq-section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,4vw,3.25rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--text-strong); margin: 0; text-wrap: balance; }

/* ---- SERVICES ---- */
.mq-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mq-service { display: flex; flex-direction: column; gap: 0; min-height: 240px; }
.mq-service__top { display: flex; align-items: center; justify-content: space-between; }
.mq-service__icon { display: inline-flex; }
.mq-service__icon svg { width: 26px; height: 26px; }
.mq-service__n { font-family: var(--font-mono); font-weight: 700; font-size: 13px; opacity: .5; }
.mq-service__tag { margin-top: 18px; }
.mq-service__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin: 14px 0 8px; }
.mq-service__desc { font-size: 14.5px; line-height: 1.5; margin: 0; }
.mq-service:not(.mq-card--accent) .mq-service__desc { color: var(--c-ink-600); }
@media (max-width: 980px){ .mq-services { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .mq-services { grid-template-columns: 1fr; } }

/* ---- METHOD ---- */
.mq-method { padding: var(--section-y) 0; border-top: var(--bw) solid var(--c-ink-950); border-bottom: var(--bw) solid var(--c-ink-950); }
.mq-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: var(--bw-bold) solid var(--c-ink-950); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-white); }
.mq-step { padding: 28px 24px 32px; border-right: var(--bw) solid var(--c-ink-200); display: flex; flex-direction: column; gap: 0; }
.mq-step:last-child { border-right: none; }
.mq-step__n { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--c-accent-ink); }
.mq-step__icon { display: inline-flex; margin: 18px 0 14px; }
.mq-step__icon svg { width: 28px; height: 28px; color: var(--c-ink-950); }
.mq-step__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 8px; }
.mq-step__desc { font-size: 14px; line-height: 1.5; color: var(--c-ink-600); margin: 0; }
@media (max-width: 860px){ .mq-steps { grid-template-columns: 1fr 1fr; } .mq-step:nth-child(2){ border-right: none; } .mq-step:nth-child(1),.mq-step:nth-child(2){ border-bottom: var(--bw) solid var(--c-ink-200);} }

/* ---- RESULTS / CASE ---- */
.mq-case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; padding: clamp(1.75rem,3vw,2.75rem) !important; }
.mq-case__left { display: flex; flex-direction: column; gap: 20px; }
.mq-case__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem,2vw,1.6rem); line-height: 1.35; color: var(--c-paper); letter-spacing: -0.01em; margin: 0; }
.mq-case__person { display: flex; align-items: center; gap: 12px; color: var(--c-ink-300); font-size: 14px; }
.mq-case__avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--c-accent); color: var(--c-accent-on); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.mq-case__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; align-content: center; padding-left: 36px; border-left: var(--bw) solid var(--c-ink-700); }
@media (max-width: 820px){ .mq-case { grid-template-columns: 1fr; } .mq-case__metrics { padding-left: 0; border-left: none; border-top: var(--bw) solid var(--c-ink-700); padding-top: 26px; } }

/* ---- CTA ---- */
.mq-cta { background: var(--c-ink-950); padding: var(--section-y) 0; color: var(--c-paper); }
.mq-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.mq-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem,3.6vw,3rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--c-paper); margin: 16px 0 0; }
.mq-cta__sub { font-size: 1.0625rem; line-height: 1.55; color: var(--c-ink-300); margin: 16px 0 0; max-width: 42ch; }
.mq-cta__list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.mq-cta__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--c-paper); font-weight: 500; }
.mq-cta__list svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; }
.mq-cta__form { background: var(--c-white) !important; }
.mq-cta__fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.mq-recaptcha { min-height: 78px; }
.mq-form__err { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--c-danger); margin: 0; }
.mq-form__err svg { width: 16px; height: 16px; flex: none; }
.mq-cta__done { text-align: center; padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mq-cta__check { width: 56px; height: 56px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-ink); display: inline-flex; align-items: center; justify-content: center; border: var(--bw-bold) solid var(--c-accent-deep); }
.mq-cta__check svg { width: 28px; height: 28px; }
.mq-cta__done h3 { margin: 4px 0 0; }
.mq-cta__done p { margin: 0; color: var(--c-ink-600); }
@media (max-width: 820px){ .mq-cta__grid { grid-template-columns: 1fr; } }

/* ---- FOOTER ---- */
.mq-footer { background: var(--c-ink-950); color: var(--c-ink-300); border-top: var(--bw) solid var(--c-ink-800); padding: clamp(2.5rem,5vw,4rem) 0 28px; }
.mq-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: var(--bw) solid var(--c-ink-800); }
.mq-footer__tag { font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-500); margin: 16px 0 0; letter-spacing: .04em; }
.mq-footer__col { display: flex; flex-direction: column; gap: 12px; }
.mq-footer__h { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-500); margin-bottom: 2px; }
.mq-footer__col a { color: var(--c-ink-300); font-size: 14.5px; text-decoration: none; }
.mq-footer__col a:hover { color: var(--c-accent); }
.mq-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; font-size: 13px; color: var(--c-ink-500); flex-wrap: wrap; gap: 8px; }
.mq-footer__mono { font-family: var(--font-mono); letter-spacing: .06em; }
@media (max-width: 760px){ .mq-footer__inner { grid-template-columns: 1fr 1fr; } }