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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
    font-family:'Inter',Arial,sans-serif;
    background:#050816;
    color:#e0e8f5;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
}

/* ── Star field background ── */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 40% 10%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.4), transparent),
        radial-gradient(2px 2px at 70% 20%, rgba(158,203,255,.8), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 15% 65%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 50% 70%, rgba(158,203,255,.6), transparent),
        radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,.5), transparent),
        radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 5% 90%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 45% 95%, rgba(158,203,255,.5), transparent),
        radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,.3), transparent),
        radial-gradient(1.5px 1.5px at 95% 10%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.4), transparent);
    pointer-events:none;
    z-index:0;
}

body>*{position:relative;z-index:1}

/* ── Header / Navigation ── */
header{
    padding:20px 48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(158,203,255,.1);
    background:rgba(5,8,22,.6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    position:sticky;
    top:0;
    z-index:100;
}

header h2{
    font-family:'Cinzel',serif;
    font-weight:500;
    font-size:22px;
    letter-spacing:6px;
    color:#c8ddf5;
    text-shadow:0 0 20px rgba(158,203,255,.3);
}

nav{display:flex;gap:8px}

nav a{
    color:#8aaad4;
    text-decoration:none;
    font-size:14px;
    font-weight:400;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:8px 16px;
    border-radius:6px;
    transition:all .3s ease;
}

nav a:hover{
    color:#c8e0ff;
    background:rgba(158,203,255,.08);
    text-shadow:0 0 12px rgba(158,203,255,.4);
}

/* ── Hero Section ── */
.hero{
    text-align:center;
    padding:80px 20px 100px;
    background:
        radial-gradient(ellipse 60% 50% at 50% 60%, rgba(15,35,80,.6), transparent),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(10,25,60,.8), transparent),
        linear-gradient(to bottom, #070e24, #050816);
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(100,160,255,.15) 0%, rgba(60,120,220,.08) 30%, transparent 70%);
    pointer-events:none;
}

.hero::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    width:600px;
    height:2px;
    background:linear-gradient(to right, transparent, rgba(158,203,255,.3), transparent);
    pointer-events:none;
}

.moon-phases{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-bottom:40px;
    font-size:28px;
    filter:drop-shadow(0 0 6px rgba(158,203,255,.4));
    opacity:.8;
}

.moon-phases span{
    color:#b8d7ff;
    transition:transform .3s ease;
}

.moon-phases span:hover{
    transform:scale(1.2);
}

.hero h1{
    font-family:'Cinzel',serif;
    font-size:clamp(36px, 6vw, 64px);
    letter-spacing:clamp(6px, 1.5vw, 14px);
    font-weight:500;
    color:#e8f0ff;
    text-shadow:0 0 40px rgba(100,160,255,.25), 0 0 80px rgba(60,100,200,.1);
    margin-bottom:20px;
    line-height:1.2;
}

.hero-tagline{
    color:#8aaad4;
    font-size:18px;
    letter-spacing:4px;
    font-weight:300;
    margin-bottom:40px;
}

.hero-glow{
    width:240px;
    height:240px;
    margin:0 auto 40px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(100,160,255,.12) 0%, rgba(60,120,220,.06) 40%, transparent 70%);
    border:1px solid rgba(158,203,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    animation:pulse-glow 4s ease-in-out infinite;
}

.hero-glow::before{
    content:'';
    position:absolute;
    inset:-20px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(100,160,255,.06), transparent 70%);
}

.hero-glow-inner{
    width:100px;
    height:100px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(140,190,255,.2) 0%, rgba(80,140,220,.08) 50%, transparent 100%);
    box-shadow:0 0 60px rgba(100,160,255,.15);
}

@keyframes pulse-glow{
    0%,100%{opacity:.8;transform:scale(1)}
    50%{opacity:1;transform:scale(1.03)}
}

/* ── Buttons ── */
.btn{
    display:inline-block;
    background:linear-gradient(135deg, rgba(29,78,216,.8), rgba(20,60,180,.6));
    color:#d0e4ff;
    border:1px solid rgba(158,203,255,.2);
    padding:14px 36px;
    border-radius:8px;
    font-size:14px;
    font-family:'Inter',sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    transition:all .3s ease;
    text-decoration:none;
    font-weight:400;
}

.btn:hover{
    background:linear-gradient(135deg, rgba(40,90,230,.9), rgba(29,78,216,.7));
    border-color:rgba(158,203,255,.35);
    box-shadow:0 0 30px rgba(60,120,220,.2);
    transform:translateY(-1px);
}

button{
    background:linear-gradient(135deg, rgba(29,78,216,.8), rgba(20,60,180,.6));
    color:#d0e4ff;
    border:1px solid rgba(158,203,255,.2);
    padding:14px 36px;
    border-radius:8px;
    font-size:14px;
    font-family:'Inter',sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    transition:all .3s ease;
}

button:hover{
    background:linear-gradient(135deg, rgba(40,90,230,.9), rgba(29,78,216,.7));
    border-color:rgba(158,203,255,.35);
    box-shadow:0 0 30px rgba(60,120,220,.2);
    transform:translateY(-1px);
}

/* ── Page Header (non-home pages) ── */
.page-header{
    text-align:center;
    padding:60px 20px 50px;
    background:
        radial-gradient(ellipse 50% 60% at 50% 80%, rgba(15,30,70,.5), transparent),
        linear-gradient(to bottom, #070e24, #050816);
    position:relative;
}

.page-header h1{
    font-family:'Cinzel',serif;
    font-size:clamp(28px, 4vw, 42px);
    letter-spacing:8px;
    font-weight:500;
    color:#c8ddf5;
    text-shadow:0 0 30px rgba(100,160,255,.2);
}

.page-header .divider{
    width:80px;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(158,203,255,.5), transparent);
    margin:20px auto 0;
}

/* ── Container ── */
.container{
    max-width:1100px;
    margin:0 auto;
    padding:50px 24px;
}

/* ── Cards ── */
.card{
    background:linear-gradient(145deg, rgba(12,19,40,.9), rgba(8,14,30,.95));
    padding:32px;
    border-radius:14px;
    margin-bottom:24px;
    border:1px solid rgba(158,203,255,.08);
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
}

.card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(158,203,255,.15), transparent);
}

.card:hover{
    border-color:rgba(158,203,255,.15);
    transform:translateY(-2px);
    box-shadow:0 8px 40px rgba(10,20,50,.4);
}

.card h2{
    font-family:'Cinzel',serif;
    font-size:22px;
    font-weight:500;
    color:#c8ddf5;
    letter-spacing:2px;
    margin-bottom:12px;
}

.card h3{
    font-family:'Cinzel',serif;
    font-size:20px;
    font-weight:500;
    color:#c8ddf5;
    letter-spacing:2px;
    margin-bottom:12px;
}

.card p{
    color:#7a96bc;
    font-size:15px;
    line-height:1.7;
    font-weight:300;
}

/* ── Card Grid ── */
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:24px;
}

.card-grid .card{
    margin-bottom:0;
}

/* ── Card with icon ── */
.card-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(100,160,255,.12), rgba(60,100,200,.04));
    border:1px solid rgba(158,203,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:20px;
    filter:drop-shadow(0 0 8px rgba(100,160,255,.2));
}

/* ── Welcome card (home) ── */
.welcome-section{
    text-align:center;
    padding:30px 0;
}

.welcome-section .card{
    max-width:700px;
    margin:0 auto;
    padding:40px;
}

.welcome-section h3{
    font-family:'Cinzel',serif;
    font-size:24px;
    letter-spacing:3px;
    color:#c8ddf5;
    margin-bottom:16px;
}

.welcome-section p{
    color:#7a96bc;
    font-size:16px;
    line-height:1.8;
    font-weight:300;
}

/* ── Book cards ── */
.book-card{
    text-align:center;
    padding:40px 32px;
}

.book-card .book-icon{
    width:80px;
    height:100px;
    margin:0 auto 24px;
    border-radius:6px;
    background:linear-gradient(145deg, rgba(20,35,70,.8), rgba(12,22,50,.9));
    border:1px solid rgba(158,203,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    box-shadow:0 4px 20px rgba(10,20,50,.5);
}

.book-card h2{
    font-size:20px;
    margin-bottom:8px;
}

.book-price{
    font-family:'Cinzel',serif;
    font-size:20px;
    color:#9ecbff;
    font-weight:500;
    margin-top:12px;
    letter-spacing:1px;
}

.book-desc{
    color:#6a85a8;
    font-size:14px;
    line-height:1.6;
    margin-top:8px;
}

/* ── Contact form ── */
.contact-card{
    max-width:600px;
    margin:0 auto;
    padding:40px;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#6a85a8;
    margin-bottom:8px;
    font-weight:400;
}

input,textarea{
    width:100%;
    padding:14px 16px;
    background:rgba(10,18,38,.8);
    border:1px solid rgba(158,203,255,.1);
    color:#c8ddf5;
    border-radius:8px;
    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:300;
    transition:all .3s ease;
    outline:none;
}

input:focus,textarea:focus{
    border-color:rgba(158,203,255,.3);
    box-shadow:0 0 20px rgba(60,120,220,.08);
    background:rgba(12,20,42,.9);
}

input::placeholder,textarea::placeholder{
    color:#4a6080;
}

textarea{
    resize:vertical;
    min-height:120px;
}

/* ── Footer ── */
footer{
    text-align:center;
    padding:40px 24px;
    border-top:1px solid rgba(158,203,255,.08);
    color:#4a6585;
    font-size:13px;
    letter-spacing:2px;
    font-weight:300;
}

footer .footer-brand{
    font-family:'Cinzel',serif;
    font-size:16px;
    letter-spacing:4px;
    color:#6a85a8;
    margin-bottom:8px;
}

footer .footer-divider{
    width:40px;
    height:1px;
    background:rgba(158,203,255,.2);
    margin:16px auto;
}

/* ── Section titles ── */
.section-title{
    font-family:'Cinzel',serif;
    text-align:center;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#6a85a8;
    margin-bottom:36px;
}

/* ── Responsive ── */
@media(max-width:768px){
    header{
        flex-direction:column;
        gap:16px;
        padding:16px 24px;
    }
    nav{flex-wrap:wrap;justify-content:center}
    .hero{padding:60px 16px 80px}
    .hero-glow{width:180px;height:180px}
    .hero-glow-inner{width:70px;height:70px}
    .moon-phases{gap:12px;font-size:22px}
    .container{padding:32px 16px}
    .card{padding:24px}
    .card-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
    .hero h1{letter-spacing:4px}
    .moon-phases{gap:8px;font-size:18px}
    header h2{font-size:18px;letter-spacing:4px}
}