/* webfront/css/pages/home.css — home page (/) only. Loaded after components/sections.css, which
 * provides every shared block (.wf-*). This file only holds what is unique to the home page:
 * the welcome strip, the feature-grid placement of cards 07-09 and the illustrative portal preview.
 */
.hp { overflow-x: clip; }

/* ---------------- welcome strip ---------------- */
.hp-welcome { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 45px; padding-block: 52px; }
.hp-welcome__mark { font-size: 39px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.hp-welcome__mark span { margin-left: 8px; color: var(--wf-red-bright); font-weight: 400; }
.hp-welcome p { max-width: 82ch; margin: 0; color: var(--wf-muted); font-size: 17px; line-height: 1.8; }
.hp-welcome p span { color: var(--wf-fg); font-weight: 600; }

/* ---------------- features: card placement ---------------- */
.hp-card--portal { grid-column: span 2; padding: 36px;
    background: radial-gradient(ellipse at 90% 80%, var(--wf-glow), transparent 65%), var(--wf-panel); }
.hp-card--portal h3 { max-width: none; font-size: 29px; }
.hp-card--skills { display: flex; flex-direction: column; justify-content: center; }
.hp-card--skills h3 { font-size: 27px; }

/* illustrative portal preview (labelled PREVIEW, no customer data) */
.hp-preview { margin-top: 28px; overflow: hidden; border: 1px solid var(--wf-border); border-radius: 10px; background: var(--wf-bg);
    box-shadow: var(--wf-shadow); transform: perspective(1000px) rotateX(2deg); font-size: 12px; }
.hp-preview__top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--wf-border);
    font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hp-preview__tag { margin-left: auto; color: var(--wf-muted); font-size: 9px; }
.hp-preview__row { display: flex; align-items: center; gap: 14px; padding: 22px 18px; }
.hp-preview__num { padding: 10px; border-radius: 6px; background: var(--wf-panel-2); color: var(--wf-red-bright); font-size: 11px; font-weight: 700; }
.hp-preview__row strong { display: block; font-size: 13px; line-height: 1.5; }
.hp-preview__row small { display: block; margin-top: 4px; color: var(--wf-muted); font-size: 11px; }
.hp-preview__status { margin-left: auto; padding: 5px 9px; border: 1px solid var(--wf-border); border-radius: 20px;
    color: var(--wf-red-bright); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hp-preview__tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 18px 20px; }
.hp-preview__tools span { padding: 11px 9px; border: 1px solid var(--wf-border); border-radius: 5px; background: var(--wf-panel);
    font-size: 10px; line-height: 1.5; text-align: center; }
.hp-preview__ai { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--wf-border); font-size: 12px; font-weight: 600; }
.hp-preview__ai > span { color: var(--wf-red-bright); font-size: 18px; }
.hp-preview__ai small { margin-left: auto; color: var(--wf-muted); font-size: 10px; font-weight: 400; }

/* ---------------- guides / reviews tweaks ---------------- */
.hp-guides .wf-head { margin-bottom: 30px; }
.hp-guides .wf-title { max-width: 780px; font-size: clamp(25px, 3vw, 38px); }
.hp-reviews { padding-bottom: 90px; }

@media (max-width: 900px) {
    .hp-features .wf-card--wide:nth-child(7), .hp-card--portal, .hp-card--skills { grid-column: span 2; }
    .hp-card--skills { min-height: 200px; }
}
@media (max-width: 600px) {
    .hp-welcome { display: block; padding-block: 34px; }
    .hp-welcome__mark { margin-bottom: 16px; font-size: 26px; }
    .hp-welcome p { font-size: 15px; line-height: 1.85; }
    .hp-card--portal, .hp-card--skills { padding: 24px 18px; }
    .hp-card--portal h3, .hp-card--skills h3 { font-size: 22px; }
    .hp-preview { transform: none; }
    .hp-preview__top { padding: 12px; }
    .hp-preview__row { gap: 10px; padding: 18px 12px; }
    .hp-preview__tools { grid-template-columns: repeat(2, 1fr); margin-inline: 12px; }
    .hp-preview__ai { flex-wrap: wrap; gap: 7px; padding: 12px; }
    .hp-reviews { padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-preview { transform: none; }
}