/* ═══════════════════════════════════════════════════════════════ NoorderLight — styles.css (async geladen) Bevat alle styling onder de vouw. Tokens/reset/nav/hero staan inline in (kritieke CSS) — design-tokens (--green enz.) zijn daar gedefinieerd en worden hier hergebruikt. ═══════════════════════════════════════════════════════════════ */ .container{width:min(var(--container),100%);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} section{position:relative} main section{padding:clamp(56px,8vw,104px) 0} main section[id]{scroll-margin-top:92px} /* ── Sectiekoppen ── */ .section-tag{display:block;font-size:10.5px;letter-spacing:4px;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:14px} .section-tag.t-cyan{color:var(--cyan)} .section-h2{font-size:clamp(27px,4vw,46px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;margin-bottom:18px} .section-lead{font-size:clamp(15px,1.6vw,17px);color:var(--muted2);max-width:620px;line-height:1.75;margin-bottom:40px} /* ── Reveal-animaties (alleen met JS actief; zonder JS alles zichtbaar) ── */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)} .js .reveal.in{opacity:1;transform:none} .js.reduced .reveal{opacity:1;transform:none;transition:none} /* ── STATS BAR (glas-strip) ── */ .stats{padding-top:0 !important;margin-top:-6px} .stats-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--glass);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden} .stat{text-align:center;padding:26px 18px;border-right:1px solid var(--line)} .stat:last-child{border-right:none} .stat-num{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-2px;line-height:1} .stat-num sup{font-size:.5em;color:var(--green);vertical-align:super;line-height:0;letter-spacing:0} .stat-label{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.8px} /* ── PRODUCTFAMILIE ── */ .product-family{display:grid;grid-template-columns:1fr 1fr;gap:22px} .pf-card{display:block;background:var(--glass);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,38px);text-decoration:none;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,background .3s;position:relative;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .pf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px} .pf-card.pf-green::before{background:linear-gradient(90deg,var(--green),transparent 80%)} .pf-card.pf-cyan::before{background:linear-gradient(90deg,var(--cyan),transparent 80%)} .pf-card:hover{transform:translateY(-4px);border-color:var(--line2);background:var(--glass2)} .pf-card.pf-green:hover{box-shadow:0 24px 60px rgba(34,211,138,.12)} .pf-card.pf-cyan:hover{box-shadow:0 24px 60px rgba(47,208,255,.12)} .pf-dot{display:block;width:48px;height:48px;border-radius:50%;margin-bottom:24px;animation:breathe 3.2s ease-in-out infinite} .pf-dot.d-green{background:var(--green);box-shadow:0 0 20px var(--green),0 0 44px rgba(34,211,138,.35)} .pf-dot.d-cyan{background:var(--cyan);box-shadow:0 0 20px var(--cyan),0 0 44px rgba(47,208,255,.35)} .pf-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px} .pf-name{font-size:clamp(19px,2vw,22px);font-weight:800;letter-spacing:-.5px} .pf-sub{font-size:13.5px;color:var(--muted);line-height:1.65} .pf-link{display:inline-block;font-size:13px;font-weight:600;margin-top:20px} .pf-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid} .pf-badge.b-available{color:var(--green);border-color:rgba(34,211,138,.3);background:rgba(34,211,138,.08)} .pf-badge.b-dev{color:var(--yellow);border-color:rgba(247,201,75,.3);background:rgba(247,201,75,.08)} /* ── ONS VERHAAL ── */ .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start} .story-quote{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,19.5px);color:var(--ink);line-height:1.75;padding:24px 28px;border-left:3px solid var(--green);background:rgba(34,211,138,.05);border-radius:0 16px 16px 0;margin-bottom:24px} .story-text{color:var(--muted2);font-size:15px;line-height:1.85} .story-text em{color:var(--ink-soft)} .story-lamp-visual{position:sticky;top:104px;text-align:center} .story-lamp-big{width:clamp(120px,14vw,160px);aspect-ratio:1;border-radius:50%;background:var(--green);box-shadow:0 0 50px var(--green),0 0 110px rgba(34,211,138,.4),0 0 190px rgba(34,211,138,.14);animation:breathe 3.2s ease-in-out infinite;margin:14px auto 34px;transition:background 1s var(--ease),box-shadow 1s var(--ease)} .glow-preview-wrap{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .glow-preview-title{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-weight:600} .glow-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .glow-btn{padding:9px 20px;border-radius:999px;border:1px solid;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s} .glow-btn:hover{transform:translateY(-1px)} .glow-btn.g-low{border-color:rgba(244,91,91,.5);color:var(--red);background:rgba(244,91,91,.08)} .glow-btn.g-low:hover,.glow-btn.g-low.active{background:rgba(244,91,91,.2)} .glow-btn.g-ok{border-color:rgba(34,211,138,.5);color:var(--green);background:rgba(34,211,138,.08)} .glow-btn.g-ok:hover,.glow-btn.g-ok.active{background:rgba(34,211,138,.2)} .glow-btn.g-high{border-color:rgba(181,123,255,.5);color:var(--violet);background:rgba(181,123,255,.08)} .glow-btn.g-high:hover,.glow-btn.g-high.active{background:rgba(181,123,255,.2)} .glow-status{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.5} /* ── SCENARIO'S ── */ .scenarios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .scenario-card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .25s var(--ease),border-color .25s;position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .scenario-card:hover{border-color:var(--line2);transform:translateY(-3px)} .scenario-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px} .scenario-card.c-green::after{background:linear-gradient(90deg,var(--green),transparent)} .scenario-card.c-blue::after{background:linear-gradient(90deg,var(--blue),transparent)} .scenario-card.c-purple::after{background:linear-gradient(90deg,var(--violet),transparent)} .scenario-card.c-yellow::after{background:linear-gradient(90deg,var(--yellow),transparent)} .scenario-icon{font-size:26px;margin-bottom:12px;display:block} .scenario-title{font-size:14.5px;font-weight:700;margin-bottom:7px;letter-spacing:-.2px} .scenario-text{font-size:13px;color:var(--muted);line-height:1.7} /* ── PRODUCT-SECTIES (Ambient & Display) ── */ .badge-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px} .badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:700;padding:5px 13px;border-radius:999px;border:1px solid;backdrop-filter:blur(6px)} .badge.b-green{color:var(--green);border-color:rgba(34,211,138,.3);background:rgba(34,211,138,.07)} .badge.b-blue{color:var(--blue);border-color:rgba(93,127,255,.3);background:rgba(93,127,255,.07)} .badge.b-cyan{color:var(--cyan);border-color:rgba(47,208,255,.3);background:rgba(47,208,255,.07)} .notice{background:rgba(93,127,255,.06);border:1px solid rgba(93,127,255,.16);border-radius:14px;padding:18px 22px;font-size:13.5px;color:var(--muted2);line-height:1.7;margin-bottom:52px;backdrop-filter:blur(8px)} .notice strong{color:var(--blue)} .notice.n-cyan{background:rgba(47,208,255,.05);border-color:rgba(47,208,255,.16);margin-bottom:32px} .notice.n-cyan strong{color:var(--cyan)} .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feature-card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:30px;transition:transform .25s var(--ease),border-color .25s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .feature-card:hover{border-color:var(--line2);transform:translateY(-3px)} .fi-wrap{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:22px} .fi-green{background:rgba(34,211,138,.1);border:1px solid rgba(34,211,138,.22)} .fi-cyan{background:rgba(47,208,255,.1);border:1px solid rgba(47,208,255,.22)} .fi-blue{background:rgba(93,127,255,.1);border:1px solid rgba(93,127,255,.22)} .fi-purple{background:rgba(181,123,255,.1);border:1px solid rgba(181,123,255,.22)} .fi-yellow{background:rgba(247,201,75,.1);border:1px solid rgba(247,201,75,.22)} .feature-title{font-size:16px;font-weight:700;margin-bottom:9px;letter-spacing:-.3px} .feature-text{font-size:13px;color:var(--muted);line-height:1.72} /* Display-showcase: specs + grote mockup */ .display-showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:64px} .display-specs{display:flex;flex-direction:column;margin:0} .spec-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px} .spec-row:last-child{border-bottom:none} .spec-label{color:var(--muted)} .spec-value{color:var(--ink);font-weight:600;margin:0;text-align:right} .display-visual{display:flex;justify-content:center} .dm--static{width:clamp(190px,22vw,240px);height:auto;aspect-ratio:1;animation:floaty 4.5s ease-in-out infinite} .dm--static .dm-bezel{position:absolute} .dm-bezel--cyan{box-shadow:0 0 0 2px rgba(255,255,255,.07),0 18px 50px rgba(4,7,20,.55),0 0 34px rgba(47,208,255,.30),0 0 90px rgba(47,208,255,.14)} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px} .compare-card{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .compare-card.highlight-green{border-color:rgba(34,211,138,.28);background:rgba(34,211,138,.04)} .compare-card.highlight-cyan{border-color:rgba(47,208,255,.28);background:rgba(47,208,255,.04)} .compare-card-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;font-weight:700} .compare-card-name{font-size:19px;font-weight:800;margin-bottom:18px;letter-spacing:-.4px} .compare-list{list-style:none;display:flex;flex-direction:column;gap:9px} .compare-list li{font-size:13px;color:var(--muted2);display:flex;align-items:flex-start;gap:10px;line-height:1.6} .ci{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;margin-top:2px;font-weight:700} .ci.y{background:rgba(34,211,138,.16);color:var(--green)} .ci.n{background:rgba(244,91,91,.12);color:var(--red)} .disclaimer{background:rgba(244,91,91,.05);border:1px solid rgba(244,91,91,.2);border-radius:14px;padding:24px 28px;margin-top:52px} .disclaimer-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:8px;display:block} .disclaimer-text{font-size:13px;color:#d3a3a3;line-height:1.75} .disclaimer-text strong{color:#eeb0b0} /* ── INSTELLEN (stappen) ── */ .device-pills{display:flex;gap:10px;margin-bottom:48px;flex-wrap:wrap} .device-pill{display:inline-flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12px;color:var(--muted2);font-weight:500;backdrop-filter:blur(8px)} .led{width:9px;height:9px;border-radius:50%;flex-shrink:0} .led.g{background:var(--green);box-shadow:0 0 6px var(--green)} .led.b{background:#2f7bff;box-shadow:0 0 6px #2f7bff} .led.p{background:var(--violet);box-shadow:0 0 6px var(--violet)} .led.rainbow{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);animation:spinLed 1.2s linear infinite} @keyframes spinLed{to{transform:rotate(360deg)}} .steps{list-style:none;display:flex;flex-direction:column;max-width:760px} .step{display:grid;grid-template-columns:60px 1fr;gap:20px;padding-bottom:44px} .step:last-child{padding-bottom:0} .step-left{display:flex;flex-direction:column;align-items:center} .step-num{width:44px;height:44px;border-radius:50%;background:rgba(93,127,255,.08);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--blue);flex-shrink:0;position:relative;z-index:1} .step-line{flex:1;width:2px;background:linear-gradient(to bottom,var(--blue),transparent);margin-top:6px;min-height:32px} .step-title{font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:7px;padding-top:8px} .step-text{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:14px} .step-text strong{color:var(--ink-soft)} .step-sub{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-top:6px} .step-sub-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:8px} .step-sub-text{font-size:13px;color:var(--muted);line-height:1.65} .step-sub-text strong{color:var(--ink-soft)} .step-code{font-family:Consolas,monospace;font-size:14px;letter-spacing:4px;color:var(--cyan)} .step-tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;background:rgba(93,127,255,.12);color:var(--blue);border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center} .step-tag.tag-green{background:rgba(34,211,138,.12);color:var(--green)} /* ── FAQ ── */ .faq-list{max-width:820px;display:flex;flex-direction:column;gap:12px} .faq-item{background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;transition:border-color .25s} .faq-item[open]{border-color:rgba(34,211,138,.3)} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary h3{font-size:15px;font-weight:700;letter-spacing:-.2px;line-height:1.4} .faq-chev{color:var(--green);transition:transform .25s var(--ease);flex-shrink:0} .faq-item[open] .faq-chev{transform:rotate(180deg)} .faq-item p{padding:0 22px 20px;font-size:13.5px;color:var(--muted2);line-height:1.75;max-width:700px} /* ── CONTACT ── */ .contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,5vw,72px);align-items:start} .contact-info{position:sticky;top:104px} .contact-info h3{font-size:20px;font-weight:800;margin-bottom:14px;letter-spacing:-.4px} .contact-info>p{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:22px} .contact-detail{display:flex;flex-direction:column;gap:12px;margin-bottom:28px} .cd-item{display:flex;align-items:flex-start;gap:12px} .cd-icon{width:36px;height:36px;border-radius:12px;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0} .cd-label{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600} .cd-value{display:block;font-size:13px;color:var(--ink);margin-top:1px} .cd-value a{text-decoration:none} .cd-value a:hover{color:var(--cyan)} .contact-note{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:20px;backdrop-filter:blur(12px)} .contact-note-title{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:8px} .contact-note p:last-child{font-size:13px;color:var(--muted);line-height:1.7} .form-card{background:var(--glass);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,36px);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .form-head{margin-bottom:26px} .form-title{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:5px} .form-note{font-size:12px;color:var(--muted)} .form-group{margin-bottom:18px} .form-card label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px} .form-card input,.form-card select,.form-card textarea{width:100%;background:rgba(10,14,30,.55);border:1px solid var(--line);border-radius:10px;padding:12px 15px;color:var(--ink);font-family:var(--font);font-size:14px;transition:border-color .2s,box-shadow .2s;outline:none} .form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:rgba(47,208,255,.5);box-shadow:0 0 0 3px rgba(47,208,255,.12)} .form-card ::placeholder{color:#4a5379} .form-card select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3c9' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px;cursor:pointer} .form-card select option{background:#141a36} .form-card textarea{resize:vertical;min-height:110px;line-height:1.6} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-card input.hp-field{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none} .form-privacy{display:flex;align-items:flex-start;gap:10px;margin-bottom:22px} .form-privacy input{width:auto;margin-top:4px;flex-shrink:0;accent-color:var(--green)} .form-privacy label{text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);font-weight:400;cursor:pointer;line-height:1.6} .form-submit{width:100%} .form-error{margin-top:14px;background:rgba(244,91,91,.08);border:1px solid rgba(244,91,91,.25);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--red)} .form-success{margin-top:14px;background:rgba(34,211,138,.08);border:1px solid rgba(34,211,138,.25);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--green)} /* ── FOOTER ── */ footer{border-top:1px solid var(--line);padding:36px 0;margin-top:24px;background:rgba(10,14,30,.4);backdrop-filter:blur(10px)} .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .footer-logo{display:flex;align-items:center;gap:10px;font-size:14px} .footer-dot{width:18px;height:18px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)} .footer-left{font-size:12px;color:var(--muted);margin-top:6px} .footer-left a{color:var(--muted);text-decoration:none} .footer-left a:hover{color:var(--ink)} .footer-links{display:flex;gap:20px;flex-wrap:wrap} .footer-links a{font-size:12.5px;color:var(--muted);text-decoration:none;transition:color .2s} .footer-links a:hover{color:var(--ink)} /* ═══ RESPONSIVE ═══ */ @media(max-width:1024px){ .scenarios-grid,.features-grid{grid-template-columns:1fr 1fr} .display-showcase{grid-template-columns:1fr;gap:40px} .display-visual{order:-1} .story-grid{grid-template-columns:1fr;gap:40px} .story-lamp-visual{position:static;max-width:480px;margin:0 auto} } @media(max-width:820px){ .product-family,.compare-grid,.contact-grid{grid-template-columns:1fr} .contact-info{position:static} .scenarios-grid,.features-grid{grid-template-columns:1fr} .stats-bar{grid-template-columns:1fr 1fr} .stat{border-right:none;border-bottom:1px solid var(--line)} .stat:nth-child(odd){border-right:1px solid var(--line)} .stat:nth-child(3),.stat:nth-child(4){border-bottom:none} } @media(max-width:480px){ .form-row{grid-template-columns:1fr} .step{grid-template-columns:48px 1fr;gap:14px} .step-num{width:38px;height:38px;font-size:13px} .stat{padding:18px 12px} .faq-item summary{padding:16px 18px} .faq-item summary h3{font-size:14px} } /* ═══ REDUCED MOTION: parallax/animaties uit, alles direct zichtbaar ═══ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .js .reveal{opacity:1;transform:none} .story-lamp-big,.pf-dot,.dm--static{animation:none} }