:root {
            --bg: #f7f7f7;
            --card-bg: #ffffff;
            --text: #2d3748;
            --muted:#64748b;
            --border: #dbe3ec;
        }
        body.dark{
            --bg: #0f172a;
            --card-bg: #1e293b;
            --text: #e2e8f0;
            --muted:#94a3b8;
            --border: #334155;
        }
        body.dark .ai-analysis {
            background: #1e293b;
        }

        body {

            font-family: Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            margin: 0;

            padding: 0px;

        }

        .container {

            max-width: 1100px;
            margin: auto;
            padding: 0 20px;

        }




        .navbar {
            background: #ffffff;
            padding: 22px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,0.4);
        }
        .nav-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
        }
        .logo {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-style: italic;
            font-size: 46px;
            font-weight: 700;
            margin-top: 20px;
            color: #0f172a;
            line-height: 1;
            letter-spacing: 0.5px;
            white-space: nowrap;
            text-decoration: none;
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-left: auto;
        }
        .nav-links a {
            text-decoration: none;
            color: #1e293b;
            font-size: 15px;
            font-weight: 500;
        }
        .nav-links a:hover {
            color: #0f172a;
        }
        .login-btn {
            background: #2563eb;
            color: white !important;
            padding: 10px 16px;
            border-radius: 10px;
            font-weight: 500;
            font-size: 14px;
            text-decoration: none;
        }
        .login-btn:hover {
            background: #1d4ed8;
        }


        .hero::before {
                content: "";
                position: absolute;
                inset: 0;
                display: none;
                border-radius: 20px;
                pointer-events: none;
        }
        .hero {
            background-image: url('/static/images/hero.jpg');
            background-size: cover;
            background-position: center;
            min-height: 620px;
            position: relative;
            border-radius:  40px 40px 40px 40px;
            overflow : hidden;
        }
        .hero-overlay {
            background: rgba(0, 0, 0, 0.55);
            min-height: 720px;
            display: flex;
            align-items: center;
        }
        .hero-content {
            max-width: 760px;
            width: 100%;
            margin: 0;
            padding-left: 140px;
            color: white;
            text-align: left;
        }
        .hero-content h1 {
            color: beige;
            font-size: 72px;
            line-height: 1.06;
            letter-spacing: -0.8px;
            margin: 0 0 20px;
            font-weight: 700;
            max-width: 760px;
        }
        .hero-content p {
            font-size: 21px;
            line-height: 1.6;
            margin: 0 0 36px;
            max-width: 620px;
            opacity: 0.92;
        }
        .hero-actions {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
        }
        .hero-btn {
            min-width: 200px;
            padding: 18px 36px;
            border-radius: 999px;
            text-decoration: none;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            transition: 0.2s ease;
        }
        .hero-btn.primary,
        .hero-btn.secondary {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.9);
        }
        .hero-btn:hover {
            background: rgba(255, 255, 255, 0.08);
        }




        .ai-search-section {
            position: relative;
            max-width: 1280px;
            margin: 140px auto 100px; /* mere luft */
            padding: 100px 32px; /* giver bedre balance */
            border-radius: 32px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background:
            linear-gradient(rgba(18, 30, 48, 0.25), rgba(18, 30, 48, 0.25)),
            url('/static/images/ai-search.jpg') center center / cover no-repeat;
        }

        .ai-search-shell {
            width: 100%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background: rgba(20, 40, 70, 0.68);
            backdrop-filter: blur(14px);
            border-radius: 28px;
            padding: 46px 34px;
        }
        .search-header {
            width: 100%;
            max-width: 950px;
            text-align: center;
            background: linear-gradient(180deg, #2a58a1, #21467f);
            border-radius: 26px;
            padding: 24px 28px;
            margin-bottom: 22px;
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
        }
        .search-header h2 {
            font-size: 38px;
            line-height: 1.08;
            margin: 0 0 10px;
            color: #fff;
            font-weight: 800;
            text-transform: none;
            letter-spacing: -0.7px;
        }
        .search-header p {
            font-size: 18px;
            line-height: 1.65;
            color: rgba(255, 255, 255, 0.92);
            margin: 0;
            max-width: 760px;
            margin-inline: auto;
        }
        .ai-search-card {
            position: relative;
            width: 100%;
            max-width: 1100px;
            text-align: center;
        }
        .ai-search-card form {
            width: 100%;
            display: block;
        }
        .ai-search-box {
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
            margin-bottom: 8px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 16px;
            align-items: center;
        }
        .ai-search-input {
        display: block;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        min-height: 74px;
        padding: 20px 24px;
        border-radius: 999px;
        border: 1px solid #d7dfeb;
        outline: none;
        font-size: 17px;
        line-height: 1.4;
        box-sizing: border-box;
        background: #ffffff;
        color: #1f2937;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        margin: 0;
        }
        .ai-search-input::placeholder {
            color:#8a94a6;
        }
        .ai-search-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 74px;
            padding: 0 36px;
            border: none;
            border-radius: 999px;
            background: #c8743a;
            color: white;
            font-weight: 700;
            font-size: 17px;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease;
            box-shadow: 0 10px 22px rgba(200, 116, 58, 0.22);
        }
        .ai-search-submit:hover {
            background: #b7652d;
            transform: translateY(-1px);
            box-shadow: 0 14px 26px rgba(183, 101, 45, 0.24);
        }
        .toggle-filters-btn {
            margin-top: 18px;
            padding: 12px 26px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.16);
            color: #ffffff;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(6px);
        }
        .toggle-filters-btn:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.34);
            transform: translateY(-1px);
        }
        .filters-panel {
            display: none;
            margin-top: 14px;
            width: 100%;
            max-width: 950px;
            margin-left: auto;
            margin-right: auto;
        }
        .filters-panel.open {
            display: block;
        }
        .search-card-inner {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 24px;
            padding: 34px;
            box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
            text-align: left;
            backdrop-filter: blur(6px);
        }
        .filter-title {
            font-size: 24px;
            margin: 0 0 20px;
            color: #1f3a8a;
            font-weight: 700;
        }
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-bottom: 24px;
        }
        .feature-pill {
            display: inline-block;
        }
        .feature-pill input {
            display: none;
        }
        .feature-pill span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 56px;
            padding: 14px 18px;
            border-radius: 16px;
            border: 1.5px solid #d6deeb;
            background: #f9fbff;
            color: #1f3a8a;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            transition: all 0.2s ease;
        }
        .feature-pill span:hover {
            background: #eef4ff;
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
        }
        .feature-pill input:checked + span {
            background: linear-gradient(135deg, #1f3a8a, #2b59c3);
            color: #ffffff;
            border-color: #1f3a8a;
            box-shadow: 0 12px 24px rgba(31, 58, 138, 0.30);
            transform: translateY(-1px);
        }
        .search-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }
        .form-field {
            margin-bottom: 6px;
        }
        .form-field.full {
            grid-column: 1 / -1;
        }
        .form-field label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1f2937;
        }
        .form-field input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #cfd8e3;
            border-radius: 14px;
            box-sizing: border-box;
            font-size: 15px;
            background: #ffffff;
            color: #1f2937;
        }
        .form-field input:focus,
        .ai-search-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }
@media (max-width: 900px) {
 .search-header h2 {
   font-size: 32px;
 }
 .checkbox-group {
   grid-template-columns: repeat(2, 1fr);
 }
 .ai-search-box {
   grid-template-columns: 1fr;
 }
 .ai-search-input,
 .ai-search-submit {
   width: 100%;
 }
}
@media (max-width: 600px) {
 .ai-search-section {
   padding: 56px 16px;
 }
 .search-header {
   padding: 26px 20px;
 }
 .search-header h2 {
   font-size: 28px;
 }
 .search-header p {
   font-size: 16px;
 }
 .checkbox-group,
 .search-grid {
   grid-template-columns: 1fr;
 }
}
@media (max-width: 640px){
   .checkbox-group{
       grid-template-columns:1fr;
   }
   .search-grid{
       grid-template-columns:1fr;
   }
   .search-header h2{
       font-size:28px;
   }
   .ai-search-box{
       padding:20px;
   }
   .search-card-inner{
       padding:20px;
   }
   .results-section{
        max-width: 1200px;
        margin: 60px auto 100px auto;
        padding: 0 24px;
    }
    .results-info strong {
        max-width: 950px;
        color: #1f3a8a;
        margin: 24px auto 18px auto;
        padding: 14px 18px;
        border-radius: 14px;
        line-height: 1.6;
        font-size: 15px;
    }
    .results-section h2{
        font-size: 36px;
        font-weight: 700;
        padding-left: 6px;
        margin-bottom: 28px;
        color: #1f2f4a;
    }
    .results-section {
        margin: 80px 0 120px;
    }
    .results-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }
    .results-title {
        font-size: 32px;
        font-weight: 700;
        color: #1f2f4a;
        margin-bottom: 32px;
        letter-spacing: -0.5px;
    }
    .home-card{
        background:white;
        border-radius:22px;
        overflow:hidden;
        box-shadow:0 14px 34px rgba(15, 23, 42, 0.10);
    }
}

.home-card:hover{
        transform:translateY(-4px);
        box-shadow:0 22px 40px rgba(15,23,42,0.14);
    }
    .home-image{
        position:relative;
    }
    .home-image img{
        width:100%;
        height:230px;
        object-fit:cover;
        border-radius:12px;
    }
    .match-badge{
        position:absolute;
        top:12px;
        right:12px;
        background: #2563eb;
        color:white;
        font-weight:700;
        padding:6px 10px;
        border-radius:8px;
        font-size:12px;
        text-align: center;
    }
    .home-body{
        padding:22px;
    }
    .home-body h3{
        margin:0 0 12px 0;
        font-size:28px;
        font-weight: 700;
        line-height:1.2;
        color:#1f2f4a;
    }
    .ai-insight{
        background:#eef5fb;
        color:#333;
        padding:8px 10px;
        border-radius:8px;
        font-size:13px;
        line-height:1.5;
        margin-bottom:16px;
    }
    .home-info{
        font-size:16px;
        color:#5f6b7a;
        margin-bottom:20px;
        line-height:1.5;
    }
    .details-button{
        display:inline-block;
        padding:14px 24px;
        background:#c8743a;
        color:white;
        border-radius:16px;
        text-decoration:none;
        font-weight:700;
        letter-spacing:0.3px;
        transition:background 0.2s ease, transform 0.2s ease;
    }
    .details-button:hover{
        background:#b7652d;
        transform:translateY(-1px);
    }
    .home-image img{
        width:100%;
        height:220px;
        object-fit:cover;
    }
    

@media (max-width: 700px){

    .results-section h2{
       font-size:26px;
    }
    .home-body h3{
       font-size:24px;
    }
    .match-badge{
       width:72px;
       height:72px;
       font-size:14px;
    }
}


.ai-intro{
    margin:0 0 8px 0;
    font-size:15px;
    line-height:1.6;
color:var(--text);
}
.best-match-text{
    margin:0 0 18px 0;
    font-size:15px;
    line-height:1.6;
    color:var(--text);
}
.sort-box{
    margin-bottom:22px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.sort-box label{
    font-weight:600;
    color:var(--text);
}
.sort-box select{
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:white;
    font-size:14px;
}




.results-section {
   margin: 48px 0 120px;
   padding: 0 24px;
}
.results-container {
   max-width: 1200px;
   margin: 0 auto;
}
.results-title {
   font-size: 36px;
   font-weight: 700;
   color: #1f2f4a;
   margin: 0 0 40px 0;
   letter-spacing: -0.5px;
}

.showcase-wrapper {
   position: relative;
   max-width: 1280px;
   margin: 0 auto;
}
.showcase-board {
   width: 100%;
   overflow: hidden;
   background: #ffffff;
   border-radius: 28px;
   padding: 28px 36px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.showcase-grid {
   display: flex;
   justify-content: center;
   align-items: stretch;
   gap: 24px;
}
.showcase-card {
    position: relative;
   width: 340px;
   min-width: 340px;
   background: white;
   border-radius: 26px;
   overflow: hidden;
   box-shadow: 0 12px 28px rgba(0,0,0,0.12);
   transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.showcase-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 38px rgba(0,0,0,0.16);
}
.showcase-card.side {
   transform: scale(0.92);
   opacity: 0.92;
}
.showcase-card.side:hover {
   transform: scale(0.92) translateY(-4px);
   opacity: 1;
}
.showcase-card.featured {
   width: 380px;
   min-width: 380px;
   transform: scale(1.02);
   z-index: 2;
}
.showcase-image-wrap {
   position: relative;
}
.showcase-image-wrap img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   display: block;
}
.showcase-card.featured .showcase-image-wrap img {
   height: 250px;
}
.showcase-body {
   padding: 18px 18px 22px 18px;
}
.showcase-body h3 {
   margin: 0 0 6px;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.25;
   color: #1d3557;
}
.match-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #2563eb;
    color: white;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}
.match-badge .score {
    font-size: 16px;
    line-height: 1;
}
.match-badge .label {
    font-size: 9px;
    opacity: 0.8;
}
.ai-insight {
    background: linear-gradient(135deg, #f0f6ff, #f8fafc);
    border-left: 4px solid #2563eb;
    padding: 12px;
    border-radius: 12px;
    margin: 10px 0;
    font-size: 13px;
}
.ai-insight strong {
    display: block;
    font-size: 12px;
    color: #1d3557;
    margin-bottom: 4px;
}
.ai-insight p {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}
.match-tags {
    margin-top: 8px;
}
.match-tag {
    display: inline-block;
    background: #e8f0ff;
    color: #1d4ed8;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin: 3px 5px 0 0;
}
.home-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
}
.home-info span {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
}
.home-info .price {
    font-weight: 700;
    color: #1d3557;
}
.details-button {
    background: linear-gradient(135deg, #c47f4f, #b96b3c);
    border: none;
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.2s;
}
.details-button:hover {
 transform: scale(1.05);
}
.showcase-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 48px;
   height: 48px;
   border: none;
   border-radius: 50%;
   background: #4f79a8;
   color: #ffffff;
   font-size: 22px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 20;
   padding: 0;
   transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.showcase-arrow:hover {
   background: #3f6a99;
   box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.left-arrow {
   left: -24px;
}
.right-arrow {
   right: -24px;
}
@media (max-width: 768px) {
 .showcase-wrapper {
   max-width: 100%;
   margin: 0 auto;
 }
 .showcase-board {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   touch-action: pan-x;
   padding: 0;
   background: transparent;
   box-shadow: none;
   border-radius: 0;
 }
 .showcase-board::-webkit-scrollbar {
   display: none;
 }
 .showcase-grid {
   display: flex;
   justify-content: flex-start;
   align-items: stretch;
   gap: 16px;
   width: max-content;
   min-width: max-content;
   padding: 0 16px 12px 16px;
 }
 .showcase-card,
 .showcase-card.side,
 .showcase-card.featured {
   width: 280px;
   min-width: 280px;
   max-width: 280px;
   transform: none;
   opacity: 1;
 }
 .showcase-image-wrap img,
 .showcase-card.featured .showcase-image-wrap img {
   height: 200px;
 }
 .showcase-arrow,
 .left-arrow,
 .right-arrow {
   display: none !important;
 }
}

.ai-understood{
background:#eef6ff;
padding:12px 18px;
border-radius:10px;
margin-bottom:20px;
font-size:14px;
color:#2b4b70;
}

.ai-loading{
    text-align:center;
    font-weight:500;
    color:#4a90e2;
    margin:20px 0;
    animation:pulse 1.2s infinite;
}
 
@keyframes pulse{
    0%{
        opacity:0.3;
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0.3;
    }
}



.footer{
            margin-top:60px;
            padding:30px;
            text-align:center;
            background:#f5f3ea;
            color:#666;
        }

        .filters-title{
            font-size:19px;
            margin: 0px 0 16px 0;
            color:#1f3a8a;
            text-align: left;
            font-weight:700;
        }
        .filter-title{

            font-size: 18px;

            margin: 0 0 14px 0;

            color: #1f3a8a;

            text-align: left;

        }

        .checkbox-group{

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 14px;

            margin-bottom: 28px;

        }

        .feature-pill{
            display: inline-block;
        }
        .feature-pill input{
            display: none;
        }
        .feature-pill span{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 140px;
            padding: 14px 20px;
            border-radius: 14px;
            border: 1.5px solid #cfd9ec;
            background: #ffffff;
            color: #1f3a8a;
            font-weight: 500;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
        }
        .feature-pill span:hover{
            transform: translateY(-1px);
            box-shadow:0 6px 14px rgba(0,0,0,0.08);
        }
        .feature-pill input:checked + span{
            background: #1f3a8a;
            color: white;
            border-color: #1f3a8a;
            box-shadow: 0 8px 18px rgba(31,58,138,0.18);
        }

        .checkbox-group label{

            position:relative;

            display:flex;

            align-items:center;

            justify-content:center;

            min-height:64px;

            padding:16px 18px;

            border:1.5px solid #9db2df;

            border-radius:16px;

            background:transparent;

            color:#1f3a8a;

            font-weight:500;

            cursor:pointer;

            transition:all 0.2s ease;

            text-align:center;

        }

        .checkbox-group input[type="checkbox"]{

            position:absolute;

            opacity:0;

            pointer-events:none;

        }

        .checkbox-group label:has(input[type="checkbox"]:checked){

            background:#1f3a8a;

            color:white;

            border-color:#1f3a8a;

            box-shadow:0 8px 18px rgba(31,58,138,0.18);

        }
        .search-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin-top: 10px;
        }
        .form-field label{
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text);
        }
        .form-field input{
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #cfd8e3;
            border-radius: 14px;
            box-sizing: border-box;
            font-size: 15px;
            background: #ffffff;
            color: #1f2937;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
            margin-bottom: 18px;
        }
        .form-field.full{
            grid-column: 1 / -1;
        }

        .ai-intro{
            margin:0 0 8px 0;
            font-size:15px;
            line-height:1.6;
            color:var(--text);
        }
        .best-match-text{
            margin:0;
            font-size:15px;
            line-height:1.6;
            color:var(--text);
        }
        .sort-box{
            margin-bottom:18px;
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }
        .sort-box label{
            font-weight:600;
            color:var(--text);
        }
        .sort-box select{
            padding:10px 14px;
            border:1px solid var(--border);
            border-radius:10px;
            background:white;
            font-size:14px;
        }


        .top-pick{
            max-width:1100px;
            margin:40px auto 50px auto;
            background:#fff;
            border-radius:24px;
            padding:24px;
            box-shadow:0 10px 30px rgba(0,0,0,0.08);
            position:relative;
            overflow:hidden;
        }
        .top-pick-badge{
            display:inline-block;
            background:#c87a3a;
            color:white;
            font-weight:700;
            font-size:13px;
            padding:8px 14px;
            border-radius:999px;
            margin-bottom:18px;
            letter-spacing:0.4px;
        }
        .top-pick-content{
            display:grid;
            grid-template-columns: 1.1fr 1fr;
            gap:24px;
            align-items:center;
        }
        .top-pick-image img{
            width:100%;
            height:320px;
            object-fit:cover;
            border-radius:18px;
            display:block;
        }
        .top-pick-info h3{
            font-size:32px;
            margin:0 0 10px 0;
            color:#1f2937;
        }
        .top-pick-score{
            display:inline-block;
            background:#e8f0ff;
            color:#1d4ed8;
            padding:8px 14px;
            border-radius:999px;
            font-size:14px;
            font-weight:700;
            margin-bottom:16px;
        }
        .top-pick-summary{
            font-size:16px;
            line-height:1.6;
            color:#374151;
            margin-bottom:16px;
        }
        .top-pick-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:16px;
        }
        .top-pick-tag{
            background:#eef6ff;
            color:#2563eb;
            padding:8px 12px;
            border-radius:999px;
            font-size:13px;
            font-weight:600;
        }
        .top-pick-note{
            background:#fff7ed;
            color:#9a3412;
            padding:12px 14px;
            border-radius:12px;
            font-size:14px;
            margin-bottom:18px;
        }
        .top-pick-btn{
            display:inline-block;
            background:#2563eb;
            color:white;
            text-decoration:none;
            padding:12px 18px;
            border-radius:12px;
            font-weight:700;
        }
        .top-pick-btn:hover{
            opacity:0.92;
        }
        .results-section .results-title {
            font-size: 36px;
            font-weight: 700;
            color: #1f2f4a;
            margin: 0 0 28px 48px;
            letter-spacing: -0.5px;
        }   
        
        
        
        
        
        
        
        
        @media (max-width: 900px){
        .top-pick-content{
            grid-template-columns:1fr;
        }
        .top-pick-image img{
            height:240px;
        }
        .top-pick-info h3{
            font-size:26px;
        }
}
@media (max-width: 900px) {
 .navbar {
   padding: 14px 20px;
 }
 .nav-inner {
    flex-wrap: wrap;
   gap: 14px;
 }
 .logo {
   font-size: 36px;
 }
 .nav-links {
   width: 100%;
   justify-content: center;
   margin: 0;
   gap: 14px;
 }
 .hero,
 .hero-overlay {
   min-height: 520px;
 }
 .hero-content {
   padding: 0 24px;
 }
 .hero-content h1 {
   font-size: 44px;
 }
 .hero-content p {
   font-size: 18px;
 }
 .hero-actions {
   gap: 16px;
 }
 .hero-btn {
   min-width: 150px;
   font-size: 18px;
   padding: 14px 22px;
 }
}






 
.about-page {
 background: #f7f7f7;
 color: #1f2937;
}
.about-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
}
.about-hero {
 padding: 90px 24px 70px;
 background: linear-gradient(180deg, #eef3f9 0%, #f7f7f7 100%);
}
.about-hero-inner,
.about-container {
 max-width: 1100px;
 margin: 0 auto;
}
.about-eyebrow {
 margin: 0 0 12px;
 color: #c8743a;
 font-size: 14px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.about-hero h1 {
 margin: 0 0 16px;
 font-size: 56px;
 line-height: 1.05;
 color: #1d3557;
}
.about-lead {
 max-width: 760px;
 margin: 0;
 font-size: 20px;
 line-height: 1.7;
 color: #4b5563;
}
.about-section {
 padding: 56px 24px;
}
.about-section-alt {
 background: #ffffff;
}
.about-section h2 {
 margin: 0 0 18px;
 font-size: 32px;
 color: #1d3557;
}
.about-section p {
 margin: 0;
 max-width: 820px;
 font-size: 17px;
 line-height: 1.7;
 color: #4b5563;
}
.about-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 margin-top: 28px;
}
.about-page h1 {
 font-size: 48px;
 margin-bottom: 20px;
}
.about-page h2 {
 margin-top: 40px;
 margin-bottom: 10px;
}
.about-page p {
 margin-bottom: 16px;
 line-height: 1.6;
}
.about-card {
 background: #f8fbff;
 border: 1px solid #e5edf7;
 border-radius: 20px;
 padding: 24px;
 box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.about-card h3 {
 margin: 0 0 12px;
 font-size: 20px;
 color: #1d3557;
}
.about-card p {
 font-size: 15px;
 line-height: 1.6;
}
@media (max-width: 900px) {
 .about-hero h1 {
   font-size: 40px;
 }
 .about-lead {
   font-size: 17px;
 }
 .about-grid {
   grid-template-columns: 1fr;
 }
}
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
 to {
   transform: rotate(360deg);
 }
}
.top-explanation {
    display: block;
    max-width: 760px;
    margin: 18px auto 28px;
    padding: 14px 22px;
    text-align: center;
    background: #f3f7ff;
    border: 1px solid #d7e4ff;
    border-radius: 16px;
    color: #1d3557;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(29, 53, 87, 0.08);
}
.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}
.tag {
    background: #f1f5ff;
    color: #1e3a8a;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}
.no-results-box {
    max-width: 760px;
    margin: 16px auto 24px;
    padding: 16px 20px;
    text-align: center;
    background: #fff4f0;
    border: 1px solid #f2d2c7;
    border-radius: 16px;
    color: #8a3b24;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
}
.fallback-note {
    max-width: 760px;
    margin: 12px auto 18px;
    padding: 12px 18px;
    text-align: center;
    background: #fff8ef;
    border: 1px solid #f1d2a8;
    border-radius: 14px;
    color: #8a5a1f;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

        
.profile-page {
   max-width: 900px;
   margin: 80px auto;
   padding: 0 20px;
}
.profile-page h1 {
   font-size: 42px;
   margin-bottom: 24px;
   color: #1f2f4a;
}
.profile-card {
   background: #ffffff;
   border-radius: 24px;
   padding: 32px;
   box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}
.profile-card p,
.profile-card li {
   font-size: 18px;
   line-height: 1.6;
   color: #334155;
}
.profile-card ul {
   margin: 16px 0 24px;
   padding-left: 20px;
}
.primary-btn {
   display: inline-block;
   padding: 14px 24px;
   border-radius: 999px;
   background: #c68656;
   color: white;
   text-decoration: none;
   font-weight: 700;
}

.input-highlight {
   box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
   transition: box-shadow 0.3s ease;
}

        .search-btn{
            width:100%;
            padding:12px;
            background:#2563eb;
            color:white;
            border:none;
            border-radius:10px;
            font-weight:600;
            cursor:pointer;
            margin-top:10px;
        }
        .search-btn:hover{
            background:#1d4ed8;
        }

        .details-container{
            max-width: 900px;
            margin: auto;
       }

        .results-info {
            padding: 14px 18px;
            border-radius: 12px;
            margin-top: 20px;
            margin-bottom: 25px;
            line-height: 1.5;
            font-size: 15px;
            background: var(--card-bg);
            color: var(--text);
        }

        .results-section {
            margin-top: 10px;
        }
        .search-card{
            max-width:950px;
            margin:0 auto 50px auto;
            padding:36px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius:24px;
            box-shadow:0 12px 30px rgba(0,0,0,0.08);
        }

        .secondary-btn{
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.35);
        }
        .secondary-btn:hover{
            background: rgba(255,255,255,0.22);
        }

        .ai-analysis {
            background: var(--card-bg);
            border-left: 4px solid #4f46e5;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 14px;
            margin: 8px 0 12px 0;
            color: var(--text);
        }

        .dark-toggle{
            position:fixed;
            top:20px;
            right:20px;
            padding:8px 14px;
            border-radius:8px;
            border:none;
            background:#1d3557;
            color:white;
            cursor:pointer;
        }

        .match-score{
            display:inline-block;
            background:#e8f0ff;
            color:#1d4ed8;
            padding:6px 14px;
            border-radius:20px;
            font-weight:700;
            font-size:14px;
            margin-bottom:16px;
        }
/* høj score */
.score-100,
.score-90,
.score-80 {
    background: #eafaf1;
   color: #22c55e;
}
/* god score */
.score-70,
.score-60 {
    background: #eaf3ff;
   color: #3498db;
}
/* middel */
.score-50,
.score-40 {
    background: #fff4e5;
   color: #f39c12;
}
/* lav */
.score-30,
.score-20,
.score-10,
.score-0 {
    background: #f1f5f9;
   color: #64748b;
}
.reset-btn{
display:block;
text-align:center;
margin-top:10px;
color:#666;
font-size:14px;
}
.reset-btn:hover {
   background: #cfcfcf;
}

.login-page {
   position: relative;
   min-height: calc(100vh - 120px);
   padding: 80px 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: url("/static/images/hero-bg.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
.login-overlay {
   position: absolute;
   inset: 0;
   background: rgba(15, 23, 42, 0.45);
}
.login-card {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 430px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 24px;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
   padding: 34px 28px;
   backdrop-filter: blur(6px);
}
.login-card h1 {
   margin: 0 0 10px 0;
   text-align: center;
   font-size: 42px;
   color: #1f2f4a;
   font-family: Georgia, "Times New Roman", serif;
}
.login-subtext {
   margin: 0 0 28px 0;
   text-align: center;
   color: #5f6b7a;
   font-size: 15px;
   line-height: 1.6;
}
.login-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
}
.login-field label {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 700;
   color: #1f2f4a;
}
.login-input {
   width: 100%;
   box-sizing: border-box;
   border: 1px solid #d7dfeb;
   border-radius: 14px;
   background: #ffffff;
   color: #1f2937;
   font-size: 15px;
   padding: 14px 16px;
   outline: none;
}
.login-input:focus {
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
   border-color: #2563eb;
}
.password-wrap {
   position: relative;
}
.password-input {
   padding-right: 52px;
}
.toggle-password {
   position: absolute;
   top: 50%;
   right: 14px;
   transform: translateY(-50%);
   border: none;
   background: transparent;
   cursor: pointer;
   font-size: 18px;
   color: #64748b;
   padding: 0;
}
.forgot-row {
   margin-top: 8px;
   text-align: right;
}
.forgot-link {
   font-size: 13px;
   color: #2563eb;
   text-decoration: none;
}
.forgot-link:hover {
   text-decoration: underline;
}
.login-btn-main {
   margin-top: 6px;
   width: 100%;
   border: none;
   border-radius: 999px;
   padding: 15px 22px;
   background: #2563eb;
   color: #ffffff;
   font-weight: 800;
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.2s ease;
}
.login-btn-main:hover {
   background: #1d4ed8;
   transform: translateY(-1px);
}
.login-footer-text {
   margin: 22px 0 0 0;
   text-align: center;
   font-size: 14px;
   color: #5f6b7a;
}
.create-user-link {
   color: #2563eb;
   text-decoration: none;
   font-weight: 600;
}
.create-user-link:hover {
   text-decoration: underline;
}

.about-page-ll {
   max-width: 980px;
   margin: 0 auto;
   padding: 72px 24px 110px;
}
.about-hero-ll {
   margin-bottom: 54px;
}
.about-hero-inner-ll {
   max-width: 760px;
   margin: 0 auto;
   text-align: center;
}
.about-hero-ll h1 {
   margin: 0 0 16px 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 58px;
   line-height: 1.05;
   color: #1f2f4a;
   font-weight: 700;
}
.about-hero-ll p {
   margin: 0;
   font-size: 19px;
   line-height: 1.75;
   color: #6b7280;
}
.about-mission-ll {
   margin-bottom: 60px;
}
.about-ai-ll {
   margin-bottom: 60px;
}
.about-ai-header-ll {
   margin-bottom: 24px;
   text-align: center;
}
.about-ai-header-ll h2 {
   margin: 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 42px;
   line-height: 1.1;
   color: #1f2f4a;
   font-weight: 700;
}
.about-steps-ll {
   display: flex;
   flex-direction: column;
   gap: 18px;
}
.about-card-ll {
   background: #ffffff;
   border: 1px solid #edf1f6;
   border-radius: 22px;
   box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.about-mission-card-ll,
.about-step-card-ll {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   padding: 24px 24px;
}
.about-icon-box-ll {
   flex: 0 0 52px;
   width: 52px;
   height: 52px;
   border-radius: 16px;
   background: rgba(200, 116, 58, 0.10);
   color: #c8743a;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   line-height: 1;
   margin-top: 2px;
}
.about-card-content-ll h2,
.about-card-content-ll h3 {
   margin: 0 0 8px 0;
   color: #1f2f4a;
   font-weight: 700;
}
.about-card-content-ll h2 {
   font-size: 28px;
   font-family: Georgia, "Times New Roman", serif;
}
.about-card-content-ll h3 {
   font-size: 24px;
   font-family: Georgia, "Times New Roman", serif;
}
.about-card-content-ll p {
   margin: 0;
   font-size: 16px;
   line-height: 1.75;
   color: #6b7280;
}
.about-cta-ll {
   text-align: center;
   padding-top: 8px;
}
.about-cta-ll p {
   margin: 0 0 14px 0;
   color: #8b95a5;
   font-size: 16px;
}
.about-cta-btn-ll {
   display: inline-block;
   padding: 13px 28px;
   border-radius: 999px;
   background: #c8743a;
   color: white;
   text-decoration: none;
   font-weight: 700;
   font-size: 15px;
   transition: background 0.2s ease, transform 0.2s ease;
}
.about-cta-btn-ll:hover {
   background: #b96831;
   transform: translateY(-1px);
}
.profile-page-ll {
   max-width: 1120px;
   margin: 0 auto;
   padding: 72px 24px 110px;
}
.profile-hero-ll {
   margin-bottom: 34px;
}
.profile-hero-ll h1 {
   margin: 0 0 10px 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 56px;
   line-height: 1.05;
   color: #1f2f4a;
   font-weight: 700;
}
.profile-hero-ll p {
   margin: 0;
   font-size: 18px;
   line-height: 1.7;
   color: #6b7280;
}
.profile-grid-ll {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 24px;
   align-items: start;
}
.profile-card-ll {
   background: #ffffff;
   border: 1px solid #edf1f6;
   border-radius: 24px;
   box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
   padding: 26px;
}
.profile-card-ll h2 {
   margin: 0 0 22px 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 30px;
   line-height: 1.15;
   color: #1f2f4a;
   font-weight: 700;
}
.profile-form-ll {
   display: flex;
   flex-direction: column;
   gap: 22px;
}
.profile-fields-ll {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}
.profile-field-ll label {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 700;
   color: #1f2f4a;
}
.profile-input-ll {
   width: 100%;
   box-sizing: border-box;
   border: 1px solid #d7dfeb;
   border-radius: 14px;
   background: #ffffff;
   color: #1f2937;
   font-size: 15px;
   padding: 14px 16px;
   outline: none;
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
.profile-input-ll:focus {
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
   border-color: #2563eb;
}
.profile-preferences-ll {
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.profile-preferences-title-ll {
   font-size: 14px;
   font-weight: 700;
   color: #1f2f4a;
}
.profile-pill-group-ll {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.profile-pill-ll input {
   display: none;
}
.profile-pill-ll span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 16px;
   border-radius: 999px;
   border: 1.5px solid #cfd9ec;
   background: #ffffff;
   color: #1f3a8a;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.18s ease;
}
.profile-pill-ll input:checked + span {
   background: #1f3a8a;
   color: #ffffff;
   border-color: #1f3a8a;
   box-shadow: 0 8px 18px rgba(31, 58, 138, 0.18);
}
.profile-save-btn-ll {
   width: fit-content;
   border: none;
   border-radius: 999px;
   padding: 14px 22px;
   background: #c8743a;
   color: white;
   font-weight: 700;
   font-size: 15px;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.2s ease;
}
.profile-save-btn-ll:hover {
   background: #b96831;
   transform: translateY(-1px);
}
.saved-homes-list-ll {
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.saved-home-item-ll {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 18px;
   padding: 18px;
   border-radius: 18px;
   background: #f8fafc;
   border: 1px solid #e6edf5;
}
.saved-home-main-ll {
   min-width: 0;
}
.saved-home-title-ll {
   margin: 0 0 6px 0;
   font-size: 16px;
   font-weight: 700;
   color: #1f2f4a;
}
.saved-home-meta-ll {
   margin: 0;
   font-size: 14px;
   color: #6b7280;
   line-height: 1.5;
}
.saved-home-side-ll {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
   flex-shrink: 0;
}
.saved-home-match-ll {
   white-space: nowrap;
   font-size: 13px;
   font-weight: 700;
   color: #2563eb;
   background: #eaf1ff;
   padding: 8px 12px;
   border-radius: 999px;
}
.saved-home-link-ll {
   font-size: 14px;
   font-weight: 600;
   color: #c8743a;
   text-decoration: none;
}
.saved-home-link-ll:hover {
   text-decoration: underline;
}
.saved-home-empty-ll {
   margin: 0;
   font-size: 15px;
   color: #6b7280;
}
.how-it-works-section {
   max-width: 1280px;
   margin: 80px auto 0;
   padding: 0 24px;
}
.how-it-works-container {
   max-width: 1200px;
   margin: 0 auto;
}
.how-it-works-title {
   text-align: center;
   font-size: 42px;
   line-height: 1.12;
   color: #1f2f4a;
   margin: 0 0 52px 0;
   font-weight: 700;
   letter-spacing: -0.5px;
}
.how-it-works-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}
.how-card {
   background: #ffffff;
   border: 1px solid #e7edf5;
   border-radius: 24px;
   padding: 30px 24px;
   text-align: center;
   box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.how-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
}
.how-icon {
   width: 60px;
   height: 60px;
   margin: 0 auto 14px;
   border-radius: 50%;
   background: #eef4ff;
   color: #2563eb;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: 800;
}
.how-step {
   font-size: 13px;
   font-weight: 700;
   color: #c8743a;
   margin-bottom: 8px;
   letter-spacing: 0.4px;
   text-transform: uppercase;
}
.how-card h3 {
   margin: 0 0 10px 0;
   font-size: 22px;
   color: #1d3557;
   line-height: 1.2;
}
.how-card p {
   margin: 0;
   font-size: 15px;
   line-height: 1.65;
   color: #5f6b7a;
}
.search-actions-row {
   margin-top: 14px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}
.reset-search-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 6px 10px;
   border-radius: 999px;
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
   color: #6b7280;
   background: transparent;
   border: none;
   transition: all 0.2s ease;
}
.reset-search-link:hover {
   color: #1f2937;
   background: rgba(255,255,255,0.78);
   transform: translateY(-1px);
   text-decoration: underline;
}

.top-match-card {
   position: relative;
}
.top-match-ribbon {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 3;
   background: linear-gradient(135deg, #c8743a, #e89b5b);
   color: #fff;
   padding: 7px 12px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.3px;
   box-shadow: 0 8px 18px rgba(200, 116, 58, 0.25);
}
.match-badge.score-excellent {
   background: #22c55e;
   box-shadow: 0 10px 20px rgba(34, 197, 94, 0.24);
}
.match-badge.score-good {
   background: #2563eb;
   box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}
.match-badge.score-medium {
   background: #f59e0b;
   box-shadow: 0 10px 20px rgba(245, 158, 11, 0.24);
}
.match-badge.score-low {
   background: #64748b;
   box-shadow: 0 10px 20px rgba(100, 116, 139, 0.22);
}
.showcase-body h3 {
   margin-bottom: 10px;
}
.ai-insight {
   background: linear-gradient(135deg, #f0f6ff, #f8fafc);
   border-left: 4px solid #2563eb;
   padding: 12px 14px;
   border-radius: 12px;
   margin: 12px 0 12px;
   min-height: 74px;
}
.ai-insight strong {
   display: block;
   font-size: 12px;
   color: #1d3557;
   margin-bottom: 6px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
}
.ai-insight p {
   margin: 0;
   font-size: 13px;
   line-height: 1.45;
   color: #475569;
}
.match-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 10px 0 12px;
}
.match-tag {
   display: inline-flex;
   align-items: center;
   background: #e8f0ff;
   color: #1d4ed8;
   padding: 5px 10px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 700;
   white-space: nowrap;
}
.home-info {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
   margin-bottom: 18px;
}
.home-info span {
   background: #f1f5f9;
   padding: 4px 8px;
   border-radius: 6px;
   font-size: 12px;
   color: #64748b;
}
.home-info .price {
   font-weight: 700;
   color: #1d3557;
}

@media (max-width: 900px) {
   .how-it-works-title {
       font-size: 34px;
   }
   .how-it-works-grid {
       grid-template-columns: 1fr;
   }
}
@media (max-width: 768px) {
   .how-it-works-section {
       margin: 56px auto 0;
       padding: 0 16px;
   }
   .how-it-works-title {
       font-size: 28px;
       margin-bottom: 24px;
   }
   .how-card {
       padding: 22px 18px;
       border-radius: 20px;
   }
   .how-card h3 {
       font-size: 20px;
   }
   .how-card p {
       font-size: 14px;
   }
}
@media (max-width: 900px) {
   .profile-grid-ll {
       grid-template-columns: 1fr;
   }
   .profile-fields-ll {
       grid-template-columns: 1fr;
   }
}
@media (max-width: 640px) {
   .profile-page-ll {
       padding: 48px 16px 80px;
   }
   .profile-hero-ll h1 {
       font-size: 40px;
   }
   .profile-hero-ll p {
       font-size: 16px;
   }
   .profile-card-ll {
       padding: 20px;
       border-radius: 20px;
   }
   .profile-card-ll h2 {
       font-size: 25px;
   }
   .saved-home-item-ll {
       flex-direction: column;
       align-items: flex-start;
   }
   .saved-home-side-ll {
       align-items: flex-start;
   }
}

@media (max-width: 768px) {
   .about-page-ll {
       padding: 48px 16px 80px;
   }
   .about-hero-ll h1 {
       font-size: 42px;
   }
   .about-hero-ll p {
       font-size: 17px;
   }
   .about-ai-header-ll h2 {
       font-size: 32px;
   }
   .about-mission-card-ll,
   .about-step-card-ll {
       padding: 20px 18px;
       gap: 14px;
   }
   .about-icon-box-ll {
       width: 44px;
       height: 44px;
       flex-basis: 44px;
       border-radius: 14px;
       font-size: 20px;
   }
   .about-card-content-ll h2 {
       font-size: 24px;
   }
   .about-card-content-ll h3 {
       font-size: 21px;
   }
   .about-card-content-ll p {
       font-size: 15px;
       line-height: 1.65;
   }
}
@media (max-width: 560px) {
   .about-hero-ll h1 {
       font-size: 36px;
   }
   .about-hero-ll p {
       font-size: 16px;
   }
   .about-ai-header-ll h2 {
       font-size: 28px;
   }
   .about-mission-card-ll,
   .about-step-card-ll {
       flex-direction: row;
       align-items: flex-start;
   }
}
@media (max-width: 640px) {
   .login-page {
       padding: 40px 16px;
       min-height: auto;
   }
   .login-card {
       padding: 24px 18px;
       border-radius: 20px;
   }
   .login-card h1 {
       font-size: 32px;
   }
   .login-subtext {
       font-size: 14px;
   }
}


@media (max-width: 900px){
   .checkbox-group{
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media (max-width: 700px){
   .checkbox-group{
       grid-template-columns: 1fr;
   }
   .search-header h2{
       font-size:28px;
   }
   .search-card{
       padding:20px;
   }
}
@media (max-width: 768px) {
 .hero {
   min-height: auto !important;
   border-radius: 24px !important;
 }
 .hero-overlay {
   min-height: auto !important;
   padding: 40px 20px !important;
 }
 .hero-content {
   padding: 0 !important;
   max-width: 100% !important;
 }
 .hero-content h1 {
   font-size: 32px !important;
   line-height: 1.2 !important;
 }
 .hero-content p {
   font-size: 16px !important;
 }
 .hero-actions {
   gap: 12px !important;
 }
 .hero-btn {
   min-width: auto !important;
   width: 100% !important;
   padding: 14px !important;
   font-size: 16px !important;
 }
}
@media (max-width: 768px) {
 .ai-search-section {
   padding: 32px 0 !important;
   margin: 48px 0 !important;
   border-radius: 28px !important;
   overflow: hidden !important;
 }
 .ai-search-shell {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 auto !important;
   padding: 24px 16px !important;
   box-sizing: border-box !important;
   align-items: stretch !important;
 }
 .search-header {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 0 18px 0 !important;
   padding: 20px 18px !important;
   box-sizing: border-box !important;
   border-radius: 24px !important;
 }
 .ai-search-card {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 .ai-search-card form {
   width: 100% !important;
   margin: 0 !important;
 }
 .ai-search-box {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   display: grid !important;
   grid-template-columns: 1fr !important;
   gap: 14px !important;
   box-sizing: border-box !important;
 }
 .ai-search-input {
   width: 100% !important;
   max-width: 100% !important;
   min-width: 0 !important;
   margin: 0 !important;
   box-sizing: border-box !important;
 }
 .ai-search-submit {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   box-sizing: border-box !important;
 }
 .toggle-filters-btn {
   margin-top: 14px !important;
 }
}
@media (max-width: 768px) {
 body {
   padding: 0 !important;
 }
 .navbar {
   padding: 16px 0 !important;
 }
 .nav-inner {
   max-width: 100% !important;
   padding: 0 16px !important;
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: wrap !important;
   align-items: center !important;
   justify-content: flex-start !important;
   gap: 12px !important;
 }
 .logo {
   font-size: 30px !important;
   margin-top: 0 !important;
   line-height: 1 !important;
   width: 100% !important;
 }
 .nav-links {
   width: 100% !important;
   margin-left: 0 !important;
   display: flex !important;
   justify-content: flex-start !important;
   align-items: center !important;
   gap: 12px !important;
   flex-wrap: wrap !important;
 }
 .nav-links a {
   font-size: 14px !important;
 }
 .login-btn {
   padding: 10px 14px !important;
   font-size: 14px !important;
 }
 .results-section {
   margin: 48px 0 80px 0 !important;
   padding: 0 16px !important;
   overflow-x: hidden !important;
 }
 .results-container {
   max-width: 100% !important;
   margin: 0 auto !important;
   padding: 0 !important;
   overflow-x: hidden !important;
 }
 .results-section .results-title,
 .results-title,
 .results-section h2 {
   font-size: 28px !important;
   line-height: 1.15 !important;
   margin: 0 0 20px 0 !important;
   padding: 0 !important;
   letter-spacing: 0 !important;
   text-align: left !important;
 }
 .showcase-wrapper {
   max-width: 100% !important;
   margin: 0 !important;
 }
 .showcase-board {
   overflow-x: auto !important;
   overflow-y: hidden !important;
   -webkit-overflow-scrolling: touch !important;
   touch-action: pan-x !important;
   padding: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   border-radius: 0 !important;
 }
 .showcase-board::-webkit-scrollbar {
   display: none !important;
 }
 .showcase-grid {
   display: flex !important;
   justify-content: flex-start !important;
   align-items: stretch !important;
   gap: 14px !important;
   width: max-content !important;
   min-width: max-content !important;
   padding: 0 16px 12px 16px !important;
 }
 .showcase-card,
 .showcase-card.side,
 .showcase-card.featured {
   width: 260px !important;
   min-width: 260px !important;
   max-width: 260px !important;
   transform: none !important;
   opacity: 1 !important;
 }
 .showcase-image-wrap img,
 .showcase-card.featured .showcase-image-wrap img {
   height: 190px !important;
 }
 .showcase-body {
   padding: 16px !important;
 }
 .showcase-body h3 {
   font-size: 16px !important;
   line-height: 1.25 !important;
 }
 .ai-insight {
   min-height: auto !important;
   font-size: 13px !important;
   line-height: 1.45 !important;
 }
 .home-info {
   font-size: 13px !important;
   line-height: 1.45 !important;
 }
 .details-button {
   display: inline-block !important;
   padding: 12px 20px !important;
   font-size: 14px !important;
   border-radius: 14px !important;
 }
 .showcase-arrow,
 .left-arrow,
 .right-arrow {
   display: none !important;
 }
}

@media (min-width: 769px) {
 .results-section {
   margin: 48px 0 120px;
   padding: 0 24px;
 }
 .results-container {
   max-width: 1320px;
   margin: 0 auto;
 }
 .results-title {
   font-size: 36px;
   font-weight: 700;
   color: #1f2f4a;
   margin: 0 0 32px 0;
 }
 .showcase-wrapper {
   position: relative;
   max-width: 1180px;
   margin: 0 auto;
 }
 .showcase-board {
   width: 100%;
   background: #ffffff;
   border-radius: 28px;
   padding: 36px 56px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
   overflow: hidden;
   box-sizing: border-box;
 }
 .showcase-grid {
   display: flex;
   justify-content: center;
   align-items: stretch;
   gap: 24px;
   width: 100%;
 }
 .showcase-card {
   width: 300px;
   min-width: 300px;
   max-width: 300px;
 }
 .showcase-card.featured {
   width: 340px;
   min-width: 340px;
   max-width: 340px;
 }
 .showcase-card.side {
   transform: scale(0.94);
   opacity: 0.95;
 }
 .showcase-card.featured {
   transform: scale(1.02);
   z-index: 2;
 }
 .showcase-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 46px;
   height: 46px;
   z-index: 30;
 }
 .left-arrow {
   left: -18px;
 }
 .right-arrow {
   right: -18px;
 }
}