/* Homepage visual treatment adapted from s.html and its original stylesheet. */
.home-page {
--bg: #e7ecf1;
--bg-soft: #f8fafb;
--bg-alt: #dde3e9;
--accent: #2f8fff;
--accent-dark: #1565c9;
--text: #15212c;
--text-soft: #576775;
--line: rgba(30, 50, 70, .14);
background: linear-gradient(180deg, #eef1f4 0%, #e2e8ed 45%, #eef1f4 100%);
background-attachment: fixed;
}
.home-page .site-header { background: rgba(238, 241, 244, .88); }
.home-page .header-inner { max-width: 1180px; padding-top: 14px; padding-bottom: 14px; }
.home-page .btn { border-radius: 8px; }
.home-page .btn-accent {
background: linear-gradient(135deg, #1565c9, #236bd5);
box-shadow: 0 8px 22px rgba(21, 101, 201, .16);
}
.home-page .btn-accent:hover { background: var(--accent-dark); }
.home-page .btn-outline { background: rgba(255, 255, 255, .5); border-color: var(--line); }
.home-page .accent-text { color: var(--accent-dark); }
.home-page .home-intro { background: transparent; border-bottom: 0; }
.home-page .home-intro-layout { max-width: 1132px; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: 56px; }
.home-page .home-intro h1 { font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.13; letter-spacing: -.035em; }
.home-page .hero-description { max-width: 460px; font-size: 1rem; }
.home-page .home-intro-actions { align-items: center; gap: 20px; }
.home-page .home-work-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-size: .86rem; font-weight: 600; color: var(--accent-dark); }
.home-page .home-work-link:hover { text-decoration: underline; }
.home-page .home-intro-trust { font-size: .77rem; }
.home-page .hero-value-card {
background: var(--bg-soft);
border: 1px solid var(--line);
border-top: 4px solid var(--accent);
border-radius: 18px;
box-shadow: var(--shadow);
}
.home-page .hero-value-card h2 { letter-spacing: .09em; }
.home-page .hero-card-price strong { font-size: 4.1rem; line-height: 1.05; letter-spacing: -.05em; }
.home-page .hero-card-price > span { font-size: .85rem; }
.home-page .hero-card-features li { font-size: .84rem; }
.home-page .hero-card-renewal .eyebrow { color: var(--text-soft); font-size: .64rem; letter-spacing: .08em; }
.home-page .hero-card-renewal strong { font-size: 1.65rem; }
.home-page .home-launch-bonus { background: transparent; border-bottom: 0; }
.home-page .launch-bonus-strip {
max-width: 1132px;
border: 1px solid rgba(47, 143, 255, .22);
border-radius: 12px;
background: rgba(255, 255, 255, .55);
box-shadow: none;
}
.home-page .launch-bonus-icon { background: transparent; border-radius: 0; }
.home-page .home-trust { background: rgba(248, 250, 251, .8); border-top: 1px solid var(--line); }
.home-page .home-trust-inner { max-width: 1132px; }
.home-page .section-alt { background: var(--bg-alt); }
.home-page .service-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.home-page .service-card p { text-align: left; line-height: 1.65; margin-bottom: 0; }
.home-page .service-icon { background: rgba(47, 143, 255, .12); border-radius: 12px; }
.home-page .portfolio-card { background: var(--bg-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.home-page .price-card { background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.home-page .pricing-note { background: rgba(248, 250, 251, .55); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.home-page .faq-row { background: var(--bg-soft); }
.home-page .contact-form { background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.home-page .site-footer { background: var(--bg-alt); }
@media (min-width: 900px) {
.home-page .home-intro { padding-top: 28px; padding-bottom: 14px; }
.home-page .hero-value-card { padding: 20px 28px 18px; }
}
@media (max-width: 899px) {
.home-page .home-intro-layout { max-width: 620px; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.home-page .home-intro h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
.home-page .launch-bonus-strip { max-width: 620px; }
}
@media (max-width: 639px) {
.home-page .hero-value-card { padding: 22px 20px; }
.home-page .hero-card-price strong { font-size: 3.4rem; }
.home-page .home-intro-actions { gap: 10px; }
.home-page .home-work-link { justify-content: center; }
}
.home-page .payment-explanation { color: var(--text-soft); font-size: .78rem; line-height: 1.5; margin: 0 0 18px; }
.home-page .payment-faq.open .faq-a { max-height: none; }
/* Keep the longer showcase-permission notice compact without enlarging the banner. */
.home-page .home-launch-bonus .launch-bonus-terms { font-size: 12px; line-height: 1.5; }
/* Shared desktop width for homepage introductions and pricing information. */
@media (min-width: 1024px) {
.home-page .home-content-width {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
}
/* Balance desktop introductory paragraphs. */
@media (min-width: 1024px) {
.home-page #video-bonus > .section-sub,
.home-page #addons > .section-sub { text-wrap: balance; }
.home-page #portfolio > .section-sub,
.home-page #services > .section-sub {
max-width: 1040px;
text-wrap: balance;
}
.home-page #pricing > .section-sub {
text-wrap: wrap;
}
}
/* Left-align introductory text while keeping its containers centered. */
.home-page #portfolio > .section-sub,
.home-page #services > .section-sub,
.home-page #pricing > .section-sub,
.home-page #video-bonus > .section-sub,
.home-page #addons > .section-sub {
text-align: left;
margin-left: auto;
margin-right: auto;
}
/* Keep a consistent rhythm between the pricing heading, introduction and cards. */
@media (min-width: 1024px) {
.home-page #pricing > h2 { margin-bottom: 34px; }
.home-page #pricing > .section-sub { margin-bottom: 34px; }
}
/* Share the same desktop text edges for the video and optional-services introductions. */
@media (min-width: 1024px) {
.home-page #video-bonus > .section-sub,
.home-page #addons > .section-sub {
max-width: 952px;
width: calc(50% + 470px);
margin-left: calc(50% - 470px);
margin-right: 0;
text-wrap: wrap;
}
}
/* Keep launch-offer cards readable across mobile, tablet and large desktop. */
.home-page #video-bonus > .pricing-notes {
max-width: none;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
}
.home-page #video-bonus .pricing-note > div { min-width: 0; }
@media (min-width: 640px) {
.home-page #video-bonus > .pricing-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.home-page #video-bonus > .pricing-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* One scope note replaces repeated labels in the optional-services list. */
.home-page .addons-scope-note {
max-width: 900px;
margin: 0 auto 8px;
color: var(--text-soft);
font-size: .78rem;
}
/* Wide pricing panels with compact, readable feature lists. */
.home-page #pricing .price-features {
list-style: none;
padding-left: 0;
}
@media (min-width: 1024px) {
.home-page #pricing > .pricing-grid {
max-width: var(--pricing-content-width);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.home-page #pricing .price-card {
min-width: 0;
padding: 28px;
}
.home-page #pricing .price-badge { margin-bottom: 12px; }
.home-page #pricing .price-alt { margin-bottom: 12px; }
.home-page #pricing .payment-explanation { margin-bottom: 14px; }
.home-page #pricing .price-features { margin: 0 0 20px; }
.home-page #pricing .price-features li { padding: 6px 0; }
}
@media (max-width: 1023px) {
.home-page #pricing > .pricing-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Use matching outer edges for the pricing introduction and panels. */
.home-page #pricing { --pricing-content-width: 780px; }
.home-page #pricing > .section-sub,
.home-page #pricing > .pricing-grid,
.home-page #pricing > .pricing-notes,
.home-page #pricing > .home-update-scope {
max-width: var(--pricing-content-width);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
.home-page #pricing { --pricing-content-width: 1052px; }
}
/* Continue pricing-panel alignment through renewal notes and explanatory text. */
.home-page #pricing > .home-update-scope { text-align: left; }
@media (min-width: 1024px) {
.home-page #pricing > .pricing-notes {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
}
@media (max-width: 1023px) {
.home-page #pricing > .pricing-notes { grid-template-columns: minmax(0, 1fr); }
}