:root { --sv-surface: #1a1a1a; --sv-muted: rgba(245, 245, 240, 0.55); --sv-border: rgba(245, 245, 240, 0.10); --sv-border-acid: rgba(203, 255, 0, 0.30); --sv-radius: 12px; } .sv-hero { position: relative; padding: 6rem 0 4rem; overflow: hidden; } .sv-hero .container { position: relative; z-index: 1; } .sv-hero__title { font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1.08; color: var(--color-light); margin-bottom: 1.25rem; } .sv-hero__title em { font-style: italic; color: var(--color-primary); display: block; } .sv-hero__sub { font-size: 1rem; color: var(--sv-muted); line-height: 1.75; max-width: 600px; } .sv-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .9rem; font-weight: 600; padding: .4rem 20px; border-radius: 4px; text-decoration: none; background: var(--color-primary); color: var(--color-dark); border: none; cursor: pointer; transition: opacity .15s, transform .1s; margin-top: 1.5rem; } .sv-btn:hover { opacity: .85; transform: translateY(-1px); } .sv-btn:active { transform: translateY(0); } .sv-offer { padding: 2rem 0; } .sv-offer__card { position: relative; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-radius); padding: 3rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; row-gap: 0; align-items: stretch; transition: border-color .2s; } .sv-offer__card:hover { border-color: var(--sv-border-acid); } .sv-offer--featured .sv-offer__card { border-color: var(--color-primary); background: #1c1c1c; column-gap: 4rem; row-gap: 0; } .sv-offer--featured .sv-offer__card:hover { border-color: var(--sv-border-acid); background: #1c1c1c; box-shadow: none; } .sv-offer--featured .sv-offer__title { white-space: nowrap; font-size: clamp(1.6rem, 2.5vw, 2.2rem); } .sv-offer--featured .sv-offer__title-full { grid-row: 1; } .sv-offer--featured .sv-offer__left { grid-row: 2; } .sv-offer--featured .sv-offer__right { grid-row: 2; } .sv-offer--featured .sv-offer__cta { grid-row: 2; } .sv-offer__popular { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--color-primary); color: var(--color-dark); padding: .35rem 1.5rem; border-radius: 0 0 5px 5px; white-space: nowrap; } .sv-offer__title-full { grid-column: 1 / -1; margin-bottom: 1.5rem; } .sv-offer__num { display: block; font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: 2.5rem; color: var(--color-primary); line-height: 1; margin-bottom: .5rem; } .sv-offer__title { font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: var(--color-primary); line-height: 1.15; margin-bottom: 1.25rem; } .sv-offer__title-accent { font-weight: 700; color: var(--color-primary); } .sv-offer__left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; } .sv-offer__body { flex: 1; } .sv-offer__cta { grid-column: 1; grid-row: 1; align-self: end; } .sv-offer__desc { font-size: .95rem; color: var(--sv-muted); line-height: 1.75; margin-bottom: 0; } .sv-offer__right { grid-column: 2; grid-row: 1; position: relative; padding-top: 4.3rem; } .sv-offer__included-label { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--color-light); margin-bottom: 1.25rem; } .sv-offer__list { list-style: none; padding: 0; margin: 0; } .sv-offer__list li { font-size: .9rem; color: var(--sv-muted); padding: .5rem 0 .5rem 1.5rem; position: relative; border-bottom: 1px solid var(--sv-border); line-height: 1.5; } .sv-offer__list li:last-child { border-bottom: none; } .sv-offer__list li::before { content: '●'; position: absolute; left: 0; color: var(--color-primary); font-size: .5rem; top: .8rem; } .sv-offer__bubble { position: absolute; width: 200px; height: 200px; bottom: -80px; left: 50%; transform: translateX(-50%); z-index: 0; opacity: .7; } .sv-cta { padding: 6rem 0; position: relative; overflow: visible; } .sv-cta .container { position: relative; z-index: 1; } .sv-cta__title { font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem); color: var(--color-light); line-height: 1.15; margin-bottom: 1rem; } .sv-cta__title .hm-accent { font-style: italic; } .sv-cta__sub { font-size: 1rem; color: var(--sv-muted); line-height: 1.7; margin-bottom: 0; } @media (max-width: 960px) { .sv-hero__title { font-size: 2rem; } .sv-offer__card { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; } .sv-offer__left, .sv-offer__right, .sv-offer__cta, .sv-offer__title-full { grid-column: 1; grid-row: auto; } .sv-offer__right { padding-top: 0; } .sv-offer__title { font-size: 1.6rem; } .sv-offer--featured .sv-offer__title { white-space: normal; } .sv-offer--featured .sv-offer__left, .sv-offer--featured .sv-offer__right, .sv-offer--featured .sv-offer__cta { grid-row: auto; margin-top: 0; } .sv-cta { overflow: hidden; } }