/* Free SEO analysis page */
.seo-hero { padding: 64px 0 88px; }
.seo-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.12; }
.seo-hero .breadcrumb, .seo-hero nav[aria-label="breadcrumb"] { margin-bottom: 1.2rem; }
.seo-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .95rem; color: #8ff3d2; font-weight: 700; font-size: .85rem; background: rgba(143, 243, 210, .12); border: 1px solid rgba(143, 243, 210, .3); border-radius: 999px; }
.seo-turnaround { display: inline-flex; align-items: center; gap: .55rem; margin: .4rem 0 0; padding: .55rem 1rem; color: #fff; font-weight: 700; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; }
.seo-turnaround i { color: #8ff3d2; }
.seo-points { list-style: none; padding: 0; margin: 1.6rem 0; }
.seo-points li { position: relative; padding: .4rem 0 .4rem 2rem; color: #e6f0fb; }
.seo-points li:before { content: '\F26A'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: .38rem; color: #8ff3d2; font-size: 1.1rem; }
.seo-call { color: #c8dcf1; }
.seo-call a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }

.seo-form-card { padding: 2rem; color: var(--ink); background: #fff; border-radius: 22px; box-shadow: 0 34px 80px rgba(2, 12, 28, .38); }
.seo-form-card h2 { color: var(--navy); }
.seo-form-card p { color: #5a7188; }
.seo-form-card .form-label { margin-bottom: .3rem; color: var(--ink); font-weight: 600; font-size: .88rem; }
.seo-form-card .form-control, .seo-form-card .form-select { padding: .65rem .9rem; border-radius: 12px; border-color: #d6e2ee; }
.seo-form-card .form-control:focus, .seo-form-card .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .22rem rgba(23, 105, 224, .15); }
.seo-url .input-group-text { color: var(--blue); background: #eef5ff; border-color: #d6e2ee; border-radius: 12px 0 0 12px; }
.seo-url .form-control { border-radius: 0 12px 12px 0; font-weight: 600; }
.seo-form-card .btn-primary { border-radius: 14px; padding: .85rem 1rem; }
.seo-form-card .alert { border-radius: 12px; font-size: .92rem; }
.seo-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; color: #fff; font-size: 2.2rem; background: linear-gradient(135deg, var(--blue), var(--cyan)); border-radius: 50%; animation: done-pop .6s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes done-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sample report card */
.report-mock { padding: 1.6rem; background: #fff; border: 1px solid rgba(23, 105, 224, .1); border-radius: 22px; box-shadow: 0 30px 60px rgba(23, 65, 107, .14); }
.report-head { display: flex; align-items: center; gap: .4rem; margin-bottom: 1.4rem; }
.report-head .dot { width: 11px; height: 11px; background: #d9e4ef; border-radius: 50%; }
.report-head small { margin-left: .6rem; color: #7b8fa3; }
.score-ring { --score: 70; display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(var(--cyan) 0%, #e3edf7 0); transition: background 1.4s ease; }
.report-mock.in .score-ring { background: conic-gradient(var(--blue), var(--cyan) calc(var(--score) * 1%), #e3edf7 0); }
.score-ring span { display: grid; place-items: center; width: 98px; height: 98px; color: var(--navy); font: 800 2rem 'Plus Jakarta Sans', sans-serif; background: #fff; border-radius: 50%; }
.report-bar { margin-bottom: .9rem; color: var(--ink); }
.report-bar .track { height: 9px; margin-top: .3rem; background: #e8f0f8; border-radius: 9px; overflow: hidden; }
.report-bar .track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 9px; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.report-mock.in .report-bar .track span { width: var(--w); }
.report-bar:nth-child(2) .track span { transition-delay: .1s; }
.report-bar:nth-child(3) .track span { transition-delay: .2s; }
.report-bar:nth-child(4) .track span { transition-delay: .3s; }
.report-bar:nth-child(5) .track span { transition-delay: .4s; }

@media (max-width: 575px) { .seo-form-card { padding: 1.4rem; } .seo-hero { padding: 40px 0 56px; } }
@media (prefers-reduced-motion: reduce) { .score-ring, .report-bar .track span, .seo-done-icon { transition: none; animation: none; } }
