/* --- Reset & Base --- */
		body {
			font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
			background: #0E3B55;
			scrollbar-width: none;
		}
			/* Prevent scrolling when menu panel (mobile) is open */
			body.no-scroll { overflow: hidden; }
			body::-webkit-scrollbar { display: none; }

		/* --- Page container --- */
		.page-wrapper {
			/* Landscape defaults — will be overridden if portrait */
			width: min(80%, 1200px);
			margin: 0 auto;
			border: 0px solid #E5E7EB;
			border-radius: 10px;       		/* Rounded corners */
			overflow: hidden;          		/* Clip content to rounded corners */
		}
			/* Portrait: full width, no top/bottom margin, no border */
			@media (orientation: portrait) {
				.page-wrapper {
					width: 100%;
					border: none;
					border-radius: 0;
					overflow: visible;
				}
			}
			/* Portrait: full width, no top/bottom margin, no border */
			@media (orientation: portrait) {
				body { margin: 0; }
			}

			/* --- Header --- */
			header.topbar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20px;
				border-bottom: 0px solid #E5E7EB;
				background: #FEFDFC;
				position: relative;
				height: 90px;
			}
			.logo {
				display: flex;
				align-items: center;
				float: left;
				height: 100%;
			}
			.logo img {
				height: 60%;
				width: auto;
			}

			/* Navigation links (default landscape) */
			nav.nav-links {
				float: right;
				margin-right: 15px;
				display: flex;
			}
			nav.nav-links a {
				color: black;
				margin-left: 30px;
				text-decoration: none;
			}
			nav.nav-links a:hover {
				color: #FE2A00;
				text-decoration: none;
			}
			
			/* Menu button (portrait) */
			.menu-button {
				display: none;
				align-items: center;
				justify-content: center;
				height: 50%;
				aspect-ratio: 1 / 1;
				border: 0px solid #CBD5E1;
				border-radius: 12.5%;
				color: white;
				background: #0063C3;
				cursor: pointer;
				font-size: 150%;
				padding-bottom: 0.5%;
			}
			.menu-button:hover {
				color: #FE2A00;
				/* background: #F3F4F6; */
			}
				/* Orientation visibility for links/button */
				@media (orientation: portrait) {
				  nav.nav-links { display: none; }
				  .menu-button { display: flex; }
				}
				@media (orientation: landscape) {
				  nav.nav-links { display: flex; }
				  .menu-button { display: none; }
				}


			/* --- Full-height overlay menu (shown only when button is clicked) --- */
			.menu-overlay {
				position: fixed;
				inset: 0;                  			/* top:0 right:0 bottom:0 left:0 */
				background: rgba(2, 6, 23, 0.45);	/* semi-transparent backdrop */
				z-index: 1100;
				display: none;             			/* toggled by .open class */
			}
			.menu-overlay.open {
				display: block;
			}

			/* Sliding sheet covering full height, aligned to the right */
			.menu-sheet {
				position: absolute;
				top: 0; right: 0; bottom: 0;
				width: min(85%, 400px);
				max-width: 100%;
				/*background: white;*/
				
				--panel-gradient-1: #f7fbff;			/* light in top-left */
				--panel-gradient-2: #d8ecf9;			/* soft blue sweep */
				--panel-gradient-3: #cfe3ff;
				background:
					radial-gradient(120% 120% at 100% 0%, var(--panel-gradient-2), transparent 60%),
					linear-gradient(180deg, var(--panel-gradient-1), var(--panel-gradient-3));
				
				display: grid;
				grid-template-rows: auto 1fr auto;
				padding: 0;
				
				/* Rounded leading edge for aesthetics */
				border-top-left-radius: 12px;
				border-bottom-left-radius: 12px;
				overflow: hidden;
				
				/* Simple slide-in animation {not working] */
				transform: translateX(100%);
				transition: transform 200ms ease-out;
			}
			.menu-overlay.open .menu-sheet {
				transform: translateX(0);
			}
				.sheet-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 3% 5%;
					background: #0063C3;
				}
				.sheet-title {
					font-weight: 600;
					color: white;
				}
				.close-btn {
					font-size: 125%;
					background: none;
					border: none;
					cursor: pointer;
					color: white;
				}
				
				.sheet-content {
					overflow-y: auto;
					/* padding: 3% 5%; */
				}
				.sheet-content nav a {
					display: block;
					padding: 3% 5%;
					/* margin: 3% 5%; */
					color: black;
					text-decoration: none;
				}
				.sheet-content nav a:hover {
					background: #cfe3ff;
				}

				.sheet-footer {
					visibility: hidden;		/* footer not visible */
				
					padding: 3% 5%;
					/* border-top: 0px solid #E5E7EB; */
					background: #0063C3;
					display: flex;
					justify-content: flex-end;
				}
				.sheet-footer a {
					display: block;
					/* padding: 3% 5%; */
					/* margin: 3% 5%; */
					color: yellow;
					text-decoration: none;
				}
				.sheet-footer a:hover {
					/* background: brown; */
				}

			/* --- Main --- */
			main {
				position: relative;
			}
				/* Vignette overlay (radial, centered at ~75% x, 55% y) */
				main::before {
					/* content: ""; */
					/* position: absolute; */
					/* inset: 0; */
					mix-blend-mode: multiply;																		/* Use multiply to subtly darken; opacity matches the global alpha feel */
					pointer-events: none;
				}

					/* ARTICLES */
					.mainDescription-1 {
						flex: 1;
						height: 380px;
						overflow: hidden;
						position: relative;
						/* box-sizing: border-box; */
						margin-top: 0%;
						margin-left: 3.5%;
						margin-right: 3.5%;
						border-bottom: 1px solid transparent;		/* not used as its last article */
						border-image: linear-gradient(to right, transparent, gray, transparent) 1;
					}
						.mainDescription-1::before {
							content: "";
							position: absolute;
							inset: 0;                   	/* fills the article box */
							background-image: url("images/mobile-app-development.png");
							background-position: right center;
							background-repeat: no-repeat;
							background-size: auto 100%;		/* Key: fill HEIGHT, preserve aspect ratio; width may not fill */
							/*transform: scaleX(-1);*/     	 	/* horizontal mirror; use scaleY(-1) for vertical */
							/*transform-origin: center;*/
							z-index: -1;					/* Keep it behind the content */
							pointer-events: none;       	/* avoids blocking interactions */
						}
						.mainDescription-1 div h1 {
							color: white;
							font-size: 28px;
							font-weight: bold;
							/* white-space: nowrap; */
						}
						.mainDescription-1 div ul {
							color: white;
							font-size: 20px;
							font-weight: normal;
							/* white-space: nowrap; */
						}
						@media (orientation: portrait) {
							.mainDescription-1 {
								height: 275px;
							}
							.mainDescription-1 div h1 {
								font-size: 18px;
							}
							.mainDescription-1 div ul {
								font-size: 16px;
							}
						}
					.mainDescription-2 {
						flex: 1;
						height: 380px;
						overflow: hidden;
						position: relative;
						/* box-sizing: border-box; */
						margin-top: 0%;
						margin-left: 3.5%;
						margin-right: 3.5%;
						border-bottom: 1px solid transparent;		/* not used as its last article */
						border-image: linear-gradient(to right, transparent, gray, transparent) 1;
					}
						.mainDescription-2::before {
							content: "";
							position: absolute;
							inset: 0;                   	/* fills the article box */
							background-image: url("images/web-app-development.png");
							background-position: right center;		/* setting right, becuase it iwll be mirrored and therefore put to left */
							background-repeat: no-repeat;
							background-size: auto 100%;		/* Key: fill HEIGHT, preserve aspect ratio; width may not fill */
							transform: scaleX(-1);     	 	/* horizontal mirror; use scaleY(-1) for vertical */
							transform-origin: center;
							z-index: -1;					/* Keep it behind the content */
							pointer-events: none;       	/* avoids blocking interactions */
						}
						.mainDescription-2 div h1 {
							color: white;
							text-align: right;
							font-size: 28px;
							font-weight: bold;
							/* white-space: nowrap; */
						}
						.mainDescription-2 div ul {
							color: white;
							text-align: right;
							direction: rtl;           /* flips list direction */
							text-align: right;        /* keeps text aligned to the right */
							font-size: 20px;
							font-weight: normal;
							/* white-space: nowrap; */
						}
						@media (orientation: portrait) {
							.mainDescription-2 {
								height: 275px;
							}
							.mainDescription-2 div h1 {
								font-size: 18px;
							}
							.mainDescription-2 div ul {
								font-size: 16px;
							}
						}
					.mainDescription-3 {
						flex: 1;
						height: auto;
						overflow: hidden;
						position: relative;
						/* box-sizing: border-box; */
						margin-top: 0%;
						margin-left: 3.5%;
						margin-right: 3.5%;
						padding-bottom: 18px;
						border-bottom: 1px solid transparent;		/* not used as its last article */
						border-image: linear-gradient(to right, transparent, gray, transparent) 1;
					}
						.mainDescription-3 div section h1 {
							color: white;
							font-size: 28px;
							font-weight: bold;
							margin-top: 20px;
							margin-bottom: 10px;
							margin-left: 2%;
							/* white-space: nowrap; */
						}
						.mainDescription-3 div section ul {
							list-style: none;
							padding: 0;
							margin: 0;
							display: grid;			/* two-column layout with gaps */
							grid-template-columns: repeat(2, 1fr);
							gap: 14px 28px; /* row gap, column gap */
						}
						.mainDescription-3 div section ul li a {
							display: block;
							background: #ffffff;
							color: #1f2d3d;
							text-decoration: none;
							border: 1px solid transparent;
							font-size: 100%;
							border-radius: 0 10%;
							padding: 8px 12px;
							box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); /* subtle top/bottom edge */
							position: relative;
							transition: background 0.5s ease, border 0.25s ease, border-radius 0.5s ease;
							font-weight: 500;
						}
						.mainDescription-3 div section ul li a:hover {			/* Hover/focus effect */
							background: #C5E8FB;
							border: 1px solid #0063C3;
							border-radius: 10% 10%;
						}
						@media (orientation: portrait) {
							.mainDescription-3 div section h1 {
								font-size: 18px;
							}
							.mainDescription-3 div section ul {
								grid-template-columns: 1fr;
							}
						}

					.mainDescription-4 {
						--page-bg: #0d1524;						/* deep navy background (left side) */
						--panel-gradient-1: #f7fbff;			/* light in top-left */
						--panel-gradient-2: #d8ecf9;			/* soft blue sweep */
						--panel-gradient-3: #cfe3ff;
						--panel-border: rgba(0,0,0,0.07);

						--text-primary: #ffffff;
						--text-muted: #b8c3d9;
						--text-dark: #0b1220;

						--control-bg: #ffffff;
						--control-border: #cfd8e3;      		/* default gray border (like the picture) */
						--control-border-focus: #000000;		/* black when editing/focus */
						--control-border-invalid: #e53935;		/* red when required & empty/invalid */

						--radius-panel: 28px;           		/* rounded panel */
						--radius-pill: 9999px;          		/* pill */
						--radius-field: 12px;           		/* textarea rounded corner */

						--gap-xxl: 48px;
						--gap-xl: 32px;
						--gap-lg: 24px;
						--gap-md: 16px;
						--gap-sm: 12px;

						--field-h: 42px;						/* pill inputs/selects height */
						--textarea-h: 160px;

						--checkbox-size: 18px;

						--btn-bg: #3b5bdb;						/* indigo-like button */
						--btn-bg-hover: #314cc0;
						--btn-text: #ffffff;
					  
						max-width: 1100px;
						margin: 32px auto;
						padding: 0 var(--gap-md);
						display: grid;
						grid-template-columns: 20% 80%;			/* left promo / right form */
						gap: 0;
						align-items: start;
					}
						.mainDescription-4 h2 {
							color: white;
							font-size: 32px;
							margin: 75px 20px;
							text-align: center;
						}
						.mainDescription-4 section {
							background:
								radial-gradient(120% 120% at 100% 0%, var(--panel-gradient-2), transparent 60%),
								linear-gradient(180deg, var(--panel-gradient-1), var(--panel-gradient-3));
							color: var(--text-dark);
							border: 1px solid var(--panel-border);
							border-radius: var(--radius-panel);
							padding: var(--gap-xl);
						}
							.mainDescription-4 section h1 {
								margin: 0 0 var(--gap-lg);
								font-size: 22px;
								color: var(--text-dark);
							}
							.mainDescription-4 section form {
								display: grid;
								grid-template-columns: 1fr 1fr;    /* two columns inside the panel */
								gap: var(--gap-sm);
							}
								.col-span-2 { grid-column: 1 / -1; }
								.field {
									height: var(--field-h);
									padding: 0 14px;
									border: 1px solid var(--control-border);
									border-radius: var(--radius-pill);
									background: var(--control-bg);
									color: var(--text-dark);
									font-size: 15px;
									line-height: var(--field-h);
									width: 100%;
									box-sizing: border-box;
									transition: border-color 0.25s ease;
								}
									.field::placeholder { color: #97a1b3; }
								textarea.field {
									height: var(--textarea-h);
									padding: 12px 14px;
									line-height: 1.45;
									border-radius: var(--radius-field);
									resize: vertical;
								}
								.checkbox-row {
									display: grid;
									grid-template-columns: auto 1fr; /* small box + text */
									gap: var(--gap-sm);
									align-items: start;
								}
									.checkbox {
										appearance: none;
										width: var(--checkbox-size);
										height: var(--checkbox-size);
										border: 1px solid var(--control-border);
										border-radius: 4px;
										background: #fff;
										display: inline-block;
										position: relative;
										cursor: pointer;
										margin-top: 4px; /* align visually with text */
										transition: border-color .15s ease, background-color .15s ease;
									}
										.checkbox:checked {
											background: #e6f0ff;
											border-color: #4062ff;
										}
											.checkbox:checked::after {
												content: "";
												position: absolute;
												width: 10px;
												height: 6px;
												border: 2px solid #4062ff;
												border-top: none;
												border-right: none;
												transform: rotate(-45deg);
												left: 3px; top: 3px;
											}
									.checkbox-label {
										color: var(--text-dark);
										font-size: 14px;
										line-height: 2;
										margin: 0;
									}
								.actions {
									display: flex;
									justify-content: center;
									padding-top: var(--gap-md);
								}
									.btn {
										height: var(--field-h);
										padding: 0 20px;
										border-radius: var(--radius-pill);
										border: 1px solid rgba(0,0,0,0.12);
										background: var(--btn-bg);
										color: var(--btn-text);
										font-size: 15px;
										font-weight: 600;
										cursor: pointer;
										box-shadow: 0 8px 16px rgba(59, 91, 219, 0.35);
										transition: background-color 0.25s ease, transform 0.05s ease;
									}
										.btn:hover { background: var(--btn-bg-hover); }
										.btn:active { transform: translateY(1px); }

								.field:required:invalid,
								.checkbox:required:invalid {
									border-color: var(--control-border-invalid);
								}
								.field:focus,
								.checkbox:focus {
									border-color: var(--control-border-focus);
									outline: none;
								}
						@media (orientation: portrait) {
							.mainDescription-4 {
								grid-template-columns: 1fr;  /* only the form panel visible */
							}
							.mainDescription-4 h2 { display: none; }      /* hide left text block only in portrait */
						}

			/* --- Footer --- */
			footer {
				display: flex;
				padding: 20px 20px;
				color: black;
				background: white;
				text-align: center;
			}
				/* Orientation visibility for links/button */
				@media (orientation: portrait) {
					footer {
						/*color: white;*/			/* do not change for mobile */
						/*background: #030D1F;*/	/* do not change for mobile */
					}
				}