/* =========================================================
   /* ROMAN_ASSISTANT_TEST_2026 */
========================================================= */

:root{

    --bg:#06142d;
    --bg-light:#0b224d;

    --card:#0d2554;

    --primary:#2478ff;
    --primary-hover:#4b95ff;

    --gold:#ffc93d;

    --text:#ffffff;
    --muted:#a8b8d7;

    --radius:22px;

}

/* ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Segoe UI",sans-serif;

    color:var(--text);

    min-height:100vh;

    background:
            radial-gradient(circle at top,
            #1f5db8 0%,
            #0c2148 28%,
            #06142d 70%,
            #041126 100%);

    background-attachment:fixed;

}

/* ========================================================= */
/* NAVBAR */
/* ========================================================= */

.navbar{

    background:rgba(4,18,44,.78);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.navbar-brand{

    color:white!important;

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

}

.nav-link{

    color:#d7e3ff!important;

    margin-left:18px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--gold)!important;

}

.settings-card{
    max-width:720px;
    margin:0 auto;
}

.settings-form .form-control{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:var(--text);
}

.settings-form .form-control:focus{
    background:rgba(255,255,255,.12);
    border-color:var(--primary-hover);
    box-shadow:0 0 0 .25rem rgba(75,149,255,.22);
    color:var(--text);
}

.settings-form .form-control-color{
    width:64px;
    height:48px;
    padding:6px;
}

.color-text-input{
    max-width:180px;
}

.color-presets{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.color-preset{
    width:38px;
    height:38px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.72);
    background:var(--preset);
    box-shadow:0 8px 20px rgba(0,0,0,.22);
    cursor:pointer;
}

/* ========================= */
/* HERO */
/* ========================= */

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    padding-bottom:220px;

    overflow:visible;

    background:
        linear-gradient(
            rgba(4,18,44,.18),
            rgba(4,18,44,.50)
        ),
        url("../images/backgrounds/hero.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle,
        transparent 0%,
        rgba(0,0,0,.12) 65%,
        rgba(0,0,0,.35) 100%);

}


.hero-link{

    position:absolute;

    top:40px;

    right:50px;

    z-index:100;

    color:rgba(255,255,255,.75);

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.3s;

}

.hero-link:hover{

    color:#ffc93d;

    transform:translateX(4px);

}

.hero-center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:min(900px,92%);

    text-align:center;

    z-index:10;

}


.hero-logo{

    width:180px;

    margin-bottom:25px;

    filter:drop-shadow(0 0 30px #4b95ff);

}


.hero h1{

    font-size:82px;

    font-weight:800;

    line-height:1;

    color:white;

    margin-bottom:18px;

}


.hero-subtitle{

    font-size:34px;

    color:#dbe8ff;

    margin-bottom:18px;

}

.hero-info{

    font-size:22px;

    color:#ffc93d;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



/* ========================================================= */
/* BUTTON */
/* ========================================================= */

.btn-primary{

    background:
            linear-gradient(
            135deg,
            #2074ff,
            #3a8cff);

    border:none;

    border-radius:18px;

    padding:16px 45px;

    font-size:20px;

    font-weight:600;

    transition:.35s;

    box-shadow:
            0 0 30px rgba(32,116,255,.35);

}

.btn-primary:hover{

    background:
            linear-gradient(
            135deg,
            #3a8cff,
            #5aa6ff);

    transform:translateY(-3px);

    box-shadow:
            0 0 40px rgba(40,130,255,.55);

}

.btn-outline-light{

    background: rgba(255,255,255,.06);

    color: rgba(255,255,255,.75) !important;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 18px;

    padding: 16px 42px;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    transition: .3s;

}

.btn-outline-light:hover{

    background: rgba(255,255,255,.12);

    color: #fff !important;

    border-color: rgba(255,255,255,.35);

}

.note-form .form-label{

    color: rgba(255,255,255,.82);

    font-weight: 600;

}

.note-form .form-control,
.note-form .form-select{

    background: rgba(255,255,255,.08);

    color: #fff;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 12px;

    padding: 12px 14px;

}

.note-form .form-control:focus,
.note-form .form-select:focus{

    background: rgba(255,255,255,.12);

    color: #fff;

    border-color: rgba(75,149,255,.8);

    box-shadow: 0 0 0 .25rem rgba(36,120,255,.18);

}

.note-form .form-select option{

    color: #111;

}

@media (max-width: 576px){

    .hero-link{
        display:none;
    }

    body{
        background:#06142d;
        background-attachment:scroll;
    }

    .navbar{
        padding:10px 0;
    }

    .navbar .container{
        gap:10px;
    }

    .navbar-brand img{
        width:42px;
        margin-right:10px !important;
    }

    .navbar-brand span{
        font-size:18px !important;
    }

    .navbar .btn{
        width:auto;
        padding:10px 14px;
        border-radius:12px;
        font-size:15px;
    }

    .hero{
        min-height:100svh;
        padding:0;
        overflow:hidden;
        background-position:center center;
    }

    .hero-overlay{
        background:rgba(4,18,44,.62);
    }

    .hero-center{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        width:100%;
        padding:0 18px;
    }

    .hero-logo{
        width:88px;
        margin-bottom:14px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.08;
        margin-bottom:10px;
    }

    .hero-subtitle{
        font-size:18px;
        margin-bottom:8px;
    }

    .hero-info{
        font-size:15px;
        margin-bottom:20px;
    }

    .hero-buttons{
        display:none;
    }

    .btn-primary{
        width:100%;
        padding:13px 18px;
        border-radius:12px;
        font-size:17px;
    }

    .features{
        margin-top:-210px;
        padding:0 0 8px;
    }

    .container > .d-flex{

        align-items: center !important;

        flex-direction: row;

        gap: 12px;

    }

}

.reminder-control{
    position:relative;
}

.reminder-input{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    border:0;
    opacity:0;
    pointer-events:none;
}

.reminder-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:180px;
    max-width:100%;
    padding:13px 24px;
    color:#fff;
    font-weight:600;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(75,149,255,.8);
    border-radius:14px;
    box-shadow:0 0 0 .2rem rgba(36,120,255,.12);
    transition:.2s ease;
}

.reminder-button:hover,
.reminder-button:focus-visible{
    color:#fff;
    background:rgba(75,149,255,.2);
    border-color:#4b95ff;
    box-shadow:0 0 0 .25rem rgba(36,120,255,.18);
}

@media (max-width: 820px) and (pointer: coarse){

    body{
        background:#06142d;
        background-attachment:scroll;
    }

    .navbar{
        padding:12px 0;
    }

    .navbar .container{
        gap:12px;
    }

    .navbar-brand img{
        width:46px;
        margin-right:10px !important;
    }

    .navbar-brand span{
        font-size:20px !important;
    }

    .navbar .btn{
        padding:10px 16px;
        border-radius:12px;
        font-size:15px;
    }

    .hero{
        min-height:100svh;
        padding:0;
        overflow:hidden;
        background-position:center center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                rgba(4,18,44,.46),
                rgba(4,18,44,.76)
            );
    }

    .hero-center{
        position:absolute;
        top:38%;
        left:50%;
        transform:translate(-50%,-50%);
        width:100%;
        padding:0 18px;
    }

    .hero-logo{
        width:104px;
        margin-bottom:16px;
    }

    .hero h1{
        font-size:40px;
        line-height:1.05;
        margin-bottom:10px;
    }

    .hero-subtitle{
        font-size:20px;
        margin-bottom:8px;
    }

    .hero-info{
        font-size:16px;
        margin-bottom:22px;
    }

    .hero-buttons{
        display:none;
    }

    .features{
        margin-top:-230px;
        padding:0 0 8px;
    }

    #features .row{
        --bs-gutter-x:14px;
        --bs-gutter-y:14px;
    }

    #features .feature-card{
        padding:24px 18px;
        min-height:172px;
        border-radius:18px;
        background:rgba(8,31,72,.76);
        box-shadow:0 12px 28px rgba(0,0,0,.28);
    }

    #features .feature-card:hover{
        transform:none;
    }

    #features .feature-card h2{
        font-size:42px;
        margin-bottom:12px;
    }

    #features .feature-card h4{
        font-size:23px;
        margin-bottom:8px;
    }

    #features .feature-card p{
        font-size:16px;
        margin-bottom:0;
    }

    .legal-card,
    .note-form,
    .settings-card{
        padding:24px 18px;
        border-radius:16px;
    }

    footer{
        margin-top:36px;
        padding:24px 14px;
        font-size:14px;
    }

}

@media (max-width: 576px) and (pointer: coarse){

    .navbar .container > .d-flex{
        width:auto;
        flex-direction:row;
        align-items:center;
    }

    .navbar .btn{
        width:auto;
    }

    .hero h1{
        font-size:34px;
    }

    .hero-logo{
        width:88px;
    }

    #features .feature-card{
        display:flex;
        align-items:center;
        gap:14px;
        min-height:118px;
        text-align:left;
    }

    #features .feature-card h2{
        width:38px;
        flex:0 0 38px;
        font-size:32px;
        margin-bottom:0;
        text-align:center;
    }

    #features .feature-card h4{
        font-size:18px;
        margin-bottom:3px;
    }

}

/* ========================================================= */
/* CARDS */
/* ========================================================= */

.feature-card{

    background: rgba(13,37,84,.35);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 24px;

    padding: 40px 25px;

    text-align: center;

    height: 100%;

    transition: .35s;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

}

.feature-card:hover{

    background: rgba(13,37,84,.35);

    transform: translateY(-10px);

    border-color: rgba(80,160,255,.7);

    box-shadow:
        0 25px 60px rgba(36,120,255,.35);

}

.feature-card h2{

    font-size:52px;

    margin-bottom:18px;

}

.feature-card h4{

    font-size:24px;

    margin-bottom:12px;

}

.feature-card p{

    color:var(--muted);

}

/* ========================================================= */

footer{

    margin-top:80px;

    padding:35px;

    text-align:center;

    color:#8fa8d5;

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(4,18,44,.65);

}

footer a{

    color:#d7e3ff;

    text-decoration:none;

}

footer a:hover{

    color:var(--gold);

}

.legal-card{

    background: rgba(13,37,84,.35);

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 24px;

    padding: 42px;

    box-shadow: 0 15px 40px rgba(0,0,0,.35);

}

.legal-card h1{

    margin-bottom: 24px;

}

.legal-card h2{

    margin-top: 28px;

    margin-bottom: 12px;

    font-size: 24px;

}

.legal-card p{

    color: rgba(255,255,255,.78);

    line-height: 1.7;

}

.legal-note{

    margin-top: 32px;

    color: var(--gold) !important;

}

.ai-chat-card{
    text-align:left;
}

.ai-chat-history{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ai-message{
    max-width:82%;
    padding:16px 18px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
}

.ai-message-user{
    align-self:flex-end;
    background:rgba(36,120,255,.22);
    border-color:rgba(75,149,255,.38);
}

.ai-message-assistant{
    align-self:flex-start;
}

.ai-message-role{
    margin-bottom:8px;
    color:var(--gold);
    font-size:14px;
    font-weight:700;
}

.ai-message-content{
    color:rgba(255,255,255,.86);
    line-height:1.6;
}

.ai-empty{
    text-align:center;
}

.ai-empty p{
    margin-bottom:0;
    color:var(--muted);
}

.ai-form{
    text-align:left;
}

.ai-thinking{
    display:none;
    color:var(--gold);
    font-weight:700;
    text-align:right;
}

.ai-thinking.is-visible{
    display:block;
}


/* ================= FEATURES ================= */

.features{

    position:relative;

    margin-top:-390px;

    z-index:120;

}

.feature-card{

    cursor:pointer;

}

.text-decoration-none{

    text-decoration:none;

    color:inherit;

}

.text-decoration-none:hover{

    color:inherit;

}

@media (max-width: 576px){

    .features{
        margin-top:-210px;
        padding:0 0 8px;
    }

    #features .feature-card{
        display:flex;
        align-items:center;
        gap:14px;
        padding:22px 18px;
        min-height:118px;
        text-align:left;
        border-radius:18px;
    }

    #features .feature-card h2{
        width:38px;
        flex:0 0 38px;
        font-size:32px;
        margin-bottom:0;
        text-align:center;
    }

    #features .feature-card h4{
        font-size:21px;
        margin-bottom:5px;
    }

    #features .feature-card p{
        margin-bottom:0;
        font-size:15px;
    }

    .feature-card{
        border-radius:18px;
        box-shadow:0 8px 22px rgba(0,0,0,.28);
    }

    .feature-card:hover{
        transform:none;
    }

    .legal-card,
    .note-form,
    .settings-card{
        padding:22px 18px;
        border-radius:14px;
    }

    footer{
        margin-top:32px;
        padding:24px 14px;
        font-size:14px;
    }

    .ai-message{
        max-width:100%;
    }

    .ai-form .btn{
        width:100%;
    }

}

@media (max-width: 820px) and (pointer: coarse){

    .hero{
        min-height:100svh;
        padding:0;
        background-position:center center;
    }

    .hero-center{
        position:absolute;
        top:38%;
        left:50%;
        transform:translate(-50%,-50%);
    }

    .hero-buttons{
        display:none;
    }

    .features{
        margin-top:-230px;
        padding:0 0 8px;
    }

    #features .feature-card{
        padding:24px 18px;
        min-height:172px;
        border-radius:18px;
        background:rgba(8,31,72,.76);
    }

    #features .feature-card h2{
        font-size:42px;
        margin-bottom:12px;
    }

    #features .feature-card h4{
        font-size:23px;
        margin-bottom:8px;
    }

    #features .feature-card p{
        font-size:16px;
    }

}

@media (max-width: 576px) and (pointer: coarse){

    .features{
        margin-top:-210px;
    }

    #features .feature-card{
        display:flex;
        align-items:center;
        gap:14px;
        min-height:118px;
        text-align:left;
    }

    #features .feature-card h2{
        width:38px;
        flex:0 0 38px;
        font-size:32px;
        margin-bottom:0;
        text-align:center;
    }

}

.item-card-layout{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
}

.item-card-content{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:100%;
}

.item-card-content h3,
.item-card-content p{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.item-card-actions{
    display:flex;
    flex:0 0 auto;
    gap:8px;
    justify-content:flex-end;
}

@media (max-width: 576px){
    .item-card-layout{
        flex-direction:column;
        align-items:stretch;
    }

    .item-card-actions{
        justify-content:center;
        flex-wrap:wrap;
    }
}

.feature-card{
    max-width:100%;
    overflow:hidden;
}

.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card h4,
.feature-card p,
.feature-card .text-secondary{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
}

.feature-card h3{
    line-height:1.25;
}

.card-text-wrap{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere !important;
    word-wrap:break-word !important;
    word-break:break-all !important;
    white-space:normal !important;
}