@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
    --bg-color: #0c0c14; /* Base color, but we'll use a gradient */
    --card-bg-color: #1f2937;
    --text-color: #e5e7eb;
    --subtext-color: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.1);
    --f-engine-color: #34d399; /* Emerald 400 */
    --z-engine-color: #60a5fa; /* Blue 400 */
    --placeholder-color: #6b7280; /* Gray 500 */
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 1rem;
    overflow-x: hidden; /* Prevent horizontal scrollbar from animations */
}

/* Starry Background */
@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.stars-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
}

#stars, #stars2, #stars3 {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: animStar;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#stars {
  width: 1px;
  height: 1px;
  animation-duration: 50s;
  box-shadow: 753px 1862px #FFF, 1545px 1735px #FFF, 513px 1664px #FFF, 532px 36px #FFF, 1426px 1432px #FFF, 1835px 1138px #FFF, 1316px 599px #FFF, 1335px 1294px #FFF, 1146px 1198px #FFF, 344px 1934px #FFF, 119px 1970px #FFF, 1391px 1937px #FFF, 584px 1238px #FFF, 1030px 189px #FFF, 796px 143px #FFF, 137px 439px #FFF, 1459px 147px #FFF, 1178px 1141px #FFF, 488px 1018px #FFF, 64px 338px #FFF, 1224px 185px #FFF, 331px 1233px #FFF, 1599px 244px #FFF, 135px 1030px #FFF, 882px 649px #FFF, 1279px 1205px #FFF, 1481px 1944px #FFF, 1732px 1419px #FFF, 626px 1985px #FFF, 1896px 165px #FFF, 1029px 1588px #FFF, 1253px 126px #FFF, 1445px 1483px #FFF, 1215px 1590px #FFF, 1402px 1438px #FFF, 938px 1946px #FFF, 815px 1109px #FFF, 122px 1627px #FFF, 1859px 1888px #FFF, 798px 1915px #FFF, 1145px 131px #FFF, 1493px 1406px #FFF, 368px 1033px #FFF, 1512px 1003px #FFF, 1403px 1392px #FFF, 1269px 223px #FFF, 619px 1677px #FFF, 1251px 1122px #FFF, 1989px 1299px #FFF, 110px 1353px #FFF, 1318px 1024px #FFF, 440px 1315px #FFF, 1845px 1489px #FFF, 1490px 1008px #FFF, 1307px 1191px #FFF, 509px 1933px #FFF, 1217px 744px #FFF, 1139px 1152px #FFF, 1490px 1801px #FFF, 67px 1323px #FFF, 1303px 1632px #FFF, 1729px 1792px #FFF, 1713px 420px #FFF, 1111px 1345px #FFF, 1268px 1741px #FFF, 1226px 1851px #FFF, 1664px 802px #FFF, 849px 233px #FFF, 861px 395px #FFF, 1198px 232px #FFF, 1332px 1421px #FFF, 1173px 1941px #FFF, 1804px 1716px #FFF, 1228px 1436px #FFF, 1878px 899px #FFF, 1272px 1450px #FFF, 1197px 1803px #FFF;
}
#stars2 {
  width: 2px;
  height: 2px;
  animation-duration: 100s;
  box-shadow: 1008px 868px #FFF, 87px 226px #FFF, 136px 876px #FFF, 1787px 1988px #FFF, 1255px 1386px #FFF, 1582px 285px #FFF, 1130px 1316px #FFF, 144px 1079px #FFF, 1499px 1162px #FFF, 1103px 1606px #FFF, 1838px 1313px #FFF, 1017px 111px #FFF, 185px 1489px #FFF, 513px 1974px #FFF, 156px 1228px #FFF, 1339px 1092px #FFF, 1114px 1931px #FFF, 1695px 1678px #FFF, 1680px 165px #FFF, 439px 1957px #FFF, 188px 1135px #FFF, 1944px 1220px #FFF, 1395px 1056px #FFF, 1024px 1373px #FFF, 1405px 333px #FFF, 760px 1842px #FFF, 1161px 1199px #FFF, 1419px 722px #FFF, 1555px 1295px #FFF, 942px 695px #FFF, 124px 1237px #FFF, 1599px 1889px #FFF, 34px 1678px #FFF, 1807px 1104px #FFF, 1928px 1008px #FFF, 167px 32px #FFF, 899px 1656px #FFF, 809px 1475px #FFF, 1110px 1618px #FFF, 529px 1331px #FFF, 999px 1302px #FFF, 1383px 1952px #FFF, 42px 1113px #FFF, 1391px 1157px #FFF, 1091px 1729px #FFF, 1297px 1139px #FFF, 822px 1749px #FFF, 1332px 1715px #FFF, 1525px 971px #FFF;
}
#stars3 {
  width: 3px;
  height: 3px;
  animation-duration: 150s;
  box-shadow: 111px 1749px #FFF, 911px 482px #FFF, 1357px 1024px #FFF, 1709px 1798px #FFF, 1793px 431px #FFF, 1029px 1205px #FFF, 1331px 1799px #FFF, 1135px 819px #FFF, 1201px 147px #FFF, 1067px 1463px #FFF, 1306px 1201px #FFF, 104px 1354px #FFF, 782px 1276px #FFF, 1002px 556px #FFF, 989px 1669px #FFF, 1438px 1226px #FFF, 1515px 1159px #FFF, 1813px 1898px #FFF, 1590px 1493px #FFF, 1130px 1020px #FFF, 1558px 1081px #FFF, 1357px 1600px #FFF, 471px 1739px #FFF, 1394px 219px #FFF, 629px 629px #FFF;
}

.container {
    max-width: 1200px;
    width: 100%;
    padding: 2rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

header h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    animation: fadeInUp 0.8s ease-out forwards;
}

header p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 300;
    color: var(--subtext-color);
    margin-bottom: 4rem;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    opacity: 0; /* Start as transparent for animation */
}

.engine-cards {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.card {
    background: var(--card-bg-color);
    border-radius: 16px;
    width: 320px;
    text-decoration: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 1px; /* For border gradient */
    display: flex;
    opacity: 0; /* Start as transparent for animation */
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Stagger the card animations */
.card:nth-child(1) {
  animation-delay: 0.4s;
}
.card:nth-child(2) {
  animation-delay: 0.6s;
}
.card:nth-child(3) {
  animation-delay: 0.8s;
}

.card-content {
    background: var(--card-bg-color);
    padding: 2rem;
    border-radius: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background-image: conic-gradient(transparent, transparent, transparent, var(--f-engine-color));
    animation: rotate 6s linear infinite;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

#z-engine::before {
    background-image: conic-gradient(transparent, transparent, transparent, var(--z-engine-color));
}

.card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.card:hover::before {
    opacity: 1;
}

.card h2 {
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#f-engine h2 { color: var(--f-engine-color); }
#z-engine h2 { color: var(--z-engine-color); }

.card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left;
    flex-grow: 1;
}

.card ul li {
    margin-bottom: 1rem;
    font-weight: 300;
    position: relative;
    padding-left: 1.8em;
    font-size: 0.95rem;
    color: var(--subtext-color);
}

.card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 600;
}

#f-engine ul li::before { color: var(--f-engine-color); }
#z-engine ul li::before { color: var(--z-engine-color); }

.go {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    display: inline-block;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid var(--border-color);
    margin-top: auto;
}

.card:hover .go {
    color: #ffffff;
}

#f-engine:hover .go { background-color: var(--f-engine-color); border-color: var(--f-engine-color);}
#z-engine:hover .go { background-color: var(--z-engine-color); border-color: var(--z-engine-color);}

/* Placeholder Card */
.placeholder {
    cursor: not-allowed;
}

.placeholder .card-content {
    background: repeating-linear-gradient(-45deg, var(--card-bg-color), var(--card-bg-color) 10px, #222c3e 10px, #222c3e 11px);
}

.placeholder h2 {
    color: var(--placeholder-color);
}

.placeholder p {
    color: #5a6372;
    flex-grow: 1;
    margin-top: 1.5rem;
}

.placeholder:hover {
    transform: none;
    box-shadow: none;
}

.placeholder::before {
    display: none;
}

@keyframes rotate {
	100% {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .engine-cards {
        gap: 1.5rem;
    }
    .card {
        width: 100%;
        max-width: 350px;
    }
}