/* ==========================================================================
   Israeli Car — Components
   Reusable, class-based. Define once, use everywhere.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-sp-2);
    padding: 0.9rem 1.75rem;
    border-radius: var(--ic-radius-btn);
    border: 1px solid transparent;
    font-family: var(--ic-font-display);
    font-size: var(--ic-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: transform var(--ic-dur) var(--ic-ease),
                box-shadow var(--ic-dur) var(--ic-ease),
                background-color var(--ic-dur) var(--ic-ease),
                border-color var(--ic-dur) var(--ic-ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary {
    background: var(--ic-blue-500);
    color: var(--ic-white);
    box-shadow: var(--ic-shadow-sm);
}
.btn--primary:hover { background: var(--ic-blue-600); transform: translateY(-1px); box-shadow: var(--ic-shadow-md); }
.btn--primary:active { transform: translateY(0); }

.btn--outline {
    background: var(--ic-white);
    border-color: var(--ic-border-strong);
    color: var(--ic-ink);
}
.btn--outline:hover { border-color: var(--ic-blue-400); background: var(--ic-blue-50); color: var(--ic-blue-600); }

.btn--ghost {
    background: transparent;
    color: var(--ic-grey-300);
    padding-inline: var(--ic-sp-2);
}
.btn--ghost:hover { color: var(--ic-ink); }

.btn--sm { padding: 0.6rem 1.25rem; font-size: var(--ic-fs-xs); }
.btn--block { width: 100%; }

/* --- Badge ------------------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ic-sp-1);
    padding: 0.45rem 1rem;
    border-radius: var(--ic-radius-pill);
    border: 1px solid var(--ic-border-strong);
    background: var(--ic-blue-50);
    color: var(--ic-blue-600);
    font-size: var(--ic-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge svg { width: 14px; height: 14px; color: var(--ic-blue-500); }

/* --- Section header ----------------------------------------------------- */
.section-eyebrow {
    display: block;
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ic-blue-500);
    margin-bottom: var(--ic-sp-2);
}
.section-title {
    font-size: var(--ic-fs-3xl);
    margin-bottom: var(--ic-sp-3);
}
.section-lead {
    font-size: var(--ic-fs-lg);
    color: var(--ic-grey-300);
    max-width: 640px;
}
.section-header {
    margin-bottom: var(--ic-sp-7);
}
.section-header--center {
    text-align: center;
    margin-inline: auto;
}
.section-header--center .section-lead { margin-inline: auto; }
.section-lead--block { margin-bottom: var(--ic-sp-5); }

/* --- Card --------------------------------------------------------------- */
.card {
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-sp-5);
    transition: border-color var(--ic-dur) var(--ic-ease),
                box-shadow var(--ic-dur) var(--ic-ease),
                transform var(--ic-dur) var(--ic-ease);
}
.card:hover {
    border-color: var(--ic-border-strong);
    box-shadow: var(--ic-shadow-sm);
    transform: translateY(-3px);
}
.card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ic-radius-sm);
    background: var(--ic-blue-50);
    border: 1px solid var(--ic-blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ic-sp-4);
}
.card__icon svg { width: 26px; height: 26px; color: var(--ic-blue-500); }
.card__title {
    font-size: var(--ic-fs-lg);
    margin-bottom: var(--ic-sp-2);
}
.card__text {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
}

/* Card variant: tech partner (logo-style, quieter) */
.card--tech {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-sp-4);
}
.card--tech .card__icon { margin-bottom: 0; flex-shrink: 0; }

/* --- Stat tile ------------------------------------------------------------ */
.stat {
    text-align: center;
    padding: var(--ic-sp-5) var(--ic-sp-3);
}
.stat__num {
    font-family: var(--ic-font-display);
    font-size: var(--ic-fs-3xl);
    font-weight: 800;
    color: var(--ic-ink);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15em;
}
.stat__num .unit { font-size: var(--ic-fs-lg); color: var(--ic-blue-500); font-weight: 700; }
.stat__label {
    margin-top: var(--ic-sp-1);
    font-size: var(--ic-fs-xs);
    color: var(--ic-grey-300);
    letter-spacing: 0.02em;
}

/* --- Divider / rule ------------------------------------------------------- */
.rule {
    height: 1px;
    background: var(--ic-border);
    border: 0;
}

/* --- Reveal-on-scroll (JS toggles .is-visible) ---------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--ic-ease), transform 700ms var(--ic-ease);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Photo block with geometric accent chips ------------------------------ */
.photo-block {
    position: relative;
    isolation: isolate;
}
.photo-block__frame {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--ic-radius-lg);
    overflow: hidden;
    box-shadow: var(--ic-shadow-lg);
}
.photo-block__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-block__chip {
    position: absolute;
    border-radius: var(--ic-radius-sm);
    z-index: -1;
}
.photo-block__chip--gold {
    background: var(--ic-gold-500);
    width: 88px;
    height: 88px;
    top: -22px;
    inset-inline-start: -22px;
}
.photo-block__chip--blue {
    background: var(--ic-blue-500);
    width: 56px;
    height: 56px;
    bottom: -18px;
    inset-inline-end: 32px;
}
.photo-block__chip--outline {
    width: 120px;
    height: 120px;
    border: 2px solid var(--ic-border-strong);
    bottom: -30px;
    inset-inline-start: 40px;
}

/* Corner modifiers — override default positioning per placement */
.photo-block__badge {
    position: absolute;
    top: var(--ic-sp-3);
    inset-inline-end: var(--ic-sp-3);
    width: 44px;
    height: 44px;
    border-radius: var(--ic-radius-sm);
    background: var(--ic-white);
    box-shadow: var(--ic-shadow-md);
    padding: 4px;
    z-index: 1;
}
.photo-block__badge img,
.photo-block__badge svg {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.photo-block__chip--tl { top: -22px; bottom: auto; inset-inline-start: -22px; inset-inline-end: auto; }
.photo-block__chip--tr { top: -24px; bottom: auto; inset-inline-start: auto; inset-inline-end: -24px; }
.photo-block__chip--br { top: auto; bottom: -24px; inset-inline-start: auto; inset-inline-end: -20px; }

/* Shrink + pull chips inward on narrow screens so they never clip past the viewport edge */
@media (max-width: 560px) {
    .photo-block { margin-inline: var(--ic-sp-3); }
    .photo-block__chip--gold { width: 56px; height: 56px; top: -14px; inset-inline-start: -14px; }
    .photo-block__chip--blue { width: 40px; height: 40px; bottom: -12px; inset-inline-end: 20px; }
    .photo-block__chip--outline { width: 80px; height: 80px; bottom: -18px; inset-inline-start: 24px; }
    .photo-block__chip--tl { top: -14px; inset-inline-start: -14px; }
    .photo-block__chip--tr { top: -16px; inset-inline-end: -14px; }
    .photo-block__chip--br { bottom: -14px; inset-inline-end: -12px; }
    .photo-block__badge { width: 36px; height: 36px; }
}

/* --- Quote card ------------------------------------------------------------ */
.quote-card {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-4);
    background: var(--ic-white);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-sp-4) var(--ic-sp-5);
    box-shadow: var(--ic-shadow-md);
}
.quote-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ic-blue-50);
    border: 1px solid var(--ic-blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ic-font-display);
    font-weight: 700;
    color: var(--ic-blue-500);
    flex-shrink: 0;
}
.quote-card__text {
    font-size: var(--ic-fs-sm);
    color: var(--ic-ink);
    margin-bottom: var(--ic-sp-1);
}
.quote-card__name {
    font-size: var(--ic-fs-xs);
    color: var(--ic-grey-500);
}

@media (max-width: 480px) {
    .quote-card { flex-direction: column; align-items: flex-start; text-align: start; }
}

/* --- Tinted section (soft blue tint, replaces the earlier dark-navy block) - */
.section--tint {
    background: linear-gradient(180deg, var(--ic-blue-50), var(--ic-bg) 65%);
    border-block: 1px solid var(--ic-border);
}
.section--tint .section-eyebrow { color: var(--ic-blue-600); }

/* --- Number strip (light card row, arrow-separated per reference) --------- */
.number-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ic-sp-2) var(--ic-sp-5);
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-sp-5) var(--ic-sp-4);
    box-shadow: var(--ic-shadow-sm);
}
.number-strip__item {
    display: flex;
    align-items: baseline;
    gap: var(--ic-sp-2);
}
.number-strip__num {
    font-family: var(--ic-font-display);
    font-size: var(--ic-fs-2xl);
    font-weight: 800;
    color: var(--ic-blue-600);
}
.number-strip__label {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
}
.number-strip__sep {
    color: var(--ic-border-strong);
    font-size: var(--ic-fs-lg);
}
@media (max-width: 720px) {
    .number-strip__sep { display: none; }
    .number-strip { flex-direction: column; align-items: flex-start; gap: var(--ic-sp-3); }
}

/* --- Tech company profile card ---------------------------------------------- */
.tech-profile {
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-sp-6);
    margin-bottom: var(--ic-sp-6);
}
.tech-profile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ic-sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--ic-sp-4);
}
.tech-profile__id {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-3);
}
.tech-profile__icon {
    width: 132px;
    height: 56px;
    border-radius: var(--ic-radius-sm);
    background: var(--ic-white);
    border: 1px solid var(--ic-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--ic-sp-2) var(--ic-sp-3);
}
.tech-profile__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tech-profile__icon svg {
    width: 28px;
    height: 28px;
    color: var(--ic-blue-500);
    flex-shrink: 0;
}
.tech-profile__name {
    font-size: var(--ic-fs-xl);
    margin-bottom: 0.15em;
}
.tech-profile__name .tech-profile__alias {
    font-weight: 400;
    color: var(--ic-grey-500);
    font-size: 0.7em;
}
.tech-profile__meta {
    font-size: var(--ic-fs-xs);
    color: var(--ic-grey-500);
}
.tech-profile__category {
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ic-blue-600);
    background: var(--ic-blue-50);
    border-radius: var(--ic-radius-pill);
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
}

.tech-profile__lead {
    font-size: var(--ic-fs-base);
    color: var(--ic-grey-300);
    margin-bottom: var(--ic-sp-4);
}

.tech-profile__compare {
    background: var(--ic-bg-raised);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-sp-4);
}
.tech-profile__compare-title {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-1);
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    color: var(--ic-grey-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ic-sp-2);
}
.tech-profile__compare-title svg { width: 14px; height: 14px; color: var(--ic-blue-500); }
.tech-profile__compare-text {
    font-size: var(--ic-fs-sm);
    color: var(--ic-ink);
}
.tech-profile__compare-text strong { color: var(--ic-blue-600); }

/* Status note — used when a company's real-world status needs an honest caveat */
.tech-profile__status {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-sp-2);
    margin-top: var(--ic-sp-4);
    padding: var(--ic-sp-3) var(--ic-sp-4);
    background: #fdf6ec;
    border: 1px solid #f0dfb8;
    border-radius: var(--ic-radius-sm);
    font-size: var(--ic-fs-sm);
    color: #7a5a12;
}
.tech-profile__status svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15em; color: #b8860b; }

@media (max-width: 640px) {
    .tech-profile { padding: var(--ic-sp-4); }
    .tech-profile__head { flex-direction: column; align-items: stretch; }
    .tech-profile__id { flex-wrap: wrap; }
    .tech-profile__icon { width: 108px; height: 48px; }
    .tech-profile__category { align-self: flex-start; }
    .tech-profile__compare-text br { display: none; }
}

/* --- Tech directory toolbar: search + category filters --------------------- */
.tech-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--ic-sp-4);
    margin-bottom: var(--ic-sp-6);
}
.tech-search {
    position: relative;
    max-width: 420px;
}
.tech-search > svg {
    position: absolute;
    inset-inline-start: var(--ic-sp-3);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ic-grey-500);
    pointer-events: none;
}
.tech-search input {
    width: 100%;
    font: inherit;
    font-size: var(--ic-fs-sm);
    color: var(--ic-ink);
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border-strong);
    border-radius: var(--ic-radius-btn);
    padding: 0.75rem calc(var(--ic-sp-3) * 2 + 18px) 0.75rem calc(var(--ic-sp-3) * 2 + 18px);
    transition: border-color var(--ic-dur) var(--ic-ease), box-shadow var(--ic-dur) var(--ic-ease);
}
html[dir="rtl"] .tech-search input { padding: 0.75rem calc(var(--ic-sp-3) * 2 + 18px) 0.75rem calc(var(--ic-sp-3) * 2 + 18px); }
.tech-search input:focus {
    outline: none;
    border-color: var(--ic-blue-400);
    box-shadow: 0 0 0 3px var(--ic-blue-100);
}
.tech-search input::placeholder { color: var(--ic-grey-700); }

.tech-search__clear {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-end: var(--ic-sp-3);
    top: calc(50% + 1px);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ic-grey-500);
    transition: color var(--ic-dur) var(--ic-ease);
}
.tech-search__clear svg { width: 18px; height: 18px; }
.tech-search__clear:hover { color: var(--ic-ink); }
.tech-search.has-value .tech-search__clear { display: inline-flex; }

.tech-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ic-sp-2);
}
.tech-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--ic-sp-1);
    padding: 0.5rem 1rem;
    border-radius: var(--ic-radius-pill);
    border: 1px solid var(--ic-border-strong);
    background: var(--ic-bg-card);
    color: var(--ic-grey-300);
    font-size: var(--ic-fs-sm);
    font-weight: 600;
    transition: background-color var(--ic-dur) var(--ic-ease), border-color var(--ic-dur) var(--ic-ease), color var(--ic-dur) var(--ic-ease);
}
.tech-filter svg { width: 16px; height: 16px; }
.tech-filter__count {
    display: none;
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    opacity: 0.75;
}
.tech-filter:hover { border-color: var(--ic-blue-400); color: var(--ic-blue-600); }
.tech-filter.is-active {
    background: var(--ic-blue-500);
    border-color: var(--ic-blue-500);
    color: var(--ic-white);
}
.tech-filter.is-active .tech-filter__count { display: inline; }

.tech-empty {
    display: none;
    text-align: center;
    padding: var(--ic-sp-7) var(--ic-sp-4);
    color: var(--ic-grey-500);
    font-size: var(--ic-fs-base);
}
.tech-empty.is-visible { display: block; }

.tech-profile.is-hidden { display: none; }

/* --- Roadmap: vertical timeline ------------------------------------------- */
.roadmap {
    position: relative;
    max-width: 720px;
    margin-inline: auto;
}
.roadmap::before {
    content: "";
    position: absolute;
    inset-inline-start: 27px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ic-border-strong);
}
.roadmap-stage {
    position: relative;
    padding-inline-start: 76px;
    padding-bottom: var(--ic-sp-7);
}
.roadmap-stage:last-child { padding-bottom: 0; }

.roadmap-stage__marker {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ic-bg-card);
    border: 2px solid var(--ic-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.roadmap-stage__marker svg { width: 24px; height: 24px; color: var(--ic-grey-500); }

.roadmap-stage__number {
    position: absolute;
    top: -6px;
    inset-inline-end: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ic-bg-raised);
    border: 1px solid var(--ic-border-strong);
    color: var(--ic-grey-500);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roadmap-stage__head {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--ic-sp-1);
    padding-top: var(--ic-sp-1);
}
.roadmap-stage__title {
    font-size: var(--ic-fs-lg);
    font-weight: 700;
}
.roadmap-stage__text {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
    max-width: 520px;
}

.roadmap-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2rem 0.75rem;
    border-radius: var(--ic-radius-pill);
    font-size: var(--ic-fs-xs);
    font-weight: 700;
}
.roadmap-status--done { background: #e8f6f0; color: var(--ic-success); }
.roadmap-status--current { background: var(--ic-blue-50); color: var(--ic-blue-600); }
.roadmap-status--upcoming { background: var(--ic-bg-raised); color: var(--ic-grey-500); }

/* Done stage: filled marker */
.roadmap-stage--done .roadmap-stage__marker {
    background: var(--ic-success);
    border-color: var(--ic-success);
}
.roadmap-stage--done .roadmap-stage__marker svg { color: var(--ic-white); }

/* Current stage: highlighted, pulsing ring */
.roadmap-stage--current .roadmap-stage__marker {
    background: var(--ic-blue-500);
    border-color: var(--ic-blue-500);
    box-shadow: 0 0 0 5px var(--ic-blue-50);
}
.roadmap-stage--current .roadmap-stage__marker svg { color: var(--ic-white); }
.roadmap-stage--current .roadmap-stage__title { color: var(--ic-blue-600); }

/* Upcoming stage: muted */
.roadmap-stage--upcoming .roadmap-stage__title,
.roadmap-stage--upcoming .roadmap-stage__text { opacity: 0.7; }

@media (max-width: 560px) {
    .roadmap::before { inset-inline-start: 21px; }
    .roadmap-stage { padding-inline-start: 60px; }
    .roadmap-stage__marker { width: 44px; height: 44px; }
    .roadmap-stage__marker svg { width: 20px; height: 20px; }
}

/* Condensed roadmap preview (homepage) — no description text, tighter gaps */
.roadmap--preview {
    max-width: 560px;
    margin-inline: auto;
    margin-bottom: var(--ic-sp-6);
}
.roadmap--preview .roadmap-stage { padding-bottom: var(--ic-sp-5); }
.roadmap--preview .roadmap-stage__head { padding-top: var(--ic-sp-2); }

/* "See all" link wrapper under a preview grid/list */
.section-more {
    display: flex;
    justify-content: center;
    margin-top: var(--ic-sp-6);
}

/* --- Team member card ---------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ic-sp-5);
    max-width: 640px;
    margin-inline: auto;
}
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
    text-align: center;
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-sp-5);
}
.team-card__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-inline: auto;
    margin-bottom: var(--ic-sp-3);
    overflow: hidden;
    background: var(--ic-blue-50);
    border: 1px solid var(--ic-blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.team-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card__avatar span {
    font-family: var(--ic-font-display);
    font-size: var(--ic-fs-2xl);
    font-weight: 700;
    color: var(--ic-blue-500);
}
.team-card__name {
    font-size: var(--ic-fs-lg);
    margin-bottom: 0.2em;
}
.team-card__role {
    font-size: var(--ic-fs-sm);
    color: var(--ic-blue-600);
    font-weight: 600;
    margin-bottom: var(--ic-sp-2);
}
.team-card__bio {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
}

/* --- Form fields (contact form etc.) --------------------------------------- */
.form-card {
    max-width: 560px;
    margin-inline: auto;
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-sp-5);
}
.form-group { margin-bottom: var(--ic-sp-4); }
.form-label {
    display: block;
    font-size: var(--ic-fs-sm);
    font-weight: 600;
    color: var(--ic-ink);
    margin-bottom: var(--ic-sp-1);
}
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    font: inherit;
    font-size: var(--ic-fs-sm);
    color: var(--ic-ink);
    background: var(--ic-bg);
    border: 1px solid var(--ic-border-strong);
    border-radius: var(--ic-radius-btn);
    padding: 0.75rem var(--ic-sp-3);
    transition: border-color var(--ic-dur) var(--ic-ease), box-shadow var(--ic-dur) var(--ic-ease);
}
.form-textarea { resize: vertical; min-height: 110px; }
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--ic-blue-400);
    box-shadow: 0 0 0 3px var(--ic-blue-100);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ic-grey-700); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ic-sp-3); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: var(--ic-fs-xs); color: var(--ic-grey-500); margin-top: var(--ic-sp-1); }
.form-status {
    display: none;
    padding: var(--ic-sp-3);
    border-radius: var(--ic-radius-sm);
    font-size: var(--ic-fs-sm);
    margin-bottom: var(--ic-sp-4);
}
.form-status--ok { display: block; background: #e8f6f0; color: var(--ic-success); }
.form-status--err { display: block; background: #fdecec; color: #c0392b; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Blog card grid ---------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ic-sp-5);
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
    display: block;
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    overflow: hidden;
    transition: border-color var(--ic-dur) var(--ic-ease), box-shadow var(--ic-dur) var(--ic-ease), transform var(--ic-dur) var(--ic-ease);
}
.blog-card:hover {
    border-color: var(--ic-border-strong);
    box-shadow: var(--ic-shadow-md);
    transform: translateY(-3px);
}
.blog-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ic-bg-raised);
}
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: var(--ic-sp-4); }
.blog-card__category {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    color: var(--ic-blue-600);
    margin-bottom: var(--ic-sp-2);
}
.blog-card__category svg { width: 14px; height: 14px; }
.blog-card__title {
    font-size: var(--ic-fs-lg);
    margin-bottom: var(--ic-sp-2);
    color: var(--ic-ink);
}
.blog-card__excerpt {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
    margin-bottom: var(--ic-sp-3);
}
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-2);
    font-size: var(--ic-fs-xs);
    color: var(--ic-grey-500);
}
.blog-card__meta span:not(:last-child)::after { content: "·"; margin-inline-start: var(--ic-sp-2); }

/* --- Article page -------------------------------------------------------- */
.article {
    max-width: 720px;
    margin-inline: auto;
}
.article__meta {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-2);
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-500);
    margin-bottom: var(--ic-sp-3);
}
.article__meta span:not(:last-child)::after { content: "·"; margin-inline-start: var(--ic-sp-2); }
.article__title {
    font-size: var(--ic-fs-4xl);
    margin-bottom: var(--ic-sp-4);
}
.article__image {
    border-radius: var(--ic-radius-lg);
    overflow: hidden;
    margin-bottom: var(--ic-sp-6);
    box-shadow: var(--ic-shadow-md);
}
.article__image img { width: 100%; display: block; }
.article__body p {
    font-size: var(--ic-fs-lg);
    color: var(--ic-grey-300);
    line-height: 1.85;
    margin-bottom: var(--ic-sp-4);
}
.article__body p:first-child {
    font-size: var(--ic-fs-xl);
    color: var(--ic-ink);
}
.article__body h2 {
    font-size: var(--ic-fs-2xl);
    color: var(--ic-ink);
    margin-block: var(--ic-sp-6) var(--ic-sp-3);
}
.article__body h2:first-child { margin-top: 0; }
.article__body ul {
    margin-bottom: var(--ic-sp-4);
    padding-inline-start: var(--ic-sp-4);
}
.article__body li {
    font-size: var(--ic-fs-lg);
    color: var(--ic-grey-300);
    line-height: 1.85;
    list-style: disc;
    margin-bottom: var(--ic-sp-2);
}
.article__body li::marker { color: var(--ic-blue-400); }

/* --- Partner / logo strip --------------------------------------------------- */
.partner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ic-sp-6);
    opacity: 0.8;
}
.partner-strip__item {
    font-family: var(--ic-font-display);
    font-weight: 700;
    font-size: var(--ic-fs-lg);
    color: var(--ic-grey-500);
    letter-spacing: 0.01em;
}