.hero.hero-ai {
min-height: 36vh;
padding: 60px 8% 60px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
body:not(.home) .hero {
min-height: 28vh;
padding: 80px 8% 32px;
} .ai-tuning {
background: #f7f9fc;
padding: 4em 5%;
margin-top: 3em;
border-top: 3px solid #00a5b6;
} .ai-tuning-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 1.5em;
margin-top: 2em;
}
.ai-tuning-text {
margin-right: 1em;
}
.ai-tuning-text ul {
list-style: none;
padding: 0;
}
.ai-tuning-text li {
margin-bottom: 0.4em;
padding-left: 1.5em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300a5b6' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='12' r='4'/%3E%3C/svg%3E") no-repeat left 0.35em;
background-size: 0.5em;
}
.ai-tuning-text .caption {
font-size: 0.9em;
color: #555;
margin-top: 0.8em;
} .ai-tuning-images {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 1.5em;
flex-wrap: wrap;
text-align: center;
}
.ai-tuning-images figure {
flex: 0 1 43%;
max-width: 380px;
margin: 0;
}
.ai-tuning-images img {
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: 0.2s ease;
}
.ai-tuning-images img:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.ai-tuning-images figcaption {
font-size: 0.85em;
color: #666;
margin-top: 0.4em;
} .diagram {
background: #ffffff;
padding: 5em 6%;
text-align: center;
border-top: 3px solid #00a5b6;
}
.diagram h2 {
color: var(--main-blue);
font-size: 1.8em;
margin-bottom: 1em;
}
.diagram-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
margin: 2em auto;
max-width: 500px;
}
.diagram-container .step {
background: #f8fafc;
border: 2px solid #00a5b6;
border-radius: 10px;
padding: 1em 1.5em;
width: 100%;
max-width: 400px;
text-align: center;
font-weight: 500;
font-size: 1em;
color: #333;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
transition: 0.2s ease;
}
.diagram-container .step:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0,0,0,0.08);
}
.diagram-container .arrow {
font-size: 1.5em;
color: #00a5b6;
} .ai-stt {
background: #fff;
padding: 4em 5%;
border-top: 3px solid #00a5b6;
margin-top: 3em;
text-align: center;
}
.ai-stt p {
max-width: 800px;
margin: 0 auto 2em;
}
.stt-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.5em;
margin-top: 2em;
}
.stt-card {
flex: 0 1 300px;
background: #f7f9fa;
border: 1px solid #e2e5e8;
border-radius: 8px;
padding: 1.5em;
text-align: left;
transition: 0.3s;
}
.stt-card:hover {
background: #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
border-color: #00a5b6;
}
.stt-card h3 {
color: #005f73;
font-size: 1.1em;
margin-bottom: 0.5em;
}
.stt-card p {
font-size: 0.95em;
color: #333;
}
.stt-caption {
font-size: 0.85em;
color: #666;
margin-top: 1.5em;
} .usecase p,
.usecase li,
.ai-engine p,
.ai-engine li,
.features p {
text-align: left !important;
margin-left: 1.5em;
line-height: 1.8;
} .usecase h2,
.usecase h3,
.ai-engine h2,
.ai-engine h3,
.features h2 {
text-align: left;
margin-left: 0.5em;
} section h3 + p { margin-top: 0.2em; } section h3 { margin-bottom: 0.5em; }
.usecase h3, .case h3, .feature h3, .ai-engine h3 {
margin-bottom: 0.4em;
} .inline-cta {
text-align: center;
margin: 50px 0;
}
.inline-cta .btn-primary {
background: var(--orange);
color: #fff;
padding: 14px 32px;
border-radius: 6px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(255,148,48,0.25);
}
.inline-cta .btn-primary:hover {
background: #ff9f45;
transform: translateY(-2px);
}
section p + .inline-cta { margin-top: 30px; }
section h2 { margin-bottom: 0.8em; } .usecases h2,
.ai-tuning h2 {
text-align: center !important;
margin: 0 auto 1em !important;
} .usecases p,
.usecases li,
.ai-tuning p,
.ai-tuning li {
text-align: left !important;
margin-left: 1.5em;
line-height: 1.8;
}
.usecases p + p,
.ai-tuning p + p {
margin-top: 0.8em;
}
.usecases ul,
.ai-tuning ul {
margin-left: 1.5em;
} .problem h2 { color: var(--orange); }
.features h2 { color: var(--main-blue); }
.diagram h2 { color: var(--accent-cyan); }
.usecases h2 { color: var(--main-blue); }
.ai-tuning h2 { color: var(--orange); }
.ai-stt h2 { color: var(--main-blue); }
.cta h2 { color: #fff; } @media (max-width: 768px) { .hero.hero-ai {
min-height: 60vh;
padding: 120px 5% 40px;
} .ai-tuning-grid { flex-direction: column; }
.ai-tuning-images {
flex-direction: column;
align-items: center;
}
.ai-tuning-images figure { max-width: 90%; } .diagram { padding: 3em 5%; }
.diagram h2 { font-size: 1.5em; }
.diagram-container { max-width: 90%; }
.diagram-container .step {
font-size: 0.95em;
padding: 0.9em 1.2em;
} .usecases h2,
.ai-tuning h2 { font-size: 1.5em; }
.usecases p,
.ai-tuning p { margin-left: 0.5em; } .cta { padding: 80px 6%; }
.cta h2 { font-size: 1.6em; }
} section h3 {
text-align: center;
width: 100%;
margin: 0 auto 0.4em;
} .ai-tuning p,
.case p {
text-align: left !important; line-height: 1.8;
max-width: 700px!important; margin: 0 auto 3em;
}
section h3 + p {
text-align: left; max-width: 750px; margin: 0 auto 1.2em; line-height: 1.8;
} @media (max-width: 768px) {
section h3 + p {
max-width: 95%;
margin: 0 auto 1em;
padding-left: 0.8em;
}
}