body { font-family: 'Fira Code', 'Source Code Pro', monospace; margin:0; padding:0; color:#f0f6fc;    
    /*background:#0d1117; */
    background: url("/static/bg.png") no-repeat center center fixed;
    background-size: cover;}
.title {
    font-size: 2rem;
    color: #00ff88;
    text-shadow: 0 0 5px #00ff88, 0 0 10px #008844;
    letter-spacing: 2px;
}
.logo {
    height: 120px;
    margin-right: 10px;
}
header { background:#161b22; padding:1rem 2rem; position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; }
header h1 { color:#58a6ff; margin:0; }
nav a { color:#00ffaa; margin:0 0.75rem; text-decoration:none; font-weight:bold; }
nav a:hover { color:#58a6ff;     text-shadow: 0 0 8px #00ff88; }
.hero { text-align:center; padding:6rem 2rem; background:linear-gradient(135deg,#0d1117,#1e2a47); }
.hero h2 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.2rem; margin-bottom:2rem; }
.hero button { background:#58a6ff; border:none; padding:0.75rem 1.5rem; margin:0.5rem; border-radius:8px; font-size:1rem; cursor:pointer; }
.hero button:hover { background:#1f6feb; }
section { padding:4rem 2rem; max-width:1100px; margin:auto; }
h2 { color:#58a6ff; text-align:center; margin-bottom:1.5rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
.card { background:#161b22; padding:1.5rem; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
.card h3 { color:#79c0ff; margin-top:0; }
.center-text { text-align:center; max-width:800px; margin:auto; }
.cta { background:#1e2a47; text-align:center; padding:4rem 2rem; }
.contact-form { display:flex; flex-direction:column; gap:1rem; max-width:500px; margin:2rem auto; }
.contact-form input, .contact-form textarea { padding:0.75rem; border:none; border-radius:8px; background:#0d1117; color:#f0f6fc; }
.contact-form button { background:#58a6ff; border:none; padding:0.75rem; border-radius:8px; font-size:1rem; cursor:pointer; }
footer { background:#161b22; padding:2rem; text-align:center; font-size:0.9rem; color:#8b949e; }
footer a { color:#58a6ff; margin:0 0.5rem; }
button.btn-disabled {
    background-color: #333;
    color: #aaa;
    border: 1px solid #555;
    cursor: not-allowed;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 1rem;
    opacity: 0.7;
    position: relative;
}

button.btn-disabled::after {
    content: "Currently unavailable due to high customer volume";
    display: block;
    font-size: 0.8rem;
    color: #ff5555;
    margin-top: 6px;
    text-align: center;
}

/* optional blinking cursor effect */
.title::after {
    content: "_";
    animation: blink 1s infinite;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}