:root{
  --bg: #f5f7f8;
  --card: #ffffff;
  --muted: #6b7b85;
  --accent: #0b7aa1;
  --accent-2: #ff8c00;
  --border: #e3e6e8;
  --radius: 8px;
  --max-width: 980px;
  --mono: "SFMono-Regular", "Menlo", "Monaco", monospace;
}

/* Reset-ish */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.site{min-height:100vh;display:flex;flex-direction:column}

/* Header */
.site-header{
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.site-header .brand{width:100%;max-width:var(--max-width);margin:0 auto;padding:0;position:relative}
.site-header .brand-inner{display:block;padding:0;position:relative}
.logo{width:100%;max-width:100%;height:160px;display:block;object-fit:contain}
.menu-toggle{background:transparent;border:0;font-size:20px;padding:6px;display:inline-block;cursor:pointer}
.site-nav{display:none}
.site-nav ul{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.site-nav a{color:var(--card);text-decoration:none;padding:8px 10px;border-radius:6px;background:rgba(0,0,0,0.35)}
.site-nav a:hover{background:rgba(0,0,0,0.5)}

/* Position nav inside banner */
.site-nav{position:absolute;right:20px;top:18px}
.menu-toggle{position:absolute;right:18px;top:18px;background:rgba(255,255,255,0.85);border-radius:8px;padding:6px 8px}

/* Main container */
.container{width:100%;max-width:var(--max-width);margin:20px auto;padding:16px}
.hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.hero-content h1{font-size:1.4rem;margin-bottom:6px}
.lead{color:var(--muted);font-size:0.95rem}

.scan-form{display:flex;gap:10px;align-items:center;background:var(--card);padding:14px;border-radius:14px;box-shadow:0 18px 36px rgba(11,122,161,0.08);width:100%}
.scan-form input[type="text"]{flex:1;padding:16px 18px;border:2px solid transparent;border-radius:10px;background:#fff;font-size:1.12rem;box-shadow:0 10px 30px rgba(11,122,161,0.07);transition:box-shadow .18s ease, border-color .12s ease, transform .12s ease}
.scan-form input[type="text"]::placeholder{color:var(--muted);font-size:1rem}
.scan-form input[type="text"].loading{background-image:url('/https/whatweb.net/images/loading.gif');background-repeat:no-repeat;background-position:right 12px center}
.scan-form input[type="text"]:focus{outline:none;border-color:var(--accent);box-shadow:0 18px 44px rgba(11,122,161,0.16);transform:translateY(-1px)}
.scan-form .btn{padding:12px 18px;font-size:1rem}
.btn{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
.btn:disabled{opacity:0.6;cursor:not-allowed}

.description{margin-top:12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}

.results{margin-top:16px}
.results-pre{display:none;background:#0f1724;color:#e6eef6;padding:12px;border-radius:6px;white-space:pre-wrap;overflow:auto;font-family:var(--mono);font-size:0.95rem}
.results-pre.show{display:block}

.site-footer{margin-top:auto;background:transparent;padding:18px 0;text-align:center;color:var(--muted)}
.small{font-size:0.9rem}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Larger screens */
@media(min-width:720px){
  .site-nav{display:block}
  .menu-toggle{display:none}
  /* Keep hero single-column so heading and input each take full width */
  .hero-content h1{font-size:1.6rem}
}

@media(min-width:1000px){
  .hero-content h1{font-size:1.9rem}
}

/* Small utilities kept for backwards compatibility of some selectors */
.smalltext{font-size:0.8rem}