/* =========================
   Global / Resets / A11y
   ========================= */
:root{
  --bg:#0e1a22;
  --card:#2a2f3c;
  --accent:#ffb347;
  --cta:#FFD369;
  --teal:#2a9d8f;
}

*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior: smooth;}
body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color:#fff;
}
img{ max-width:100%; height:auto; display:block; }

/* Screen-reader only */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Keyboard focus */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto; padding:8px 12px;
  background:#1c1f2b; color:#fff; border-radius:8px; z-index:1000;
}

/* =========================
   Header & Navigation
   ========================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 40px;
  background: var(--card);
  color:#fff;
  position:relative;
}

.logo-container{ display:flex; align-items:center; gap:12px; }
.logo-img{ height:60px; width: auto;}
.logo-text{ font-size:1.2rem; font-weight:600; color:#fff; letter-spacing:1px; }

header nav{ display:flex; align-items:center; gap:1rem; }
header nav a{
  margin:0 0.25rem;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  padding:6px 8px;
  border-radius:8px;
}
header nav a:hover,
header nav a:focus-visible{ background:rgba(255,255,255,.08); }

/* Mobile menu toggle */
.menu-toggle{
  display:none;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:8px 10px;
  line-height:1;
}

/* Collapse nav on mobile; show when aria-expanded="true" */
@media (max-width: 860px){
  header{ padding:12px 16px; }
  .logo-img{ height:40px;}
  .menu-toggle{ display:inline-block; }
  header nav{
    position:absolute; left:0; right:0; top:100%;
    background:#1c1f2b;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:none; flex-direction:column; gap:6px; padding:12px 16px;
  }
  header nav a{ padding:12px; margin:0; }
  header:has(.menu-toggle[aria-expanded="true"]) nav{ display:flex; }
}

/* =========================
   Hero
   ========================= */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 20px;
  overflow:hidden;
  color:#fff;
  background: linear-gradient(135deg, #1c1f2b 0%, var(--teal) 50%, #264653 100%);
}

.hero-content{ position:relative; z-index:1; max-width:750px; margin:auto; }

.hero h1{
  /* fallback color for older engines before gradient text */
  color: var(--cta);
  background: linear-gradient(90deg, var(--cta), #FF8C42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  margin-bottom:20px; line-height:1.2;
}
.hero p{ font-size: clamp(1rem, .6vw + .9rem, 1.25rem); margin-bottom:30px; color:#e7e7e7; }

.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.btn-primary,
.hero button{
  background: var(--cta);
  color:#0e1a22;
  border:none;
  padding:14px 28px;
  font-size:1.05rem;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.btn-primary:hover,
.hero button:hover{ background:#ffb84d; transform:translateY(-3px); }

.btn-link{
  display:inline-block;
  color:#e7e7e7;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:14px 0;
}

/* =========================
   Sections / Shared
   ========================= */
.features, .why-us, .contact{ padding:3rem 2rem; text-align:center; }

.section-title{
  font-size:2.2rem;
  margin-bottom:40px;
  color: var(--accent);
  text-transform:uppercase;
  letter-spacing:2px;
}

/* =========================
   Features
   ========================= */
.features{
  background:#1c1f2b;
  color:#f0f0f0;
  padding:60px 20px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,0.6);
}
.features-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
}
.feature-item{
  background: var(--card);
  padding:25px;
  border-radius:10px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-item:hover{ transform:translateY(-8px); box-shadow:0 8px 20px rgba(255,179,71,0.3); }
.feature-item .icon{ font-size:2rem; display:block; margin-bottom:15px; color: var(--accent); }

/* =========================
   Why Us
   ========================= */
.why-us{
  background:#1c1f2b; color:#f0f0f0;
  padding:60px 20px; border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,.6); margin-top:40px;
}
.why-us h2{ color: var(--accent); margin:0 0 12px; }
.why-us p{ color:#e7e7e7; max-width:900px; margin:0 auto; line-height:1.7; }

/* =========================
   Problems
   ========================= */
.problems{
  background:#1c1e26;
  color: var(--accent);
  padding:60px 20px;
  text-align:center;
}
.problems h2{ font-size:2rem; margin-bottom:10px; color: var(--accent); }
.problems .subtitle{ color:#bbb; font-size:1rem; margin-bottom:40px; }
.problems-container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:25px;
}
.problem-card{
  background:#2a2d38;
  padding:25px;
  border-radius:12px;
  transition: transform .3s ease, background .3s ease;
}
.problem-card:hover{ transform:translateY(-8px); background:#343846; }
.problem-card .icon{ font-size:2rem; margin-bottom:15px; color:#00d084; }
.problem-card h3{ margin-bottom:10px; font-size:1.2rem; color:#fff; }
.problem-card p{ color:#aaa; font-size:.95rem; line-height:1.5; }

/* =========================
   Float Image Card (optional)
   ========================= */
.why-image-container{
  margin-top:30px;
  padding:20px;
  background: var(--card);
  border-radius:12px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.1);
  transform-style:preserve-3d;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.why-image-container img{
  max-width:100%; height:auto;
  border-radius:8px;
  animation: floatY 6s ease-in-out infinite;
  transform: translateZ(30px);
}
@keyframes floatY{
  0%,100%{ transform:translateY(0) translateZ(30px); }
  50%{ transform:translateY(-6px) translateZ(30px); }
}

/* Scroll reveal utility */
.reveal-on-scroll{ opacity:0; transform:translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.is-visible{ opacity:1; transform:translateY(0); }

/* =========================
   Optional hero image fade-in
   ========================= */
.hero-image-modern{
  margin:30px auto 0;
  max-width:900px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,0.15);
}
.hero-image-modern img{
  width:100%; height:auto; display:block;
  animation: fadeInUp 1.2s ease both;
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =========================
   Voices / Carousel
   ========================= */
.voices-carousel{
  background:#1c1f2b;
  color:#f0f0f0;
  padding:60px 20px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,0.6);
  margin:50px auto;
}
.voices-wrap{ max-width:1100px; margin:0 auto; }
.voices-carousel .section-title{ color: var(--accent); text-align:center; margin-bottom:10px; }
.voices-subtitle{ text-align:center; color:#c9c9c9; margin-bottom:24px; }

/* Carousel layout */
.carousel{ position:relative; }
.carousel-viewport{ overflow:hidden; border-radius:14px; }
.carousel-track{
  display:flex;
  transition: transform .5s ease;
  will-change: transform;
}
.carousel-slide{ min-width:100%; padding:0; }

.bk-card{
  background: var(--card);
  border-radius:14px;
  margin:0;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
}

/* Image frame — wide comment screenshots */
.bk-img{ aspect-ratio: 9 / 4; background: var(--bg); display:block; }
.bk-img img{
  width:100%; height:100%;
  object-fit:contain;
  padding:8px;
  border-radius:10px;
}

/* Caption */
.bk-caption{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
  color:#e9e9e9;
  line-height:1.55;
}
.bk-caption .bk-meta{ display:inline-block; margin-left:8px; color:#b9c0c7; font-size:.9rem; }

/* Controls */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center;
  background: rgba(26,30,38,0.7);
  color:#ffcf80;
  border:1px solid rgba(255,191,71,0.35);
  border-radius:50%;
  cursor:pointer;
  backdrop-filter: blur(4px);
  transition: transform .2s ease, background .2s ease, color .2s ease;
  z-index:5;
}
.carousel-btn:hover{ transform:translateY(-50%) scale(1.06); background:rgba(26,30,38,.9); color:#ffdca8; }
.carousel-btn.prev{ left:10px; }
.carousel-btn.next{ right:10px; }

/* Dots */
.carousel-dots{
  display:flex; justify-content:center; gap:8px; margin-top:14px;
}
.carousel-dots button{
  width:9px; height:9px; border-radius:50%;
  background:#556070; border:0; cursor:pointer; padding:0;
  transition: transform .2s ease, background .2s ease;
}
.carousel-dots button.active{ background: var(--accent); transform:scale(1.25); }

/* Responsive ratios for legibility */
@media (max-width: 900px){ .bk-img{ aspect-ratio: 16 / 9; } }
@media (max-width: 520px){
  .bk-img{ aspect-ratio: 4 / 3; }
  .bk-caption{ font-size:.95rem; }
  .carousel-btn{ width:36px; height:36px; }
}

/* =========================
   Investors / Partnerships
   ========================= */
.investor-cta{
  background:#1c1f2b; color:#f0f0f0;
  padding:60px 20px; border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,.6);
  margin:50px auto;
}
.investor-wrap{ max-width:1000px; margin:0 auto; }
.cta-card{
  position:relative; background: var(--card);
  border-radius:14px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.accent-bar{
  height:4px; width:100%;
  background: linear-gradient(90deg, var(--accent), #ffd369, var(--teal));
}
.cta-content{ padding:28px 24px 32px; text-align:center; }
.investor-cta .section-title{ color: var(--accent); margin-bottom:10px; }
.cta-lead{ font-size:1.15rem; color:#e8e8e8; margin:0 0 8px; }
.cta-body{ color:#cbd5e1; margin:0 0 22px; }

.btn-solid{
  display:inline-block; background: var(--cta); color:#0e1a22;
  border:none; padding:14px 28px; border-radius:10px;
  font-weight:700; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-solid:hover{ background:#ffb84d; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.32); }
@media (prefers-reduced-motion:no-preference){
  .btn-solid:active{ transform:translateY(0); }
}
@media (min-width:840px){
  .cta-content{ padding:36px 40px 42px; }
  .cta-lead{ font-size:1.25rem; }
}

/* =========================
   Contact
   ========================= */
.contact form{
  display:flex; flex-direction:column;
  width:100%; max-width:520px; margin:auto;
  padding:0 6px;
}
.contact input, .contact textarea{
  width:100%;
  margin:.5rem 0; padding:.8rem;
  background:#121722; color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
}
.contact input::placeholder, .contact textarea::placeholder{ color:#9aa3ad; }
.contact button{
  background: var(--teal); color:#fff; border:none;
  padding:1rem; cursor:pointer; border-radius:5px;
}
.contact button:hover{ filter: brightness(1.05); }

/* =========================
   Footer
   ========================= */
footer{
  background:#264653;
  color:#fff;
  text-align:center;
  padding:1rem;
}

/* =========================
   Responsive spacing & type
   ========================= */
@media (max-width: 720px){
  .features, .why-us, .contact, .problems{ padding:2.25rem 1.25rem; }
  .section-title{ font-size:1.8rem; margin-bottom:28px; }
  .features-list, .problems-container{ grid-template-columns: 1fr; }
}

/* =========================
   Reduced Motion Preference
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}


/* ===== About Section ===== */
.about{
  background:#1c1f2b;            /* matches site dark section bg */
  color:#f0f0f0;
  padding:60px 20px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,.6);
  margin:50px auto;
  text-align:center;
}

.about .section-title{
  color:#ffb347;                 /* gold accent */
  font-size:2.2rem;
  margin:0 0 28px;
  text-transform:uppercase;
  letter-spacing:2px;
}

.about-card{
  position:relative;
  max-width:920px;
  margin:0 auto;
  background:#2a2f3c;            /* card color used elsewhere */
  padding:28px 24px;
  border-radius:12px;
  line-height:1.75;
  text-align:left;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Decorative accent bar on top of the card */
.about-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  background:linear-gradient(90deg, #ffb347, #ffd369, #2a9d8f);
}

.about-card p{
  margin:0 0 14px;
  color:#e7e7e7;
}

.about-card strong{ color:#ffcf80; }   /* lighter gold for emphasis */
.about-card em{ color:#cbd5e1; font-style:normal; } /* subtle highlight */

/* Optional: links inside the about text */
.about-card a{
  color:#ffd369;
  text-decoration:underline;
  text-underline-offset:3px;
}
.about-card a:hover{ color:#ffb347; }

/* Responsive spacing */
@media (min-width: 900px){
  .about-card{ padding:36px 40px; }
}
@media (max-width: 720px){
  .about{ padding:2.25rem 1.25rem; }
  .about .section-title{ font-size:1.9rem; margin-bottom:22px; }
}

/* Prevent long words/URLs from overflowing */
.about-card p { overflow-wrap:anywhere; }

/* XS phones: tighten spacing & scale title smoothly */
@media (max-width: 480px){
  .about { padding: 32px 16px; }
  .about-card { padding: 22px 16px; }
  .about .section-title { font-size: clamp(1.5rem, 6vw, 1.8rem); }
}