/* ========================================================================== Option 2 Safety sections — ported from /option-2.html into index.html (RO) Scope: - .tri-guar section (cele 3 garanții: 14 / 30 / 48h) - .migration-band section (Vii de la UPfit/GMA?) Added: 2026-04-19 These sections are ADDITIVE — they do not replace any existing content. To remove: delete the two
blocks marked with / / and unlink this stylesheet from . ========================================================================== */ /* ─── Section head shared ─── */ .tri-guar .sec-head, .migration-band .sec-head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; } .tri-guar .sec-eyebrow, .migration-band .sec-eyebrow { text-transform: uppercase; letter-spacing: 0.15em; font-size: 12px; font-weight: 700; color: var(--nb-success, #10b981); } .tri-guar .sec-h2, .migration-band .sec-h2 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; margin: 0.5rem 0 0.75rem; color: var(--nb-text-main, #ffffff); } .tri-guar .sec-h2 .text-green, .migration-band .sec-h2 .text-green { background: linear-gradient(135deg, #10b981, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tri-guar .sec-lead, .migration-band .sec-lead { color: var(--nb-text-muted, #c0c0c0); font-size: 1.1rem; max-width: 56ch; margin: 0 auto; line-height: 1.6; } /* ─── Three Guarantees section ─── */ .tri-guar { padding: 5rem 0; background: linear-gradient(180deg, var(--nb-bg-body, #050505) 0%, var(--nb-bg-surface, #0f0f10) 100%); border-block: 1px solid var(--nb-border-light, rgba(255, 255, 255, 0.1)); } .tri-guar .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .tri-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; } @media (min-width: 860px) { .tri-grid { grid-template-columns: repeat(3, 1fr); } } .tri-card { background: var(--nb-bg-surface, #0f0f10); border: 1px solid var(--nb-border-light, rgba(255, 255, 255, 0.1)); border-radius: 16px; padding: 2rem; transition: transform 0.3s ease, border-color 0.3s ease; position: relative; } .tri-card:hover { transform: translateY(-4px); border-color: rgba(16, 185, 129, 0.4); } .tri-card .big { font-size: 3rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #10b981, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 6px; } .tri-card h3 { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 700; color: var(--nb-text-main, #ffffff); } .tri-card p { margin: 0; color: var(--nb-text-muted, #c0c0c0); font-size: 0.95rem; line-height: 1.65; } .tri-card .fine { margin-top: 1rem; font-size: 0.8rem; color: var(--nb-text-secondary, #909090); font-style: italic; } /* ─── Migration Band section ─── */ .migration-band { padding: 4rem 0; background: var(--nb-bg-surface, #0f0f10); border-block: 1px solid var(--nb-border-light, rgba(255, 255, 255, 0.1)); } .migration-band .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .migration-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 860px) { .migration-inner { grid-template-columns: 1.3fr 1fr; } } .migration-inner h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 1rem; color: var(--nb-text-main, #ffffff); line-height: 1.2; } .migration-inner p { color: var(--nb-text-muted, #c0c0c0); margin: 0 0 1.5rem; max-width: 50ch; line-height: 1.7; } .migration-inner .btn-migration { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.6rem; background: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #F5AF3D 100%); color: #000; border-radius: 10px; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 0; } .migration-inner .btn-migration:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 215, 0, 0.3); } .migration-visual { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--nb-border-light, rgba(255, 255, 255, 0.1)); border-radius: 16px; padding: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: 1rem; flex-wrap: wrap; } .migration-visual .from, .migration-visual .to { padding: 0.75rem 1.25rem; border-radius: 10px; font-weight: 700; white-space: nowrap; } .migration-visual .from { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--nb-danger, #f87171); } .migration-visual .to { background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.3); color: var(--nb-gold, #FFD700); } .migration-visual .arrow { color: var(--nb-text-secondary, #909090); font-size: 1.6rem; font-weight: 300; } @media (prefers-reduced-motion: reduce) { .tri-card { transition: none; } .tri-card:hover { transform: none; } .migration-inner .btn-migration { transition: none; } .migration-inner .btn-migration:hover { transform: none; } }