:root { --primary: #2c3e50; --accent: #FFD166; --accent1:#4361ee; --light-bg: #f8f9fa; --text-dark: #212529; --card-shadow: 0 4px 12px rgba(0,0,0,0.05); --border-light: #e0e0e0; } * { margin: 0; padding: 0; box-sizing: border-box; }   p { margin-bottom: 1.2rem; } .lead { font-size: 1.1rem; color: #495057; font-style: italic; margin-bottom: 1.5rem; } .btn { background-color: var(--accent1); color: white; border: none; padding: 20px 24px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; display: flex; align-items: center; gap: 8px; justify-content: center; }  .btn:disabled { background-color: #95a5a6; cursor: not-allowed; opacity: 0.8; } .section { padding: 40px 0; } .card { background: white; border-radius: 12px; padding: 2.5rem; margin: 2.5rem 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; scroll-margin-top: 90px; } .card:hover { transform: translateY(-5px); }   #generator { display: flex; flex-direction: column; gap: 25px; } .options { display: flex; gap: 15px; flex-wrap: wrap; } .option { flex: 1; min-width: 200px; position: relative; } .option input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .option-label { display: block; padding: 16px; border: 2px solid var(--border-light); border-radius: 8px; cursor: pointer; transition: all 0.3s; text-align: center; font-weight: 600; } .option input:checked + .option-label { border-color: var(--accent1); background-color: rgba(52, 152, 219, 0.1); color: var(--primary); font-weight: 700; } .instructions { background: var(--light-bg); padding: 15px; border-radius: 8px; font-size: 0.95rem; color: #555; }   .results-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; display: none; }  .result-card { background: var(--light-bg); border-radius: 8px; padding: 18px 15px; text-align: center; transition: all 0.3s; position: relative; overflow: hidden; }  .result-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }  .result-number { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 8px; }  .result-name { font-size: 1.25rem; font-weight: 700; color: var(--primary); margin-bottom: 12px; min-height: 40px; display: flex; align-items: center; justify-content: center; }  .copy-btn { background: white; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.2s; font-weight: 500; }  .copy-btn:hover { background: #f1f1f1; border-color: #bbb; }  .skeleton { height: 80px; border-radius: 8px; background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%); background-size: 400% 100%; animation: loading 1.5s infinite; display: none; }  @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }  .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 1s linear infinite; }  @keyframes spin { to { transform: rotate(360deg); } }  .error-card { grid-column: 1 / -1; background: #fff8f8; border: 1px solid #ffebee; border-radius: 8px; padding: 15px; color: #c62828; text-align: center; }  .error-card a { color: #c62828; font-weight: 600; text-decoration: underline; }   .contry-ge-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .contry-ge-card { padding: 25px; } .contry-ge-card h2 { color: var(--primary); position: relative; padding-bottom: 10px; font-size: 1.8rem; } .contry-ge-card h2:after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--accent1); }   .testimonial { background: var(--light-bg); border-left: 4px solid var(--accent1); padding: 18px 20px; margin: 25px 0; border-radius: 0 8px 8px 0; font-style: italic; color: #444; }   .case-study { background: #f9fafb; border-radius: 8px; padding: 20px; margin-bottom: 25px; }  .case-study h3 { color: var(--primary); margin-top: 0; display: flex; align-items: center; gap: 10px; }   .stat-card { text-align: center; margin: 25px 0; }  .stat-number { font-size: 3.5rem; font-weight: 700; color: var(--accent1); line-height: 1; }     @media (max-width: 768px) { h1 { font-size: 2rem; } .section { padding: 10px 0; } h2 { font-size: 1.6rem; } .card { padding: 20px; } .results-grid { grid-template-columns: 1fr; } .generator-section { padding: 1rem; margin: 0; }    .container { padding: 0 1rem; margin-top: 1.5rem; } }