/* Variables */
:root { --header-index:9999; --spacing: 24px; --radius:calc(var(--spacing) / 4); --primary:#8B5CF6; --dark:#1F2937; --text-primary:#1F2937; }

/* Transition timings */

a, button, header, .mobile-menu-bg { -webkit-transition:all 200ms ease-in-out; transition:all 200ms ease-in-out; }


/************** PAGE STRUCTURE **************/

body { font-family:"Inter", sans-serif; letter-spacing:-.01rem; color:var(--text-primary) }
.centre { max-width:1600px; margin: 0 auto; display:block; }
.flex-1 { flex:1; }


/************** HEADER **************/

header { position:fixed; width:100%; top:0; padding:calc(var(--spacing) * 2) 0; font-size:14px; z-index:var(--header-index) }
header .centre { padding: 0 calc(var(--spacing) * 2); box-sizing: content-box; display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap:var(--spacing) }
header .logo { display:inline-block; }
header .logo img { width:auto; height:50px }

/* Header scroll state */
.scroll header { background:#fff; padding:var(--spacing) 0; }
.scroll header .centre { padding: 0 var(--spacing); }

/* Mobile Header */
#mobile-header { padding:calc(var(--spacing) / 2); display:none; }
#mobile-header .menu-toggle { background:#f1f1f1; color:#777; width:40px; height:40px; padding:11px 9px; border-radius:30px; }

/* Mobile menu */
.mobile-menu-bg { background:var(--dark); position:fixed; width:100dvw; height: 100dvh; top:0; left:0; z-index:-1; opacity:0; pointer-events:none; }

/************** HEADER **************/

nav ul { list-style:none; }
nav ul li { font-weight:600; margin:0 calc(var(--spacing) / 4); text-transform:uppercase; display:inline-block; }
nav ul li a { padding:calc(var(--spacing) / 4) calc(var(--spacing) / 2); border-radius:var(--radius); color:var(--text-primary) }
nav ul li a:hover { background:var(--primary); color:#fff }


/************** HERO SECTION **************/


/************** BUTTONS **************/

.btn {
  background:transparent;
  font-weight:600;
  text-transform:uppercase;
  text-align: center;
  padding:calc(var(--spacing) / 3) var(--spacing);
  border:2px solid transparent;
  border-radius:var(--radius);
  outline:none;
  -webkit-appearance: none;
  appearance: none;
}

.btn.primary { background:var(--primary); color:#fff }
.btn.primary:hover { background:transparent; color:var(--primary); border-color:var(--primary) }
.btn.primary.outlined { background:transparent; color:var(--primary); border-color:var(--primary) }
.btn.primary.outlined:hover { background:var(--primary); color:#fff }

.btn.white { background:#fff; color:var(--primary) }
.btn.white:hover { background:transparent; color:#fff; border-color:#fff }
.btn.white.outlined { background:transparent; color:#fff; border-color:#fff }
.btn.white.outlined:hover { background:#fff; color:var(--primary) }


/************** TYPOGRAPHY **************/

h1 { font-size:48px; font-weight:800; }
h2 { font-size:38px; font-weight:700; }
p { letter-spacing:normal; }
a { text-decoration:none; appearance:none; }


/************** RESPONSIVE CSS **************/

@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 992px) {

  /* Header */
  header { background:#fff; width:300px; max-width:360px; height:100dvh; padding:var(--spacing); left:-300px; }
  header .centre { padding:0; display: block; }
  header .btn { margin-bottom:calc(var(--spacing) / 2); display:block; }
  #mobile-header { display:flex; }

  /* Nav */
  nav { margin:var(--spacing) 0 }
  nav ul li { margin:0; display:block; }
  nav ul li a { padding:calc(var(--spacing) / 2.25) var(--spacing); display:block; }

  /* Mobile menu toggle */
  .mobile-menu-bg { background:var(--dark); position:fixed; width:100dvw; height: 100dvh; top:0; left:0; z-index:-1; opacity:0; pointer-events:none; }

  /* Mobile menu open */
  .mobile-menu-open .mobile-menu-bg { opacity:.5; pointer-events: all; z-index:calc(var(--header-index)) - 1; }
  .mobile-menu-open header { left:0; box-shadow:0 0 var(--spacing) rgba(0, 0, 0, 30%); }

}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 576px) {}