:root { /* used */
	--white: #ffffff;
	--lila1: #3b1491;
	--lila2: #5e25fd;
	--blue1: #023787;
	--blue2: #0257d1;
	--grey1: #262626;
	--grey2: #575757;
	/* #938cc5 for pics from undraw.co */
	--c1: #fff;
	--c2: #eee;
	--c3: #ddd;
	--c4: #ccc;
	--speed: 40s;
}

.home-box-container {
	width: calc(92vw - 4px);
	padding: 4vw;
}

.home-box {
	position: relative;
    z-index: 2;
    width: 400px;
    max-width: calc(92vw - 60px);
    text-align: right;
    margin: 0 auto;
    margin-top: 0;
    background: white;
}

.header-box {
	position: relative;
	z-index: 2;
	width: 1600px;
	max-width: calc(86vw - 24px);
	text-align: left;
	margin: 0 auto;
	margin-top: 0;
	background: transparent;
	padding: 20px;
}

.home-footer {
	position: relative;
    top: -22px;
    z-index: 1;
    width: 400px;
    max-width: calc(92vw - 60px);
    text-align: right;
    margin: 0 auto;
    margin-top: 0;
    background-image: url(/app/images/home_footer_col.png);
    padding: 26px 20px 1px 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.feature_title{
	margin: 10px;
    font-size: 175%;
    font-weight: 800;
    letter-spacing: -1px;
	color: #ffffff80;
}

.title_highight{
	color: var(--white);
}

.index_box_1{
    position: relative;
	z-index: 2;
    background-image: linear-gradient(to bottom right, var(--lila1), var(--lila2));
    color: var(--white);
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.index_box_2{
    position: relative;
	z-index: 2;
    background-image: linear-gradient(to bottom right, var(--blue1), var(--blue2));
    color: var(--white);
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
}

.index_box_3{
    position: relative;
	z-index: 2;
    background-image: linear-gradient(to bottom right, var(--grey1), var(--grey2));
    color: var(--white);
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.index_box_title{
    font-size: 350%;
    line-height: 0.8;
    color: var(--white);
	word-break: break-word;
}

h1 {
	letter-spacing: -3px;
	line-height: 100%;
	font-family: system-ui;
	color: var(--slate);
	margin: 0;
	font-size: 200%;
}

/* ===== Multicolor Artistic Background (Pure CSS) ===== */
/* Tweak these to taste */

/*  
.art-bg{
	position: relative;
	overflow: hidden;
	isolation: isolate;
  }
  

  .art-bg::before{
	content:"";
	position: absolute; inset: 0;
	z-index: -1;
	pointer-events: none;
  
	background:
	  radial-gradient(800px 600px at 20% 20%, var(--c1) 0%, transparent 60%),
	  radial-gradient(700px 500px at 80% 25%, var(--c2) 0%, transparent 60%),
	  radial-gradient(600px 600px at 20% 80%, var(--c3) 0%, transparent 60%),
	  radial-gradient(500px 500px at 80% 75%, var(--c4) 0%, transparent 60%),
	  conic-gradient(
		from var(--angle, 0deg) at 50% 50%,
		var(--c1), var(--c2), var(--c3), var(--c4), var(--c1)
	  );
  
	background-blend-mode: screen, screen, screen, screen, overlay;
	animation: drift var(--speed) linear infinite,
			   sway  calc(var(--speed) * 0.6) ease-in-out infinite alternate;
  }
  
  .art-bg::after{
	content:"";
	position: absolute; inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(120% 120% at 50% 60%, transparent 60%, rgba(0,0,0,0.3) 100%);
	mix-blend-mode: multiply;
  }
  
  @property --angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
  }
  
  @keyframes drift{
	0%   { --angle: 0deg; }
	100% { --angle: 360deg; }
  }
  
  @keyframes sway{
	from { background-size: 120% 120%; }
	to   { background-size: 140% 140%; }
  }
  
  @media (prefers-reduced-motion: reduce){
	.art-bg::before{ animation: none; }
  }
*/