/* ==========================================================
   AI NAMING OS — Full Redesign v1.0.3
   Exact BrandBrahma LP language with !important overrides
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');

/* ── GLOBAL RESET (scoped to .anos-wrap) ── */
.anos-wrap,
.anos-wrap *,
.anos-wrap *::before,
.anos-wrap *::after {
    box-sizing: border-box !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    word-wrap: break-word !important;
}

.anos-wrap {
    background: #0C0A1A !important;
    color: #E8E6F0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative !important;
    overflow-x: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.anos-i {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}
.anos-os-inner {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* ── ANIMATIONS ── */
@keyframes anos-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.7); }
}
@keyframes anos-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes anos-shimmer {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.8; }
}
@keyframes anos-spin {
    to { transform: rotate(360deg); }
}
@keyframes anos-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.anos-hero {
    text-align: center !important;
    padding: 88px 24px 60px !important;
    position: relative !important;
    overflow: hidden !important;
}
.anos-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 900px !important;
    height: 900px !important;
    background: radial-gradient(circle, rgba(83,74,183,0.18) 0%, rgba(216,90,48,0.06) 50%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.anos-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* tag */
.anos-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #7B6FE0 !important;
    background: rgba(83,74,183,0.12) !important;
    border: 1px solid rgba(83,74,183,0.25) !important;
    padding: 6px 20px !important;
    border-radius: 30px !important;
    margin: 0 auto 32px !important;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.anos-tag-dot {
    width: 6px !important;
    height: 6px !important;
    background: #1D9E75 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: none !important;
    animation: anos-pulse 2s ease-in-out infinite !important;
}

/* h1 */
.anos-wrap .anos-h1 {
    font-size: clamp(36px, 6vw, 68px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -2px !important;
    color: #fff !important;
    margin: 0 auto 24px !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 820px !important;
}
.anos-grad {
    background: linear-gradient(135deg, #7B6FE0, #D85A30) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    border: none !important;
    box-shadow: none !important;
}

/* feature pills */
.anos-hero-pills {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 auto 28px !important;
    position: relative !important;
    z-index: 1 !important;
}
.anos-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    border: 1px solid !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background: transparent !important;
}
.anos-pill-green  { color: #1D9E75 !important; border-color: rgba(29,158,117,0.35) !important; background: rgba(29,158,117,0.08) !important; }
.anos-pill-purple { color: #7B6FE0 !important; border-color: rgba(123,111,224,0.35) !important; background: rgba(123,111,224,0.08) !important; }
.anos-pill-orange { color: #D85A30 !important; border-color: rgba(216,90,48,0.35) !important; background: rgba(216,90,48,0.08) !important; }

/* sub */
.anos-hero-sub {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #9895AA !important;
    max-width: 540px !important;
    margin: 0 auto 44px !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* CTA area */
.anos-hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 44px !important;
    position: relative !important;
    z-index: 1 !important;
}
.anos-hero-hint {
    font-size: 13px !important;
    color: rgba(255,255,255,0.22) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* sample pills */
.anos-sample-names {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
}
.anos-sample-label {
    font-size: 12px !important;
    color: #9895AA !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
    border: none !important;
}
.anos-sample-pill {
    padding: 5px 16px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #E8E6F0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* stats strip */
.anos-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    max-width: 680px !important;
    margin: 52px auto 0 !important;
    position: relative !important;
    z-index: 1 !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-stat {
    background: #0C0A1A !important;
    padding: 24px 16px !important;
    text-align: center !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-stat-num {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-stat-label {
    font-size: 10px !important;
    color: #9895AA !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.anos-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 60px !important;
    padding: 14px 32px !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: normal !important;
    box-shadow: none !important;
}
.anos-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
.anos-btn-primary {
    background: linear-gradient(135deg, #534AB7 0%, #6B5FD6 100%) !important;
    color: #fff !important;
}
.anos-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4339A0 0%, #5D51C8 100%) !important;
    box-shadow: 0 8px 28px rgba(83,74,183,0.4) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.anos-btn-grad {
    background: linear-gradient(135deg, #534AB7, #D85A30) !important;
    color: #fff !important;
}
.anos-btn-grad:hover:not(:disabled) {
    box-shadow: 0 10px 36px rgba(83,74,183,0.3) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.anos-btn-ghost {
    background: rgba(255,255,255,0.05) !important;
    color: #9895AA !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
}
.anos-btn-ghost:hover:not(:disabled) {
    background: rgba(255,255,255,0.09) !important;
    color: #E8E6F0 !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
}
.anos-btn-wide  { width: 100% !important; }
.anos-btn-lg    { padding: 16px 40px !important; font-size: 17px !important; }
.anos-btn-sm    { padding: 8px 20px !important; font-size: 13px !important; }

/* ══════════════════════════════════════════
   OS SHELL / STEPPER / STEPS
══════════════════════════════════════════ */
.anos-os-shell {
    padding: 0 24px 100px !important;
}

.anos-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 0 48px !important;
    padding: 14px 20px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 60px !important;
    flex-wrap: wrap !important;
    box-shadow: none !important;
}
.anos-step-dot {
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #9895AA !important;
    transition: all 0.25s ease !important;
    cursor: default !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-step-dot.active {
    background: linear-gradient(135deg, #534AB7 0%, #6B5FD6 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(83,74,183,0.45) !important;
}
.anos-step-dot.completed {
    color: #1D9E75 !important;
    background: rgba(29,158,117,0.1) !important;
    box-shadow: none !important;
}

.anos-step { display: none !important; }
.anos-step.active { display: block !important; animation: anos-fadein 0.3s ease !important; }

.anos-step-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
}
.anos-stag {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #7B6FE0 !important;
    margin-bottom: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-wrap .anos-h2 {
    font-size: clamp(24px, 4vw, 40px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -1px !important;
    margin: 0 0 12px !important;
    line-height: 1.15 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-step-desc {
    font-size: 16px !important;
    color: #9895AA !important;
    margin: 0 0 32px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 520px !important;
}

/* ── FORM ── */
.anos-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
}
.anos-field { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.anos-field label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #9895AA !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-field input,
.anos-field select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 14px 18px !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    box-shadow: none !important;
}
.anos-field input::placeholder { color: rgba(255,255,255,0.28) !important; opacity: 1 !important; }
.anos-field input:focus,
.anos-field select:focus {
    border-color: #534AB7 !important;
    box-shadow: 0 0 0 4px rgba(83,74,183,0.18), 0 8px 32px rgba(83,74,183,0.12) !important;
    background: rgba(83,74,183,0.05) !important;
    outline: none !important;
}
.anos-field select option { background: #1A1633 !important; color: #E8E6F0 !important; }

/* ── REFINE BAR ── */
.anos-refine-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    padding: 16px 20px !important;
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
.anos-refine-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #9895AA !important;
    margin-right: 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-refine-btn {
    padding: 7px 18px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #E8E6F0 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    letter-spacing: 0.3px !important;
    box-shadow: none !important;
}
.anos-refine-btn:hover {
    background: rgba(83,74,183,0.2) !important;
    border-color: rgba(123,111,224,0.35) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.anos-refine-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

/* ── NAME LIST ── */
.anos-names-wrap { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.anos-names {
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
}
.anos-names li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 22px !important;
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    transition: border-color 0.2s, background 0.2s, transform 0.15s !important;
    gap: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.anos-names li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(135deg, #534AB7 0%, #6B5FD6 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    border-radius: 3px 0 0 3px !important;
}
.anos-names li:hover {
    background: rgba(83,74,183,0.08) !important;
    border-color: rgba(123,111,224,0.3) !important;
    transform: translateX(3px) !important;
    box-shadow: none !important;
}
.anos-names li:hover::before { opacity: 1 !important; }
.anos-names li span {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: -0.3px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-pick {
    padding: 7px 18px !important;
    background: linear-gradient(135deg, #534AB7 0%, #6B5FD6 100%) !important;
    border: none !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}
.anos-pick:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(83,74,183,0.45) !important;
}

/* locked */
.anos-locked-wrap {
    background: rgba(255,255,255,0.02) !important;
    border: 1px dashed rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.anos-locked-wrap::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 200px !important; height: 120px !important;
    background: radial-gradient(ellipse, rgba(83,74,183,0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
.anos-locked-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.anos-locked-header span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #9895AA !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-names.anos-locked li {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: blur(3px) !important;
    user-select: none !important;
}

/* ── VALIDATION ── */
.anos-val-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}
.anos-val-box {
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    min-height: 110px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}
.anos-val-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(83,74,183,0.6), transparent) !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-val-box:hover { border-color: rgba(123,111,224,0.35) !important; }
.anos-val-skeleton {
    font-size: 13px !important;
    color: rgba(255,255,255,0.28) !important;
    animation: anos-shimmer 1.5s ease-in-out infinite !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-val-item strong {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #9895AA !important;
    display: block !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-val-item span {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 13px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-good  { color: #1D9E75 !important; font-weight: 600 !important; }
.anos-muted { color: #9895AA !important; }
.anos-val-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* ── SELECTED NAME HIGHLIGHT ── */
.anos-selected-name {
    background: linear-gradient(135deg, #7B6FE0, #D85A30) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── APPRAISAL ── */
.anos-appraisal-card {
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    padding: 52px 36px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.anos-appraisal-card::before {
    content: '' !important;
    position: absolute !important;
    top: -60px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 300px !important; height: 200px !important;
    background: radial-gradient(ellipse, rgba(83,74,183,0.2) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
.anos-appraisal-value {
    font-size: clamp(44px, 10vw, 72px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -2.5px !important;
    margin-bottom: 28px !important;
    min-height: 88px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── FINAL CARD ── */
.anos-final-card {
    background: rgba(83,74,183,0.07) !important;
    border: 1px solid rgba(83,74,183,0.28) !important;
    border-radius: 20px !important;
    padding: 64px 48px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.anos-final-card::before {
    content: '' !important;
    position: absolute !important;
    top: -80px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 400px !important; height: 300px !important;
    background: radial-gradient(ellipse, rgba(83,74,183,0.22) 0%, transparent 68%) !important;
    pointer-events: none !important;
}
.anos-final-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -60px !important; right: -60px !important;
    width: 200px !important; height: 200px !important;
    background: radial-gradient(circle, rgba(216,90,48,0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
.anos-final-emoji {
    font-size: 52px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    animation: anos-float 3s ease-in-out infinite !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-final-name {
    font-size: clamp(36px, 8vw, 58px) !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    background: linear-gradient(135deg, #7B6FE0, #D85A30) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin: 8px 0 20px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-final-sub {
    font-size: 16px !important;
    color: #9895AA !important;
    margin: 0 auto 36px !important;
    max-width: 380px !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
}
.anos-final-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── CREDITS PILL ── */
.anos-credits-pill {
    position: fixed !important;
    bottom: 28px !important; right: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #1A1633 !important;
    border: 1px solid rgba(123,111,224,0.3) !important;
    border-radius: 999px !important;
    padding: 10px 16px 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #E8E6F0 !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.5) !important;
    z-index: 100 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
.anos-credits-icon { font-size: 15px !important; color: #7B6FE0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.anos-credits-pill strong { color: #fff !important; font-size: 16px !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.anos-credits-add {
    background: linear-gradient(135deg, #534AB7 0%, #6B5FD6 100%) !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
}
.anos-credits-add:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 4px 14px rgba(83,74,183,0.5) !important;
}

/* ── BLUR ── */
.anos-blur {
    filter: blur(8px) !important;
    user-select: none !important;
    pointer-events: none !important;
    opacity: 0.45 !important;
}

/* ── MODAL ── */
.anos-modal {
    display: none !important;
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.82) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.anos-modal.open { display: flex !important; }
.anos-modal-inner {
    background: #141027 !important;
    border: 1px solid rgba(83,74,183,0.28) !important;
    border-radius: 20px !important;
    padding: 44px 40px !important;
    width: 100% !important;
    max-width: 480px !important;
    position: relative !important;
    box-shadow: 0 32px 96px rgba(0,0,0,0.6) !important;
    animation: anos-fadein 0.25s ease !important;
}
.anos-modal-close {
    position: absolute !important;
    top: 16px !important; right: 16px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #9895AA !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
}
.anos-modal-close:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.anos-modal-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 28px !important;
    letter-spacing: -0.5px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-modal-body { color: #E8E6F0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.anos-modal-loading {
    text-align: center !important;
    color: #9895AA !important;
    padding: 36px 0 !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-modal-loading::before {
    content: '' !important;
    display: block !important;
    width: 28px !important; height: 28px !important;
    border: 2px solid rgba(255,255,255,0.1) !important;
    border-top-color: #7B6FE0 !important;
    border-radius: 50% !important;
    animation: anos-spin 0.7s linear infinite !important;
    margin: 0 auto 16px !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════
   FEATURES SECTION
══════════════════════════════════════════ */
.anos-features {
    padding: 100px 24px !important;
    background: transparent !important;
}
.anos-wrap .anos-sh2 {
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -1px !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-ssub {
    font-size: 16px !important;
    color: #9895AA !important;
    max-width: 520px !important;
    line-height: 1.6 !important;
    margin-bottom: 52px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-center { text-align: center !important; }

.anos-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.anos-feature-card {
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 32px 26px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: border-color 0.2s, transform 0.2s !important;
}
.anos-feature-card:hover {
    border-color: rgba(255,255,255,0.12) !important;
    transform: translateY(-3px) !important;
    box-shadow: none !important;
}
.anos-feature-bar {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-feature-card:nth-child(1) .anos-feature-bar { background: linear-gradient(90deg, #1D9E75, transparent) !important; }
.anos-feature-card:nth-child(2) .anos-feature-bar { background: linear-gradient(90deg, #534AB7, transparent) !important; }
.anos-feature-card:nth-child(3) .anos-feature-bar { background: linear-gradient(90deg, #D85A30, transparent) !important; }
.anos-feature-card:nth-child(4) .anos-feature-bar { background: linear-gradient(90deg, #BA7517, transparent) !important; }
.anos-feature-icon {
    width: 46px !important; height: 46px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 18px !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-feature-card:nth-child(1) .anos-feature-icon { background: rgba(29,158,117,0.12) !important; }
.anos-feature-card:nth-child(2) .anos-feature-icon { background: rgba(83,74,183,0.12) !important; }
.anos-feature-card:nth-child(3) .anos-feature-icon { background: rgba(216,90,48,0.12) !important; }
.anos-feature-card:nth-child(4) .anos-feature-icon { background: rgba(186,117,23,0.12) !important; }
.anos-feature-card h3 {
    font-size: 19px !important; font-weight: 700 !important;
    color: #fff !important; margin-bottom: 10px !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    text-align: left !important;
}
.anos-feature-card p {
    font-size: 13px !important; color: #9895AA !important;
    line-height: 1.65 !important; text-align: left !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    margin: 0 !important;
}
.anos-feature-card ul { list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important; background: transparent !important; border: none !important; }
.anos-feature-card ul li {
    font-size: 13px !important; color: #E8E6F0 !important;
    padding: 4px 0 4px 18px !important; position: relative !important;
    text-align: left !important; background: transparent !important; border: none !important; box-shadow: none !important; list-style: none !important;
}
.anos-feature-card ul li::before {
    content: '→' !important; position: absolute !important; left: 0 !important;
    color: #7B6FE0 !important; font-weight: 700 !important;
}

/* ══════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════ */
.anos-how {
    padding: 100px 24px !important;
    background: #141027 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    text-align: center !important;
    border-left: none !important; border-right: none !important; box-shadow: none !important;
}
.anos-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 24px !important;
    margin-top: 52px !important;
}
.anos-how-step { text-align: center !important; }
.anos-how-step-n {
    font-size: 44px !important; font-weight: 800 !important;
    color: rgba(83,74,183,0.15) !important;
    letter-spacing: -2px !important; margin-bottom: 10px !important; line-height: 1 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-how-step h4 {
    font-size: 16px !important; font-weight: 700 !important;
    color: #fff !important; margin-bottom: 8px !important;
    text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-how-step p {
    font-size: 13px !important; color: #9895AA !important;
    line-height: 1.55 !important; text-align: center !important; margin: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}

/* ══════════════════════════════════════════
   PRICING
══════════════════════════════════════════ */
.anos-pricing {
    padding: 100px 24px !important;
    background: #0C0A1A !important;
}
.anos-pricing-plans {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 980px !important;
    margin: 52px auto 0 !important;
    align-items: start !important;
}
.anos-plan {
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 36px 30px !important;
    position: relative !important;
    display: flex !important; flex-direction: column !important;
    transition: border-color 0.2s, transform 0.2s !important;
    box-shadow: none !important;
}
.anos-plan:hover { border-color: rgba(255,255,255,0.16) !important; transform: translateY(-4px) !important; }
.anos-plan-featured {
    background: rgba(83,74,183,0.08) !important;
    border-color: rgba(123,111,224,0.35) !important;
    transform: scale(1.03) !important;
}
.anos-plan-featured:hover { transform: scale(1.03) translateY(-4px) !important; }
.anos-plan-badge {
    position: absolute !important; top: -14px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #534AB7, #6B5FD6) !important;
    color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    padding: 5px 20px !important; border-radius: 30px !important;
    white-space: nowrap !important; box-shadow: 0 4px 16px rgba(83,74,183,0.4) !important;
    border: none !important;
}
.anos-plan-name {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 2.5px !important; text-transform: uppercase !important;
    color: #9895AA !important; margin-bottom: 20px !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-plan-price {
    font-size: 52px !important; font-weight: 800 !important;
    color: #fff !important; letter-spacing: -2.5px !important;
    line-height: 1 !important; margin-bottom: 4px !important;
    display: flex !important; align-items: flex-start !important; gap: 2px !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-plan-price sup {
    font-size: 22px !important; font-weight: 600 !important;
    margin-top: 10px !important; letter-spacing: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-plan-period {
    font-size: 13px !important; color: #9895AA !important; margin-bottom: 28px !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-plan-credits-box {
    background: rgba(83,74,183,0.1) !important;
    border: 1px solid rgba(83,74,183,0.2) !important;
    border-radius: 10px !important; padding: 14px 18px !important;
    margin-bottom: 28px !important; text-align: center !important;
    box-shadow: none !important;
}
.anos-plan-credits-box strong {
    font-size: 24px !important; font-weight: 800 !important;
    background: linear-gradient(135deg, #7B6FE0, #D85A30) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important; display: block !important; margin-bottom: 3px !important;
    border: none !important; box-shadow: none !important;
}
.anos-plan-credits-box span {
    font-size: 12px !important; color: #9895AA !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-plan-features {
    list-style: none !important; margin: 0 0 32px !important; padding: 0 !important; flex: 1 !important;
}
.anos-plan-features li {
    font-size: 14px !important; color: #E8E6F0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    line-height: 1.45 !important; background: transparent !important; box-shadow: none !important; list-style: none !important;
}
.anos-plan-features li:last-child { border-bottom: none !important; }
.anos-plan-features li::before {
    content: '✓' !important; color: #1D9E75 !important; font-weight: 800 !important;
    flex-shrink: 0 !important; margin-top: 1px !important;
}
.anos-plan .anos-btn { margin-top: auto !important; }

/* cost breakdown row */
.anos-credit-costs {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 52px auto 0 !important;
    max-width: 900px !important;
}
.anos-cost-item {
    background: rgba(83,74,183,0.07) !important;
    border: 1px solid rgba(83,74,183,0.18) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    text-align: center !important;
    flex: 1 !important;
    min-width: 130px !important;
    transition: border-color 0.2s, transform 0.2s !important;
    box-shadow: none !important;
}
.anos-cost-item:hover {
    border-color: rgba(123,111,224,0.35) !important;
    transform: translateY(-3px) !important;
}
.anos-cost-num {
    font-size: 32px !important; font-weight: 800 !important;
    background: linear-gradient(135deg, #7B6FE0, #D85A30) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important; letter-spacing: -1px !important;
    line-height: 1 !important; margin-bottom: 8px !important;
    border: none !important; box-shadow: none !important;
}
.anos-cost-label { font-size: 12px !important; color: #9895AA !important; font-weight: 700 !important; letter-spacing: 0.3px !important; background: transparent !important; border: none !important; box-shadow: none !important; }

/* ══════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════ */
.anos-cta-section {
    padding: 100px 24px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}
.anos-cta-section::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 600px !important; height: 600px !important;
    background: radial-gradient(circle, rgba(216,90,48,0.08) 0%, transparent 60%) !important;
    pointer-events: none !important;
}
.anos-cta-section .anos-sh2 {
    font-size: clamp(30px, 5vw, 50px) !important;
    letter-spacing: -1.5px !important; margin-bottom: 16px !important;
    position: relative !important; z-index: 1 !important;
    text-align: center !important; line-height: 1.1 !important;
}
.anos-cta-section .anos-ssub {
    max-width: 480px !important; margin: 0 auto 44px !important;
    position: relative !important; z-index: 1 !important; text-align: center !important;
    margin-bottom: 44px !important;
}
.anos-cta-btns {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    position: relative !important; z-index: 1 !important;
}

/* ══════════════════════════════════════════
   EXPLORE CARDS
══════════════════════════════════════════ */
.anos-explore {
    padding: 60px 24px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    background: transparent !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
}
.anos-explore-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}
.anos-explore-card {
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 36px 28px !important;
    text-align: center !important;
    box-shadow: none !important;
    transition: border-color 0.2s, transform 0.2s !important;
}
.anos-explore-card:hover { border-color: rgba(255,255,255,0.14) !important; transform: translateY(-3px) !important; }
.anos-explore-card .anos-ex-icon {
    font-size: 28px !important; margin-bottom: 14px !important;
    display: block !important; text-align: center !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    animation: anos-float 4s ease-in-out infinite !important;
}
.anos-explore-card:nth-child(2) .anos-ex-icon { animation-delay: 1s !important; }
.anos-explore-card h3 {
    font-size: 20px !important; font-weight: 700 !important;
    color: #fff !important; margin-bottom: 8px !important;
    text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-explore-card p {
    font-size: 14px !important; color: #9895AA !important;
    margin-bottom: 20px !important; line-height: 1.55 !important;
    text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important;
}

/* ══════════════════════════════════════════
   FAQ ACCORDION
══════════════════════════════════════════ */
.anos-faq {
    padding: 100px 24px !important;
    background: #0C0A1A !important;
}
.anos-faq-list {
    max-width: 820px !important;
    margin: 52px auto 0 !important;
    display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.anos-faq-item {
    background: #141027 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}
.anos-faq-item.open { border-color: rgba(123,111,224,0.35) !important; }
.anos-faq-q {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    background: transparent !important;
    border: none !important; cursor: pointer !important;
    text-align: left !important; gap: 16px !important; box-shadow: none !important;
}
.anos-faq-q-text {
    font-size: 16px !important; font-weight: 700 !important;
    color: #E8E6F0 !important; line-height: 1.4 !important;
    background: transparent !important; border: none !important; box-shadow: none !important; flex: 1 !important;
}
.anos-faq-item.open .anos-faq-q-text { color: #fff !important; }
.anos-faq-icon {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    background: rgba(123,111,224,0.12) !important;
    border: 1px solid rgba(123,111,224,0.25) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; font-size: 16px !important;
    color: #7B6FE0 !important; font-weight: 700 !important;
    transition: transform 0.25s, background 0.2s !important;
    box-shadow: none !important; line-height: 1 !important;
}
.anos-faq-item.open .anos-faq-icon { background: rgba(123,111,224,0.25) !important; transform: rotate(45deg) !important; }
.anos-faq-a {
    max-height: 0 !important; overflow: hidden !important;
    transition: max-height 0.35s ease, padding 0.25s ease !important;
    padding: 0 24px !important; background: transparent !important; border: none !important; box-shadow: none !important;
}
.anos-faq-item.open .anos-faq-a { max-height: 400px !important; padding: 0 24px 22px !important; }
.anos-faq-a p {
    font-size: 14px !important; color: #9895AA !important;
    line-height: 1.7 !important; background: transparent !important;
    border: none !important; box-shadow: none !important; text-align: left !important; margin: 0 !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.anos-footer {
    text-align: center !important;
    padding: 28px 24px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.25) !important;
    background: transparent !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important; box-shadow: none !important;
}
.anos-footer a { color: #7B6FE0 !important; text-decoration: none !important; }
.anos-footer a:hover { color: #fff !important; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.anos-toast {
    position: fixed !important;
    bottom: 84px !important; left: 50% !important;
    transform: translateX(-50%) translateY(20px) !important;
    background: #1A1633 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #E8E6F0 !important;
    padding: 12px 28px !important; border-radius: 30px !important;
    font-size: 14px !important; font-weight: 600 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    z-index: 10000 !important; opacity: 0 !important;
    transition: opacity 0.3s, transform 0.3s !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.45) !important;
    pointer-events: none !important; white-space: nowrap !important;
}
.anos-toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
.anos-toast.success { border-color: rgba(29,158,117,0.4) !important; color: #4ade80 !important; }
.anos-toast.error   { border-color: rgba(224,82,82,0.4) !important;  color: #f87171 !important; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .anos-pricing-plans { grid-template-columns: 1fr !important; max-width: 440px !important; }
    .anos-plan-featured { transform: none !important; }
    .anos-plan-featured:hover { transform: translateY(-4px) !important; }
    .anos-steps-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .anos-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    .anos-hero { padding: 56px 16px 40px !important; }
    .anos-os-shell { padding: 0 16px 80px !important; }
    .anos-features, .anos-how, .anos-faq, .anos-pricing, .anos-cta-section { padding: 72px 16px !important; }
    .anos-features-grid { grid-template-columns: 1fr !important; }
    .anos-val-grid { grid-template-columns: 1fr !important; }
    .anos-val-actions { flex-direction: column !important; align-items: stretch !important; }
    .anos-val-actions .anos-btn { justify-content: center !important; }
    .anos-form { grid-template-columns: 1fr !important; }
    .anos-step-head { flex-direction: column !important; align-items: flex-start !important; }
    .anos-final-card { padding: 44px 24px !important; }
    .anos-modal-inner { padding: 36px 24px !important; }
    .anos-credits-pill { bottom: 16px !important; right: 16px !important; }
    .anos-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .anos-steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
    .anos-explore-grid { grid-template-columns: 1fr !important; }
    .anos-credit-costs { gap: 10px !important; }
    .anos-cta-btns { flex-direction: column !important; align-items: center !important; }
}
@media (max-width: 480px) {
    .anos-steps-grid { grid-template-columns: 1fr !important; }
    .anos-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .anos-stepper { gap: 3px !important; }
    .anos-step-dot { padding: 5px 12px !important; font-size: 10px !important; }
    .anos-cta-btns { flex-direction: column !important; align-items: center !important; }
}

/* ════════════════════════════════════════════════════════════════
   3-TIER RESULT SYSTEM — Atom integration styles
   All colours use existing ANOS tokens so they inherit your theme.
   ════════════════════════════════════════════════════════════════ */

/* ── Section / tier headers ──────────────────────────────────── */
.anos-tier-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 18px 0 8px !important;
    padding: 0 4px !important;
}
.anos-tier-header:first-child {
    margin-top: 4px !important;
}
.anos-tier-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #9895AA !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Item meta + actions layout ──────────────────────────────── */
.anos-names li .anos-item-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.anos-names li .anos-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Domain label under name ─────────────────────────────────── */
.anos-item-domain {
    font-size: 12px !important;
    color: #9895AA !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── TLD suffix inside name span ─────────────────────────────── */
.anos-item-tld {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #9895AA !important;
    margin-left: 2px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Price badge ─────────────────────────────────────────────── */
.anos-item-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1D9E75 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Status badge (Atom rows) ────────────────────────────────── */
.anos-atom-status {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border-radius: 30px !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    display: inline-block !important;
}
.anos-status-available {
    color: #1D9E75 !important;
    border-color: rgba(29,158,117,0.35) !important;
    background: rgba(29,158,117,0.08) !important;
}
.anos-status-premium {
    color: #7B6FE0 !important;
    border-color: rgba(123,111,224,0.35) !important;
    background: rgba(123,111,224,0.08) !important;
}
.anos-status-aftermarket {
    color: #D85A30 !important;
    border-color: rgba(216,90,48,0.35) !important;
    background: rgba(216,90,48,0.08) !important;
}

/* ── Buy buttons ─────────────────────────────────────────────── */
.anos-btn-buy {
    padding: 7px 14px !important;
    border-radius: 30px !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
}
/* WooCommerce buy — uses primary gradient (same as .anos-pick) */
.anos-btn-buy-woo {
    background: linear-gradient(135deg, #534AB7 0%, #6B5FD6 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.anos-btn-buy-woo:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(83,74,183,0.45) !important;
    color: #fff !important;
}
/* Atom buy — ghost style with orange accent */
.anos-btn-buy-atom {
    background: rgba(216,90,48,0.08) !important;
    color: #D85A30 !important;
    border-color: rgba(216,90,48,0.35) !important;
}
.anos-btn-buy-atom:hover {
    background: rgba(216,90,48,0.16) !important;
    transform: translateY(-1px) !important;
    color: #D85A30 !important;
    box-shadow: none !important;
}

/* ── Atom row accent stripe override ─────────────────────────── */
.anos-atom-row::before {
    background: linear-gradient(135deg, #D85A30 0%, #E07A55 100%) !important;
}
.anos-atom-row:hover {
    border-color: rgba(216,90,48,0.3) !important;
    background: rgba(216,90,48,0.05) !important;
}

/* ── WooCommerce row accent stripe override ──────────────────── */
.anos-names-woo li::before {
    background: linear-gradient(135deg, #1D9E75 0%, #30C490 100%) !important;
}
.anos-names-woo li:hover {
    border-color: rgba(29,158,117,0.3) !important;
    background: rgba(29,158,117,0.05) !important;
}

/* ── Responsive: stack actions on narrow screens ─────────────── */
@media (max-width: 520px) {
    .anos-names li {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .anos-names li .anos-item-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   LANDING PAGE UPDATE — 3×4 names grid · 4-col features ·
   pricing one-row · 3 OS cards · full responsive
   ════════════════════════════════════════════════════════════════ */

/* ── 1. AI names: 3×4 grid (12 free names) ─────────────────── */
#anos-names-free.anos-names,
ul.anos-names#anos-names-free {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    flex-direction: unset !important;
}
#anos-names-free.anos-names li,
ul.anos-names#anos-names-free li {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    justify-content: space-between !important;
    min-height: 90px !important;
}
#anos-names-free.anos-names li .anos-item-meta,
ul.anos-names#anos-names-free li .anos-item-meta {
    flex-direction: column !important;
    width: 100% !important;
}
#anos-names-free.anos-names li .anos-item-actions,
ul.anos-names#anos-names-free li .anos-item-actions {
    width: 100% !important;
    justify-content: flex-start !important;
}
#anos-names-free.anos-names li span:first-child,
ul.anos-names#anos-names-free li > span {
    font-size: 15px !important;
    line-height: 1.3 !important;
}

/* ── 2. Features — 4 cards in one row ─────────────────────── */
.anos-features-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* ── 3. Pricing — 3 plans in one row (no stacking) ─────────── */
.anos-pricing-plans-row {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1060px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 4. Explore — 3 OS cards grid ──────────────────────────── */
.anos-explore-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

/* OS card variants */
.anos-os-card-naming   { border-color: rgba(123,111,224,0.35) !important; }
.anos-os-card-marketing{ border-color: rgba(29,158,117,0.25) !important; }
.anos-os-card-branding { border-color: rgba(216,90,48,0.2) !important; }
.anos-os-card-soon     { opacity: .85 !important; }

.anos-os-card-active {
    background: rgba(83,74,183,0.08) !important;
    border-color: rgba(123,111,224,0.5) !important;
}

/* Badge: "You are here" / "Coming Soon" */
.anos-os-card-badge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    background: rgba(123,111,224,.18) !important;
    color: #A89EE8 !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(123,111,224,.25) !important;
}
.anos-os-badge-soon {
    background: rgba(216,90,48,.12) !important;
    color: #E0875A !important;
    border-color: rgba(216,90,48,.2) !important;
}

/* Smooth CTA scroll for Naming OS card */
.anos-os-cta { text-decoration: none !important; }

/* Marketplace strip */
.anos-marketplace-strip {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 22px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    margin-top: 4px !important;
    flex-wrap: wrap !important;
}
.anos-marketplace-strip-icon { font-size: 22px !important; flex-shrink: 0 !important; }
.anos-marketplace-strip-text {
    flex: 1 !important;
    min-width: 180px !important;
    font-size: 14px !important;
    color: #9895AA !important;
    line-height: 1.5 !important;
}
.anos-marketplace-strip-text strong { color: #E8E6F0 !important; }

/* ── 5. FULL RESPONSIVE ─────────────────────────────────────── */

/* Tablet — ≤ 1024px */
@media (max-width: 1024px) {
    /* Names: 2×6 */
    #anos-names-free.anos-names,
    ul.anos-names#anos-names-free {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Features: 2 cols */
    .anos-features-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* OS cards: 1+2 */
    .anos-explore-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Pricing: still 3 cols, just tighter */
    .anos-pricing-plans-row {
        gap: 12px !important;
    }
}

/* Small tablet — ≤ 860px */
@media (max-width: 860px) {
    /* Names: 2 cols */
    #anos-names-free.anos-names,
    ul.anos-names#anos-names-free {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* OS cards: 1 per row */
    .anos-explore-grid-3 {
        grid-template-columns: 1fr !important;
    }
    /* Pricing: stack */
    .anos-pricing-plans-row {
        grid-template-columns: 1fr !important;
        max-width: 460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .anos-plan-featured {
        transform: none !important;
        order: -1 !important;
    }
    /* Features: 2 cols maintained */
    .anos-features-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile — ≤ 600px */
@media (max-width: 600px) {
    /* Names: 1 col */
    #anos-names-free.anos-names,
    ul.anos-names#anos-names-free {
        grid-template-columns: 1fr !important;
    }
    #anos-names-free.anos-names li,
    ul.anos-names#anos-names-free li {
        flex-direction: row !important;
        align-items: center !important;
        min-height: unset !important;
    }
    /* Features: 1 col */
    .anos-features-grid-4 {
        grid-template-columns: 1fr !important;
    }
    /* Hero adjustments */
    .anos-h1 { font-size: clamp(26px, 7vw, 42px) !important; }
    .anos-hero-pills { flex-wrap: wrap !important; gap: 6px !important; }
    .anos-hero-cta { flex-direction: column !important; align-items: center !important; }
    .anos-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
    /* Stepper scrollable */
    .anos-stepper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }
    /* Form 1 col */
    .anos-form { grid-template-columns: 1fr !important; }
    /* Validation 1 col */
    .anos-val-grid { grid-template-columns: 1fr !important; }
    /* Pricing full width */
    .anos-pricing-plans-row { max-width: 100% !important; }
    /* Refine bar scroll */
    .anos-refine-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }
    /* Marketplace strip stack */
    .anos-marketplace-strip { flex-direction: column !important; text-align: center !important; }
    .anos-marketplace-strip-text { min-width: unset !important; text-align: center !important; }
    /* How steps */
    .anos-steps-grid { grid-template-columns: 1fr !important; }
}

/* Extra small — ≤ 400px */
@media (max-width: 400px) {
    .anos-h1 { font-size: 24px !important; }
    .anos-sh2 { font-size: 22px !important; }
    .anos-btn-lg { padding: 14px 22px !important; font-size: 15px !important; }
    .anos-sample-names { flex-wrap: wrap !important; gap: 6px !important; }
    .anos-credits-pill { font-size: 12px !important; padding: 8px 12px !important; }
}