* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family:'Inter', sans-serif; 
}

body {
  background: #fff;
  color: #111;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* Hide horizontal scrollbar (premium) */
body::-webkit-scrollbar {
  height: 0;
}
body {
  scrollbar-width: none;
}

/* Navbar */
.navbar { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:20px 10%; 
  border-bottom:1px solid #eee; 
  background: rgba(255,255,255,0.95);
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
}
.logo { font-size:1.5rem; font-weight:700; }
.logo span { color:#2196f3; }
.navbar ul { list-style:none; display:flex; gap:20px; }
.navbar ul li a { text-decoration:none; color:#333; font-weight:500; }
.btn { padding:10px 20px; border-radius:25px; text-decoration:none; font-weight:600; }
.btn-primary { background:#2196f3; color:#fff; }
.btn-primary:hover { background:#1976d2; }
.btn-secondary { border:1px solid #ccc; background:#fff; color:#333; }

/* Each section fills viewport */
.hero, .how-it-works, .testimonials, footer, .why-fastexample {
  min-width: 100%;
  min-height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 100px 10% 60px;
  box-sizing: border-box;
}

/* Hero */
.hero { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
}
.hero-text { flex:1; }
.hero-text h1 { font-size:2.3rem; margin-bottom:20px; }
.hero-text p { font-size:1.6rem; margin-bottom:20px; }
.hero-buttons { display:flex; gap:15px; margin-bottom:20px; }

/* Trust */
.trust {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 20px;
}
.store {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 220px;
  text-align: center;
}

/* Why FastExample – refined only */
.why-fastexample {
  min-width: 100%;
  min-height: 100vh;          /* 👈 allow flexibility */
  padding: 100px 10% 60px;
  scroll-snap-align: start;

  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 70%);
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow-y: hidden;         /* 👈 stops vertical scrolling */
}

.typing-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;

  border-right: 2px solid #2196f3;

  animation:
    typing 3.2s steps(40, end) forwards,
    blink 0.8s step-end infinite;

  max-width: 0;
}


/* Typing effect */
@keyframes typing {
  from { max-width: 0; }
  to { max-width: 100%; }
}

/* Cursor blink */
@keyframes blink {
  50% { border-color: transparent; }
}


.why-fastexample h2 {
  font-size: 2.4rem;
  margin-bottom: 50px;
  font-weight: 700;
  color: #0d1b2a;
}

.why-list {
  width: 100%;
  max-width: 900px;          /* balanced width */
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.why-list p {
  background: #ffffff;
  padding: 18px 22px;
  border-radius: 14px;

  font-size: 0.95rem;
  color: #1f2a37;
  line-height: 1.4;
  text-align: left;

  /* Line clamp – standard + vendor */
  display: -webkit-box;
  display: box;                 /* fallback */
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;                /* ✅ standard property */
  overflow: hidden;

  border-left: 4px solid #2196f3;

  box-shadow:
    0 10px 24px rgba(33, 150, 243, 0.07),
    0 4px 10px rgba(0, 0, 0, 0.04);
}

.why-list p:hover {
  transform: translateY(-3px);
}

.why-list p:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px rgba(33, 150, 243, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Store */
.store-icon {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}
.review p {
  margin: 5px 0;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.3;
}

/* Mockup */
.mockup-image {
  max-width: 190px;
  opacity: 0;
  transform: translateY(40px);
  animation: mockupFade 1.4s ease-out forwards;
  animation-delay: 0.6s;
}

/* How it works */
.how-it-works {
  margin-top: 40px;   /* adjust: 30–60px sweet spot */

  background: linear-gradient(
    180deg,
    #f6f9ff 0%,
    #ffffff 70%
  );
  text-align: center;
}

.how-it-works h2 {
  margin-bottom: 50px;
}

.steps { display:flex; gap:30px; justify-content:center; margin-bottom:30px; }
.step .number {
  background:#2196f3;
  color:#fff;
  border-radius:50%;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
}
.features-grid { display:flex; gap:20px; justify-content:center; }
.feature {
  background:#fff;
  padding:15px 20px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* Testimonials */
.testimonials {
  display: flex;
  gap: 20px;
  justify-content: center;

  background: linear-gradient(
    180deg,
    #f6f9ff 0%,
    #ffffff 70%
  );
}

.testimonial {
  background:#f9f9f9;
  padding:20px;
  border-radius:10px;
  width:280px;
}

/* Footer */
footer {
  background: linear-gradient(
    180deg,
    #f6f9ff 0%,
    #ffffff 70%
  );

  color: #1f2a37;              /* readable on light gradient */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;

  border-top: 1px solid #e5ecf6; /* subtle separation (premium) */
}

/* Animation */
@keyframes mockupFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 📱 Mobile UX – Vertical layout */
@media (max-width: 768px) {

  body {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    height: auto;
  }

  .hero,
  .why-fastexample,
  .how-it-works,
  .testimonials,
  footer {
    min-width: 100%;
    height: auto;
    padding: 90px 8% 60px;
  }

  /* Stack hero content */
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-image {
    margin-top: 30px;
  }

  /* Center hero text */
  .hero-text h1 {
    font-size: 1.9rem;
  }

  .hero-text p {
    font-size: 1.2rem;
    text-align: center;
  }

  /* Why section → single column */
  .why-list {
    grid-template-columns: 1fr;
  }

  /* Steps → vertical */
  .steps {
    flex-direction: column;
    gap: 20px;
  }

  /* Testimonials → vertical */
  .testimonials {
    flex-direction: column;
    align-items: center;
  }

  .testimonial {
    width: 100%;
    max-width: 320px;
  }
}

/* 🍔 Hamburger menu (mobile only) */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
}

/* Mobile navbar behavior */
@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .navbar nav {
    position: absolute;
    top: 70px;
    right: 0;
    left: 0;

    background: #fff;
    border-bottom: 1px solid #eee;

    display: none;
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
  }

  .navbar nav.open {
    display: flex;
  }

  .navbar ul {
    flex-direction: column;
    gap: 16px;
  }
}

/* 📱 Mobile: show phone mockup right after hero text */
/* 📱 Attach each feature directly under its step — MOBILE ONLY */
/* 📱 Attach each feature directly under its step — MOBILE ONLY */
@media (max-width: 768px) {
  .steps,
  .features-grid {
    display: contents;
  }

  .step {
    margin-bottom: 12px;
  }

  .feature {
    margin-bottom: 36px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .step:nth-child(1) { order: 1; }
  .feature:nth-child(1) { order: 2; }

  .step:nth-child(2) { order: 3; }
  .feature:nth-child(2) { order: 4; }

  .step:nth-child(3) { order: 5; }
  .feature:nth-child(3) { order: 6; }
}/* ✨ Glowing step numbers — MOBILE ONLY */
@media (max-width: 768px) {

  .step .number {
    position: relative;
    background: linear-gradient(135deg, #2196f3, #4dabf7);
    box-shadow:
      0 0 0 rgba(33,150,243,0.0);

    animation: glowPulse 2.2s ease-in-out infinite;
  }

  /* Glow ring */
  .step .number::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(33,150,243,0.35),
      rgba(33,150,243,0.0) 70%
    );
    z-index: -1;
  }
}

/* Glow animation */
@keyframes glowPulse {
  0% {
    box-shadow:
      0 0 0 rgba(33,150,243,0.0),
      0 0 0 rgba(33,150,243,0.0);
  }
  50% {
    box-shadow:
      0 0 18px rgba(33,150,243,0.55),
      0 0 36px rgba(33,150,243,0.35);
  }
  100% {
    box-shadow:
      0 0 0 rgba(33,150,243,0.0),
      0 0 0 rgba(33,150,243,0.0);
  }
}


/* 🖥️ Desktop: organize How it works properly */
@media (min-width: 769px) {

  /* Grid layout for steps + features */
  .how-it-works {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .steps,
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    width: 100%;
  }

  /* Steps styling */
  .step {
    text-align: center;
  }

  .step p {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 6px;
  }

  /* Feature cards under each step */
  .features-grid {
    margin-top: 24px;
  }

  .feature {
    text-align: center;
    padding: 22px 26px;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;

    box-shadow:
      0 12px 30px rgba(0,0,0,0.06),
      0 4px 12px rgba(33,150,243,0.08);
  }
}

/* ⭐ Testimonials section title (no HTML change) */
/* ⭐ Testimonials section title */
.testimonials {
  position: relative;
  padding-top: 120px;
}

.testimonials::before {
  content: "People love it";
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d1b2a;
  text-align: center;
}

@media (max-width: 768px) {
  .testimonials::before {
    font-size: 1.4rem;
  }
}

/* 📱 Fix hidden subtitle on Home (PHONE ONLY) */
@media (max-width: 768px) {

  /* Ensure subtitle sits above gradient */
  .hero-text p {
    position: relative;
    z-index: 2;

    color: #1f2a37;          /* strong readable color */
    font-weight: 500;
    opacity: 1;
  }

  /* Slight background lift for readability */
  .hero-text p span.typing-text {
    background: rgba(255, 255, 255, 0.65);
    padding: 4px 8px;
    border-radius: 8px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}
/* 📱 FINAL FIX — subtitle hidden by gradient (PHONE ONLY) */
@media (max-width: 768px) {

  /* Push gradient BEHIND everything */
  .hero::before {
    z-index: 0 !important;
  }

  /* Lift ALL hero content above gradient */
  .hero-text,
  .hero-text h1,
  .hero-text p,
  .hero-text span,
  .hero-image {
    position: relative;
    z-index: 2 !important;
  }

  /* Force subtitle visibility */
  .hero-text p {
    color: #1f2a37 !important;
    opacity: 1 !important;
    background: none !important;
  }

  /* Ensure typing text is visible */
  .typing-text {
    color: #1f2a37 !important;
    -webkit-text-fill-color: #1f2a37 !important;
  }
}
/* 📱 Remove the word "actually" from subtitle — PHONE ONLY */
@media (max-width: 768px) {

  .typing-text {
    visibility: hidden;
    position: relative;
  }

  .typing-text::after {
    content: " Make  reading  enjoyable  again.   ";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
  }
}
/* 📱 Fix hero alignment & centering — MOBILE ONLY */
@media (max-width: 768px) {

  .hero {
    align-items: center;
    text-align: center;
  }

  .hero-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-text h1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-text p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
  }

  .hero-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .mockup-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
/* 📱 Fix subtitle text clipping on mobile */
@media (max-width: 768px) {

  .hero-text p {
    width: 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;

    text-align: center;
    box-sizing: border-box;
  }
}
/* 📱 Remove the word "actually" + KEEP blinking cursor — PHONE ONLY */
/* 📱 Remove the word "actually" + KEEP blinking cursor — PHONE ONLY */
@media (max-width: 768px) {

  .typing-text {
    visibility: hidden;
    position: relative;
    border-right: none;
  }

  .typing-text::after {
    content: "Make  reading  enjoyable  again.  ";
    visibility: visible;
    position: absolute;
    left: 0;              /* ✅ start from left */
    top: 0;
    white-space: nowrap;

    border-right: 2px solid #2196f3;
    padding-right: 6px;
    animation: blink 0.8s step-end infinite;
  }
}
@media (max-width: 768px) {

  .hero-text p {
    width: 100%;
    display: flex;
    justify-content: center;   /* ✅ keeps sentence centered */
    position: relative;
  }

  .hero-text p span.typing-text {
    position: relative;
    display: inline-block;
  }
}



@media (max-width: 768px){
  .hero-image{
    position: relative;
  }

  .hero-image::before{
    content:"";
    position:absolute;
    width: 280px;
    height: 280px;
    border-radius:50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    background: radial-gradient(circle,
      rgba(33,150,243,0.22),
      rgba(33,150,243,0.00) 70%
    );
    filter: blur(2px);
    z-index: 0;
  }

  .mockup-image{
    position:relative;
    z-index:1;
  }
}
/* ✨ Fade-in on scroll — PHONE ONLY */
@media (max-width: 768px) {

  .fade-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
  }

  .fade-scroll.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* Optional: smooth delay effect */
  .fade-delay-1 { transition-delay: 0.05s; }
  .fade-delay-2 { transition-delay: 0.12s; }
  .fade-delay-3 { transition-delay: 0.18s; }
}

/* 🖥️ Desktop: make layout VERTICAL like mobile */
@media (min-width: 769px) {

  body {
    display: block;              /* ✅ CRITICAL */
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    scroll-snap-type: none;
  }


  /* Sections become normal vertical blocks */
  .hero, .how-it-works, .testimonials, footer, .why-fastexample {
    width: 100%;
    min-width: 100%;
    height: auto;
    flex-shrink: 1;
    scroll-snap-align: unset;
  }

  /* Prevent any hidden cut in this section */
  .why-fastexample {
    overflow-y: visible;
  }
}
/* ✨ Fade-in on scroll — ALL DEVICES */
.fade-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.fade-scroll.show {
  opacity: 1;
  transform: translateY(0);
}

.fade-delay-1 { transition-delay: 0.05s; }
.fade-delay-2 { transition-delay: 0.12s; }
.fade-delay-3 { transition-delay: 0.18s; }

/* ✅ Accessibility */
@media (prefers-reduced-motion: reduce) {
  .fade-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* 📱 Remove burger menu on phone ONLY */
@media (max-width: 768px) {
  .menu-toggle {
    display: none !important;
  }

  /* also keep nav visible normally (no dropdown behavior) */
  .navbar nav {
    display: flex !important;
    position: static !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .navbar ul {
    flex-direction: row !important;
    gap: 14px !important;
  }
}
/* 📱 Phone: remove burger + remove navbar links */
@media (max-width: 768px) {

  /* hide burger */
  .menu-toggle {
    display: none !important;
  }

  /* hide nav menu links */
  .navbar nav {
    display: none !important;
  }

  /* keep navbar clean + centered logo */
  .navbar {
    justify-content: center !important;
    padding: 18px 0 !important;
  }
}
/* Careers Section */
/* Careers Section */
.careers {
  padding: 80px 10%;
  text-align: center;

  /* ✅ Same gradient as Why/How/Testimonials/Footer */
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 70%);
}


.careers h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.careers-sub {
  max-width: 700px;
  margin: 0 auto 35px auto;
  opacity: 0.9;
  font-size: 1.05rem;
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 25px;
}

.job-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease;
}

.job-card:hover {
  transform: translateY(-4px);
}

.job-card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.job-meta {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 12px;
}

.job-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 14px;
}

.job-apply {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.95;
}

.job-apply:hover {
  text-decoration: underline;
}

.careers-cta {
  margin-top: 35px;
}

.careers-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease;
}

.careers-btn:hover {
  transform: scale(1.03);
}

/* Mobile */
@media (max-width: 900px) {
  .jobs-grid {
    grid-template-columns: 1fr;
  }

  .job-card {
    text-align: left;
  }
}
/* ✅ DESKTOP ONLY: Glow appears first, then disappears after phone is fully shown */
@media (min-width: 769px) {

  .hero-image{
    position: relative;
  }

  /* Glow circle */
  .hero-image::before{
    content:"";
    position:absolute;

    width: 360px;
    height: 360px;
    border-radius:50%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);

    background: radial-gradient(circle,
      rgba(33,150,243,0.35),
      rgba(33,150,243,0.00) 70%
    );

    filter: blur(7px);

    opacity: 0;
    z-index: 1;

    /* ✅ Glow shows first, then disappears */
    animation: glowInOut 2.2s ease forwards;
    animation-delay: 0.1s;
  }

  /* Phone on top */
  .mockup-image{
    position: relative;
    z-index: 2;
  }
}

/* ✅ Glow animation: appear -> stay -> fade out */
@keyframes glowInOut {
  0%   { opacity: 0; }
  20%  { opacity: 1; }   /* glow comes in */
  75%  { opacity: 1; }   /* stays while phone fades */
  100% { opacity: 0; }   /* disappears after phone is fully visible */
}
@media (max-width: 768px) {

  .typing-text::after {
    content: "Make  reading  enjoyable  again.  ";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;

    font-size: 1.32rem;   /* ✅ change size here */

    border-right: 2px solid #2196f3;
    padding-right: 6px;
    animation: blink 0.8s step-end infinite;
  }
}
/* 📱 Phone only: remove "Learn using Real-life examples" subtitle */
@media (max-width: 768px) {
  .hero-text p {
    display: none !important;
  }

  /* optional: tighten spacing after removing subtitle */
  .hero-buttons {
    margin-top: 18px;
  }
}
@media (min-width: 1024px) {
  html {
    font-size: 105%;
  }
}
.blue-word{
  color:#2196f3;
}
/* ✅ Pulse phone mockup AFTER it appears (PHONE ONLY) */
/* ✅ Phone mockup: rotate once + pulse twice (PHONE ONLY) */
@media (max-width: 768px) {
  .mockup-image{
    animation:
      mockupFade 1.4s ease-out forwards,
      rotateOnce 0.55s ease-in-out forwards,
      pulseOnce 0.45s ease-in-out forwards;

    /* fade starts, then rotate, small delay, then ONE pulse */
    animation-delay: 0.6s, 2.0s, 2.75s;
  }
}


/* 1 fast rotation */


@keyframes pulseOnce {
  0%   { transform: scale(1) rotate(360deg); }
  50%  { transform: scale(1.08) rotate(360deg); }
  100% { transform: scale(1) rotate(360deg); }
}