*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Arial,sans-serif;
}

body{
    background:#111827;
    color:white;
}

/* ==========================
Navigation
========================== */

nav{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 8%;

    background:#0f172a;

    border-bottom:1px solid #1f2937;

}

.logo{

    font-size:30px;
    font-weight:bold;

    color:#38bdf8;

}

nav ul{

    display:flex;
    list-style:none;
    gap:30px;

}

nav a{

    color:white;
    text-decoration:none;
    transition:.3s;

}

nav a:hover{

    color:#38bdf8;

}

/* ==========================
Hero
========================== */


.hero{

    width:90%;

    margin:50px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.hero-left{

    flex:1;

}

.highlight{
    color:#38bdf8;
}

.hero-left h1{

    font-size:56px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:20px;

}

.hero-left p{

    color:#cbd5e1;
    font-size:20px;
    line-height:1.7;
    max-width:600px;

}

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.install-preview{

    width:340px;

    background:#1e293b;

    border:1px solid #334155;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.install-preview h3{

    margin-bottom:20px;

    color:#38bdf8;

}

.step{

    padding:10px 0;

    font-size:17px;

}

.step.done{

    color:#22c55e;

}

.step.active{

    color:#facc15;

    font-weight:bold;

}

.progress{

    width:100%;

    height:10px;

    background:#334155;

    border-radius:20px;

    margin:20px 0;

    overflow:hidden;

}

.progress-bar{

    width:70%;

    height:100%;

    background:#38bdf8;

    border-radius:20px;

}

.status{

    text-align:center;

    color:#cbd5e1;

    font-size:15px;

}



/* ==========================
Search
========================== */

.search-box{

    width:90%;

    margin:auto;

    margin-bottom:40px;

}

.search-box input{

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    font-size:18px;

    outline:none;

}

/* ==========================
Categories
========================== */

.category{
    margin:0;
    padding:0 15px;
}

.category h2{
    margin-bottom:10px;
    color:#38bdf8;
    font-size:18px;
    border-bottom:1px solid #334155;
    padding-bottom:6px;
}

/* ==========================
Grid
========================== */

.app-grid{

    display:flex;

    flex-direction:column;

    gap:4px;

}



/* ==========================
Cards
========================== */

.card{

    display:flex;

    align-items:center;

    gap:8px;

    padding:4px 0;

    background:none;

    border:none;

    box-shadow:none;

    border-radius:0;

    cursor:pointer;

    font-size:15px;

}

.card:hover{

    background:#334155;

    transform:translateY(-4px);

}

.card input{

    width:18px;

    height:18px;

}

/* ==========================
Download Button
========================== */

.download-bar{

    text-align:center;

    margin:70px;

}

.download-area button{

    padding:18px 45px;

    border:none;

    border-radius:12px;

    background:#38bdf8;

    color:black;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.download-area button:hover{

    background:#0ea5e9;

}

/* ==========================
Responsive
========================== */

@media(max-width:768px){

.hero h1{

font-size:34px;

}

nav{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

}

}

.download-btn{

width:320px;

height:60px;

font-size:20px;

font-weight:bold;

border:none;

border-radius:12px;

background:#2563eb;

color:white;

cursor:pointer;

transition:.3s;

}

.download-btn:hover{

background:#1d4ed8;

transform:scale(1.04);

}

.card span{

font-size:17px;

font-weight:600;

}

.card{

min-height:65px;

}

/* Category Header */

.category-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;

}

.select-btn{

background:#1e40af;

color:white;

border:none;

padding:8px 18px;

border-radius:8px;

cursor:pointer;

font-weight:bold;

transition:.3s;

}

.select-btn:hover{

background:#2563eb;

}
.app-icon{

font-size:24px;

margin-right:8px;

}
.download-btn:disabled{

    background:#555;
    cursor:not-allowed;
    opacity:.6;

}
/* ==========================
Popular Apps
========================== */

.popular-apps{

    width:90%;

    margin:20px auto 40px;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

}

.popular-title{

    font-size:18px;

    font-weight:bold;

    color:#facc15;

    margin-right:10px;

}

.quick-app{

    background:#1e293b;

    color:white;

    border:1px solid #334155;

    border-radius:30px;

    padding:10px 18px;

    cursor:pointer;

    transition:.3s;

    font-size:15px;

}

.quick-app:hover{

    background:#2563eb;

    border-color:#38bdf8;

}
/* ==========================
SVG App Logos
========================== */

.app-icon img{

    width:26px;

    height:26px;

    object-fit:contain;

    vertical-align:middle;

}

.app-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

}
/* ==========================
Footer
========================== */

footer{

    margin-top:80px;

    background:#0f172a;

    padding:50px 20px;

    text-align:center;

    border-top:1px solid #334155;

}

.footer-logo{

    font-size:32px;

    font-weight:bold;

    color:#38bdf8;

    margin-bottom:15px;

}

footer p{

    color:#94a3b8;

    margin:10px 0;

}

.footer-links{

    margin:25px 0;

}

.footer-links a{

    color:white;

    text-decoration:none;

    margin:0 15px;

    transition:.3s;

}

.footer-links a:hover{

    color:#38bdf8;

}

.copyright{

    font-size:14px;

    color:#64748b;

}


.app-grid{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.app-row{
    display:flex;
    align-items:center;
    gap:8px;

    padding:2px 0;

    border:none;
    background:none;
    border-radius:0;

    font-size:14px;
    cursor:pointer;
}

.app-row input{
    margin:0;
}

.app-icon img{
    width:20px;
    height:20px;
}

.app-name{
    white-space:nowrap;
}

.category h2{
    font-size:18px;
    margin-bottom:10px;
}
.categories-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

@media(max-width:1000px){
    .categories-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){
    .categories-grid{
        grid-template-columns:1fr;
    }
}
.categories-grid{

    display:grid;

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

    gap:30px;

    align-items:start;

}
/* ===== Kaluno Compact Layout ===== */

.categories-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(180px,1fr));
    gap:20px;
    align-items:start;
}

.category{
    padding:0;
    margin:0;
}

.category h2{
    font-size:18px;
    color:#38bdf8;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid #334155;
}

.app-grid{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.app-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 0;
    font-size:14px;
    cursor:pointer;
}

.app-row input{
    width:16px;
    height:16px;
}

.app-icon img{
    width:20px;
    height:20px;
}

.app-name{
    white-space:nowrap;
}

@media(max-width:1200px){
    .categories-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:900px){
    .categories-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .categories-grid{
        grid-template-columns:1fr;
    }
}

.download-bar{

    position:sticky;

    bottom:20px;

    display:flex;

    justify-content:center;

    z-index:100;

    margin:40px 0;

}

#downloadBtn{

    padding:18px 45px;

    font-size:22px;

    font-weight:700;

    border:none;

    border-radius:16px;

    cursor:pointer;

    color:white;

    background:linear-gradient(90deg,#0ea5e9,#2563eb);

    box-shadow:0 10px 30px rgba(37,99,235,.35);

    transition:.25s;

}

#downloadBtn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 40px rgba(37,99,235,.45);

}

#downloadBtn:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

}
.hero-actions {
    margin: 24px 0;
}

.update-form {
    margin: 0;
}

.update-btn {
    border: none;
    border-radius: 12px;
    padding: 14px 22px;
    background: #111827;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.update-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.update-btn:active {
    transform: translateY(0);
}
/* ==========================
Why Choose Kaluno
========================== */

.why-kaluno-section {
    width: 90%;
    margin: 100px auto 30px;
}

.why-kaluno-heading {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}

.why-kaluno-heading h2 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 38px;
}

.why-kaluno-heading p {
    color: #94a3b8;
    font-size: 17px;
    line-height: 1.7;
}

.why-kaluno-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-kaluno-card {
    padding: 25px 22px;
    border: 1px solid #334155;
    border-radius: 16px;
    background: #1e293b;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.why-kaluno-card:hover {
    border-color: #38bdf8;
    transform: translateY(-5px);
}

.why-kaluno-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.12);
    font-size: 24px;
}

.why-kaluno-card h3 {
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 19px;
}

.why-kaluno-card p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 1000px) {
    .why-kaluno-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .why-kaluno-section {
        width: 92%;
        margin-top: 75px;
    }

    .why-kaluno-heading h2 {
        font-size: 30px;
    }

    .why-kaluno-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================
FAQ Section
========================== */

.faq-section {
    width: 90%;
    max-width: 900px;
    margin: 100px auto 40px;
}

.faq-heading {
    max-width: 700px;
    margin: 0 auto 35px;
    text-align: center;
}

.faq-heading h2 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 38px;
}

.faq-heading p {
    color: #94a3b8;
    font-size: 17px;
    line-height: 1.7;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #1e293b;
}

.faq-item summary {
    position: relative;
    padding: 18px 55px 18px 20px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    color: #38bdf8;
    font-size: 24px;
    transform: translateY(-50%);
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item[open] summary {
    border-bottom: 1px solid #334155;
}

.faq-item p {
    padding: 16px 20px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .faq-section {
        width: 92%;
        margin-top: 75px;
    }

    .faq-heading h2 {
        font-size: 30px;
    }

    .faq-item summary {
        font-size: 15px;
    }
}
.hero-badge{

display:inline-block;

padding:8px 16px;

margin-bottom:20px;

background:#1e293b;

border:1px solid #38bdf8;

border-radius:30px;

color:#38bdf8;

font-size:14px;

font-weight:700;

}

.founder-photo{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:16px;
    display:block;
    margin:auto;
}

/* ==========================
Kaluno Hero Highlights
Replaces the old Popular Apps strip
========================== */

.kaluno-highlights{
    width:100%;
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:12px 14px;
    background:#1e293b;
    border:1px solid #334155;
    border-radius:14px;
    transition:.25s;
}

.highlight-item:hover{
    border-color:#38bdf8;
    transform:translateY(-2px);
}

.highlight-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    background:#223b55;
    border-radius:10px;
    font-size:18px;
}

.highlight-item strong{
    display:block;
    color:white;
    font-size:13px;
    line-height:1.3;
}

.highlight-item small{
    display:block;
    margin-top:2px;
    color:#94a3b8;
    font-size:10px;
    line-height:1.3;
}

@media(max-width:1000px){
    .kaluno-highlights{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .kaluno-highlights{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   Targeted Update Installed Apps + Hero Install Demo
   Only for the requested two UI changes.
   ========================================================= */

/* Update Installed Apps */
.hero-actions {
    margin: 24px 0;
}

.update-form {
    margin: 0;
}

.update-btn {
    width: min(640px, 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #162238;
    border: 1px solid #34506f;
    border-radius: 16px;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: .22s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.update-btn:hover {
    transform: translateY(-2px);
    border-color: #38bdf8;
    background: #1a2a43;
    box-shadow: 0 12px 28px rgba(56,189,248,.12);
}

.update-btn:active {
    transform: translateY(0);
}

.update-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(56,189,248,.12);
    border: 1px solid rgba(56,189,248,.28);
    font-size: 20px;
    animation: updateIconPulse 2.2s ease-in-out infinite;
}

.update-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.update-content strong {
    font-size: 16px;
    line-height: 1.25;
}

.update-content small {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.45;
}

.update-arrow {
    flex: 0 0 auto;
    color: #38bdf8;
    font-size: 24px;
    font-weight: 700;
    transition: transform .22s ease;
}

.update-btn:hover .update-arrow {
    transform: translateX(5px);
}

/* Hero right-side visual installer demo */
.install-demo {
    width: 360px;
    padding: 22px;
    background: #172033;
    border: 1px solid #334155;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

.demo-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.demo-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38bdf8;
    animation: demoDotPulse 1.4s ease-in-out infinite;
}

.demo-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 13px;
}

.demo-step.active {
    border-color: rgba(56,189,248,.45);
}

.demo-step-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(56,189,248,.12);
    font-size: 19px;
}

.demo-step-icon.run {
    background: rgba(250,204,21,.12);
    color: #facc15;
}

.demo-step-icon.install {
    background: rgba(34,197,94,.12);
    color: #22c55e;
}

.demo-step-content {
    min-width: 0;
    flex: 1;
}

.demo-step-content strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
}

.demo-step-content small {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
}

.demo-progress {
    height: 7px;
    margin-top: 10px;
    background: #0f172a;
    border-radius: 20px;
    overflow: hidden;
}

.demo-progress-bar {
    width: 72%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #0ea5e9, #38bdf8, #60a5fa);
    animation: demoDownload 2.2s ease-in-out infinite;
}

.demo-progress-text {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 10px;
}

.demo-percent {
    color: #38bdf8;
    font-weight: 700;
}

.demo-connector {
    display: flex;
    justify-content: center;
    padding: 6px 0;
    color: #38bdf8;
    font-size: 20px;
    font-weight: 700;
    animation: demoArrowBounce 1.35s ease-in-out infinite;
}

.demo-app-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 7px;
    color: #cbd5e1;
    font-size: 10px;
}

.demo-app-loading {
    color: #facc15;
}

@keyframes updateIconPulse {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(8deg) scale(1.05);
    }
}

@keyframes demoDotPulse {
    0%, 100% {
        transform: scale(.8);
        opacity: .45;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

@keyframes demoDownload {
    0% {
        width: 22%;
    }
    55% {
        width: 84%;
    }
    100% {
        width: 72%;
    }
}

@keyframes demoArrowBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: .55;
    }
    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .install-demo {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 600px) {
    .update-btn {
        padding: 13px 14px;
    }

    .update-content strong {
        font-size: 14px;
    }

    .update-content small {
        font-size: 10px;
    }

    .update-arrow {
        font-size: 20px;
    }

    .install-demo {
        max-width: 100%;
    }
}