@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); :root { --bg: #090913; --surface: #111127; --surface2: #16162e; --border: rgba(255,255,255,0.08); --accent: #7c6fff; --accent2: #4f8ef7; --green: #00e676; --red: #ff5252; --text: #f0f0f8; --muted: #8a8ab0; --dim: #383860; --radius: 14px; --rsm: 9px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: #a89bff; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 99px; } .navbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 60px; background: rgba(9,9,19,0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .navbar-brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(120deg,#fff 40%,var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .navbar-links { display: flex; align-items: center; gap: 0.25rem; } .navbar-links a { color: var(--muted); font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: var(--rsm); transition: color 0.15s, background 0.15s; } .navbar-links a:hover { color: var(--text); background: var(--surface); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.25rem; border-radius: var(--rsm); font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.18s; text-decoration: none; white-space: nowrap; font-family: inherit; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 4px 18px rgba(124,111,255,0.4); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(124,111,255,0.55); color: #fff; } .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-success { background: linear-gradient(135deg, #00e676, #00c853); color: #000; font-weight: 700; box-shadow: 0 4px 18px rgba(0,230,118,0.3); } .btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,230,118,0.45); } .btn-danger { background: rgba(255,82,82,0.12); color: var(--red); border: 1px solid rgba(255,82,82,0.2); } .btn-danger:hover { background: rgba(255,82,82,0.2); } .btn-lg { padding: 0.75rem 1.75rem; font-size: 0.95rem; border-radius: 11px; } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .navbar-cta { background: linear-gradient(135deg, #9d8fff, #6a9fff) !important; color: #fff !important; font-weight: 700 !important; padding: 0.42rem 1rem !important; font-size: 0.82rem !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 4px 16px rgba(124,111,255,0.5) !important; border: none !important; letter-spacing: 0.01em; } .navbar-cta:hover { transform: translateY(-1px) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 6px 20px rgba(124,111,255,0.65) !important; color: #fff !important; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .badge { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .badge-free { background: rgba(124,111,255,0.12); color: var(--accent); border: 1px solid rgba(124,111,255,0.2); } .badge-basic { background: rgba(79,142,247,0.12); color: #7eb3ff; border: 1px solid rgba(79,142,247,0.2); } .badge-pro { background: rgba(0,230,118,0.12); color: var(--green); border: 1px solid rgba(0,230,118,0.2); } .form-group { margin-bottom: 1.1rem; } .form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .form-control { width: 100%; padding: 0.7rem 0.9rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-size: 0.9rem; font-family: inherit; transition: border-color 0.15s; } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,111,255,0.1); } .form-control::placeholder { color: var(--dim); } select.form-control option { background: var(--surface2); } .alert { padding: 0.8rem 1rem; border-radius: var(--rsm); font-size: 0.875rem; margin-bottom: 1rem; } .alert-error { background: rgba(255,82,82,0.08); border: 1px solid rgba(255,82,82,0.2); color: #ff8a80; } .alert-success { background: rgba(0,230,118,0.08); border: 1px solid rgba(0,230,118,0.2); color: #69f0ae; } .alert-warning { background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.2); color: #ffd54f; } .alert-info { background: rgba(124,111,255,0.08); border: 1px solid rgba(124,111,255,0.2); color: var(--accent); } .progress-bar-wrap { background: var(--surface2); border-radius: 99px; height: 5px; overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 99px; transition: width 0.5s ease; } .hero { position: relative; text-align: center; padding: 80px 2rem 64px; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(ellipse, rgba(124,111,255,0.13) 0%, transparent 68%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; } .hero-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.85rem; border-radius: 99px; background: rgba(124,111,255,0.1); border: 1px solid rgba(124,111,255,0.22); font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.1rem; } .hero h1 em { font-style: normal; background: linear-gradient(120deg, #fff 20%, var(--accent) 60%, var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.1rem; color: var(--muted); max-width: 540px; margin: 0 auto 2.25rem; line-height: 1.7; } .hero-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .hero-numbers { display: flex; justify-content: center; gap: 3.5rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); } .hero-numbers .num { font-size: 1.75rem; font-weight: 900; color: var(--text); } .hero-numbers .lbl { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; } .section { padding: 64px 2rem; max-width: 1080px; margin: 0 auto; } .section-label { display: inline-block; margin-bottom: 0.6rem; font-size: 0.72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; } .section-title { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .section-sub { color: var(--muted); font-size: 1rem; max-width: 480px; } .section-head { margin-bottom: 2.5rem; } .section-head.center { text-align: center; } .section-head.center .section-sub { margin: 0 auto; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: border-color 0.2s, transform 0.2s; } .step:hover { border-color: rgba(124,111,255,0.3); transform: translateY(-3px); } .step-icon { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, rgba(124,111,255,0.18), rgba(79,142,247,0.18)); border: 1px solid rgba(124,111,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; } .step h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; } .step p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; } .plans-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media(max-width:640px){ .plans-preview { grid-template-columns: 1fr; } } .plan-prev { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; transition: border-color 0.2s; } .plan-prev:hover { border-color: rgba(124,111,255,0.3); } .plan-prev.hot { border-color: rgba(124,111,255,0.3); background: rgba(124,111,255,0.04); } .plan-prev .price { font-size: 2rem; font-weight: 900; line-height: 1; } .plan-prev .price span { font-size: 0.85rem; color: var(--muted); font-weight: 400; } .plan-prev .name { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.4rem; } .plan-prev .desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; } .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.25rem; } .testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; } .testi p { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.9rem; font-style: italic; } .testi p::before { content: '"'; color: var(--accent); font-style: normal; margin-right: 1px; } .testi strong { font-size: 0.82rem; display: block; } .testi span { font-size: 0.75rem; color: var(--muted); } .page-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 4rem; } .page-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .page-top h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; } .page-top h1 span { color: var(--accent); } .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } @media(max-width:700px){ .stats-bar { grid-template-columns: repeat(2,1fr); } } .stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rsm); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.85rem; } .stat-box .ico { font-size: 1.4rem; } .stat-box .val { font-size: 1.3rem; font-weight: 800; line-height: 1; } .stat-box .lbl { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; } .upgrade-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; background: linear-gradient(135deg, rgba(124,111,255,0.07), rgba(79,142,247,0.07)); border: 1px solid rgba(124,111,255,0.18); border-radius: var(--rsm); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.875rem; } .upgrade-bar p { color: var(--muted); } .upgrade-bar strong { color: var(--text); } .ad-banner { background: var(--surface2); border: 1px dashed var(--border); border-radius: var(--rsm); padding: 0.85rem; text-align: center; font-size: 0.78rem; color: var(--dim); margin-bottom: 1.5rem; } .rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.25rem; } .rm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; display: flex; flex-direction: column; gap: 0.7rem; transition: border-color 0.2s, transform 0.2s; } .rm-card:hover { border-color: rgba(124,111,255,0.3); transform: translateY(-2px); } .rm-card h3 { font-size: 0.95rem; font-weight: 700; } .rm-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; } .rm-tag { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; background: var(--surface2); border-radius: 99px; font-size: 0.72rem; color: var(--muted); } .rm-progress .row { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; } .rm-progress .row strong { color: var(--text); } .rm-actions { display: flex; gap: 0.4rem; } .empty-box { text-align: center; padding: 5rem 2rem; } .empty-box .e-ico { font-size: 3.5rem; opacity: 0.3; margin-bottom: 1rem; } .empty-box h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; } .empty-box p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.75rem; } .form-page { max-width: 580px; margin: 3rem auto; padding: 0 2rem 4rem; } .form-page .back { font-size: 0.82rem; color: var(--muted); display: inline-block; margin-bottom: 1.5rem; } .form-page h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.3rem; } .form-page .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; } .spinner-box { display: none; text-align: center; padding: 3rem 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .spinner-ring { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--surface2); border-top-color: var(--accent); animation: spin 0.85s linear infinite; margin: 0 auto 1.25rem; } @keyframes spin { to { transform: rotate(360deg); } } .spinner-box h2 { font-size: 1.15rem; margin-bottom: 0.3rem; } .spinner-box p { font-size: 0.85rem; color: var(--muted); } .spin-steps { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; text-align: left; max-width: 280px; margin-left: auto; margin-right: auto; } .spin-step { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; color: var(--muted); opacity: 0; animation: fadeIn 0.4s ease forwards; } .spin-step:nth-child(1){animation-delay:0.5s;} .spin-step:nth-child(2){animation-delay:3s;} .spin-step:nth-child(3){animation-delay:9s;} .spin-step:nth-child(4){animation-delay:16s;} @keyframes fadeIn { to { opacity: 1; } } .spin-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .rm-page { max-width: 920px; margin: 0 auto; padding: 2rem 2rem 4rem; } .rm-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; margin-bottom: 1.5rem; } .rm-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.3rem; } .rm-header p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; } .rm-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .rm-meta-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; font-size: 0.75rem; color: var(--muted); } .rm-prog-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; } .rm-prog-row strong { color: var(--text); } .fase { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; transition: border-color 0.2s; } .fase:hover { border-color: rgba(124,111,255,0.25); } .fase-hdr { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; cursor: pointer; user-select: none; transition: background 0.15s; } .fase-hdr:hover { background: rgba(255,255,255,0.02); } .fase-hdr-l { display: flex; align-items: center; gap: 0.75rem; } .fase-num-badge { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; color: #fff; } .fase-hdr h3 { font-size: 0.9rem; font-weight: 700; } .fase-weeks { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; } .fase-arrow { color: var(--muted); font-size: 0.75rem; transition: transform 0.25s; } .fase-body { padding: 0 1.35rem 1.35rem; } .fase-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.9rem; padding-top: 0.1rem; } .lesson-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.9rem; border-radius: var(--rsm); border: 1px solid var(--border); background: var(--surface2); margin-bottom: 0.4rem; gap: 0.75rem; transition: all 0.15s; } .lesson-row:hover { border-color: rgba(124,111,255,0.25); } .lesson-row.done { border-color: rgba(0,230,118,0.18); } .lesson-row.done .lt { text-decoration: line-through; color: var(--muted); } .li-info { flex: 1; min-width: 0; } .lt { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ld { font-size: 0.75rem; color: var(--muted); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .li-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .lesson-wrap { display: grid; grid-template-columns: 1fr 390px; gap: 1.75rem; max-width: 1280px; margin: 1.75rem auto; padding: 0 2rem 4rem; align-items: start; } @media(max-width:960px){ .lesson-wrap { grid-template-columns: 1fr; } } .lesson-body {} .l-breadcrumb { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.75rem; } .l-breadcrumb a { color: var(--muted); } .l-breadcrumb a:hover { color: var(--accent); } .l-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.35rem; } .l-desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; } .l-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; margin-bottom: 1.25rem; } .l-block-title { font-size: 0.7rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .l-block-title::after { content:''; flex:1; height:1px; background: var(--border); } .resource { margin-bottom: 1.1rem; } .resource-hdr { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .resource-hdr span { font-size: 0.875rem; font-weight: 600; } .resource-hdr a { font-size: 0.72rem; color: var(--muted); white-space: nowrap; } .resource-hdr a:hover { color: var(--accent); } .video-frame { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border); } .video-frame iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:none; } .video-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); font-size: 0.875rem; color: var(--text); transition: all 0.15s; } .video-link:hover { border-color: var(--accent); color: var(--accent); } .check-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem; border-radius: var(--rsm); cursor: pointer; border: 1px solid transparent; transition: all 0.15s; } .check-item:hover { background: var(--surface2); border-color: var(--border); } .check-item.checked { background: rgba(0,230,118,0.04); border-color: rgba(0,230,118,0.14); } .check-item input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; flex-shrink:0; } .check-item label { cursor: pointer; font-size: 0.875rem; flex:1; } .check-item.checked label { text-decoration: line-through; color: var(--muted); } .exercise-box { background: linear-gradient(135deg, rgba(124,111,255,0.05), rgba(79,142,247,0.05)); border: 1px solid rgba(124,111,255,0.15); border-left: 3px solid var(--accent); border-radius: var(--rsm); padding: 1rem 1.1rem; font-size: 0.875rem; color: var(--muted); line-height: 1.65; } .chat-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; height: 620px; position: sticky; top: 80px; overflow: hidden; } .chat-top { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface2); } .chat-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } .chat-info { flex:1; } .chat-name { font-size: 0.85rem; font-weight: 700; } .chat-status { font-size: 0.7rem; color: var(--green); } .chat-count { font-size: 0.7rem; color: var(--muted); } .chat-msgs { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; } .msg { max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 12px; font-size: 0.82rem; line-height: 1.55; word-break: break-word; } .msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-bottom-right-radius: 3px; } .msg.assistant { align-self: flex-start; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 3px; } .msg.typing { color: var(--muted); font-style: italic; } .chat-form { display: flex; gap: 0.4rem; align-items: flex-end; padding: 0.65rem; border-top: 1px solid var(--border); } .chat-input { flex:1; padding: 0.6rem 0.8rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-size: 0.82rem; resize: none; font-family: inherit; max-height: 90px; transition: border-color 0.15s; } .chat-input:focus { outline: none; border-color: var(--accent); } .chat-btn { width: 36px; height: 36px; border-radius: var(--rsm); border: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; } .chat-btn:hover { transform: scale(1.05); } .chat-btn:disabled { opacity: 0.4; transform: none; } .chat-limit { padding: 0.5rem 0.9rem; font-size: 0.75rem; color: var(--muted); text-align: center; border-top: 1px solid var(--border); } .pricing-wrap { max-width: 940px; margin: 0 auto; padding: 4rem 2rem 5rem; text-align: center; } .pricing-wrap h1 { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 0.5rem; } .pricing-wrap .sub { color: var(--muted); margin-bottom: 3rem; } .plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 4rem; text-align: left; } @media(max-width:640px){ .plans-grid { grid-template-columns: 1fr; } } .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; position: relative; transition: transform 0.2s, border-color 0.2s; } .plan:hover { transform: translateY(-3px); } .plan.hot { border-color: rgba(124,111,255,0.35); background: rgba(124,111,255,0.04); } .plan-top-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 0.68rem; font-weight: 800; padding: 0.18rem 0.85rem; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .plan-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.4rem; } .plan-price { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; } .plan-price small { font-size: 0.9rem; font-weight: 400; color: var(--muted); } .plan-tagline { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 1.25rem; } .plan-sep { height: 1px; background: var(--border); margin-bottom: 1.1rem; } .plan-features { list-style: none; margin-bottom: 1.5rem; } .plan-features li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.85rem; color: var(--muted); } .plan-features li .y { color: var(--green); font-weight: 700; font-size: 0.75rem; } .plan-features li .n { color: var(--dim); font-size: 0.75rem; } .faq-wrap { max-width: 580px; margin: 0 auto; text-align: left; } .faq-wrap h2 { font-size: 1.35rem; font-weight: 800; text-align: center; margin-bottom: 1.25rem; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rsm); padding: 1.1rem; margin-bottom: 0.6rem; } .faq-item strong { font-size: 0.875rem; display: block; margin-bottom: 0.3rem; } .faq-item p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; } .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(ellipse at 50% -10%, rgba(124,111,255,0.1), transparent 55%); } .auth-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.25rem; width: 100%; max-width: 400px; } .auth-logo-mark { font-size: 1.2rem; font-weight: 800; margin-bottom: 1.75rem; background: linear-gradient(120deg,#fff 40%,var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-box h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .auth-box .sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.6rem; } .auth-sep { height: 1px; background: var(--border); margin: 1.25rem 0; } .auth-foot { text-align: center; font-size: 0.82rem; color: var(--muted); } .footer { border-top: 1px solid var(--border); padding: 3rem 2rem 1.5rem; margin-top: 4rem; font-size: 0.82rem; color: var(--muted); } .footer-main { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; margin-bottom: 2.5rem; } @media(max-width:640px){ .footer-main { grid-template-columns: 1fr; gap: 2rem; } } .footer-logo { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.3px; background: linear-gradient(120deg, #fff 40%, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.6rem; } .footer-brand p { font-size: 0.82rem; color: var(--muted); line-height: 1.65; max-width: 280px; } .footer-badge { display: inline-flex !important; align-items: center !important; justify-content: center; height: 24px !important; padding: 0 0.75rem; border-radius: 99px; font-size: 0.72rem; font-weight: 700; text-decoration: none; white-space: nowrap; line-height: 24px !important; vertical-align: middle; transition: opacity 0.15s; box-sizing: border-box; } .footer-badge:hover { opacity: 0.8; } .footer-badge-claude { color: var(--accent); background: rgba(124,111,255,0.08); border: 1px solid rgba(124,111,255,0.18); } .footer-powered { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; color: var(--accent); background: rgba(124,111,255,0.08); border: 1px solid rgba(124,111,255,0.18); padding: 0.2rem 0.7rem; border-radius: 99px; line-height: 1; } .footer-links-group { display: flex; gap: 3rem; } .footer-col { display: flex; flex-direction: column; gap: 0.5rem; } .footer-col-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 0.3rem; } .footer-col a { color: var(--muted); font-size: 0.82rem; transition: color 0.15s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--dim); } .footer-bottom-links a { color: var(--dim); } .footer-bottom-links a:hover { color: var(--muted); } .hamburger { display: none; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 6px; border: none; cursor: pointer; background: transparent; border-radius: var(--rsm); } .hamburger span { display: block; width: 18px; height: 2px; background: var(--muted); border-radius: 2px; transition: all 0.25s; } .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .hero { padding: 60px 2rem 48px; overflow: hidden; position: relative; } .hero::before { content: ''; position: absolute; top: -120px; left: -5%; width: 55%; height: 600px; background: radial-gradient(ellipse, rgba(124,111,255,0.1) 0%, transparent 68%); pointer-events: none; } .hero::after { content: ''; position: absolute; top: -60px; right: -5%; width: 50%; height: 500px; background: radial-gradient(ellipse, rgba(79,142,247,0.07) 0%, transparent 68%); pointer-events: none; } .hero-2col { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1100px; margin: 0 auto; } .hero-text { text-align: left; } .hero-text .hero-chip { margin-bottom: 1.25rem; } .hero-text h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1rem; } .hero-text h1 em { font-style: normal; background: linear-gradient(120deg, #fff 20%, var(--accent) 60%, var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-text p { font-size: 1.05rem; color: var(--muted); max-width: 480px; margin-bottom: 2rem; line-height: 1.7; } .hero-numbers { display: flex; gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .hero-numbers .num { font-size: 1.6rem; font-weight: 900; color: var(--text); } .hero-numbers .lbl { font-size: 0.75rem; color: var(--muted); margin-top: 0.1rem; } .hero-visual { position: relative; } .hero-visual::before { content: ''; position: absolute; inset: -20px; background: radial-gradient(ellipse, rgba(124,111,255,0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; } .browser-mockup { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); transform: perspective(1000px) rotateY(-4deg) rotateX(2deg); transition: transform 0.4s; } .browser-mockup:hover { transform: perspective(1000px) rotateY(-1deg) rotateX(1deg); } .browser-chrome { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); } .browser-dots { display: flex; gap: 5px; } .browser-dots span { width: 10px; height: 10px; border-radius: 50%; } .browser-dots span:nth-child(1) { background: #ff5f57; } .browser-dots span:nth-child(2) { background: #febc2e; } .browser-dots span:nth-child(3) { background: #28c840; } .browser-bar { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 5px; padding: 0.25rem 0.75rem; font-size: 0.7rem; color: var(--muted); text-align: center; } .browser-content { padding: 1.1rem; } .bm-greeting { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.85rem; } .bm-roadmaps { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.85rem; } .bm-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 0.75rem; } .bm-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.45rem; } .bm-card-title { font-size: 0.78rem; font-weight: 700; } .bm-card-pct { font-size: 0.7rem; color: var(--accent); font-weight: 700; } .bm-bar { background: rgba(255,255,255,0.06); border-radius: 99px; height: 4px; margin-bottom: 0.35rem; overflow: hidden; } .bm-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; } .bm-card-meta { font-size: 0.65rem; color: var(--muted); } .bm-chat { display: flex; flex-direction: column; gap: 0.4rem; } .bm-chat-msg { font-size: 0.7rem; padding: 0.45rem 0.65rem; border-radius: 8px; line-height: 1.45; } .bm-msg-ai { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); border-bottom-left-radius: 2px; } .bm-msg-bot { background: linear-gradient(135deg, rgba(124,111,255,0.15), rgba(79,142,247,0.1)); border: 1px solid rgba(124,111,255,0.2); color: var(--text); border-bottom-right-radius: 2px; } .testi-stars { color: #fbbf24; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 0.75rem; } .testi-author { display: flex; align-items: center; gap: 0.65rem; margin-top: 1rem; } .testi-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; color: #fff; } .testi-author strong { font-size: 0.82rem; display: block; margin-bottom: 0.1rem; } .testi-author span { font-size: 0.72rem; color: var(--muted); } .testi p { margin-bottom: 0; } .cta-section { padding: 80px 2rem; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgba(124,111,255,0.1) 0%, transparent 65%); pointer-events: none; } .cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; background: var(--surface); border: 1px solid rgba(124,111,255,0.2); border-radius: 20px; padding: 3rem 2.5rem; box-shadow: 0 0 60px rgba(124,111,255,0.08); } .cta-chip { display: inline-block; padding: 0.2rem 0.8rem; border-radius: 99px; background: rgba(124,111,255,0.1); border: 1px solid rgba(124,111,255,0.22); font-size: 0.72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.1rem; } .cta-inner h2 { font-size: 1.85rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.6rem; } .cta-inner p { color: var(--muted); font-size: 0.95rem; } .cta-trust { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; font-size: 0.75rem; color: var(--muted); } .auth-split { min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1fr 1fr; } .auth-split-form { display: grid; place-items: center; padding: 2rem; background: var(--bg); } .auth-split-panel { display: flex; align-items: center; background: linear-gradient(145deg, rgba(124,111,255,0.06) 0%, rgba(79,142,247,0.04) 100%); border-left: 1px solid var(--border); padding: 3rem 2.5rem; } .auth-panel-inner { max-width: 380px; } .auth-panel-chip { display: inline-block; padding: 0.25rem 0.8rem; border-radius: 99px; background: rgba(124,111,255,0.1); border: 1px solid rgba(124,111,255,0.22); font-size: 0.72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.2rem; } .auth-panel-inner h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1.75rem; line-height: 1.3; } .auth-panel-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2rem; } .auth-panel-list li { display: flex; align-items: flex-start; gap: 0.9rem; } .apl-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: linear-gradient(135deg, rgba(124,111,255,0.18), rgba(79,142,247,0.18)); border: 1px solid rgba(124,111,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .auth-panel-list li div { display: flex; flex-direction: column; gap: 0.15rem; } .auth-panel-list li strong { font-size: 0.875rem; font-weight: 700; } .auth-panel-list li span { font-size: 0.78rem; color: var(--muted); line-height: 1.5; } .auth-panel-quote { font-size: 0.82rem; color: var(--muted); font-style: italic; line-height: 1.6; padding: 0.85rem 1rem; background: rgba(255,255,255,0.03); border-left: 3px solid var(--accent); border-radius: 0 var(--rsm) var(--rsm) 0; } .auth-panel-quote strong { color: var(--text); font-style: normal; } .auth-panel-trust { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.reveal-delay { transition-delay: 0.15s; } .reveal.reveal-delay2 { transition-delay: 0.3s; } .reveal.visible { opacity: 1; transform: none; } @media(max-width:960px){ .hero-2col { grid-template-columns: 1fr; gap: 2.5rem; } .hero-visual { display: none; } .hero-text { text-align: center; } .hero-text p { max-width: 100%; } .hero-btns { justify-content: center; } .hero-numbers { justify-content: center; } .auth-split { grid-template-columns: 1fr; } .auth-split-panel { display: none; } } @media(max-width:768px){ .navbar { padding: 0 1rem; position: relative; } .hamburger { display: flex; } .navbar-links { display: none; position: absolute; top: 60px; left: 0; right: 0; z-index: 200; background: rgba(9,9,19,0.97); backdrop-filter: blur(20px); flex-direction: column; padding: 1rem; border-bottom: 1px solid var(--border); gap: 0.25rem; } .navbar-links.open { display: flex; } .navbar-links .btn { width: 100%; justify-content: center; } .hero, .section, .rm-page, .lesson-wrap, .pricing-wrap { padding-left: 1rem; padding-right: 1rem; } .page-wrap { padding: 1.25rem 1rem 3rem; } .footer-links-group { gap: 2rem; } .cta-inner { padding: 2rem 1.5rem; } .cta-trust { gap: 0.75rem; } } .why-section {} .why-grid { margin-bottom: 2.5rem; } .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; } .why-vs { display: grid; grid-template-columns: 1fr 1fr; } @media(max-width:640px){ .why-vs { grid-template-columns: 1fr; } } .why-old, .why-new { padding: 1.75rem; } .why-old { border-right: 1px solid var(--border); } @media(max-width:640px){ .why-old { border-right: none; border-bottom: 1px solid var(--border); } } .why-old-label { font-size: 0.78rem; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; } .why-new-label { font-size: 0.78rem; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; } .why-old ul, .why-new ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .why-old ul li { font-size: 0.85rem; color: var(--muted); padding-left: 1rem; position: relative; } .why-old ul li::before { content: '✗'; position: absolute; left: 0; color: var(--red); font-size: 0.75rem; } .why-new ul li { font-size: 0.85rem; color: var(--text); padding-left: 1rem; position: relative; } .why-new ul li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-size: 0.75rem; font-weight: 700; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media(max-width:900px){ .features-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:540px){ .features-grid { grid-template-columns: 1fr; } } .feat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: border-color 0.2s, transform 0.2s; } .feat-card:hover { border-color: rgba(124,111,255,0.3); transform: translateY(-2px); } .feat-icon { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 0.85rem; background: linear-gradient(135deg, rgba(124,111,255,0.18), rgba(79,142,247,0.18)); border: 1px solid rgba(124,111,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .feat-card h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.4rem; } .feat-card p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; } .faq-landing {} .faq-grid { display: flex; flex-direction: column; gap: 0.75rem; max-width: 680px; margin: 0 auto; } .faq-land-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rsm); overflow: hidden; cursor: pointer; transition: border-color 0.2s; } .faq-land-item:hover { border-color: rgba(124,111,255,0.3); } .faq-land-item.open { border-color: rgba(124,111,255,0.35); } .faq-land-q { display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.1rem; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; user-select: none; } .faq-arrow { color: var(--muted); font-size: 0.75rem; transition: transform 0.25s; flex-shrink: 0; } .faq-land-item.open .faq-arrow { transform: rotate(180deg); color: var(--accent); } .faq-land-a { display: none; padding: 0 1.1rem 1rem; font-size: 0.82rem; color: var(--muted); line-height: 1.65; } .faq-land-item.open .faq-land-a { display: block; } .about-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; } @media(max-width:800px){ .about-card { grid-template-columns: 1fr; gap: 2rem; } } .about-left p { font-size: 0.875rem; color: var(--muted); line-height: 1.75; } .about-values { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; } .about-val { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; } .about-val span { font-size: 1rem; } .about-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1.5rem; } .about-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 1rem; text-align: center; } .about-stat-num { font-size: 1.75rem; font-weight: 900; color: var(--accent); letter-spacing: -0.02em; } .about-stat-lbl { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; } .about-powered { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 1rem; } .about-powered-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.65rem; } .about-tech-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .about-tech { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; background: rgba(124,111,255,0.08); border: 1px solid rgba(124,111,255,0.18); border-radius: 99px; font-size: 0.75rem; font-weight: 600; color: var(--text); } .support-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .support-bubble { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124,111,255,0.55), 0 0 0 0 rgba(124,111,255,0.4); transition: transform 0.2s, box-shadow 0.2s; animation: support-pulse 3s ease-in-out infinite; position: relative; } .support-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(124,111,255,0.7); animation: none; } @keyframes support-pulse { 0%, 100% { box-shadow: 0 4px 20px rgba(124,111,255,0.55), 0 0 0 0 rgba(124,111,255,0.4); } 50% { box-shadow: 0 4px 20px rgba(124,111,255,0.55), 0 0 0 10px rgba(124,111,255,0); } } .support-badge { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); animation: badge-bounce 1s ease-in-out 1.5s 2; } @keyframes badge-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } .support-badge.hidden { display: none; } .support-bubble-icon { line-height: 1; } .support-panel { display: none; flex-direction: column; width: 320px; max-height: 480px; background: var(--surface); border: 1px solid rgba(124,111,255,0.25); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); animation: panel-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .support-panel.open { display: flex; } @keyframes panel-in { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .support-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); } .support-header-left { display: flex; align-items: center; gap: 0.65rem; } .support-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .support-title { font-size: 0.875rem; font-weight: 700; } .support-online { font-size: 0.65rem; color: var(--green); } .support-close { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 0.75rem; padding: 0.3rem; border-radius: 4px; transition: color 0.15s, background 0.15s; } .support-close:hover { color: var(--text); background: rgba(255,255,255,0.05); } .support-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .support-welcome p { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.2rem; } .support-sub { font-size: 0.78rem !important; color: var(--muted) !important; font-weight: 400 !important; } .support-faqs { display: flex; flex-direction: column; gap: 0.4rem; } .support-faq-btn { text-align: left; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 0.6rem 0.85rem; font-size: 0.78rem; color: var(--text); cursor: pointer; font-family: inherit; transition: all 0.15s; } .support-faq-btn:hover { border-color: var(--accent); color: var(--accent); } .support-faq-btn.active { border-color: var(--accent); background: rgba(124,111,255,0.08); color: var(--accent); } .support-answer { display: none; padding: 0.85rem; background: linear-gradient(135deg, rgba(124,111,255,0.07), rgba(79,142,247,0.05)); border: 1px solid rgba(124,111,255,0.2); border-radius: var(--rsm); font-size: 0.8rem; color: var(--text); line-height: 1.65; } .support-answer.visible { display: block; } .support-footer { padding: 0.65rem 1rem; border-top: 1px solid var(--border); background: var(--surface2); } .support-contact { display: block; text-align: center; font-size: 0.78rem; color: var(--muted); text-decoration: none; transition: color 0.15s; } .support-contact:hover { color: var(--accent); } .stats-banner { background: linear-gradient(135deg, rgba(124,111,255,0.06), rgba(79,142,247,0.04)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.85rem 2rem; } .stats-banner-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; } .stat-pill { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; } .stat-pill-num { font-size: 1.35rem; font-weight: 900; color: var(--text); } .stat-pill-lbl { font-size: 0.72rem; color: var(--muted); } .stat-pill-sep { color: var(--border); font-size: 1.2rem; } .feat-alt-section {} .feat-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; } @media(max-width:860px){ .feat-alt-row { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; } } .feat-alt-rev { direction: rtl; } .feat-alt-rev > * { direction: ltr; } @media(max-width:860px){ .feat-alt-rev { direction: ltr; } } .feat-alt-tag { display: inline-block; font-size: 0.7rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; } .feat-alt-text h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem; line-height: 1.2; } .feat-alt-text p { font-size: 0.9rem; color: var(--muted); line-height: 1.75; margin-bottom: 1.25rem; } .feat-alt-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; } .feat-alt-list li { font-size: 0.85rem; color: var(--text); padding-left: 0.25rem; } .fav-mockup { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .fav-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); } .fav-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.65rem; } .fav-progress-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.3rem; } .fav-bar { background: rgba(255,255,255,0.06); border-radius: 99px; height: 4px; overflow: hidden; } .fav-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; } .fav-phases { padding: 0.75rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .fav-phase { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); transition: border-color 0.15s; } .fav-phase-active { border-color: rgba(124,111,255,0.35); background: rgba(124,111,255,0.06); } .fav-phase-done { opacity: 0.6; } .fav-phase-num { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: var(--muted); } .fav-phase-num.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; } .fav-phase-num.done { background: rgba(0,230,118,0.15); color: var(--green); border-color: rgba(0,230,118,0.2); } .fav-phase-title { font-size: 0.8rem; font-weight: 700; } .fav-phase-meta { font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; } .fav-chat-mockup { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .fav-chat-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: 0.8rem; font-weight: 700; } .fav-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .fav-chat-msgs { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; } .fav-msg { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: 0.78rem; line-height: 1.55; } .fav-msg-user { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-bottom-right-radius: 3px; } .fav-msg-bot { align-self: flex-start; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 3px; } .fav-chat-input { margin: 0 0.9rem 0.9rem; padding: 0.55rem 0.8rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; font-size: 0.72rem; color: var(--dim); } .fav-progress-mockup { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem; box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .fav-prog-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 1.1rem; } .fav-prog-bars { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; } .fav-prog-row { display: flex; align-items: center; gap: 0.65rem; font-size: 0.75rem; } .fav-prog-row span:first-child { width: 70px; color: var(--muted); flex-shrink: 0; } .fav-prog-row span:last-child { width: 30px; text-align: right; font-weight: 700; flex-shrink: 0; } .fav-prog-bar { flex: 1; background: rgba(255,255,255,0.06); border-radius: 99px; height: 5px; overflow: hidden; } .fav-prog-bar div { height: 100%; border-radius: 99px; } .fav-prog-stats { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .fav-prog-stat { flex: 1; padding: 0.75rem; text-align: center; border-right: 1px solid var(--border); } .fav-prog-stat:last-child { border-right: none; } .fpn { font-size: 1.2rem; font-weight: 900; color: var(--accent); line-height: 1; } .fpl { font-size: 0.65rem; color: var(--muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; } .comparison-section {} .comp-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .comp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .comp-table th { padding: 0.9rem 1rem; text-align: center; background: var(--surface2); font-size: 0.78rem; font-weight: 800; border-bottom: 1px solid var(--border); white-space: nowrap; } .comp-table th:first-child { text-align: left; } .comp-table th.comp-highlight { background: rgba(124,111,255,0.1); color: var(--accent); border-bottom-color: rgba(124,111,255,0.3); } .comp-table td { padding: 0.75rem 1rem; text-align: center; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; } .comp-table td:first-child { text-align: left; color: var(--text); font-weight: 500; } .comp-table td.comp-highlight { background: rgba(124,111,255,0.04); } .comp-table tr:last-child td { border-bottom: none; } .comp-table tr:hover td { background: rgba(255,255,255,0.02); } .comp-table tr:hover td.comp-highlight { background: rgba(124,111,255,0.07); } .cy { color: #00e676; font-weight: 700; } .cn { color: var(--dim); } .cp { color: #ffd54f; font-size: 0.75rem; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color 0.2s, transform 0.2s; } .blog-card:hover { border-color: rgba(124,111,255,0.35); transform: translateY(-3px); color: var(--text); } .blog-card-emoji { display: flex; align-items: center; justify-content: center; height: 100px; font-size: 3rem; background: linear-gradient(135deg, rgba(124,111,255,0.07), rgba(79,142,247,0.05)); border-bottom: 1px solid var(--border); } .blog-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; } .blog-card-meta { display: flex; align-items: center; gap: 0.5rem; } .blog-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 99px; background: rgba(124,111,255,0.1); border: 1px solid rgba(124,111,255,0.2); font-size: 0.68rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; } .blog-time { font-size: 0.72rem; color: var(--muted); } .blog-card-title { font-size: 0.92rem; font-weight: 700; line-height: 1.4; } .blog-card-excerpt { font-size: 0.8rem; color: var(--muted); line-height: 1.6; flex: 1; } .blog-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border); } .blog-date { font-size: 0.72rem; color: var(--dim); } .blog-read-more { font-size: 0.75rem; color: var(--accent); font-weight: 600; } .blog-post-wrap { max-width: 720px; margin: 0 auto; padding: 2rem 2rem 5rem; } .blog-post-back { font-size: 0.82rem; color: var(--muted); display: inline-block; margin-bottom: 1.5rem; transition: color 0.15s; } .blog-post-back:hover { color: var(--accent); } .blog-post-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .blog-post-header h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1rem; } .blog-post-excerpt { font-size: 1rem; color: var(--muted); line-height: 1.75; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .blog-post-body { line-height: 1.8; } .blog-post-body h2 { font-size: 1.3rem; font-weight: 800; margin: 2rem 0 0.75rem; letter-spacing: -0.01em; } .blog-post-body h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--accent); } .blog-post-body p { font-size: 0.9rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.8; } .blog-post-body ul, .blog-post-body ol { padding-left: 1.5rem; margin-bottom: 1rem; } .blog-post-body li { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.35rem; line-height: 1.7; } .blog-post-body strong { color: var(--text); font-weight: 700; } .blog-post-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; padding: 1.5rem 1.75rem; background: linear-gradient(135deg, rgba(124,111,255,0.08), rgba(79,142,247,0.05)); border: 1px solid rgba(124,111,255,0.2); border-radius: var(--radius); } .blog-cta-text { display: flex; flex-direction: column; gap: 0.25rem; } .blog-cta-text strong { font-size: 0.9rem; color: var(--text); } .blog-cta-text span { font-size: 0.78rem; color: var(--muted); } .support-body { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.9rem; overflow-y: auto; flex: 1; } .support-back-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; color: var(--muted); font-size: 0.75rem; cursor: pointer; font-family: inherit; padding: 0; margin-bottom: 0.25rem; transition: color 0.15s; } .support-back-btn:hover { color: var(--text); } .support-answer-box { background: linear-gradient(135deg, rgba(124,111,255,0.07), rgba(79,142,247,0.05)); border: 1px solid rgba(124,111,255,0.2); border-radius: var(--rsm); padding: 0.9rem; font-size: 0.82rem; color: var(--text); line-height: 1.65; flex: 1; } .support-answer-footer { display: flex; flex-direction: column; gap: 0.35rem; } .support-form { display: flex; flex-direction: column; gap: 0.55rem; } .support-form-group { display: flex; flex-direction: column; gap: 0.25rem; } .support-form-group label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .support-form-group input, .support-form-group textarea { width: 100%; padding: 0.5rem 0.7rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-size: 0.78rem; font-family: inherit; resize: none; transition: border-color 0.15s; } .support-form-group input:focus, .support-form-group textarea:focus { outline: none; border-color: var(--accent); } .support-form-group input::placeholder, .support-form-group textarea::placeholder { color: var(--dim); } .support-submit-btn { width: 100%; padding: 0.6rem; border-radius: var(--rsm); border: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.18s; box-shadow: 0 3px 12px rgba(124,111,255,0.35); } .support-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(124,111,255,0.5); } .support-sent-box { text-align: center; padding: 1rem 0; } .support-sent-icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .support-sent-box p { font-size: 0.85rem; } .support-sent-box strong { color: var(--text); } .support-footer .support-contact { background: none; border: none; cursor: pointer; font-family: inherit; width: 100%; text-align: center; } .navbar { display: grid !important; grid-template-columns: auto 1fr auto auto !important; align-items: center; gap: 0; } .navbar-brand { grid-column: 1; } .navbar-links { grid-column: 2; display: flex !important; align-items: center; justify-content: center; gap: 0.1rem; flex-wrap: wrap; } .navbar-right { grid-column: 3; display: flex; align-items: center; gap: 0.5rem; } .navbar-login { color: var(--muted); font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: var(--rsm); transition: color 0.15s, background 0.15s; white-space: nowrap; } .navbar-login:hover { color: var(--text); background: var(--surface); } .hamburger { grid-column: 4; } .soporte-wrap { max-width: 960px; margin: 0 auto; padding: 3rem 2rem 5rem; } .soporte-header { text-align: center; margin-bottom: 3rem; } .soporte-header h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .soporte-header p { color: var(--muted); font-size: 0.95rem; } .soporte-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; } @media(max-width:760px){ .soporte-grid { grid-template-columns: 1fr; } } .soporte-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; } .soporte-form-card h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1.5rem; } .soporte-sent-card { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 2rem; gap: 0.75rem; } .soporte-sent-icon { font-size: 3rem; } .soporte-sent-card h2 { font-size: 1.3rem; font-weight: 800; } .soporte-sent-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; } .soporte-sent-card strong { color: var(--text); } .soporte-info { display: flex; flex-direction: column; gap: 0.75rem; } .soporte-info-card { display: flex; align-items: flex-start; gap: 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rsm); padding: 1rem 1.1rem; } .soporte-info-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 0.1rem; } .soporte-info-card strong { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.2rem; } .soporte-info-card span { font-size: 0.78rem; color: var(--muted); } .soporte-faq-quick { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rsm); padding: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; } .soporte-faq-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.35rem; } .soporte-faq-link { font-size: 0.82rem; color: var(--accent); transition: color 0.15s; } .soporte-faq-link:hover { color: #a89bff; } .btn-google { display: flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; padding: 0.65rem 1rem; border-radius: var(--rsm); background: #fff; border: 1px solid #ddd; color: #333; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.18s; font-family: inherit; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .btn-google:hover { background: #f8f8f8; border-color: #bbb; color: #111; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; font-size: 0.75rem; color: var(--muted); } .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; } .auth-check-label { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; line-height: 1.5; } .auth-check-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; width: 15px; height: 15px; } .auth-check-label a { color: var(--accent); } .auth-check-label a:hover { text-decoration: underline; } .auth-forgot { font-size: 0.8rem; color: var(--muted); transition: color 0.15s; } .auth-forgot:hover { color: var(--accent); } .auth-legal { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.85rem; } .auth-check-required span { color: var(--text); } .footer-logged { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; text-align: center; padding: 2rem 0 1.5rem; max-width: 560px; margin: 0 auto; } .footer-logged-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.7; } .footer-logged-badges { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; } .footer-logged-copy { font-size: 0.72rem; color: var(--dim); } .footer-logged-copy a { color: var(--dim); } .footer-logged-copy a:hover { color: var(--muted); } .footer-badge-anthropic { color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); gap: 0.3rem; } .footer-badge-anthropic:hover { border-color: rgba(255,255,255,0.2); color: var(--text); opacity: 1; } .footer-badge-anthropic strong { color: var(--text); font-weight: 700; } .nav-active { color: var(--text) !important; background: var(--surface) !important; } .cuenta-section { margin-bottom: 2rem; } .cuenta-section-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.75rem; } .form-hint { font-size: 0.72rem; color: var(--dim); margin-top: 0.25rem; display: block; } .plan-actual-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .plan-actual-name { font-size: 1rem; font-weight: 800; } .plan-actual-desc p { font-size: 0.875rem; color: var(--text); } .plan-actual-actions { display: flex; flex-direction: column; gap: 0.4rem; flex-shrink: 0; } .plan-cancel-info { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--dim); } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; max-width: 440px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .modal-box h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.75rem; } .modal-box p { font-size: 0.875rem; color: var(--muted); line-height: 1.65; } .modal-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; flex-wrap: wrap; } .cert-card { position: relative; } .cert-card-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.6rem; border-radius: 99px; margin-bottom: 0.5rem; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.2); font-size: 0.68rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.04em; } .cert-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .rm-card { padding-top: 0 !important; overflow: hidden; } .rm-card-bar { height: 4px; margin: 0 -1.35rem 1.25rem; background: var(--border); } .rm-card-idle .rm-card-bar { background: var(--border); } .rm-card-active .rm-card-bar { background: linear-gradient(90deg, var(--accent), var(--accent2)); } .rm-card-done .rm-card-bar { background: linear-gradient(90deg, #00e676, #00bfa5); } .rm-card-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.6rem; } .rm-card-emoji { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; } .rm-card-info { flex: 1; min-width: 0; } .rm-card-info h3 { font-size: 0.95rem; font-weight: 800; margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rm-state-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.04em; } .rm-state-idle { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); } .rm-state-active { background: rgba(124,111,255,0.1); border: 1px solid rgba(124,111,255,0.25); color: var(--accent); } .rm-state-done { background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.25); color: var(--green); } .rm-card-active:hover { border-color: rgba(124,111,255,0.4); } .rm-card-done:hover { border-color: rgba(0,230,118,0.3); } .rm-card-idle { border-top: 3px solid var(--border) !important; } .rm-card-active { border-top: 3px solid var(--accent) !important; } .rm-card-done { border-top: 3px solid var(--green) !important; } .rm-card-bar { display: none; } .lang-selector { display: flex; gap: 0.6rem; } .lang-option { cursor: pointer; } .lang-option input[type="radio"] { display: none; } .lang-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: var(--rsm); background: var(--surface2); border: 1px solid var(--border); font-size: 0.875rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.15s; user-select: none; } .lang-option input[type="radio"]:checked + .lang-btn { background: rgba(124,111,255,0.12); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px rgba(124,111,255,0.1); } .lang-btn:hover { border-color: var(--accent); color: var(--text); } .tiempo-wrap { display: flex; align-items: flex-end; gap: 0.5rem; } .tiempo-field { display: flex; flex-direction: column; gap: 0.25rem; } .tiempo-sublabel { font-size: 0.68rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; } .tiempo-num { width: 90px; text-align: center; font-size: 1.1rem; font-weight: 800; } .tiempo-min { width: 90px; text-align: center; } .tiempo-sep { font-size: 1.4rem; font-weight: 800; color: var(--muted); padding-bottom: 0.5rem; line-height: 1; } .msg.assistant p { margin: 0 0 0.5rem; } .msg.assistant p:last-child { margin-bottom: 0; } .msg.assistant strong { color: #fff; font-weight: 700; } .msg.assistant em { font-style: italic; color: #c5c0ff; } .msg.assistant ol, .msg.assistant ul { margin: 0.4rem 0 0.5rem 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .msg.assistant li { font-size: 0.82rem; line-height: 1.55; } .msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-size: 0.88rem; font-weight: 800; margin: 0.5rem 0 0.3rem; color: #fff; } .msg.assistant code { background: rgba(0,0,0,0.3); border-radius: 4px; padding: 0.1rem 0.35rem; font-family: monospace; font-size: 0.78rem; color: #a5f3fc; } .msg.assistant pre { background: rgba(0,0,0,0.35); border-radius: 6px; padding: 0.65rem 0.85rem; margin: 0.4rem 0; overflow-x: auto; } .msg.assistant pre code { background: none; padding: 0; font-size: 0.75rem; color: #a5f3fc; } .msg.assistant hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0.5rem 0; } .legal-wrap { max-width: 780px; margin: 0 auto; padding: 3rem 2rem 5rem; } .legal-header { margin-bottom: 3rem; } .legal-header h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.4rem; } .legal-updated { font-size: 0.82rem; color: var(--muted); } .legal-body { display: flex; flex-direction: column; gap: 0; } .legal-section { padding: 1.75rem 0; border-bottom: 1px solid var(--border); } .legal-section:last-child { border-bottom: none; } .legal-section h2 { font-size: 1rem; font-weight: 800; margin-bottom: 0.85rem; color: var(--text); letter-spacing: -0.01em; } .legal-section p { font-size: 0.875rem; color: var(--muted); line-height: 1.8; margin-bottom: 0.75rem; } .legal-section p:last-child { margin-bottom: 0; } .legal-section ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; } .legal-section ul li { font-size: 0.875rem; color: var(--muted); line-height: 1.7; padding-left: 1rem; position: relative; } .legal-section ul li::before { content: '·'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .legal-section a { color: var(--accent); } .legal-section a:hover { text-decoration: underline; } .legal-section code { background: var(--surface2); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.8rem; font-family: monospace; } .referral-info { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; } .referral-desc p { font-size: 0.875rem; color: var(--muted); line-height: 1.7; max-width: 420px; } .referral-desc strong { color: var(--text); } .referral-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; } .referral-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; } .referral-num { font-size: 1.5rem; font-weight: 900; color: var(--accent); line-height: 1; } .referral-lbl { font-size: 0.68rem; color: var(--muted); text-align: center; } .referral-link-box { margin-bottom: 1rem; } .referral-link-row { display: flex; gap: 0.5rem; align-items: center; } .referral-link-row input { flex: 1; } .referral-share { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .referral-share-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.85rem; border-radius: var(--rsm); font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: all 0.15s; } .referral-wa { background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.25); color: #25d366; } .referral-wa:hover { background: rgba(37,211,102,0.18); color: #25d366; } .referral-email { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); } .referral-email:hover { border-color: var(--accent); color: var(--accent); } .review-modal { text-align: center; max-width: 420px; } .review-modal-stars { font-size: 1.75rem; letter-spacing: 3px; margin-bottom: 0.75rem; } .review-modal h3 { font-size: 1.25rem; font-weight: 900; margin-bottom: 0.5rem; } .review-modal > p { font-size: 0.875rem; color: var(--muted); line-height: 1.7; } .review-modal-bonus { display: flex; align-items: center; gap: 0.85rem; text-align: left; background: linear-gradient(135deg, rgba(0,230,118,0.08), rgba(79,142,247,0.05)); border: 1px solid rgba(0,230,118,0.2); border-radius: var(--rsm); padding: 0.85rem 1rem; margin: 1.25rem 0; } .review-bonus-icon { font-size: 1.75rem; flex-shrink: 0; } .review-modal-bonus strong { display: block; font-size: 0.9rem; color: var(--green); margin-bottom: 0.15rem; } .review-modal-bonus span { font-size: 0.78rem; color: var(--muted); } .review-modal-sub { font-size: 0.78rem; color: var(--dim); margin-bottom: 0.25rem !important; } @media(max-width:768px){ .navbar { display: grid !important; grid-template-columns: 1fr auto !important; padding: 0 1rem !important; position: relative !important; } .navbar-brand { grid-column: 1; } .hamburger { grid-column: 2; display: flex !important; } .navbar-links { display: none !important; position: absolute; top: 60px; left: 0; right: 0; z-index: 9000; background: rgba(9,9,19,0.98) !important; backdrop-filter: blur(20px); flex-direction: column !important; padding: 1rem !important; border-bottom: 1px solid var(--border); gap: 0.25rem !important; grid-column: unset !important; justify-content: flex-start !important; } .navbar-links.open { display: flex !important; } .navbar-links a { width: 100%; padding: 0.6rem 0.75rem; } .navbar-right { display: none !important; grid-column: unset; } .navbar-links.open ~ .navbar-right, .navbar-links.open + * .navbar-right { display: flex !important; } .navbar-links.open { padding-bottom: 1.25rem !important; } .hero { padding: 40px 1rem 32px !important; } .hero-2col { grid-template-columns: 1fr !important; gap: 2rem !important; } .hero-visual { display: none !important; } .hero-text { text-align: center !important; } .hero-text h1 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; } .hero-text p { max-width: 100% !important; font-size: 0.95rem !important; } .hero-btns { justify-content: center !important; flex-wrap: wrap !important; } .hero-numbers { justify-content: center !important; gap: 1.5rem !important; } .hero-chip { font-size: 0.65rem !important; } .stats-banner-inner { gap: 0.75rem !important; flex-wrap: wrap !important; justify-content: center !important; } .stat-pill-sep { display: none !important; } .stat-pill { flex-direction: column !important; align-items: center !important; gap: 0.1rem !important; } .stat-pill-num { font-size: 1.1rem !important; } .stat-pill-lbl { font-size: 0.65rem !important; } .section { padding: 40px 1rem !important; } .section-title { font-size: clamp(1.4rem, 5vw, 2rem) !important; } .steps { grid-template-columns: 1fr !important; } .plans-grid { grid-template-columns: 1fr !important; } .features-grid { grid-template-columns: 1fr !important; } .comp-table-wrap { overflow-x: auto; } .comp-table { min-width: 500px; font-size: 0.72rem !important; } .comp-table th, .comp-table td { padding: 0.5rem 0.6rem !important; } .feat-alt-row { grid-template-columns: 1fr !important; gap: 2rem !important; direction: ltr !important; } .feat-alt-rev { direction: ltr !important; } .feat-alt-text h3 { font-size: 1.3rem !important; } .why-vs { grid-template-columns: 1fr !important; } .why-old { border-right: none !important; border-bottom: 1px solid var(--border) !important; } .testimonials { grid-template-columns: 1fr !important; } .faq-grid { grid-template-columns: 1fr !important; } .about-card { grid-template-columns: 1fr !important; gap: 1.5rem !important; padding: 1.5rem !important; } .about-stat-grid { grid-template-columns: 1fr 1fr !important; } .cta-inner { padding: 2rem 1.25rem !important; } .cta-inner h2 { font-size: 1.4rem !important; } .cta-trust { flex-direction: column !important; gap: 0.4rem !important; align-items: center !important; } .plans-preview { grid-template-columns: 1fr !important; } .footer-main { grid-template-columns: 1fr !important; gap: 2rem !important; } .footer-links-group { gap: 2rem !important; } .page-wrap { padding: 1rem !important; } .stats-bar { grid-template-columns: 1fr 1fr !important; } .rm-grid { grid-template-columns: 1fr !important; } .page-top { flex-direction: column !important; align-items: flex-start !important; } .lesson-wrap { grid-template-columns: 1fr !important; padding: 0.75rem 1rem 2rem !important; } .chat-wrap { height: 450px !important; } .auth-split { grid-template-columns: 1fr !important; } .auth-split-panel { display: none !important; } .auth-box { padding: 1.5rem !important; } .rm-page { padding: 1rem 1rem 3rem !important; } .rm-header { padding: 1.25rem !important; } .rm-meta { flex-wrap: wrap !important; } .pricing-wrap { padding: 2rem 1rem 3rem !important; } .soporte-grid { grid-template-columns: 1fr !important; } .referral-link-row { flex-direction: column !important; } .plan-actual-row { flex-direction: column !important; } .btn-lg { padding: 0.65rem 1.25rem !important; font-size: 0.875rem !important; } .support-panel { width: 290px !important; } .cert-body { padding: 2rem 1.5rem !important; } .cert-title { font-size: 1.75rem !important; } .cert-name { font-size: 1.75rem !important; } .cert-seal { width: 70px !important; height: 70px !important; bottom: 2rem !important; right: 1.5rem !important; } .cert-footer { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; } } @media(max-width:375px){ .hero-text h1 { font-size: 1.6rem !important; } .comp-table { min-width: 420px; } .navbar-brand { font-size: 1rem !important; } } .gen-spinner { width: 72px; height: 72px; border: 4px solid rgba(124,111,255,0.15); border-top-color: var(--accent); border-right-color: var(--accent2); border-radius: 50%; margin: 0 auto; animation: gen-spin 1s linear infinite; } @keyframes gen-spin { to { transform: rotate(360deg); } } .hero-carousel { display: grid; grid-template-columns: 1fr; perspective: 1200px; align-items: stretch; } .hc-slide { grid-column: 1; grid-row: 1; transform: rotateY(-90deg); opacity: 0; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; will-change: transform, opacity; backface-visibility: hidden; pointer-events: none; display: flex; flex-direction: column; } .hc-slide.hc-active { transform: rotateY(0deg); opacity: 1; pointer-events: auto; } .hc-slide.hc-exit { transform: rotateY(90deg); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hc-slide { transition: opacity 0.4s ease; transform: none !important; } } .hc-slide .browser-mockup { flex: 1; display: flex; flex-direction: column; } .hc-slide .browser-content { flex: 1; } .bm-form-title { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; } .bm-input-mock { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--text); margin-bottom: 0.45rem; width: 100%; } .bm-input-mock.bm-input-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,111,255,0.15); } .bm-select-mock { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 0.45rem 0.6rem; font-size: 0.75rem; color: var(--text); } .bm-select-full { width: 100%; margin-bottom: 0.45rem; } .bm-time-row { display: flex; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.55rem; } .bm-field-mock { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--text); width: 90px; } .bm-time-lbl { font-size: 0.65rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; } .bm-time-sep { font-size: 1rem; font-weight: 700; color: var(--muted); padding-bottom: 0.55rem; } .bm-btn-mock { width: 100%; background: var(--accent); color: #fff; border-radius: var(--rsm); padding: 0.55rem; font-size: 0.78rem; font-weight: 700; text-align: center; cursor: default; } .bm-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: bm-spin 0.85s linear infinite; margin: 0 auto 0.7rem; } @keyframes bm-spin { to { transform: rotate(360deg); } } .bm-gen-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; } .bm-gen-sub { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.8rem; } .bm-spin-steps { text-align: left; display: flex; flex-direction: column; gap: 0.4rem; } .bm-spin-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); } .bm-spin-step.bm-step-done { color: var(--green); } .bm-spin-step.bm-step-active { color: var(--text); font-weight: 600; } .bm-spin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .bm-dot-done { background: var(--green); } .bm-dot-active { background: var(--accent); animation: bm-pulse 1.1s ease-in-out infinite; } @keyframes bm-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .bm-dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .bm-plan-badge { font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 99px; background: rgba(124,111,255,0.12); color: var(--accent); border: 1px solid rgba(124,111,255,0.2); } .bm-dash-stats { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; } .bm-dash-stats span { font-size: 0.65rem; color: var(--muted); }
 /* ===== ACCESSIBILITY & PERFORMANCE FIXES (v9) ===== */ .skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 99999; padding: 0.5rem 1.25rem; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.875rem; border-radius: var(--rsm); text-decoration: none; } .skip-link:focus { left: 0.5rem; } /* form-control: mínimo 16px para evitar zoom en iOS */ .form-control { font-size: 1rem !important; } /* Botones del menú móvil — mostrar con CSS cuando menú está abierto */ @media(max-width:768px) { .navbar-right.menu-open { display: flex !important; flex-direction: column; gap: 0.5rem; padding: 0 1rem 0.75rem; width: 100%; position: absolute; top: auto; left: 0; right: 0; background: rgba(9,9,19,0.98); z-index: 8999; border-bottom: 1px solid var(--border); } } /* Stats banner — 5 pills en mobile: wrap y separadores ocultos */ @media(max-width:600px) { .stats-banner-inner { gap: 0.75rem 1.5rem; justify-content: center; } .stat-pill-sep { display: none; } .stat-pill { min-width: 80px; } } /* Tabla comparativa en mobile */ @media(max-width:640px) { .comp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .comp-table { font-size: 0.75rem; } .comp-table th, .comp-table td { padding: 0.6rem 0.65rem; white-space: nowrap; } } /* Touch targets mínimo 44px en mobile */ @media(max-width:768px) { .btn, button, .support-faq-btn, .navbar-links a { min-height: 44px; display: inline-flex; align-items: center; } .hamburger { width: 44px; height: 44px; } } /* Carousel en mobile: altura automática, no 3D transform para evitar problemas */ @media(max-width:768px) { .hero-carousel { perspective: none; } .hc-slide { transform: none; transition: opacity 0.4s ease; } .hc-slide.hc-active { opacity: 1; } .hc-slide.hc-exit { opacity: 0; } } /* Mejora focus visible para teclado */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Stats banner en mobile muy pequeño: 2 columnas */ @media(max-width:400px) { .stats-banner-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .stat-pill-sep { display: none; } }