.looplab-page { padding-top: 90px; background: #f6eddf; color: #231f20; }
.looplab-page .navbar { background: rgba(197, 191, 197, .96); }
.nav-link-feature { font-weight: 700; color: #730473 !important; }
.looplab-hero { min-height: 450px; padding: 70px max(7vw, 24px); display: flex; justify-content: space-between; align-items: center; gap: 40px; background: linear-gradient(115deg, rgba(53, 25, 65, .96), rgba(115, 4, 115, .76)), url('../assets/luchtofot-scaled.jpg') center/cover; color: #fff; }
.looplab-hero-copy { max-width: 700px; animation: looplab-rise .7s ease-out both; }
.eyebrow, .section-kicker { font-family: 'Special Elite', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: .78rem; }
.eyebrow { color: #ffdd57; }
.looplab-hero h1 { font-size: clamp(3.2rem, 9vw, 7rem); line-height: .95; margin: 18px 0; }
.looplab-intro { max-width: 560px; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; }
.looplab-cta { margin-top: 16px; font-weight: 800; color: #3d1731; border: 0; }
.hero-stamp { width: 165px; height: 165px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid #ffdd57; border-radius: 50%; color: #ffdd57; transform: rotate(12deg); font-family: 'Bungee', sans-serif; letter-spacing: 1px; }
.hero-stamp strong { font-size: 1.55rem; color: #fff; }
.looplab-content { max-width: 1180px; }
.looplab-section { padding: 78px 0 0; }
.section-kicker { color: #730473; margin-bottom: 10px; }
.looplab-section h2 { font-size: clamp(2rem, 4vw, 3.5rem); color: #4b104b; margin-bottom: 28px; }
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fact-card { position: relative; min-height: 285px; padding: 24px 21px; border-radius: 4px; box-shadow: 8px 8px 0 rgba(75, 16, 75, .12); transition: transform .25s ease; }
.fact-card:hover { transform: translateY(-6px) rotate(-1deg); }
.fact-card--lime { background: #c8e36d; }.fact-card--pink { background: #f18ab9; }.fact-card--blue { background: #82c8df; }.fact-card--orange { background: #f5ad62; }
.fact-number { font-family: 'Bungee', sans-serif; font-size: .8rem; }.fact-card i { display: block; margin: 34px 0 20px; font-size: 1.8rem; }.fact-card h3 { font-size: 1.28rem; margin-bottom: 10px; }.fact-card p { font-size: .94rem; line-height: 1.55; margin: 0; }
.level-section { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 70px; align-items: end; }.level-copy p { max-width: 520px; line-height: 1.65; }.level-picker { display: flex; flex-wrap: wrap; gap: 8px; }.level-button { border: 2px solid #4b104b; padding: 9px 13px; background: transparent; color: #4b104b; font: inherit; cursor: pointer; }.level-button.is-selected, .level-button:hover { background: #4b104b; color: #fff; }.level-result { grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; padding: 24px; background: #fff; border-left: 7px solid #9419b6; box-shadow: 0 10px 25px rgba(75, 16, 75, .1); }.level-icon { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; background: #ffdd57; color: #4b104b; font-family: 'Bungee', sans-serif; }.level-result h3 { margin: 0 0 6px; color: #4b104b; }.level-result p { margin: 0; line-height: 1.55; }
.compass-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }.section-lead { max-width: 570px; line-height: 1.65; }.compass-controls { margin-top: 26px; display: grid; gap: 16px; }.compass-controls > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.control-label, .result-tag { width: 100%; font-family: 'Special Elite', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: .75rem; color: #730473; }.compass-choice { border: 1px solid #4b104b; background: transparent; color: #4b104b; padding: 8px 11px; font: inherit; cursor: pointer; }.compass-choice.is-selected, .compass-choice:hover { background: #4b104b; color: #fff; }.compass-result { display: flex; align-items: center; gap: 18px; padding: 28px; background: #ffdd57; color: #3c193f; box-shadow: 9px 9px 0 #82c8df; }.compass-spark { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%; background: #f18ab9; font-family: 'Bungee', sans-serif; font-size: .9rem; transform: rotate(-8deg); }.compass-result h3 { margin: 5px 0 8px; font-size: 1.5rem; }.compass-result p { margin: 0; line-height: 1.5; }.compass-result .result-tag { color: #3c193f; }.knowledge-section { padding-bottom: 10px; }.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.knowledge-note { padding: 25px; background: rgba(255,255,255,.7); border-top: 5px solid #9419b6; }.knowledge-note:nth-child(2) { border-color: #f18ab9; }.knowledge-note:nth-child(3) { border-color: #82c8df; }.note-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-bottom: 24px; background: #4b104b; color: #fff; font-family: 'Bungee', sans-serif; font-size: .8rem; }.knowledge-note h3 { color: #4b104b; }.knowledge-note p { line-height: 1.6; margin-bottom: 0; }
.race-layout, .motivation-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: stretch; }.checklist-panel { padding: 26px; background: rgba(255,255,255,.72); box-shadow: 8px 8px 0 rgba(75,16,75,.12); }.checklist-tabs { display: flex; gap: 8px; border-bottom: 1px solid rgba(75,16,75,.2); }.checklist-tab { border: 0; border-bottom: 3px solid transparent; padding: 11px 14px; background: transparent; color: #4b104b; font: inherit; cursor: pointer; }.checklist-tab.is-active { border-bottom-color: #9419b6; font-weight: 700; }.checklist-progress { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: #730473; font-family: 'Special Elite', sans-serif; font-size: .78rem; }.checklist-track { height: 7px; flex: 1; background: rgba(75,16,75,.12); }.checklist-track span { display: block; height: 100%; width: 0; background: #9419b6; transition: width .25s ease; }.checklist-items { display: grid; gap: 3px; }.checklist-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; cursor: pointer; border-bottom: 1px dashed rgba(75,16,75,.15); }.checklist-item input { position: absolute; opacity: 0; }.checkmark { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 2px solid #4b104b; color: transparent; }.checklist-item input:checked + .checkmark { background: #4b104b; color: #fff; }.checklist-item input:checked ~ span:last-child { text-decoration: line-through; opacity: .55; }.checklist-reset { border: 0; margin-top: 16px; padding: 0; background: transparent; color: #730473; font: inherit; cursor: pointer; }.race-tip { padding: 30px; background: #82c8df; color: #3c193f; box-shadow: 9px 9px 0 #f5ad62; }.tip-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 32px; border-radius: 50%; background: #fff; font-size: 1.3rem; }.race-tip h3 { font-size: 1.7rem; color: #3c193f; }.race-tip p:last-child { line-height: 1.6; }.motivation-section { padding-bottom: 30px; }.motivation-card { padding: 32px; background: #3c193f; color: #fff; box-shadow: 10px 10px 0 #f18ab9; }.motivation-label { display: block; color: #ffdd57; font-family: 'Special Elite', sans-serif; font-size: .78rem; letter-spacing: 1px; }.motivation-card p { min-height: 88px; margin: 25px 0; font: 1.25rem/1.45 'Paytone One', sans-serif; }.motivation-card .btn { color: #3c193f; font-weight: 700; }
.weather-section { padding-bottom: 20px; }.weather-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }.weather-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 25px; }.weather-picker label { width: 100%; color: #4b104b; font-family: 'Special Elite', sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }.weather-picker input { min-height: 44px; padding: 8px 10px; border: 2px solid #4b104b; background: #fff; color: #4b104b; font: inherit; }.weather-source { margin-top: 16px; font-size: .8rem; color: #666; }.weather-source a { color: #730473; }.weather-result { min-height: 245px; padding: 27px; background: #c8e36d; color: #3c193f; box-shadow: 9px 9px 0 #f18ab9; }.weather-loading, .weather-unavailable { min-height: 190px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }.weather-loading i, .weather-unavailable i { font-size: 2rem; }.weather-date, .result-tag { font-family: 'Special Elite', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: .76rem; }.weather-main { display: flex; align-items: center; gap: 17px; margin: 18px 0; }.weather-main > i { font-size: 2.7rem; color: #730473; }.weather-main strong { display: block; font: 1.7rem 'Paytone One', sans-serif; }.weather-main span { font-size: .85rem; }.weather-stats { display: flex; flex-wrap: wrap; gap: 15px; padding: 13px 0; border-top: 1px solid rgba(60,25,63,.25); border-bottom: 1px solid rgba(60,25,63,.25); }.weather-stats span { display: grid; grid-template-columns: auto auto; column-gap: 6px; font-size: .8rem; }.weather-stats i { grid-row: span 2; align-self: center; }.weather-stats strong { font-size: 1rem; }.weather-advice { margin: 15px 0 0; font-weight: 600; }.weather-unavailable strong { font-size: 1.05rem; }.weather-unavailable span { max-width: 300px; font-size: .9rem; }
.quiz-section { padding-bottom: 85px; }.quiz-heading { text-align: center; }.quiz-shell { max-width: 760px; margin: 0 auto; padding: 28px clamp(20px, 5vw, 48px); background: #3c193f; color: #fff; box-shadow: 12px 12px 0 #f18ab9; }.quiz-progress { display: flex; align-items: center; gap: 14px; color: #ffdd57; font-family: 'Special Elite', sans-serif; font-size: .8rem; }.progress-track { height: 7px; flex: 1; background: rgba(255,255,255,.2); }.progress-track span { display: block; width: 20%; height: 100%; background: #ffdd57; transition: width .3s ease; }.quiz-question { margin: 38px 0 20px; font: 1.45rem 'Paytone One', sans-serif; }.quiz-options { display: grid; gap: 10px; }.quiz-option { padding: 13px 15px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; text-align: left; font: inherit; cursor: pointer; }.quiz-option:hover, .quiz-option.is-selected { border-color: #ffdd57; background: rgba(255,221,87,.15); }.quiz-option.is-correct { background: #668d49; border-color: #c8e36d; }.quiz-option.is-wrong { background: #9c4669; border-color: #f18ab9; }.quiz-feedback { min-height: 28px; padding-top: 18px; color: #c8e36d; }.quiz-next { margin-top: 14px; }.quiz-next:disabled { opacity: .45; cursor: not-allowed; }
@keyframes looplab-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.weather-location { margin-top: 7px; font-weight: 700; }
.weather-picker input[type="text"] { min-width: 170px; }
@media (max-width: 900px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } .level-section, .compass-layout, .race-layout, .motivation-layout, .weather-layout { grid-template-columns: 1fr; gap: 18px; } .level-result { grid-column: auto; } .knowledge-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .looplab-page { padding-top: 76px; } .looplab-hero { min-height: 500px; padding: 54px 22px; align-items: flex-start; flex-direction: column; justify-content: center; } .hero-stamp { width: 125px; height: 125px; align-self: flex-end; margin-top: -12px; }.hero-stamp strong { font-size: 1.2rem; }.fact-grid { grid-template-columns: 1fr; }.fact-card { min-height: auto; }.looplab-section { padding-top: 58px; }.level-result { align-items: flex-start; }.compass-result, .race-tip, .motivation-card, .checklist-panel { padding: 22px; }.weather-picker input[type="text"] { width: 100%; }.checklist-tabs { flex-wrap: wrap; }.checklist-tab { flex: 1; padding-left: 6px; padding-right: 6px; }.quiz-shell { box-shadow: 7px 7px 0 #f18ab9; } }