html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    }

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

:root{
    --brand:#0078D7;
    --brand-dark:#003f7a;
    --accent:#daa520;
    --hover:#fffacd;
    --max-width:1100px;
    }
    
    body{
    margin:0;
    font-family:'Montserrat',sans-serif;
    color:#222;
    background:#fff;
    overflow-x:hidden;
    opacity:0;
    animation:pageFade .6s ease forwards;
    }
    
    @keyframes pageFade{
    to{opacity:1;}
    }
    
.container{
    max-width:var(--max-width);
    margin:auto;
    padding:0 20px;
    }

.support-us-block{
    margin:12px auto 0;
    max-width:560px;
    text-align:center;
    }

.support-us-copy{
    margin:0 0 12px;
    line-height:1.5;
    }

    /* HEADER */
    
    .header{
    background:#202785;
    border-bottom:1px solid #202785;
    position:sticky;
    top:0;
    z-index:100;
    font-size:16px;
    line-height:1.2;
    }
    
    .nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:12px 0;
    min-height:174px;
    }

    .logo{
    flex:0 0 auto;
    }
    
    .logo img{
    display:block;
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    animation:logoGlow 3s ease-in-out infinite;
    }
    
    @keyframes logoGlow{
    0%{box-shadow:0 0 0px rgba(218,165,32,0)}
    50%{box-shadow:0 0 25px rgba(218,165,32,.5)}
    100%{box-shadow:0 0 0px rgba(218,165,32,0)}
    }
    
    nav.nav{
    display:flex;
    gap:18px;
    align-items:center;
    flex-wrap:wrap;
    font-size:inherit;
    line-height:inherit;
    }
    
    .header nav.nav a,
    .header .dropbtn{
    text-decoration:none;
    color:#ffffff;
    font-weight:500;
    font-size:inherit;
    line-height:inherit;
    }
    
    .nav-btn{
    background:var(--brand);
    color:#ffffff;
    padding:8px 16px;
    border-radius:4px;
    }

    nav.nav .nav-btn{
    font-size:inherit;
    line-height:inherit;
    font-weight:500;
    padding:8px 16px;
    }
    
    .nav-btn:hover{
    background:var(--hover);
    color:#ffffff;
    border:1px solid var(--accent);
    }
    
    /* HERO */
    
    .hero{
    position:relative;
    color:white;
    text-align:center;
    padding:50px 20px;
    overflow:hidden;
    background:linear-gradient(120deg,var(--brand),var(--brand-dark));
    }
    
    /* text-shadow */

    .hero h1{
        font-size:44px;
        margin-bottom:10px;
        text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
        }
        
        .tagline{
        margin-bottom:20px;
        text-shadow: 3px 3px 5px rgba(0,0,0,0.9);
        }

    .hero{
        position:relative;
        color:white;
        text-align:center;
        padding:50px 20px;
        overflow:hidden;
        background:linear-gradient(120deg,var(--brand),var(--brand-dark));
        }
        
        /* SMALL STARS */
        
        .hero::before{
        content:"";
        position:absolute;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
        
        background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 150px 60px, rgba(255,255,255,.7), transparent);
        
        background-size:200px 200px;
        
        animation:starsSlow 120s linear infinite;
        }
        
        /* MEDIUM STARS */
        
        .hero::after{
        content:"";
        position:absolute;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
        
        background-image:
        radial-gradient(2px 2px at 40px 80px, rgba(255,255,255,.8), transparent),
        radial-gradient(2px 2px at 120px 160px, rgba(255,255,255,.7), transparent),
        radial-gradient(2px 2px at 200px 40px, rgba(255,255,255,.8), transparent);
        
        background-size:260px 260px;
        
        animation:starsMedium 90s linear infinite;
        }
        
        /* LARGE STARS */
        
        .hero{
            position:relative;
            color:white;
            text-align:center;
            padding:50px 20px;
            overflow:hidden;
            background:linear-gradient(120deg,var(--brand),var(--brand-dark));
            }
            
            /* SMALL STARS */
            
            .hero::before{
            content:"";
            position:absolute;
            top:-50%;
            left:-50%;
            width:200%;
            height:200%;
            
            background-image:
            radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.7), transparent),
            radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.6), transparent),
            radial-gradient(1px 1px at 150px 60px, rgba(255,255,255,.7), transparent),
            radial-gradient(1px 1px at 40px 180px, rgba(255,255,255,.6), transparent);
            
            background-size:200px 200px;
            
            animation:starsSlow 120s linear infinite, twinkle 6s ease-in-out infinite;
            }
            
            /* MEDIUM STARS */
            
            .hero::after{
            content:"";
            position:absolute;
            top:-50%;
            left:-50%;
            width:200%;
            height:200%;
            
            background-image:
            radial-gradient(2px 2px at 40px 80px, rgba(255,255,255,.8), transparent),
            radial-gradient(2px 2px at 120px 160px, rgba(255,255,255,.7), transparent),
            radial-gradient(2px 2px at 200px 40px, rgba(255,255,255,.8), transparent),
            radial-gradient(2px 2px at 60px 200px, rgba(255,255,255,.75), transparent);
            
            background-size:260px 260px;
            
            animation:starsMedium 90s linear infinite, twinkle 4s ease-in-out infinite;
            }
            
            /* LARGE STARS */
            
            .hero-content::before{
            content:"";
            position:absolute;
            top:-50%;
            left:-50%;
            width:200%;
            height:200%;
            pointer-events:none;
            
            background-image:
            radial-gradient(3px 3px at 60px 100px, rgba(255,255,255,.9), transparent),
            radial-gradient(3px 3px at 180px 50px, rgba(255,255,255,.8), transparent),
            radial-gradient(3px 3px at 260px 180px, rgba(255,255,255,.9), transparent);
            
            background-size:320px 320px;
            
            animation:starsFast 60s linear infinite, twinkle 3s ease-in-out infinite;
            }
            
            /* DRIFT MOVEMENT */
            
            @keyframes starsSlow{
            0%{transform:translate(0,0);}
            100%{transform:translate(-200px,200px);}
            }
            
            @keyframes starsMedium{
            0%{transform:translate(0,0);}
            100%{transform:translate(-260px,160px);}
            }
            
            @keyframes starsFast{
            0%{transform:translate(0,0);}
            100%{transform:translate(-320px,120px);}
            }
            
            /* TWINKLE EFFECT */
            
            @keyframes twinkle{
            0%{opacity:.6;}
            25%{opacity:1;}
            50%{opacity:.7;}
            75%{opacity:.9;}
            100%{opacity:.6;}
            }
    
    .hero-content{
    position:relative;
    z-index:2;
    }
    
    .hero h1{
    font-size:44px;
    margin-bottom:10px;
    }
    
    .tagline{
    margin-bottom:20px;
    }
    
    .btn{
    background:var(--brand);
    color:#fff;
    padding:10px 18px;
    border-radius:4px;
    text-decoration:none;
    font-weight:600;
    border:none;
    cursor:pointer;
    }
    
    .btn:hover{
    background:var(--hover);
    color:#333;
    border:1px solid var(--accent);
    }
    
    /* SECTIONS */
    
    .section{
    padding:30px 0;
    }
    
    .section-divider{
    height:1px;
    background:#eee;
    margin:15px 0;
    }
    
    /* FEATURE BOOK */
    
    .book-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center;
    }
    
    .hero-book img{
    width:50%;
    max-width:260px;
    display:block;
    margin:auto;
    }
    
    /* Daves Image */

    .title-with-image {
        position: relative;
        padding-right: 120px; /* space so text doesn't overlap the image */
      }
      
      .right-image {
        position: absolute;
        right: 20px;   /* distance from right edge of the screen */
        top: -00%;
        transform: translateY(-50%);
        height: 150px;
      }

    /* BOOK GRID */
    
    .books-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    }
    
    .book-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    background:#fff;
    min-height:380px;
    }
    
    .book-card img{
    width:200px;
    height:300px;
    object-fit:cover;
    }
    
    .book-card h3{
    min-height:60px;
    text-align:center;
    }
    
    /* REVIEWS */
    
    .review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    }
    
    .review{
    background:#fafafa;
    padding:20px;
    border-radius:6px;
    text-align:center;
    }
    
    /* NEWSLETTER */
    
    .newsletter{
    background:#fafafa;
    padding:40px 20px;
    text-align:center;
    }
    
    .newsletter-form{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
    }
    
    .newsletter-form input{
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    }
    
    /* POPUP */
    
    .modal{
    display:none;
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    justify-content:center;
    align-items:center;
    }
    
    .modal-content{
    background:white;
    padding:30px;
    border-radius:6px;
    max-width:400px;
    text-align:center;
    }

    /* READER CLUB BOOK */

    .reader-shell{
    background:#fff;
    border-radius:18px;
    padding:28px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    }

    .reader-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:18px;
    flex-wrap:wrap;
    }

    .reader-copy{
    max-width:620px;
    margin:8px 0 0;
    line-height:1.6;
    }

    .reader-controls{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
    }

    .reader-field{
    display:block;
    font-weight:600;
    min-width:80px;
    }

    .reader-controls input{
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:4px;
    min-width:110px;
    }

    .reader-secondary-btn{
    background:#202785;
    }

    .reader-secondary-btn:hover{
    background:#0d145e;
    color:#fff;
    }

    .reader-status{
    background:#f5f8ff;
    border:1px solid rgba(0,120,215,.18);
    border-radius:10px;
    padding:14px 16px;
    margin:0 0 20px;
    color:#1d3166;
    }

    .reader-frame-wrap{
    border-radius:16px;
    overflow:hidden;
    background:#edf2ff;
    border:1px solid rgba(32,39,133,.14);
    min-height:820px;
    }

    .reader-frame{
    width:100%;
    min-height:820px;
    border:0;
    background:#fff;
    }
    
    /* BLOG */
    
    .blog-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    }
    
    .post-feature{
    background:white;
    padding:20px;
    border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    }
    
    .post-card{
    background:white;
    padding:15px;
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    margin-bottom:10px;
    }
    
    /* FOOTER */
    
    .footer{
    background:#111;
    color:#fff;
    padding:40px 20px;
    margin-top:30px;
    }
    
    .footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    }
    
    .footer a{
    color:#ccc;
    text-decoration:none;
    }
    
    .copyright{
    text-align:center;
    margin-top:20px;
    font-size:13px;
    }
    
    /* RESPONSIVE */
    
    @media(max-width:768px){
    
    .book-grid{grid-template-columns:1fr;}
    .review-grid{grid-template-columns:1fr;}
    .blog-grid{grid-template-columns:1fr;}
    .reader-shell{padding:20px;}
    .reader-frame-wrap,
    .reader-frame{min-height:70vh;}
    
    }

    /* DROPDOWN MENU */

.dropdown{
  position:relative;
  display:inline-block;
  }
  
  .dropbtn{
  text-decoration:none;
  color:white;
  font-weight:500;
  font-size:inherit;
  line-height:inherit;
  cursor:pointer;
  }
  
  .dropdown-content{
  display:none;
  position:absolute;
  background:#003f7a;
  min-width:180px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  border-radius:4px;
  z-index:200;
  }
  
  .dropdown-content a{
  display:block;
  padding:10px 14px;
  color:white;
  text-decoration:none;
  }
  
  .dropdown-content a:hover{
  background:#0053a0;
  }
  
  /* SHOW MENU */
  
  .dropdown:hover .dropdown-content{
  display:block;
  }

  /* CENTERED CONTENT */

.centered {
    display: block;
    text-align: center;
}

/* COSMOQUILL CHATBOT */

.cosmoquill-wrap{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:12000;
  font-family:'Montserrat',sans-serif;
}

.cosmoquill-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(120deg,#0053a0,#202785);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}

.cosmoquill-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.3);
}

.cosmoquill-toggle.open{
  opacity:0;
  pointer-events:none;
}

.cq-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  font-weight:700;
  font-size:13px;
  letter-spacing:.3px;
  overflow:hidden;
}

.cq-icon-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cq-icon-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.cq-label{
  font-weight:700;
  letter-spacing:.2px;
}

.cosmoquill-panel{
  width:min(420px,calc(100vw - 26px));
  max-height:min(78vh,700px);
  background:#fff;
  border:1px solid #d9e3f5;
  border-radius:18px;
  box-shadow:0 20px 55px rgba(0,0,0,.3);
  display:none;
  overflow:hidden;
}

.cosmoquill-panel.open{
  display:flex;
  flex-direction:column;
}

.cosmoquill-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px 12px;
  color:#fff;
  background:linear-gradient(135deg,#0053a0,#202785);
}

.cosmoquill-header h3{
  margin:0;
  font-size:18px;
}

.cosmoquill-header p{
  margin:4px 0 0;
  font-size:12px;
  opacity:.92;
}

.cosmoquill-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.cosmoquill-reset{
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.cosmoquill-reset:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.5);
}

.cosmoquill-close{
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  border-radius:8px;
  width:30px;
  height:30px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}

.cosmoquill-messages{
  padding:14px;
  overflow:auto;
  background:linear-gradient(to bottom,#ffffff,#f8fbff);
  flex:1 1 auto;
}

.cq-msg{
  max-width:92%;
  margin:0 0 10px;
  padding:11px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
}

.cq-bot{
  background:#ecf4ff;
  border:1px solid #d5e6ff;
  color:#16355f;
}

.cq-user{
  margin-left:auto;
  background:#0053a0;
  border:1px solid #00498d;
  color:#fff;
}

.cosmoquill-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:12px;
  border-top:1px solid #e4edf9;
  background:#fff;
}

.cosmoquill-form input{
  border:1px solid #c9d7ee;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}

.cosmoquill-form button{
  border:0;
  border-radius:10px;
  background:#202785;
  color:#fff;
  padding:0 16px;
  font-weight:700;
  cursor:pointer;
}

.cosmoquill-form button:hover{
  background:#0e1561;
}

@media(max-width:768px){
  .cosmoquill-wrap{
    right:12px;
    bottom:12px;
  }

  .cosmoquill-toggle{
    padding:10px 13px;
  }

  .cq-icon{
    width:30px;
    height:30px;
    font-size:12px;
  }

  .cosmoquill-panel{
    width:min(96vw,420px);
    max-height:75vh;
  }
}