/* SER — blue technology theme. Shared by the public site and management panel. */
:root {
  --paper: #f7f9ff;
  --ink: #122449;
  --muted: #667693;
  --accent: #2663eb;
  --line: #dfe7f5;
}
body { background: radial-gradient(ellipse at 85% 0, #e6efff 0, transparent 30%), var(--paper); }
.site-header { height: 92px; border: 0; }
.brand-mark { color: #122449; }
.site-header nav { gap: 32px; }
.nav-contact { background: #fff; border: 1px solid #d9e3f7; border-radius: 30px; padding: 12px 21px; box-shadow: 0 4px 12px #163a7405; }
.nav-contact:hover { background: #eaf1ff; }
.hero { position: relative; isolation: isolate; background: #0b1630; border: 1px solid #1a3157; color: #f5f8ff; border-radius: 30px; padding: 60px 48px; margin-top: 14px; margin-bottom: 38px; gap: 18px; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 85% 30%, #164c9a5c, transparent 60%), radial-gradient(ellipse at 5% 95%, #16346570, transparent 50%); }
.hero .eyebrow { display: inline-flex; padding: 8px 12px; border: 1px solid #46638d70; border-radius: 30px; color: #a9c3e9; font-size: 8px; letter-spacing: 1.4px; background: #1c3a5a42; }
.hero .dot { background: #65bcff; box-shadow: 0 0 12px #55b9ff; }
.hero h1 { font-size: clamp(40px, 4.25vw, 62px); line-height: 1.13; font-weight: 650; letter-spacing: -3px; margin-block: 27px 24px; }
.serif { font-family: inherit; font-style: normal; font-weight: 600; }
.hero h1 .serif { color: #7ab5ff; background: linear-gradient(100deg, #64c9ff, #8fa2ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .accent { color: #6bbaff; }
.hero-copy > p { color: #a8b8d1; font-size: 13px; max-width: 405px; }
.hero-actions { gap: 22px; margin-top: 30px; }
.button { border-radius: 11px; font-size: 12px; padding: 15px 20px; }
.primary { background: linear-gradient(115deg, #2875f6, #365bea); box-shadow: 0 6px 20px #2563eb21; }
.primary:hover { background: linear-gradient(115deg, #3885ff, #486df5); box-shadow: 0 8px 25px #2563eb38; }
.hero .primary { border: 1px solid #76a4ff55; box-shadow: 0 8px 30px #1549d150; }
.hero .text-link { color: #d7e4fa; font-size: 11px; }
.hero .text-link:hover { color: #8eceff; }
.hero-note { color: #8099bd; font-size: 9px; margin-top: 34px; }
.mini-line { background: #668fc3; }
.hero-visual { background: transparent; border-radius: 0; overflow: visible; aspect-ratio: 1; }
.hero-visual > img { object-fit: contain; }
.visual-label { top: -2px; left: 28px; color: #85a4cf; font-size: 7px; letter-spacing: 1.4px; }
.visual-bottom { bottom: -4px; left: 30px; right: 12px; color: #7696c1; font-size: 7px; line-height: 1.8; }
.visual-bottom strong { color: #bfd4ee; font-size: 10px; font-weight: 400; }
.round-arrow { border-color: #325482; color: #8cc5ff; width: 34px; height: 34px; }
.expertise-strip { background: #edf3ff88; border-color: #e3eafa; }
.strip-inner { padding-block: 20px; }
.strip-inner > span { color: #677c9e; }
.strip-inner strong { color: #405b85; font-size: 12px; }
.strip-inner i { color: #5b93ee; }
.section { padding-block: 78px; }
.eyebrow { color: #4c75b7; font-size: 9px; letter-spacing: 1.5px; }
h2 { font-size: 37px; font-weight: 600; line-height: 1.25; }
.muted { color: #7b91b0; }
.section-heading > p { color: #6b7d98; }
.services-grid { border: 0; gap: 15px; border-radius: 0; overflow: visible; }
.service-card { background: #fff; border: 1px solid #dfe7f5 !important; border-radius: 18px; padding: 25px 22px; box-shadow: 0 6px 20px #234b7e04; transition: transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { transform: translateY(-6px); border-color: #adc6f7 !important; box-shadow: 0 18px 35px #234b7e10; }
.service-top { margin-bottom: 30px; color: #879cbe; }
.service-icon { color: #2b6de9; background: #eef4ff; border: 1px solid #e3ebfc; width: 47px; height: 47px; border-radius: 13px; display: grid; place-items: center; font-size: 25px; }
.tiny-label { color: #6483b2; }
.service-card h3 { font-weight: 600; font-size: 18px; }
.service-card p { color: #6b7d98; font-size: 11px; }
.service-card > a { border-color: #e6edfa; color: #3b659e; }
.projects-section { background: #edf3ff; border-top: 1px solid #e4ecfc; border-bottom: 1px solid #e4ecfc; }
.projects-section h2 .serif { color: #3866af; }
.project-grid { gap: 25px; }
.project-card { background: #fff; border: 1px solid #dee8f8; border-radius: 19px; padding: 9px 9px 24px; box-shadow: 0 7px 22px #21487d05; transition: transform .25s, box-shadow .25s; }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 17px 35px #21487d14; }
.project-image { border-radius: 12px; background: #e1ecff; }
.image-arrow { color: #2768db; box-shadow: 0 4px 15px #11285418; background: white; }
.project-meta { margin: 18px 14px 10px; color: #6681a8; }
.project-meta > span:last-child:not(:first-child) { background: #f0f5ff; border-radius: 20px; padding: 2px 8px; font-size: 8px; }
.project-card h3 { margin: 5px 14px 8px; font-weight: 600; font-size: 20px; }
.project-card p { margin-inline: 14px; color: #7585a0; font-size: 11px; }
.concept-note { color: #7487a5; }
.filters button { border-color: #d3dff4; color: #567298; background: #ffffff80; }
.filters .selected { background: #2864e9; border-color: #2864e9; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.steps article { background: #fff; padding: 19px 20px !important; border: 1px solid #e1e9f7; border-radius: 14px; align-items: flex-start; gap: 18px; }
.steps article > span:first-child { background: #eef4ff; border-radius: 8px; padding: 6px 8px; margin: 0; font-size: 9px; }
.steps h3 { font-size: 16px; font-weight: 600; }
.steps p { color: #6c7f9e; }
.steps .step-cross { color: #8aa6cb; }
.cta { border-radius: 25px; background: radial-gradient(ellipse at 100% 0, #234f9c, transparent 65%), #0c1c3b; padding: 48px 50px; border: 1px solid #294c7a; }
.cta .eyebrow { color: #83a9e1; }
.cta h2 { font-size: 37px; font-weight: 500; }
.cta .serif { color: #93c1ff; font-weight: 500; }
.cta-arrow { border-color: #4776b6; color: #afdaff; width: 80px; height: 80px; font-size: 42px; background: #294c7a42; }
.footer-top p, .footer-bottom { color: #7285a3; }
.footer-bottom { border-color: #dfe7f5; }
.contact-layout .serif { color: #2864e9; }
.contact-form, .auth-card { background: #fff; border: 1px solid #dee7f6; border-radius: 22px; box-shadow: 0 12px 50px #204a8b07; }
.contact-form h2 { font-size: 23px; }
input, textarea, select { background: #f8faff; border-color: #dce5f5; border-radius: 9px; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px #2864e916; }
.notice { background: #eef4ff; border-color: #d2e1fc; color: #28578e; border-radius: 9px; }
.notice.error { background: #fff0ec; border-color: #ffd3c5; color: #973f27; }
.form-note { color: #7385a1; }
.detail-image { border-radius: 20px; }
.admin-body { background: #f2f6fd; }
.admin-sidebar { background: #fff; border-color: #e0e8f6; }
.admin-sidebar nav a { border-radius: 10px; color: #62789b; }
.admin-sidebar nav a.selected { background: #eaf1ff; color: #2258c7; font-weight: 600; }
.admin-panel, .stat-grid article { background: white; border-color: #e0e8f6; border-radius: 15px; }
.stat-grid strong { color: #2b62cd; }
.admin-panel h2 { font-size: 26px; }
.secondary { background: #edf3ff; color: #2b62cd; }
.auth-card h1 { font-weight: 600; }
@media (max-width:1100px) {
  .hero { padding: 40px 28px; grid-template-columns: 1.1fr 1fr; gap: 10px; }
  .hero h1 { font-size: 44px; letter-spacing: -2.3px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .8px; }
  .hero-actions { flex-wrap: wrap; gap: 18px; }
  .visual-bottom { left: 13px; bottom: -18px; }
  .visual-label { left: 14px; font-size: 6px; }
}
@media (max-width:760px) {
  .site-header { height: 82px; }
  .site-header nav { top: 82px; background: #f7f9ff; border-bottom: 1px solid #dfe7f5; }
  .menu-toggle { border-radius: 20px; background: white; border-color: #dfe7f5; color: #24487d; }
  .hero { width: calc(100% - 24px); margin-top: 5px; margin-bottom: 25px; padding: 31px 23px 35px; border-radius: 22px; grid-template-columns: 1fr; gap: 35px; }
  .hero h1 { font-size: clamp(32px, 8.8vw, 53px); letter-spacing: -1.8px; line-height: 1.18; }
  .hero-copy > p { max-width: 100%; font-size: 12px; }
  .hero-actions { gap: 20px; }
  .hero .eyebrow { padding: 7px 10px; font-size: 6px; letter-spacing: .9px; }
  .hero-note { margin-top: 25px; font-size: 8px; }
  .hero-visual { aspect-ratio: 1.06; margin-top: 9px; }
  .visual-label { top: -11px; left: 5px; font-size: 6px; }
  .visual-bottom { bottom: -12px; left: 5px; right: 0; font-size: 6px; }
  .visual-bottom strong { font-size: 8px; }
  .section { padding-block: 52px; }
  h2 { font-size: 28px; }
  .services-grid { gap: 10px; }
  .service-card { padding: 18px 14px; border-radius: 14px; }
  .service-top { margin-bottom: 24px; }
  .service-icon { width: 39px; height: 39px; border-radius: 10px; font-size: 22px; }
  .service-card h3 { font-size: 16px; }
  .service-card p { font-size: 10px; }
  .project-card { padding-bottom: 20px; }
  .project-card h3 { font-size: 18px; }
  .project-meta { margin-inline: 10px; }
  .project-card h3, .project-card p { margin-inline: 10px; }
  .cta { padding: 30px 24px; border-radius: 19px; gap: 12px; }
  .cta h2 { font-size: 27px; }
  .cta-arrow { width: 48px; height: 48px; min-width: 48px; font-size: 28px; }
  .contact-form { padding: 24px; }
  .contact-form h2 { font-size: 22px; }
}
@media (max-width:360px) {
  .services-grid { grid-template-columns: 1fr; }
  .hero { padding-inline: 20px; }
}