/* Core Reset */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: 'Inter', system-ui, Arial, sans-serif; color:#1d1d1f; background:#fff; line-height:1.55; -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }
a { color:#0a6cff; text-decoration:none; }
a:hover, a:focus { text-decoration:underline; }

/* Layout */
.container { width:100%; max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.two-col { display:grid; gap:3rem; align-items:start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Header */
.site-header { position:sticky; top:0; background:rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-bottom:1px solid #eee; z-index:1000; }
.nav-wrapper { display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.logo { font-weight:800; font-size:1.35rem; letter-spacing:0.5px; }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:2rem; }
.main-nav a { font-weight:500; position:relative; padding:0.25rem 0; }
.main-nav a.active, .main-nav a:hover { color:#0a6cff; }
.main-nav a.active::after, .main-nav a:hover::after { content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:#0a6cff; border-radius:2px; }
.nav-toggle { display:none; background:none; border:1px solid #ccc; padding:0.4rem 0.7rem; border-radius:6px; cursor:pointer; font-size:1.1rem; }
@media (max-width: 800px) {
  .main-nav { position:absolute; top:64px; right:0; background:#fff; width:240px; box-shadow:0 10px 30px -10px rgba(0,0,0,0.15); transform:translateX(110%); transition:transform .35s ease; }
  .main-nav.open { transform:translateX(0); }
  .main-nav ul { flex-direction:column; padding:1.25rem; gap:0.75rem; }
  .nav-toggle { display:inline-block; }
}

/* Hero */
.hero { position:relative; min-height:72vh; display:flex; align-items:center; background:linear-gradient(120deg,#0a6cff,#62d66a); color:#fff; overflow:hidden; }
.hero-content { position:relative; z-index:2; padding:5rem 0 4rem; }
.hero h1 { font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; margin:0 0 1.25rem; max-width:16ch; font-weight:800; }
.hero .tagline { font-size:1.15rem; max-width:48ch; margin:0 0 2rem; }
.hero-bg-overlay { position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,0.18), transparent 70%), radial-gradient(circle at 30% 70%, rgba(255,255,255,0.15), transparent 65%); mix-blend-mode:overlay; pointer-events:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; padding:0.85rem 1.35rem; border-radius:12px; font-size:0.95rem; line-height:1.1; cursor:pointer; transition:background .25s, color .25s, box-shadow .25s; border:2px solid transparent; }
.btn.primary { background:#0a6cff; color:#fff; }
.btn.primary:hover { background:#085cda; }
.btn.outline { background:transparent; border-color:#fff; color:#fff; }
.btn.outline:hover { background:#fff; color:#0a6cff; }
.btn.subtle { background:rgba(255,255,255,0.12); color:#fff; }
.btn.subtle:hover { background:rgba(255,255,255,0.25); }
.btn.sm { padding:0.65rem 1rem; font-size:0.85rem; }

.hero-cta { display:flex; flex-wrap:wrap; gap:0.85rem; }

/* Highlights */
.highlights { padding:5rem 0 4rem; background:#f9fbfc; }
.section-title { text-align:center; margin:0 0 3.25rem; font-size:2.15rem; font-weight:700; }
.cards-grid { display:grid; gap:2rem; }
@media (min-width: 800px) { .cards-grid { grid-template-columns: repeat(3,1fr); } }
.card { background:#fff; border:1px solid #e6eaf0; padding:1.75rem 1.5rem 1.9rem; border-radius:20px; position:relative; box-shadow:0 4px 14px -6px rgba(0,0,0,0.08); transition:transform .35s, box-shadow .35s; }
.card:hover, .card:focus { transform:translateY(-6px); box-shadow:0 12px 32px -10px rgba(0,0,0,0.15); outline:none; }
.card .icon { font-size:2rem; margin-bottom:0.75rem; }
.card h3 { margin:0 0 0.5rem; font-size:1.15rem; }
.card p { margin:0; font-size:0.95rem; }

/* About preview */
.about-preview { padding:4.5rem 0; }
.about-preview p { margin-top:0; }
.inline-bullets { list-style:none; padding:0; margin:1rem 0 1.5rem; display:grid; gap:0.4rem; font-size:0.92rem; }
.about-accent { display:grid; gap:1rem; margin-top:2rem; }
.stat-block { background:linear-gradient(135deg,#0a6cff,#62d66a); color:#fff; padding:1.2rem 1.1rem; border-radius:16px; font-size:0.85rem; display:flex; flex-direction:column; min-height:90px; justify-content:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.3); }
.stat-block strong { font-size:0.95rem; letter-spacing:0.5px; }

/* Products Preview */
.products-preview { padding:4.5rem 0; background:#fff; }
.products-preview .lead { max-width:60ch; }
.product-grid { display:grid; gap:1.5rem; margin-top:2.5rem; }
@media (min-width: 800px) { .product-grid { grid-template-columns: repeat(3,1fr); } }
.product-card { background:#fff; border:1px solid #e6eaf0; border-radius:18px; height:180px; }
.skeleton { position:relative; overflow:hidden; background:#f0f3f6; }
.skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%); animation:shimmer 1.8s infinite; }
@keyframes shimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }

/* Careers Preview */
.careers-preview { padding:4.5rem 0; background:#f9fbfc; }
.careers-grid { display:grid; gap:1.5rem; margin:2rem 0 2.25rem; }
@media (min-width: 900px) { .careers-grid { grid-template-columns: repeat(4,1fr); } }
.career-pillar { background:#fff; border:1px solid #e6eaf0; border-radius:18px; padding:1.25rem 1.1rem 1.4rem; box-shadow:0 4px 10px -6px rgba(0,0,0,0.06); }
.career-pillar h3 { margin:0 0 .5rem; font-size:1rem; }
.career-pillar p { margin:0; font-size:0.85rem; line-height:1.35; }

/* Contact CTA */
.contact-cta { background:linear-gradient(120deg,#0a6cff,#62d66a); color:#fff; text-align:center; padding:4.5rem 0; }
.contact-cta p { margin:0 auto 2rem; max-width:60ch; }

/* Footer */
.site-footer { background:#0c1115; color:#d0d7de; padding:3.5rem 0 2.75rem; margin-top:4rem; font-size:0.85rem; }
.footer-grid { display:grid; gap:2.5rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; align-items:start; } }
.footer-nav { list-style:none; margin:0; padding:0; display:grid; gap:0.55rem; }
.footer-nav a { color:#d0d7de; }
.footer-nav a:hover { color:#fff; }
.footer-tagline { font-size:0.85rem; max-width:36ch; }
.footer-meta { display:flex; align-items:flex-end; }

/* Interior Pages */
.page-hero.small { background:linear-gradient(120deg,#0a6cff,#62d66a); color:#fff; padding:5rem 0 4rem; }
.page-hero h1 { margin:0 0 1rem; font-size:2.6rem; font-weight:800; }
.page-main section { padding-top:3rem; }
.story p + p { margin-top:1rem; }
.mission-vision { background:#f9fbfc; padding:4rem 0; }
.values { padding:4rem 0 1rem; }
.pillars-grid { display:grid; gap:1.5rem; margin-top:2rem; }
@media (min-width: 900px) { .pillars-grid { grid-template-columns: repeat(4,1fr); } }
.pillar { background:#fff; border:1px solid #e6eaf0; border-radius:16px; padding:1.25rem 1.1rem 1.4rem; box-shadow:0 4px 10px -6px rgba(0,0,0,0.06); }
.pillar h3 { margin:0 0 0.5rem; font-size:1rem; }
.partnerships { background:#fff; padding:4rem 0 2rem; }
.cta-band { background:#0c1115; color:#fff; padding:3.25rem 0; margin-top:4rem; }
.cta-flex { display:grid; gap:2rem; }
@media (min-width: 800px) { .cta-flex { grid-template-columns: 2fr 1fr; align-items:center; } }
.cta-actions { display:flex; gap:0.85rem; flex-wrap:wrap; }

/* Careers Page */
.why-join { padding-top:3rem; }
.benefits-list { list-style:disc; padding-left:1.25rem; display:grid; gap:0.4rem; margin:1rem 0 2rem; }
.teams { background:#f9fbfc; padding:4rem 0; }
.team-grid { display:grid; gap:1.5rem; margin-top:2rem; }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4,1fr); } }
.team-card { background:#fff; border:1px solid #e6eaf0; padding:1.25rem 1.1rem 1.4rem; border-radius:16px; box-shadow:0 4px 10px -6px rgba(0,0,0,0.06); }
.open-roles { background:#fff; padding:4rem 0; }
.apply-form { display:grid; gap:1.2rem; max-width:560px; }
.form-row { display:flex; flex-direction:column; gap:0.4rem; }
label { font-weight:600; font-size:0.85rem; letter-spacing:0.5px; text-transform:uppercase; }
input[type=text], input[type=email], select, textarea { font:inherit; padding:0.75rem 0.85rem; border:1px solid #d0d7de; border-radius:10px; background:#fff; transition:border-color .25s, box-shadow .25s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#0a6cff; box-shadow:0 0 0 3px rgba(10,108,255,0.25); }
.error { color:#c62828; font-size:0.7rem; min-height:0.9rem; }
.form-success { margin-top:0.5rem; font-size:0.85rem; color:#0a6c3a; font-weight:600; }
.culture { background:#f9fbfc; padding:4rem 0; }
.culture-points { list-style:disc; padding-left:1.25rem; display:grid; gap:0.4rem; }

/* Utilities */
.lead { font-size:1.05rem; font-weight:500; }
.text-link { font-weight:600; }
.placeholder { opacity:0.9; }

/* Accessibility focus */
:focus-visible { outline:3px solid #0a6cff; outline-offset:2px; }

/* Animations subtle */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation:fadeSlide 1s ease both; }
  .hero .tagline { animation:fadeSlide 1s .15s ease both; }
  .hero-cta { animation:fadeSlide 1s .3s ease both; }
}
@keyframes fadeSlide { from { opacity:0; transform:translateY(18px);} to { opacity:1; transform:translateY(0);} }

/* Dark scheme support */
@media (prefers-color-scheme: dark) {
  body { background:#0f1418; color:#e5e8ea; }
  .site-header { background:rgba(15,20,24,0.92); border-color:#1f262c; }
  .card, .career-pillar, .pillar, .team-card, .product-card { background:#182027; border-color:#263038; }
  .card p, .career-pillar p, .pillar p { color:#c7d0d6; }
  .highlights, .careers-preview, .mission-vision, .teams, .culture { background:#12181d; }
  .values, .open-roles { background:#0f1418; }
  input[type=text], input[type=email], select, textarea { background:#182027; border-color:#2a333b; color:#e5e8ea; }
  .footer-nav a { color:#9fb2c2; }
  .footer-nav a:hover { color:#fff; }
  .product-card.skeleton { background:#1b242b; }
}