/* =====================================================
   FREE ONLINE TEXT EDITOR — ABOUT PAGE
===================================================== */

.fote-about-page{
  --fote-primary:#5b6ff5;
  --fote-secondary:#7c3aed;
  --fote-dark:#111827;
  --fote-text:#4b5563;
  --fote-muted:#6b7280;
  --fote-border:#e5e7eb;
  --fote-soft:#f7f8fc;
  --fote-white:#ffffff;
  --fote-radius:18px;
  --fote-shadow:0 18px 50px rgba(15,23,42,.09);

  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  font-family:Inter,Arial,sans-serif;
  color:var(--fote-text);
  background:var(--fote-soft);
}

.fote-about-page *,
.fote-about-page *::before,
.fote-about-page *::after{
  box-sizing:border-box;
}

.fote-about-container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 22px;
}

/* =====================================================
   HERO
===================================================== */

.fote-about-hero{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:78px 20px;
  color:#ffffff;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.15),
      transparent 28%
    ),
    linear-gradient(135deg,#5b6ff5,#7c3aed);
}

.fote-about-hero .fote-about-container{
  max-width:860px;
}

.fote-about-badge,
.fote-section-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 15px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.3;
  text-transform:uppercase;
}

.fote-about-badge{
  margin-bottom:20px;
  color:#ffffff;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.22);
}

.fote-about-hero h1{
  margin:0 0 18px;
  color:#ffffff !important;
  font-size:52px;
  line-height:1.12;
  letter-spacing:-1.4px;
  font-weight:800;
}

.fote-about-hero p{
  max-width:760px;
  margin:0;
  color:#f3f4ff !important;
  font-size:18px;
  line-height:1.8;
}

/* =====================================================
   MAIN ABOUT PANEL
===================================================== */

.fote-about-content{
  padding:48px 0 26px;
  background:#f7f8fc;
}

.fote-about-panel{
  padding:52px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(15,23,42,.09);
}

.fote-about-block{
  margin:0 0 42px;
  padding:0 0 42px;
  border-bottom:1px solid #e5e7eb;
}

.fote-about-block:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

.fote-section-label{
  margin-bottom:15px;
  color:#7c3aed;
  background:#f2efff;
}

.fote-about-block h2,
.fote-about-values h2,
.fote-about-users h2,
.fote-story-card h2,
.fote-commit-card h2{
  margin:0 0 17px;
  color:#111827;
  font-size:34px;
  line-height:1.25;
  letter-spacing:-.6px;
  font-weight:800;
}

.fote-about-block p,
.fote-section-intro,
.fote-story-card p,
.fote-commit-card p{
  margin:0 0 16px;
  color:#4b5563;
  font-size:16px;
  line-height:1.85;
}

.fote-about-block p:last-child,
.fote-story-card p:last-of-type,
.fote-commit-card p:last-of-type{
  margin-bottom:0;
}

/* =====================================================
   FEATURE LIST
===================================================== */

.fote-about-feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 22px;
  margin-top:28px;
}

.fote-about-feature-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:15px 16px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
}

.fote-about-feature-item span{
  flex:0 0 25px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  border-radius:50%;
  color:#ffffff;
  background:linear-gradient(135deg,#5b6ff5,#7c3aed);
  font-size:13px;
  font-weight:800;
}

.fote-about-feature-item p{
  margin:0;
  color:#4b5563;
  font-size:14px;
  line-height:1.65;
}

/* =====================================================
   HIGHLIGHT CARDS
===================================================== */

.fote-about-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:28px;
}

.fote-about-highlight-card{
  padding:29px 24px;
  text-align:center;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.fote-about-highlight-card:hover{
  transform:translateY(-5px);
  border-color:#c9c4ff;
  box-shadow:0 18px 38px rgba(15,23,42,.11);
}

.fote-about-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  border-radius:17px;
  background:linear-gradient(135deg,#eef2ff,#f5eefe);
  font-size:28px;
}

.fote-about-highlight-card h3{
  margin:0 0 10px;
  color:#111827;
  font-size:20px;
  font-weight:800;
}

.fote-about-highlight-card p{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.7;
}

/* =====================================================
   VALUES
===================================================== */

.fote-about-values{
  padding:72px 0;
  text-align:center;
  background:#ffffff;
}

.fote-about-values .fote-section-intro{
  max-width:760px;
  margin:0 auto 36px;
  color:#6b7280;
}

.fote-values-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.fote-value-card{
  padding:34px 26px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(15,23,42,.07);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.fote-value-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(15,23,42,.11);
}

.fote-value-icon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  border-radius:18px;
  color:#ffffff;
  background:linear-gradient(135deg,#5b6ff5,#7c3aed);
  font-size:28px;
}

.fote-value-card h3{
  margin:0 0 11px;
  color:#111827;
  font-size:21px;
  font-weight:800;
}

.fote-value-card p{
  margin:0;
  color:#6b7280;
  font-size:15px;
  line-height:1.75;
}

/* =====================================================
   USER TYPES
===================================================== */

.fote-about-users{
  padding:72px 0;
  text-align:center;
  background:#f7f8fc;
}

.fote-user-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:34px;
  text-align:left;
}

.fote-user-box{
  position:relative;
  padding:27px 24px 27px 30px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 9px 26px rgba(15,23,42,.06);
}

.fote-user-box::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:5px;
  background:linear-gradient(#5b6ff5,#7c3aed);
}

.fote-user-box h3{
  margin:0 0 10px;
  color:#111827;
  font-size:19px;
  font-weight:800;
}

.fote-user-box p{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.7;
}

/* =====================================================
   STORY
===================================================== */

.fote-about-story{
  padding:72px 0;
  background:#ffffff;
}

.fote-story-card{
  padding:48px;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,#b8c4ff,#d9c0ff) border-box;
  border:1px solid transparent;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(15,23,42,.09);
}

/* =====================================================
   COMMITMENT CTA
===================================================== */

.fote-about-commitment{
  padding:24px 0 82px;
  background:#ffffff;
}

.fote-commit-card{
  width:100%;
  padding:64px 36px;
  text-align:center;
  color:#ffffff !important;
  border-radius:18px;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.16),
      transparent 28%
    ),
    linear-gradient(135deg,#5b6ff5,#7c3aed) !important;
  box-shadow:0 20px 50px rgba(91,111,245,.22);
}

.fote-commit-card .fote-section-label{
  color:#ffffff !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.2);
}

.fote-commit-card h2{
  color:#ffffff !important;
}

.fote-commit-card p{
  max-width:790px;
  margin:0 auto 27px;
  color:#f3f4ff !important;
}

.fote-about-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 25px;
  color:#7c3aed !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  text-decoration:none;
  font-size:15px;
  font-weight:800;
  box-shadow:0 10px 25px rgba(15,23,42,.13);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.fote-about-btn:hover{
  color:#7c3aed !important;
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(15,23,42,.2);
}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:980px){

  .fote-about-feature-list{
    grid-template-columns:1fr;
  }

  .fote-about-highlight-grid,
  .fote-values-grid,
  .fote-user-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .fote-about-panel,
  .fote-story-card{
    padding:38px;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

  .fote-about-container{
    padding:0 15px;
  }

  .fote-about-hero{
    margin-top:0;
    padding:58px 8px;
  }

  .fote-about-hero h1{
    font-size:36px;
    letter-spacing:-.7px;
  }

  .fote-about-hero p{
    font-size:16px;
  }

  .fote-about-content{
    padding-top:28px;
  }

  .fote-about-panel,
  .fote-story-card{
    padding:27px 22px;
    border-radius:14px;
  }

  .fote-about-block{
    margin-bottom:32px;
    padding-bottom:32px;
  }

  .fote-about-block h2,
  .fote-about-values h2,
  .fote-about-users h2,
  .fote-story-card h2,
  .fote-commit-card h2{
    font-size:27px;
  }

  .fote-about-highlight-grid,
  .fote-values-grid,
  .fote-user-grid{
    grid-template-columns:1fr;
  }

  .fote-about-values,
  .fote-about-users,
  .fote-about-story{
    padding:55px 0;
  }

  .fote-about-commitment{
    padding:10px 0 58px;
  }

  .fote-commit-card{
    padding:48px 22px;
    border-radius:14px;
  }
}

@media(max-width:420px){

  .fote-about-hero h1{
    font-size:31px;
  }

  .fote-about-badge,
  .fote-section-label{
    font-size:11px;
  }

  .fote-about-highlight-card,
  .fote-value-card,
  .fote-user-box{
    padding:24px 19px;
  }
}