:root {
--color-bg: #f4f5f8;
--color-surface: #ffffff;
--color-muted: #e5e7ee;
--color-primary: #0b3c6f;
--color-primary-soft: #144c8b;
--color-accent: #00b6c9;
--color-accent-soft: #13c4d8;
--color-text: #111827;
--color-text-soft: #4b5563;
--color-border: #d1d5db;
--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.16);
--radius-lg: 18px;
--radius-md: 12px;
--radius-pill: 999px;
--transition-fast: 160ms ease-out;
--transition-med: 220ms ease-out;
--nav-height: 76px;
}
html {
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
.container {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
background-color: rgba(244, 245, 248, 0.92);
border-bottom: 1px solid rgba(209, 213, 219, 0.7);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-height);
column-gap: 20px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
height: 40px;
width: auto;
object-fit: contain;
}
.brand-text {
display: flex;
flex-direction: column;
}
.brand-name {
font-weight: 700;
letter-spacing: -0.02em;
font-size: 1.02rem;
color: var(--color-primary);
}
.brand-subtitle {
font-size: 0.8rem;
color: var(--color-text-soft);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.sap-logo-small {
display: inline-block;
height: 16px;
width: auto;
vertical-align: middle;
margin-right: 6px;
}
.site-nav {
display: flex;
align-items: center;
gap: 20px;
}
.nav-link {
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text-soft);
padding: 6px 4px;
position: relative;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));
transition: width var(--transition-med);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 60%;
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: rgba(255, 255, 255, 0.85);
padding: 0;
cursor: pointer;
}
.nav-toggle span {
width: 18px;
height: 2px;
border-radius: 999px;
background-color: #111827;
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.mode-toggle {
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.6);
background: rgba(255, 255, 255, 0.9);
padding: 6px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
color: var(--color-text-soft);
}
.nav-cta {
border-radius: var(--radius-pill);
padding: 7px 14px;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-soft));
color: #020617;
box-shadow: 0 10px 22px rgba(13, 148, 136, 0.35);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-fast), box-shadow var(--transition-med);
}
.nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(13, 148, 136, 0.45);
}
.mode-toggle-icon {
display: inline-block;
transform: translateY(-1px);
}
.hero {
padding: 64px 0 56px;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
padding: 26px 28px 24px;
border-radius: 24px;
border: 1px solid rgba(209, 213, 219, 0.9);
background: radial-gradient(circle at top left, rgba(19, 196, 216, 0.16), rgba(248, 250, 252, 0.95));
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}
.hero-kicker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-text-soft);
}
.hero-kicker span:first-child {
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
}
.hero-copy h1 {
font-size: clamp(2.3rem, 3.4vw, 2.9rem);
line-height: 1.12;
margin: 0 0 16px;
color: var(--color-primary);
letter-spacing: -0.03em;
}
.hero-highlight {
background: linear-gradient(135deg, var(--color-accent-soft), var(--color-primary-soft));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-copy p {
margin: 0 0 20px;
color: var(--color-text-soft);
font-size: 1rem;
max-width: 32rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 0.86rem;
color: var(--color-text-soft);
}
.hero-meta span {
padding: 6px 11px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.45);
background: rgba(255, 255, 255, 0.9);
}
.hero-visual {
position: relative;
display: grid;
gap: 16px;
align-self: stretch;
}
.hero-visual::before {
content: "";
position: absolute;
right: -20px;
top: -18px;
width: 90px;
height: 90px;
background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 60%);
opacity: 0.5;
pointer-events: none;
}
.hero-card {
position: relative;
border-radius: 16px;
padding: 14px 18px 14px;
border: 1px solid rgba(148, 163, 184, 0.45);
background: linear-gradient(135deg, #0b3c6f, #020617);
color: #e5f4ff;
backdrop-filter: blur(10px);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.6);
transform: translateY(0);
transition: transform var(--transition-fast), box-shadow var(--transition-med), border-color var(--transition-med);
}
.hero-card-primary h3 {
margin: 0 0 8px;
font-size: 1.05rem;
}
.hero-card-primary p {
margin: 0;
font-size: 0.9rem;
color: #dbeafe;
}
.hero-card-secondary {
background: #020617;
border-radius: 16px;
padding: 12px 18px 12px;
border: 1px solid rgba(148, 163, 184, 0.6);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.8);
}
.hero-card-secondary h4 {
margin: 0 0 8px;
font-size: 0.95rem;
color: #e5e7eb;
}
.hero-card-secondary ul {
margin: 0;
padding-left: 18px;
font-size: 0.86rem;
color: #9ca3af;
display: grid;
row-gap: 3px;
}
.section {
padding: 52px 0;
}
.section-about {
padding: 40px 0;
}
.section-about .container {
position: relative;
border-radius: 22px;
border: 1px solid rgba(209, 213, 219, 0.9);
background-color: var(--color-surface);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
padding-top: 24px;
padding-bottom: 22px;
}
.about-layout {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
column-gap: 30px;
}
.about-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
font-size: 0.86rem;
color: var(--color-text-soft);
}
.about-meta span {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(209, 213, 219, 0.9);
background-color: #f9fafb;
}
.about-stats {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
font-size: 0.95rem;
color: var(--color-text-soft);
}
.about-stats h3 {
margin: 0 0 6px;
font-size: 1rem;
color: var(--color-primary);
}
.about-stats ul {
margin: 0;
padding-left: 18px;
display: grid;
row-gap: 4px;
}
.section-muted {
background-color: #edf1f7;
}
.section-accent {
background: linear-gradient(135deg, var(--color-primary), #020617);
color: #e5f4ff;
}
.section-heading {
margin-bottom: 28px;
}
.section-heading h2 {
margin: 0 0 8px;
font-size: 1.6rem;
}
.section-heading p {
margin: 0;
color: var(--color-text-soft);
}
.section-accent .section-heading p {
color: #c4e4ff;
}
.section-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
gap: 36px;
align-items: flex-start;
}
.key-points {
display: grid;
gap: 16px;
}
.key-point {
background-color: var(--color-surface);
border-radius: var(--radius-md);
padding: 16px 18px;
border: 1px solid rgba(209, 213, 219, 0.9);
}
.key-point h3 {
margin: 0 0 10px;
font-size: 1rem;
color: var(--color-primary);
}
.key-point p {
margin: 0 0 4px;
font-size: 0.95rem;
color: var(--color-text-soft);
}
.key-point ul {
margin: 0;
padding-left: 18px;
color: var(--color-text-soft);
font-size: 0.95rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.service-card {
background-color: var(--color-surface);
border-radius: var(--radius-md);
padding: 18px 18px 16px;
border: 1px solid rgba(209, 213, 219, 0.9);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
display: flex;
flex-direction: column;
gap: 6px;
}
.service-card h3 {
margin: 0 0 4px;
font-size: 1.02rem;
color: var(--color-primary);
}
.service-card ul {
margin: 0;
padding-left: 18px;
font-size: 0.92rem;
color: var(--color-text-soft);
display: grid;
row-gap: 4px;
}
.section-cta-inline {
margin-top: 24px;
}
.pill-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.pill {
border-radius: var(--radius-pill);
background-color: var(--color-surface);
border: 1px solid rgba(209, 213, 219, 0.9);
padding: 9px 14px;
font-size: 0.9rem;
color: var(--color-text-soft);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.step {
background-color: var(--color-surface);
border-radius: var(--radius-md);
padding: 16px 16px 14px;
border: 1px solid rgba(209, 213, 219, 0.9);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: radial-gradient(circle at top left, var(--color-accent), var(--color-primary));
color: #f9fafb;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 8px;
}
.step h3 {
margin: 0 0 6px;
font-size: 0.98rem;
color: var(--color-primary);
}
.step p {
margin: 0;
font-size: 0.9rem;
color: var(--color-text-soft);
}
.industry-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.industry-card {
border-radius: var(--radius-md);
padding: 10px 12px;
background-color: var(--color-surface);
border: 1px solid rgba(209, 213, 219, 0.9);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-primary);
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: border-color var(--transition-med), box-shadow var(--transition-med), background-color var(--transition-med), transform var(--transition-fast), color var(--transition-med);
}
.industry-card.active {
border-color: rgba(0, 182, 201, 0.85);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
background-color: #f9fafb;
transform: translateY(-1px);
}
.industry-detail {
margin-top: 18px;
border-radius: var(--radius-md);
border: 1px solid rgba(209, 213, 219, 0.9);
background-color: var(--color-surface);
padding: 18px 18px 16px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.industry-detail h3 {
margin: 0 0 6px;
font-size: 1.02rem;
color: var(--color-primary);
}
.industry-detail p {
margin: 0;
font-size: 0.95rem;
color: var(--color-text-soft);
}
.cta-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.cta-banner h2 {
margin: 0 0 6px;
font-size: 1.6rem;
}
.cta-banner p {
margin: 0;
color: #c4e4ff;
max-width: 30rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
padding: 9px 18px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background-color var(--transition-med), color var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med), transform var(--transition-fast);
}
.btn-primary {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-soft));
color: #0b1120;
box-shadow: 0 16px 30px rgba(13, 148, 136, 0.35);
}
.btn-primary:hover {
box-shadow: 0 18px 40px rgba(13, 148, 136, 0.45);
transform: translateY(-1px);
}
.btn-outline {
background-color: rgba(15, 23, 42, 0.02);
border-color: rgba(148, 163, 184, 0.7);
color: var(--color-text-soft);
}
.btn-outline:hover {
background-color: rgba(15, 23, 42, 0.05);
}
.btn-secondary {
background-color: #0f172a;
color: #e5e7eb;
}
.btn-secondary:hover {
background-color: #020617;
}
.btn-dark {
background-color: #e5f4ff;
color: #020617;
}
.btn-dark:hover {
background-color: #ffffff;
}
.page-hero {
padding: 40px 0 24px;
border-bottom: 1px solid rgba(209, 213, 219, 0.8);
background: radial-gradient(circle at top left, rgba(19, 196, 216, 0.2), rgba(15, 23, 42, 0.03));
}
.page-hero h1 {
margin: 0 0 10px;
font-size: 2rem;
color: var(--color-primary);
}
.page-hero p {
margin: 0;
max-width: 40rem;
color: var(--color-text-soft);
}
.service-detail {
max-width: 880px;
}
.service-detail h2 {
margin: 0 0 8px;
font-size: 1.5rem;
color: var(--color-primary);
}
.service-detail p {
margin: 0 0 18px;
color: var(--color-text-soft);
}
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.service-detail h3 {
margin: 0 0 8px;
font-size: 1.05rem;
}
.service-detail ul {
margin: 0;
padding-left: 18px;
font-size: 0.95rem;
color: var(--color-text-soft);
display: grid;
row-gap: 4px;
}
.about-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
}
.values-grid ul {
margin: 0;
padding-left: 18px;
color: var(--color-text-soft);
font-size: 0.95rem;
display: grid;
row-gap: 4px;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.metric {
border-radius: var(--radius-md);
padding: 14px;
border: 1px solid rgba(209, 213, 219, 0.9);
background-color: var(--color-surface);
text-align: center;
}
.metric-value {
display: block;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 4px;
}
.metric-label {
display: block;
font-size: 0.9rem;
color: var(--color-text-soft);
}
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 32px;
align-items: flex-start;
}
.contact-form {
background-color: var(--color-surface);
border-radius: var(--radius-md);
padding: 20px 20px 18px;
border: 1px solid rgba(209, 213, 219, 0.9);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.form-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.form-row label {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-soft);
}
.form-row input,
.form-row textarea {
border-radius: 9px;
border: 1px solid var(--color-border);
padding: 8px 10px;
font-family: inherit;
font-size: 0.95rem;
outline: none;
background-color: #f9fafb;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.form-row textarea {
resize: vertical;
min-height: 120px;
}
.form-row input:focus,
.form-row textarea:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px rgba(0, 182, 201, 0.4);
background-color: #ffffff;
}
.form-status {
margin-top: 8px;
font-size: 0.86rem;
min-height: 1.2em;
color: var(--color-text-soft);
}
.form-status-success {
color: #15803d;
}
.form-status-error {
color: #b91c1c;
}
.contact-list {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: grid;
row-gap: 8px;
font-size: 0.95rem;
color: var(--color-text-soft);
}
.contact-list li {
display: flex;
justify-content: space-between;
gap: 10px;
}
.contact-list strong {
font-weight: 600;
color: var(--color-primary);
}
.map-placeholder {
margin-top: 12px;
border-radius: var(--radius-md);
border: 1px dashed rgba(148, 163, 184, 0.8);
background: repeating-linear-gradient(45deg, #f9fafb, #f9fafb 8px, #f3f4f6 8px, #f3f4f6 16px);
padding: 26px 18px;
font-size: 0.9rem;
color: var(--color-text-soft);
}
.site-footer {
background-color: #020617;
color: #9ca3af;
padding: 32px 0 18px;
margin-top: 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.8fr 1.1fr 1.2fr 1.1fr;
gap: 24px;
margin-bottom: 18px;
}
.brand-footer {
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
.site-footer .brand-name {
color: #e5e7eb;
}
.site-footer .brand-tagline {
color: #9ca3af;
}
.footer-text {
margin: 0;
font-size: 0.9rem;
}
.site-footer h4 {
margin: 0 0 10px;
font-size: 0.95rem;
color: #e5e7eb;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
row-gap: 4px;
font-size: 0.9rem;
}
.footer-links a {
color: #9ca3af;
}
.footer-links a:hover {
color: #e5e7eb;
}
.footer-social li a {
display: inline-flex;
align-items: center;
gap: 8px;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.9);
font-size: 0.8rem;
font-weight: 600;
color: #e5e7eb;
}
.footer-bottom {
padding-top: 10px;
border-top: 1px solid rgba(55, 65, 81, 0.9);
font-size: 0.8rem;
color: #6b7280;
}
.dark-theme {
--color-bg: #050816;
--color-surface: #020617;
--color-muted: #020617;
--color-primary: #e5f4ff;
--color-primary-soft: #e5f4ff;
--color-accent: #22d3ee;
--color-accent-soft: #67e8f9;
--color-text: #e5e7eb;
--color-text-soft: #9ca3af;
--color-border: #1f2937;
}
.dark-theme .site-header {
background-color: rgba(3, 7, 18, 0.92);
border-bottom-color: #020617;
}
.dark-theme .hero-grid {
background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.2), rgba(15, 23, 42, 0.96));
border-color: #1f2937;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
}
.dark-theme .hero-kicker span:first-child {
background: rgba(15, 23, 42, 0.8);
color: #e5e7eb;
}
.dark-theme .hero-meta span {
background: rgba(15, 23, 42, 0.9);
border-color: #1f2937;
}
.dark-theme .nav-link::after {
background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent));
}
.dark-theme .hero-card {
background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), #020617);
}
.dark-theme .hero-card-secondary {
background: #020617;
}
.dark-theme .section-muted {
background-color: #020617;
}
.dark-theme .service-card,
.dark-theme .key-point,
.dark-theme .step,
.dark-theme .industry-card,
.dark-theme .metric,
.dark-theme .contact-form,
.dark-theme .map-placeholder {
background-color: #020617;
border-color: #1f2937;
}
.dark-theme .page-hero {
background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.2), rgba(15, 23, 42, 0.6));
border-bottom-color: #111827;
}
.dark-theme .site-footer {
background-color: #000000;
}
.dark-theme .form-row input,
.dark-theme .form-row textarea {
background-color: #020617;
border-color: #1f2937;
color: #e5e7eb;
}
.dark-theme .form-row input:focus,
.dark-theme .form-row textarea:focus {
background-color: #020617;
}
.dark-theme .btn-outline {
background-color: rgba(15, 23, 42, 0.8);
border-color: #1f2937;
color: #e5e7eb;
}
.dark-theme .btn-outline:hover {
background-color: #020617;
}
.dark-theme .btn-dark {
background-color: #000000;
color: #e5e7eb;
}
.dark-theme .btn-dark:hover {
background-color: #020617;
}
.dark-theme .mode-toggle {
background-color: rgba(15, 23, 42, 0.8);
border-color: #1f2937;
color: #e5e7eb;
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
}
.hero {
padding-top: 38px;
}
.section-grid {
grid-template-columns: minmax(0, 1fr);
}
.about-layout {
grid-template-columns: minmax(0, 1fr);
}
.services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pill-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.steps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.industry-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-grid,
.values-grid,
.contact-grid {
grid-template-columns: minmax(0, 1fr);
}
.service-detail {
max-width: none;
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.header-inner {
gap: 12px;
}
.site-nav {
position: absolute;
inset: calc(var(--nav-height) + 6px) 16px auto 16px;
border-radius: 18px;
background-color: rgba(15, 23, 42, 0.97);
border: 1px solid rgba(51, 65, 85, 0.95);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
padding: 10px 10px 8px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
transform-origin: top right;
transform: scale(0.96);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-med), transform var(--transition-med), visibility var(--transition-med);
}
.site-nav.open {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.nav-link {
color: #e5e7eb;
padding: 8px 10px;
border-radius: 999px;
}
.nav-link::after {
display: none;
}
.nav-link.active {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-soft));
color: #020617;
}
.mode-toggle {
align-self: stretch;
justify-content: center;
border-color: rgba(55, 65, 81, 0.9);
background-color: #020617;
color: #e5e7eb;
margin-top: 4px;
}
.nav-toggle {
display: inline-flex;
}
.services-grid {
grid-template-columns: minmax(0, 1fr);
}
.pill-grid {
grid-template-columns: minmax(0, 1fr);
}
.steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.industry-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metrics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cta-banner {
flex-direction: column;
align-items: flex-start;
}
.footer-grid {
grid-template-columns: minmax(0, 1fr);
}
.contact-list li {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.hero-copy h1 {
font-size: 1.9rem;
}
.section {
padding: 40px 0;
}
.steps-grid {
grid-template-columns: minmax(0, 1fr);
}
.industry-grid {
grid-template-columns: minmax(0, 1fr);
}
.metrics-grid {
grid-template-columns: minmax(0, 1fr);
}
.container {
padding: 0 16px;
}
}