* { margin:0; padding:0; box-sizing:border-box; }

    :root{
      --candy-red:#ff6b6b;
      --sky-blue:#4ecdc4;
      --sunny-yellow:#ffd93d;
      --soft-pink:#ffb6c1;
      --mint-green:#98fb98;
      --lavender:#e6e6fa;
      --dark-bg:#1a1a1a;
      --dark-card:#2d2d2d;
      --dark-text:#ffffff;
      --dark-border:#404040;
      /* added vars that were referenced */
      --border-color:#e6e6e6;
      --text-light:#666666;
      --text-dark:#1a1a1a;
      --shadow-medium:0 10px 30px rgba(0,0,0,.12);
    }
    /* 1) Hero title (light) */
.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
  -webkit-background-clip: text;
  background-clip: text;              /* <-- added */
  -webkit-text-fill-color: transparent;
  /* (optional) color: transparent; */
  margin-bottom: 1rem;
}

/* 2) Hero title (dark) */
body.dark-mode .hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  background: #e0e0e0;
  -webkit-background-clip: text;
  background-clip: text;              /* <-- added */
  -webkit-text-fill-color: transparent;
  /* (optional) color: transparent; */
  margin-bottom: 1rem;
}

/* 3) Form title (light) — if this block exists in your CSS */
.form-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-dark);
  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
  -webkit-background-clip: text;
  background-clip: text;              /* <-- added */
  -webkit-text-fill-color: transparent;
  /* (optional) color: transparent; */
}

/* 4) Form title (dark) — if this block exists in your CSS */
body.dark-mode .form-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  background: #e0e0e0;
  -webkit-background-clip: text;
  background-clip: text;              /* <-- added */
  -webkit-text-fill-color: transparent;
  /* (optional) color: transparent; */
}

    body{
      font-family:"Comic Neue", cursive;
      overflow-x:hidden;
      background-color:#f5f3f1;
      min-height:100vh;
      position:relative;
      transition:all .3s ease;
      color:#1a1a1a;
    }
    body.dark-mode{
      background:#0d0d0d;
      color:#ffffff;
    }

    @keyframes wobble{
      0%{transform:translateX(0)}
      15%{transform:translateX(-25px) rotate(-5deg)}
      30%{transform:translateX(20px) rotate(3deg)}
      45%{transform:translateX(-15px) rotate(-3deg)}
      60%{transform:translateX(10px) rotate(2deg)}
      75%{transform:translateX(-5px) rotate(-1deg)}
      100%{transform:translateX(0)}
    }
    @keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
    @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Loading screen */
    #loading-screen{
      position:fixed; inset:0;
      background:rgba(255,255,255,0.95);
      display:flex; align-items:center; justify-content:center;
      z-index:2000;
      transition:opacity .3s ease, visibility .3s ease;
    }
    #loading-screen.hidden{opacity:0; visibility:hidden}
    #loading-screen .loader{display:flex; flex-direction:column; align-items:center; gap:.75rem; color:#3e2723; font-weight:700}
    #loading-screen .fa-spinner{font-size:2rem; animation:spin 1s linear infinite}

    /* Nav */
    .navbar{
      background:radial-gradient(circle at center,#e5c5b3,#e9b4b6);
      backdrop-filter:blur(15px);
      padding:1rem 2rem;
      position:fixed; top:0; width:100%; z-index:1000;
      box-shadow:0 8px 32px rgba(0,0,0,0.1);
      border-bottom:1px solid rgba(255,255,255,0.2);
      transition:all .3s ease;
    }
    body.dark-mode .navbar{background:#1e1e1e !important; border-bottom:1px solid rgba(255,255,255,0.1) !important}

    .nav-container{display:flex; justify-content:space-between; align-items:center; max-width:1500px; margin:0 auto}
    .logo{font-size:2rem; font-weight:600; color:#3e2723; text-decoration:none; transition:all .3s ease; display:flex; align-items:center; gap:.5rem; min-width:150px; padding-right:50px}
    .logo-icon{font-size:2rem; transition:transform .3s ease}
    .logo:hover{transform:scale(1.05); color:#3e2723}
    .logo:hover .logo-icon{transform:rotate(10deg)}
    body.dark-mode .logo{color:#e0e0e0}
    body.dark-mode .logo:hover{color:#e0e0e0}

    .nav-links{display:flex; list-style:none; gap:1.5rem; align-items:center}
    .nav-links a {
        text-decoration: none;
        color: #3e2723;
        font-weight: 600;
        font-size: 1.1rem;
        padding: 0.7rem 1rem;
        border-radius: 25px;
        transition: all 0.3s ease;
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid transparent;
    }

    body.dark-mode .nav-links a {
        color: #e0e0e0 !important;
        background: rgba(111, 100, 91, 0.133) !important;
        border: 2px solid transparent !important;
    }

    .nav-links a:hover {
        background-color: #f3e0d6;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        border-color: rgba(228, 191, 180, 0.3);
        color: #3e2723;
    }

    body.dark-mode .nav-links a:hover {
        background-color: #0d0d0d !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        border-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    /* Active navigation link styles */
    .nav-links a.active {
        background-color: #0d0d0d !important;
        color: #ffffff !important;
        border-color: #1e1e1e !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    body.dark-mode .nav-links a.active {
        background-color: #0d0d0d !important;
        color: #ffffff !important;
        border-color: #1e1e1e !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .nav-actions{display:flex; align-items:center; gap:1rem}
    .dark-mode-btn{
      background:linear-gradient(135deg, #3e2723, #4d312b); border:none; color:white; padding:.7rem; border-radius:50%;
      cursor:pointer; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); font-size:1rem; width:45px; height:45px;
      display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2);
      position:relative; overflow:hidden;
    }
    .dark-mode-btn::before{
      content:''; position:absolute; top:50%; left:50%; width:0; height:0;
      background:rgba(255,255,255,0.2); border-radius:50%; transition:all .4s ease;
      transform:translate(-50%, -50%);
    }
    .dark-mode-btn:hover::before{width:100%; height:100%}
    .dark-mode-btn:hover{
      transform:scale(1.15) rotate(360deg); 
      box-shadow:0 8px 25px rgba(0,0,0,0.3), 0 4px 12px rgba(62,39,35,0.2);
      background:linear-gradient(135deg, #4d312b, #3e2723);
    }
    body.dark-mode .dark-mode-btn{
      background:linear-gradient(135deg, #e0e0e0, #d0d0d0); 
      color:#1e1e1e;
      box-shadow:0 4px 15px rgba(224,224,224,0.2);
    }
    body.dark-mode .dark-mode-btn:hover{
      background:linear-gradient(135deg, #f0f0f0, #e0e0e0);
      box-shadow:0 8px 25px rgba(224,224,224,0.3), 0 4px 12px rgba(30,30,30,0.2);
    }

    .hamburger{
      display:none; flex-direction:column; cursor:pointer; padding:.5rem; border-radius:8px; 
      transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden;
    }
    .hamburger::before{
      content:''; position:absolute; top:0; left:0; width:100%; height:100%;
      background:rgba(255,255,255,0.1); border-radius:8px; opacity:0;
      transition:opacity .3s ease;
    }
    .hamburger:hover::before{opacity:1}
    .hamburger:hover{transform:scale(1.05)}
    .hamburger span{
      width:25px; height:3px; background:linear-gradient(45deg,#a4766a,#5d4037); 
      margin:3px 0; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius:2px;
      position:relative; z-index:1;
    }
    .hamburger:hover span{transform:scale(1.1)}
    body.dark-mode .hamburger span{background:linear-gradient(45deg,#e0e0e0,#c0c0c0)}
    .hamburger.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}
    .hamburger.active span:nth-child(2){opacity:0}
    .hamburger.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}

    /* Back to Top Button Styles */
        #backToTop {
            position: fixed;
            bottom: 2.5rem;
            right: 2.5rem;
            z-index: 2000;
            background: linear-gradient(45deg, #a4766a, #5d4037);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 56px;
            height: 56px;
            font-size: 2rem;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s, transform 0.2s;
        }

        body.dark-mode #backToTop {
            background: #e0e0e0;
            color: #0d0d0d;
        }

        #backToTop.show {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1.08);
        }

        #backToTop:hover {
            background: linear-gradient(45deg, #a4766a, #5d4037);
            transform: scale(1.15);
        }

        /* Back to Top to Bottom Button Styles */
        #Toptoback {
            position: fixed;
            bottom: 2.5rem;
            right: 2.5rem;
            z-index: 2000;
            background: linear-gradient(45deg, #a4766a, #5d4037);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 56px;
            height: 56px;
            font-size: 2rem;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s, transform 0.2s;
        }

        body.dark-mode #Toptoback {
            background: #e0e0e0;
            color: #0d0d0d;
        }

        #Toptoback.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-10px) scale(1.08);
        }

        #Toptoback:hover {
            background: linear-gradient(45deg, #a4766a, #5d4037);
            transform: scale(1.15);
        }

        body.dark-mode #Toptoback:hover {
            background: #e0e0e0;
            transform: scale(1.15);
        }

    /* Main */
    .main-content{margin-top:100px; transition:all .3s ease; padding:2rem; position:relative; z-index:2; min-height:calc(100vh - 200px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
    .hero-section{
      background:rgba(255,255,255,0.9); backdrop-filter:blur(15px);
      padding:3rem; border-radius:30px; box-shadow:0 20px 60px rgba(0,0,0,0.1);
      max-width:800px; margin:0 auto; position:relative; overflow:hidden; transition:all .3s ease;
    }
    body.dark-mode .hero-section{background:#1e1e1e; box-shadow:0 2px 2px #1e1e1e}
    .hero-section::before{content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; animation:shimmer 3s linear infinite}
    .hero-title{
      font-size:3.5rem; font-weight:700;
      background:linear-gradient(90deg,#3e2723,#4d312b,#3e2723);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem;
    }
    body.dark-mode .hero-title{background:#e0e0e0; -webkit-background-clip:text; background-clip: text;-webkit-text-fill-color:transparent}
    .hero-subtitle{font-size:1.3rem; color:#333; margin-bottom:2rem; font-weight:400; line-height:1.6; transition:color .3s ease}
    body.dark-mode .hero-subtitle{color:#e0e0e0 !important}

    .cta-button{
      background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
      color:white; font-size:1.2rem; font-weight:700; padding:1rem 2.5rem; border:none; border-radius:50px; cursor:pointer;
      text-decoration:none; display:inline-block; transition:all .3s ease; position:relative; overflow:hidden;
      box-shadow:0 10px 30px rgba(255,107,107,0.4); animation:pulse 2s ease-in-out infinite;
    }
    .cta-button:hover{transform:translateY(-5px) scale(1.05); box-shadow:0 15px 40px rgba(255,107,107,0.6)}
    .cta-button::before{content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); transition:left .5s}
    .cta-button:hover::before{left:100%}

    /* Features */
    .features-preview{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:4rem; max-width:1000px}
    .feature-card{background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); padding:2rem; border-radius:20px; text-align:center; transition:all .3s ease; border:2px solid transparent}
    body.dark-mode .feature-card{background-color:#1e1e1e}
    .feature-card:hover{transform:translateY(-5px); border-color:#1e1e1e; box-shadow:0 15px 40px #1e1e1e}
    .feature-icon{font-size:3rem; margin-bottom:1rem; display:block}
    .feature-card:nth-child(1) .feature-icon{color:var(--candy-red)}
    .feature-card:nth-child(2) .feature-icon{color:var(--sky-blue)}
    .feature-card:nth-child(3) .feature-icon{color:var(--sunny-yellow)}
    .feature-title{font-size:1.3rem; font-weight:700; margin-bottom:.5rem; color:#333}
    body.dark-mode .feature-title{color:#e0e0e0 !important}
    .feature-desc{color:#333; line-height:1.5}
    body.dark-mode .feature-desc{color:#e0e0e0 !important}

    /* Footer */
    .footer{background:radial-gradient(circle at center,#e9b4b6,#e5c5b3); backdrop-filter:blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem}
    body.dark-mode .footer{background:#1e1e1e}
    .footer-content{max-width:1500px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:3rem 2rem 2rem}
    .footer-section h3.footer-title{color:#3e2723; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; position:relative}
    .footer-section h3.footer-title::after{content:""; position:absolute; bottom:-8px; left:0; width:30px; height:3px; background:#3e2723; border-radius:2px}
    body.dark-mode .footer-section h3.footer-title::after{background:#e0e0e0}
    .footer-logo{display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; color:#3e2723}
    .footer-logo-icon{font-size:2rem}
    .footer-description{color:#333; line-height:1.6; margin-bottom:2rem; font-size:.95rem}
    .footer-links{list-style:none; padding:0; margin:0}
    .footer-links li{margin-bottom:.8rem}
    .footer-links a{color:#333; text-decoration:none; display:flex; align-items:center; gap:.8rem; font-weight:500; transition:all .3s ease; padding:.3rem 0; border-radius:5px}
    .footer-links a:hover{color:black; transform:translateX(4px); background:rgba(255,107,107,0.1); padding-left:.8rem}
    .footer-links i{font-size:.9rem; width:16px; opacity:.7}
    .social-links{display:flex; gap:1rem; margin-top:1rem}
    .social-link{display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723); color:white; text-decoration:none; border-radius:50%; font-size:1.2rem; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2)}
    .social-link:hover{transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.3)}
    .footer-bottom{background:rgba(0,0,0,0.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0}
    .footer-bottom-content{max-width:1500px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem}
    .copyright{color:#333; font-size:.9rem; margin:0}
    .copyright .name{color:#3e2723; font-weight:600}
    .footer-badges{display:flex; gap:.8rem; flex-wrap:wrap}
    .badge{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; color:white; text-decoration:none; transition:all .3s ease}
    .badge:hover{transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.2)}
    .badge-green,.badge-blue,.badge-purple{background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723)}
    body.dark-mode .footer-content{background-color:#1e1e1e; border-top:1px solid rgba(255,255,255,0.1)}
    body.dark-mode .footer-section h3.footer-title{color:#e0e0e0}
    body.dark-mode .footer-logo{color:#e0e0e0}
    body.dark-mode .footer-description{color:#a0a0a0}
    body.dark-mode .footer-links a{color:#e0e0e0}
    body.dark-mode .footer-links a:hover{color:#a0a0a0; background:rgba(255,138,128,0.1)}
    body.dark-mode .footer-bottom{background:#1e1e1e}
    body.dark-mode .copyright{color:#a0a0a0}
    body.dark-mode .copyright .name{color:#ef6154}

    /* Inputs in dark mode (sane defaults even if forms appear later) */
    body.dark-mode input{background:#2a2a2a; color:#ffffff; border-color:#404040}

    /* Responsive */
    @media (max-width:1242px){
      .navbar{padding:.8rem 1rem}
      .nav-links{
        display:flex; position:fixed; top:0; left:0; width:100%; height:100vh; background:#1a1a1a;
        flex-direction:column; justify-content:flex-start; align-items:center; padding-top:6rem;
        transition:transform .3s ease; transform:translateX(-100%); gap:0; z-index:999;
      }
      body.dark-mode .nav-links{background:#1a1a1a !important}
      .nav-links.active{transform:translateX(0)}
      .nav-links li{width:90%; border-bottom:1px solid rgba(255,255,255,0.1)}
      .nav-links a {
        width: 100%;
        padding: 1.5rem 2rem;
        font-size: 1.2rem;
        margin-bottom: 0;
        background: #2a2a2a !important;
        color: #e0e0e0 !important;
        border-radius: 0;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.3s ease;
      }

      .nav-links a:hover {
        background: #3a3a3a !important;
        color: #ffffff !important;
      }

      /* Mobile navigation active state */
      .nav-links a.active {
        background: #0d0d0d !important;
        color: #ffffff !important;
      }
      .nav-actions{
        /* gap:.5rem; z-index:1001; position: absolute; right:5rem;} */
        display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;        /* push to right */
  position: static; }
      .dark-mode-btn{width:40px; height:40px; font-size:.9rem}
      .hamburger{display:flex; position:relative; z-index:1001}

      .logo{font-size:1.5rem}
      .logo-icon{font-size:1.7rem}
    /* Hero title (light) */
.hero-title{
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
  -webkit-background-clip: text;
  background-clip: text;             /* ✅ standard property */
  -webkit-text-fill-color: transparent;
  color: transparent;                /* ✅ improves cross-browser */
  margin-bottom: 1rem;
}

/* Hero title (dark) */
body.dark-mode .hero-title{
  font-size: 3.5rem;
  font-weight: 700;
  background: #e0e0e0;
  -webkit-background-clip: text;
  background-clip: text;             /* ✅ standard property */
  -webkit-text-fill-color: transparent;
  color: transparent;                /* ✅ improves cross-browser */
  margin-bottom: 1rem;
}

/* Form title (if you still use it anywhere) */
.form-title{
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-dark);
  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
  -webkit-background-clip: text;
  background-clip: text;             /* ✅ standard property */
  -webkit-text-fill-color: transparent;
  color: transparent;                /* ✅ improves cross-browser */
}

/* Form title in dark mode (if applicable) */
body.dark-mode .form-title{
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  background: #e0e0e0;
  -webkit-background-clip: text;
  background-clip: text;             /* ✅ standard property */
  -webkit-text-fill-color: transparent;
  color: transparent;                /* ✅ improves cross-browser */
}

      .hero-title{font-size:2.5rem}
      .hero-section{padding:2rem; margin:1rem}
      .features-preview{grid-template-columns:1fr; margin-top:2rem}

      .footer-content{grid-template-columns:1fr; gap:2rem; text-align:center; padding:2rem 1rem 1rem}
      .footer-section h3.footer-title::after{left:50%; transform:translateX(-50%)}
      .footer-bottom-content{flex-direction:column; text-align:center; gap:1rem}
      .footer-badges{justify-content:center}
      .social-links{justify-content:center}
    }

    /* Tablet footer grid */
    @media (max-width:1024px){
      .footer-content{grid-template-columns:1fr 1fr; gap:2rem}
    }

    /* Tablet nav tweaks */
    @media (min-width:769px) and (max-width:1024px){
      .nav-links{flex-grow:1; justify-content:space-around}
      .nav-links a{padding:.5rem .8rem}
      .nav-actions{gap:.8rem}
    }

    @media (max-width:500px){
      .footer-content{grid-template-columns:1fr; text-align:center}
      .footer-logo{justify-content:center}
      .social-links{justify-content:center}
      .footer-badges{justify-content:center}
    }

    @media (max-width:480px){
      .hero-title{font-size:2rem}
      .hero-subtitle{font-size:1.1rem}
      .cta-button{font-size:1rem; padding:.8rem 2rem}
    }
.nonclickable-link {
  cursor: default;
  color: #aaa;          
 
}