.hero-section{background:url(/hero-bg.png) 50%/cover no-repeat;justify-content:center;align-items:center;width:100%;height:100vh;min-height:700px;display:flex;position:relative;overflow:hidden}.hero-section:before{content:"";z-index:1;background:#00000080;position:absolute;inset:0}.hero-content{z-index:2;text-align:center;max-width:900px;padding:0 20px;position:relative}.hero-title{font-family:var(--font-inter),sans-serif;color:#fff;letter-spacing:-.03em;margin-bottom:1.5rem;font-size:5rem;font-weight:700;line-height:1.1}@media (max-width:1024px){.hero-title{font-size:3.5rem}}@media (max-width:768px){.hero-title{font-size:2.5rem}}.hero-subtitle{font-family:var(--font-inter),sans-serif;color:#ffffffd9;max-width:700px;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;font-size:1.5rem;font-weight:400}.hero-actions{justify-content:center;gap:1.5rem;display:flex}.btn-primary{color:#fff;cursor:pointer;background-color:#f97316;border:none;border-radius:100px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;text-decoration:none;transition:transform .2s,background-color .2s}.btn-primary:hover{background-color:#ea580c;transform:translateY(-2px)}.btn-secondary{color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#ffffff26;border:1px solid #ffffff4d;border-radius:100px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;text-decoration:none;transition:background-color .2s}.btn-secondary:hover{background-color:#ffffff40}@media (max-width:600px){.hero-actions{flex-direction:column;gap:1rem}.btn-primary,.btn-secondary{text-align:center;width:100%}}
.sjef-network-section{background-color:#fff;padding:6rem 2rem;overflow:hidden}.network-container{align-items:center;gap:4rem;max-width:1200px;margin:0 auto;display:flex}.network-visual{perspective:1000px;background:radial-gradient(circle,#f9731608 0%,#0000 70%);flex:1;justify-content:center;align-items:center;height:500px;display:flex;position:relative}.network-diagram{width:600px;height:600px;transform-style:preserve-3d;justify-content:center;align-items:center;transition:transform .1s linear;display:flex;position:relative}.hub{color:#fff;z-index:10;background:#f97316;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 40px #f973164d}.hub svg{width:40px;height:40px}.hub:before{content:"";border:2px solid #f97316;border-radius:50%;width:100%;height:100%;animation:2s infinite hub-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.node{z-index:5;color:#4a5568;background:#fff;border:1px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;display:flex;position:absolute;box-shadow:0 10px 15px -3px #0000000d}.node.input-1{animation:6s ease-in-out infinite float;top:20%;left:15%}.node.input-2{animation:6s ease-in-out 2s infinite float;bottom:20%;left:15%}.node.output-1{animation:6s ease-in-out 1s infinite float;top:20%;right:15%}.node.output-2{animation:6s ease-in-out 3s infinite float;bottom:20%;right:15%}.network-content{flex:1}.section-label{color:#f97316;background-color:#fff7ed;border:1px solid #ffedd5;border-radius:100px;margin-bottom:1.5rem;padding:.25rem .75rem;font-size:.875rem;font-weight:600;display:inline-block}.network-title{font-family:var(--font-inter),sans-serif;color:#1a202c;letter-spacing:-.02em;margin-bottom:1rem;font-size:2.5rem;font-weight:700;line-height:1.2}.network-subtitle{font-family:var(--font-inter),sans-serif;color:#4a5568;margin-bottom:1.5rem;font-size:1.25rem;font-weight:500}.network-description{color:#718096;max-width:500px;margin-bottom:2rem;line-height:1.6}.btn-tech{color:#4a5568;background:#f7fafc;border:1px solid #e2e8f0;border-radius:100px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-tech:before{content:"";background:#f97316;border-radius:50%;width:8px;height:8px;display:block}.btn-tech:hover{color:#1a202c;background:#edf2f7;border-color:#cbd5e0}@keyframes hub-pulse{0%{opacity:.5;transform:translate(-50%,-50%)scale(1)}50%{opacity:0;transform:translate(-50%,-50%)scale(1.5)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes hub-enter{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes beam-flow{0%{stroke-dashoffset:200px}to{stroke-dashoffset:0}}@keyframes line-draw{0%{stroke-dashoffset:1000px;opacity:0}to{stroke-dashoffset:0;opacity:.2}}.animate-on-scroll .hub{opacity:0}.in-view .hub{animation:.8s cubic-bezier(.34,1.56,.64,1) forwards hub-enter,4s ease-in-out .8s infinite hub-pulse}.animate-on-scroll .node{opacity:0}.in-view .node{animation:.6s cubic-bezier(.34,1.56,.64,1) forwards pop-in,6s ease-in-out .6s infinite float}.in-view .node.input-1{animation-delay:.4s,1s}.in-view .node.input-2{animation-delay:.5s,1.5s}.in-view .node.output-1{animation-delay:.6s,2s}.in-view .node.output-2{animation-delay:.7s,2.5s}.connector-base{stroke-dasharray:1000;stroke-dashoffset:1000px;opacity:0;transition:opacity .5s}.in-view .connector-base{animation:1.5s ease-out .2s forwards line-draw}.connector-beam{stroke-dasharray:10 200;stroke-dashoffset:200px;opacity:0}.in-view .connector-beam{opacity:1;animation:3s linear 1.5s infinite beam-flow}@media (max-width:900px){.network-container{text-align:center;flex-direction:column;gap:3rem}.network-description{margin-left:auto;margin-right:auto}.network-visual{width:100%;height:400px}.network-diagram{width:100%;max-width:400px}}
.comparison-section{z-index:1;background:#fff;padding:6rem 1rem;position:relative}.comparison-grid{grid-template-columns:1fr 1fr;align-items:stretch;gap:2rem;max-width:1000px;margin:0 auto;display:grid}.comparison-card{border-radius:16px;flex-direction:column;padding:3rem 2.5rem;display:flex}.comparison-card.old-way{color:#64748b;background:#f3f4f6;border:1px solid #0000}.comparison-card.old-way .comp-header{color:#64748b}.comparison-card.old-way .comp-icon{color:#94a3b8;margin-bottom:1.5rem}.comparison-card.sjef-way{z-index:10;background:#fff;border:2px solid #f97316;transform:scale(1.05);box-shadow:0 20px 40px -10px #0000001a,0 0 20px #f973161a}.comparison-card.sjef-way .comp-header{color:#1a202c}.comparison-card.sjef-way .comp-icon{color:#f97316;margin-bottom:1.5rem}.comp-header{font-size:1.5rem;font-weight:700;font-family:var(--font-inter,sans-serif);margin-bottom:2rem}.comp-list{margin:0;padding:0;list-style:none}.comp-item{align-items:flex-start;gap:1rem;margin-bottom:1.25rem;font-size:1.0625rem;line-height:1.5;display:flex}.status-icon{flex-shrink:0;margin-top:2px}.status-icon.cross{color:#ef4444}.status-icon.check{color:#22c55e}@media (max-width:768px){.comparison-grid{grid-template-columns:1fr;gap:2rem;max-width:500px}.comparison-card.sjef-way{transform:scale(1);box-shadow:0 10px 20px -5px #0000001a}}
.pricing-section{background:linear-gradient(#fff 0%,#f8f9fb 100%);padding:6rem 1rem}.pricing-header{text-align:center;margin-bottom:4rem}.pricing-title{color:#1a202c;font-size:2.5rem;font-weight:700;font-family:var(--font-inter,sans-serif);margin-bottom:.5rem}.pricing-subtitle{color:#64748b;max-width:600px;margin:0 auto;font-size:1.125rem}.pricing-grid.subscriptions{grid-template-columns:repeat(3,1fr);align-items:stretch;gap:2rem;max-width:1200px;margin:0 auto 1.5rem;display:grid}.pricing-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;padding:3rem 2rem;transition:all .2s ease-out;display:flex;position:relative}.pricing-card.starter{border-color:#e2e8f0}.pricing-card.pro{box-shadow:var(--shadow-safety-glow);z-index:10;border:2px solid #f97316;transform:translateY(-4px)}.pricing-card.baas{border-top:4px solid #1e293b}.plan-header{text-align:center;margin-bottom:2rem}.plan-name{color:#1a202c;margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.plan-price{font-family:var(--font-roboto-mono,monospace);color:#1a202c;font-size:2rem;font-weight:700}.plan-period{font-family:var(--font-inter,sans-serif);color:#94a3b8;font-size:1rem;font-weight:400}.plan-metrics{text-align:center;border-bottom:1px solid #f1f5f9;margin-bottom:2rem;padding-bottom:2rem}.metric-value{font-family:var(--font-roboto-mono,monospace);color:#1a202c;margin-bottom:.25rem;font-size:1.5rem;font-weight:700;display:block}.metric-sub{color:#94a3b8;font-size:.875rem;font-style:italic;display:block}.plan-target{text-align:center;color:#475569;margin-bottom:1rem;font-size:.875rem;font-weight:600}.plan-extra{text-align:center;color:#2563eb;margin-bottom:1rem;font-size:.8rem;font-weight:500}.plan-button-wrapper{margin-top:auto}.btn-price{text-align:center;border-radius:8px;width:100%;padding:.75rem 1rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition:all .2s;display:block}.btn-price.default{color:#475569;background:#f1f5f9}.btn-price.default:hover{color:#1a202c;background:#e2e8f0}.btn-price.hero-btn{color:#fff;background:#f97316;box-shadow:0 4px 12px #f9731640}.btn-price.hero-btn:hover{background:#ea580c;box-shadow:0 6px 16px #f9731659}.btn-price.dark-btn{color:#fff;background:#1e293b}.btn-price.dark-btn:hover{background:#0f172a}.hero-badge{color:#fff;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:#f97316;border-radius:100px;padding:.25rem .75rem;font-size:.75rem;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px #f973164d}.bundles-section{max-width:1200px;margin:3rem auto 0}.bundles-title{text-align:center;color:#64748b;margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.bundles-grid{grid-template-columns:repeat(3,1fr);gap:2rem;display:grid}.bundle-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:space-between;align-items:center;padding:1.5rem;transition:all .2s;display:flex}.bundle-card:hover{border-color:#cbd5e1}.bundle-card.highlight{background:#fff7ed;border-color:#f97316}.bundle-info{flex:1}.bundle-name{color:#1a202c;margin-bottom:.25rem;font-size:1rem;font-weight:700}.bundle-sub{color:#64748b;font-size:.8rem}.bundle-credits{font-family:var(--font-roboto-mono,monospace);color:#1a202c;background:#f1f5f9;border-radius:4px;margin:0 1rem;padding:.25rem .5rem;font-size:1.125rem;font-weight:700}.bundle-price{color:#475569;font-size:1rem;font-weight:600}@media (max-width:900px){.pricing-grid.subscriptions,.bundles-grid{grid-template-columns:1fr;max-width:500px;margin-left:auto;margin-right:auto}.pricing-card.pro{transform:none}}
.faq-section{background-color:#fff;padding:6rem 2rem}.faq-title{color:#1a202c;font-size:2rem;font-weight:700;font-family:var(--font-inter,sans-serif);text-align:left;max-width:800px;margin-bottom:3rem;margin-left:auto;margin-right:auto}.faq-container{max-width:800px;margin:0 auto}.faq-item{border-bottom:1px solid #e2e8f0}.faq-question{text-align:left;cursor:pointer;width:100%;font-family:var(--font-inter,sans-serif);color:#1a202c;background:0 0;border:none;justify-content:space-between;align-items:center;padding:1.5rem 0;font-size:1.125rem;font-weight:500;transition:color .2s;display:flex}.faq-question:hover{color:#f97316}.faq-icon-wrapper{justify-content:center;align-items:center;width:24px;height:24px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex}.faq-item.open .faq-icon-wrapper{transform:rotate(45deg)}.faq-icon{color:#94a3b8}.faq-item.open .faq-icon{color:#1a202c}.faq-answer{max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.faq-item.open .faq-answer{max-height:200px}.faq-answer-content{font-family:var(--font-inter,sans-serif);color:#475569;max-width:90%;padding-bottom:1.5rem;font-size:1rem;line-height:1.6}.final-cta{text-align:center;opacity:.8;margin-top:6rem}
.dock-nav{-webkit-backdrop-filter:blur(16px);z-index:9000;opacity:0;pointer-events:none;background:#ffffffe6;border-radius:99px;align-items:center;gap:12px;padding:12px 20px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 10px 40px -10px #0000001a,inset 0 0 0 1px #ffffff80}@media (min-width:769px){.dock-nav{display:none!important}}.dock-nav.visible{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.dock-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;text-decoration:none;transition:all .2s;display:flex;position:relative}.dock-btn:hover,.dock-btn.active{color:#0f172a;background:#f1f5f9;transform:translateY(-2px)}.dock-btn.active{color:#fff;background:#f97316}.dock-tooltip{color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#1f2937;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:500;transition:opacity .2s;position:absolute;top:-40px;left:50%;transform:translate(-50%)}.dock-btn:hover .dock-tooltip{opacity:1}
.calculator-section{background:linear-gradient(#fff 0%,#f1f5f9 100%);padding:6rem 1rem}.calculator-wrapper{border:1px solid #e2e8f0;border-radius:24px;max-width:1100px;margin:0 auto;display:flex;overflow:hidden;box-shadow:0 20px 40px -10px #0000000d}.calc-panel-input{background-color:#f7f9fc;border-right:1px solid #e2e8f0;flex-direction:column;flex:1;justify-content:center;padding:3rem;display:flex}.panel-title{color:#1a202c;font-size:1.5rem;font-weight:700;font-family:var(--font-inter,sans-serif);margin-bottom:2.5rem}.input-group{margin-bottom:2.5rem}.input-header{justify-content:space-between;align-items:flex-end;margin-bottom:1rem;display:flex}.input-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:600}.input-value{color:#0f172a;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:8px;min-width:60px;padding:.25rem .75rem;font-size:1.25rem;font-weight:700}.sub-label{color:#94a3b8;text-transform:none;margin-top:.25rem;font-size:.75rem;display:block}input[type=range]{-webkit-appearance:none;background:0 0;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#e2e8f0;border-radius:3px;width:100%;height:6px;transition:background .2s}input[type=range]::-webkit-slider-thumb{cursor:grab;-webkit-appearance:none;background:#f97316;border:2px solid #fff;border-radius:50%;width:24px;height:24px;margin-top:-9px;transition:transform .1s;box-shadow:0 4px 6px #f973164d}input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.1);box-shadow:0 0 0 4px #f9731633}.calc-panel-output{background-color:#fff;flex-direction:column;flex:1;justify-content:space-between;padding:3rem;display:flex}.chart-container{margin-bottom:2rem}.chart-row{margin-bottom:1.5rem}.chart-label{color:#64748b;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem;display:flex}.bar-bg{background:#f1f5f9;border-radius:6px;height:12px;position:relative;overflow:hidden}.bar-fill{border-radius:6px;height:100%;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.bar-fill.cost{background-color:#cbd5e1}.bar-fill.sjef{background-color:#f97316}.savings-display{text-align:center;border-top:1px solid #f1f5f9;padding-top:2rem}.savings-label{color:#64748b;margin-bottom:.5rem;font-size:.875rem}.savings-amount{color:#f97316;font-feature-settings:"tnum";margin-bottom:1rem;font-size:3.5rem;font-weight:700;line-height:1}.dynamic-microcopy{color:#475569;min-height:1.5em;margin-bottom:2rem;font-size:1rem;font-style:italic}.btn-calc-cta{color:#fff;background:#f97316;border-radius:100px;padding:1rem 2rem;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-block;box-shadow:0 4px 12px #f9731640}.btn-calc-cta:hover{transform:translateY(-2px);box-shadow:0 6px 16px #f9731659}@media (max-width:900px){.calculator-wrapper{flex-direction:column}.calc-panel-input{border-bottom:1px solid #e2e8f0;border-right:none;padding:2rem}.calc-panel-output{padding:2rem}.savings-amount{font-size:2.5rem}}
.testimonial-section{background:linear-gradient(#fff 0%,#f8f9fb 100%);padding:8rem 2rem;position:relative;overflow:hidden}.testimonial-header{text-align:center;max-width:600px;margin:0 auto 5rem}.testimonial-title{color:#1a202c;font-size:2.5rem;font-weight:700;font-family:var(--font-inter,sans-serif);margin-bottom:.5rem}.testimonial-subtitle{color:#64748b;font-size:1.125rem}.masonry-grid{column-count:1;column-gap:2rem;max-width:1000px;margin:0 auto}@media (min-width:768px){.masonry-grid{column-count:2}}.report-card{break-inside:avoid;background:#f7f9fc;border:1px solid #e2e8f0;border-radius:4px;margin-bottom:2rem;padding:2rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:0 4px 6px -1px #0000000d}.report-card:hover{box-shadow:var(--shadow-safety-glow);z-index:10;border-color:#f9731666;transform:scale(1.02)}.report-meta{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.meta-info{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-family:Roboto Mono,monospace;font-size:.75rem}.meta-icon{color:#475569;opacity:.5}.report-text{font-family:var(--font-inter,sans-serif);color:#334155;font-size:1rem;font-weight:500;line-height:1.6}@media (min-width:768px){.masonry-grid{padding-top:2rem}.report-card:nth-child(2n){transform:translateY(2rem)}.report-card:nth-child(2n):hover{transform:translateY(2rem)scale(1.02)}}
