/* Orchid Beauty Style Sheet */
/* --- 1. Base & Global Styles --- */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: #f7f7f5;
  color: #333333;
  margin: 0;
  padding: 0;
}
/* Navigation */
.navbar {
  background-color: #0a4d3c;
}
.navbar-brand {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #f2c94c !important;
}
.nav-link {
  color: #ffffff !important;
  font-weight: 500;
}
.nav-link:hover {
  color: #f2c94c !important;
}

header h1,
header h2,
.brand-text,
section h3,
aside h4 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
  color: #0a4d3c;
}

.brand-text {
  font-weight: 800;
  font-size: 2rem;
  color: #0a4d3c;
}

/* --- 3. Main Layout Containers --- */
#container {
  width: 630px;
  margin: auto;
  padding: 0 0 100px 0;
  background: transparent url(rounded.jpg) no-repeat bottom;
  position: relative;
}
#pageHeader {
  background: transparent url(images/logo.gif) no-repeat center top;
  width: 630px;
  height: 80px;
}
#intro {
  width: 400px;
  margin: 0;
}
#supportingText {
  width: 350px;
  margin: 0;
}

/* --- 4. Section Cards & DIY Styles --- */
.section-card {
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  padding: 1.75rem;
  margin-bottom: 2rem;
  border-left: 6px solid #a3c76d;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.section-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
}

/* DIY visual composition */
#diy {
  position: relative;
  width: 350px;
  margin: 0 0 0 60px;
}
.diy-vertical {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #8b0000;
  transform: rotate(-90deg);
  white-space: nowrap;
}
.diy-word {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: #8b0000;
}
.diy-gradient-box {
  background: linear-gradient(to right, #a3c76d, #6b8e23);
  color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  font-weight: 500;
}

/* --- 5. ALL AI VISUAL SHAPES --- */
.ai-crystal {
  padding: 1.5rem;
  background: linear-gradient(135deg, #007c41, #005c30);
  color: #fff;
  clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%);
  text-align: center;
  font-weight: 500;
}
.ai-hexagon {
  padding: 1.5rem;
  border: 3px solid #4b9cd3;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: rgba(75, 156, 211, 0.1);
  text-align: center;
  font-weight: 500;
}
.ai-circuit {
  position: relative;
  padding: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #6a5acd, #483d8b);
  color: #fff;
  text-align: center;
}

.ai-circuit::before,
.ai-circuit::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
}

.ai-circuit::before {
  top: -7px;
  left: 20%;
}

.ai-circuit::after {
  bottom: -7px;
  right: 20%;
}

.ai-stack {
  padding: 1.5rem;
  background: #e0f7fa;
  border-left: 6px solid #00838f;
  border-right: 6px solid #00838f;
  border-radius: 0.5rem;
  box-shadow: 0 6px 0 #b2ebf2;
  text-align: center;
}

.ai-vortex {
  padding: 1.5rem;
  background: radial-gradient(
    circle at center,
    #ffffff 0%,
    #d0e8ff 40%,
    #7ab8ff 100%
  );
  border-radius: 50%;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 0 20px rgba(0, 120, 255, 0.3);
}

.ai-brain {
  padding: 1.5rem;
  background: #f0f8ff;
  border: 4px dashed #4682b4;
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
  text-align: center;
  font-weight: 500;
}
.ai-neural {
  position: relative;
  padding: 1.5rem;
  background: #1e1e2f;
  color: #fff;
  border-radius: 1.25rem;
  text-align: center;
  box-shadow: 0 0 20px rgba(100, 200, 255, 0.3);
}

.ai-neural::before,
.ai-neural::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #64c8ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #64c8ff;
}

.ai-neural::before {
  top: -7px;
  left: 20%;
}

.ai-neural::after {
  bottom: -7px;
  right: 25%;
}

.travel-postcard {
  padding: 1.5rem;
  border: 3px dashed #4682b4;
  background: #f0f8ff;
  border-radius: 0.5rem;
  text-align: center;
  position: relative;
}

.travel-postcard::after {
  content: "✈️";
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 2rem;
  opacity: 0.7;
}

/* --- 6. Legacy Shapes (Triangle & Thought Bubble) --- */
.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(to bottom, #d7d700, #808000);
}
.triangle-isosceles::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: -45px;
  left: 75px;
  width: 0;
  height: 0;
  border-width: 45px 15px;
  border-style: solid;
  border-color: #808000 transparent transparent transparent;
}
.oval-thought-border {
  position: relative;
  padding: 70px 30px;
  margin: 1em auto 80px;
  border: 10px solid #c81e2b;
  text-align: center;
  background: #fff;
  border-radius: 240px / 140px;
}
.oval-thought-border::before,
.oval-thought-border::after {
  content: "";
  position: absolute;
  z-index: 10;
  background: #fff;
  border: 10px solid #c81e2b;
  border-radius: 50%;
}
.oval-thought-border::before {
  bottom: -40px;
  right: 100px;
  width: 50px;
  height: 50px;
}
.oval-thought-border::after {
  bottom: -60px;
  right: 50px;
  width: 25px;
  height: 25px;
}

/* --- 7. Rotation & Typography --- */
.rotate {
  float: left;
  position: relative;
  padding: 5px 5px 0px;
  margin-left: 10px;
}
.r1,
.r2 {
  text-transform: uppercase;
  font-size: 40px;
}
.r2 {
  line-height: 15px;
  position: absolute;
  left: 25px;
  top: 45px;
}
.r3 {
  display: block;
  position: absolute;
  left: 80px;
  top: 25px;
}

p {
  color: #999999;
  font-size: 15px;
  line-height: 1.5em;
  font-family: Geneva, Arial, sans-serif;
}
a:link,
a:active {
  color: #6d2542;
  text-decoration: none;
}
a:visited {
  color: #999999;
}
a:hover {
  color: #808000;
  text-decoration: underline;
}

/* --- 8. Footer & Animations --- */
#footer {
  width: 350px;
  margin: 0 0 0 60px;
}
/* Decorative Elements */
.diy-triangle svg {
  max-width: 70px;
  height: auto;
}
/* Base animation logic */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease forwards;
}
/* Staggered delays: Keep these if your HTML has class="delay-1", etc. */
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.3s;
}
.delay-4 {
  animation-delay: 0.4s;
}

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

/* Sidebar Headers */
aside h4 {
  color: #0a4d3c;
  font-weight: 700;
  margin-top: 1.5rem;
}