html {
   scroll-behavior: smooth;
 }
 
 :root {
   --olive-petal: #A3A380;
   --golden-clover: #D7CE93;
   --artic-daisy: #EFEBCE;
   --rose-blush: #D8A48F;
   --peach-blossom: #BB8588;
   --text-dark: #4A4A3A;
 }
 
 body {
   font-family: 'Nunito', sans-serif;
   margin: 0;
   background-color: var(--olive-petal);
   overflow-x: hidden; 
   width: 100%;      
   min-height: 100vh;
   position: relative;
 }
 
 body::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-image: radial-gradient(var(--artic-daisy) 2px, transparent 2px);
   background-size: 40px 40px;
   animation: moveDots 8s linear infinite;
   opacity: 0.2;
   z-index: -1;
   pointer-events: none;
 }
 
 body::after {
   content: '';
   position: fixed;
   inset: 0;
   background: linear-gradient(
     to bottom right,
     rgba(255,255,255,0.05),
     rgba(0,0,0,0.05)
   );
   pointer-events: none;
   z-index: -1;
 }
 
 @keyframes moveDots {
   0% { transform: translate(0,0); }
   100% { transform: translate(40px,40px); }
 }
 
 section {
   width: 100%;
   flex-shrink: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 60px 20px;
   box-sizing: border-box;
 }
 
/* Header full-screen */
.header {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
 }
 
 .header::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background: var(--artic-daisy);
   clip-path: polygon(
     0% 30%, 10% 70%, 20% 40%, 30% 80%, 40% 50%, 
     50% 90%, 60% 40%, 70% 80%, 80% 50%, 90% 70%, 100% 30%, 
     100% 100%, 0% 100%
   );
   z-index: 2;
 }
 
 .header-box {
   background: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   padding: 15px 40px; 
   max-width: 1100px; 
   border-radius: 20px;
   text-align: center;
   margin: 0 auto;
   font-size: 1.3rem;
   border: 1px solid rgba(255,255,255,0.3);
 }
 
 @keyframes headerFade {
    to { 
      opacity: 1; 
      transform: translateY(0); 
   } 
}

 .header h1 {
   font-size: 4rem;
   margin-bottom: 20px;

 }

 .header .instructions {
   max-width: 700px;
   text-align: left;
 }
 
 .header h3 {
   animation: float 2s ease-in-out infinite;
   opacity: 0.7;
 }
 
 @keyframes float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(6px); }
 }
 
 /* Detector */
 .detector-page {
   background-color: var(--artic-daisy);
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 textarea {
   width: 100%;
   max-width: 700px;
   height: 180px;
   border: 2px solid var(--golden-clover);
   border-radius: 20px;
   padding: 20px;
   font-size: 1.05rem;
   box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
   outline: none;
   resize: none;
   margin-bottom: 20px;
 }
 
 .analyze-btn {
   background-color: var(--peach-blossom);
   color: white;
   padding: 15px 50px;
   border-radius: 50px;
   border: none;
   font-weight: bold;
   font-size: 1.1rem;
   cursor: pointer;
   transition: all 0.3s;
 }
 
 .analyze-btn:hover {
   background-color: var(--rose-blush);
   transform: translateY(-3px);
 }
 
 #result {
   margin-top: 30px;
   font-size: 1.5rem;
   text-align: center;
   color: var(--text-dark);
   background: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   padding: 20px 30px;
   border-radius: 16px;
   max-width: 700px;
   width: 100%;
   transform: translateY(10px);
   transition: all 0.4s ease;
   position: relative;
 }
 
 #risk-meter {
   margin-top: 20px;
   width: 100%;
   max-width: 700px;
   text-align: left;
 }
 
 .risk-label {
   font-weight: 600;
   margin-bottom: 6px;
   color: var(--text-dark);
 }
 
 .risk-bar {
   width: 100%;
   height: 14px;
   background: rgba(0,0,0,0.1);
   border-radius: 999px;
   overflow: hidden;
 }
 
 .risk-fill {
   height: 100%;
   width: 0%;
   border-radius: 999px;
   transition: width 0.6s ease;
 }
 
 .risk-percent {
   margin-top: 6px;
   font-size: 0.9rem;
   opacity: 0.8;
 } 

 #explanation {
   margin-top: 15px;
   max-width: 700px;
   background: #D8A48F;
   padding: 18px 22px;
   border-radius: 14px;
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text-dark);
 }

 .safe {
   border-left: 6px solid var(--olive-petal);
 }
 
 .warning {
   border-left: 6px solid var(--artic-daisy);
 }
 
 .danger {
   border-left: 6px solid var(--peach-blossom);
 }
 
 #loading {
   font-size: 1.2rem;
   opacity: 0.7;
   margin-top: 20px;
   animation: pulse 1.5s infinite ease-in-out;
 }
 
 @keyframes pulse {
   0%, 100% { opacity: 0.4; }
   50% { opacity: 1; }
 }
 
 
/* Info section */
.info { 
   background: white; 
   padding: 80px 14%; 
   min-height: 100vh; 
   position: relative; 
   overflow: hidden; 
} 

/* Left wavy side */
.info::before { 
   content: ""; 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 120px;
   height: 100%; 
   background: var(--olive-petal); 
   clip-path: polygon(
     0% 0%, 100% 0%, 
     70% 5%, 100% 10%, 
     70% 15%, 100% 20%, 
     70% 25%, 100% 30%, 
     70% 35%, 100% 40%, 
     70% 45%, 100% 50%, 
     70% 55%, 100% 60%, 
     70% 65%, 100% 70%, 
     70% 75%, 100% 80%, 
     70% 85%, 100% 90%, 
     100% 100%, 0% 100%
   ); 
   z-index: 1; 
} 

/* Right wavy side */
.info::after { 
   content: ""; 
   position: absolute; 
   top: 0; 
   right: 0; 
   width: 120px;
   height: 100%; 
   background: var(--olive-petal); 
   clip-path: polygon(
     0% 0%, 30% 5%, 0% 10%, 30% 15%, 
     0% 20%, 30% 25%, 0% 30%, 30% 35%, 
     0% 40%, 30% 45%, 0% 50%, 30% 55%, 
     0% 60%, 30% 65%, 0% 70%, 30% 75%, 
     0% 80%, 30% 85%, 0% 90%, 30% 95%, 
     0% 100%, 100% 100%, 100% 0%
   ); 
   z-index: 1; 
} 

.info > * { 
   position: relative; 
   z-index: 2; 
}

 .info h1 {
   font-size: 2.2rem;
   font-weight: 700;
   margin-bottom: 40px;
   text-align: center;
   color: var(--olive-petal);
 }
 
 .info-block {
   background: rgba(190, 190, 190, 0.25);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   padding: 25px 30px;
   border-radius: 16px;
   margin-bottom: 35px;
   transition: transform 0.3s ease, opacity 0.3s ease;
   width: 100%;      
   max-width: 700px; 
   box-sizing: border-box;
 }
 
 .info-block h2 {
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 15px;
   color: var(--peach-blossom);
   position: relative;
   padding-bottom: 6px;
 }

 .info-block h2::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 40px;
   height: 2px;
   background: var(--peach-blossom);
   opacity: 0.6;
   border-radius: 2px;
 }
 
 .info-block p,
 .info-block li {
   line-height: 1.6;
 }
 
 .info-block ul {
   margin-left: 20px;
   padding-left: 0;
 }

 .info-block:hover {
   transform: translateY(-4px);
   opacity: 0.95;
 }

 .examples {
   background:#D8A48F;
   padding: 80px 20px;
   text-align: center;
 }
 
 .examples h1 {
   font-size: 2.2rem;
   margin-bottom: 40px;
   color:#EFEBCE;
 }
 
 .example-card {
   max-width: 700px;
   margin: 0 auto 30px;
   padding: 25px 30px;
   border-radius: 18px;
   background: rgba(255,255,255,0.3);
   backdrop-filter: blur(6px);
   text-align: left;
 }
 
 .example-card h3 {
   margin-bottom: 10px;
 }
 
 .example-card ul {
   margin-left: 18px;
   line-height: 1.6;
 }

 .stats {
   min-height: auto;
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 40px;
   flex-wrap: wrap;
   padding: 60px 20px;
   align-items: stretch;
 }

 .stat {
   background: rgba(255,255,255,0.25);
   backdrop-filter: blur(6px);
   padding: 25px 30px;
   border-radius: 16px;
   text-align: center;
   max-width: 260px;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .stat:hover {
   transform: translate(-6px);
   opacity: 0.95;
 }

 .stat h2 {
   font-size: 2.5rem;
   color: var(--peach-blossom);
   margin-bottom: 10px;
 }

 .quiz {
   min-height: auto;
   padding: 60px 20px;
   text-align: center;
 }

 .quiz-options {
   display: flex;
   gap: 20px;
   justify-content: center;
   margin-top: 20px;
 }

 .site-alert {
   margin-top: 25px;
   padding: 16px 20px;
   border-radius: 14px;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
   font-weight: 600;
   animation: fadeIn 0.3s ease;
 }

 .site-alert.hidden {
   display: none;
 }

 .site-alert.correct {
   background: rgba(163, 163, 128, 0.35);
 }

 .site-alert.wrong {
   background: rgba(216,164,143,0.35);
 }