/* ==========================================================================
   Pages
   --------------------------------------------------------------------------
   Page-specific styling only — sections and content blocks that appear on
   a single page (or a small number of pages) rather than being reused
   site-wide. Shared grids live in layout.css; reusable widgets (buttons,
   cards, glass surfaces, carousel, header, footer) live in components.css.
   Responsive overrides for the classes below live in responsive.css.

   Dark sections (carousel, "why" band, footer) carry the .mesh-dark
   utility; warm content sections (services, overview, platforms, contact)
   carry .mesh-warm — both defined in components.css.
   ========================================================================== */

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

.hero{
	padding:5rem 0 4rem;
}

.hero-inner{

    max-width:720px;
}

.hero h1{

    font-size:3.4rem;
    max-width:720px;
    line-height:1.1;
    margin-bottom:1.5rem;
    color:var(--text-on-dark);
}

.hero p{

    font-size:1.15rem;
    margin-bottom:2rem;
    max-width:560px;
    color:var(--text-on-dark-muted);
}

.hero .button{

    margin-top:.5rem;

}

/* ===========================
   Carousel section
   =========================== */

.showcase-carousel{

    padding-bottom:4rem;
}

/* ===========================
   Intro
   =========================== */

.intro{

    background:var(--surface);
}

/* ===========================
   Platforms
   =========================== */

.platform-grid{

    margin-top:3rem;
}

.platform-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    height:100%;
}

.platform-logo{

    height:52px;

    width:auto;

    margin-bottom:1.5rem;

    filter:none;
}

.platform-icon{

    font-size:3rem;

    margin-bottom:1.5rem;
}

.platform-card h3{

    margin-bottom:1rem;
}

.platform-card p{

    flex:1;

    margin-bottom:2rem;
}

.platform-link{

    color:var(--gold-soft);

    font-weight:600;
}

.platform-link:hover{

    color:var(--gold);
}

.skip-link{

    position:absolute;

    left:-9999px;
}

.skip-link:focus{

    left:20px;

    top:20px;

    z-index:9999;

    background:var(--ink);

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

    padding:.5rem 1rem;

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

/* ==================================
   AI.kshara Product Showcase
================================== */

.product-showcase{

    background:var(--cream);
}

.showcase-main{

    margin:3rem 0;

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

    overflow:hidden;

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

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

.showcase-main img{

    width:100%;

    display:block;
}

.showcase-grid{

    display:grid;

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

    gap:2rem;

    margin-top:2rem;
}

.showcase-card{

    background:var(--surface);

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

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

    overflow:hidden;

    transition:var(--transition);
}

.showcase-card:hover{

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

    box-shadow:var(--shadow);

    transform:translateY(-2px);
}

.showcase-card img{

    width:100%;

    display:block;
}

.showcase-card h3{

    padding:1.25rem 1.5rem .5rem;
}

.showcase-card p{

    padding:0 1.5rem 1.5rem;
}

.capability-grid{

    margin-top:3rem;

    display:grid;

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

    gap:1rem;
}

/* ==================================
   Product Overview
================================== */

.overview-grid{

    display:grid;

    grid-template-columns:1.4fr 1fr;

    gap:3rem;

    align-items:start;

    margin-top:2rem;
}

.overview-lead{

    font-size:1.2rem;

    font-weight:500;

    color:var(--text);

    margin-bottom:1.5rem;

    line-height:1.8;
}

.overview-panel{

    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);
}

.overview-panel h3{

    margin-bottom:1.25rem;
}

.overview-list{

    margin:0;

    padding:0;

    list-style:none;
}

.overview-list li{

    position:relative;

    padding-left:1.75rem;

    margin-bottom:1rem;

    line-height:1.6;
}

.overview-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--gold-soft);

    font-weight:700;
}

/* ===========================
   Contact
   =========================== */

.contact-layout{

	display:grid;

	grid-template-columns:1fr 520px;

	gap:4rem;

	align-items:start;

}

.contact-form{

    margin:0 0 3rem;
}

.contact-form iframe{

	width:100%;

	height:500px;

	border:none;

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

.contact-label{

    display:block;

    margin-bottom:.35rem;

    font-size:1.05rem;

    font-weight:600;

    color:var(--text);
}

.contact-value{

    margin-bottom:1.75rem;

    color:var(--text-light);

    line-height:1.7;
}

.contact-value a{

    color:var(--gold-soft);

    font-weight:500;
}

.contact-value a:hover{

    color:var(--gold);

    text-decoration:none;
}

/* ===========================
   Screenshot Gallery
   =========================== */

.screenshot-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:2rem;

    margin-top:3rem;
}

.hero-shot{

    grid-column:1 / -1;
}

.screenshot-grid figure{

    background:var(--surface);

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

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

    overflow:hidden;

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

.screenshot-grid img{

    width:100%;

    display:block;
}

.screenshot-grid figcaption{

    padding:1rem;

    text-align:center;

    font-size:.95rem;

    color:var(--text-light);
}

/* ===========================
   "Why Zoryagneya" band
   =========================== */

.band .section-header{

    max-width:640px;
}