/* Basic reset & theme */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0a0a0a; }
a { color: inherit; }
.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.small { font-size: 0.9rem; color: #555; }
.muted { color: #666; font-weight: normal; }

/* Smooth scroll and anchor offset (JS sets --sticky-offset dynamically) */
html { scroll-behavior: smooth; }
#technology, #portfolio, #contact { scroll-margin-top: var(--sticky-offset, 180px); }

/* Header */
.site-header { border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 28px; }
.brand-text h1 { font-size: 1.1rem; margin: 0; }
.brand-text p { margin: 0; color: #666; font-size: 0.95rem; }

.nav a { text-decoration: none; margin-left: 16px; padding: 8px 10px; border-radius: 6px; }
.nav a:hover { background: #f2f6ff; }

/* Sticky hero (shorter) */
#heroWrapper { position: sticky; top: 64px; z-index: 5; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); border-bottom: 1px solid #eee; }
.hero { padding: 24px 0; }
.hero h2 { font-size: 2rem; margin: 0 0 8px; }
.hero .lede { font-size: 1.05rem; color: #333; max-width: 800px; }

/* Sections */
.content { padding: 40px 0; }
.content.alt { background: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.keypoints, .contact-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 16px; }

/* Patent table */
.patent-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.95rem; }
.patent-table th, .patent-table td { border: 1px solid #ddd; padding: 8px; }
.patent-table th { background: #f0f4fa; text-align: left; }
.patent-table tr:nth-child(even) { background: #fafafa; }

/* Footer */
.footer { padding: 24px 0; border-top: 1px solid #eee; text-align: center; color: #666; }

/* Password gate */
.gate-body { display: grid; min-height: 100vh; place-items: center; background: radial-gradient(circle at 20% 20%, #eef6ff, transparent 40%), radial-gradient(circle at 80% 30%, #f1fff7, transparent 30%); }
.gate { width: 100%; }
.gate-card { width: min(440px, calc(100% - 32px)); margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
.gate-card h1 { margin-top: 0; }
.gate-form { display: grid; gap: 10px; margin-top: 10px; }
.gate-form input { padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; }
.gate-form button { padding: 10px 12px; border: 1px solid #0a49ff; background: #0a49ff; color: #fff; font-weight: 600; border-radius: 8px; cursor: pointer; }
.gate-form button:hover { filter: brightness(0.95); }
.gate-msg { min-height: 1.2em; color: #b00020; }


/* Make hero non-sticky on mobile (it scrolls away) */
@media (max-width: 768px){
  #heroWrapper { position: static; top: auto; }
}