/* ============================================================
* Aman Labs theme stylesheet
* Mobile-first. One file. Hand-written. No build step.
* Brand: Sora type, white background, blue/green/orange accents,
* red logo-dot accent. Matches the heyaman/aman-portfolio references.
* ============================================================ */
/* ---------- Tokens ---------- */
:root {
--brand-blue: #2563eb;
--brand-blue-hover: #1d4ed8;
--brand-green: #16a34a;
--brand-orange: #f97316;
--brand-surface: #f6f7fb;
--brand-muted: #6b7280;
--brand-border: rgba(15,23,42,0.08);
--brand-border-dark: rgba(15,23,42,0.16);
--brand-text: #16161d;
--brand-bg: #ffffff;
--logo-dot: #ef4444;
--max-w: 64rem;
--radius-pill: 999px;
--radius-md: 12px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 8px 30px rgba(0,0,0,0.08);
--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.62;
color: var(--brand-text);
background: var(--brand-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
letter-spacing: -0.005em;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 4px; }
.al-skip-link {
position: absolute; left: -9999px; top: 0; z-index: 9999;
background: #000; color: #fff; padding: .75rem 1rem; border-radius: 0 0 8px 0;
}
.al-skip-link:focus { left: 0; }
/* ---------- Container ---------- */
.al-container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 1.25rem;
}
@media (min-width: 640px) { .al-container { padding: 0 1.5rem; } }
@media (min-width: 768px) { .al-container { padding: 0 2rem; } }
@media (min-width: 1024px) { .al-container { padding: 0 2.5rem; } }
.al-container--center { text-align: center; }
/* ---------- Type ---------- */
.al-h1 {
font-size: clamp(1.875rem, 5vw + 1rem, 4rem);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 600;
margin: 0 0 1rem;
}
.al-h1--display {
font-size: clamp(2rem, 6vw + 1rem, 5rem);
letter-spacing: -0.03em;
}
.al-h1-em {
display: inline-block;
color: var(--brand-blue);
font-style: normal;
position: relative;
}
.al-h2 {
font-size: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);
line-height: 1.15;
letter-spacing: -0.015em;
font-weight: 600;
margin: 0 0 .75rem;
}
.al-h3 {
font-size: clamp(1.125rem, 1vw + .75rem, 1.375rem);
font-weight: 600;
margin: 0 0 .5rem;
}
.al-lead {
font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
color: #1f2937;
max-width: 56ch;
margin: 0 0 1.5rem;
}
.al-eyebrow {
font-family: var(--font-mono);
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-muted);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: .5rem;
}
.al-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-muted);
}
.al-dot--blue { background: var(--brand-blue); }
.al-dot--green { background: var(--brand-green); }
.al-dot--orange { background: var(--brand-orange); }
.al-muted { color: var(--brand-muted); }
/* ---------- Layout: header ---------- */
/* Horizontal-overflow guard: a wide element (e.g. a stray inline form) must never
make the page scroll sideways or the sticky header will appear to "drift". Clip on
the wrapper, not html/body, so position:sticky on the header keeps working. */
html { overflow-x: clip; }
.al-main { overflow-x: clip; }
.al-site-header {
position: -webkit-sticky;
position: sticky;
top: 0; z-index: 100;
background: rgba(255,255,255,0.9);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--brand-border);
}
.al-header-inner {
display: flex; align-items: center; justify-content: space-between;
height: 64px;
}
.al-brand {
display: inline-flex; align-items: center;
font-weight: 700; letter-spacing: -0.02em;
font-size: 1.125rem;
color: var(--brand-text);
flex-shrink: 0;
line-height: 1;
}
.al-brand svg { height: 32px; width: auto; display: block; color: var(--brand-text); }
.al-logo-img { height: 36px; width: auto; }
.al-wordmark { color: var(--brand-text); display: inline-flex; align-items: baseline; }
.al-wordmark-dot { color: var(--logo-dot); }
/* In dark-background contexts (footer) the wordmark inherits white via currentColor */
.al-site-footer .al-brand svg { color: #ffffff; }
.al-site-footer .al-brand,
.al-site-footer .al-wordmark { color: #ffffff; }
/* ---------- Nav ---------- */
.al-nav-toggle-input { display: none; }
.al-nav-toggle {
display: none;
width: 44px; height: 44px;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
cursor: pointer;
}
.al-nav-toggle span {
display: block; width: 22px; height: 2px; background: var(--brand-text);
transition: transform .25s ease, opacity .2s ease;
transform-origin: center;
}
.al-nav { display: flex; align-items: center; gap: 1.25rem; }
.al-nav-list {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: 1rem;
flex-wrap: nowrap;
}
.al-nav-list li { white-space: nowrap; }
.al-nav-link {
font-size: .9375rem; font-weight: 500;
color: var(--brand-text);
padding: .5rem 0;
white-space: nowrap;
}
.al-nav-link:hover { color: var(--brand-blue); }
.al-nav-cta {
display: flex; align-items: center; gap: .5rem;
margin-left: .75rem;
flex-shrink: 0;
}
.al-nav-cta .al-btn { white-space: nowrap; }
/* Tighten nav between 880-1024 so it fits without wrapping */
@media (min-width: 880px) and (max-width: 1100px) {
.al-nav-list { gap: .75rem; }
.al-nav-link { font-size: .875rem; }
.al-nav-cta { margin-left: .5rem; }
.al-nav-cta .al-btn { padding: .5rem .9rem; font-size: .875rem; min-height: 40px; }
}
@media (max-width: 879px) {
/* backdrop-filter makes the header a containing block for position:fixed
descendants, which collapses the full-screen .al-nav panel. Drop it on
mobile and use a solid background so the panel sizes to the viewport. */
.al-site-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #ffffff;
}
.al-nav-toggle { display: flex; z-index: 60; }
.al-nav {
position: fixed; inset: 64px 0 0 0;
background:
radial-gradient(120% 60% at 100% 0%, rgba(37,99,235,0.08), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
flex-direction: column; align-items: stretch; justify-content: flex-start;
gap: 0;
padding: 1.75rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility .32s;
overflow-y: auto;
max-height: calc(100vh - 64px);
max-height: calc(100dvh - 64px);
border-top: 1px solid var(--brand-border);
box-shadow: -20px 0 60px rgba(15,23,42,0.06);
}
.al-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.al-nav-list li {
border-bottom: 1px solid var(--brand-border);
opacity: 0; transform: translateY(8px);
transition: opacity .3s ease, transform .3s ease;
}
.al-nav-link {
display: flex; align-items: center; justify-content: space-between;
padding: 1.05rem .25rem; font-size: 1.1875rem; font-weight: 600;
letter-spacing: -0.01em;
}
.al-nav-link::after { content: "→"; color: var(--brand-blue); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.al-nav-link:active::after, .al-nav-link:hover::after { opacity: 1; transform: translateX(0); }
.al-nav-cta { margin: 1.5rem 0 0; flex-direction: column; align-items: stretch; gap: .65rem; }
.al-nav-cta .al-btn { width: 100%; text-align: center; min-height: 52px; font-size: 1.0625rem; }
.al-nav-toggle-input:checked ~ .al-nav { transform: translateX(0); opacity: 1; visibility: visible; }
/* Staggered reveal of the links once the panel opens */
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li { opacity: 1; transform: none; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(1) { transition-delay: .06s; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(2) { transition-delay: .10s; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(3) { transition-delay: .14s; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(4) { transition-delay: .18s; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(5) { transition-delay: .22s; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(6) { transition-delay: .26s; }
.al-nav-toggle-input:checked ~ .al-nav .al-nav-list li:nth-child(n+7) { transition-delay: .3s; }
.al-nav-toggle-input:checked ~ .al-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.al-nav-toggle-input:checked ~ .al-nav-toggle span:nth-child(2) { opacity: 0; }
.al-nav-toggle-input:checked ~ .al-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Lock background scroll while the menu is open. Target html AND body
because the scroll container varies between browsers/themes. */
html:has(.al-nav-toggle-input:checked),
body:has(.al-nav-toggle-input:checked) {
overflow: hidden;
}
/* Stop touch scroll from chaining to the page behind the open panel,
while the panel itself stays scrollable. */
.al-nav-toggle-input:checked ~ .al-nav { overscroll-behavior: contain; }
}
/* ---------- Buttons ---------- */
.al-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem;
padding: .75rem 1.25rem;
border-radius: var(--radius-pill);
font-size: .9375rem; font-weight: 500;
border: 1px solid transparent;
min-height: 44px;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
white-space: nowrap;
text-decoration: none;
}
.al-btn:hover { transform: translateY(-1px); }
.al-btn--primary {
background: var(--brand-blue);
color: #fff;
}
.al-btn--primary:hover { background: var(--brand-blue-hover); color: #fff; }
.al-btn--ghost {
background: transparent;
color: var(--brand-text);
border-color: var(--brand-border-dark);
}
.al-btn--ghost:hover { border-color: var(--brand-text); }
.al-btn--full { width: 100%; }
.al-cta-row {
display: flex; flex-wrap: wrap; gap: .75rem;
margin: 1.5rem 0 0;
}
/* ---------- Sections ---------- */
.al-section {
padding: 4rem 0;
}
@media (min-width: 768px) { .al-section { padding: 5.5rem 0; } }
@media (min-width: 1024px) { .al-section { padding: 7rem 0; } }
.al-section--surface { background: var(--brand-surface); }
.al-section--center { text-align: center; }
.al-section-head { max-width: 56ch; margin: 0 0 2.5rem; }
.al-section-head.al-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
/* ---------- Hero ---------- */
.al-hero {
padding: 3rem 0 2.5rem;
}
@media (min-width: 768px) { .al-hero { padding: 5rem 0 3.5rem; } }
@media (min-width: 1024px) { .al-hero { padding: 7rem 0 5rem; } }
.al-hero--cpt { padding-bottom: 1rem; }
.al-trust-row {
display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
list-style: none; padding: 0; margin: 2.5rem 0 0;
border-top: 1px solid var(--brand-border);
padding-top: 1.5rem;
}
.al-trust-row li {
font-size: .9375rem; color: var(--brand-muted);
}
.al-trust-row strong { color: var(--brand-text); font-weight: 700; margin-right: .25rem; }
/* ---------- Grids & Tiles ---------- */
.al-grid { display: grid; gap: 1.25rem; }
.al-grid--2 { grid-template-columns: 1fr; }
.al-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .al-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 840px) { .al-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.al-tile {
background: #fff;
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.al-tile-metric {
display: block;
font-size: clamp(1.875rem, 2.5vw + 1rem, 2.75rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--brand-blue);
margin-bottom: .25rem;
}
.al-tile--check h3, .al-tile--cross h3 { margin-top: 0; }
.al-check-list, .al-cross-list, .al-numbered-list {
list-style: none; padding: 0; margin: 0;
}
.al-check-list li, .al-cross-list li {
position: relative; padding-left: 1.75rem; margin: .5rem 0;
}
.al-check-list li::before {
content: ""; position: absolute; left: 0; top: .55rem;
width: 16px; height: 16px;
background: var(--brand-green);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.al-cross-list li::before {
content: ""; position: absolute; left: 0; top: .55rem;
width: 16px; height: 16px;
background: var(--brand-orange);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.al-numbered-list { counter-reset: numlist; }
.al-numbered-list li {
counter-increment: numlist;
position: relative; padding-left: 2rem; margin: .75rem 0;
}
.al-numbered-list li::before {
content: counter(numlist);
position: absolute; left: 0; top: 0;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--brand-text); color: #fff;
font-family: var(--font-mono);
font-size: .75rem;
display: inline-flex; align-items: center; justify-content: center;
}
/* ---------- Service list ---------- */
.al-service-list { list-style: none; padding: 0; margin: 0; }
.al-service-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem; align-items: start;
padding: 1.25rem 0;
border-top: 1px solid var(--brand-border);
transition: color .15s ease;
}
.al-service-row:last-child { border-bottom: 1px solid var(--brand-border); }
.al-service-row:hover { color: var(--brand-blue); }
.al-service-row .al-num {
font-family: var(--font-mono);
font-size: .8125rem;
color: var(--brand-muted);
padding-top: .25rem;
}
.al-service-body h3 a { color: inherit; }
.al-service-body h3 a:hover { color: var(--brand-blue); }
.al-service-body p { margin: .25rem 0 0; color: var(--brand-muted); font-size: .9375rem; }
.al-service-cta {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--brand-border-dark);
color: var(--brand-text);
font-weight: 700;
transition: background .15s ease, color .15s ease;
}
.al-service-cta:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
/* ---------- Cards ---------- */
.al-card-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 1rem;
}
@media (min-width: 720px) { .al-card-list { grid-template-columns: repeat(2, 1fr); } }
.al-card {
background: #fff;
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.al-card:hover { transform: translateY(-2px); border-color: var(--brand-border-dark); box-shadow: var(--shadow-md); }
.al-card a { display: block; padding: 1.5rem; }
.al-card-meta {
display: inline-block; font-family: var(--font-mono);
font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--brand-muted); margin-bottom: .5rem;
}
.al-card-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
.al-card-excerpt { color: var(--brand-muted); margin: 0; font-size: .9375rem; }
.al-card-metric { color: var(--brand-blue); font-weight: 600; margin: 0 0 .25rem; }
/* Industry archive grid */
.al-industry-grid {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .al-industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .al-industry-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.al-industry-card {
background: #fff;
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
overflow: hidden;
}
.al-industry-card:hover { transform: translateY(-2px); border-color: var(--brand-border-dark); box-shadow: var(--shadow-md); }
.al-industry-card a {
display: flex; flex-direction: column; gap: .5rem;
padding: 1.5rem; height: 100%;
color: inherit;
}
.al-industry-title { font-size: 1.25rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.al-industry-excerpt { color: var(--brand-muted); margin: 0; font-size: .9375rem; flex-grow: 1; }
.al-industry-cta { color: var(--brand-blue); font-weight: 500; font-size: .9375rem; margin-top: .5rem; }
.al-link-grid {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
}
@media (min-width: 600px) { .al-link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .al-link-grid { grid-template-columns: repeat(3, 1fr); } }
.al-link-grid a {
display: block; padding: .75rem 1rem;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font-size: .9375rem;
color: var(--brand-text);
}
.al-link-grid a:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
/* ---------- Steps ---------- */
.al-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.al-steps li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem; align-items: flex-start;
padding: 1.25rem 0;
border-top: 1px solid var(--brand-border);
}
.al-steps li:last-child { border-bottom: 1px solid var(--brand-border); }
.al-step-num {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--brand-text); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: .875rem;
}
.al-steps h3 { margin: 0 0 .25rem; font-size: 1.125rem; }
.al-steps p { margin: 0; color: var(--brand-muted); font-size: .9375rem; }
/* ---------- Pricing cards ---------- */
.al-price-card {
background: #fff;
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 2rem;
}
.al-price-card--featured {
border-color: var(--brand-blue);
box-shadow: 0 8px 30px rgba(37,99,235,0.12);
}
.al-price {
font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
font-weight: 700; letter-spacing: -0.02em;
margin: .5rem 0;
}
.al-price span { color: var(--brand-muted); font-weight: 500; }
.al-price small { color: var(--brand-muted); font-size: 1rem; }
.al-price small { color: var(--brand-muted); font-size: 1rem; font-weight: 500; }
.al-amount { font-variant-numeric: tabular-nums; }
/* Currency toggle */
.al-currency-toggle {
display: inline-flex; gap: 2px;
padding: 4px; margin: 0 0 1.75rem;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-pill);
}
.al-cur-btn {
border: 0; background: transparent;
padding: .45rem 1rem; border-radius: var(--radius-pill);
font-size: .875rem; font-weight: 600; color: var(--brand-muted);
transition: background .15s ease, color .15s ease;
min-height: 38px;
}
.al-cur-btn.is-active { background: var(--brand-text); color: #fff; }
.al-price-block { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: var(--brand-surface); }
.al-outcome { font-size: 1.125rem; padding: 1rem 1.25rem; background: var(--brand-surface); border-left: 3px solid var(--brand-blue); border-radius: 4px; }
/* ---------- FAQ ---------- */
.al-faq { border-top: 1px solid var(--brand-border); }
.al-faq-item { border-bottom: 1px solid var(--brand-border); }
.al-faq-item summary {
cursor: pointer;
list-style: none;
padding: 1.25rem 0;
font-weight: 500;
font-size: 1.0625rem;
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.al-faq-item summary::-webkit-details-marker { display: none; }
.al-faq-item summary::after {
content: "+"; font-size: 1.5rem; color: var(--brand-muted); transition: transform .2s ease;
flex-shrink: 0;
}
.al-faq-item[open] summary::after { content: "−"; }
.al-faq-answer { padding: 0 0 1.25rem; color: var(--brand-muted); max-width: 64ch; }
/* ---------- Contact ---------- */
.al-contact-grid {
display: grid; gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 880px) { .al-contact-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.al-form { display: block; max-width: 560px; }
.al-form * { box-sizing: border-box; }
.al-form-row {
display: block !important;
margin: 0 0 1rem !important;
width: 100%;
}
.al-form-row label {
display: block !important;
font-size: .9375rem; font-weight: 500;
margin: 0 0 .5rem !important;
color: var(--brand-text);
}
.al-form-row input,
.al-form-row textarea,
.al-form-row select {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: .875rem 1rem;
font: inherit;
font-size: 16px; /* iOS no-zoom */
border: 1px solid var(--brand-border-dark);
border-radius: var(--radius-md);
background: #fff;
color: var(--brand-text);
transition: border-color .15s ease;
box-sizing: border-box;
}
.al-form-row textarea { resize: vertical; min-height: 110px; }
.al-form-row input:focus, .al-form-row textarea:focus { border-color: var(--brand-blue); outline: none; }
.al-honeypot { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.al-form-note { margin: .75rem 0 0; color: var(--brand-muted); font-size: .875rem; text-align: center; }
.al-form-status { margin-top: 1rem; min-height: 1.5rem; font-size: .9375rem; }
.al-form-status[data-state="success"] { color: var(--brand-green); }
.al-form-status[data-state="error"] { color: #b91c1c; }
.al-contact-aside h2, .al-contact-aside h3 { margin-top: 0; }
.al-contact-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.al-contact-list li { padding: .75rem 0; border-top: 1px solid var(--brand-border); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.al-contact-list li:last-child { border-bottom: 1px solid var(--brand-border); }
.al-contact-key { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-muted); }
/* ---------- Prose (long-form pages) ---------- */
.al-prose { max-width: 70ch; }
.al-prose h2 { margin-top: 2.5rem; }
.al-prose h3 { margin-top: 1.75rem; }
.al-prose p, .al-prose ul, .al-prose ol { margin: 0 0 1rem; }
.al-prose a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.al-prose ul, .al-prose ol { padding-left: 1.25rem; }
/* ---------- Page header / breadcrumb ---------- */
.al-page-header { margin-bottom: 2rem; }
.al-breadcrumbs {
font-family: var(--font-mono); font-size: .75rem; color: var(--brand-muted);
margin-bottom: 1rem;
}
.al-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.al-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--brand-border-dark); }
.al-breadcrumbs a { color: var(--brand-muted); text-decoration: underline; text-underline-offset: 2px; }
.al-breadcrumbs a:hover { color: var(--brand-blue); }
/* ---------- Footer ---------- */
.al-site-footer {
background: #0a0a0a;
color: #d1d5db;
padding: 4rem 0 2rem;
margin-top: 4rem;
}
.al-site-footer .al-brand { color: #fff; }
.al-site-footer .al-wordmark { color: #fff; }
.al-footer-grid {
display: grid; gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .al-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2.5rem; } }
.al-footer-desc { color: #9ca3af; margin: 1rem 0; font-size: .9375rem; max-width: 32ch; }
.al-socials { display: flex; flex-wrap: wrap; gap: .75rem; }
.al-socials a { font-size: .875rem; color: #9ca3af; }
.al-socials a:hover { color: #fff; }
.al-footer-col h4 { color: #fff; font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 1rem; font-family: var(--font-mono); font-weight: 500; }
.al-footer-col ul { list-style: none; padding: 0; margin: 0; }
.al-footer-col li { margin: .5rem 0; }
.al-footer-col a { font-size: .9375rem; color: #d1d5db; }
.al-footer-col a:hover { color: #fff; }
.al-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 2.5rem; padding-top: 1.5rem;
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
color: #6b7280; font-size: .8125rem;
}
.al-footer-bottom a { color: #d1d5db; }
.al-footer-bottom a:hover { color: #fff; }
/* ---------- WhatsApp FAB ---------- */
.al-whatsapp-fab {
position: fixed;
right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
z-index: 9999;
width: 56px; height: 56px;
display: inline-flex !important; align-items: center; justify-content: center;
background: #25D366;
color: #fff !important;
border-radius: 50%;
box-shadow: 0 8px 24px rgba(37,211,102,0.4);
transition: transform .2s ease, box-shadow .2s ease;
cursor: pointer;
pointer-events: auto;
text-decoration: none;
}
.al-whatsapp-fab:hover, .al-whatsapp-fab:focus-visible { transform: scale(1.05); box-shadow: 0 12px 32px rgba(37,211,102,0.5); color: #fff !important; }
.al-whatsapp-fab svg { pointer-events: none; }
.al-whatsapp-fab-label {
position: absolute; left: -9999px;
}
/* Mobile sticky CTA bar (shows on small screens only) */
.al-mobile-cta {
display: none;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
border-top: 1px solid var(--brand-border);
gap: .5rem;
justify-content: stretch;
}
.al-mobile-cta .al-btn { flex: 1; padding: .625rem 1rem; min-height: 40px; }
@media (max-width: 640px) {
.al-mobile-cta { display: flex; }
body { padding-bottom: 72px; } /* room for the bar */
/* The sticky bottom bar already carries WhatsApp, so hide the floating bubble on
phones to declutter — clicks from the bar are still tracked. */
.al-whatsapp-fab { display: none !important; }
}
/* ---------- CTA band ---------- */
.al-cta-band { background: var(--brand-text); color: #fff; text-align: center; }
.al-cta-band .al-h2, .al-cta-band .al-lead { color: #fff; }
.al-cta-band .al-lead { color: #d1d5db; max-width: 60ch; margin-left: auto; margin-right: auto; }
.al-cta-band .al-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.al-cta-band .al-btn--ghost:hover { background: #fff; color: var(--brand-text); }
.al-cta-band .al-cta-row { justify-content: center; }
/* ---------- Reveal animation ---------- */
[data-al-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-al-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-al-reveal] { opacity: 1; transform: none; transition: none; }
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ---------- Misc ---------- */
.al-mt-lg { margin-top: 2rem; }
.al-founder-img { border-radius: 16px; margin: 0 0 1.5rem; }
.al-stats {
display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
list-style: none; padding: 0; margin: 1rem 0 0;
}
.al-stats li { font-size: .9375rem; color: var(--brand-muted); }
.al-stats strong { color: var(--brand-text); font-weight: 700; font-size: 1.5rem; display: block; }
.al-metric { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); font-weight: 700; color: var(--brand-blue); }
/* ============================================================
* Mobile refinements (≤ 640px) — tighter rhythm, comfortable
* tap targets, no dead whitespace, clean stacking.
* ============================================================ */
@media (max-width: 640px) {
/* Trim the oversized vertical rhythm so sections don't feel empty */
.al-section { padding: 2.75rem 0; }
.al-hero { padding: 2rem 0 1.75rem; }
.al-hero--cpt { padding-bottom: .75rem; }
.al-section-head { margin-bottom: 1.5rem; }
/* Headlines: keep them punchy but not overflowing on small screens */
.al-h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.12; }
.al-h1--display { font-size: clamp(1.9rem, 9vw, 2.6rem); }
.al-h2 { font-size: clamp(1.4rem, 6vw, 1.85rem); }
.al-lead { font-size: 1.0625rem; }
/* Hero CTAs: full-width, thumb-friendly, stacked */
.al-hero .al-cta-row { flex-direction: column; align-items: stretch; }
.al-hero .al-cta-row .al-btn { width: 100%; min-height: 50px; font-size: 1rem; }
/* Trust row reads as a tidy 2-col grid instead of a ragged wrap */
.al-trust-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
margin-top: 1.75rem; padding-top: 1.25rem;
}
/* Tiles / cards: a touch less padding, full-bleed feel */
.al-tile, .al-price-card { padding: 1.25rem; }
.al-grid { gap: 1rem; }
/* Service rows: drop the trailing arrow, let the title breathe */
.al-service-row { grid-template-columns: auto 1fr; gap: .75rem 1rem; padding: 1rem 0; }
.al-service-cta { display: none; }
.al-service-body h3 { font-size: 1.05rem; }
/* Steps: smaller number badge, tighter gap */
.al-steps li { gap: 1rem; padding: 1rem 0; }
/* Pricing: toggle centred, cards full width */
.al-currency-toggle { width: 100%; justify-content: center; }
.al-price { font-size: 1.9rem; }
/* Section CTA band buttons stack full-width */
.al-cta-band .al-cta-row { flex-direction: column; align-items: stretch; }
.al-cta-band .al-cta-row .al-btn { width: 100%; min-height: 50px; }
/* Contact grid: form first, comfortable spacing */
.al-contact-grid { gap: 2rem; }
.al-contact-list li { flex-direction: column; align-items: flex-start; gap: .25rem; }
/* FAQ summaries: a little more tap room */
.al-faq-item summary { padding: 1.1rem 0; font-size: 1rem; }
/* Footer: stack columns into a clean 2-up, brand on top */
.al-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
.al-footer-brand { grid-column: 1 / -1; }
.al-footer-bottom { flex-direction: column; gap: .5rem; text-align: left; }
}
/* Very small phones */
@media (max-width: 380px) {
.al-footer-grid { grid-template-columns: 1fr; }
.al-trust-row { grid-template-columns: 1fr; }
}
/* ---------- Pagination ---------- */
.al-section .navigation.pagination { margin-top: 2rem; }
.al-section .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.al-section .page-numbers {
padding: .5rem .9rem;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font-size: .9375rem;
}
.al-section .page-numbers.current { background: var(--brand-text); color: #fff; border-color: var(--brand-text); }
.al-section .page-numbers:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
/* ============================================================
* Defensive styling for ANY hand-built form inside content
* (e.g. a raw