first init

css/style.css

@@ -0,0 +1,140 @@
+:root {
+  --primary: #2f6fb6;
+  --primary-dark: #1a5598;
+  --light: #f8f9fa;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 15px;
+}
+
+.img-logo {
+  width: 50px;
+  height: 50px;
+}
+
+.img-mockup {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.img-mockup.smartphone {
+  max-height: 400px;
+  margin-inline: auto;
+  display: block;
+}
+
+.feature-icon {
+  font-size: 4em;
+  display: flex;
+  justify-content: center;
+  color: var(--primary-dark);
+  margin-bottom: 0.5em;
+}
+
+.benefit-list-icon {
+  color: var(--primary-dark);
+  font-size: 2em;
+  transform: rotate(-20deg);
+}
+
+.benefit-list .row {
+  padding: 1em;
+}
+
+.benefit-list .row:nth-child(odd) {
+  background: #00d4ff;
+  background: linear-gradient(
+    34deg,
+    rgba(0, 212, 255, 0.29735644257703087) 7%,
+    rgba(27, 123, 170, 0.3) 88%
+  );
+}
+
+.hero-title-badge {
+  font-size: 0.3em;
+  position: absolute;
+  top: -2em;
+  background: #1b7baa;
+  background: linear-gradient(
+    34deg,
+    rgba(27, 123, 170, 1) 7%,
+    rgba(0, 212, 255, 1) 88%
+  );
+}
+
+.hero-title {
+  position: relative;
+}
+
+.button-download {
+  background-color: var(--primary);
+  border: var(--primary);
+  padding: 0.5em 1em;
+  transition: 0.3s ease-in-out;
+}
+
+.button-download:hover {
+  background-color: var(--primary-dark);
+}
+
+.button-doc {
+  color: var(--primary);
+  padding: 0.5em 1em;
+  transition: 0.3s ease-in-out;
+  border: 0.5pt solid var(--primary);
+}
+
+.button-doc:hover {
+  color: var(--light);
+  background-color: var(--primary);
+}
+
+.title-span {
+  background: -webkit-linear-gradient(
+    34deg,
+    rgba(27, 123, 170, 1) 7%,
+    rgba(0, 212, 255, 1) 88%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.nav-links {
+  gap: 1em;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: var(--primary);
+}
+
+.nav-links a:hover {
+  color: var(--primary-dark);
+}
+
+@media (max-width: 768px) {
+  .hero-row {
+    flex-direction: column-reverse;
+    gap: 3em;
+  }
+  .benefits-left-col {
+    margin-bottom: 3em;
+  }
+  footer * {
+    text-align: center;
+  }
+  footer .d-flex {
+    justify-content: center;
+  }
+  .nav-links {
+    gap: 0.5em;
+  }
+}