:root { --pr-surface: #1a1a1a; --pr-muted: rgba(245, 245, 240, 0.55); --pr-border: rgba(245, 245, 240, 0.10); --pr-border-acid: rgba(203, 255, 0, 0.25); --pr-radius: 12px; --pr-num-size: 56px; --pr-line-width: 2px; } .pr-hero { position: relative; padding: 6rem 0 4rem; overflow: hidden; } .pr-hero .container { position: relative; z-index: 1; } .pr-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; } .pr-hero__title em { font-style: italic; color: var(--color-primary); display: block; } .pr-hero__sub { font-size: 1rem; color: var(--pr-muted); line-height: 1.75; max-width: 600px; } .pr-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; 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; } .pr-btn:hover { opacity: .85; transform: translateY(-1px); } .pr-btn:active { transform: translateY(0); } .pr-steps { padding: 3rem 0 5rem; } .pr-timeline { display: flex; flex-direction: column; gap: 1.5rem; } .pr-step { display: grid; grid-template-columns: var(--pr-num-size) var(--pr-line-width) 1fr; gap: 0 1.5rem; align-items: start; } .pr-step__num { width: var(--pr-num-size); height: var(--pr-num-size); border-radius: 50%; border: 2px solid var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: .85rem; color: var(--color-primary); flex-shrink: 0; position: relative; z-index: 1; background: var(--color-dark); } .pr-step__line { width: var(--pr-line-width); background: linear-gradient( to bottom, var(--color-primary), transparent ); margin: 0 auto; align-self: stretch; min-height: 100%; } .pr-step__card { background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: var(--pr-radius); padding: 2rem 2.5rem; transition: border-color .2s; margin-bottom: 0; overflow: hidden; } .pr-step__card:hover { border-color: var(--pr-border-acid); } .pr-step__card-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .pr-step__label { display: block; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .65rem; font-weight: 700; letter-spacing: .14em; color: var(--pr-muted); margin-bottom: .5rem; } .pr-step__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: 1rem; } .pr-step__desc { font-size: .9rem; color: var(--pr-muted); line-height: 1.75; } .pr-step__left { display: flex; flex-direction: column; } .pr-step__right { position: relative; padding-top: 3rem; } .pr-step__right-label { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-light); margin-bottom: 1.25rem; } .pr-step__list { list-style: none; padding: 0; margin: 0; } .pr-step__list li { font-size: .88rem; color: var(--pr-muted); padding: .4rem 0 .4rem 1.3rem; position: relative; border-bottom: 1px solid var(--pr-border); line-height: 1.5; } .pr-step__list li:last-child { border-bottom: none; } .pr-step__list li::before { content: '●'; position: absolute; left: 0; color: var(--color-primary); font-size: .45rem; top: .65rem; } .pr-step__bubble { position: absolute; width: 220px; height: 220px; bottom: -80px; right: -60px; z-index: 0; opacity: .6; left: auto; top: auto; } .pr-cta { padding: 3rem 0; position: relative; overflow: hidden; text-align: center; } .pr-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; } .pr-cta__sub { font-size: 1rem; color: var(--pr-muted); line-height: 1.7; margin-bottom: 0; } @media (max-width: 768px) { .pr-hero__title { font-size: 2.4rem; } .pr-step { grid-template-columns: var(--pr-num-size) 1fr; } .pr-step__line { display: none; } .pr-step__card-inner { grid-template-columns: 1fr; gap: 1.5rem; } .pr-step__right { padding-top: 0; } .pr-step { grid-template-columns: 1fr; grid-template-rows: auto auto; } .pr-step__num { grid-column: 1; grid-row: 1; margin-bottom: 1rem; } .pr-step__line { display: none; } .pr-step__card { grid-column: 1; grid-row: 2; width: 100%; } }