:root{
    --bg:#0e0e0f;                 /* deep charcoal */
    --card:#181818e6;             /* dark steel */
    --text:#f5f5f5;               /* clean light text */
    --muted:#b0b0b0;              /* soft grey */

    --accent:#ff6a00;             /* main orange */
    --accent2:#ff9f1c;            /* lighter amber */

    --good:#ff6a00;               /* reuse orange glow */
    --warn:#ff9f1c;               /* highlight amber */

    --shadow: 0 25px 70px rgba(0,0,0,.6);
    --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui;
    background:
            radial-gradient(circle at 20% 20%, rgba(255,106,0,.08), transparent 40%),
            radial-gradient(circle at 80% 30%, rgba(255,159,28,.06), transparent 40%),
            linear-gradient(180deg, #0e0e0f 0%, #141414 100%);
    color:var(--text);
}
.gallery-section{
    margin-top: 40px;
    padding: 0 18px 20px;
}

.gallery-title{
    margin: 0 0 16px;
    font-size: 22px;
    letter-spacing: .4px;
    color: var(--text);
}

.gallery-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* always 3 across on desktop */
    gap: 14px;
}


.gallery-card{
    background: rgba(24,24,24,.75);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.14);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gallery-card img{
    width: 100%;
    height: 200px;
    object-fit: cover ;
    display: block;
}

.gallery-card:hover{
    transform: translateY(-4px);
    border-color: rgba(255,106,0,.7);
    box-shadow: 0 0 25px rgba(255,106,0,.35);
}

/* Mobile tweak */
@media (max-width: 600px){
    .gallery-card img{
        height: 160px;
    }
}


.feature-list .chip:hover {
    border-color: rgba(255,106,0,.7);
    box-shadow: 0 0 18px rgba(255,106,0,.4);
    transform: translateY(-2px);
}


body:before{
    content:"";
    position:fixed; inset:0;
    background-image:
            linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 35%, transparent 70%);
    pointer-events:none;
    opacity:.35;
}
.wrap{
    width:min(1100px, calc(100% - 40px));
    margin:0 auto;
    padding: 42px 0 70px;
    position:relative;
}
header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding: 18px 18px 0;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--text);
    min-width: 230px;
}
.logo__image{
    width:140px;height:140px;border-radius:12px;

}
.brand b{font-size: 30px;letter-spacing:.25px;}
.brand span{display:block;font-size:18px;color:var(--muted);margin-top:2px;}
nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.pill, .pill-reverse{
    display:inline-flex; align-items:center; gap:8px;
    padding: 10px 12px; border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: #e87301;
    color: #070a10;
    text-decoration:none; font-size: 13px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    font-weight: bold;
}



.pill:hover , .pill-reverse:hover{
    transform: translateY(-1px);
    border-color: rgba(102,227,255,.35);
    font-weight: bolder;
}

.hero{
    margin-top: 22px;
    padding: 26px 18px 0;
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:18px;
    align-items:stretch;
}
.card{
    background: var(--card);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    overflow:hidden;
    position:relative;
}
.hero .left{ padding: 28px; }
.kicker{
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 12px; border-radius: 999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.18);
    color: var(--muted); font-size: 12px;
}
.dot{
    width:8px;height:8px;border-radius:999px;
    background: var(--good);
    box-shadow: 0 0 0 6px rgba(34,197,94,.12);
}
h1{
    font-size: clamp(34px, 4.3vw, 54px);
    line-height: 1.02;
    margin: 16px 0 10px;
    letter-spacing: -0.8px;
}
.sub{
    color: var(--muted);
    font-size: 15.5px;
    line-height:1.55;
    margin: 0 0 18px;
    max-width: 62ch;
}
.ctaRow{display:flex;gap:12px;flex-wrap:wrap;margin-top: 18px;}
.btn{
    border:none; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding: 12px 14px; border-radius: 14px;
    font-weight: 650; letter-spacing:.2px; font-size: 14px;
    transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
    user-select:none; white-space:nowrap;
}
.btn.primary{
    background: linear-gradient(135deg, #5865f2, #ff9f1c);
    color:#111;
    box-shadow: 0 12px 30px rgba(255,106,0,.35);
}

.btn.primary:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn.ghost{
    background: rgba(12,18,32,.45);
    border:1px solid rgba(255,255,255,.16);
    color: var(--text);
}
.btn.ghost:hover{
    transform: translateY(-1px);
    border-color: rgba(102,227,255,.35);
    background: rgba(12,18,32,.7);
}
.meta{
    margin-top: 18px;
    display:flex; gap: 12px; flex-wrap:wrap;
    color: var(--muted); font-size: 12.5px;
}
.meta .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 10px; border-radius: 999px;
    border:2px solid rgba(255,255,255,.14);
    background: #e87301;
    color: #070a10;
    font-weight: bold;


}

.hero .right{display:flex;flex-direction:column;gap: 12px;padding: 16px;}
.feature{
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(12,18,32,.55);
    padding: 14px 14px;
    display:flex; gap: 12px; align-items:flex-start;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
    position:relative; overflow:hidden;
}
.feature:hover{
    transform: translateY(-1px);
    border-color: rgba(102,227,255,.35);
    background: rgba(12,18,32,.75);
}
.badge{
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 14px;
    display:grid; place-items:center;
    background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
            linear-gradient(135deg, rgba(102,227,255,.35), rgba(167,139,250,.25));
    border:1px solid rgba(255,255,255,.14);
}
.feature b{display:block;font-size: 13.5px;margin-bottom: 3px;letter-spacing:.2px;}
.feature p{margin:0;color: var(--muted);font-size: 13px;line-height:1.45;}
.soon{
    position:absolute; top: 10px; right: 10px;
    font-size: 11px; padding: 6px 9px; border-radius: 999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.18);
    color: var(--warn);
}

section{margin-top: 18px;padding: 0 18px;}
.grid{display:grid;grid-template-columns: repeat(3, 1fr);gap: 12px;}
.mini{
    padding: 16px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(24,24,24,.70); /* matches the new dark steel vibe */
    min-height: 120px;
    position:relative;
    overflow:hidden;
}
.mini:before{
    content:"";
    position:absolute; inset:-40px -60px auto auto;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255,106,0,.14), transparent 60%);
    transform: rotate(18deg);
    pointer-events:none;
}

.mini h3{margin:0 0 6px;font-size: 14px;letter-spacing:.2px;}
.mini p{margin:0;color: var(--muted);font-size: 13px;line-height:1.45;}
.sectionTitle{
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing:.25px;
    color: var(--muted);
    text-transform: uppercase;
}

footer{
    margin-top: 18px;
    padding: 0 18px;
    color: var(--muted);
    font-size: 12.5px;
    display:flex; align-items:center; justify-content:space-between;
    gap: 12px; flex-wrap:wrap;
    opacity:.9;
}
.pill:hover,
.feature:hover,
.btn.ghost:hover{
    border-color: rgba(255,106,0,.45);
}

footer a{ color: var(--text); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25) }
footer a:hover{ border-bottom-color: rgba(102,227,255,.55) }

@media (max-width: 920px){
    .hero{ grid-template-columns: 1fr; }
    header{ padding-left: 6px; padding-right: 6px; }
    .hero, section, footer{ padding-left: 6px; padding-right: 6px; }
    .hero .left{ padding: 22px; }
    .grid{ grid-template-columns: 1fr; }
}
#featureDesc{
    color: var(--muted);
}