:root{
 --bg:#f5f7f3;
 --paper:#fff;
 --ink:#102019;
 --muted:#68756d;
 --soft:#e9eee9;
 --line:rgba(16,32,25,.11);
 --green:#05ce78;
 --green-dark:#049d5d;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
 margin:0;
 overflow-x:hidden;
 background:var(--bg);
 color:var(--ink);
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;
 font-size:16px;
}

button,input{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}

::selection{background:var(--green);color:#07140d}

.progress{
 position:fixed;
 top:0;left:0;
 width:0;height:3px;
 background:var(--green);
 z-index:999
}

.mouse-light{
 position:fixed;
 width:700px;height:700px;
 border-radius:50%;
 pointer-events:none;
 z-index:-1;
 transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(5,206,120,.09),transparent 65%)
}

.nav{
 position:fixed;
 z-index:100;
 top:0;left:0;right:0;
 height:86px;
 display:flex;
 align-items:center;
 padding:0 5vw;
 background:rgba(247,249,246,.78);
 backdrop-filter:blur(28px);
 border-bottom:1px solid var(--line)
}

.logo{
 display:flex;
 align-items:center;
 gap:11px;
 font-size:17px;
 letter-spacing:-.04em
}

.logo-mark{
 width:15px;height:15px;
 display:block;
 background:var(--green);
 border-radius:4px;
 transform:rotate(45deg)
}

.nav nav{
 display:flex;
 gap:40px;
 margin:auto;
 font-size:13px;
 font-weight:600
}

.nav nav a{opacity:.58}
.nav nav a:hover{opacity:1}

.nav-cta{
 padding:13px 20px;
 background:var(--ink);
 color:#fff;
 border-radius:100px;
 font-size:11px;
 font-weight:800;
 letter-spacing:.06em
}

.nav-cta span{margin-left:12px}

.hero{
 min-height:100svh;
 padding:145px 6vw 80px;
 display:grid;
 grid-template-columns:1fr 1fr;
 align-items:center;
 position:relative
}

.hero-copy{
 position:relative;
 z-index:4;
 max-width:830px
}

.eyebrow{
 display:flex;
 align-items:center;
 gap:13px;
 font-size:12px;
 font-weight:800;
 letter-spacing:.17em;
 color:#718078
}

.eyebrow i{
 display:block;
 width:34px;height:2px;
 background:var(--green)
}

.hero h1{
 margin:30px 0 35px;
 font-size:clamp(78px,8.4vw,160px);
 line-height:.82;
 letter-spacing:-.075em;
 font-weight:650
}

.hero h1 span,
h2 em{
 font-family:Georgia,"Times New Roman",serif;
 font-weight:400;
 font-style:italic;
 color:#63a57d
}

.hero-lead{
 max-width:650px;
 font-size:21px;
 line-height:1.65;
 color:var(--muted)
}

.hero-actions{
 display:flex;
 align-items:center;
 gap:35px;
 margin-top:42px
}

.button{
 border:0;
 cursor:pointer;
 display:inline-flex;
 justify-content:space-between;
 align-items:center;
 gap:65px;
 padding:20px 25px;
 border-radius:100px;
 font-size:12px;
 font-weight:800;
 letter-spacing:.08em;
 transition:.3s
}

.button.dark{
 background:var(--ink);
 color:white
}

.button:hover{
 transform:translateY(-4px);
 box-shadow:0 20px 50px rgba(15,35,25,.17)
}

.button b{
 font-size:23px;
 font-weight:400
}

.text-link{
 font-size:11px;
 font-weight:800;
 letter-spacing:.12em
}

.text-link span{
 margin-left:13px;
 color:var(--green)
}

.hero-stats{
 display:flex;
 gap:55px;
 margin-top:70px;
 padding-top:25px;
 border-top:1px solid var(--line);
 max-width:600px
}

.hero-stats div{
 display:flex;
 flex-direction:column
}

.hero-stats strong{
 font-size:32px;
 letter-spacing:-.05em
}

.hero-stats span{
 font-size:12px;
 color:var(--muted);
 margin-top:4px
}

.hero-art{
 height:75vh;
 min-height:600px;
 position:relative;
 display:grid;
 place-items:center
}

.hero-ring{
 position:absolute;
 border-radius:50%;
 border:1px solid rgba(5,206,120,.17)
}

.ring1{width:78%;aspect-ratio:1}
.ring2{width:55%;aspect-ratio:1}

.product-placeholder{
 position:relative;
 z-index:2;
 transform:rotate(-7deg)
}

.product-word{
 font-size:clamp(90px,11vw,200px);
 line-height:.7;
 font-weight:900;
 letter-spacing:-.1em;
 color:var(--ink)
}

.product-word.outline{
 color:transparent;
 -webkit-text-stroke:2px rgba(16,32,25,.13)
}

.hero-glow{
 position:absolute;
 border-radius:50%;
 filter:blur(1px)
}

.glow-a{
 width:380px;height:380px;
 right:12%;top:20%;
 background:radial-gradient(circle,#d7f5df,transparent 68%)
}

.glow-b{
 width:220px;height:220px;
 left:42%;bottom:5%;
 background:radial-gradient(circle,#dcecf7,transparent 70%)
}

.float-card{
 position:absolute;
 z-index:5;
 background:rgba(255,255,255,.72);
 backdrop-filter:blur(20px);
 border:1px solid white;
 border-radius:18px;
 padding:16px 20px;
 box-shadow:0 20px 60px rgba(30,50,40,.08)
}

.float-card small{
 display:block;
 font-size:9px;
 letter-spacing:.13em;
 color:var(--muted);
 margin-bottom:5px
}

.float-card strong{font-size:18px}

.fc1{top:20%;right:5%}
.fc2{bottom:19%;left:3%}
.fc3{right:8%;bottom:7%;font-size:11px;font-weight:800}

.live-dot{
 display:inline-block;
 width:8px;height:8px;
 border-radius:50%;
 background:var(--green);
 margin-right:7px;
 box-shadow:0 0 0 5px rgba(5,206,120,.12)
}

.scroll-note{
 position:absolute;
 right:2vw;
 bottom:7%;
 writing-mode:vertical-rl;
 font-size:9px;
 letter-spacing:.17em;
 color:var(--muted)
}

.scroll-note span{
 display:inline-block;
 width:1px;height:70px;
 background:var(--line);
 margin-top:15px
}

.marquee{
 overflow:hidden;
 padding:25px 0;
 background:var(--ink);
 color:white;
 transform:rotate(-1.5deg) scale(1.03)
}

.marquee div{
 width:max-content;
 white-space:nowrap;
 font-size:clamp(35px,4.8vw,75px);
 font-weight:800;
 letter-spacing:-.055em;
 animation:marquee 25s linear infinite
}

@keyframes marquee{to{transform:translateX(-50%)}}

.section{
 position:relative;
 max-width:1700px;
 margin:auto;
 padding:150px 6vw
}

.section-number{
 position:absolute;
 top:150px;right:6vw;
 font-size:13px;
 color:var(--muted)
}

.story{
 min-height:900px;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10vw;
 align-items:center
}

h2{
 margin:25px 0;
 font-size:clamp(65px,7.5vw,130px);
 line-height:.88;
 letter-spacing:-.065em;
 font-weight:600
}

.story-copy{max-width:630px}

.large-copy{
 font-size:28px!important;
 line-height:1.45!important;
 color:var(--ink)!important;
 letter-spacing:-.025em
}

.story-copy p{
 font-size:17px;
 line-height:1.8;
 color:var(--muted)
}

.story-rule{
 height:1px;
 background:var(--line);
 margin:45px 0
}

.statement{
 font-size:14px;
 line-height:1.6;
 letter-spacing:.1em
}

.section-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-end;
 gap:50px;
 margin-bottom:80px
}

.section-header>p{
 max-width:430px;
 font-size:18px;
 line-height:1.7;
 color:var(--muted)
}

.feature-grid{
 display:grid;
 grid-template-columns:1.4fr 1fr 1fr;
 gap:18px
}

.feature{
 min-height:560px;
 padding:35px;
 background:#fff;
 border-radius:32px;
 position:relative;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.8);
 box-shadow:0 25px 80px rgba(25,45,35,.045)
}

.feature-index{
 position:absolute;
 top:30px;right:30px;
 color:#94a098;
 font-size:12px
}

.feature small{
 color:#7c8b82;
 font-weight:800;
 letter-spacing:.15em;
 font-size:10px
}

.feature h3{
 font-size:34px;
 line-height:1.05;
 letter-spacing:-.045em;
 margin:10px 0 15px
}

.feature p{
 color:var(--muted);
 line-height:1.65;
 font-size:15px
}

.color-visual{
 display:flex;
 justify-content:center;
 align-items:center;
 height:270px
}

.color-visual span{
 width:120px;
 height:120px;
 border-radius:50%;
 background:var(--c);
 margin-left:-45px;
 box-shadow:0 15px 40px rgba(20,30,25,.08)
}

.color-visual span:first-child{margin-left:0}

.mini-grid{
 width:230px;
 display:grid;
 grid-template-columns:repeat(17,1fr);
 gap:3px;
 margin:auto
}

.mini-grid i{
 aspect-ratio:1;
 border-radius:50%;
 background:#dfe6df
}

.mini-grid i.on{background:var(--ink)}

.detail-visual{
 height:280px;
 display:grid;
 place-items:center;
 position:relative
}

.detail-visual div{
 width:180px;height:180px;
 border-radius:45px;
 background:var(--green);
 box-shadow:inset 0 0 0 10px rgba(255,255,255,.3)
}

.detail-visual span{
 position:absolute;
 width:190px;
 height:3px;
 border-top:3px dashed white;
 transform:rotate(45deg)
}

.statement-section{
 min-height:90vh;
 display:grid;
 place-items:center;
 text-align:center;
 position:relative;
 overflow:hidden;
 padding:100px 20px
}

.statement-section span{
 font-size:12px;
 font-weight:800;
 letter-spacing:.2em
}

.statement-section h2{
 font-size:clamp(80px,11vw,190px);
 position:relative;
 z-index:2
}

.statement-orb{
 position:absolute;
 width:850px;
 height:850px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(5,206,120,.18),transparent 67%)
}

.config{
 max-width:1850px
}

.config-head{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:50px;
 margin-bottom:70px
}

.config-head p{
 max-width:520px;
 color:var(--muted);
 font-size:18px;
 line-height:1.7
}

.config-layout{
 display:grid;
 grid-template-columns:330px minmax(550px,1fr) 340px;
 gap:18px
}

.controls,
.motif-control{
 background:rgba(255,255,255,.76);
 border:1px solid white;
 border-radius:30px;
 padding:28px;
 backdrop-filter:blur(25px);
 box-shadow:0 25px 80px rgba(20,40,30,.055)
}

.control-block{
 padding:5px 0 30px;
 margin-bottom:30px;
 border-bottom:1px solid var(--line)
}

.control-block:last-child{
 border-bottom:0;
 margin-bottom:0
}

.control-title{
 display:flex;
 align-items:center;
 gap:13px
}

.control-title>span{
 width:42px;height:42px;
 display:grid;
 place-items:center;
 border-radius:50%;
 background:#edf3ed;
 color:#5f7667;
 font-size:11px
}

.control-title small{
 display:block;
 font-size:9px;
 color:#87948c;
 letter-spacing:.15em;
 margin-bottom:4px
}

.control-title strong{
 font-size:15px
}

.face-buttons{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
 margin-top:22px
}

.face-buttons button,
.motif-actions button{
 border:1px solid var(--line);
 background:white;
 border-radius:12px;
 padding:13px 8px;
 font-size:10px;
 font-weight:700;
 cursor:pointer
}

.face-buttons button.active{
 background:var(--ink);
 color:white
}

.palette{
 display:grid;
 grid-template-columns:repeat(7,1fr);
 gap:10px;
 margin-top:22px;
 max-height:270px;
 overflow:auto;
 padding:3px
}

.palette p{
 grid-column:1/-1;
 color:var(--muted);
 font-size:12px
}

.swatch{
 border:3px solid white;
 outline:1px solid rgba(0,0,0,.08);
 aspect-ratio:1;
 border-radius:50%;
 cursor:pointer;
 transition:.2s
}

.swatch:hover{transform:scale(1.18)}

.color-control{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-top:23px
}

.color-control b{
 display:block;
 font-size:13px
}

.color-control small{
 display:block;
 color:var(--muted);
 font-size:10px;
 margin-top:3px
}

.color-control input{
 width:45px;height:35px;
 border:0;background:none
}

.model-stage{
 position:relative;
 min-height:790px;
 border-radius:36px;
 overflow:hidden;
 background:
 radial-gradient(circle at 50% 45%,rgba(5,206,120,.16),transparent 34%),
 linear-gradient(145deg,#edf4ed,#fff);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)
}

.model-top{
 position:absolute;
 z-index:8;
 top:28px;left:32px;right:32px;
 display:flex;
 justify-content:space-between;
 font-size:10px;
 font-weight:700;
 letter-spacing:.12em;
 color:#738178
}

#modelPortal{
 position:absolute;
 inset:55px 0 90px;
 overflow:hidden
}

#modelCanvas{
 position:absolute;
 inset:0;
 width:100%!important;
 height:100%!important;
 display:block;
 cursor:grab;
 touch-action:none;
 z-index:3
}

#modelCanvas:active{cursor:grabbing}

#renderStatus{
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 font-size:11px;
 letter-spacing:.15em;
 color:#819087
}

.model-help{
 position:absolute;
 z-index:8;
 left:0;right:0;
 bottom:87px;
 text-align:center;
 color:#758279;
 font-size:10px;
 letter-spacing:.13em
}

.model-help span{
 font-size:20px;
 vertical-align:middle;
 margin-right:8px
}

.view-buttons{
 position:absolute;
 z-index:9;
 left:50%;bottom:27px;
 transform:translateX(-50%);
 display:flex;
 padding:5px;
 background:rgba(255,255,255,.78);
 border:1px solid white;
 border-radius:100px;
 backdrop-filter:blur(20px)
}

.view-buttons button{
 border:0;
 background:none;
 padding:11px 16px;
 border-radius:100px;
 font-size:9px;
 font-weight:700;
 cursor:pointer
}

.view-buttons button.active{
 background:var(--ink);
 color:white
}

.motif-control>p{
 font-size:13px;
 color:var(--muted);
 line-height:1.6;
 margin:25px 0
}

.pixel-grid{
 display:grid;
 grid-template-columns:repeat(17,1fr);
 gap:4px
}

.pixel{
 border:1px solid #d2dbd4;
 background:white;
 border-radius:50%;
 padding:0;
 aspect-ratio:1;
 cursor:pointer
}

.pixel.on{
 background:var(--ink);
 border-color:var(--ink)
}

.motif-actions{
 display:flex;
 gap:8px;
 margin-top:25px
}

.motif-actions button{flex:1}

.motif-info{
 display:flex;
 align-items:center;
 gap:15px;
 margin-top:35px;
 padding-top:25px;
 border-top:1px solid var(--line)
}

.motif-info strong{
 font-size:45px;
 letter-spacing:-.06em
}

.motif-info span{
 font-size:11px;
 color:var(--muted)
}

.how{padding-top:190px;padding-bottom:190px}

.steps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 border-top:1px solid var(--line)
}

.step{
 min-height:390px;
 padding:35px 35px 20px 0;
 border-right:1px solid var(--line);
 position:relative
}

.step+ .step{padding-left:35px}

.step>span{
 font-size:11px;
 color:#849088
}

.step-icon{
 margin:60px 0;
 width:60px;height:60px;
 border-radius:50%;
 background:#e6eee7;
 display:grid;
 place-items:center;
 font-size:20px;
 color:#4b6e58
}

.step h3{
 font-size:29px;
 letter-spacing:-.04em;
 margin:0 0 15px
}

.step p{
 color:var(--muted);
 line-height:1.7;
 font-size:14px
}

.philosophy{
 min-height:900px;
 display:grid;
 grid-template-columns:1fr 1fr;
 background:var(--ink);
 color:white
}

.philosophy-left,
.philosophy-right{
 padding:9vw 7vw;
 display:flex;
 flex-direction:column;
 justify-content:center
}

.philosophy-left>span{
 font-size:11px;
 letter-spacing:.2em;
 color:#85a28f
}

.philosophy h2{
 color:white
}

.philosophy h2 em{color:#74c999}

.philosophy-right{
 border-left:1px solid rgba(255,255,255,.12);
 position:relative;
 overflow:hidden
}

.giant-b{
 position:absolute;
 font-size:600px;
 line-height:1;
 font-weight:900;
 opacity:.035;
 right:-80px
}

.philosophy-right p{
 position:relative;
 z-index:2;
 font-size:27px;
 line-height:1.55;
 max-width:600px;
 color:#b7c4bb
}

.philosophy-right strong{
 margin-top:60px;
 letter-spacing:.2em;
 color:var(--green)
}

.faq{
 display:grid;
 grid-template-columns:.65fr 1.35fr;
 gap:8vw
}

.faq-head h2{
 font-size:clamp(90px,12vw,190px)
}

.faq-list details{
 border-top:1px solid var(--line);
 padding:0
}

.faq-list details:last-child{
 border-bottom:1px solid var(--line)
}

.faq-list summary{
 list-style:none;
 cursor:pointer;
 display:grid;
 grid-template-columns:50px 1fr 40px;
 align-items:center;
 min-height:105px;
 font-size:21px;
 font-weight:600
}

.faq-list summary::-webkit-details-marker{display:none}

.faq-list summary span{
 font-size:10px;
 color:#8c9890
}

.faq-list summary b{
 font-size:25px;
 font-weight:300
}

.faq-list details[open] summary b{
 transform:rotate(45deg)
}

.faq-list details p{
 margin:0 50px 35px;
 color:var(--muted);
 font-size:16px;
 line-height:1.7;
 max-width:700px
}

.final{
 min-height:100vh;
 display:grid;
 place-items:center;
 text-align:center;
 position:relative;
 overflow:hidden;
 padding:100px 20px
}

.final-glow{
 position:absolute;
 width:1100px;height:1100px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(5,206,120,.24),transparent 65%)
}

.final-inner{
 position:relative;
 z-index:2;
 max-width:1100px
}

.final .eyebrow{justify-content:center}

.final h2{
 font-size:clamp(75px,9vw,155px)
}

.final p{
 max-width:620px;
 margin:0 auto 40px;
 color:var(--muted);
 font-size:19px;
 line-height:1.7
}

.finish{margin:auto}

#result{
 margin-top:35px;
 font-size:14px
}

.designID{
 font-size:clamp(35px,5vw,70px);
 font-weight:800;
 letter-spacing:-.04em;
 margin:12px 0 25px
}

.ebay{
 display:flex;
 justify-content:center;
 margin-top:20px
}

footer{
 background:#fff;
 padding:80px 6vw 30px
}

.footer-main{
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 align-items:start
}

.footer-claim{
 font-size:50px;
 line-height:.85;
 letter-spacing:-.06em
}

.footer-links{
 display:flex;
 flex-direction:column;
 align-items:flex-end;
 gap:12px;
 font-size:14px
}

.footer-bottom{
 margin-top:80px;
 padding-top:25px;
 border-top:1px solid var(--line);
 display:flex;
 justify-content:space-between;
 color:var(--muted);
 font-size:10px;
 letter-spacing:.06em
}

.reveal{
 opacity:0;
 transform:translateY(55px);
 transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)
}

.reveal.visible{
 opacity:1;
 transform:none
}

@media(max-width:1200px){
 .config-layout{grid-template-columns:1fr 1fr}
 .model-stage{grid-column:1/-1;grid-row:1}
 .feature-grid{grid-template-columns:1fr 1fr}
 .feature-big{grid-column:1/-1}
}

@media(max-width:900px){
 .nav nav{display:none}

 .hero{
  grid-template-columns:1fr;
  padding-top:130px
 }

 .hero-art{
  height:500px;
  min-height:0
 }

 .story,
 .faq{
  grid-template-columns:1fr
 }

 .feature-grid,
 .config-layout{
  grid-template-columns:1fr
 }

 .model-stage{
  grid-column:auto;
  min-height:650px
 }

 .steps{
  grid-template-columns:1fr 1fr
 }

 .philosophy{
  grid-template-columns:1fr
 }

 .philosophy-right{border-left:0}

 .section-header,
 .config-head{
  align-items:flex-start;
  flex-direction:column
 }
}

@media(max-width:600px){
 body{font-size:15px}

 .nav{
  height:70px;
  padding:0 20px
 }

 .logo{font-size:15px}
 .nav-cta{font-size:9px;padding:11px 14px}

 .hero{
  padding:115px 20px 70px
 }

 .hero h1{font-size:64px}

 .hero-lead{font-size:18px}

 .hero-actions{
  align-items:flex-start;
  flex-direction:column
 }

 .hero-stats{
  gap:25px
 }

 .hero-stats strong{font-size:26px}

 .hero-art{height:390px}

 .section{
  padding:100px 20px
 }

 h2{font-size:58px}

 .large-copy{font-size:22px!important}

 .feature{min-height:500px;padding:25px}

 .color-visual span{
  width:85px;height:85px;
  margin-left:-32px
 }

 .statement-section h2{font-size:65px}

 .model-stage{
  min-height:520px;
  border-radius:25px
 }

 .controls,.motif-control{
  padding:22px;
  border-radius:24px
 }

 .palette{grid-template-columns:repeat(8,1fr)}

 .steps{grid-template-columns:1fr}
 .step{border-right:0;border-bottom:1px solid var(--line)}
 .step+.step{padding-left:0}

 .philosophy-left,.philosophy-right{
  padding:100px 25px
 }

 .philosophy-right p{font-size:21px}

 .faq-list summary{
  font-size:16px;
  grid-template-columns:35px 1fr 25px
 }

 .footer-main{grid-template-columns:1fr;gap:50px}
 .footer-links{align-items:flex-start}

 .footer-bottom{
  flex-direction:column;
  gap:10px
 }
}

@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important}
 .marquee div{animation:none}
 .reveal{opacity:1;transform:none;transition:none}
}

/* BOXCRAFT_SEO_EXTERNAL_START */

.bc-visual-bold,
.bc-stat-strong {
    font-weight: 700;
}

.bc-hero-external {
    opacity: .82;
}

.bc-market-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.bc-market-link:hover {
    transform: translateY(-2px);
    border-color: rgba(5,206,120,.55);
    background: rgba(5,206,120,.07);
}

.bc-project-links {
    padding:
        clamp(50px,8vw,100px)
        clamp(18px,5vw,70px);
}

.bc-project-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(28px,5vw,58px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(5,206,120,.16),
            transparent 40%
        ),
        rgba(255,255,255,.035);
    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bc-project-kicker {
    display: block;
    margin-bottom: 12px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    opacity: .65;
}

.bc-project-card h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.8rem,4.5vw,3.6rem);
    line-height: 1.05;
}

.bc-project-card > p {
    max-width: 760px;
    margin: 20px 0 0;
    line-height: 1.75;
    opacity: .78;
}

.bc-project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.bc-project-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.15);
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.bc-project-button:hover {
    transform: translateY(-2px);
}

.bc-project-button:focus-visible,
.bc-market-link:focus-visible,
.bc-hero-external:focus-visible {
    outline: 3px solid rgba(5,206,120,.45);
    outline-offset: 3px;
}

.bc-project-button-primary {
    background: #05CE78;
    color: #06130d;
    box-shadow: 0 14px 40px rgba(5,206,120,.18);
}

.bc-project-button-primary:hover {
    box-shadow: 0 18px 50px rgba(5,206,120,.28);
}

.bc-project-button-secondary {
    background: rgba(255,255,255,.055);
    color: inherit;
}

.bc-project-button-secondary:hover {
    border-color: rgba(255,255,255,.30);
}

.bc-project-external-note {
    display: block;
    margin-top: 15px;
    opacity: .48;
}

@media (max-width:640px) {
    .bc-project-card {
        border-radius: 22px;
    }

    .bc-project-actions {
        flex-direction: column;
    }

    .bc-project-button {
        width: 100%;
        box-sizing: border-box;
    }
}

/* BOXCRAFT_SEO_EXTERNAL_END */


/* BOXCRAFT_CHANNELS_STYLE_START */

.bc-channels {
    position: relative;
}

.bc-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    max-width: 1200px;
    margin: 38px auto 0;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.10);
}

.bc-channel-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    min-height: 190px;
    padding: clamp(24px,4vw,42px);

    background: #0a0a0a;
    color: inherit;
    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.bc-channel-card:hover {
    background: #0f0f0f;
}

.bc-channel-number {
    padding-top: 4px;
    font-size: .7rem;
    letter-spacing: .12em;
    opacity: .35;
}

.bc-channel-content {
    max-width: 430px;
}

.bc-channel-label {
    display: block;
    margin-bottom: 12px;

    color: #05CE78;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.bc-channel-content h3 {
    margin: 0 0 12px;
    font-size: clamp(1.5rem,3vw,2.3rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.bc-channel-content p {
    margin: 0;
    line-height: 1.65;
    opacity: .58;
}

.bc-channel-arrow {
    font-size: 1.15rem;
    opacity: .35;
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.bc-channel-card:hover .bc-channel-arrow {
    opacity: 1;
    transform: translate(3px,-3px);
}

.bc-channel-card:focus-visible {
    outline: 2px solid #05CE78;
    outline-offset: -2px;
    z-index: 2;
}

@media (max-width: 720px) {

    .bc-channel-grid {
        grid-template-columns: 1fr;
    }

    .bc-channel-card {
        min-height: auto;
    }
}

/* BOXCRAFT_CHANNELS_STYLE_END */

/* BOXCRAFT_REAL_PRODUCT_HERO_START */


/* HEADER */

.bc-header-divider {
    width:1px;
    height:14px;
    margin:0 4px;
    background:rgba(10,35,25,.14);
}

.bc-header-market {
    display:inline-flex;
    align-items:center;
    gap:5px;

    color:#0a2319;
    text-decoration:none;

    font-size:10px;
    font-weight:700;

    transition:
        color .2s ease,
        transform .2s ease;
}

.bc-header-market span {
    color:#05CE78;
    font-size:9px;
}

.bc-header-market:hover {
    color:#05CE78;
    transform:translateY(-1px);
}


/* HERO PRODUCT */

.bc-hero-product {
    position:absolute;
    inset:4% 2% 2%;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:3;

    pointer-events:none;
}

.bc-hero-product-halo {
    position:absolute;

    width:72%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(5,206,120,.13) 0%,
            rgba(5,206,120,.055) 40%,
            transparent 70%
        );

    filter:blur(22px);
}

.bc-hero-product-image {
    position:relative;
    z-index:2;

    display:block;

    width:min(82%,620px);
    max-height:72vh;

    object-fit:contain;

    transform:
        translateY(3%)
        rotate(-1.2deg);

    filter:
        drop-shadow(0 34px 42px rgba(9,38,27,.13))
        drop-shadow(0 10px 16px rgba(9,38,27,.08));

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        filter .65s ease;
}

.hero-art:hover .bc-hero-product-image {
    transform:
        translateY(0)
        rotate(0)
        scale(1.025);

    filter:
        drop-shadow(0 38px 50px rgba(9,38,27,.17))
        drop-shadow(0 12px 18px rgba(9,38,27,.10));
}

.bc-hero-product-caption {
    position:absolute;
    right:7%;
    bottom:12%;

    z-index:5;

    display:flex;
    align-items:center;
    gap:8px;

    padding:9px 13px;

    border:1px solid rgba(8,36,25,.08);
    border-radius:999px;

    background:rgba(255,255,255,.82);

    box-shadow:0 15px 40px rgba(8,36,25,.08);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    color:#082419;

    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}

.bc-hero-product-caption span {
    width:7px;
    height:7px;

    border-radius:50%;

    background:#05CE78;

    box-shadow:
        0 0 0 5px rgba(5,206,120,.10);
}


/* vorhandene Elemente darüber */

.hero-ring {
    z-index:1;
}

.float-card {
    z-index:5;
}


/* HERO LINKS */

.bc-hero-external-links {
    display:flex;
    align-items:center;
    gap:20px;

    margin-top:15px;
}

.bc-hero-external-links a {
    display:inline-flex;
    align-items:center;
    gap:6px;

    color:#0a2319;
    text-decoration:none;

    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;

    opacity:.62;

    transition:
        color .18s ease,
        opacity .18s ease,
        transform .18s ease;
}

.bc-hero-external-links a span {
    color:#05CE78;
}

.bc-hero-external-links a:hover {
    color:#05CE78;
    opacity:1;
    transform:translateY(-1px);
}


/* TABLET */

@media(max-width:1100px) {

    .bc-header-divider,
    .bc-header-market {
        display:none;
    }

    .bc-hero-product-image {
        width:min(88%,520px);
    }
}


/* MOBILE */

@media(max-width:700px) {

    .bc-hero-external-links {
        flex-wrap:wrap;
        gap:10px 18px;
    }

    .bc-hero-product {
        inset:3% 0 0;
    }

    .bc-hero-product-image {
        width:min(90%,430px);
        max-height:52vh;
    }

    .bc-hero-product-caption {
        right:5%;
        bottom:7%;
    }
}


/* BOXCRAFT_REAL_PRODUCT_HERO_END */

/* =========================================================
   BOXCRAFT_HERO_BLEND_V2_START
   Produkt dezent im Hintergrund + ursprünglicher Wordmark
   ========================================================= */

.hero-art {
    overflow: hidden;
}


/* gesamter Produktbereich */

.bc-hero-product {
    position: absolute !important;
    inset: -3% -5% -4% -3% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 2 !important;

    pointer-events: none;
}


/* grüner Hintergrundschein */

.bc-hero-product-halo {
    position: absolute !important;

    width: 82% !important;
    aspect-ratio: 1 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(5,206,120,.12) 0%,
            rgba(5,206,120,.055) 36%,
            rgba(5,206,120,.018) 53%,
            transparent 72%
        ) !important;

    filter: blur(30px) !important;

    z-index: 0 !important;
}


/* echtes Produkt:
   groß, aber bewusst zurückgenommen */

.bc-hero-product-image {
    position: absolute !important;

    z-index: 1 !important;

    width: min(94%, 720px) !important;
    max-height: 82vh !important;

    object-fit: contain !important;

    opacity: .42 !important;

    transform:
        translate(7%, 3%)
        rotate(-2deg)
        scale(1.04) !important;

    filter:
        saturate(.78)
        contrast(.93)
        brightness(1.05)
        drop-shadow(0 28px 45px rgba(8,36,25,.10))
        !important;

    transition:
        opacity .6s ease,
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .6s ease !important;
}


/* beim Hover nur ganz leicht lebendiger */

.hero-art:hover .bc-hero-product-image {
    opacity: .52 !important;

    transform:
        translate(6%, 1%)
        rotate(-1deg)
        scale(1.055) !important;

    filter:
        saturate(.88)
        contrast(.96)
        brightness(1.04)
        drop-shadow(0 34px 52px rgba(8,36,25,.13))
        !important;
}


/* ---------------------------------------------------------
   BOX / CRAFT
   --------------------------------------------------------- */

.bc-hero-wordmark {
    position: absolute;

    left: 4%;
    top: 50%;

    z-index: 3;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;

    line-height: .76;

    pointer-events: none;
}

.bc-hero-word {
    font-size: clamp(74px, 9vw, 158px);
    font-weight: 900;

    letter-spacing: -.075em;

    white-space: nowrap;
}

.bc-hero-word-box {
    color: rgba(8,36,25,.90);

    text-shadow:
        0 8px 35px rgba(255,255,255,.18);
}

.bc-hero-word-craft {
    color: transparent;

    -webkit-text-stroke:
        1.5px rgba(8,36,25,.38);

    text-stroke:
        1.5px rgba(8,36,25,.38);

    opacity: .85;
}


/* Ringe hinter allem */

.hero-ring {
    z-index: 0 !important;
    opacity: .58;
}


/* Float Cards bleiben klar im Vordergrund */

.float-card {
    z-index: 6 !important;
}


/* zusätzliche weiche Überblendung nach links */

.bc-hero-product::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(242,255,249,.30) 0%,
            rgba(242,255,249,.10) 22%,
            transparent 48%
        );
}


/* Wordmark vor Overlay */

.bc-hero-wordmark {
    z-index: 4;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .bc-hero-product-image {
        width: min(96%, 610px) !important;

        opacity: .36 !important;

        transform:
            translate(10%,3%)
            rotate(-2deg)
            scale(1.02) !important;
    }

    .bc-hero-word {
        font-size: clamp(68px,11vw,120px);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .bc-hero-product {
        inset: 0 -12% 0 -4% !important;
    }

    .bc-hero-product-image {
        width: 105% !important;
        max-height: 55vh !important;

        opacity: .30 !important;

        transform:
            translate(14%,2%)
            rotate(-2deg) !important;
    }

    .bc-hero-wordmark {
        left: 6%;
    }

    .bc-hero-word {
        font-size: clamp(58px,18vw,94px);
    }

    .bc-hero-word-craft {
        -webkit-text-stroke:
            1px rgba(8,36,25,.35);
    }

}


/* =========================================================
   BOXCRAFT_HERO_BLEND_V2_END
   ========================================================= */

/* BOXCRAFT_HERO_IMAGE_GRADIENT_V3_START */

/*
   Bildverlauf:
   links unsichtbar
   Mitte sanft einblenden
   rechts vollständig sichtbar
*/
.bc-hero-product-image {
    opacity: .72 !important;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 18%,
        rgba(0,0,0,.08) 30%,
        rgba(0,0,0,.30) 42%,
        rgba(0,0,0,.65) 55%,
        #000 72%,
        #000 100%
    ) !important;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 18%,
        rgba(0,0,0,.08) 30%,
        rgba(0,0,0,.30) 42%,
        rgba(0,0,0,.65) 55%,
        #000 72%,
        #000 100%
    ) !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
}

/* Hover behält denselben Verlauf */
.hero-art:hover .bc-hero-product-image {
    opacity: .82 !important;
}

/*
   BOX / CRAFT bleibt klar davor.
*/
.bc-hero-wordmark {
    z-index: 5 !important;
}

/*
   Ganz leichte Verbindung zwischen Schrift und Produkt.
*/
.bc-hero-product::after {
    background: linear-gradient(
        90deg,
        rgba(242,255,249,.22) 0%,
        rgba(242,255,249,.12) 25%,
        rgba(242,255,249,.04) 40%,
        transparent 58%
    ) !important;
}

/* Mobile: Verlauf etwas früher beginnen */
@media (max-width:700px) {

    .bc-hero-product-image {
        opacity: .62 !important;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.08) 15%,
            rgba(0,0,0,.38) 35%,
            rgba(0,0,0,.75) 55%,
            #000 72%,
            #000 100%
        ) !important;

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.08) 15%,
            rgba(0,0,0,.38) 35%,
            rgba(0,0,0,.75) 55%,
            #000 72%,
            #000 100%
        ) !important;
    }
}

/* BOXCRAFT_HERO_IMAGE_GRADIENT_V3_END */

/* BOXCRAFT_HERO_FULLHEIGHT_V4_START */

/*
 * Produktbild füllt die komplette Hero-Höhe.
 * Seitenverhältnis bleibt erhalten.
 * Fade Mitte -> rechts bleibt bestehen.
 */

.hero-art {
    position: relative !important;
    overflow: hidden !important;
}

.bc-hero-product {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    overflow: hidden !important;

    z-index: 2 !important;
}


/* Produkt selbst */

.bc-hero-product-image {
    position: absolute !important;

    top: 0 !important;
    right: -3% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: right center !important;

    opacity: .76 !important;

    transform: none !important;

    /*
     * Von links / Mitte weich einblenden,
     * rechts vollständig sichtbar.
     */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 8%,
        rgba(0,0,0,.06) 22%,
        rgba(0,0,0,.22) 34%,
        rgba(0,0,0,.48) 46%,
        rgba(0,0,0,.76) 58%,
        #000 72%,
        #000 100%
    ) !important;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 8%,
        rgba(0,0,0,.06) 22%,
        rgba(0,0,0,.22) 34%,
        rgba(0,0,0,.48) 46%,
        rgba(0,0,0,.76) 58%,
        #000 72%,
        #000 100%
    ) !important;

    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    filter:
        saturate(.82)
        contrast(.95)
        brightness(1.04)
        drop-shadow(0 20px 35px rgba(8,36,25,.10))
        !important;
}


/* Kein Zoom mehr beim Hover – Bild bleibt sauber Full Height */

.hero-art:hover .bc-hero-product-image {
    height: 100% !important;
    opacity: .82 !important;
    transform: none !important;
}


/* BOX / CRAFT davor */

.bc-hero-wordmark {
    z-index: 5 !important;
}


/* Ringe dahinter */

.hero-ring {
    z-index: 0 !important;
}


/* Karten ganz vorne */

.float-card {
    z-index: 7 !important;
}


/* Halo ebenfalls über komplette Höhe */

.bc-hero-product-halo {
    position: absolute !important;

    width: 100% !important;
    height: 100% !important;

    inset: 0 !important;

    border-radius: 0 !important;

    background:
        radial-gradient(
            ellipse at 72% 50%,
            rgba(5,206,120,.12) 0%,
            rgba(5,206,120,.055) 35%,
            transparent 68%
        ) !important;

    filter: none !important;

    z-index: 0 !important;
}


/*
 * bisherigen zusätzlichen weißen Overlay abschwächen,
 * damit der Full-Height-Fade sauber sichtbar bleibt
 */

.bc-hero-product::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 3 !important;

    pointer-events: none !important;

    background: linear-gradient(
        90deg,
        rgba(242,255,249,.14) 0%,
        rgba(242,255,249,.06) 28%,
        transparent 55%
    ) !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .bc-hero-product {
        inset: 0 !important;
    }

    .bc-hero-product-image {
        top: 0 !important;
        right: -15% !important;

        width: auto !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;

        opacity: .54 !important;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.05) 15%,
            rgba(0,0,0,.30) 35%,
            rgba(0,0,0,.70) 55%,
            #000 72%,
            #000 100%
        ) !important;

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.05) 15%,
            rgba(0,0,0,.30) 35%,
            rgba(0,0,0,.70) 55%,
            #000 72%,
            #000 100%
        ) !important;
    }
}

/* BOXCRAFT_HERO_FULLHEIGHT_V4_END */

/* =========================================================
   BOXCRAFT_HERO_TRUE_FULLHEIGHT_V5_START
   Bildfläche = komplette Höhe des gesamten HERO
   ========================================================= */

.hero {
    position: relative !important;
    overflow: hidden !important;
}


/*
 * WICHTIG:
 * hero-art wird aus seiner bisherigen rechten Box gelöst
 * und über den KOMPLETTEN Hero gespannt.
 */
.hero .hero-art {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 42% !important;

    width: auto !important;
    height: auto !important;

    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 1 !important;

    pointer-events: none;
}


/* Textseite sicher davor */

.hero .hero-copy {
    position: relative !important;
    z-index: 10 !important;
}


/* Produktcontainer exakt auf hero-art */

.hero .bc-hero-product {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 2 !important;
}


/*
 * Das Foto selbst füllt jetzt die GANZE Höhe.
 *
 * object-fit: cover ist hier entscheidend:
 * kein weißer Rand oben/unten.
 */
.hero .bc-hero-product-image {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: .78 !important;

    transform: none !important;

    filter:
        saturate(.82)
        contrast(.94)
        brightness(1.04)
        !important;


    /*
     * LINKS unsichtbar
     * ab Mitte weich sichtbar
     * RECHTS vollständig sichtbar
     */

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.03) 8%,
        rgba(0,0,0,.12) 18%,
        rgba(0,0,0,.32) 30%,
        rgba(0,0,0,.58) 42%,
        rgba(0,0,0,.82) 54%,
        #000 68%,
        #000 100%
    ) !important;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.03) 8%,
        rgba(0,0,0,.12) 18%,
        rgba(0,0,0,.32) 30%,
        rgba(0,0,0,.58) 42%,
        rgba(0,0,0,.82) 54%,
        #000 68%,
        #000 100%
    ) !important;

    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}


/* kein Hover-Zoom */

.hero .hero-art:hover .bc-hero-product-image {
    width: 100% !important;
    height: 100% !important;

    opacity: .82 !important;

    transform: none !important;
}


/*
 * BOX / CRAFT ebenfalls innerhalb dieser
 * Full-Height-Komposition
 */

.hero .bc-hero-wordmark {
    position: absolute !important;

    left: 7% !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 6 !important;
}


/* bestehende Ringe */

.hero .hero-ring {
    position: absolute !important;
    z-index: 3 !important;
}


/* Float Cards */

.hero .float-card {
    z-index: 8 !important;
}


/*
 * bisherigen zusätzlichen Overlay reduzieren,
 * da Maskierung bereits den Übergang übernimmt
 */

.hero .bc-hero-product::after {
    content: none !important;
}


/* Halo über gesamte Höhe */

.hero .bc-hero-product-halo {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 0 !important;

    background:
        radial-gradient(
            ellipse at 70% 50%,
            rgba(5,206,120,.10),
            rgba(5,206,120,.035) 38%,
            transparent 68%
        ) !important;

    filter: none !important;

    z-index: 1 !important;
}


/* Scroll-Hinweis ganz vorne */

.hero .scroll-note {
    z-index: 20 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .hero .hero-art {
        left: 38% !important;
    }

    .hero .bc-hero-product-image {
        object-position: 58% center !important;
        opacity: .62 !important;
    }
}


/* =========================================================
   MOBILE
   Auf Mobile weiterhin kompletter Hero-Hintergrund,
   aber deutlich dezenter damit Text lesbar bleibt.
   ========================================================= */

@media (max-width: 700px) {

    .hero .hero-art {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }

    .hero .bc-hero-product-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: 62% center !important;

        opacity: .25 !important;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.15) 25%,
            rgba(0,0,0,.55) 50%,
            #000 75%,
            #000 100%
        ) !important;

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.15) 25%,
            rgba(0,0,0,.55) 50%,
            #000 75%,
            #000 100%
        ) !important;
    }

    .hero .bc-hero-wordmark {
        left: 45% !important;
        opacity: .45;
    }
}


/* =========================================================
   BOXCRAFT_HERO_TRUE_FULLHEIGHT_V5_END
   ========================================================= */

/* =========================================================
   BOXCRAFT CHANNELS CLEAN V3
   Scope: #boxcraft-links ONLY
   ========================================================= */

#boxcraft-links {
    position: relative;
    overflow: hidden;
    padding: clamp(90px, 9vw, 150px) clamp(24px, 7vw, 110px);
    background:
        radial-gradient(circle at 14% 18%,
            rgba(5,206,120,.10),
            transparent 28%),
        #f7f9f6;
}

/* HEAD --------------------------------------------------- */

#boxcraft-links .section-head {
    width: min(100%, 1180px);
    margin: 0 auto 54px;
}

#boxcraft-links .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;

    color: #087947;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .18em;
}

#boxcraft-links .section-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 99px;
    background: #05ce78;
}

#boxcraft-links .section-head h2 {
    max-width: 1050px;
    margin: 0;

    color: #09271d;
    font-size: clamp(54px, 6.3vw, 104px);
    line-height: .91;
    letter-spacing: -.065em;
    font-weight: 800;
}

#boxcraft-links .section-head > p {
    max-width: 820px;
    margin: 30px 0 0;

    color: #53635d;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
}

/* GRID --------------------------------------------------- */

#boxcraft-links .bc-channel-grid {
    width: min(100%, 1180px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* CARDS -------------------------------------------------- */

#boxcraft-links .bc-channel-card {
    position: relative;
    isolation: isolate;

    min-height: 310px;
    padding: 34px 36px 38px;

    display: flex;
    flex-direction: column;

    text-decoration: none;

    border: 1px solid rgba(9,39,29,.11);
    border-radius: 28px;

    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

/* eBay – primär */

#boxcraft-links .bc-channel-card:first-child {
    background:
        radial-gradient(circle at 90% 5%,
            rgba(5,206,120,.23),
            transparent 35%),
        #09271d;

    border-color: #09271d;
    box-shadow: 0 24px 70px rgba(9,39,29,.14);
}

#boxcraft-links .bc-channel-card:first-child::after {
    content: "eBay";

    position: absolute;
    right: -12px;
    bottom: -30px;
    z-index: -1;

    color: rgba(255,255,255,.035);
    font-size: clamp(110px, 12vw, 190px);
    line-height: .8;
    font-weight: 900;
    letter-spacing: -.09em;

    pointer-events: none;
}

/* Kickstarter – sekundär */

#boxcraft-links .bc-channel-card:nth-child(2) {
    background:
        radial-gradient(circle at 100% 0,
            rgba(5,206,120,.12),
            transparent 38%),
        #ffffff;

    box-shadow: 0 24px 70px rgba(9,39,29,.06);
}

#boxcraft-links .bc-channel-card:nth-child(2)::after {
    content: "K";

    position: absolute;
    right: 18px;
    bottom: -62px;
    z-index: -1;

    color: rgba(5,206,120,.055);
    font-size: 250px;
    line-height: 1;
    font-weight: 900;

    pointer-events: none;
}

/* NUMBER ------------------------------------------------- */

#boxcraft-links .bc-channel-number {
    display: block;
    margin-bottom: auto;

    color: rgba(255,255,255,.40);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
}

#boxcraft-links .bc-channel-card:nth-child(2) .bc-channel-number {
    color: #94a29d;
}

/* CONTENT ------------------------------------------------ */

#boxcraft-links .bc-channel-content {
    position: relative;
    z-index: 2;
    margin-top: 70px;
}

#boxcraft-links .bc-channel-label {
    display: block;
    margin-bottom: 11px;

    color: #05ce78;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .19em;
}

#boxcraft-links .bc-channel-content h3 {
    margin: 0 0 14px;

    color: #ffffff;
    font-size: clamp(38px, 4vw, 62px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 800;
}

#boxcraft-links .bc-channel-card:nth-child(2) .bc-channel-content h3 {
    color: #09271d;
}

#boxcraft-links .bc-channel-content p {
    max-width: 440px;
    margin: 0;

    color: rgba(255,255,255,.67);
    font-size: 14px;
    line-height: 1.65;
}

#boxcraft-links .bc-channel-card:nth-child(2) .bc-channel-content p {
    color: #63716c;
}

/* ARROW -------------------------------------------------- */

#boxcraft-links .bc-channel-arrow {
    position: absolute;
    top: 28px;
    right: 30px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);

    color: #ffffff;
    font-size: 20px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

#boxcraft-links .bc-channel-card:nth-child(2) .bc-channel-arrow {
    color: #09271d;
    background: #edf5f1;
    border-color: rgba(9,39,29,.08);
}

/* INTERACTION ------------------------------------------- */

@media (hover:hover) {

    #boxcraft-links .bc-channel-card:hover {
        transform: translateY(-7px);
    }

    #boxcraft-links .bc-channel-card:first-child:hover {
        box-shadow: 0 34px 90px rgba(9,39,29,.22);
    }

    #boxcraft-links .bc-channel-card:nth-child(2):hover {
        border-color: rgba(5,206,120,.45);
        box-shadow: 0 34px 90px rgba(9,39,29,.10);
    }

    #boxcraft-links .bc-channel-card:hover .bc-channel-arrow {
        transform: rotate(45deg);
        background: #05ce78;
        color: #062219;
        border-color: #05ce78;
    }
}

/* KEYBOARD ---------------------------------------------- */

#boxcraft-links .bc-channel-card:focus-visible {
    outline: 3px solid #05ce78;
    outline-offset: 5px;
}

/* MOBILE ------------------------------------------------- */

@media (max-width: 800px) {

    #boxcraft-links {
        padding:
            clamp(72px, 16vw, 100px)
            20px;
    }

    #boxcraft-links .section-head {
        margin-bottom: 38px;
    }

    #boxcraft-links .section-head h2 {
        font-size: clamp(46px, 13vw, 70px);
    }

    #boxcraft-links .section-head > p {
        margin-top: 22px;
        font-size: 15px;
    }

    #boxcraft-links .bc-channel-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #boxcraft-links .bc-channel-card {
        min-height: 270px;
        padding: 28px;
        border-radius: 22px;
    }

    #boxcraft-links .bc-channel-content {
        margin-top: 55px;
    }

    #boxcraft-links .bc-channel-content h3 {
        font-size: 44px;
    }

    #boxcraft-links .bc-channel-arrow {
        top: 24px;
        right: 24px;
        width: 44px;
        height: 44px;
    }
}

/* =========================================================
   END BOXCRAFT CHANNELS CLEAN V3
   ========================================================= */


/* =========================================================
   BOXCRAFT FINAL CLEAN V4
   Scope: .final ONLY
   ========================================================= */

.final {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 720px;
    padding: clamp(100px, 10vw, 150px) 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(5,206,120,.20) 0,
            rgba(5,206,120,.09) 22%,
            rgba(5,206,120,0) 52%
        ),
        #f7f9f6;
}

.final .final-glow {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;

    width: min(760px, 70vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: rgba(5,206,120,.09);
    filter: blur(90px);

    pointer-events: none;
}

.final .final-inner {
    position: relative;
    z-index: 2;

    width: min(100%, 900px);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* EYEBROW */

.final .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 0 24px;

    color: #087947;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .18em;
}

.final .eyebrow i {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;
    background: #05ce78;
    box-shadow: 0 0 0 5px rgba(5,206,120,.10);
}

/* HEADLINE */

.final h2 {
    margin: 0;

    color: #09271d;

    font-size: clamp(68px, 8vw, 126px);
    line-height: .82;
    letter-spacing: -.07em;
    font-weight: 800;
}

.final h2 em {
    display: inline-block;

    color: #58a97d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .88em;
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 400;
}

/* TEXT */

.final .final-inner > p {
    max-width: 590px;

    margin: 38px auto 0;

    color: #65746e;

    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.65;
}

/* PRIMARY ACTION */

.final #finish {
    width: min(100%, 410px);
    min-height: 62px;

    margin: 38px auto 0;
    padding: 0 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    border: 0;
    border-radius: 999px;

    background: #09271d;
    color: #ffffff;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;

    box-shadow: 0 18px 45px rgba(9,39,29,.15);

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.final #finish .bc-visual-bold {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.10);

    font-size: 16px;

    transition:
        transform .25s ease,
        background .25s ease;
}

/* PRODUCTION DOWNLOAD */

.final #bcProductionDownload {
    width: min(100%, 410px) !important;
    min-height: 54px !important;

    margin: 12px auto 0 !important;
    padding: 0 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(9,39,29,.16) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.72) !important;
    color: #09271d !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    box-shadow: 0 8px 30px rgba(9,39,29,.05);

    cursor: pointer !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease !important;
}

/*
 * Alter zusätzlicher Download-Button.
 * Produktionsdownload bleibt erhalten.
 */
.final button.bc-download {
    display: none !important;
}

/* RESULT / DESIGN-ID */

.final #result {
    width: min(100%, 590px);
    margin: 22px auto 0;
}

.final #result:empty {
    display: none;
}

.final #result:not(:empty) {
    padding: 24px;

    border: 1px solid rgba(9,39,29,.10);
    border-radius: 24px;

    background: rgba(255,255,255,.78);

    box-shadow: 0 20px 55px rgba(9,39,29,.07);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.final #result .designID {
    margin: 10px 0;

    color: #09271d;

    font-size: clamp(25px, 4vw, 40px);
    line-height: 1;
    font-weight: 850;
    letter-spacing: .04em;
}

/* INTERACTION */

@media (hover:hover) {

    .final #finish:hover {
        transform: translateY(-3px);
        background: #0d3528;
        box-shadow: 0 24px 55px rgba(9,39,29,.21);
    }

    .final #finish:hover .bc-visual-bold {
        transform: rotate(45deg);
        background: #05ce78;
        color: #09271d;
    }

    .final #bcProductionDownload:hover {
        transform: translateY(-2px);
        border-color: #05ce78 !important;
        background: #ffffff !important;
    }
}

/* ACCESSIBILITY */

.final #finish:focus-visible,
.final #bcProductionDownload:focus-visible {
    outline: 3px solid #05ce78;
    outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 700px) {

    .final {
        min-height: 620px;
        padding: 90px 20px;
    }

    .final h2 {
        font-size: clamp(58px, 18vw, 88px);
        line-height: .85;
    }

    .final .final-inner > p {
        margin-top: 28px;
        font-size: 15px;
    }

    .final #finish {
        margin-top: 32px;
        min-height: 58px;
    }

    .final #finish,
    .final #bcProductionDownload {
        width: 100% !important;
        max-width: 410px;
    }
}

/* =========================================================
   END BOXCRAFT FINAL CLEAN V4
   ========================================================= */


/* =========================================================
   BOXCRAFT F04 FINAL
   Six-face selector typography
   ========================================================= */

.bc-face-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.bc-face-tabs button {
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 9px 5px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}

.bc-face-tabs .bc-face-dot {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 0 7px !important;
}

.bc-face-tabs .bc-visual-bold {
    display: block !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;

    white-space: nowrap !important;
}

/* Hexcode – ersetzt die fehlerhafte 5.5px-Regel */
.bc-face-tabs button > small {
    display: block !important;

    margin-top: 5px !important;

    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 650 !important;
    letter-spacing: .015em !important;

    opacity: .64 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Aktive Fläche */
.bc-face-tabs button.active > small {
    opacity: .78 !important;
}

/* Tablet */
@media (max-width: 850px) {
    .bc-face-tabs {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}

/* Sehr kleine Geräte */
@media (max-width: 380px) {
    .bc-face-tabs {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

/* =========================================================
   END BOXCRAFT F04 FINAL
   ========================================================= */


/* =========================================================
   BOXCRAFT F03 FINAL
   Configurator containment
   ========================================================= */

.config-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    /* verhindert intrinsisches Grid-Overflow */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.35fr)
        minmax(0, 1fr) !important;
}

.config-layout > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.config-layout .controls,
.config-layout .model-stage {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Inhalte dürfen ihren Grid-Track nicht aufsprengen */
.config-layout img,
.config-layout canvas,
.config-layout svg {
    max-width: 100%;
}

/* Face-Control bleibt innerhalb der linken Spalte */
.config-layout .bc-face-control,
.config-layout .bc-face-tabs,
.config-layout #palette {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* vorhandene responsive Struktur erhalten */

@media (max-width:1200px) {
    .config-layout {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;
    }

    .config-layout .model-stage {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

@media (max-width:900px) {
    .config-layout {
        grid-template-columns: minmax(0,1fr) !important;
    }

    .config-layout .model-stage {
        grid-column: auto;
    }
}

/* =========================================================
   END BOXCRAFT F03 FINAL
   ========================================================= */



/* =========================================================
   BOXCRAFT F08 F09 FINAL
   Local overflow + hero wordmark containment
   ========================================================= */

/* F08:
   Der rotierte/skalierten Marquee darf seine eigene
   visuelle Box überschreiten, aber nicht die Seite. */
.marquee-clip {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow: clip;
}

.marquee-clip .marquee {
    width: 100%;
    max-width: 100%;
}

/* Dekoration darf keinen horizontalen Dokument-Overflow
   erzeugen. Kein globales html/body overflow:hidden. */
.giant-b {
    max-width: 100%;
}

/* F09:
   Hero-Art bleibt auf der rechten Seite und kann nicht mehr
   über den eigentlichen Text-Layer zeichnen. */
.hero {
    isolation: isolate;
}

.hero-copy {
    position: relative;
    z-index: 5;
}

.hero .hero-art {
    z-index: 2;
}

.hero .bc-hero-wordmark {
    left: auto !important;
    right: clamp(18px, 4vw, 72px) !important;
    width: min(44vw, 650px) !important;
    max-width: 46% !important;
    pointer-events: none;
}

/* Bei engerem Desktop/Tablet wird das dekorative
   Wortzeichen ausgeblendet statt den Inhalt zu überlagern. */
@media (max-width: 1100px) {
    .hero .bc-hero-wordmark {
        display: none !important;
    }
}

/* END BOXCRAFT F08 F09 FINAL */

/* BOXCRAFT_F13_CSS_START */

.bc-mobile-menu-button,
.bc-mobile-menu {
    display: none;
}

@media (max-width: 900px) {

    header.nav {
        z-index: 1000;
    }

    header.nav > nav:not(.bc-mobile-menu),
    header.nav > .nav-cta {
        display: none !important;
    }

    .bc-mobile-menu-button {
        display: flex;
        width: 46px;
        height: 46px;
        padding: 0;
        margin-left: auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        border: 1px solid rgba(9,39,29,.12);
        border-radius: 50%;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        cursor: pointer;
    }

    .bc-mobile-menu-button span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #09271d;
        transition: transform .22s ease, opacity .22s ease;
    }

    .bc-mobile-menu-button[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .bc-mobile-menu-button[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .bc-mobile-menu-button[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .bc-mobile-menu-button:focus-visible {
        outline: 3px solid #05CE78;
        outline-offset: 3px;
    }

    header.nav .bc-mobile-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 14px;
        right: 14px;
        padding: 14px;
        border: 1px solid rgba(9,39,29,.10);
        border-radius: 24px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 24px 70px rgba(9,39,29,.16);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    header.nav .bc-mobile-menu:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bc-mobile-menu > a {
        display: flex;
        min-height: 48px;
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        border-radius: 14px;
        color: #09271d;
        text-decoration: none;
        font-weight: 700;
    }

    .bc-mobile-menu > a:hover,
    .bc-mobile-menu > a:focus-visible {
        background: rgba(5,206,120,.10);
    }

    .bc-mobile-menu-market {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid rgba(9,39,29,.09);
    }

    .bc-mobile-menu-market a {
        display: flex;
        min-height: 46px;
        padding: 0 14px;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(9,39,29,.10);
        border-radius: 14px;
        color: #09271d;
        text-decoration: none;
        font-weight: 700;
    }

    .bc-mobile-menu .bc-mobile-menu-cta {
        margin-top: 8px;
        background: #09271d;
        color: #fff;
    }
}

/* BOXCRAFT_F13_CSS_END */

/* BOXCRAFT_F14_CSS_START */

/*
 Ohne funktionierendes JS bleiben Inhalte grundsätzlich sichtbar.
 Erst wenn app.js IntersectionObserver bestätigt, wird Reveal aktiviert.
*/

.reveal {
    opacity: 1;
    transform: none;
}

html.bc-reveal-ready .reveal {
    opacity: 0;
    transform: translateY(55px);
}

html.bc-reveal-ready .reveal.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.bc-reveal-ready .reveal,
    html.bc-reveal-ready .reveal.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* BOXCRAFT_F14_CSS_END */

/* BOXCRAFT_F10_FOOTER_START */

#bcLegalFooter {
    border-top: 1px solid #dfe8e2;
    margin-top: 70px;
    padding: 34px 5%;
    color: #68766f;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
}

#bcLegalFooter .bc-legal-footer-inner {
    max-width: 1280px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

#bcLegalFooter strong {
    color: #092b20;
    margin-right: auto;
}

#bcLegalFooter a {
    color: inherit;
}

#bcPrivacySettings {
    border: 0;
    padding: 0;
    background: none;
    color: #06794c;
    cursor: pointer;
    font: inherit;
}

/* BOXCRAFT_F10_FOOTER_END */