/* OVORAS design system - mockup stylesheet */

* { margin:0; padding:0; box-sizing:border-box; }
html,body { background:#ffffff; }
body {
  font-family: 'Liberation Sans', Arial, sans-serif;
  color:#14171C;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {
  font-family:'Poppins', Arial, sans-serif;
  font-weight:500;
  color:#14171C;
  line-height:1.2;
}
a { text-decoration:none; color:inherit; }
img { border:0; }
.wrap { max-width:1160px; margin:0 auto; padding:0 40px; }
.clear:after { content:""; display:table; clear:both; }

/* ---------- Nav ---------- */
.nav {
  border-bottom:1px solid #E3E5E9;
}
.nav .wrap { padding-top:22px; padding-bottom:22px; }
.nav-logo { float:left; display:block; }
.logo-img { height:22px; width:auto; display:block; }
.nav-links { float:right; }
.nav-links a { display:inline-block; margin-left:34px; font-size:14px; color:#40454D; }
.nav-links a.current { color:#14171C; font-weight:700; }
.nav-cta {
  display:inline-block; margin-left:34px; background:#0A46F0; color:#ffffff !important;
  padding:10px 20px; border-radius:4px; font-size:14px; font-weight:700;
}
.nav-mobile-icon { display:none; float:right; font-size:22px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; padding:14px 26px; border-radius:4px; font-size:15px; font-weight:700;
  font-family:'Liberation Sans', Arial, sans-serif;
}
.btn-primary { background:#0A46F0; color:#ffffff !important; }
.btn-outline { background:transparent; color:#14171C !important; border:1.5px solid #14171C; padding:12.5px 24px; }
.btn-white { background:#ffffff; color:#0A46F0 !important; }
.btn-outline-light { background:transparent; color:#ffffff !important; border:1.5px solid rgba(255,255,255,0.55); padding:12.5px 24px; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding:96px 0 88px; }
.hero-copy { width:52%; float:left; position:relative; z-index:2; }
.hero-copy h1 { font-size:46px; letter-spacing:-0.5px; margin-bottom:22px; }
.hero-copy p.lead { font-size:18px; color:#4B505A; max-width:460px; margin-bottom:34px; }
.hero-panel {
  position:absolute; top:-20%; right:-18%; width:62%; height:145%;
  background:#0A46F0;
  -webkit-transform:skewX(-9deg);
  transform:skewX(-9deg);
  z-index:1;
}
.hero-mark {
  position:absolute; right:9%; top:38%; width:150px; height:130px; z-index:2; opacity:0.95;
}

/* ---------- Sections ---------- */
.section { padding:84px 0; }
.section-tint { background:#F5F6F8; }
.section-navy { background:#0B1230; color:#ffffff; }
.section-navy h2 { color:#ffffff; }
.section h2 { font-size:32px; margin-bottom:16px; max-width:620px; }
.section p.section-lead { font-size:17px; color:#4B505A; max-width:600px; margin-bottom:56px; }
.section-navy p.section-lead { color:#B7C1E0; }

/* ---------- Services list (no numbering - not a sequence) ---------- */
.svc-row { border-top:1px solid #E3E5E9; padding:34px 0; }
.svc-row:last-child { border-bottom:1px solid #E3E5E9; }
.svc-icon { float:left; width:64px; }
.svc-icon .dot { width:44px; height:44px; border-radius:50%; background:#EAF0FE; position:relative; }
.svc-body { margin-left:64px; }
.svc-body h3 { font-size:20px; margin-bottom:8px; }
.svc-body p { color:#4B505A; font-size:15px; max-width:640px; }

/* ---------- Process (real sequence -> numbered) ---------- */
.process { position:relative; }
.process-line { position:absolute; top:22px; left:0; right:0; height:1px; background:#D8DCE3; }
.process-steps { position:relative; }
.process-step { float:left; width:33.333%; padding-right:36px; }
.process-num {
  width:44px; height:44px; border-radius:50%; background:#0A46F0; color:#fff;
  font-family:'Poppins', Arial, sans-serif; font-weight:600; font-size:16px;
  display:block; text-align:center; line-height:44px; position:relative; z-index:2; margin-bottom:22px;
}
.process-step h3 { font-size:18px; margin-bottom:8px; }
.process-step p { color:#4B505A; font-size:14px; }

/* ---------- CTA band ---------- */
.cta-band { text-align:left; }
.cta-band h2 { font-size:30px; max-width:520px; margin-bottom:28px; color:#ffffff; }

/* ---------- Footer ---------- */
.footer { padding:50px 0; border-top:1px solid #E3E5E9; }
.footer-logo { float:left; }
.logo-img-footer { height:18px; width:auto; display:block; }
.footer-links { float:right; }
.footer-links a { margin-left:26px; font-size:13px; color:#6B7280; }
.footer-note { clear:both; padding-top:26px; font-size:12px; color:#9AA0AA; }

/* ---------- Page header (interior pages) ---------- */
.page-header { padding:78px 0 60px; }
.page-header h1 { font-size:40px; max-width:640px; margin-bottom:20px; }
.page-header p { font-size:17px; color:#4B505A; max-width:560px; }

/* ---------- Two-col alternating feature rows (Services page) ---------- */
.feature-row { padding:60px 0; border-top:1px solid #E3E5E9; }
.feature-copy { width:46%; }
.feature-copy.right { float:right; }
.feature-copy.left { float:left; }
.feature-graphic { width:44%; height:260px; background:#EAF0FE; border-radius:8px; position:relative; overflow:hidden; }
.feature-graphic.right { float:right; }
.feature-graphic.left { float:left; }
.feature-graphic .chip { position:absolute; width:120px; height:120px; background:#0A46F0; opacity:0.14; border-radius:50%; }
.feature-copy h2 { font-size:27px; margin-bottom:14px; }
.feature-copy p { color:#4B505A; font-size:15px; margin-bottom:20px; max-width:420px; }
.feature-copy ul { list-style:none; }
.feature-copy li { font-size:14px; color:#14171C; padding:9px 0; border-top:1px solid #ECEEF1; }
.feature-copy li:first-child { border-top:0; }

/* ---------- About page ---------- */
.about-grid { }
.about-copy { width:56%; float:left; }
.about-copy p { color:#4B505A; font-size:16px; margin-bottom:20px; max-width:480px; }
.about-values { width:38%; float:right; }
.value-item { border-top:1px solid #E3E5E9; padding:20px 0; }
.value-item:last-child { border-bottom:1px solid #E3E5E9; }
.value-item h4 { font-size:16px; margin-bottom:6px; }
.value-item p { font-size:14px; color:#4B505A; margin:0; }
.growth-graphic { position:relative; height:170px; margin-top:50px; }
.growth-line { position:absolute; bottom:0; left:0; width:100%; height:2px; background:#E3E5E9; }
.growth-bar { position:absolute; bottom:2px; width:34px; background:#0A46F0; opacity:0.85; border-radius:3px 3px 0 0; }

/* ---------- Contact page ---------- */
.contact-grid { }
.contact-info { width:38%; float:left; }
.contact-info h3 { font-size:16px; margin-bottom:6px; margin-top:26px; }
.contact-info h3:first-child { margin-top:0; }
.contact-info p { font-size:15px; color:#4B505A; }
.contact-form { width:54%; float:right; background:#F5F6F8; border-radius:8px; padding:36px; }
.field { margin-bottom:20px; }
.field label { display:block; font-size:13px; color:#4B505A; margin-bottom:8px; }
.field input, .field textarea {
  width:100%; border:1px solid #D8DCE3; border-radius:4px; padding:12px 14px; font-size:15px;
  font-family:'Liberation Sans', Arial, sans-serif; background:#ffffff;
}
.field textarea { height:110px; }

/* ---------- Mobile ---------- */
@media (max-width:760px) {
  .wrap { padding:0 22px; }
  .nav-links { display:none; }
  .nav-mobile-icon { display:block; }
  .hero { padding:52px 0 60px; }
  .hero-copy { width:100%; float:none; }
  .hero-copy h1 { font-size:30px; }
  .hero-copy p.lead { font-size:15px; max-width:100%; }
  .hero-panel { display:none; }
  .hero-mark { display:none; }
  .section { padding:52px 0; }
  .section h2 { font-size:24px; }
  .section p.section-lead { margin-bottom:34px; font-size:15px; }
  .svc-body { margin-left:0; }
  .svc-icon { float:none; margin-bottom:12px; }
  .process-step { width:100%; float:none; padding-right:0; margin-bottom:26px; }
  .process-line { display:none; }
  .cta-band h2 { font-size:24px; }
  .footer-logo, .footer-links { float:none; }
  .footer-links { margin-top:14px; }
  .footer-links a { margin-left:0; margin-right:20px; }
  .page-header { padding:44px 0 34px; }
  .page-header h1 { font-size:28px; }
  .feature-row { padding:40px 0; }
  .feature-copy, .feature-graphic { width:100%; float:none; }
  .feature-graphic { height:180px; margin-bottom:22px; }
  .feature-copy.right, .feature-copy.left { float:none; }
  .about-copy, .about-values { width:100%; float:none; }
  .about-values { margin-top:30px; }
  .contact-info, .contact-form { width:100%; float:none; }
  .contact-form { margin-top:30px; padding:24px; }
}