:root { --tr-surface: #1a1a1a; --tr-muted: rgba(245, 245, 240, 0.50); --tr-muted-off: rgba(245, 245, 240, 0.50); --tr-border: rgba(245, 245, 240, 0.10); --tr-border-acid: rgba(203, 255, 0, 0.30); --tr-radius: 12px; } .tr-hero { position: relative; padding: 6rem 0 4rem; overflow: visible; } .tr-hero .container { position: relative; z-index: 1; } .tr-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; } .tr-hero__title em { font-style: italic; color: var(--color-primary); } .tr-hero__sub { font-size: 1rem; color: var(--tr-muted); line-height: 1.75; } .tr-grid-section { padding: 3rem 0 2rem; } .tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .tr-card { position: relative; background: var(--tr-surface); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; transition: border-color .2s; } .tr-card:hover { border-color: var(--tr-border-acid); } .tr-card--featured { border-color: var(--color-primary); background: #1c1c1c; } .tr-card__badge { display: inline-block; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 4px; background: rgba(245, 245, 240, 0.08); color: var(--color-light); margin-bottom: 1rem; align-self: flex-start; } .tr-card__badge--featured { background: rgba(203, 255, 0, 0.15); color: var(--color-primary); } .tr-card__price { font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: clamp(2rem, 3vw, 2.8rem); color: var(--color-primary); line-height: 1; margin-bottom: .35rem; } .tr-card__currency { font-size: 1.5rem; font-weight: 700; } .tr-card__name { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .85rem; font-weight: 600; color: var(--color-light); margin-bottom: 1.25rem; } .tr-card__list { list-style: none; padding: 0; margin: 0; flex: 1; } .tr-card__list-item { font-size: .82rem; padding: .35rem 0 .35rem 1.3rem; position: relative; line-height: 1.5; } .tr-card__list-item--on { color: var(--tr-muted); } .tr-card__list-item--off { color: var(--tr-muted-off); text-decoration: line-through; text-decoration-color: rgba(245, 245, 240, 0.2); } .tr-card__list-item--on::before { content: '●'; position: absolute; left: 0; color: var(--color-primary); font-size: .45rem; top: .65rem; } .tr-card__list-item--off::before { content: '—'; position: absolute; left: 0; color: var(--tr-muted-off); font-size: .7rem; top: .35rem; } .tr-card__popular { position: absolute; top: 0rem; right: 0rem; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--color-primary); color: var(--color-dark); padding: .3rem .8rem; border-radius: 0 12px 0 5px; white-space: nowrap; } .tr-mention { font-size: .75rem; color: var(--tr-muted); text-align: center; margin-top: 1.5rem; } .tr-btn { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: auto; text-align: center; 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; } .tr-btn:hover { opacity: .85; transform: translateY(-1px); } .tr-btn:active { transform: translateY(0); } .tr-maintenance { padding: 5rem 0; position: relative; overflow: visible; } .tr-maintenance .container { position: relative; z-index: 1; } .tr-maintenance__title { font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: var(--color-light); line-height: 1.15; margin-bottom: .75rem; } .tr-maintenance__sub { font-size: 1rem; color: var(--tr-muted); line-height: 1.7; margin-bottom: 2.5rem; max-width: 600px; } .tr-maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .tr-maint-card { background: var(--tr-surface); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; transition: border-color .2s; } .tr-maint-card:hover { border-color: var(--tr-border-acid); } .tr-maint-card__price { font-family: 'Raleway', 'Raleway Fallback', sans-serif; font-weight: 900; font-size: clamp(2rem, 3vw, 2.8rem); color: var(--color-primary); line-height: 1; margin-bottom: .35rem; } .tr-maint-card__currency { font-size: 1.5rem; font-weight: 700; } .tr-maint-card__period { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: 1rem; font-weight: 500; color: var(--tr-muted); } .tr-maint-card__name { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: .85rem; font-weight: 600; color: var(--color-light); margin-bottom: 1.25rem; } .tr-cta { padding: 6rem 0; position: relative; overflow: visible; } .tr-cta .container { position: relative; z-index: 1; } .tr-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; } .tr-cta__sub { font-size: 1rem; color: var(--tr-muted); line-height: 1.7; margin-bottom: 2rem; } @media (max-width: 1024px) { .tr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .tr-hero__title { font-size: 2.4rem; } .tr-grid { grid-template-columns: 1fr; } .tr-maint-grid { grid-template-columns: 1fr; } }