/* 
 * AmWal Design System (ADS) v1.0
 * Aesthetic: High-End AI SaaS (Obsidian, Glass, Primary Purple)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Color Tokens (HSL for precision) */
    --bg-main: 240 10% 4%;
    --bg-card: 240 10% 6%;
    --primary: 262 83% 58%;
    --primary-glow: hsla(262, 83%, 58%, 0.3);
    --secondary: 160 84% 39%;
    --accent: 330 81% 60%;
    
    /* Text Colors */
    --txt-main: 0 0% 100%;
    --txt-muted: 240 5% 65%;
    
    /* Surface / Borders */
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-active: rgba(255, 255, 255, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --blur: blur(12px);

    /* Animation */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: all 0.5s var(--ease);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body {
    background-color: hsl(var(--bg-main));
    color: hsl(var(--txt-main));
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* --- Bento Grid Engine --- */
.bento-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(160px, auto);
    gap: 1.5rem;
    padding: 2rem;
}

.bento-card {
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.bento-card:hover {
    border-color: hsla(var(--primary), 0.5);
    box-shadow: 0 0 40px var(--primary-glow);
    transform: translateY(-5px);
}

.bento-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

/* --- Typographical Utilities --- */
.text-gradient {
    background: linear-gradient(to right, #fff, #a1a1aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-hero {
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 1.5rem;
}

/* --- Buttons (SaaS Style) --- */
.btn-amwal {
    background: #fff;
    color: #000;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-amwal:hover {
    background: hsl(var(--primary));
    color: #fff;
    transform: scale(1.05);
}

.btn-glass {
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    backdrop-filter: var(--blur);
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    transition: var(--transition);
}

/* --- Glow Effects --- */
.glow-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    z-index: -1;
    filter: blur(100px);
}

/* --- Nav --- */
.nav-glass {
    position: fixed;
    top: 0; width: 100%;
    background: rgba(9, 9, 11, 0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-glass);
    z-index: 1000;
    padding: 1rem 0;
}

/* --- Forms (Minimalist) --- */
.form-glass {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-glass);
    color: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    width: 100%;
    outline: none;
    transition: var(--transition);
}

.form-glass:focus {
    border-color: hsl(var(--primary));
    background: rgba(255,255,255,0.05);
}

/* Grid helper classes */
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }