/* Habluxe About Page */


/* ABOUT PAGE DESIGN V1 */

.about-page {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1rem;
    isolation:isolate;
}

.about-hero,
.about-panel {
    border:1px solid rgba(88,137,166,.72);
    border-radius:16px;
    background:
        linear-gradient(
            135deg,
            rgba(7,24,38,.86),
            rgba(10,31,48,.72)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 50px rgba(0,0,0,.28);
}

.about-hero {
    min-height:320px;
    display:flex;
    align-items:center;
    padding:2.5rem;
    overflow:hidden;
    position:relative;
}

.about-hero::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(3,14,24,.88),
            rgba(3,14,24,.35)
        );
    pointer-events:none;
}

.about-hero > div {
    position:relative;
    max-width:620px;
}

.about-hero span {
    color:#6fbbe1;
    font-size:.6rem;
    font-weight:900;
    letter-spacing:.12em;
}

.about-hero h1 {
    margin:.5rem 0;
    color:#fff;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:900;
}

.about-hero p {
    color:#b8c9d5;
    font-size:.9rem;
    line-height:1.7;
}

.about-panel {
    padding:1.5rem;
}

.about-panel h2 {
    margin:0 0 .6rem;
    color:#fff;
    font-size:1.2rem;
    font-weight:900;
}

.about-panel p {
    margin:0;
    color:#a8bcc9;
    line-height:1.7;
    font-size:.8rem;
}

.about-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.about-panel:hover {
    transform:translateY(-3px);
    border-color:rgba(111,187,225,.9);
}

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

 
.about-page {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem 0 3rem;
}

.about-hero,
.about-panel {
    border:1px solid rgba(88,137,166,.72);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(14,31,45,.92),
            rgba(5,16,28,.94)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 18px 40px rgba(0,0,0,.25);
}

.about-hero {
    min-height:260px;
    display:flex;
    align-items:center;
    padding:2rem 2.5rem;
}

.about-hero span,
.about-panel h2 {
    color:#6fbbe1;
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.about-hero h1 {
    margin:.5rem 0;
    color:#fff;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:900;
}

.about-hero p,
.about-panel p {
    color:#9db1c0;
    line-height:1.7;
    font-size:.9rem;
    font-weight:600;
}

.about-panel {
    padding:1.5rem;
}

.about-panel h2 {
    margin:0 0 .75rem;
    color:#fff;
    font-size:1.1rem;
}

.about-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

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

    .about-hero{
        padding:1.5rem;
    }
}


/* ABOUT HERONIGHT ATMOSPHERE V1 */

body:has(.about-page) .site-bg {
    background:
        linear-gradient(
            180deg,
            rgba(3,10,20,.34),
            rgba(3,10,20,.82)
        ),
        url("/assets/images/habluxe/cms/HeroNightUse.png")
        center top / cover fixed no-repeat !important;
}

body:has(.about-page) .site-content-inner {
    background:transparent !important;
}

.about-page {
    position:relative;
    width:100%;
    max-width:1000px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem 0 3rem;
}

.about-hero {
    position:relative;
    min-height:300px;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:2.5rem 3rem;
    border:1px solid rgba(88,137,166,.72);
    border-radius:18px;
    background:
        linear-gradient(
            110deg,
            rgba(3,14,24,.96),
            rgba(8,29,45,.82)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 22px 54px rgba(0,0,0,.32);
}

.about-hero::after {
    content:"";
    position:absolute;
    right:-120px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(49,157,207,.12);
    filter:blur(35px);
}

.about-hero > div {
    position:relative;
    z-index:1;
    max-width:650px;
}

.about-hero span {
    color:#6fbbe1;
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.08em;
}

.about-hero h1 {
    margin:.6rem 0;
    color:#fff;
    font-size:clamp(2.2rem,4vw,3.2rem);
    font-weight:900;
    line-height:1.05;
}

.about-hero p {
    color:#a9bfce;
    font-size:.95rem;
    line-height:1.7;
    font-weight:600;
}


/* HABLUXE ABOUT PAGE LAYOUT POLISH V1 */

.about-page {
    width: min(860px, calc(100% - 2rem));
    margin: 2rem auto 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-hero,
.about-panel {
    border: 1px solid rgba(80, 150, 190, .45);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(5, 20, 34, .88),
            rgba(8, 24, 40, .72)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 24px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
}

.about-hero {
    padding: 2rem 2.2rem;
    min-height: 180px;
    display: flex;
    align-items: center;
}

.about-hero span {
    color: #69c7f2;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-hero h1 {
    margin: .6rem 0 .8rem;
    color: #fff;
    font-size: clamp(2rem,4vw,3rem);
    line-height: 1.05;
    font-weight: 900;
}

.about-hero p {
    max-width: 620px;
    color: #a9c4d8;
    font-size: .85rem;
    line-height: 1.6;
    font-weight: 700;
}

.about-panel {
    padding: 1.25rem 1.4rem;
}

.about-panel h2 {
    margin: 0 0 .55rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.about-panel p {
    margin: 0;
    color: #a9c4d8;
    font-size: .78rem;
    line-height: 1.65;
    font-weight: 700;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1rem;
}

.about-grid .about-panel {
    min-height: 120px;
}

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

    .about-page {
        width: calc(100% - 1rem);
    }
}


/* HABLUXE ABOUT FINAL POLISH V1 */

.about-page {
    width: min(1040px, calc(100% - 2rem));
    margin: 2rem auto 5rem;
    gap: 1.15rem;
}

/* Stats row */

.about-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.about-stats > div {
    padding: .9rem 1rem;
    border: 1px solid rgba(80,150,190,.35);
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(12,32,48,.9),
            rgba(8,22,36,.75)
        );
}

.about-stats strong {
    display:block;
    color:#fff;
    font-size:1.1rem;
    font-weight:900;
}

.about-stats span {
    display:block;
    margin-top:.2rem;
    color:#79bde0;
    font-size:.62rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

/* Three feature cards */

.about-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.about-grid .about-panel {
    min-height:145px;
}

/* CTA */

.about-cta {
    padding:1.5rem;
    text-align:center;
    border:1px solid rgba(80,150,190,.45);
    border-radius:12px;
    background:
        linear-gradient(
            145deg,
            rgba(9,30,48,.9),
            rgba(5,18,32,.82)
        );
}

.about-cta h2 {
    margin:0 0 .5rem;
    color:#fff;
    font-size:1.15rem;
    font-weight:900;
}

.about-cta p {
    margin:0 auto 1rem;
    max-width:600px;
    color:#a9c4d8;
    font-size:.8rem;
    font-weight:700;
}

.about-cta a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.65rem 1.2rem;
    border-radius:6px;
    background:#4ac443;
    color:#fff;
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
    text-decoration:none;
}

/* Responsive */

@media(max-width:850px){
    .about-grid,
    .about-stats {
        grid-template-columns:1fr;
    }
}


/* Founder message polish */
.founder-message {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.founder-avatars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 50px;
    padding-top: 8px;
}

.founder-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.founder-avatar img {
    width: 120px;
    height: 160px;
    object-fit: contain;
    image-rendering: pixelated;
}

.founder-avatar strong {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: .5px;
}

.founder-content {
    text-align: center;
}

.founder-content h2 {
    margin-bottom: 14px;
}

.founder-content p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.founder-content span {
    display: block;
    margin-top: 14px;
    color: #8fd8ff;
    font-weight: 600;
}


/* Founder avatar presentation polish */
.founder-avatars {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    margin-bottom: 12px;
}

.founder-avatar {
    min-width: 150px;
}

.founder-avatar img {
    width: 150px;
    height: 190px;
}

.founder-avatar strong {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #ffffff;
}

.founder-content {
    max-width: 820px;
    margin: 0 auto;
}

.founder-content h2 {
    font-size: 1.4rem;
}