/* about.css — visually rich about page for Notely
   Uses the exact same color variable names as your original CSS so it integrates smoothly.
*/

:root{
  --header-height:72px;
  --bg: #f4f7f8;
  --surface: rgba(255,255,255);
  --surface-strong: rgba(255,255,255,0.76);
  --muted: #6b7280;
  --text: #0f1724;
  --accent: #4fb3b3;
  --border: rgba(15,23,36,0.08);
  --input: rgba(15,23,36,0.2);
  --paper-bg: rgba(255, 255, 255, 0.95);
  --radius: 14px;
  --shadow: 0 12px 40px rgba(18,20,24,0.06);
  --gap: 20px;
  --max-width: 1200px;
  --container-pad: 28px;
}

/* Dark theme variables (same names so toggling works) */
body.dark-mode{
  --bg: #071017;
  --surface: rgba(18,22,28);
  --surface-strong: rgba(24,28,34,0.62);
  --muted: #9aa6b2;
  --text: #e6eef1;
  --accent: #3fb0b0;
  --border: rgba(255,255,255,0.06);
  --input: rgba(255,255,255,0.2);
  --paper-bg: rgba(24,28,34,0.86);
  --shadow: 0 14px 50px rgba(0,0,0,0.6);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background-color: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:block;
  line-height:1.45;
}

/* Top bar */
.topbar{
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px calc(var(--container-pad));
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(5px);
  background: linear-gradient(180deg, var(--surface), var(--surface-strong));
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px; padding: 0.3rem; border-radius:10px;background:var(--surface-strong);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);box-shadow:var(--shadow);border:1px solid var(--border)}
.logosvg{stroke: var(--accent); stroke-width: 3.5rem;}
.brand-name{font-weight:800;font-size:18px}
.brand-sub{font-size:13px;color:var(--muted);margin-top:2px}
.controls{display:flex;align-items:center;gap:12px}
.btn{text-decoration: none; transition: 200ms; padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:10px; color: var(--text);}
.btn:hover{transform:translateY(-2px);border-color: var(--text);}


h1{text-align: center;font-size: 3rem;font-weight: 900;}

.icon-btn{transition: 200ms; border:1px solid var(--border);background:var(--surface);padding:1rem 1.5rem;border-radius:500px;cursor:pointer;color:var(--muted);font-size: 1.5rem;font-weight: 700;}
.icon-btn:hover{transform:translateY(-3px);color:var(--text); border-color: var(--muted)}

/* scrollbars */

/* width */
::-webkit-scrollbar {
  width: 0;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent;
}

.theme{
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0rem 0rem 10rem 0rem;
}


/* contact */
.contact-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10rem 5rem 10rem 5rem;
    gap: 5vw;
}

.contact-side{
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 1.15rem;
  line-height: 1.7;
  text-align: left;
}

.contact-side p {
  color: var(--muted);
}

.contact{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
    min-width: 300px;
    gap: 1rem;
}

.contact-inputs{
    padding: 1rem 1.5rem 1rem 1.5rem;
    border-radius: 2rem;
    border: 1px solid var(--border);
    color: var(--text);
    background-color: var(--container-pad);
    resize: none;
    flex: 1;

    transition: 200ms;
}

.contact-inputs::placeholder{
    color: var(--input);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--text);
    transition: 5000s ease-in-out 0s;
}

.contact-inputs:hover{
    background-color: var(--border);
}

textarea{
    height: 200px;
    padding: 1rem 1.5rem 1rem 1.5rem;
    border-radius: 2rem;
    border: 1px solid var(--border);
    color: var(--text);
    background-color: var(--container-pad);
    resize: none;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;

    transition: 200ms;
}

textarea::placeholder{
    color: var(--input);
}

textarea:hover{
    background-color: var(--border);
}

.contact-inputs-button{
    padding: 0.6rem 1.5rem 1rem 1.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid var(--border);
    color: var(--input);
    background-color: var(--container-pad);
    resize: none;

    transition: 200ms;
}

.contact-inputs-button:hover{
    background-color: var(--border);
    cursor: pointer;
    color: var(--text);
}

.contact-inputs-button .arrow{
    stroke: transparent;
    stroke-width: 3rem;
    transition: 200ms;
}

.contact-inputs-button:hover .arrow{
    stroke: var(--text);
}

.contact-inputs-button .arrowSvg{
    transform: translateX(-10px) translateY(4px);
    transition: 200ms ease;
}

.contact-inputs-button:hover .arrowSvg{
    transform: translateX(5px) translateY(4px);
}

/* footer */
.footer{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  padding: 2rem 0rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin: 0;
}

.footer-heading{
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}

.footer-links{
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.footer-link{
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: 200ms;
}

.footer-link:hover{
  color: var(--text);
  text-decoration: underline;
}

.footer p{
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Existing CSS unchanged above this point */

/* New Content Wrapper to centralize main content (excluding header/footer) */
.content-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* This Is Notely (Improved Hero Section) */
.this-is-notely {
  min-height: 70vh; /* Changed height to min-height for better flow */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 80px 5vw; /* Added vertical padding */
  margin: 0 auto;
  max-width: 800px; /* Constrain text width for readability */
}

.this-is-notely h1 {
  font-size: 3.5rem; /* Slightly larger */
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
}

.this-is-notely p {
  font-size: 1.3rem; /* Larger body text */
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
}

/* Horizontal Rule for separation */
hr {
  border: none;
  height: 1px;
  background-color: var(--border);
  margin: 5rem 0;
}

/* Feature & Philosophy Sections */
.features-section, .philosophy-section {
  padding: 40px 0;
  text-align: center;
}

.features-section h2, .philosophy-section h2, .contact-section h2 {
  font-size: 2.5rem;
  font-weight: 800;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 50px rgba(18,20,24,0.1);
}
body.dark-mode .feature-card:hover {
  box-shadow: 0 16px 50px rgba(0,0,0,0.8);
}

.feature-card h3 {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0;
}

.feature-card p {
  color: var(--muted);
  font-size: 1rem;
}

/* Philosophy Section */
.philosophy-text {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1.15rem;
  line-height: 1.7;
  text-align: center;
}

.philosophy-text p {
  color: var(--muted);
}

.philosophy-text strong {
  color: var(--muted);
  font-weight: 700;
}


/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .this-is-notely h1 {
    font-size: 2.5rem;
  }

  .this-is-notely p {
    font-size: 1.1rem;
  }
  
  .features-section h2, .philosophy-section h2 {
    font-size: 2rem;
  }

  .contact-section {
    flex-direction: column;
    margin: 5rem 5vw;
  }
  
  .contact-side, .contact {
    min-width: 80vw;
    max-width: 100%;
  }
  
  .contact-side {
    order: -1;
    text-align: center;
  }

  .footer {
    flex-direction: column;
    gap: 2rem;
  }
  
  .footer-links {
    align-items: center;
  }
}