html {  scroll-behavior: smooth;  scroll-padding-top: 120px;}body {  margin: 0;  font-family: 'Segoe UI', sans-serif;  background-color: #0b1a2d;  color: #f0f0f0;  overflow-x: hidden;}body.nav-open {  overflow: hidden;}.sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;}@keyframes heroFade {  from {    opacity: 0;    transform: translateY(35px);  }  to {    opacity: 1;    transform: translateY(0);  }}@keyframes heroPulse {  0%, 100% {    transform: scale(1);    text-shadow: 0 0 15px rgba(174, 226, 255, 0.6);  }  50% {    transform: scale(1.015);    text-shadow: 0 0 25px rgba(174, 226, 255, 0.85);  }}@keyframes subHeroPulse {  0%, 100% {    transform: scale(1);    text-shadow: 0 0 8px rgba(208, 232, 255, 0.3);  }  50% {    transform: scale(1.01);    text-shadow: 0 0 14px rgba(208, 232, 255, 0.55);  }}.top-bar {  position: sticky;  top: 0;  z-index: 20;  display: flex;  align-items: center;  justify-content: space-between;  padding: 18px 32px;  background: rgba(8, 18, 35, 0.92);  backdrop-filter: blur(14px);  border-bottom: 1px solid rgba(174, 226, 255, 0.12);  gap: 24px;}.top-actions {  display: flex;  align-items: center;  gap: 18px;  margin-left: auto;}.main-nav {  position: relative;  display: flex;  align-items: center;  gap: 18px;}.nav-list {  display: flex;  list-style: none;  gap: 20px;  margin: 0;  padding: 0;}.nav-list a {  color: #d0e8ff;  font-weight: 500;  text-decoration: none;  padding: 6px 10px;  border-radius: 6px;  transition: background 0.3s ease, color 0.3s ease;}.nav-list a:hover,.nav-list a:focus {  background: rgba(174, 226, 255, 0.18);  color: #fff;  outline: none;}.menu-toggle {  display: none;  background: rgba(14, 34, 61, 0.6);  border: 1px solid rgba(174, 226, 255, 0.45);  border-radius: 6px;  padding: 8px;  cursor: pointer;  transition: background 0.3s ease, border-color 0.3s ease;}.menu-toggle:hover {  background: rgba(14, 34, 61, 0.8);  border-color: rgba(174, 226, 255, 0.8);}.menu-toggle:focus-visible {  outline: 2px solid rgba(174, 226, 255, 0.8);  outline-offset: 3px;}.menu-icon {  position: relative;  display: block;  width: 22px;  height: 2px;  background: #d0e8ff;}.menu-icon::before,.menu-icon::after {  content: '';  position: absolute;  left: 0;  width: 22px;  height: 2px;  background: #d0e8ff;  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;}.menu-icon::before {  top: -6px;}.menu-icon::after {  top: 6px;}body.nav-open .menu-icon {  background: transparent;}body.nav-open .menu-icon::before {  top: 0;  transform: rotate(45deg);}body.nav-open .menu-icon::after {  top: 0;  transform: rotate(-45deg);}.brand {  display: flex;  align-items: center;  gap: 12px;  color: #d0e8ff;  text-decoration: none;  transition: transform 0.2s ease;}.brand:hover {  transform: translateY(-2px);}.brand img {  width: 64px;  height: 64px;  object-fit: contain;  opacity: 0.82;  transition: opacity 0.3s ease, filter 0.3s ease;  mix-blend-mode: screen;}.brand:hover img {  opacity: 1;  filter: drop-shadow(0 0 12px rgba(174, 226, 255, 0.55));}.brand span {  font-size: 1rem;  font-weight: 600;  color: #d0e8ff;  text-shadow: 0 0 10px rgba(174, 226, 255, 0.5);  letter-spacing: 0.02em;}header {  display: flex;  align-items: center;  justify-content: center;  text-align: left;  padding: 160px 20px 100px;  min-height: 520px;  background: linear-gradient(rgba(5,10,20,0.7), rgba(5,10,20,0.9)), url('image.png') center/cover no-repeat;  position: relative;}.hero-content {  display: flex;  align-items: center;  justify-content: space-between;  gap: 70px;  max-width: 1100px;  width: 100%;  position: relative;  z-index: 1;}.hero-left {  flex: 1;  display: flex;  flex-direction: column;  gap: 24px;  text-align: left;}.hero-badge {  align-self: flex-start;  background: rgba(174, 226, 255, 0.12);  color: #aee2ff;  border: 1px solid rgba(174, 226, 255, 0.3);  border-radius: 999px;  padding: 8px 16px;  font-size: 0.85rem;  letter-spacing: 0.08em;  text-transform: uppercase;}.hero-actions {  display: flex;  flex-wrap: wrap;  gap: 16px;  margin-top: 10px;}.btn {  display: inline-flex;  align-items: center;  gap: 8px;  padding: 12px 22px;  border-radius: 999px;  font-weight: 600;  text-decoration: none;  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;}.btn.primary {  background: linear-gradient(135deg, #7fc9f9, #aee2ff);  color: #081223;  box-shadow: 0 10px 30px rgba(126, 201, 249, 0.35);}.btn.primary:hover {  transform: translateY(-2px);  box-shadow: 0 16px 35px rgba(126, 201, 249, 0.45);}.btn.secondary {  background: rgba(14, 34, 61, 0.7);  color: #d0e8ff;  border: 1px solid rgba(174, 226, 255, 0.35);}.btn.secondary:hover {  transform: translateY(-2px);  background: rgba(14, 34, 61, 0.95);  box-shadow: 0 16px 30px rgba(8, 18, 35, 0.45);}.hero-right {  flex: 1;  position: relative;  min-height: 340px;  display: flex;  align-items: center;  justify-content: center;}.hero-card {  position: absolute;  background: rgba(8, 18, 35, 0.72);  border: 1px solid rgba(174, 226, 255, 0.25);  border-radius: 18px;  padding: 16px;  box-shadow: 0 18px 40px rgba(8, 18, 35, 0.45);  backdrop-filter: blur(18px);  display: flex;  flex-direction: column;  gap: 12px;  max-width: 260px;  transition: transform 0.3s ease, box-shadow 0.3s ease;  z-index: 1;}.hero-card img {  width: 100%;  border-radius: 14px;}.hero-card span {  display: inline-flex;  align-items: center;  justify-content: center;  font-size: 0.95rem;  color: #f0f6ff;  font-weight: 600;  text-align: center;  background: linear-gradient(135deg, rgba(14, 34, 61, 0.82), rgba(8, 18, 35, 0.9));  padding: 10px 18px;  border-radius: 16px;  margin-top: 12px;  box-shadow: 0 12px 22px rgba(8, 18, 35, 0.45);}.hero-card:hover {  transform: translateY(-6px);  box-shadow: 0 24px 45px rgba(8, 18, 35, 0.6);}.hero-card-main {  top: -10px;  left: calc(50% - 130px);  width: 260px;  z-index: 3;}.hero-card-secondary {  bottom: 10px;  left: -10px;  width: 210px;  z-index: 2;}.hero-card-tertiary {  bottom: -40px;  right: -20px;  width: 220px;  z-index: 1;}header h1 {  font-size: 3.2em;  color: #fff;  text-shadow: 0 0 15px #aee2ff;  opacity: 0;  position: relative;  z-index: 1;  margin: 0;  line-height: 1.1;  max-width: 520px;  animation: heroFade 1.2s ease-out forwards, heroPulse 8s ease-in-out 1.2s infinite;}header p {  font-size: 1.2em;  max-width: 600px;  margin: 0;  color: #d0e8ff;  opacity: 0;  position: relative;  z-index: 1;  animation: heroFade 1.2s ease-out 0.2s forwards, subHeroPulse 9s ease-in-out 1.5s infinite;}header::after {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);  z-index: 0;  pointer-events: none;}section {  max-width: 1100px;  margin: 100px auto;  padding: 0 28px;  text-align: left;}h2 {  font-size: 2.4em;  color: #aee2ff;  margin-bottom: 20px;}p {  line-height: 1.8;  font-size: 1.05em;  color: #dbe7ff;}.section-eyebrow {  display: inline-flex;  align-items: center;  gap: 10px;  font-size: 0.9rem;  letter-spacing: 0.18em;  text-transform: uppercase;  color: #7fc9f9;}.section-eyebrow::before {  content: '';  display: inline-block;  width: 34px;  height: 1px;  background: linear-gradient(90deg, rgba(126, 201, 249, 0), rgba(126, 201, 249, 0.75));}.section-header {  display: flex;  flex-direction: column;  gap: 16px;  max-width: 720px;  margin-bottom: 48px;}.section-header p {  margin: 0;}/* SERVICES */.service-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  gap: 32px;  padding: 12px;}.service-card {  background: rgba(8, 18, 35, 0.78);  border: 1px solid rgba(174, 226, 255, 0.18);  border-radius: 20px;  padding: 80px 32px 36px;  box-shadow: 0 14px 30px rgba(8, 18, 35, 0.4);  display: flex;  flex-direction: column;  gap: 24px;  position: relative;  overflow: hidden;}.service-card::before {  content: attr(data-icon);  position: absolute;  top: 28px;  left: 32px;  padding: 10px 18px;  border-radius: 14px;  border: 1px solid rgba(174, 226, 255, 0.4);  background: linear-gradient(135deg, rgba(126, 201, 249, 0.28), rgba(32, 59, 102, 0.7));  color: #e2f4ff;  font-weight: 700;  letter-spacing: 0.1em;  font-size: 0.85rem;  text-transform: uppercase;  box-shadow: inset 0 0 18px rgba(8, 18, 35, 0.45), 0 8px 18px rgba(8, 18, 35, 0.4);}.service-card::after {  content: '';  position: absolute;  width: 140px;  height: 140px;  background: radial-gradient(circle, rgba(174, 226, 255, 0.35), transparent 60%);  top: -70px;  right: -40px;  opacity: 0.25;  transition: transform 0.3s ease, opacity 0.3s ease;}.service-card:hover::after {  opacity: 0.45;  transform: translate(-10px, 10px);}.service-card h3 {  margin: 0;  font-size: 1.4rem;  color: #fff;}.service-card p {  color: #d0e8ff;  font-size: 0.98rem;  margin: 0;}/* PRODUCTS / PORTFOLIO */.products-section .portfolio-grid {  margin-top: 0;}.products-section .portfolio-card {  min-height: 320px;}.portfolio-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));  gap: 24px;}.portfolio-card {  position: relative;  border-radius: 22px;  overflow: hidden;  min-height: 280px;  display: flex;  flex-direction: column;  box-shadow: 0 18px 34px rgba(8, 18, 35, 0.45);  transition: transform 0.35s ease, box-shadow 0.35s ease;  text-decoration: none;  color: inherit;  background: linear-gradient(180deg, rgba(8, 18, 35, 0.65) 0%, rgba(8, 18, 35, 0.92) 100%);}.portfolio-card::before {  content: '';  position: absolute;  inset: 0;  background: linear-gradient(180deg, rgba(8, 18, 35, 0.08) 0%, rgba(8, 18, 35, 0.8) 100%);  transition: opacity 0.3s ease;  pointer-events: none;}.portfolio-card:hover {  transform: translateY(-8px);  box-shadow: 0 24px 40px rgba(8, 18, 35, 0.6);}.portfolio-card:hover::before {  opacity: 0.9;}.portfolio-thumb {  width: 100%;  aspect-ratio: 16 / 9;  overflow: hidden;  position: relative;  background: #0f1625;}.portfolio-thumb img {  width: 100%;  height: 100%;  object-fit: cover;  display: block;}.portfolio-content {  position: relative;  padding: 24px;  color: #fff;  display: flex;  flex-direction: column;  gap: 12px;  z-index: 1;  margin-top: auto;}.portfolio-chip {  align-self: flex-start;  font-size: 0.75rem;  letter-spacing: 0.12em;  text-transform: uppercase;  padding: 6px 12px;  border-radius: 999px;  background: rgba(255, 255, 255, 0.18);  color: #f1f8ff;}.portfolio-content h3 {  margin: 0;  font-size: 1.4rem;}.portfolio-content p {  margin: 0;  color: #d7ecff;  font-size: 0.95rem;}/* MOODBOARD / COLLAGE */.collage-wrapper {  display: grid;  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);  gap: 40px;  align-items: start;}.moodboard-info {  display: flex;  flex-direction: column;  gap: 20px;}.moodboard-tags {  display: flex;  flex-wrap: wrap;  gap: 12px;}.moodboard-tags span {  padding: 6px 14px;  border-radius: 999px;  background: rgba(126, 201, 249, 0.16);  border: 1px solid rgba(126, 201, 249, 0.32);  color: #9cd8ff;  font-size: 0.85rem;}/* ABOUT */.about-grid {  display: grid;  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);  gap: 50px;  align-items: stretch;}.about-story {  display: flex;  flex-direction: column;  gap: 24px;}.about-pill {  display: inline-flex;  align-items: center;  gap: 10px;  padding: 10px 18px;  border-radius: 999px;  background: rgba(174, 226, 255, 0.14);  border: 1px solid rgba(174, 226, 255, 0.22);  font-size: 0.9rem;  color: #aee2ff;}.about-side {  background: rgba(8, 18, 35, 0.78);  border: 1px solid rgba(174, 226, 255, 0.2);  border-radius: 24px;  padding: 30px;  display: flex;  flex-direction: column;  gap: 24px;  box-shadow: 0 16px 36px rgba(8, 18, 35, 0.45);}.about-quote {  position: relative;  font-size: 1.1rem;  line-height: 1.7;  color: #f0f6ff;  padding: 12px 28px 20px 32px;}.about-quote::before,.about-quote::after {  position: absolute;  font-size: 2.6rem;  color: rgba(174, 226, 255, 0.4);  pointer-events: none;}.about-quote::before {  content: '“';  top: -8px;  left: 0;}.about-quote::after {  content: '”';  right: 6px;  bottom: -14px;}.about-side ul {  list-style: none;  padding: 0;  margin: 0;  display: flex;  flex-direction: column;  gap: 12px;}.about-side li {  display: flex;  align-items: flex-start;  gap: 12px;  font-size: 0.95rem;  color: #cde6ff;}.about-side li::before {  content: '';  display: block;  flex-shrink: 0;  width: 8px;  height: 8px;  margin-top: 0.4em;  border-radius: 50%;  background: linear-gradient(135deg, #7fc9f9, #aee2ff);  box-shadow: 0 0 8px rgba(126, 201, 249, 0.35);}/* CONTACT */.contact-wrapper {  display: grid;  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);  gap: 40px;  align-items: start;}.contact-info {  display: flex;  flex-direction: column;  gap: 20px;}.contact-cards {  display: flex;  flex-direction: column;  gap: 16px;}.contact-card {  background: rgba(8, 18, 35, 0.78);  border: 1px solid rgba(174, 226, 255, 0.2);  border-radius: 18px;  padding: 18px 20px;  display: flex;  flex-direction: column;  gap: 6px;  color: #d0e8ff;}.contact-card strong {  color: #fff;  font-size: 1.05rem;}.contact-card a {  color: #aee2ff;  text-decoration: none;}.contact-card a:hover {  text-decoration: underline;}.contact-form {  background: rgba(8, 18, 35, 0.75);  border: 1px solid rgba(174, 226, 255, 0.22);  border-radius: 28px;  padding: 32px;  box-shadow: 0 18px 38px rgba(8, 18, 35, 0.42);  position: relative;  z-index: 0;  overflow: hidden;}.contact-form form {  display: flex;  flex-direction: column;  gap: 16px;  position: relative;  z-index: 2;}.contact-form input,.contact-form textarea {  resize: vertical;  width: 100%;  padding: 14px;  border-radius: 12px;  border: 1px solid rgba(126, 201, 249, 0.25);  background: rgba(14, 34, 61, 0.6);  color: #f0f6ff;  font-size: 1rem;  position: relative;  z-index: 3;  box-sizing: border-box;  max-width: 100%;  display: block;}.contact-form input::placeholder,.contact-form textarea::placeholder {  color: rgba(208, 232, 255, 0.6);}.form-status {  min-height: 1.2em;  margin-top: 8px;  font-size: 0.95rem;  color: #aee2ff;  transition: color 0.3s ease;}.form-status.success {  color: #8af5c2;}.form-status.error {  color: #ffb1b1;}.collage-grid {  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-auto-rows: 120px;  gap: 16px;  margin-top: 50px;  position: relative;}.collage-grid img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 16px;  box-shadow: 0 0 25px rgba(174, 226, 255, 0.35);  transition: transform 0.3s ease, box-shadow 0.3s ease;}.collage-grid img:hover {  transform: translateY(-6px);  box-shadow: 0 0 30px rgba(174, 226, 255, 0.7);}.collage-grid .collage-large {  grid-column: span 3;  grid-row: span 2;}.collage-grid .collage-tall {  grid-column: span 2;  grid-row: span 3;}.collage-grid .collage-wide {  grid-column: span 3;  grid-row: span 1;}@media (max-width: 768px) {  html {    scroll-padding-top: 96px;  }  .top-bar {    padding: 14px 20px;  }  .top-actions {    gap: 14px;  }  header {    padding: 140px 20px 90px;  }  .hero-content {    flex-direction: column;    align-items: flex-start;    gap: 40px;  }  .collage-wrapper,  .about-grid,  .contact-wrapper {    grid-template-columns: 1fr;  }  .hero-right {    width: 100%;    min-height: auto;    display: grid;    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));    gap: 18px;  }  .hero-card {    position: relative;    top: auto;    left: auto;    right: auto;    bottom: auto;    width: 100%;    max-width: 100%;  }  .hero-card-main {    left: auto;  }  .hero-card:hover {    transform: translateY(-4px);  }  .nav-list {    position: absolute;    top: calc(100% + 12px);    right: 0;    flex-direction: column;    background: rgba(8, 18, 35, 0.95);    border: 1px solid rgba(174, 226, 255, 0.18);    border-radius: 12px;    padding: 16px;    gap: 12px;    min-width: 220px;    box-shadow: 0 12px 26px rgba(8, 18, 35, 0.55);    display: none;    z-index: 9;  }  body.nav-open .nav-list {    display: flex;  }  .nav-list a {    width: 100%;    text-align: right;  }  .menu-toggle {    display: block;  }}@media (max-width: 640px) {  html {    scroll-padding-top: 88px;  }  .top-bar {    padding: 12px 16px;    gap: 16px;  }  .top-actions {    gap: 12px;  }  .brand {    gap: 8px;  }  .brand img {    width: 44px;    height: 44px;  }  .brand span {    font-size: 0.9rem;  }  .lang-switch {    padding: 6px 10px;    font-size: 0.85rem;  }  header {    padding: 120px 16px 80px;  }  .hero-right {    grid-template-columns: 1fr;  }  .section-header {    margin-bottom: 36px;  }  .collage-grid {    grid-template-columns: repeat(2, 1fr);    grid-auto-rows: 160px;  }  .collage-grid .collage-large,  .collage-grid .collage-tall,  .collage-grid .collage-wide {    grid-column: span 2;    grid-row: span 2;  }}footer {  text-align: center;  padding: 60px 20px;  background: #081223;  font-size: 0.9em;  color: #88aacc;}#contact a {  color: #aee2ff;  text-decoration: none;  font-weight: 600;}#contact a:hover {  text-decoration: underline;}.legal-info {  margin: 18px auto 0;  max-width: 1100px;  font-size: 0.78em;  color: rgba(210, 226, 255, 0.8);  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 6px;  text-align: center;}.legal-info > * {  white-space: nowrap;  color: inherit;}.legal-info > *:not(:first-child)::before {  content: '—';  margin: 0 6px;  color: rgba(210, 226, 255, 0.45);}.legal-info a {  text-decoration: none;}.legal-info a:hover {  text-decoration: underline;  color: #aee2ff;}.lang-switch {  background: rgba(14, 34, 61, 0.8);  color: #fff;  border: 1px solid rgba(174, 226, 255, 0.35);  border-radius: 6px;  padding: 8px 12px;  cursor: pointer;  transition: background 0.3s ease, border-color 0.3s ease;}.lang-switch:hover {  background: rgba(14, 34, 61, 0.95);  border-color: rgba(174, 226, 255, 0.7);}.lang-switch:focus-visible {  outline: 2px solid rgba(174, 226, 255, 0.8);  outline-offset: 3px;}button.submit-btn {  align-self: flex-start;  background: linear-gradient(135deg, #7fc9f9, #aee2ff);  color: #081223;  border: none;  border-radius: 999px;  padding: 12px 28px;  cursor: pointer;  font-weight: 600;  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;  box-shadow: 0 14px 28px rgba(126, 201, 249, 0.38);}button.submit-btn:hover {  background: linear-gradient(135deg, #6ab7ea, #9bd5f5);  transform: translateY(-2px);  box-shadow: 0 18px 34px rgba(126, 201, 249, 0.45);}button.submit-btn:disabled {  opacity: 0.6;  cursor: not-allowed;  transform: none;  box-shadow: 0 10px 20px rgba(126, 201, 249, 0.25);}