/* The Gradinator Landing CSS - TeachSmarts Brand Style */

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

body, html {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: #2c3e50;
  /* Soft grey/white background like Docinator */
  background: #f0f2f5; 
}

/* Header */
.landing-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    z-index: 10;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    text-transform: none;
    letter-spacing: 0.5px;
}

/* Login Button (Top Right) */
.btn-login-header {
    background-color: transparent;
    color: #27ae60; /* Gradinator Green */
    padding: 8px 20px;
    border: 2px solid #27ae60;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-login-header:hover { background-color: #27ae60; color: white; }

/* Main Layout */
.landing-content {
    display: flex;
    flex-direction: row;
    align-items: center; /* Vertically center */
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 80px auto 40px auto; /* Top margin for header */
    padding: 0 20px;
    min-height: calc(100vh - 120px);
    gap: 60px;
}

.landing-left { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

.landing-right { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}

/* Hero Section */
h1 { font-size: 2.8rem; margin-bottom: 15px; font-weight: 700; color: #1e2022; }
p.sub-head { font-size: 1.2em; margin-bottom: 30px; color: #555; line-height: 1.6; max-width: 400px; }

/* "Get Started" CTA Button */
.btn-cta {
    background-color: #27ae60; /* Gradinator Green */
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(39, 174, 96, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(39, 174, 96, 0.3); background-color: #229954; }

/* Right Column Features */
h2.features-header { 
    font-size: 1.8rem; 
    font-weight: 700; 
    margin-bottom: 25px; 
    color: #1e2022; 
    align-self: flex-start;
}

.feature-box {
  background: #fff;
  border-radius: 8px;
  padding: 20px 25px;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow like Docinator */
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: transform 0.2s ease;
  border-left: none; /* Removed the green bar to match Docinator style */
}

.feature-box strong { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: 700; 
    color: #2c3e50; 
    font-size: 1.05em;
}

/* App Overrides */
.hidden { display: none !important; }

/* Responsive */
@media (max-width: 960px) {
  .landing-content { flex-direction: column; text-align: center; margin-top: 20px; }
  .landing-right { align-items: center; width: 100%; }
  .landing-left { margin-bottom: 40px; }
  h2.features-header { align-self: center; }
  .landing-header { position: relative; padding: 20px; }
}