@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400; 600&display=swap"); html,body {margin:0; padding:0; min-height:100vh; font-family:"Open Sans",sans-serif; color:#fff}body {display:flex; background:linear-gradient(135deg,#093028,#237a57); background-size:cover}.sidebar {position:fixed; top:0; left:0; height:100%; width:380px; background:rgba(0,0,0,0.4); backdrop-filter:blur(10px); padding-top:40px; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; transition:left 0.3s ease; z-index:1000}.sidebar h2 {text-align:center; margin-bottom:40px; font-weight:700}.nav-link {width:220px; padding:12px 16px; margin:8px auto; text-decoration:none; color:#fff; background:rgba(255,255,255,0.1); border-radius:8px; text-align:center; transition:background 0.3s}.nav-link:hover,.nav-link.active {background:rgba(255,255,255,0.3)}.main-content {margin-left:380px; flex:1; padding:40px; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; min-height:100vh}.hero-container {text-align:center; max-width:800px; margin-bottom:40px}.hero-title {margin-bottom:20px; font-weight:700; text-transform:uppercase; font-size:2rem}.hero-subtitle {line-height:1.6; font-size:1rem; opacity:0.9}.choice-container {display:flex; gap:24px; max-width:900px; flex-wrap:wrap; justify-content:center}.choice-card {background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); border-radius:16px; padding:30px 20px; box-shadow:0 4px 24px rgba(0,0,0,0.3); text-align:center; transition:0.2s; flex:1; min-width:280px; display:flex; flex-direction:column}.choice-card:hover {transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.45)}.choice-icon {font-size:3rem; margin-bottom:16px; opacity:0.9}.choice-title {margin-bottom:12px; font-size:1.25rem; font-weight:600; text-transform:uppercase}.choice-text {line-height:1.6; font-size:0.95rem; opacity:0.95; flex-grow:1}.choice-btn {margin-top:auto; padding:12px 20px; font-size:1rem; font-weight:600; color:#fff; background:#27ae60; border-radius:8px; text-decoration:none; transition:background 0.3s,transform 0.2s}.choice-btn:hover {background:#2ecc71; transform:translateY(-2px)}.footer {text-align:center; padding:20px; font-size:0.9rem; color:rgba(255,255,255,0.6); margin-top:auto}.mobile-header {display:none}@media (max-width:900px) {.mobile-header {display:flex; align-items:center; justify-content:space-between; position:fixed; top:0; left:0; right:0; height:48px; padding:0 12px; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); z-index:1050} .mobile-title {font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mobile-burger {width:40px; height:40px; background:none; border:none; color:#fff; font-size:22px; display:flex; justify-content:center; align-items:center; cursor:pointer} .sidebar {width:min(80vw,320px); left:-100%} .sidebar.active {left:0} .sidebar.active::before {content:""; position:fixed; inset:0; z-index:-1; background:rgba(0,0,0,0.55); backdrop-filter:blur(2px)} .main-content {margin-left:0; padding:20px 20px 40px; padding-top:60px} .choice-container {gap:16px} @media (min-width:601px) {.choice-container {display:grid; grid-template-columns:repeat(2,1fr); gap:20px} .choice-card {min-width:0} } .hero-title {font-size:1.75rem} .hero-subtitle {font-size:0.9rem}}@media (max-width:600px) {.choice-card {padding:24px 16px} .hero-title {font-size:1.5rem} .hero-subtitle {font-size:0.85rem}}.menu-toggle {display:none !important}