/* ==========================================================================
   Components
   --------------------------------------------------------------------------
   Reusable UI elements used across multiple pages: buttons, glass cards,
   badges, section headings, surface/mesh backdrops, the carousel widget,
   the site header/navigation, and the site footer. Page-specific sections
   (contact copy, screenshot gallery, platform grid, etc.) belong in
   pages.css instead — see that file. Responsive overrides for the classes
   below live in responsive.css.
   ========================================================================== */

/* ===========================
   Buttons
   =========================== */

.button{

    display:inline-block;

    padding:.85rem 1.6rem;

    border-radius:var(--radius-sm);

    font-weight:600;

    transition:var(--transition);

    border:1px solid transparent;
}

.button.primary{
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 100%);
    color:var(--ink);
    box-shadow:var(--shadow-gold);
}

.button.primary:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 40px rgba(192,144,96,.38);
}

/* Secondary button — outlined, for use on dark grounds */
.button.ghost{
    background:rgba(255,255,255,.06);
    color:var(--text-on-dark);
    border-color:var(--border-on-dark);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
}

.button.ghost:hover{
    border-color:var(--glass-border-gold);
    background:rgba(255,255,255,.1);
}

/* ===========================
   Glass card
   =========================== */

.card{

    background:var(--glass-bg);

    border:1px solid var(--glass-border);

    border-radius:var(--radius-md);

    padding:1.75rem;

    box-shadow:var(--shadow);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card:hover{

	border-color:var(--glass-border-gold);

	box-shadow:var(--shadow-lg);

	transform:translateY(-2px);
}

.card h3{

    margin-bottom:.6rem;

    color:var(--text);
}

.card p{

    margin-bottom:1.25rem;

    line-height:1.75;
}

/* Glass card variant for dark grounds (the "Why Zoryagneya" band) */
.band .card{

    background:var(--glass-bg-dark);

    border-color:var(--glass-border-dark);

    color:var(--text-on-dark);
}

.band .card:hover{

    border-color:var(--glass-border-gold);
}

.band .card h3{

    color:var(--text-on-dark);
}

.band .card p{

    color:var(--text-on-dark-muted);
}

/* Small pill-shaped status badge, e.g. "Coming soon" */
.coming-soon{

    display:inline-block;

    padding:.45rem 1rem;

    background:transparent;

    border:1px solid var(--glass-border-gold);

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    color:var(--gold-soft);
}

/* ===========================
   Section heading elements
   =========================== */

.section-title{

    margin-bottom:.75rem;
}

/* ===========================
   Capability cards (AI.kshara showcase)
   =========================== */

.capability-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:1.5rem 1.25rem;

    text-align:center;

    transition:var(--transition);
}

.capability-card:hover{

    border-color:var(--glass-border-gold);

    box-shadow:var(--shadow);

    transform:translateY(-2px);
}

.capability-card img{

    width:40px;

    height:40px;

    margin:0 auto .9rem;

    object-fit:contain;
}

.capability-card h4{

    font-family:var(--font-body);

    font-size:1rem;

    font-weight:600;

    margin-bottom:.4rem;

    color:var(--text);
}

.capability-card p{

    font-size:.9rem;

    margin-bottom:0;
}

/* ===========================
   Contact info panel
   =========================== */

.contact-info{

    background:var(--glass-bg);

    border:1px solid var(--glass-border);

    border-radius:var(--radius-md);

    padding:2rem;

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    box-shadow:var(--shadow);
}

/* ===========================
   Surface / mesh backdrops
   Applied to <section> elements that host glass cards, so the
   translucency has something colorful to pick up. Each section needs
   position:relative + overflow:hidden (set here) and its .container
   needs position:relative + z-index (set here) to stay above the mesh.
   =========================== */

.mesh-dark,
.mesh-warm{

    position:relative;

    overflow:hidden;
}

.mesh-dark > .container,
.mesh-warm > .container{

    position:relative;

    z-index:1;
}

.mesh-dark{

    background:var(--ink);

    color:var(--text-on-dark);
}

.mesh-dark::before,
.mesh-dark::after{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    z-index:0;
}

.mesh-dark::before{

    width:520px;

    height:520px;

    top:-180px;

    right:-120px;

    background:radial-gradient(circle,rgba(208,160,96,.28) 0%,rgba(208,160,96,0) 70%);
}

.mesh-dark::after{

    width:460px;

    height:460px;

    bottom:-200px;

    left:-140px;

    background:radial-gradient(circle,rgba(46,64,87,.55) 0%,rgba(46,64,87,0) 70%);
}

.mesh-warm{

    background:var(--cream);
}

.mesh-warm::before,
.mesh-warm::after{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    z-index:0;
}

.mesh-warm::before{

    width:480px;

    height:480px;

    top:-160px;

    left:-100px;

    background:radial-gradient(circle,rgba(208,160,96,.16) 0%,rgba(208,160,96,0) 70%);
}

.mesh-warm::after{

    width:420px;

    height:420px;

    bottom:-180px;

    right:-120px;

    background:radial-gradient(circle,rgba(46,64,87,.10) 0%,rgba(46,64,87,0) 70%);
}

/* ===========================
   Carousel
   Two-slide showcase used on the homepage, directly under the hero.
   Progressive enhancement: without carousel.js, both slides simply
   stack and remain fully visible and readable.
   =========================== */

.carousel{

    position:relative;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-lg);
}

.carousel-track{

    display:flex;

    transition:transform .6s cubic-bezier(.65,0,.35,1);
}

.carousel-slide{

    position:relative;

    flex:0 0 100%;

    min-width:100%;
}

.carousel-image{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;
}

.carousel-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(0deg,rgba(15,23,42,.78) 0%,rgba(15,23,42,.15) 45%,rgba(15,23,42,0) 65%);
}

.carousel-caption{

    position:absolute;

    left:2rem;

    right:2rem;

    bottom:2rem;

    max-width:520px;

    padding:1.5rem 1.75rem;

    background:var(--glass-bg-dark);

    border:1px solid var(--glass-border-dark);

    border-radius:var(--radius-md);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    color:var(--text-on-dark);
}

.carousel-eyebrow{

    display:block;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.02em;

    color:var(--gold-light);

    margin-bottom:.5rem;
}

.carousel-caption h3{

    color:var(--text-on-dark);

    margin-bottom:.5rem;

    font-size:1.4rem;
}

.carousel-caption p{

    color:var(--text-on-dark-muted);

    margin-bottom:0;

    font-size:.95rem;

    line-height:1.6;
}

.carousel-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid var(--glass-border-dark);

    background:var(--glass-bg-dark);

    color:var(--text-on-dark);

    font-size:1.5rem;

    line-height:1;

    cursor:pointer;

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    transition:var(--transition);

    z-index:2;
}

.carousel-arrow:hover{

    border-color:var(--glass-border-gold);

    background:rgba(255,255,255,.14);
}

.carousel-arrow.prev{ left:1.25rem; }
.carousel-arrow.next{ right:1.25rem; }

.carousel-dots{

    position:absolute;

    right:2rem;

    top:1.5rem;

    display:flex;

    gap:.5rem;

    z-index:2;
}

.carousel-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    border:1px solid var(--glass-border-dark);

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

    padding:0;

    cursor:pointer;

    transition:var(--transition);
}

.carousel-dot.is-active{

    background:var(--gold);

    border-color:var(--gold);

    width:22px;

    border-radius:5px;
}

/* ===========================
   Header & Navigation
   =========================== */

.site-header{

    position:sticky;

    top:0;
    left:0;
    right:0;

    z-index:1000;

    background:rgba(250,247,242,.85);
    border-bottom:1px solid var(--border);

	backdrop-filter:blur(var(--glass-blur));
	-webkit-backdrop-filter:blur(var(--glass-blur));

    box-shadow:0 2px 20px rgba(0,0,0,.18);

}

.site-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:100px;
}

.site-header nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

	min-height:100px;
}

.logo{

    display:flex;

    align-items:center;

    font-size:1.4rem;

    font-weight:600;
}

.logo img{

    height:80px;

    width:auto;

    display:block;
}

.nav-list{

    display:flex;

    align-items:center;

    gap:1.75rem;

    font-size:.9rem;
}

.nav-list a{

    position:relative;

    color:var(--text-light);

    font-weight:500;

    transition:color .2s ease;
}

.nav-list a:hover{

    color:var(--text);
}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:width .25s ease;
}

.nav-list a:hover::after{

    width:100%;
}

/* Hidden by default; becomes visible at mobile widths as the hamburger
   button that toggles .nav-list (see responsive.css). */
.nav-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    position:relative;

    width:24px;

    height:18px;
}

.nav-toggle::before,
.nav-toggle::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    height:2px;

    background:var(--text);

    transition:var(--transition);
}

.nav-toggle::before{ top:0; }
.nav-toggle::after{ bottom:0; }

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

.site-footer{

    background:var(--ink);

    border-top:1px solid var(--border-on-dark);

    padding:2rem 0;
}

.site-footer .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;
}

.site-footer p,
.site-footer div{

    margin:0;

    font-size:.85rem;

    color:var(--text-on-dark-muted);
}

.site-footer a{

    color:var(--text-on-dark-muted);

    text-decoration:none;

    transition:color .2s ease;
}

.site-footer a:hover{

    color:var(--gold-light);

    text-decoration:none;
}