.aiweb-contact { padding-block-end: var(--space-16); }
@media (min-width: 768px) {
.aiweb-contact .aiweb-app { max-inline-size: var(--container-max); }
}
.aiweb-contact > .aiweb-home-section { margin-block-start: var(--space-12); }
.aiweb-contact > .aiweb-home-section:first-child { margin-block-start: var(--space-8); }
.aiweb-contact-hero__grid { display: grid; gap: var(--space-8); }
.aiweb-contact-hero__body { min-inline-size: 0; }
.aiweb-contact-hero__eyebrow {
display: inline-block;
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
margin-block-end: var(--space-4);
}
.aiweb-contact-hero__title {
font-size: clamp(var(--fs-h1), 5vw, calc(var(--fs-h1) + var(--space-4)));
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0 0 var(--space-4);
text-wrap: balance;
}
.aiweb-contact-hero__text {
color: var(--text-secondary);
font-size: var(--fs-body-lg);
line-height: 2;
margin-block-end: var(--space-6);
max-inline-size: 58ch;
text-wrap: pretty;
}
.aiweb-contact-hero__text p { margin: 0 0 var(--space-3); }
.aiweb-contact-hero__text p:last-child { margin-block-end: 0; }
.aiweb-contact-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.aiweb-contact-hero__actions .aiweb-btn--ghost { box-shadow: inset 0 0 0 1px var(--border); }
.aiweb-contact-hero__actions .aiweb-btn--ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent); }
.aiweb-contact-hero__aside { min-inline-size: 0; }
.aiweb-contact-hero__img {
inline-size: 100%; block-size: auto;
border-radius: var(--radius-lg); display: block;
box-shadow: var(--shadow-card);
}
.aiweb-contact-hero__card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-6);
aspect-ratio: 4 / 5;
padding: var(--space-8);
border-radius: var(--radius-lg);
background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
color: var(--text-on-primary);
overflow: hidden;
box-shadow: var(--shadow-floating);
isolation: isolate;
}
.aiweb-contact-hero__card::before {
content: "";
position: absolute;
inset-block-start: -25%;
inset-inline-start: -20%;
inline-size: 65%;
aspect-ratio: 1;
border-radius: var(--radius-pill);
background: radial-gradient(circle, color-mix(in srgb, var(--text-on-primary) 22%, transparent), transparent 70%);
z-index: -1;
}
.aiweb-contact-hero__card-brand {
font-size: clamp(var(--fs-h1), 6vw, calc(var(--fs-h1) + var(--space-5)));
font-weight: var(--fw-bold);
line-height: 1.1;
}
.aiweb-contact-hero__card-tag { font-size: var(--fs-body); opacity: .92; font-weight: var(--fw-medium); }
.aiweb-contact-hero__card-art {
position: absolute;
inset-block-end: -20%;
inset-inline-end: -14%;
inline-size: 58%;
aspect-ratio: 1;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--text-on-primary) 12%, transparent);
z-index: -1;
}
.aiweb-contact-stats {
list-style: none; padding: 0;
margin: var(--space-10) 0 0;
display: flex; flex-wrap: wrap;
border-block-start: 1px solid var(--border);
padding-block-start: var(--space-6);
}
.aiweb-contact-stats__item {
flex: 1 1 auto;
min-inline-size: 0;
display: flex; flex-direction: column; gap: var(--space-1);
padding-inline: var(--space-5);
text-align: start;
}
.aiweb-contact-stats__item:not(:first-child) { border-inline-start: 1px solid var(--border); }
.aiweb-contact-stats__item:first-child { padding-inline-start: 0; }
.aiweb-contact-stats__value {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
color: var(--text-primary);
line-height: 1.1;
}
.aiweb-contact-stats__label { font-size: var(--fs-caption); color: var(--text-secondary); }
@media (min-width: 768px) {
.aiweb-contact-hero__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: center;
gap: var(--space-12);
}
}
@media (min-width: 1024px) {
.aiweb-contact-hero__grid { gap: var(--space-16); }
.aiweb-contact-hero__card { aspect-ratio: 1 / 1.08; }
}
.aiweb-contact-cta { scroll-margin-block-start: calc(var(--header-h) + var(--space-4)); }
.aiweb-contact-cta__head { margin-block-end: var(--space-8); }
.aiweb-contact-cta__head .aiweb-section-header { margin-block-end: 0; }
.aiweb-contact-cta__lead {
color: var(--text-secondary);
margin: var(--space-3) 0 0;
max-inline-size: 60ch;
line-height: 1.9;
}
.aiweb-contact-cta__grid { display: grid; gap: var(--space-6); align-items: stretch; }
.aiweb-contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.aiweb-contact-form__row { display: grid; gap: var(--space-4); }
.aiweb-contact-field { display: flex; flex-direction: column; gap: var(--space-2); }
.aiweb-contact-field__label { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: var(--fw-medium); }
.aiweb-contact-field__input {
inline-size: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-primary);
font: inherit;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-contact-field__input::placeholder { color: var(--text-muted); }
.aiweb-contact-field__input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.aiweb-contact-field__input--area { resize: vertical; min-block-size: calc(var(--space-16) + var(--space-8)); }
.aiweb-contact-form__hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.aiweb-contact-form__submit { align-self: flex-start; margin-block-start: var(--space-2); }
.aiweb-contact-form__note { margin: 0; font-size: var(--fs-body); min-block-size: var(--space-5); }
.aiweb-contact-form__note.is-ok { color: var(--color-primary-fg); }
.aiweb-contact-form__note.is-error { color: var(--color-discount); }
.aiweb-contact-office {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
block-size: 100%;
}
.aiweb-contact-office__visual {
position: relative;
flex: 1 1 auto;
min-block-size: calc(var(--space-16) * 2 + var(--space-10));
display: grid; place-items: center;
background:
radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 60%),
var(--color-primary-soft);
}
.aiweb-contact-office__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.aiweb-contact-office__marker {
position: relative;
display: grid; place-items: center;
inline-size: var(--space-16); block-size: var(--space-16);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--color-primary-fg);
box-shadow: var(--shadow-card);
}
.aiweb-contact-office__marker::before {
content: "";
position: absolute;
inset: calc(-1 * var(--space-4));
border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.aiweb-contact-office__body { padding: var(--space-6); }
.aiweb-contact-office__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-h3); margin: 0 0 var(--space-3); color: var(--text-primary); }
.aiweb-contact-office__title svg { color: var(--color-primary-fg); }
.aiweb-contact-office__addr { color: var(--text-secondary); margin: 0 0 var(--space-2); line-height: 1.9; }
.aiweb-contact-office__hours { color: var(--text-muted); font-size: var(--fs-caption); margin: 0 0 var(--space-4); }
.aiweb-contact-office__dir { align-self: flex-start; }
@media (min-width: 768px) {
.aiweb-contact-form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.aiweb-contact-cta__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-10);
}
.aiweb-contact-cta__head .aiweb-section-header { flex: 0 0 auto; }
.aiweb-contact-cta__lead { margin: 0; max-inline-size: 44ch; }
.aiweb-contact-cta__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-10); }
}
.aiweb-contact-channels__grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
.aiweb-contact-channel {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
padding: var(--space-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
text-align: start;
color: var(--text-primary);
text-decoration: none;
block-size: 100%;
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
a.aiweb-contact-channel:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border));
}
.aiweb-contact-channel__icon {
display: grid; place-items: center;
inline-size: var(--space-12); block-size: var(--space-12);
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-contact-channel__label { font-weight: var(--fw-semibold); font-size: var(--fs-body-lg); }
.aiweb-contact-channel__value { font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
@media (min-width: 768px) { .aiweb-contact-channels__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .aiweb-contact-channels__grid { grid-template-columns: repeat(5, 1fr); } }
@media (prefers-reduced-motion: reduce) {
a.aiweb-contact-channel:hover { transform: none; }
}