/* css/styles.css */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Custom Properties */
:root {
  --color-primary: #1E2329;
  --color-secondary: #02AFB0;
  --color-tertiary: #20C6C6;
  --color-border: #F9F4F0;
  --color-text: #FFFFFF;
  --color-layer-one: #77dfdf;
  --color-layer-two: #28bbbc;
  --color-layer-three: #01959d;

  /* Typography */
  --font-primary: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Font weights */
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* Container */
  --container-max-width: 1240px;
  --container-padding: var(--spacing-md);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-base: all 0.3s ease;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-primary);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-primary);
  margin: 0;
  padding: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  line-height: 1.2;
}

a {
  text-decoration: none;
}

/* Container */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container .information {
  flex-basis: 50%;
  padding: 0 0 0 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.container .information img {
  width: 55%;
  margin-bottom: var(--spacing-xxl);
}

.container .information h1 {
  font-size: 28px;
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-md);
}

.container .information p {
  font-size: 16px;
  font-weight: var(--font-regular);
  line-height: 20px;
  letter-spacing: .35px;
  margin-bottom: var(--spacing-xl);
}

.container .information .private-beta {
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-medium);
  background-color: var(--color-secondary);
  border-radius: var(--radius-md);
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.container .information .private-beta:hover {
  background-color: var(--color-tertiary);
}

.container .mockup {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.container .mockup .layer {
  position: absolute;
  width: 50vw;
  height: 100vh;
  top: 0;
  left: 50vw;
  z-index: 3;
}
.container .mockup .layer.one {
  background-color: var(--color-layer-one);
  clip-path: circle(69% at 106% 48%);
}
.container .mockup .layer.two {
  background-color: var(--color-layer-two);
  clip-path: circle(67% at 120% 54%);
}
.container .mockup .layer.three {
  background-color: var(--color-layer-three);
  clip-path: circle(69% at 143% 51%);
}

.container .mockup img {
  position: relative;
  z-index: 9;
  background-color: var(--color-border);
  border: 5px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 90%;
  height: auto;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
  margin-right: -25%;
}

@media only screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }

  .container .information {
    align-items: center;
    padding: calc(var(--spacing-xl) * 2) var(--spacing-xl);
    flex-basis: auto;
  }

  .container .information img {
    width: 35vw;
  }

  .container .information h1 {
    text-align: center;
    font-size: 32px;
    font-weight: var(--font-medium);
  }

  .container .information p {
    text-align: center;
    width: 40vw;
    font-size: 16px;
    font-weight: var(--font-regular);
    line-height: 20px;
    letter-spacing: 0.35px;
  }

  .container .mockup {
    flex-basis: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    min-width: 0;
  }

  .container .mockup .layer {
    width: 100%;
    height: 95vh;
    top: auto;
    bottom: 0;
    left: 0;
  }

  .container .mockup .layer.one {
    background-color: var(--color-layer-one);
    clip-path: circle(74% at 45% 84%);
  }

  .container .mockup .layer.two {
    background-color: var(--color-layer-two);
    clip-path: circle(74% at 49% 103%);
  }

  .container .mockup .layer.three {
    background-color: var(--color-layer-three);
    clip-path: circle(73% at 55% 116%);
  }

  .container .mockup img {
    width: min(50vw, 100%);
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-xxl) * 2);
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .container .information img {
    width: 70vw;
  }

  .container .information h1 {
    font-size: 22px;
    font-weight: var(--font-medium);
  }

  .container .information p {
    width: 80vw;
    font-size: 14px;
    font-weight: var(--font-regular);
    line-height: 18px;
    letter-spacing: 0.35px;
  }

  .container .mockup .layer {
    height: 40vh;
  }

  .container .mockup .layer.one {
    background-color: var(--color-layer-one);
    clip-path: circle(74% at 45% 96%);
  }

  .container .mockup .layer.two {
    background-color: var(--color-layer-two);
    clip-path: circle(74% at 49% 117%);
  }

  .container .mockup .layer.three {
    background-color: var(--color-layer-three);
    clip-path: circle(73% at 55% 130%);
  }

  .container .mockup img {
    width: 80vw;
  }
}